/* MSL shop header — ported from the retired CI4 store (2026-08-06).
 * Palette + type are lifted verbatim from that store's inline <style>; the selectors are
 * Storefront's, because the DOM it already renders (logo + product search in .col-full, then
 * .storefront-primary-navigation) is the same shape as the CI4 header. So this is a restyle,
 * not a markup replacement — nothing here removes a Storefront hook, so plugins and the
 * responsive menu keep working. */

:root{
  --msl-navy:#1E2A45; --msl-navy2:#2b3c60; --msl-accent:#c8102e; --msl-accent2:#a10d24;
  --msl-ink:#1a2233;  --msl-mut:#697488;   --msl-line:#e5e9f1;   --msl-bg:#f5f7fb;
}

body, .site { font-family: Roboto, system-ui, "Segoe UI", Arial, sans-serif; color: var(--msl-ink); }
h1,h2,h3,.mont,
.site-header .site-search button,
.storefront-primary-navigation { font-family: Montserrat, system-ui, sans-serif; }

/* ---- the sticky white bar (CI4 `.hd`) ------------------------------------------------ */
/* Jason 2026-08-06: "the shop header is way too tall". The CI4 values (11px padding, 38px logo)
 * were fine on a page with no nav bar under them; stacked with Storefront's department nav they
 * pushed the first product ~400px down the page. Tightened to a compact commerce bar. */
.site-header{
  position: sticky; top: 0; z-index: 500;
  background:#fff; border-bottom:1px solid var(--msl-line);
  box-shadow:0 1px 12px rgba(30,42,69,.06);
  padding: 6px 0;
}
.site-header .col-full{
  display:flex; align-items:center; gap:20px;
  padding-top:0; padding-bottom:0;
}
.site-header .site-branding{ margin:0; padding:0; flex:0 0 auto; }
.site-header .site-branding .custom-logo{ height:30px; width:auto; max-width:none; display:block; }
/* Storefront ships generous vertical rhythm on the masthead; zero it or the padding above is moot. */
.site-header .site-branding,
.site-header .site-search,
.site-header .site-header-cart{ margin-bottom:0; }
.storefront-primary-navigation{ padding:0; }
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a{ padding-top:10px; padding-bottom:10px; }
/* Storefront reserves a column width for branding; the flex row above owns the layout now. */
.site-header .site-branding, .site-header .site-search{ float:none; width:auto; }

/* ---- search: pushed right, red submit (CI4 `.hd form`) -------------------------------
 * ⚠ display+order are explicit. After the Departments block was moved between the branding and
 * the search, the search rendered but was invisible on the page — a screenshot caught it; the DOM
 * dump did not, because the markup was present and correct the whole time. Presence in the DOM is
 * not proof that something is on screen. */
.site-header .site-branding{ order:1; }
.site-header .storefront-primary-navigation{ order:2; }
.site-header .site-search{ order:3; display:block !important; margin-left:auto; flex:1 1 320px; max-width:540px; }
.site-header .site-search .widget{ margin:0; padding:0; border:0; }
.site-header .site-search form.woocommerce-product-search{ display:flex; margin:0; }
.site-header .site-search input.search-field{
  flex:1; border:1px solid var(--msl-line); border-right:0;
  border-radius:8px 0 0 8px; padding:10px 15px; font-size:.95rem; outline:none; box-shadow:none;
}
.site-header .site-search input.search-field:focus{ border-color:var(--msl-navy); }
.site-header .site-search button{
  border:0; background:var(--msl-accent); color:#fff; font-weight:700;
  padding:0 20px; border-radius:0 8px 8px 0; cursor:pointer;
}
.site-header .site-search button:hover{ background:var(--msl-accent2); }

/* ---- departments: a hamburger IN the header bar, not a full-width row ----------------
 * Jason 2026-08-06: "the menu should not take up so much room or be a hamburger menu".
 * 15 departments across a dedicated navy strip cost a whole row (~40px) and still truncated.
 * The JS in msl-shop-header.php relocates this block into the header's flex row; from here it
 * is a single "Departments" button that drops the full list down. Net: the row disappears. */
.site-header .storefront-primary-navigation{ background:none; padding:0; flex:0 0 auto; position:relative; }
/* the relocated block still carries Storefront's centring container — neutralise it */
.site-header .storefront-primary-navigation .col-full{ max-width:none; width:auto; padding:0; margin:0; display:block; }
.site-header .main-navigation{ margin:0; }
.site-header .main-navigation .menu-toggle{ display:none; }   /* Storefront's own mobile toggle */

.msl-dept-toggle{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--msl-navy); color:#fff; border:0; border-radius:8px;
  padding:9px 15px; font-family:Montserrat, system-ui, sans-serif; font-weight:600; font-size:.9rem;
  white-space:nowrap;
}
.msl-dept-toggle:hover{ background:var(--msl-navy2); }
.msl-burger{ width:16px; height:11px; position:relative; display:inline-block; }
.msl-burger::before, .msl-burger::after, .msl-burger span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
}
.msl-burger::before{ top:0; } .msl-burger span{ top:4.5px; } .msl-burger::after{ bottom:0; }

/* the drop-down panel */
.site-header .main-navigation ul.menu,
.site-header .main-navigation ul.nav-menu{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:600;
  min-width:280px; background:var(--msl-navy); border-radius:10px; padding:6px 0;
  box-shadow:0 18px 44px rgba(18,27,48,.34);
}
.site-header .storefront-primary-navigation.msl-open .main-navigation ul.menu,
.site-header .storefront-primary-navigation.msl-open .main-navigation ul.nav-menu{ display:block; }
.site-header .main-navigation ul.menu li{ float:none; display:block; width:auto; }
.site-header .main-navigation ul.menu > li > a{
  color:#fff; font-weight:600; font-size:.88rem; padding:8px 18px; display:block;
}
.site-header .main-navigation ul.menu > li > a:hover{ background:var(--msl-navy2); }
/* sub-menus would open a second floating layer off a floating layer — flatten them away */
.site-header .main-navigation ul.menu ul.sub-menu{ display:none !important; }

/* ---- hero (CI4 `.hero`) ------------------------------------------------------------- */
.msl-hero{
  position:relative; color:#fff; background-color:var(--msl-navy);
  background-image:linear-gradient(100deg,rgba(18,27,48,.92) 28%,rgba(18,27,48,.5)),var(--msl-hero-img);
  background-position:center 40%; background-size:cover;
  margin-bottom:28px;
}
.msl-hero .in{ max-width:1240px; margin:0 auto; padding:22px 24px; }
.msl-hero .copy{ max-width:620px; }
.msl-hero h1{ font-size:1.45rem; font-weight:700; margin:0; letter-spacing:-.2px; color:#fff; }
.msl-hero p{ color:#c8d4e8; font-size:.95rem; margin:2px 0 0; }
.msl-hero form{ display:flex; max-width:580px; box-shadow:0 14px 40px rgba(0,0,0,.32); border-radius:12px; overflow:hidden; }
.msl-hero input[type=search]{ flex:1; border:0; padding:16px 20px; font-size:1.05rem; outline:none; border-radius:0; }
.msl-hero button{
  border:0; background:var(--msl-accent); color:#fff; font-weight:800; font-size:1.02rem;
  padding:0 30px; cursor:pointer; font-family:Montserrat, system-ui, sans-serif; border-radius:0;
}
.msl-hero button:hover{ background:var(--msl-accent2); }

/* ---- section headings (CI4 `h2.sec` — the red tick) --------------------------------- */
.woocommerce-products-header__title,
.site-main > h2:first-of-type{
  font-size:1.5rem; color:var(--msl-navy);
  display:flex; align-items:center; gap:9px;
}
.woocommerce-products-header__title::before{
  content:""; width:5px; height:22px; background:var(--msl-accent); border-radius:3px; flex:0 0 auto;
}

/* ---- product cards (CI4 `.card`) ----------------------------------------------------- */
ul.products li.product{
  border:1px solid var(--msl-line); border-radius:13px; background:#fff; overflow:hidden;
  padding:0 0 14px; transition:box-shadow .16s, transform .16s;
}
ul.products li.product:hover{ box-shadow:0 12px 30px rgba(30,42,69,.14); transform:translateY(-3px); }
ul.products li.product img{ margin:0 0 10px; }
ul.products li.product .woocommerce-loop-product__title{ padding:0 12px; font-size:.95rem; }
ul.products li.product .price{ padding:0 12px; color:var(--msl-navy); font-weight:700; }

@media (max-width:780px){
  .msl-hero .in{ padding:52px 20px; }
  .msl-hero h1{ font-size:1.7rem; }
  .site-header .col-full{ flex-wrap:wrap; }
  .site-header .site-search{ max-width:none; flex-basis:100%; margin-left:0; }
}

/* ---- sidebar: wider so category names stop wrapping --------------------------------
 * Jason 2026-08-06: "the side bar need to be wider so it doesnt wrap". Storefront's default
 * split left ~23% for the sidebar, which is not enough for "Doors, Windows & Hardware" plus a
 * 4-digit count — the count wrapped to its own line on 6 of the 15 departments.
 * Two changes, both needed: more width, AND the count pinned to the right of the row so it can
 * never be what wraps. */
@media (min-width: 768px) {
  /* ⚠ Storefront floats these and puts a 4.35% gutter on .content-area. The widths must total
   * 100% WITH that gutter — 70 + 27.5 + 4.35 = 101.85 overflowed and the sidebar dropped below
   * the whole product grid, i.e. "wider sidebar" silently became "no sidebar". Set the margin
   * here too so the sum is explicit and cannot drift. */
  .site-content .content-area { width: 68%; margin-right: 4%; }
  .site-content .widget-area  { width: 28%; }
}
.widget_product_categories ul.product-categories li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.widget_product_categories ul.product-categories li > a { flex: 1 1 auto; min-width: 0; }
.widget_product_categories ul.product-categories .count {
  flex: 0 0 auto; white-space: nowrap; color: var(--msl-mut); font-size: .82rem;
}
/* the nested sub-category list must inherit the same row treatment or it re-wraps */
.widget_product_categories ul.children li { display: flex; justify-content: space-between; gap: 10px; }

/* ---- header height: Storefront's own masthead padding ------------------------------
 * The padding zeroing above is not enough on its own — Storefront pads .site-header via a
 * body-class rule that outranks a bare .site-header selector. */
.woocommerce-active .site-header,
body .site-header { padding-top: 6px; padding-bottom: 6px; }
.site-header .col-full { min-height: 0; }

/* ---- ⚠ SPECIFICITY: Storefront sizes the header parts with `.woocommerce-active .site-header X`
 * (three classes). Every `.site-header X` rule above loses to it, so .site-branding kept its ~38%
 * column width inside our flex row, the row overflowed the viewport, and the SEARCH BOX was pushed
 * off-screen to the right — invisible on the page while still present in the DOM. A DOM dump said
 * it was "there"; only a screenshot with outlines showed where. Match their specificity or the
 * header silently mis-lays-out. */
.woocommerce-active .site-header .site-branding{ width:auto; float:none; margin:0; flex:0 0 auto; }
.woocommerce-active .site-header .storefront-primary-navigation{ width:auto; float:none; margin:0; flex:0 0 auto; }
.woocommerce-active .site-header .site-search{
  width:auto; float:none; margin:0 0 0 auto; clear:none;
  flex:1 1 300px; max-width:520px; display:block;
}
.woocommerce-active .site-header .col-full{ flex-wrap:nowrap; }

/* the sub-category list must drop to its own line, not become a third flex item beside the
 * link and the count — that is what made "Sanitation & Waste" render sideways in a column */
.widget_product_categories ul.product-categories li{ flex-wrap:wrap; }
.widget_product_categories ul.product-categories li > ul.children{
  flex:1 0 100%; margin:4px 0 4px 14px;
}
.widget_product_categories ul.children li{ flex-wrap:wrap; }

/* Storefront hangs a 1.41575em bottom margin on each header part. With align-items:center that
 * margin is counted in the item's box, so every part settled at a different height and the row
 * looked ragged even though it WAS a single row. Zero them at the row level. */
.woocommerce-active .site-header .col-full{ flex-wrap:nowrap; align-items:center; }
.site-header .col-full > *{ margin-top:0; margin-bottom:0; }

/* Catalog mode: the store cannot take an order, so a cart total in the header is a promise we
 * do not keep. Remove it with the mu-plugin when selling starts. */
.site-header .site-header-cart{ display:none; }

/* ---- product tile image box: FIXED SQUARE ------------------------------------------
 * Jason 2026-08-06: "missing a image make the item box 10x taller than it should be".
 * Woo emits the thumbnail with no height constraint, so a product whose image is absent (or
 * whose file 404s) falls back to a placeholder at its natural size and stretches that one tile,
 * which drags the whole grid row with it. Pinning the aspect ratio makes the box the same size
 * whether the image is there, missing, huge or tiny — the CI4 store did this with `.card .ph`.
 * object-fit:contain, never cover: a part photo cropped to fill is a part you cannot identify. */
ul.products li.product img,
ul.products li.product a img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  background:var(--msl-bg); margin:0 0 10px; display:block;
}
ul.products li.product{ display:flex; flex-direction:column; }