/* Seller-profile theme — one unified page, not a stack of boxed
       sections. Nothing here carries its own background/border/shadow
       except: the hero banner (identity artwork, not a content
       container), tiny functional badges/icon-buttons (fav heart,
       featured tag — informational, not layout chrome), and the filters
       popover (a transient dropdown genuinely needs a surface to sit on
       top of the page). Everything else — info row, action buttons,
       about panel, search, category tabs, product grid, reviews — sits
       directly on the page's own background and is separated purely by
       spacing, alignment, and the occasional hairline divider. Follows
       the site-wide light/dark toggle like everything else. */
    /* Premium navy + white redesign — the page background itself is the
       foundation (a soft navy↔white gradient wash), with true elevated
       white/navy-glass containers for the hero, product cards and price
       panels sitting on top of it. --menu-gold/--menu-gold-2 are kept as
       CSS variable names for compatibility but now carry a cool platinum
       tone, not warm gold, so every accent in the page reads as part of
       one navy+white family. */
    .shop-menu{ --menu-bg:var(--menu-bg-light,#EEF1F6); --menu-surface:var(--menu-surface-light,#ffffff); --menu-surface-2:#E7EBF2; --menu-border:rgba(15,39,66,0.10);
      --menu-text:var(--menu-text-light,#101B30); --menu-muted:#5B6B85; --menu-accent:var(--menu-accent-light,#3D8BDB); --menu-tag-bg:#e7f3e6; --menu-tag-text:#2f7a3d;
      --menu-btn-bg:var(--menu-btn-bg-light, #1E40AF); --menu-btn-text:var(--menu-btn-text-light,#fff);
      --menu-navy:#0B1526; --menu-navy-2:#1E3A6E; --menu-gold:#C7D2E8; --menu-gold-2:#2E4A85;
      --menu-hairline:color-mix(in srgb, var(--menu-navy) 12%, transparent);
      --menu-popover-surface:color-mix(in srgb, var(--menu-surface) 96%, transparent);
      position:relative; color:var(--menu-text); padding:0; overflow:hidden;
      background:linear-gradient(150deg, #ffffff 0%, #EEF2F9 38%, color-mix(in srgb, var(--menu-navy) 10%, #ffffff) 72%, color-mix(in srgb, var(--menu-navy) 18%, #ffffff) 100%); }
    /* The single foundation the whole page sits on — a layered wash of soft
       light glows (cool navy, warm gold, and the seller's own button color)
       so the whole page reads as one continuous, lit premium surface, never
       a hard-edged fill. This is the default look, not a hover state. */
    .shop-menu{ background-image:
        radial-gradient(ellipse 55% 38% at 100% 0%, color-mix(in srgb, var(--menu-navy-2) 14%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 40% 32% at 82% 55%, color-mix(in srgb, var(--menu-btn-bg) 10%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 45% 38% at 0% 8%, color-mix(in srgb, var(--menu-navy) 7%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse 38% 32% at 6% 55%, color-mix(in srgb, var(--menu-gold) 16%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 8% 100%, color-mix(in srgb, #ffffff 80%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 45% 34% at 96% 100%, color-mix(in srgb, var(--menu-btn-bg) 8%, transparent) 0%, transparent 55%); }
    body[data-theme="dark"] .shop-menu{ --menu-bg:var(--menu-bg-dark,#070B14); --menu-surface:var(--menu-surface-dark,#101A2E); --menu-surface-2:#0B1120; --menu-border:rgba(255,255,255,0.07);
      --menu-text:var(--menu-text-dark,#F3F4F6); --menu-muted:#8FA0BD; --menu-accent:var(--menu-accent-dark,#2563EB); --menu-tag-bg:rgba(20,184,166,0.15); --menu-tag-text:#5eead4;
      --menu-btn-bg:var(--menu-btn-bg-dark, #1E40AF); --menu-btn-text:var(--menu-btn-text-dark,#fff);
      --menu-navy:#152036; --menu-navy-2:#3E63B0; --menu-gold:#2A3A5C; --menu-gold-2:#6E8FCB;
      --menu-hairline:color-mix(in srgb, #fff 12%, transparent);
      --menu-popover-surface:color-mix(in srgb, var(--menu-surface) 94%, transparent); }
    body[data-theme="dark"] .shop-menu{ background-image:
        radial-gradient(ellipse 60% 45% at 100% 0%, color-mix(in srgb, var(--menu-navy-2) 26%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 42% 34% at 82% 55%, color-mix(in srgb, var(--menu-btn-bg) 22%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 6% 40%, color-mix(in srgb, var(--menu-gold-2) 14%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 55% 40% at 0% 100%, color-mix(in srgb, var(--menu-navy-2) 16%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 45% 34% at 96% 100%, color-mix(in srgb, var(--menu-btn-bg) 16%, transparent) 0%, transparent 55%); }
    /* Flowing wave texture — large, soft-edged diagonal ribbons of light
       and shadow (blurred via CSS filter, not stroked lines), tiled
       across the seller storefront background so it reads like the
       brushed, silky wave material of a premium card finish. Paired
       with a top-down "studio light" sweep and a gentle vignette at the
       far edges, so the whole seller-profile background feels lit and
       has real depth instead of a flat fill. This is deliberately
       scoped to .shop-menu only — the page shown when a seller's own
       storefront/products are on screen — not the wider site background. */
    .shop-menu::before{ content:""; position:absolute; inset:-60px; z-index:0; pointer-events:none;
      mix-blend-mode:multiply; opacity:.85; filter:blur(22px);
      background-repeat:repeat; background-size:420px 420px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath fill='%231E3A6E' fill-opacity='0.14' d='M-40,30 C 30,-10 70,110 150,85 C 230,60 220,170 330,145 C 400,130 410,70 480,90 L480,-40 L-40,-40 Z'/%3E%3Cpath fill='%230B1526' fill-opacity='0.2' d='M-40,220 C 30,180 70,300 150,275 C 230,250 220,360 330,335 C 400,320 410,260 480,280 L480,460 L-40,460 Z'/%3E%3C/svg%3E"); }
    .shop-menu::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background-image:
        radial-gradient(ellipse 90% 45% at 50% -10%, color-mix(in srgb, #ffffff 55%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 75% 60% at 50% 110%, color-mix(in srgb, var(--menu-navy) 22%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at -5% 50%, color-mix(in srgb, var(--menu-navy) 12%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 60% 90% at 105% 50%, color-mix(in srgb, var(--menu-navy) 12%, transparent) 0%, transparent 60%);
      opacity:.5; }
    body[data-theme="dark"] .shop-menu::before{ opacity:.8; mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath fill='%23C7D2E8' fill-opacity='0.42' d='M-40,30 C 30,-10 70,110 150,85 C 230,60 220,170 330,145 C 400,130 410,70 480,90 L480,-40 L-40,-40 Z'/%3E%3Cpath fill='%23000000' fill-opacity='0.55' d='M-40,220 C 30,180 70,300 150,275 C 230,250 220,360 330,335 C 400,320 410,260 480,280 L480,460 L-40,460 Z'/%3E%3C/svg%3E"); }
    body[data-theme="dark"] .shop-menu::after{ opacity:.7;
      background-image:
        radial-gradient(ellipse 90% 40% at 50% -10%, color-mix(in srgb, var(--menu-gold-2) 20%, transparent) 0%, transparent 62%),
        radial-gradient(ellipse 75% 60% at 50% 110%, rgba(0,0,0,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 60% 90% at -5% 50%, rgba(0,0,0,0.4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 90% at 105% 50%, rgba(0,0,0,0.4) 0%, transparent 60%); }
    /* Sparkle animation sits as a full-bleed decorative layer behind all
       real content. Rendered at normal blend (not screen) so the sparkles
       stay visible against the light navy+white background too — screen
       blending washes them out to invisible on a near-white base. */
    .shop-menu-sparkles{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; overflow:hidden; }
    body[data-theme="dark"] .shop-menu-sparkles{ opacity:.7; }
    .shop-menu-sparkles svg{ width:100% !important; height:100% !important; }
    .shop-menu .menu-success-text{ color:#2f7a3d; }
    .shop-menu .menu-error-text{ color:#b3261e; }
    .shop-menu .menu-star-color{ color:#D98A3D; }
    .shop-menu-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:1.25rem 1.25rem 2rem; }
    @media (min-width:640px){ .shop-menu-inner{ padding:1.5rem 1.5rem 2.5rem; } }
    /* Cover-photo identity header — the one piece of "designed" artwork on
       the page (like a profile banner photo), not a content container, so
       it keeps its own gradient/rounding/shadow. Just avatar + name +
       tagline live here; contact facts moved to a plain row below so the
       photo stays uncluttered. */
    .shop-menu .menu-hero{ position:relative; min-height:170px; display:flex; align-items:flex-end; background:linear-gradient(150deg, var(--menu-navy) 0%, var(--menu-navy-2) 55%, #060A14 100%); background-size:cover; background-position:center; perspective:1000px; border-radius:20px; overflow:hidden;
      box-shadow:0 18px 40px -6px rgba(13,21,38,0.32), 0 6px 16px rgba(13,21,38,0.18), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.05); }
    body[data-theme="dark"] .shop-menu .menu-hero{ box-shadow:0 20px 46px -8px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.04); }
    .shop-menu .menu-hero-overlay{ position:absolute; inset:0; overflow:hidden;
      background:
        radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--menu-gold) 40%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 96% 115%, color-mix(in srgb, var(--menu-navy-2) 65%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.4) 58%, rgba(0,0,0,0.82) 100%); }
    .shop-menu .menu-hero-overlay::after{ content:""; position:absolute; top:-40%; bottom:-40%; left:-20%; width:38%; pointer-events:none;
      background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.09) 45%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.09) 55%, transparent 100%);
      transform:skewX(-18deg); }
    .shop-menu .menu-hero-orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
    .shop-menu .menu-hero-orb-a{ width:56px; height:56px; top:10%; right:8%;
      background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5) 0%, color-mix(in srgb, var(--menu-gold) 55%, transparent) 35%, transparent 72%);
      animation:menuOrbFloat 10.5s ease-in-out infinite; }
    .shop-menu .menu-hero-orb-b{ width:30px; height:30px; bottom:18%; right:20%;
      background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0%, color-mix(in srgb, var(--menu-navy-2) 60%, #fff 15%) 40%, transparent 75%);
      animation:menuOrbFloat 8.5s ease-in-out infinite -3s; }
    /* A larger glass "sphere" with a specular highlight and its own cast
       shadow — the single intentional 3D-model-style accent on the hero,
       reading as a lit glossy orb rather than a flat circle. Kept to one,
       tucked low-left, so it adds depth without cluttering the identity
       content. */
    .shop-menu .menu-hero-orb-c{ width:130px; height:130px; left:-30px; bottom:-40px; z-index:0;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 20%, transparent 34%),
        radial-gradient(circle at 68% 78%, color-mix(in srgb, var(--menu-navy-2) 70%, transparent) 0%, transparent 60%),
        linear-gradient(155deg, color-mix(in srgb, var(--menu-gold) 55%, transparent) 0%, color-mix(in srgb, var(--menu-navy-2) 45%, transparent) 70%);
      box-shadow:inset -8px -10px 24px rgba(0,0,0,0.35), inset 6px 8px 18px rgba(255,255,255,0.12), 0 20px 34px -10px rgba(0,0,0,0.4);
      filter:blur(.3px);
      animation:menuOrbFloat 13.5s ease-in-out infinite -1.5s; }
    @keyframes menuOrbFloat{
      0%,100%{ transform:translateY(0) translateX(0); }
      50%{ transform:translateY(-9px) translateX(-4px); }
    }
    .shop-menu .menu-hero-content{ position:relative; z-index:1; width:100%; padding:1.1rem 1.4rem; color:#fff; transform-style:preserve-3d; transition:transform .12s ease-out; will-change:transform; }
    .shop-menu .menu-hero-top{ display:flex; flex-direction:row-reverse; align-items:center; gap:.9rem; text-align:start; }
    html[dir="rtl"] .shop-menu .menu-hero-top{ flex-direction:row; }
    .shop-menu .menu-hero-avatar{ flex:0 0 auto; width:72px; height:72px; border-radius:50%; overflow:hidden; border:3px solid transparent;
      background-image:linear-gradient(var(--menu-surface), var(--menu-surface)), conic-gradient(from 180deg, var(--menu-gold), var(--menu-navy-2), var(--menu-gold));
      background-origin:border-box; background-clip:padding-box, border-box;
      box-shadow:0 10px 26px -2px rgba(0,0,0,0.45), 0 3px 10px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.3), 0 0 22px 3px color-mix(in srgb, var(--menu-gold) 40%, transparent);
      transition:transform .3s cubic-bezier(.34,1.56,.64,1); transform:translateZ(40px); animation:menuHeroFloat 7s ease-in-out infinite; }
    .shop-menu .menu-hero-avatar img{ width:100%; height:100%; object-fit:cover; }
    .shop-menu .menu-hero-info{ flex:1 1 auto; min-width:0; transform:translateZ(20px); }
    .shop-menu .menu-hero-name{ font-size:1.15rem; font-weight:800; letter-spacing:-0.02em; color:#fff; margin:0; text-shadow:0 2px 8px rgba(0,0,0,0.4); }
    .shop-menu .menu-hero-tagline{ color:rgba(255,255,255,0.9); font-size:.83rem; line-height:1.45; margin-top:.22rem; text-shadow:0 1px 6px rgba(0,0,0,0.35); }
    @keyframes menuHeroFloat{
      0%,100%{ transform:translateZ(40px) translateY(0) rotate(0deg); }
      50%{ transform:translateZ(40px) translateY(-7px) rotate(-3deg); }
    }
    @media (prefers-reduced-motion: reduce){
      .shop-menu .menu-hero-avatar{ animation:none; }
      .shop-menu .menu-hero-content{ transition:none; }
      .shop-menu .menu-hero-orb-a, .shop-menu .menu-hero-orb-b, .shop-menu .menu-hero-orb-c{ animation:none; }
    }
    .shop-menu .menu-pill-icon{ width:11px; height:11px; object-fit:contain; flex-shrink:0; vertical-align:middle; }
    .shop-menu .menu-cta-icon{ width:16px; height:16px; object-fit:contain; flex-shrink:0; vertical-align:middle; }
    .shop-menu .menu-row-icon{ width:12px; height:12px; object-fit:contain; flex-shrink:0; vertical-align:middle; }
    @media (min-width:640px){
      .shop-menu .menu-hero{ min-height:210px; }
      .shop-menu .menu-hero-content{ padding:1.5rem 2rem; }
      .shop-menu .menu-hero-avatar{ width:100px; height:100px; }
      .shop-menu .menu-hero-name{ font-size:1.55rem; }
      .shop-menu .menu-hero-tagline{ font-size:.92rem; max-width:32rem; }
    }
    /* Info row — address/phone/hours/website as plain icon+text items
       directly on the page background, wrapping onto new lines as needed.
       No scrolling, no chip fills — just spacing and a thin center-dot
       separator between entries, like a masthead byline. */
    .shop-menu .menu-info-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; padding:1rem 0 0; font-size:.82rem; color:var(--menu-muted); }
    .shop-menu .menu-info-chip{ display:inline-flex; align-items:center; gap:.4rem; }
    .shop-menu .menu-info-chip a{ color:var(--menu-gold-2); text-decoration:none; }
    .shop-menu .menu-info-chip a:hover{ text-decoration:underline; }
    @media (min-width:640px){ .shop-menu .menu-info-strip{ font-size:.85rem; gap:.5rem 1.4rem; } }
    .shop-menu .menu-header{ padding-top:1.5rem; }
    /* Action row — the up-to-7 store actions (WhatsApp, barcode, location,
       ID card, share, share-via-WhatsApp, copy-link) as a fixed grid of
       plain icon+label tiles: no fills, no borders, no shadows. WhatsApp
       (the primary action) is picked out by color alone — a solid navy
       icon badge — everything else uses a simple outlined badge, so the
       hierarchy reads through color/weight, not boxes. Fixed grid, never
       horizontal-scrolling, per the layout rules. Same underlying
       <a>/<button> elements/classes as before (whatsapp-btn/ghost-btn/
       copy-link-btn/share-native-btn), so all existing JS/links keep
       working — only the visual treatment changed. */
    .shop-menu .menu-primary-cta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem .5rem; }
    .shop-menu .action-tile{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.45rem; padding:0; font-weight:600; font-size:.68rem; text-align:center; text-decoration:none; cursor:pointer; border:none; background:none; line-height:1.25; color:var(--menu-text); transition:color .2s ease; }
    .shop-menu .action-tile:hover{ color:var(--menu-navy-2); }
    body[data-theme="dark"] .shop-menu .action-tile:hover{ color:var(--menu-gold-2); }
    .shop-menu .action-tile-icon-wrap{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:16px; flex-shrink:0; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
    .shop-menu .action-tile:hover .action-tile-icon-wrap{ transform:translateY(-3px); }
    .shop-menu .action-tile:active .action-tile-icon-wrap{ transform:translateY(0) scale(.94); }
    .shop-menu .action-tile .menu-cta-icon{ width:18px; height:18px; }
    .shop-menu .action-tile-label{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .shop-menu .whatsapp-btn.action-tile .action-tile-icon-wrap{ background:linear-gradient(150deg, var(--menu-navy) 0%, var(--menu-navy-2) 100%); box-shadow:0 6px 16px color-mix(in srgb, var(--menu-navy) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.2); }
    .shop-menu .whatsapp-btn.action-tile:hover .action-tile-icon-wrap{ box-shadow:0 10px 22px color-mix(in srgb, var(--menu-navy) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); }
    .shop-menu .whatsapp-btn.action-tile .menu-cta-icon{ filter:brightness(0) invert(1); }
    .shop-menu .ghost-btn.action-tile .action-tile-icon-wrap{ background:linear-gradient(150deg, var(--menu-surface) 0%, var(--menu-surface-2) 100%); border:1px solid var(--menu-hairline); box-shadow:0 2px 8px rgba(13,21,38,0.06); }
    .shop-menu .ghost-btn.action-tile:hover .action-tile-icon-wrap{ border-color:var(--menu-navy-2); box-shadow:0 8px 18px rgba(13,21,38,0.12); }
    @media (min-width:480px){
      .shop-menu .menu-primary-cta{ grid-template-columns:repeat(5,1fr); }
    }
    @media (min-width:640px){
      .shop-menu .menu-primary-cta{ grid-template-columns:repeat(7,1fr); gap:1rem; }
      .shop-menu .action-tile{ font-size:.72rem; }
      .shop-menu .action-tile-icon-wrap{ width:50px; height:50px; }
    }
    .shop-menu .menu-about{ margin-top:1.4rem; }
    .shop-menu .menu-about summary{ cursor:pointer; font-weight:700; font-size:.85rem; color:var(--menu-gold-2); list-style:none; }
    .shop-menu .menu-about summary::-webkit-details-marker{ display:none; }
    .shop-menu .menu-about-body{ margin-top:.75rem; font-size:.85rem; }
    .shop-menu .menu-about-body .row{ display:flex; align-items:center; gap:.5rem; color:var(--menu-muted); margin-top:.55rem; }
    .shop-menu .menu-about-body .row:first-child{ margin-top:0; }
    .shop-menu .menu-about-body a{ color:var(--menu-gold-2); text-decoration:none; }
    .social-links-row{ display:inline-flex; flex-wrap:wrap; gap:.6rem; }
    .social-link-chip{ display:inline-flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; border-radius:50%; border:1.5px solid var(--menu-hairline); text-decoration:none !important; font-size:.9rem; transition:transform .2s ease, border-color .2s ease; }
    .social-link-chip:hover{ transform:translateY(-2px); border-color:var(--menu-gold-2); }
    .shop-menu .menu-about-body button.copy-link-btn{ background:none; border:none; padding:0; margin:0; font:inherit; color:var(--menu-gold-2); text-decoration:underline; cursor:pointer; box-shadow:none; }
    .shop-menu .menu-map{ width:100%; height:180px; border:0; border-radius:14px; margin-top:.75rem; display:block; }
    /* Search + filters + category tabs — a plain row, no boxed toolbar
       background, just a hairline rule above it to separate it from the
       action row. Search is an underline-style field (no filled pill),
       filters is a plain icon+text toggle, and category tabs are the one
       row in this block allowed to scroll horizontally. */
    .shop-menu .menu-toolbar{ padding-top:1.5rem; border-top:1px solid var(--menu-hairline); margin-top:1.5rem; }
    .shop-menu .menu-tabs{ display:flex; gap:.5rem; overflow-x:auto; padding:1.25rem 0 .3rem; scrollbar-width:none; }
    .shop-menu .menu-tabs::-webkit-scrollbar{ display:none; }
    .shop-menu .menu-tab{ flex:0 0 auto; padding:.4rem .1rem; border-bottom:2px solid transparent; color:var(--menu-muted); font-weight:700; font-size:.85rem; white-space:nowrap; text-decoration:none; transition:color .2s ease, border-color .2s ease; }
    .shop-menu .menu-tab + .menu-tab{ margin-inline-start:.6rem; }
    .shop-menu .menu-tab:hover{ color:var(--menu-text); }
    .shop-menu .menu-tab.active{ color:var(--menu-gold-2); border-bottom-color:var(--menu-gold-2); }
    .shop-menu .menu-search-row{ display:flex; align-items:stretch; gap:.6rem; }
    .shop-menu .menu-toolbar-spacer{ height:1.25rem; }
    @media (min-width:640px){
      .shop-menu .menu-tabs{ padding-top:1.5rem; gap:.6rem; }
      .shop-menu .menu-toolbar-spacer{ height:1.5rem; }
    }
    .shop-menu .menu-search-box{ position:relative; flex:1 1 auto; min-width:0; }
    .shop-menu .menu-search-box input{ width:100%; height:100%; background:none; border:none; border-bottom:1.5px solid var(--menu-hairline); border-radius:0; padding:.7rem 0 .7rem 1.6rem; color:var(--menu-text); font-size:.92rem; transition:border-color .2s ease; }
    .shop-menu .menu-search-box input:focus{ outline:none; border-bottom-color:var(--menu-gold-2); }
    html[dir="rtl"] .shop-menu .menu-search-box input{ padding:.7rem 1.6rem .7rem 0; }
    .shop-menu .menu-search-box input::placeholder{ color:var(--menu-muted); }
    .shop-menu .menu-search-box .ic{ position:absolute; left:0; top:50%; transform:translateY(-50%); color:var(--menu-muted); pointer-events:none; }
    html[dir="rtl"] .shop-menu .menu-search-box .ic{ left:auto; right:0; }
    .shop-menu .menu-more-filters{ position:relative; flex:0 0 auto; }
    .shop-menu .filters-toggle{ display:inline-flex; align-items:center; gap:.4rem; height:100%; padding:0 .2rem; color:var(--menu-text); font-weight:700; font-size:.82rem; white-space:nowrap; cursor:pointer; list-style:none; border-bottom:1.5px solid var(--menu-hairline); transition:color .2s ease, border-color .2s ease; }
    .shop-menu .filters-toggle::-webkit-details-marker{ display:none; }
    .shop-menu .filters-toggle:hover{ color:var(--menu-gold-2); }
    .shop-menu .menu-more-filters[open] .filters-toggle{ color:var(--menu-gold-2); border-color:var(--menu-gold-2); }
    /* The one intentional exception: a transient dropdown overlay needs a
       surface to sit on top of the page content behind it, or it's
       unreadable — kept as light and minimal as that job allows. */
    .shop-menu .filters-panel{ position:absolute; top:calc(100% + .6rem); inset-inline-end:0; width:min(300px, calc(100vw - 2.5rem)); background:var(--menu-popover-surface); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--menu-hairline); border-radius:16px; box-shadow:0 12px 28px rgba(13,21,38,0.16); padding:1.1rem; z-index:20; }
    .shop-menu .filters-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
    .shop-menu .filters-grid select{ width:100%; min-width:0; background:var(--menu-bg); border:1px solid var(--menu-hairline); box-shadow:none; border-radius:10px; padding:.5rem .6rem; color:var(--menu-text); font-size:.82rem; }
    .shop-menu .filters-btns{ display:flex; gap:.5rem; margin-top:.75rem; }
    .shop-menu .filters-btns button.apply, .shop-menu .filters-btns a.reset-link{ flex:1; text-align:center; font-size:.8rem; padding:.5rem .9rem; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; transition:opacity .2s ease; }
    .shop-menu .filters-btns button.apply{ border:none; background:var(--menu-btn-bg); color:var(--menu-btn-text); }
    .shop-menu .filters-btns a.reset-link{ border:1.5px solid var(--menu-hairline); color:var(--menu-text); }
    .shop-menu .filters-btns button.apply:active, .shop-menu .filters-btns a.reset-link:active{ opacity:.75; }
    .shop-menu .menu-rating-chip{ display:inline-flex; align-items:center; font-size:.78rem; font-weight:700; color:var(--menu-gold-2); }