/* FB Clone | individual category groups, the original white toolbar and uppercase tab headings.
   Loaded after existing CSS to avoid older catalog/header selectors overriding it. */

/* Each category: own header, divider, rounded body; no nested global extra toolbar. */
body.hm-body .hm-shell-main .hm-category-groups {
  display:flex; flex-direction:column; gap:13px; min-width:0;
}
body.hm-body .hm-shell-main .hm-category-panel {
  display:block; min-width:0; background:#fff;
  border:1px solid #dce8f7; border-radius:12px;
  overflow:hidden; box-shadow:0 2px 9px rgba(24,65,108,.045);
}
body.hm-body .hm-shell-main .hm-category-panel-heading {
  box-sizing:border-box; min-height:62px; padding:11px 14px;
  display:flex; align-items:center; gap:10px;
  background:#f3f8ff; border-bottom:1px solid #dde9f6;
}
body.hm-body .hm-shell-main .hm-category-panel-icon {
  flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center;
  border-radius:9px; background:#dceeff; color:#0c69c9;
}
body.hm-body .hm-shell-main .hm-category-panel-icon .site-icon { width:18px;height:18px; }
body.hm-body .hm-shell-main .hm-category-panel-copy { flex:1;min-width:0; }
body.hm-body .hm-shell-main .hm-category-panel-copy h3 {
  margin:0!important; color:#0b4d9e!important;
  font:700 16px/1.3 var(--hm-facebook-font)!important;
  letter-spacing:normal!important; text-transform:uppercase!important;
  overflow-wrap:anywhere;
}
body.hm-body .hm-shell-main .hm-category-panel-copy p {
  margin:3px 0 0!important; color:#687f99; font:400 11px/1.4 var(--hm-facebook-font);
}
body.hm-body .hm-shell-main .hm-category-panel-link {
  display:inline-flex; align-items:center; gap:5px; flex:none;
  padding:7px 9px; border:1px solid #d1e4f9;
  border-radius:8px; background:#fff; color:#1263b6;
  font-size:11px; font-weight:700; text-decoration:none;
}
body.hm-body .hm-shell-main .hm-category-panel-link:hover { background:#e8f4ff; }
body.hm-body .hm-shell-main .hm-category-panel-link .site-icon { width:14px;height:14px; }
body.hm-body .hm-shell-main .hm-category-panel-content {
  background:#fafcff; padding:10px; min-width:0;
}
/* Preserve JS row normalization and compact 3-column action heights. */
body.hm-body .hm-shell-main .hm-category-panel .hm-product-list {
  margin:0!important; padding:0!important; gap:8px!important;
}
body.hm-body .hm-shell-main .hm-category-panel .hm-product-list>.hm-product-row {
  min-width:0; background:#fff;
}
@media(max-width:600px){
  body.hm-body .hm-shell-main .hm-category-panel-heading { padding:9px 10px; min-height:54px; gap:7px; }
  body.hm-body .hm-shell-main .hm-category-panel-content { padding:7px; }
  body.hm-body .hm-shell-main .hm-category-panel-copy h3 { font-size:14px!important; }
  body.hm-body .hm-shell-main .hm-category-panel-link { font-size:10px; padding:5px 6px; }
  body.hm-body .hm-shell-main .hm-category-panel-icon { flex-basis:30px;width:30px;height:30px; }
}
/* All primary TAB headings use uppercase text, but product/article names,
   sidebar labels, buttons and informational paragraphs keep natural case. */
body.hm-body .hm-shell-main .hm-market-heading .hm-market-copy>h2,
body.hm-body .hm-shell-main .hm-section-top>div>h1,
body.hm-body .hm-shell-main .hm-unified-head:not(.hm-article-head) .hm-unified-head-copy>h1,
body.hm-body .hm-shell-main .hm-account-unified-head h1,
body.hm-body .hm-shell-main .hm-public-info-heading h1,
body.hm-body .hm-shell-main .hm-public-info-heading .hm-public-info-kicker {
  text-transform:uppercase!important;
}


/* Toolbar compact v3: 30% less desktop height (100px -> 70px).
   Overrides the earlier 100px header declarations in member_market_sidepanel.css
   without touching the white toolbar, its search, or its wallet/order actions. */
@media (min-width:761px) {
  body.hm-body.hm-member {
    --hm-shared-toolbar-height:70px;
  }
  body.hm-body.hm-member .hm-header.hm-header-logged {
    box-sizing:border-box!important;
    height:70px!important;
    min-height:70px!important;
    max-height:70px!important;
    padding:6px clamp(10px,1.1vw,18px)!important;
    align-items:center!important;
    align-content:center!important;
    grid-template-rows:minmax(0,1fr)!important;
  }
  body.hm-body.hm-member .hm-header .hm-toolbar-brand img {
    height:52px!important;
    max-height:52px!important;
    width:100%!important;
    object-fit:contain!important;
  }
  /* Search and icon shortcuts remain 44px high and share their centre line. */
  body.hm-body.hm-member .hm-header .hm-header-middle,
  body.hm-body.hm-member .hm-header .hm-header-actions {
    align-self:center!important;
    margin-block:0!important;
  }
  body.hm-body.hm-member .hm-header .hm-header-middle > .hm-search {
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
  }
  body.hm-body.hm-member .hm-header .hm-header-actions > .hm-header-action {
    height:44px!important;
    min-height:44px!important;
  }
}
/* On small displays, preserve the two-row search layout & tap target sizes,
   but remove excess vertical padding and reduce the logo footprint. */
@media (max-width:760px) {
  body.hm-body.hm-member .hm-header.hm-header-logged {
    padding:6px 10px!important;
    gap:6px!important;
  }
  body.hm-body.hm-member .hm-header .hm-toolbar-brand img {
    height:36px!important;
    max-height:36px!important;
  }
}

/* PRODUCT NAMES | The headings inside product cards must use the same
   Arial/Helvetica typography, blue color and 700 weight as category titles.
   Keep product names in their original letter case and preserve compact rows.
   This file is loaded last, after fbclone_catalog_v36.css and
   member_market_sidepanel.css; selectors cover both PHP and JS-rendered rows. */
body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-v36-primary > :is(h2,h3),
body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-v36-primary > :is(h2,h3) > a,
body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-product-row-info > :is(h2,h3),
body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-product-row-info > :is(h2,h3) > a {
  font-family:var(--hm-facebook-font)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:normal!important;
  font-style:normal!important;
  text-transform:none!important;
  text-decoration:none!important;
  text-shadow:none!important;
  color:#0b4d9e!important;
  overflow-wrap:anywhere;
}
body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-v36-primary > :is(h2,h3) > a:hover,
body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-product-row-info > :is(h2,h3) > a:hover {
  color:#075fb6!important;
}
@media (max-width:600px) {
  body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-v36-primary > :is(h2,h3),
  body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-v36-primary > :is(h2,h3) > a,
  body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-product-row-info > :is(h2,h3),
  body.hm-body .hm-shell-main .hm-category-panel .hm-product-row .hm-product-row-info > :is(h2,h3) > a {
    font-size:14px!important;
  }
}