.shop-menu .menu-section{ padding-top:2rem; }
    .shop-menu .menu-section-title{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:1.05rem; font-weight:800; color:var(--menu-text); margin-bottom:1rem; position:relative; padding-inline-start:.7rem; }
    /* Small gold-navy accent bar marks each heading — a typographic device,
       not a container, so it stays even though the boxes around it don't. */
    .shop-menu .menu-section-title::before{ content:""; position:absolute; inset-inline-start:0; top:.15rem; bottom:.15rem; width:3px; border-radius:999px; background:linear-gradient(180deg, var(--menu-gold), var(--menu-navy-2)); }
    .shop-menu a.menu-tag{ text-decoration:none; cursor:pointer; }
    /* Category name + product count — same customizable button color as
       order-now-btn / product-card-add-btn / shop-list-btn.primary, but a
       shade darker with a glossy top-light sheen so it reads as a distinct
       badge rather than a plain repeat of the CTA buttons. */
    .shop-menu .menu-section-tag{
      display:inline-flex; align-items:center; gap:.35rem;
      background:linear-gradient(160deg, color-mix(in srgb, var(--menu-btn-bg) 92%, #000 8%) 0%, color-mix(in srgb, var(--menu-btn-bg) 78%, #000 22%) 100%);
      color:var(--menu-btn-text); font-size:.82rem; font-weight:700; padding:.35rem .85rem; border-radius:999px; line-height:1.3;
      box-shadow:0 3px 10px color-mix(in srgb, var(--menu-btn-bg) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.12);
      text-shadow:0 1px 1px rgba(0,0,0,0.15);
    }
    .shop-menu .menu-section-tag .count{ color:var(--menu-btn-text); opacity:.82; font-weight:600; font-size:.85em; text-shadow:none; }
    .shop-menu .menu-empty{ margin-top:1.5rem; padding:2rem 0; text-align:center; color:var(--menu-muted); }

    /* List row (also used by favorites.php) — plain content on the page
       background, separated from its neighbor by a hairline rule instead
       of a card box. */
    .shop-menu .menu-item{ position:relative; display:flex; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--menu-hairline); transition:opacity .2s ease; }
    .shop-menu .menu-item:hover{ opacity:.85; }
    .shop-menu .menu-item-media{ position:relative; flex:0 0 auto; width:64px; height:64px; border-radius:10px; overflow:hidden; background:var(--menu-border); }
    .shop-menu .menu-item-media .menu-item-img{ position:absolute; inset:0; }
    .shop-menu .menu-item-img{ flex:0 0 auto; width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--menu-border); transition:transform .5s ease, opacity .35s ease; }
    .shop-menu .menu-item:hover .menu-item-media .menu-item-img{ transform:scale(1.05); }
    .shop-menu .menu-item-img-alt{ opacity:0; }
    .shop-menu .menu-item:hover .menu-item-img-alt{ opacity:1; }
    .shop-menu .menu-item-img-empty{ display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
    .shop-menu .menu-item-body{ flex:1; min-width:0; }
    .shop-menu .menu-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
    .shop-menu .menu-item-name{ font-weight:800; color:var(--menu-text); font-size:.92rem; line-height:1.3; letter-spacing:-0.01em; }
    .shop-menu .menu-item-price{ font-weight:800; color:var(--menu-gold-2); font-size:.92rem; white-space:nowrap; }
    .shop-menu.shop-menu-premium .menu-item-name{ color:#C9973E; }
    /* Premium (paid-tier) sellers get a distinct warm-gold ring — the one
       deliberate exception to the site's navy+white palette, kept because
       it signals subscription status rather than page decoration. */
    .shop-menu.shop-menu-premium .menu-hero-avatar{ border-width:4px;
      background-image:linear-gradient(var(--menu-surface), var(--menu-surface)), conic-gradient(from 180deg, #E8C077, #fff8e6, #E8C077);
      box-shadow:0 10px 28px rgba(0,0,0,0.4), 0 0 0 2px rgba(232,192,119,0.4), 0 0 32px 6px rgba(232,192,119,0.4); }
    .shop-menu .menu-item-desc{ color:var(--menu-muted); font-size:.78rem; margin-top:.15rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .shop-menu .menu-item-tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; }
    .shop-menu .menu-tag{ display:inline-flex; align-items:center; gap:.3rem; background:var(--menu-tag-bg); color:var(--menu-tag-text); font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
    /* Small functional badge (e.g. "Featured") — a status label, not a
       section container, so a compact colored chip stays appropriate. */
    .shop-menu .menu-badge{ position:absolute; top:-.5rem; left:.9rem; background:linear-gradient(135deg, var(--menu-navy), var(--menu-navy-2)); color:#fff; font-size:.66rem; font-weight:800; padding:.22rem .55rem; border-radius:999px; display:inline-flex; align-items:center; gap:.25rem; box-shadow:0 4px 10px color-mix(in srgb, var(--menu-navy) 45%, transparent); }
    html[dir="rtl"] .shop-menu .menu-badge{ left:auto; right:.9rem; }
    .shop-menu .menu-item-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.5rem; }
    .shop-menu .menu-item-actions a{ font-size:.72rem; font-weight:700; padding:0; color:var(--menu-gold-2); text-decoration:none; transition:opacity .18s ease; }
    .shop-menu .menu-item-actions a:hover{ text-decoration:underline; }
    .shop-menu .menu-item-fav-btn{ font-size:.72rem; font-weight:700; padding:0; border:none; background:none; color:var(--menu-gold-2); cursor:pointer; font-family:inherit; transition:opacity .18s ease; }
    .shop-menu .menu-item-fav-btn:hover{ text-decoration:underline; }
    .shop-menu .menu-item-fav-btn.active{ color:var(--menu-navy-2); font-weight:800; }
    body[data-theme="dark"] .shop-menu .menu-item-fav-btn.active{ color:var(--menu-gold-2); }
    /* Compact product rows on phones/tablets so scrolling the list is quicker. */
    @media (max-width: 1023px){
      .shop-menu .menu-item{ gap:.5rem; padding:.65rem 0; }
      .shop-menu .menu-item-media, .shop-menu .menu-item-img{ width:46px; height:46px; }
      .shop-menu .menu-item-name{ font-size:.85rem; }
      .shop-menu .menu-item-price{ font-size:.85rem; }
      .shop-menu .menu-item-desc{ font-size:.72rem; margin-top:.1rem; -webkit-line-clamp:1; }
      .shop-menu .menu-item-actions{ gap:.6rem; margin-top:.3rem; }
      .shop-menu .menu-item-actions a, .shop-menu .menu-item-fav-btn{ font-size:.68rem; }
    }
    @media (max-width: 479px){
      .shop-menu .menu-item{ gap:.4rem; padding:.55rem 0; }
      .shop-menu .menu-item-media, .shop-menu .menu-item-img{ width:40px; height:40px; }
      .shop-menu .menu-item-desc{ display:none; }
    }
    @media (hover: none){
      .shop-menu .menu-item:hover{ opacity:1; }
      .shop-menu .menu-item:hover .menu-item-media .menu-item-img{ transform:none; }
      .shop-menu .menu-item:hover .menu-item-img-alt{ opacity:0; }
    }

    /* Product grid + "Recommended for you" rail. Horizontal scroll stays
       ONLY on the recommended rail (a "Suggested items" case) — the main
       grid below it always wraps, never scrolls. */
    .shop-menu .menu-item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-6) var(--sp-4); }
    @media (min-width: 640px){ .shop-menu .menu-item-grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-6); } }

    .shop-menu .menu-item-hscroll{ display:flex; gap:var(--sp-6); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:.4rem; margin-bottom:-.4rem; }
    .shop-menu .menu-item-hscroll .product-card{ flex:0 0 150px; width:150px; scroll-snap-align:start; }
    @media (min-width: 640px){ .shop-menu .menu-item-hscroll .product-card{ flex-basis:190px; width:190px; } }
    .shop-menu .menu-item-hscroll::-webkit-scrollbar{ height:5px; }
    .shop-menu .menu-item-hscroll::-webkit-scrollbar-track{ background:transparent; }
    .shop-menu .menu-item-hscroll::-webkit-scrollbar-thumb{ background:var(--menu-hairline); border-radius:999px; }

    /* Premium product card — a genuine elevated container: white/navy
       glass surface, soft depth shadow, gold-free navy+white gradients.
       The photo sits in its own inset "stage" container, and price/rating
       live in a distinct panel with its own small "View" button — three
       clearly separated, intentional zones rather than bare text on the
       page. */
    /* Grid/rail items each get their own stacking context so a card raised
       on hover (below) always paints above its neighbors instead of
       tucking under the row beneath it — that mis-stacking, not spacing,
       was the actual source of cards visually "overlapping". */
    .shop-menu .menu-item-hscroll > .product-card,
    .shop-menu .menu-item-grid > .product-card{ isolation:isolate; }
    .shop-menu .product-card{
      position:relative; z-index:0; display:flex; flex-direction:column;
      background:linear-gradient(165deg, var(--menu-surface) 0%, color-mix(in srgb, var(--menu-surface) 92%, var(--menu-navy) 8%) 100%);
      border:1px solid var(--menu-hairline);
      border-radius:20px; overflow:hidden;
      box-shadow:0 1px 2px rgba(13,21,38,0.05), 0 10px 24px -8px rgba(13,21,38,0.16);
      transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, z-index 0s .35s;
      will-change:transform;
    }
    /* Very subtle top sheen — just enough to keep the flat white card from
       reading as completely matte/lifeless, without the heavier "lacquer"
       treatment this had before (grain texture removed entirely — it read
       as aged/textured material, working against the clean, simple, soft
       white-and-blue look this card is going for now). */
    .shop-menu .product-card::after{
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
      background:linear-gradient(165deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 22%);
      opacity:.6; mix-blend-mode:overlay;
    }
    body[data-theme="dark"] .shop-menu .product-card{
      background:linear-gradient(165deg, var(--menu-surface) 0%, color-mix(in srgb, var(--menu-surface) 88%, #000 12%) 100%);
      box-shadow:0 1px 2px rgba(0,0,0,0.3), 0 14px 30px -10px rgba(0,0,0,0.55);
    }
    .shop-menu .product-card:hover{
      z-index:4; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .3s ease;
      transform:translateY(-6px) scale(1.015);
      border-color:color-mix(in srgb, var(--menu-navy-2) 40%, transparent);
      box-shadow:0 1px 2px rgba(13,21,38,0.06), 0 28px 48px -14px rgba(13,21,38,0.28), 0 0 0 1px color-mix(in srgb, var(--menu-navy-2) 14%, transparent);
    }
    body[data-theme="dark"] .shop-menu .product-card:hover{
      box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 30px 54px -14px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
    }

    /* Image "stage" — the premium container for the product photo: a soft
       navy↔white gradient backdrop behind the (transparent PNG-friendly)
       product shot, inset like a display case rather than a flat crop. */
    .shop-menu .product-card-media{ position:relative; aspect-ratio:25/28; overflow:hidden; }
    .shop-menu .product-card-link-overlay{ position:absolute; inset:0; z-index:1; }
    .shop-menu .product-card-media-frame{
      position:absolute; inset:.55rem; border-radius:14px; overflow:hidden;
      background:
        radial-gradient(120% 140% at 15% -10%, color-mix(in srgb, var(--menu-navy-2) 10%, transparent) 0%, transparent 55%),
        linear-gradient(150deg, #ffffff 0%, var(--menu-surface-2) 100%);
      box-shadow:inset 0 0 0 1px var(--menu-hairline), inset 0 2px 10px rgba(13,21,38,0.05);
    }
    body[data-theme="dark"] .shop-menu .product-card-media-frame{
      background:
        radial-gradient(120% 140% at 15% -10%, color-mix(in srgb, var(--menu-navy-2) 22%, transparent) 0%, transparent 55%),
        linear-gradient(150deg, var(--menu-surface) 0%, var(--menu-navy) 130%);
      box-shadow:inset 0 0 0 1px var(--menu-hairline), inset 0 2px 14px rgba(0,0,0,0.35);
    }
    .shop-menu .product-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
    .shop-menu .product-card:hover .product-card-media img:first-child{ transform:scale(1.08) translateY(-2px); }
    .shop-menu .product-card-img-alt{ opacity:0; }
    .shop-menu .product-card:hover .product-card-img-alt{ opacity:1; }
    .shop-menu .product-card-media-empty{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:100%; font-size:2rem; }
    .shop-menu .product-card-badge{ position:absolute; top:.75rem; left:.75rem; z-index:3; background:linear-gradient(135deg, var(--menu-navy), var(--menu-navy-2)); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.02em; padding:.28rem .6rem; border-radius:999px; box-shadow:0 4px 12px color-mix(in srgb, var(--menu-navy) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.2); }
    html[dir="rtl"] .shop-menu .product-card-badge{ left:auto; right:.75rem; }
    .shop-menu .product-card-fav{ position:absolute; top:.75rem; right:.75rem; z-index:3; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--menu-surface) 88%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--menu-navy-2); border:1px solid var(--menu-hairline); display:flex; align-items:center; justify-content:center; font-size:.85rem; cursor:pointer; font-family:inherit; box-shadow:0 4px 10px rgba(0,0,0,0.12); transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease; }
    body[data-theme="dark"] .shop-menu .product-card-fav{ color:#fff; }
    html[dir="rtl"] .shop-menu .product-card-fav{ right:auto; left:.75rem; }
    .shop-menu .product-card-fav:hover{ transform:scale(1.12); }
    .shop-menu .product-card-fav:active{ transform:scale(.92); }
    .shop-menu .product-card-fav.active{ background:linear-gradient(135deg, var(--menu-navy), var(--menu-navy-2)); color:#fff; border-color:transparent; }

    .shop-menu .product-card-body{ padding:.9rem .9rem 1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; position:relative; z-index:1; }
    .shop-menu .product-card-category{ font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--menu-navy-2); }
    body[data-theme="dark"] .shop-menu .product-card-category{ color:var(--menu-gold-2); }
    .shop-menu .product-card-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; font-size:.92rem; color:var(--menu-text); line-height:1.35; letter-spacing:-0.005em; text-decoration:none; margin-top:.1rem; min-height:2.4em; }

    .shop-menu .product-card-rating{ color:var(--menu-navy-2); font-size:.72rem; line-height:1.2; display:flex; align-items:center; gap:.25rem; font-weight:700; margin-top:.15rem; }
    body[data-theme="dark"] .shop-menu .product-card-rating{ color:var(--menu-gold-2); }
    .shop-menu .product-card-rating-star{ flex-shrink:0; }
    .shop-menu .product-card-rating-count{ color:var(--menu-muted); font-weight:500; }

    .shop-menu .product-card-price{ font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; color:var(--menu-navy-2); margin-top:.35rem; }
    body[data-theme="dark"] .shop-menu .product-card-price{ color:#fff; }
    .shop-menu .product-card-price.product-card-price-discounted{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
    .shop-menu .product-card-price-sale{ font-weight:800; font-size:1.05rem; color:var(--menu-navy-2); }
    body[data-theme="dark"] .shop-menu .product-card-price-sale{ color:var(--menu-gold-2); }
    .shop-menu .product-card-price-old{ font-weight:500; font-size:.78rem; color:var(--menu-muted); text-decoration:line-through; }

    /* Add to Cart — a real, working button (wired to the same .add-to-cart-btn
       JS every other "Add to Cart" on the site already uses), not just a
       "View Details" link — full-width bar on its own line below the price,
       using the seller's customizable button color like order-now-btn /
       shop-list-btn.primary already do. position:relative + z-index above
       .product-card-link-overlay (z-index:1) so it stays independently
       clickable instead of being swallowed by the whole-card link. */
    .shop-menu .product-card-add-btn{
      position:relative; z-index:2; margin-top:auto;
      width:100%; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; text-align:center;
      padding:.6rem .72rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.01em; line-height:1.25;
      color:var(--menu-btn-text); text-decoration:none; border:none; cursor:pointer; font-family:inherit;
      background:var(--menu-btn-bg);
      box-shadow:0 4px 12px color-mix(in srgb, var(--menu-btn-bg) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.18);
      transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, opacity .2s ease;
    }
    .shop-menu .product-card-add-btn:hover{ transform:translateY(-1px) scale(1.015); box-shadow:0 6px 18px color-mix(in srgb, var(--menu-btn-bg) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); }
    .shop-menu .product-card-add-btn:active{ transform:translateY(0) scale(.97); }
    .shop-menu .product-card-add-btn:disabled{ opacity:.7; cursor:default; transform:none; }
    .shop-menu .product-card-add-btn.added{ background:#16a34a; }

    @media (max-width: 479px){
      .shop-menu .product-card-name{ font-size:.8rem; }
      .shop-menu .product-card-price{ font-size:.92rem; }
      .shop-menu .product-card-rating{ font-size:.64rem; }
      .shop-menu .product-card-category{ font-size:.6rem; }
      .shop-menu .product-card-add-btn{ padding:.5rem .6rem; font-size:.7rem; }
      .shop-menu .product-card-body{ padding:.75rem .75rem .85rem; }
    }
    @media (hover: none){
      .shop-menu .product-card:hover{ transform:none; }
      .shop-menu .product-card:hover .product-card-media img:first-child{ transform:none; }
      .shop-menu .product-card:hover .product-card-img-alt{ opacity:0; }
    }
    @media (prefers-reduced-motion: reduce){
      .shop-menu .product-card{ transition:box-shadow .3s ease; }
      .shop-menu .product-card:hover{ transform:none; box-shadow:0 10px 24px -8px rgba(13,21,38,0.2); }
    }

    /* Gentle staggered entrance for the grid — subtle, not showy. */
    .shop-menu .menu-item-grid .product-card, .shop-menu .menu-item-hscroll .product-card{
      animation:productCardIn .5s cubic-bezier(.22,1,.36,1) both;
    }
    .shop-menu .menu-item-grid .product-card:nth-child(1), .shop-menu .menu-item-hscroll .product-card:nth-child(1){ animation-delay:.02s; }
    .shop-menu .menu-item-grid .product-card:nth-child(2), .shop-menu .menu-item-hscroll .product-card:nth-child(2){ animation-delay:.06s; }
    .shop-menu .menu-item-grid .product-card:nth-child(3), .shop-menu .menu-item-hscroll .product-card:nth-child(3){ animation-delay:.1s; }
    .shop-menu .menu-item-grid .product-card:nth-child(4), .shop-menu .menu-item-hscroll .product-card:nth-child(4){ animation-delay:.14s; }
    .shop-menu .menu-item-grid .product-card:nth-child(n+5), .shop-menu .menu-item-hscroll .product-card:nth-child(n+5){ animation-delay:.16s; }
    @keyframes productCardIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
    @media (prefers-reduced-motion: reduce){
      .shop-menu .menu-item-grid .product-card, .shop-menu .menu-item-hscroll .product-card{ animation:none; }
    }

    .shop-menu .menu-reviews{ margin-top:2.5rem; border-top:1px solid var(--menu-hairline); padding-top:1.5rem; }
    .shop-menu .menu-reviews-title{ font-weight:800; font-size:1.05rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

    /* Review row — plain content separated by hairlines, same language as
       the product list above. */
    .shop-menu .review-list-preview{ display:flex; flex-direction:column; margin-top:1rem; }
    .shop-menu .review-card{ display:flex; gap:.7rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px solid var(--menu-hairline); }
    .shop-menu .review-list-preview .review-card:last-child{ border-bottom:none; }
    .shop-menu .review-avatar{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.85rem; }
    .shop-menu .review-card-body{ flex:1; min-width:0; }
    .shop-menu .review-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
    .shop-menu .review-card-name{ font-weight:700; font-size:.85rem; color:var(--menu-text); }
    .shop-menu .review-card-date{ font-size:.72rem; color:var(--menu-muted); white-space:nowrap; }
    .shop-menu .review-card-stars{ color:#D98A3D; font-size:.78rem; margin-top:.15rem; }
    .shop-menu .review-card-comment{ margin-top:.35rem; font-size:.85rem; color:var(--menu-text); line-height:1.5; }
    .shop-menu .see-more-reviews-btn{ display:block; margin:1.25rem auto 0; background:none; border:none; color:var(--menu-gold-2); font-weight:700; font-size:.85rem; padding:0; cursor:pointer; text-decoration:underline; transition:opacity .2s ease; }
    .shop-menu .see-more-reviews-btn:hover{ opacity:.75; }

    .shop-menu .small-muted{ color:var(--menu-muted); }
    .shop-menu .input-dark{ background:var(--menu-surface); border:1px solid var(--menu-border); color:var(--menu-text); }
    .shop-menu .dashboard-panel{ background:var(--menu-surface); border:1px solid var(--menu-border); }
    .shop-menu [class*="text-amber-300"]{ color:#B5502E !important; }
    .shop-menu button[class*="bg-amber-600"]{ color:#fff; }