/* ──────────────────────────────────────────────────────────────────────────
   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 — see the *-brand.css files on asymchem/genscript/
   polypeptide/sinopep/thermofishersci.)

   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;
    }
}