/* NSCC design-audit fixes (fix-header), 2 Nov 2026 - see includes/header.php for load order. */

/* ===========================================================================
   Header + search, after the design audit
   ---------------------------------------------------------------------------
   Loaded after app.css, typography.css and theme-refresh.css, so a rule here
   wins any tie on specificity. Each block names the app.css rule it beats.

   The direction: the header is neutral chrome. White fields with grey
   hairlines, ink labels at 500, and the brand pink kept for the two things
   that act - the Search button and the All Categories button - plus the
   "you are here" underline and the focus ring.
   =========================================================================== */

/* --- 1. Skip link: no shadow while it is parked off-screen ----------------
   .sik-skip is translated above the page with a 32px lift shadow that bled
   ~24px of grey onto the top bar (and onto the drawer heads). (0,2,0) beats
   .sik-skip (0,1,0); the shadow comes back the moment the link has focus.
   The only copy of this rule (fix-drawer.css points here). */
.sik-skip:not(:focus) { box-shadow: none; }

/* --- 2. Announcement strip: no 5-second blink on desktop ------------------
   From 1200px all four messages sit side by side (theme-refresh.css), but
   header.js still moves .is-active every 5s and app.css's (0,4,0) fade-in
   rule replayed on whichever message had it. Same specificity, later file.
   Tablets keep the one-at-a-time rotation, phones the ticker. */
@media (min-width: 1200px) {
    .sik-announce__row--static.is-rotating .sik-announce__item.is-active { animation: none; }
}

/* --- 3. Sticky header: opaque, no blur, no pink hairline -------------------
   86% white over a 16px blur smeared the pink hero and cards through the bar
   on phones. (0,3,1) beats the @supports `.sik-header--sticky.is-stuck`
   (0,2,0); the operator's own header colour still wins through --sik-hd-bg.
   No backdrop-filter also means the header is no longer a containing block
   for fixed descendants (the suggestion scrim below relies on that). The
   stuck shadow from 6b / 7b stays. */
body .sik-header--sticky.is-stuck {
    background: var(--sik-hd-bg, var(--sik-hd-bg-auto, var(--sik-surface)));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body .sik-header.is-stuck::after { content: none; }

/* --- 4. Desktop: two calm rows (72px + 48px) ------------------------------
   Row 1 is the wordmark, the search field and the actions, centred in the
   72px header_height. The Popular chips leave the desktop row (the same
   terms are in the dropdown as "Trending"); the phone chip row is in
   .sik-header__searchrow and is untouched by this. Nav links drop from 56px
   at weight 700 to 48px at 500 - the current item carries the emphasis. */
@media (min-width: 1024px) {
    body.sik-hstyle--commerce .sik-header__row {
        row-gap: 0;
        grid-template-rows: minmax(var(--sik-header-base), auto) auto;
    }
    .sik-header__row > .sik-search .sik-search__popular { display: none; }
    body.sik-hstyle--commerce .sik-nav__link {
        min-height: 48px;
        font-weight: var(--sik-hd-navfw-set, var(--fw-medium));
    }
}

/* --- 5. "All Categories": one flat button in every state ------------------
   app.css 6b's hover / open / current rules - `body .sik-nav__link:hover`
   (0,2,1), `body .sik-nav__item.is-open > .sik-nav__link` (0,3,1),
   `body .sik-nav__link.is-current` (0,2,1) and the body.sik-hhover--*
   variants (0,4,1) - all out-ranked the button's own skin, so it went white-
   on-near-white on hover and dark-on-pink on a category page. These are
   (0,3,1) / (0,4,1) and load later. navbar.php no longer marks it current.
   The brand glow, the lip and the 12px lozenge radius go: a flat 40px,
   8px-radius button with a 500-weight label. */
@media (min-width: 1024px) {
    body .sik-header .sik-nav__link--browse,
    body .sik-header .sik-nav__link--browse:hover,
    body .sik-header .sik-nav__link--browse:focus-visible,
    body .sik-header .sik-nav__link--browse.is-current,
    body .sik-header .sik-nav__item.is-open > .sik-nav__link--browse {
        background: var(--sik-grad-cta);
        color: var(--sik-on-cta);
        box-shadow: none;
        filter: none;
    }
    body .sik-header .sik-nav__link--browse:hover,
    body .sik-header .sik-nav__item.is-open > .sik-nav__link--browse { filter: brightness(.93); }
    body .sik-header .sik-nav__link--browse:focus-visible {
        outline: 2px solid var(--sik-primary);
        outline-offset: 2px;
    }
    body.sik-hstyle--commerce .sik-header .sik-nav__link--browse {
        min-height: 40px;
        padding-inline: var(--sp-4);
        gap: var(--sp-2);
        border-radius: var(--sik-radius-sm);
        font-weight: var(--fw-medium);
    }
    body .sik-header .sik-nav__link--browse .sik-nav__text { font-size: var(--fs-base); }
}
/* 1024-1199 is where app.css tightens the whole row so eight labels print
   whole; the button keeps its share of that. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    body.sik-hstyle--commerce .sik-header .sik-nav__link--browse { padding-inline: 10px; }
    body .sik-header .sik-nav__link--browse .sik-nav__text { font-size: var(--fs-sm); }
}

/* --- 6. "All Categories" panel: the real ranges, two columns ---------------
   With the browse item set to a mega panel (Menu Builder), each department
   lists its ranges. Only this item's panel widens; the others keep 340px.
   The ranges are stored biggest first, so the columns read DOWN (Clutcher,
   Juda, Hair Clips... then the rest) rather than across in pairs: CSS
   columns instead of app.css's grid, each row kept whole. */
@media (min-width: 1024px) {
    body .sik-nav__item:has(> .sik-nav__link--browse) > .sik-mega--stack { --sik-mega-w: 520px; }
    body .sik-nav__item:has(> .sik-nav__link--browse) .sik-mega__sub {
        display: block;
        columns: 2;
        column-gap: var(--sp-2);
        padding-left: var(--sp-6);
    }
    body .sik-nav__item:has(> .sik-nav__link--browse) .sik-mega__sub > li {
        break-inside: avoid;
        padding-bottom: 2px; /* app.css's 2px grid gap, as a column-safe spacer */
    }
}
/* Range rows a little tighter for a mouse, so all three departments fit the
   panel's 560px at 1280x800 without scrolling. Touch keeps app.css's 44px. */
@media (min-width: 1024px) and (pointer: fine) {
    body .sik-nav__item:has(> .sik-nav__link--browse) .sik-mega__link--sub {
        min-height: 34px;
        padding-block: var(--sp-1);
    }
}

/* --- 7. Header actions: real widths, 500-weight labels --------------------
   6b's `body .sik-action` (0,1,1) fixed every action at 44px, so the 61px
   "Track order" label spilled 8px each side into "Wishlist". (0,3,1) gives
   each action its label's width (44px minimum) and the hover tint then
   covers icon and word together. The theme toggle stays a 44px circle. */
@media (min-width: 1024px) {
    body .sik-header .sik-actions .sik-action {
        width: auto;
        min-width: var(--sik-hd-tap, var(--tap));
        height: auto;
        min-height: var(--sik-hd-tap, var(--tap));
        padding: var(--sp-1) var(--sp-2);
        border-radius: var(--sik-radius-sm);
    }
    body .sik-header .sik-actions .sik-action--theme {
        width: var(--sik-hd-tap, var(--tap));
        height: var(--sik-hd-tap, var(--tap));
        padding: 0;
        border-radius: 50%;
    }
    body .sik-header .sik-action__label {
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        color: var(--sik-ink-2);
    }
}

/* --- 8. Search field: white, grey hairline, pink only on the button --------
   The field used to be filled with the pink-tinted --sik-surface-2, with a
   pink magnifier and a glowing button. Now: a white field, a grey 1px border
   that darkens on hover, the pink focus ring while typing, and one solid pink
   pill inset 4px from the edge. The magnifier turns brand only on focus.
   Desktop selectors are (0,3,0)/(0,4,0) against app.css's (0,2,0). */
.sik-header .sik-search--header .sik-search__leading { color: var(--sik-muted); }
.sik-header .sik-search--header .sik-search__field:focus-within .sik-search__leading { color: var(--sik-primary-ink); }
.sik-header .sik-search--header .sik-search__submit,
.sik-header .sik-search--header .sik-search__submit:hover { box-shadow: none; }

@media (min-width: 1024px) {
    .sik-header__row > .sik-search .sik-search__field {
        min-height: 44px;
        padding-inline: var(--sp-4) var(--sp-1);
        background: var(--sik-surface);
        border: 1px solid var(--sik-line-strong);
    }
    .sik-header__row > .sik-search .sik-search__field:hover {
        border-color: color-mix(in srgb, var(--sik-text) 35%, var(--sik-surface));
    }
    .sik-header__row > .sik-search .sik-search__field:focus-within {
        border-color: color-mix(in srgb, var(--sik-primary) 55%, transparent);
        box-shadow: var(--sik-focus-ring);
        background: var(--sik-surface);
    }
    .sik-header__row > .sik-search .sik-search__submit {
        height: 36px;
        padding: 0 var(--sp-4);
        box-shadow: none;
    }
    .sik-header__row > .sik-search .sik-search__submit-label {
        font-size: var(--fs-base);
        font-weight: var(--fw-medium);
    }
}

/* --- 9. Phone / tablet search row ------------------------------------------
   The same white field as the desktop one. The Popular chips go from 11px
   text on 24px pills to 13px on 32px pills, white with a grey hairline; the
   "Popular" label (which scroll-snap kept scrolling out of view) goes, and
   the row fades out at the right edge instead of being cut. `:nth-of-type(n)`
   lifts the chip rule to (0,3,1) so it beats 7b's `a:nth-of-type(n+3)` and
   the 1279/1439 display:none rules. The 7b rule that hides the chips once
   the header is stuck is untouched. */
@media (max-width: 1023.98px) {
    .sik-header__searchrow .sik-search .sik-search__field {
        background: var(--sik-surface);
        border-color: var(--sik-line-strong);
    }
    .sik-header__searchrow .sik-search .sik-search__field:focus-within {
        border-color: color-mix(in srgb, var(--sik-primary) 55%, transparent);
    }
    .sik-header__searchrow .sik-search__popular {
        gap: var(--sp-2);
        margin-top: var(--sp-2);
        padding-inline: 0;
        scroll-snap-type: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    .sik-header__searchrow .sik-search__popular-label { display: none; }
    .sik-header__searchrow .sik-search__popular a:nth-of-type(n) {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        font-weight: var(--fw-normal);
        line-height: 1;
        background: var(--sik-surface);
        border: 1px solid var(--sik-line);
        color: var(--sik-ink-2);
    }
    .sik-header__searchrow .sik-search__popular a::after { content: none; }
}
/* A tablet's field spans the container, so its left edge lines up with the
   wordmark's instead of floating centred at 560px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sik-header__searchrow .sik-search { max-width: none; margin-inline: 0; }
}

/* --- 10. Suggestion panel ---------------------------------------------------
   The header field now opens its own panel (search.js no longer hands it to
   the blurred dialog), so it sits 8px under the field over a scrim that dims
   the page but not the header. The scrim is under the sticky header (z 60)
   and over everything else in the page; a click on it lands on <body>, which
   search.js already treats as "close". */
body:has(#sikHeader .sik-suggest.is-open)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 1);
    background: var(--sik-scrim);
    animation: sik-pop-fade var(--dur-base) var(--ease-out) both;
}
/* A non-sticky header sits at z 50, under the scrim; lift it while open. */
body:has(#sikHeader .sik-suggest.is-open) #sikHeader { z-index: var(--z-header); }
.sik-header .sik-search > .sik-suggest { top: calc(100% + var(--sp-2)); }

/* Phones and tablets with the bottom bar. The bar is z 60 too and comes later
   in the page, so it painted over the panel's last rows (at 375x667 the "See
   all N results" link ended 32px under it) and stayed bright above the scrim.
   While the panel is open the scrim and then the header step one and two
   above the bar, so the bar is dimmed with the rest of the page and a tap on
   it closes the panel like any other outside tap. search.js
   (fitAboveBottomBar) also stops the panel 16px above the bar. */
@media (max-width: 1023.98px) {
    body.sik-has-bottomnav:has(#sikHeader .sik-suggest.is-open)::after { z-index: calc(var(--z-header) + 1); }
    body.sik-has-bottomnav:has(#sikHeader .sik-suggest.is-open) #sikHeader { z-index: calc(var(--z-header) + 2); }
}

/* Matching categories lead the panel as chips (search.js renderResults). The
   arrow-key cursor marks the inner [data-sg] link, so the pill follows it. */
.sik-suggest__chip:has(> .is-active) {
    border-color: var(--sik-primary);
    background: var(--sik-primary-soft);
}
a.sik-suggest__chipmain { text-decoration: none; }

/* Names at 500 (the scale is 400 / 500 / 700); the match stays 700. */
.sik-suggest__name { font-weight: var(--fw-medium); }
.sik-suggest__footer { font-weight: var(--fw-medium); }

/* Two lines of the product name on a phone, not ~20 characters. */
@media (max-width: 479.98px) {
    .sik-suggest__name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .sik-suggest__side { max-width: 30%; }
}