/* ──────────────────────────────────────────────────────────────────────────
   Sigma-Aldrich — per-shop brand layer.

   Loaded LAST in views/partials/header.ejs, after public/css/sigmaaldrich.css.

   Why a separate file: `sigmaaldrich.css` is REGENERATED wholesale by
   site-factory/generate-identity.js, so anything hand-authored there is lost
   the next time identity is rebuilt. Per-shop corrections live here instead.
   (Fleet convention — several sibling builds carry the same per-shop
   correction layer.)

   Keep this file to CORRECTIONS ONLY. If a rule here is really a fleet-wide
   fix, promote it into generate-identity.js and delete it from this file in
   the same change — a stale copy here silently wins over the generator.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Header fit on narrow viewports ───────────────────────────────────────
   This shop's legal name — "Sigma-Aldrich (Shanghai) Trading Co., Ltd." — is
   42 characters, the longest in the fleet. The identity layer sets the logo
   sub-line to `white-space: nowrap` with 0.1em tracking, which at 0.54rem
   makes it ~215px of unshrinkable text. On a 390px viewport that pushed
   `.logo` to 403px and `.header-actions` to 612px, carrying the warehouse
   picker and the Cart button off the right edge — the same class of defect as
   the QST header-cart overflow.

   mobile-audit.js reported 57 overflow issues across the audited pages before
   this block and PASSes after it. Shorter-named shops never hit it, which is
   why it belongs here rather than in the generator. */
@media (max-width: 640px) {
    /* Let the whole lockup shrink instead of forcing the row wider. */
    .header .logo,
    .logo {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
    }

    .header .logo-text,
    .logo-text {
        min-width: 0;
        overflow: hidden;
    }

    /* The sub-line is decorative at this size: the wordmark and the seal
       already identify the shop. Drop the tracking, allow it to ellipsis
       rather than to push, and cap it well inside the viewport. */
    .header .logo-text small,
    .logo-text small {
        display: block;
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.04em;
        font-size: 0.5rem;
    }

    /* Never let the actions cluster force horizontal scroll. */
    .header .header-actions,
    .header-actions {
        min-width: 0;
        flex: 0 1 auto;
    }

    .header .warehouse-btn,
    .warehouse-btn {
        min-width: 0;
        max-width: 34vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .header .cart-btn,
    .cart-btn {
        flex: 0 0 auto;
    }
}

/* Below ~430px the sub-line has no room worth the cost; the wordmark, the
   seal and the favicon all still identify the shop. */
@media (max-width: 430px) {
    .header .logo-text small,
    .logo-text small {
        display: none;
    }
}

/* ── Real brand marks ─────────────────────────────────────────────────────
   The header now carries the actual Sigma-Aldrich lockup (atom mark +
   wordmark) from brand-references/sigmaaldrich/sigma-aldrich-logo.png rather
   than a generated emblem. It is a WIDE image where the identity layer
   expects a ~36px square, so the square sizing has to be undone here. The
   favicon/PWA set is the purple Merck "M" — which is what the real
   sigmaaldrich.com serves — and the Merck wordmark is available at
   /logo-merck.png for secondary use. */
.header .logo-lockup-img,
.logo-lockup-img {
    width: auto;
    height: 30px;
    max-width: 230px;
    border-radius: 0;          /* the identity layer rounds the square avatar */
    background: none;
    box-shadow: none;
    object-fit: contain;
    flex: 0 0 auto;
}

/* The legal-name sub-line is now the only text in the lockup, so give it the
   room the wordmark used to take and keep the seal beside it. */
.header .logo-text,
.logo-text {
    display: flex;
    align-items: center;
    min-width: 0;
}
.header .logo-text small .cn-seal,
.logo-text small .cn-seal {
    margin-left: 6px;
    vertical-align: middle;
}

@media (max-width: 860px) {
    .header .logo-lockup-img,
    .logo-lockup-img { height: 26px; max-width: 190px; }
}
@media (max-width: 640px) {
    .header .logo-lockup-img,
    .logo-lockup-img { height: 24px; max-width: 46vw; }
}


/* ── Header fit, second pass (after the real lockup landed) ───────────────
   Measured on the live page at a 1536px viewport: `.logo` came out 531px wide
   (220px lockup + a 299px legal-name sub-line) which, with the 685px nav and
   the 211px actions cluster, ran the header to 1651px inside a 1200px
   `.container` — 291px of overflow that carried the Cart button off the right
   edge. Exactly the QST header-cart failure.

   The sub-line is redundant now that the mark itself reads SIGMA-ALDRICH: the
   full legal name is still in <title>, the JSON-LD Organization block and the
   footer. Keep only the 西 seal beside the mark. */
.header .logo-text small,
.header .logo-text > small {
    display: none !important;
}
.header .logo-text {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
}
.header .logo-text .cn-seal,
.header .logo .cn-seal {
    display: inline-flex;
    margin-left: 10px;
}
.header .logo {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0;
}

/* ── Tap targets ─────────────────────────────────────────────────────────
   mobile-audit at 390px reported the warehouse picker at 37x44 and the
   hamburger at 35x44 — both under the 44x44 minimum on the width axis only.
   The identity layer's tighter horizontal padding is what shaves them, so the
   floor is restored here rather than in the generator. */
@media (max-width: 860px) {
    .header .warehouse-btn,
    .warehouse-btn,
    .header .hamburger-btn,
    .hamburger-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* The hero trust row ("Janoshik Tested · PeptideMeter Verified · Buyer
   Protection") renders as inline text links 21px tall — under the 44px touch
   floor on the height axis. Give them the touch height without changing how
   they look: the box grows, the text does not move. */
@media (max-width: 860px) {
    a.trust-bar-item,
    .trust-bar .trust-bar-item,
    .hero-trust-item a,          /* the class-less <a> the audit flagged */
    .hero-trust a,
    .trust-badges a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ── Tablet / small-laptop header band (768–1199px) ───────────────────────
   PRE-EXISTING FLEET DEFECT, fixed here for this shop only.

   global.css reveals the desktop nav from `min-width: 768px` and only drops
   the hamburger below 767px — but the row does not actually fit until ~1200px.
   Measured on this shop with the warehouse modal dismissed (it masks the
   header while open, which is why a naive audit misses this):

       768px  -> scrollWidth 1103   860px -> 1143   900/1000px -> 1173
      1100px  -> 1181            1200px -> 1200 (fits)

   i.e. every width from 768 to 1199 pushes the Cart button past the right
   edge. Two sibling builds measure the same way at 900px (1058 and 1012),
   so this wants promoting into the fleet stylesheet rather than living here
   forever. (Names withheld: this file is served to the public.)

   Two-part fix, because the cause differs across the band:
     768–1023  the eight nav items cannot fit at any sane size -> keep the
               hamburger, which is already wired (#mobileMenu ships in the
               header partial at every width).
     1024–1199 they fit once the spacing is tightened -> keep the desktop nav
               and tighten it, rather than hiding navigation on a laptop. */

@media (min-width: 768px) and (max-width: 1023px) {
    .header .nav-desktop { display: none !important; }
    .header .hamburger-btn,
    .hamburger-btn { display: flex !important; }
    .header .mobile-only,
    .mobile-only { display: flex; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .header .nav-links { gap: 0; }
    .header .nav-link {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 0.82rem;
        letter-spacing: 0;
    }
    .header .header-actions { gap: 6px; }
    .header .warehouse-btn { padding-left: 6px; padding-right: 6px; font-size: 0.74rem; }
    .header .cart-btn { padding-left: 12px; padding-right: 12px; }
    .header .logo-lockup-img,
    .logo-lockup-img { height: 25px; max-width: 175px; }
}