/* ==========================================================================
   Store header options from the design editor (Header tab):
   .shop-header--{classic|centered|compact}, --{light|brand|dark}, --logo-{small|medium|large}, --static
   ========================================================================== */

/* Top bar */
.shop-topbar { position: relative; background: var(--primary); color: #fff; font-size: .9rem; }
.shop-topbar--brand { background: var(--dark); }
.shop-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 34px; padding-top: .3rem; padding-bottom: .3rem; }
.shop-topbar__text { font-weight: 500; }
.shop-topbar__contact { display: flex; gap: 1.25rem; opacity: .9; white-space: nowrap; }
.shop-topbar__contact i { margin-inline-end: .3rem; opacity: .8; }

.shop-header--static { position: relative; }

/* Logo: uploaded images keep their own proportions (wide wordmarks are not cropped) */
.shop-header { --logo-h: 40px; --logo-max-w: 220px; }
.shop-header--logo-small { --logo-h: 32px; --logo-max-w: 180px; }
.shop-header--logo-large { --logo-h: 58px; --logo-max-w: 300px; }
.shop-header .shop-brand__logo { height: var(--logo-h); }
.shop-header .shop-brand__logo:not(.shop-brand__logo--image) { width: var(--logo-h); font-size: calc(var(--logo-h) * .36); }
.shop-brand__logo--image { width: auto; background: none; border-radius: 0; }
.shop-brand__logo--image img { display: block; width: auto; height: var(--logo-h, 40px); max-width: var(--logo-max-w, 220px); object-fit: contain; background: none; border-radius: var(--radius-sm); }
.shop-header--logo-small .shop-brand { font-size: 1.1rem; }
.shop-header--logo-large .shop-brand { font-size: 1.45rem; }
.shop-header--logo-large .header-main { padding-top: .4rem; padding-bottom: .4rem; }
.shop-footer .shop-brand__logo--image { --logo-h: 48px; height: 48px; }

/* Brand-colour and dark headers */
.shop-header--brand { background: var(--primary); border-bottom-color: transparent; }
.shop-header--dark { background: #0F172A; border-bottom-color: transparent; }
.shop-header--brand, .shop-header--dark { backdrop-filter: none; }
:is(.shop-header--brand, .shop-header--dark) :is(.shop-brand, .shop-brand:hover, .header-action, .main-nav__link, .main-nav__link i) { color: #fff; }
:is(.shop-header--brand, .shop-header--dark) .main-nav__link { opacity: .88; }
:is(.shop-header--brand, .shop-header--dark) :is(.main-nav__link:hover, .main-nav__link.active) { color: #fff; opacity: 1; }
:is(.shop-header--brand, .shop-header--dark) .main-nav__link.active::after { background: #fff; }
:is(.shop-header--brand, .shop-header--dark) .header-action:hover { background: rgba(255, 255, 255, .14); color: #fff; }
:is(.shop-header--brand, .shop-header--dark) .main-nav { border-top-color: rgba(255, 255, 255, .14); }
:is(.shop-header--brand, .shop-header--dark) .menu-toggle { background: rgba(255, 255, 255, .14); color: #fff; }
:is(.shop-header--brand, .shop-header--dark) .header-search form { background: #fff; border-color: transparent; }
.shop-header--brand .header-action .count { border-color: var(--primary); }
.shop-header--dark .header-action .count { border-color: #0F172A; }
.shop-header--brand .shop-brand__logo:not(.shop-brand__logo--image) { background: #fff; color: var(--primary); }
.shop-header--brand .header-search button { background: var(--dark); }
.shop-header--dark .main-nav__link.active::after { background: var(--accent); }

/* Compact: one row with the menu inline */
.shop-inline-nav { display: none; }
.shop-header--compact .header-main { min-height: 64px; }

@media (min-width: 992px) {
    .shop-header--compact .shop-inline-nav { display: flex; align-items: center; gap: .1rem; flex: 1; min-width: 0; margin-inline-start: .75rem; }
    .shop-header--compact .shop-inline-nav .main-nav__link { padding: .5rem .7rem; }
    .shop-header--compact .shop-inline-nav .main-nav__link.active::after { bottom: 0; }

    /* Centred: search left, logo in the middle, actions right, menu centred below */
    .shop-header--centered .header-main { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: .85rem; padding-bottom: .85rem; }
    .shop-header--centered .shop-brand { grid-column: 2; grid-row: 1; flex-direction: column; gap: .35rem; text-align: center; }
    .shop-header--centered .header-search { grid-column: 1; grid-row: 1; max-width: 300px; }
    .shop-header--centered .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
    .shop-header--centered .shop-brand__name { max-width: 360px; }
    .shop-header--centered .main-nav .container { justify-content: center; }
    .shop-header--centered .main-nav__right { margin-inline-start: 1.5rem; }
}

@media (max-width: 991.98px) {
    .shop-topbar .container { justify-content: center; text-align: center; }
    .shop-topbar__contact { display: none; }
    .shop-header, .shop-header--logo-small, .shop-header--logo-large { --logo-max-w: 42vw; }
    .shop-header--logo-medium { --logo-h: 36px; }
    .shop-header--logo-large { --logo-h: 42px; }
    .shop-header--logo-large .shop-brand { font-size: 1.2rem; }
    .shop-header .shop-brand { min-width: 0; }
}