/* ==========================================================================
   03-header.css  --  preheader bar, desktop header, mega menu, mobile drawer

   Structural pattern reproduced from the reference capture:
     aside.preheader  ->  header.header  ->  nav.mega
   Desktop (>=900px): logo left, search centre, utilities right, nav row below.
   Mobile  (<900px):  burger + logo + cart, search collapses to its own row,
                      navigation moves into an off-canvas drawer.
   ========================================================================== */

/* ---- announcement / preheader ------------------------------------------ */
.scs-preheader {
    background: var(--scs-inverse);
    color: var(--scs-inverse-ink);
    font-size: var(--scs-fs-xs);
    letter-spacing: .03em;
}
.scs-preheader__inner {
    min-height: var(--scs-preheader-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scs-4);
}
.scs-preheader__message {
    flex: 1 1 auto;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--scs-fw-bold);
}
.scs-preheader__links { display: none; gap: var(--scs-4); flex: 0 0 auto; }
.scs-preheader__links a { color: var(--scs-inverse-ink); opacity: .85; }
.scs-preheader__links a:hover { opacity: 1; color: #fff; }
@media (min-width: 900px) { .scs-preheader__links { display: flex; } }

/* Rotating promo strip -- one message visible, no layout shift. */
.scs-promo-rotator { position: relative; overflow: hidden; height: 1.4em; }
.scs-promo-rotator__item {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--scs-t);
}
.scs-promo-rotator__item.is-active { opacity: 1; }

/* ---- header ------------------------------------------------------------- */
.scs-header {
    position: sticky;
    top: 0;
    z-index: var(--scs-z-header);
    background: var(--scs-surface);
    border-bottom: 1px solid var(--scs-line);
}
.scs-header__bar {
    min-height: var(--scs-header-h);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--scs-3);
}
@media (min-width: 900px) {
    .scs-header__bar { grid-template-columns: 220px minmax(0, 1fr) auto; gap: var(--scs-6); }
}

.scs-header__brand { display: flex; align-items: center; gap: var(--scs-2); font-weight: var(--scs-fw-bold); font-size: var(--scs-fs-md); letter-spacing: -.02em; }
.scs-header__brand img { max-height: 40px; width: auto; }

/* search: hidden on small screens, own row underneath */
.scs-header__search { display: none; }
@media (min-width: 900px) { .scs-header__search { display: block; } }

.scs-search { display: flex; width: 100%; }
.scs-search__input {
    flex: 1 1 auto;
    min-height: var(--scs-control-h);
    padding: 0 var(--scs-4);
    border: 1px solid var(--scs-line-strong);
    border-right: 0;
    border-radius: var(--scs-radius) 0 0 var(--scs-radius);
    font-size: var(--scs-fs-base);
}
.scs-search__submit {
    flex: 0 0 auto;
    min-height: var(--scs-control-h);
    padding-inline: var(--scs-5);
    border: 0;
    border-radius: 0 var(--scs-radius) var(--scs-radius) 0;
    background: var(--scs-accent);
    color: var(--scs-accent-contrast);
    font-weight: var(--scs-fw-bold);
    cursor: pointer;
}
.scs-search__submit:hover { background: var(--scs-accent-hover); }

/* utility cluster */
.scs-header__utils { display: flex; align-items: center; gap: var(--scs-1); }
.scs-util {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: var(--scs-1) var(--scs-2);
    border-radius: var(--scs-radius);
    color: var(--scs-ink-2);
    font-size: var(--scs-fs-xs);
}
.scs-util:hover { background: var(--scs-surface-3); color: var(--scs-ink); }
.scs-util__label { display: none; }
@media (min-width: 900px) { .scs-util__label { display: block; } }

.scs-util__icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.scs-cart-count {
    position: absolute;
    transform: translate(12px, -10px);
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--scs-radius-pill);
    background: var(--scs-accent);
    color: #fff;
    font-size: 10px; font-weight: var(--scs-fw-bold);
    display: inline-flex; align-items: center; justify-content: center;
}
.scs-util--cart { position: relative; }

/* burger -- mobile only */
.scs-burger {
    display: inline-flex; align-items: center; justify-content: center;
    /* flex: 0 0 auto is essential -- a long site title in the same flex row
       otherwise shrinks the button to near-zero width and the icon vanishes. */
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 0; background: transparent; cursor: pointer; color: var(--scs-ink);
    padding: 0;
}
.scs-burger .scs-util__icon { width: 24px; height: 24px; stroke-width: 2; }
@media (min-width: 900px) { .scs-burger { display: none; } }

/* Let the brand shrink instead of the controls beside it. */
.scs-header__brand { min-width: 0; }

/* mobile search row */
.scs-header__search-mobile { padding-bottom: var(--scs-3); }
@media (min-width: 900px) { .scs-header__search-mobile { display: none; } }

/* ---- primary nav / mega menu (desktop) --------------------------------- */
.scs-nav { display: none; border-top: 1px solid var(--scs-line); background: var(--scs-surface); }
@media (min-width: 900px) { .scs-nav { display: block; } }

.scs-nav__list { display: flex; align-items: stretch; gap: var(--scs-1); list-style: none; margin: 0; padding: 0; }
.scs-nav__item { position: static; }
.scs-nav__link {
    display: inline-flex; align-items: center;
    height: 46px;
    padding-inline: var(--scs-4);
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--scs-ink-2);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.scs-nav__item:hover > .scs-nav__link,
.scs-nav__item.is-open > .scs-nav__link {
    color: var(--scs-accent);
    border-bottom-color: var(--scs-accent);
}
.scs-nav__link--sale { color: var(--scs-sale); }

/* Full-bleed mega panel. Uses the nav bar as positioning context so the panel
   spans the viewport regardless of which item opened it. */
.scs-mega {
    position: absolute;
    left: 0; right: 0;
    z-index: var(--scs-z-mega);
    background: var(--scs-surface);
    border-top: 1px solid var(--scs-line);
    border-bottom: 1px solid var(--scs-line);
    box-shadow: var(--scs-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--scs-t), transform var(--scs-t), visibility var(--scs-t);
}
.scs-nav__item:hover > .scs-mega,
.scs-nav__item.is-open > .scs-mega,
.scs-mega:hover {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.scs-mega__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--scs-6);
    padding-block: var(--scs-8);
}
.scs-mega__col-title {
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--scs-ink);
    margin-bottom: var(--scs-3);
    padding-bottom: var(--scs-2);
    border-bottom: 1px solid var(--scs-line);
}
.scs-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--scs-2); }
.scs-mega__list a { font-size: var(--scs-fs-sm); color: var(--scs-ink-2); }
.scs-mega__list a:hover { color: var(--scs-accent); }
.scs-mega__promo { border-radius: var(--scs-radius); overflow: hidden; background: var(--scs-surface-3); }

/* ---- mobile off-canvas drawer ------------------------------------------ */
.scs-drawer {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(88vw, 360px);
    z-index: var(--scs-z-drawer);
    background: var(--scs-surface);
    transform: translateX(-100%);
    transition: transform var(--scs-t);
    display: flex; flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.scs-drawer.is-open { transform: translateX(0); }
.scs-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--scs-4);
    border-bottom: 1px solid var(--scs-line);
    position: sticky; top: 0; background: var(--scs-surface);
}
.scs-drawer__list { list-style: none; margin: 0; padding: 0; }
.scs-drawer__list li { border-bottom: 1px solid var(--scs-line); }
.scs-drawer__list a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    padding: var(--scs-3) var(--scs-4);
    font-weight: var(--scs-fw-medium);
}
.scs-drawer__sub { display: none; background: var(--scs-surface-2); }
.scs-drawer__sub.is-open { display: block; }
.scs-drawer__sub a { padding-left: var(--scs-8); font-weight: var(--scs-fw-normal); font-size: var(--scs-fs-sm); }

.scs-drawer__toggle {
    border: 0; background: transparent; cursor: pointer;
    width: 44px; height: 44px; color: var(--scs-ink-3);
    display: inline-flex; align-items: center; justify-content: center;
}

.scs-overlay {
    position: fixed; inset: 0;
    z-index: var(--scs-z-overlay);
    background: rgba(12, 17, 29, .5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--scs-t), visibility var(--scs-t);
}
.scs-overlay.is-open { opacity: 1; visibility: visible; }