@import url('./design-tokens.css');
:root {
    --customer-header-bg: var(--ds-bg);
    --customer-header-text: var(--ds-text);
    --customer-header-muted: var(--ds-muted);
    --customer-header-accent: var(--ds-gold);
    --customer-header-border: var(--ds-border);
    --customer-header-height: 68px;
}
.customer-header, .customer-header * { box-sizing:border-box; }
.customer-header { position:sticky; top:0; z-index:1000; width:100%; border-bottom:1px solid var(--customer-header-border); background:var(--customer-header-bg); font-family:Pinar,Tahoma,sans-serif; }
.customer-header__inner { width:min(1240px,100%); min-height:68px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:12px 18px; }
.customer-header__brand { display:inline-flex; align-items:center; flex-shrink:0; gap:12px; color:var(--customer-header-text); text-decoration:none; }
.customer-header__brand img { width:38px; height:38px; object-fit:contain; }
.customer-header__brand span { font-size:var(--ds-fs-18); font-weight:700; }
.customer-header__menu-toggle { display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; border:1px solid var(--ds-border); border-radius:var(--ds-radius-btn); background:var(--ds-surface); color:var(--customer-header-text); cursor:pointer; flex-shrink:0; }
.customer-header__menu-toggle span { width:22px; height:2px; border-radius:2px; background:currentColor; }
.customer-header__links { display:flex; align-items:center; justify-content:flex-end; flex:1; gap:16px; margin:0; padding:0; list-style:none; }
.customer-header__links a { color:var(--customer-header-muted); font-size:var(--ds-fs-13); text-decoration:none; transition:color .2s ease; }
.customer-header__links a:hover, .customer-header__links a[aria-current='page'] { color:var(--customer-header-accent); }
.customer-header__shop { position:relative; display:flex; align-items:center; gap:4px; }
.customer-header__shop > a { display:flex; align-items:center; min-height:44px; }
.customer-header__shop-toggle { display:grid; place-items:center; width:36px; height:44px; flex-shrink:0; padding:0; border:1px solid transparent; border-radius:var(--ds-radius-btn); background:transparent; color:var(--ds-muted); cursor:pointer; }
.customer-header__shop-toggle span { width:7px; height:7px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); transition:transform .18s ease; }
.customer-header__shop-toggle:hover, .customer-header__shop-toggle[aria-expanded='true'] { border-color:var(--ds-gold-line); background:var(--ds-gold-soft); color:var(--ds-gold-text); }
.customer-header__shop-toggle[aria-expanded='true'] span { transform:translateY(2px) rotate(225deg); }
.customer-header__categories { position:absolute; top:100%; inset-inline-start:0; width:280px; max-height:min(480px,70dvh); overflow-y:auto; padding:var(--ds-space-2); border:1px solid var(--ds-gold-line); border-radius:var(--ds-radius-card); background:var(--ds-raised); box-shadow:0 16px 34px rgba(0,0,0,.34); }
.customer-header__categories[hidden] { display:none; }
.customer-header__categories ul { margin:0; padding:0; list-style:none; }
.customer-header__categories a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--ds-radius-sm); font-size:var(--ds-fs-13); line-height:1.8; }
.customer-header__categories a:hover { background:var(--ds-gold-soft); }
.customer-header__categories-status { margin:0; padding:12px; color:var(--ds-muted); font-size:var(--ds-fs-13); }
.customer-header__categories .customer-header__categories-all { margin-top:var(--ds-space-2); border-top:1px solid var(--ds-border-strong); border-radius:0; color:var(--ds-gold-text); }
.customer-header__account-item { display:flex; align-items:center; }
.customer-header__links .customer-header__auth { min-width:118px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; padding:6px 10px; border:1px solid var(--ds-gold-line); border-radius:var(--ds-radius-btn); background:var(--ds-gold-soft); color:var(--ds-gold-text); line-height:1.5; }
.customer-header__links .customer-header__auth:hover, .customer-header__links .customer-header__auth:focus-visible, .customer-header__links .customer-header__auth[aria-current='page'] { border-color:var(--ds-gold); color:var(--ds-text); }
.customer-header__auth-phone { color:var(--customer-header-muted); font-size:var(--ds-fs-12); direction:ltr; unicode-bidi:isolate; }
.customer-header__auth-phone[hidden] { display:none; }
.customer-header__wallet { display:inline-flex; align-items:center; gap:6px; min-height:44px; flex-shrink:0; padding:0 10px; border:1px solid var(--ds-gold-line); border-radius:var(--ds-radius-btn); background:var(--ds-gold-soft); color:var(--ds-gold-text); text-decoration:none; white-space:nowrap; }
.customer-header__wallet:hover, .customer-header__wallet:focus-visible { border-color:var(--ds-gold); color:var(--ds-text); }
.customer-header__wallet svg { width:18px; height:18px; flex-shrink:0; }
.customer-header__wallet-amount { font-size:var(--ds-fs-12); font-weight:600; }
.customer-header__wallet[hidden] { display:none; }
.customer-header__cart { position:relative; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; padding:0; border:1px solid var(--customer-header-border); border-radius:var(--ds-radius-btn); background:var(--ds-surface); color:var(--customer-header-text); text-decoration:none; cursor:pointer; }
.customer-header__cart:hover { color:var(--customer-header-accent); }
.customer-header__cart svg { width:20px; height:20px; }
.customer-header__cart-badge { position:absolute; top:-6px; left:-4px; min-width:20px; height:20px; display:flex; align-items:center; justify-content:center; padding:0 4px; border-radius:var(--ds-radius-pill); background:var(--customer-header-accent); color:var(--ds-on-gold); font-size:var(--ds-fs-12); font-weight:700; line-height:1; }
.customer-header__cart-badge[hidden] { display:none; }
.customer-header__menu-heading { display:none; }
.customer-header__backdrop[hidden] { display:none !important; }
.customer-header__backdrop { position:fixed; inset:var(--customer-header-height) 0 0; z-index:999; border:0; padding:0; background:color-mix(in srgb,var(--ds-bg) 68%,transparent); cursor:pointer; }
body.customer-menu-open { overflow:hidden; }
.customer-header :is(a,button):focus-visible { outline:2px solid var(--ds-gold); outline-offset:3px; }
@media (max-width:1100px) and (min-width:1025px) { .customer-header__brand span { font-size:var(--ds-fs-15); } .customer-header__links { gap:10px; } .customer-header__inner { gap:12px; } }
@media (max-width:1024px) {
    .customer-header__inner { min-height:68px; }
    .customer-header__menu-toggle { display:inline-flex; margin-inline-start:auto; }
    .customer-header__links { position:fixed; z-index:1001; top:var(--customer-header-height); right:0; bottom:0; width:min(340px,calc(100% - 32px)); height:auto; align-items:stretch; justify-content:flex-start; flex-direction:column; gap:4px; padding:16px; border-inline-end:1px solid var(--ds-border-strong); background:var(--ds-surface); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; transform:translateX(105%); transition:transform .25s ease,visibility .25s ease; }
    .customer-header__links.is-open { transform:translateX(0); visibility:visible; }
    .customer-header__links > li { flex-shrink:0; }
    .customer-header__links a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--ds-radius-btn); font-size:var(--ds-fs-15); }
    .customer-header__links a[aria-current='page'] { background:var(--ds-gold-soft); }
    .customer-header__shop { display:grid; grid-template-columns:minmax(0,1fr) 44px; }
    .customer-header__shop-toggle { width:44px; border-color:var(--ds-border-strong); background:var(--ds-raised); }
    .customer-header__categories { position:static; grid-column:1 / -1; width:100%; max-height:none; margin-block:4px 8px; box-shadow:none; }
    .customer-header__categories a { font-size:var(--ds-fs-13); }
    .customer-header__account-item { width:100%; margin-top:12px; }
    .customer-header__links .customer-header__auth { width:100%; align-items:flex-start; }
    .customer-header__menu-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-inline-start:12px; color:var(--ds-muted); font-size:var(--ds-fs-14); }
    .customer-header__menu-close { width:44px; height:44px; padding:0; border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-btn); background:var(--ds-raised); color:var(--ds-text); font:400 24px/1 Pinar,Tahoma,sans-serif; cursor:pointer; }
}
@media (max-width:520px) {
    .customer-header__inner { min-height:64px; gap:8px; padding:8px 12px; }
    .customer-header__brand { gap:8px; min-width:0; }
    .customer-header__brand img { width:32px; height:32px; }
    .customer-header__brand span { font-size:var(--ds-fs-15); }
    .customer-header__wallet { padding-inline:8px; }
    .customer-header__inner:has(.customer-header__wallet:not([hidden])) .customer-header__brand span { display:none; }
}
@media (prefers-reduced-motion:reduce) { .customer-header__links { transition:none; } }