/* ==========================================================================
   Blessing Your Scalp — shop header & footer polish
   --------------------------------------------------------------------------
   Layered over the purchased template's header (layouts/shop-layout). It only
   restyles: it does not change the markup structure, the sticky behaviour or
   the JS that measures the header to pad <main>, so shrinking the bar here is
   picked up automatically.

   Goal is parity with the main site header (assets/css/bys-nav.css): brand
   charcoal type, a single rose accent, real focus states, calmer proportions.
   ========================================================================== */

:root {
    --bysh-rose: #be6d76;
    --bysh-rose-deep: #a85961;
    --bysh-rose-rgb: 190, 109, 118;
    --bysh-charcoal: #35312f;
    --bysh-cream: #fbf4f0;
    --bysh-divider: #e9e5e3;
    --bysh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Bar
   --------------------------------------------------------------------------
   174px of header with a 120px logo dominated every shop page. The JS that
   pads <main> reads the rendered height, so this stays in sync on its own.
   -------------------------------------------------------------------------- */

#header.header {
    background: #fff;
    border-bottom: 1px solid var(--bysh-divider);
}

#header .header-desk {
    min-height: 92px;
}

#header .logo__image {
    width: auto;
    height: 58px;
    max-height: 58px;
    transition: opacity 200ms var(--bysh-ease);
}

@media (min-width: 1200px) {
    #header .header-desk {
        min-height: 100px;
    }

    #header .logo__image {
        height: 64px;
        max-height: 64px;
    }
}

#header .logo a:hover .logo__image {
    opacity: 0.82;
}

/* Sticky state: a hairline and a whisper of shadow, not a slab. */
#header.header_sticky.stuck,
#header.header.sticky-active {
    box-shadow: 0 6px 20px rgba(53, 49, 47, 0.07);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

#header .header-desk .navigation__list {
    gap: 4px;
    align-items: center;
}

#header .header-desk .navigation__link {
    position: relative;
    display: block;
    padding: 10px 14px;
    /* #222 is a cold near-black; the brand's is warm. */
    color: var(--bysh-charcoal);
    font-family: 'Jost', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 200ms var(--bysh-ease);
}

#header .header-desk .navigation__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1.5px;
    background: var(--bysh-rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms var(--bysh-ease);
}

#header .header-desk .navigation__link:hover,
#header .header-desk .navigation__link:focus-visible {
    color: var(--bysh-rose-deep);
}

#header .header-desk .navigation__link:hover::after,
#header .header-desk .navigation__item.current .navigation__link::after {
    transform: scaleX(1);
}

#header .header-desk .navigation__item.current .navigation__link {
    color: var(--bysh-rose-deep);
}

/* The template paints a dropdown arrow/underline of its own on hover. */
#header .header-desk .navigation__link::before {
    display: none;
}

/* --------------------------------------------------------------------------
   Tools (search, account, cart)
   -------------------------------------------------------------------------- */

#header .header-tools {
    gap: 2px;
}

#header .header-tools__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px keeps every icon a comfortable target. */
    min-width: 44px;
    min-height: 44px;
    color: var(--bysh-charcoal);
    transition: color 200ms var(--bysh-ease);
}

#header .header-tools__item:hover,
#header .header-tools__item:focus-visible {
    color: var(--bysh-rose-deep);
}

/* The badge was template gold (#b9a16b) — the only non-brand colour left in
   the header, and the one element the eye goes to first. */
.cart-amount,
#header .cart-amount,
.header-mobile .cart-amount {
    background-color: var(--bysh-rose) !important;
    color: #fff !important;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Footer logo
   --------------------------------------------------------------------------
   The template sizes every .logo__image at 120px. Capping the header left the
   footer mark rendering at 268x120 — larger than the header's own logo and far
   too heavy for a footer column.
   -------------------------------------------------------------------------- */

.footer .logo__image,
footer .logo__image {
    width: auto;
    height: 44px;
    max-height: 44px;
}

@media (min-width: 768px) {
    .footer .logo__image,
    footer .logo__image {
        height: 50px;
        max-height: 50px;
    }
}

/* --------------------------------------------------------------------------
   Mobile bar
   -------------------------------------------------------------------------- */

.header-mobile .logo__image {
    width: auto;
    height: 42px;
    max-height: 42px;
}

.header-mobile .mobile-nav-activator,
.header-mobile .header-tools__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--bysh-charcoal);
}

.header-mobile__navigation .navigation__link {
    display: block;
    min-height: 52px;
    padding: 13px 0;
    color: var(--bysh-charcoal);
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    transition: color 200ms var(--bysh-ease);
}

.header-mobile__navigation .navigation__link:hover,
.header-mobile__navigation .navigation__link:focus-visible {
    color: var(--bysh-rose-deep);
}

.header-mobile__navigation .navigation__item.current .navigation__link {
    color: var(--bysh-rose-deep);
}

/* --------------------------------------------------------------------------
   Search popup field
   -------------------------------------------------------------------------- */

.search-field__input:focus,
.header-mobile__navigation .search-field__input:focus {
    border-color: var(--bysh-rose) !important;
    box-shadow: 0 0 0 3px rgba(var(--bysh-rose-rgb), 0.15);
    outline: none;
}

/* --------------------------------------------------------------------------
   Focus visibility
   --------------------------------------------------------------------------
   The template ships a single dark ring; the header now uses the brand accent
   and, on the nav, sits tight to the link rather than spanning the tall row.
   -------------------------------------------------------------------------- */

#header a:focus-visible,
#header button:focus-visible,
.header-mobile a:focus-visible,
.header-mobile button:focus-visible {
    outline: 2px solid var(--bysh-rose);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #header *,
    .header-mobile * {
        transition-duration: 0.01ms !important;
    }
}