/* Animated mobile header navigation */
@media (max-width: 1050px) {
    .nav-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
        transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
    }
    .nav-toggle:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.14); }
    .nav-toggle:active { transform: scale(.94); }
    .nav-toggle span {
        position: absolute;
        width: 21px;
        height: 2px;
        margin: 0;
        transform-origin: center;
        transition: transform 320ms cubic-bezier(.22,.8,.24,1), opacity 180ms ease, width 220ms ease;
    }
    .nav-toggle span:nth-child(1) { transform: translateY(-6px); }
    .nav-toggle span:nth-child(2) { transform: translateY(0); }
    .nav-toggle span:nth-child(3) { transform: translateY(6px); }
    .nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { width: 0; opacity: 0; transform: scaleX(0); }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
    .site-header .site-nav {
        display: flex;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        clip-path: inset(0 0 100% 0 round 0 0 16px 16px);
        transform: translateY(-10px);
        transform-origin: top center;
        transition: clip-path 360ms cubic-bezier(.22,.8,.24,1), transform 320ms ease, opacity 220ms ease, visibility 0s linear 360ms;
    }
    .site-header .site-nav.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        clip-path: inset(0 0 0 0 round 0 0 16px 16px);
        transform: translateY(0);
        transition-delay: 0s;
    }
    .site-header .site-nav > a, .site-header .site-nav > form {
        opacity: 0;
        transform: translateY(-7px);
        transition: opacity 190ms ease, transform 240ms ease;
    }
    .site-header .site-nav.is-open > a, .site-header .site-nav.is-open > form { opacity: 1; transform: translateY(0); }
    .site-header .site-nav.is-open > :nth-child(1) { transition-delay: 90ms; }
    .site-header .site-nav.is-open > :nth-child(2) { transition-delay: 125ms; }
    .site-header .site-nav.is-open > :nth-child(3) { transition-delay: 160ms; }
    .site-header .site-nav.is-open > :nth-child(4) { transition-delay: 195ms; }
    .site-header .site-nav.is-open > :nth-child(5) { transition-delay: 230ms; }
    .site-header .site-nav.is-open > :nth-child(6) { transition-delay: 265ms; }
}

/* Language switch */
.lang-switch {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0;
    padding: 7px 9px;
    overflow: hidden;
    border: 2px solid rgba(74,139,123,.5);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #0d493f, #07372f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 7px 16px rgba(4,25,21,.2);
    transition: width 360ms cubic-bezier(.22,.8,.24,1), min-width 360ms cubic-bezier(.22,.8,.24,1), transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.lang-switch:hover, .lang-switch:focus-visible { width: 116px; min-width: 116px; color: #fff; border-color: rgba(111,196,174,.72); background: linear-gradient(145deg, #115a4d, #083c34); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px rgba(4,25,21,.28); transform: translateY(-1px); }
.lang-switch:active { transform: translateY(0) scale(.98); }
.lang-switch .lang-switch-icon { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; }
.lang-switch-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.lang-switch .lang-switch-divider { width: 0; height: 25px; display: block; margin-inline: 0; opacity: 0; background: rgba(255,255,255,.22); transition: width 220ms ease, margin 320ms ease, opacity 180ms ease; }
.lang-switch .lang-switch-label { max-width: 0; display: inline-block; overflow: hidden; opacity: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; transform: translateX(8px); transition: max-width 340ms cubic-bezier(.22,.8,.24,1), opacity 180ms ease 40ms, transform 300ms ease; }
.lang-switch:hover .lang-switch-divider, .lang-switch:focus-visible .lang-switch-divider { width: 1px; margin-inline: 10px; opacity: 1; }
.lang-switch:hover .lang-switch-label, .lang-switch:focus-visible .lang-switch-label { max-width: 62px; opacity: 1; transform: translateX(0); }
html[dir="ltr"] .lang-switch .lang-switch-label { transform: translateX(-8px); }
html[dir="ltr"] .lang-switch:hover .lang-switch-label, html[dir="ltr"] .lang-switch:focus-visible .lang-switch-label { transform: translateX(0); }

@media (max-width: 640px) {
    .lang-switch { width: 40px; min-width: 40px; min-height: 40px; padding: 6px 8px; border-radius: 12px; }
    .lang-switch:hover, .lang-switch:focus-visible { width: 108px; min-width: 108px; }
    .lang-switch .lang-switch-icon, .lang-switch-icon svg { width: 22px; height: 22px; flex-basis: 22px; }
    .lang-switch .lang-switch-divider { height: 21px; }
    .lang-switch:hover .lang-switch-divider, .lang-switch:focus-visible .lang-switch-divider { margin-inline: 8px; }
    .lang-switch .lang-switch-label { display: inline-block; font-size: 13px; }
}

@media (max-width: 360px) {
    .lang-switch { width: 40px; min-width: 40px; padding-inline: 7px; }
    .lang-switch:hover, .lang-switch:focus-visible { width: 103px; min-width: 103px; }
    .lang-switch:hover .lang-switch-divider, .lang-switch:focus-visible .lang-switch-divider { margin-inline: 6px; }
    .lang-switch .lang-switch-label { display: inline-block; font-size: 12px; }
}

/* Mobile language option inside the navigation menu */
.mobile-lang-switch { display: none !important; }

@media (max-width: 640px) {
    .header-actions > .lang-switch { display: none; }
    .site-header .site-nav .mobile-lang-switch {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 11px;
        margin-top: 8px;
        padding: 9px 14px;
        border: 1px solid rgba(111,196,174,.3);
        border-radius: 11px;
        color: #fff;
        background: linear-gradient(145deg, rgba(20,91,78,.88), rgba(8,55,47,.92));
        font-size: 14px;
        font-weight: 700;
    }
    .site-header .site-nav .mobile-lang-switch:hover { color: #fff; background: linear-gradient(145deg, #176453, #0a4439); }
    .mobile-lang-icon { width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; }
    .mobile-lang-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
    .site-header .brand { min-width: 0; flex: 1 1 auto; gap: 8px; overflow: hidden; }
    .site-header .brand-copy { width: min(150px, calc(100vw - 180px)); min-width: 0; display: grid; }
    .site-header .brand-copy strong { max-width: 100%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .site-header .brand-copy small { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 300px) {
    .site-header .brand-copy strong { font-size: 13px; }
    .site-header .brand-copy small { display: none; }
}

/* Shared storefront header and top bar */
html { overflow-x: clip; scroll-behavior: smooth; }
.site-body { overflow-x: clip; background: var(--background); color: var(--text-primary); }
html[dir="ltr"] .site-body { font-family: "Inter", Arial, sans-serif; }
.site-body :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(200,121,63,.48);
    outline-offset: 3px;
}

.site-topbar {
    height: 32px;
    min-height: 32px;
    display: flex;
    align-items: stretch;
    color: #4a4036;
    background: #ede4d6;
    border-bottom: 1px solid rgba(74,64,54,.12);
    font-size: 12px;
}

.topbar-inner {
    height: 32px;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 20px;
    padding-block: 0;
}

.topbar-inner > span,
.topbar-inner > div,
.topbar-inner a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.topbar-inner > span,
.topbar-inner > div > span,
.topbar-inner > div > a {
    height: 100%;
    min-height: 0;
    align-self: stretch;
    justify-content: center;
    margin-block: 0;
    padding-block: 0;
}

.topbar-inner > span { justify-self: start; }
.topbar-inner > div { display: contents; }
.topbar-inner > div > span {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-self: center;
}
.topbar-inner > div > a { grid-column: 3; justify-self: end; }
.topbar-inner a:hover { color: var(--primary); }

.topbar-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    line-height: 0;
}
.topbar-icon svg { display: block; }
.topbar-text {
    height: 16px;
    display: inline-flex;
    align-items: center;
    line-height: 16px;
    white-space: nowrap;
}
.topbar-sale-icon { width: 16px; height: 16px; }
.topbar-sale-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.topbar-phone-icon { display: none; width: 16px; height: 16px; }
.topbar-phone-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.topbar-quality { gap: 8px; color: #654423; font-weight: 700; }
.topbar-quality-icon { width: 17px; height: 17px; }
.topbar-quality-icon svg { width: 17px; height: 17px; display: block; overflow: visible; }
.topbar-quality .quality-star-main,
.topbar-quality .quality-star-small {
    fill: url(#qualityGold);
    stroke: #a56629;
    stroke-width: .45;
    stroke-linejoin: round;
}
.topbar-quality .quality-orbits { fill: none; stroke: #c58b43; stroke-width: 1.2; stroke-linecap: round; }
.topbar-quality i { width: 1px; height: 15px; display: block; background: linear-gradient(transparent, rgba(169,106,43,.68), transparent); }
.topbar-quality > span { white-space: nowrap; }

.site-header {
    height: 74px;
    color: #fff;
    background: rgba(9,43,37,.98);
    border-bottom: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 8px 28px rgba(8,28,23,.18);
}

.header-inner {
    height: 74px;
    min-height: 74px;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 22px;
}

.site-header .header-inner { align-items: center; }
.site-header .brand {
    min-width: 0;
    height: 100%;
    align-self: center;
    align-items: center;
    color: #fff;
}
.brand-logo {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
}
.brand-copy { min-width: 0; display: grid; align-content: center; line-height: 1; }
.brand-copy strong,
.brand-copy small { display: flex; align-items: center; margin: 0; line-height: 1.25; }
.brand-copy strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 18px; white-space: nowrap; }
.brand-copy small { color: rgba(255,255,255,.66); font-size: 11px; font-weight: 500; }

.site-header .site-nav { min-width: 0; justify-self: center; gap: 2px; }
.site-header .site-nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding-inline: 10px;
    color: rgba(255,255,255,.78);
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
}
.site-header .site-nav a.active,
.site-header .site-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.site-header .site-nav a.active::after { background: var(--accent); }

.header-search {
    width: min(230px,22vw);
    height: 42px;
    margin-inline-start: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    background: rgba(255,255,255,.08);
}
.header-search:focus-within { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.header-search input { min-width: 0; color: #fff; background: transparent; font-size: 13px; }
.header-search button { display: grid; place-items: center; padding: 0; color: rgba(255,255,255,.82); background: transparent; line-height: 0; }
.header-search button svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.header-actions { height: 100%; align-items: center; gap: 8px; }
.site-header .header-actions > * { align-self: center; }
.lang-switch { min-height: 42px; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); line-height: 1; }
.lang-switch .lang-switch-icon { display: grid; place-items: center; line-height: 0; }
.lang-switch-icon svg { display: block; }
.nav-toggle { align-items: center; justify-content: center; color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); line-height: 0; }
.nav-toggle span { background: #fff; }

@media (max-width: 1180px) {
    .header-inner { gap: 14px; }
    .site-header .site-nav a { padding-inline: 8px; font-size: 13px; }
    .header-search { width: 190px; }
}

@media (min-width: 641px) and (max-width: 1180px) {
    .brand-copy { display: none; }
}

@media (max-width: 1050px) {
    .header-inner { grid-template-columns: auto 1fr auto; }
    .nav-toggle { display: inline-flex; justify-self: end; }
    .site-header .site-nav {
        position: absolute;
        inset-block-start: 74px;
        inset-inline: 20px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        display: none;
        align-items: stretch;
        padding: 16px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 0 0 16px 16px;
        background: var(--primary-dark);
        box-shadow: 0 18px 34px rgba(9,43,37,.22);
    }
    .site-header .site-nav.is-open { display: flex; }
    .site-header .site-nav a { width: 100%; }
    .header-search { width: 100%; margin: 8px 0 0; }
    .header-actions { justify-self: end; }
}

@media (max-width: 820px) {
    .topbar-inner > div > span { display: inline-flex; }
}

@media (max-width: 640px) {
    .site-topbar .container,
    .site-header .container { width: min(1240px,calc(100% - 32px)); }
    .site-topbar { height: 31px; min-height: 31px; overflow: hidden; font-size: 11px; }
    .topbar-inner { height: 31px; min-height: 0; }
    .topbar-inner > span,
    .topbar-inner > div > span,
    .topbar-inner > div > a { transform: translateY(.5px); }
    .topbar-icon { transform: translateY(-2px); }
    .topbar-inner > div { gap: 8px; }
    .site-header,
    .header-inner { height: 68px; min-height: 68px; }
    .site-header .site-nav { inset-block-start: 68px; inset-inline: 16px; }
    .brand-logo { width: 46px; height: 46px; flex-basis: 46px; }
    .header-actions { gap: 6px; }
    .lang-switch { min-height: 40px; padding-inline: 8px; font-size: 12px; }
}

@media (max-width: 480px) {
    .topbar-inner { gap: 8px; }
    .topbar-inner > span { white-space: nowrap; }
    .topbar-inner > span,
    .topbar-inner > div > span { font-size: 10px; }
    .topbar-inner a { gap: 4px; font-size: 10px; white-space: nowrap; }
    .topbar-support-label { display: none; }
    .topbar-phone-icon { display: inline-grid; }
}

@media (max-width: 360px) {
    .site-topbar .container,
    .site-header .container { width: min(1240px,calc(100% - 24px)); }
}