/* Club shop - two shopfronts behind a sliding island switch (club-direct on
   dark, VX-3 link-out on light), basket drawer, product modal.
   Leans on style.css tokens; red stays on buttons/accents only. */

/* ---- the island switch ---- */
.shop-switch-wrap{display:flex;justify-content:center;padding:118px 16px 8px}
.shop-switch{position:relative;display:inline-flex;background:rgba(20,20,20,.92);border:1px solid var(--line);border-radius:999px;padding:6px;backdrop-filter:blur(10px)}
.shop-switch button{position:relative;z-index:1;background:none;border:0;color:var(--mut);font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.2px;padding:12px 34px;border-radius:999px;cursor:pointer;transition:color .25s ease}
.shop-switch button.on{color:#0B0B0C}
.shop-thumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);background:#fff;border-radius:999px;transition:transform .3s cubic-bezier(.22,.9,.3,1.2)}
.shop-switch.vx3 .shop-thumb{transform:translateX(100%)}
@media (max-width:480px){.shop-switch button{padding:11px 22px;font-size:14px}}

/* shopfront swap */
.shopfront{padding-top:34px}
.shopfront.fading{opacity:0}
.shopfront{transition:opacity .18s ease}

.shop-note{color:var(--mut);font-size:15px;max-width:640px;margin:0 0 24px}
.light .shop-note{color:#555}

/* ---- product grid: fill the wrap, big images ---- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
@media (max-width:640px){.shop-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}}

.shop-card{background:var(--ink-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;padding:0;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease}
.shop-card:hover{transform:translateY(-3px);border-color:#3a3a3a}
.shop-card .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-card .ph img{width:100%;height:100%;object-fit:contain;display:block}
.shop-card .meta{padding:15px 17px 17px}
.shop-card .meta b{display:block;font-size:15px;line-height:1.35;font-weight:600;color:var(--paper)}
.shop-card .meta .price{display:block;margin-top:6px;font-family:var(--mono);font-size:14.5px;color:var(--red);font-weight:500}
.shop-card .badge{display:inline-block;margin-top:9px;font-size:11px;font-family:var(--mono);letter-spacing:.4px;padding:3px 8px;border-radius:20px;border:1px solid var(--line);color:var(--mut)}

/* CLUB front (dark): James's product shots sit on black */
#front-club .shop-card .ph{background:#0B0B0C}

/* VX-3 front (light): their shots sit on white, text goes dark */
#front-vx3 .shop-card{background:#fff;border-color:#DDD}
#front-vx3 .shop-card:hover{border-color:#b7b7b7}
#front-vx3 .shop-card .ph{background:#fff}
#front-vx3 .shop-card .meta b{color:var(--ink)}
#front-vx3 .shop-card .badge{color:#666;border-color:#ccc}

/* ---- sidebar filters (left, like a proper shop) ---- */
.shop-layout{display:grid;grid-template-columns:210px 1fr;gap:34px;align-items:start}
.shop-side{position:sticky;top:110px}
.side-group{margin-bottom:26px}
.side-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.light .side-title{color:#777}
.side-chips{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.side-chip{background:none;border:1px solid transparent;border-radius:10px;color:var(--mut);font-family:var(--body);font-size:14.5px;font-weight:500;text-align:left;padding:9px 12px;cursor:pointer;transition:color .15s ease,background .15s ease}
.side-chip:hover{color:var(--paper);background:rgba(255,255,255,.05)}
.side-chip.on{color:#fff;background:rgba(255,255,255,.08);border-color:var(--line);font-weight:600}
.light .side-chip{color:#555}
.light .side-chip:hover{color:#111;background:rgba(0,0,0,.05)}
.light .side-chip.on{color:#111;background:rgba(0,0,0,.06);border-color:#ccc}

/* mobile: sidebar becomes horizontal scroll rows above the grid */
@media (max-width:820px){
  .shop-layout{display:block}
  .shop-side{position:static;margin-bottom:18px}
  .side-group{margin-bottom:14px}
  .side-chips{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .side-chip{white-space:nowrap;border:1px solid var(--line)}
  .light .side-chip{border-color:#ccc}
}

/* basket count pill in the header button */
.basket-count{display:inline-block;min-width:20px;text-align:center;background:#fff;color:var(--red);border-radius:20px;font-size:12px;padding:1px 6px;margin-left:8px;font-family:var(--mono)}

/* basket drawer */
.basket-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:flex;justify-content:flex-end}
.basket-drawer{background:var(--ink-soft);border-left:1px solid var(--line);width:min(420px,100%);height:100%;display:flex;flex-direction:column;padding:24px}
.basket-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.basket-head h2{font-size:20px}
#basket-items{flex:1;overflow:auto}
.basket-line{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}
.basket-line img{width:56px;height:56px;object-fit:contain;background:#0B0B0C;border-radius:8px}
.basket-line .bl-meta{flex:1}
.basket-line .bl-meta b{display:block;font-size:14px}
.basket-line .bl-meta span{font-size:12.5px;color:var(--mut)}
.basket-line .bl-qty{display:flex;align-items:center;gap:8px}
.basket-line .bl-qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--paper);cursor:pointer;font-size:15px;line-height:1}
.basket-line .bl-price{font-family:var(--mono);font-size:13.5px;min-width:60px;text-align:right}
.basket-foot{border-top:1px solid var(--line);padding-top:16px}
.basket-total{display:flex;justify-content:space-between;font-size:16px;margin-bottom:14px}
.basket-foot .btn{width:100%;text-align:center}
.basket-empty{color:var(--mut);padding:30px 0;text-align:center}

/* product modal */
.product-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.product-modal{background:var(--ink-soft);border:1px solid var(--line);border-radius:16px;max-width:820px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;position:relative}
@media (max-width:700px){.product-modal{grid-template-columns:1fr;max-width:440px}}
.product-media{background:#0B0B0C;display:flex;align-items:center;justify-content:center;min-height:300px}
.product-media.on-white{background:#fff}
.product-media img{width:100%;height:100%;object-fit:contain;max-height:480px}
.product-info{padding:26px}
.product-info h3{font-size:20px;margin:4px 0 6px}
.product-info .price{font-family:var(--mono);color:var(--red);font-size:17px;margin-bottom:12px}
.product-info .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut)}
.product-actions{margin-top:16px;display:flex;gap:10px}
.product-close{position:absolute;top:14px;right:14px;z-index:2}

/* payment-received banner */
.shop-paid{padding:118px 16px 0}
.shop-paid .wrap{background:rgba(38,120,60,.14);border:1px solid #2f7a44;border-radius:14px;padding:18px 22px}
.shop-paid p{color:#7fd694;font-size:15px;margin:0}
.shop-paid b{color:#a5eab6}

/* loading tiles while the live product list fetches */
.shop-card.skel{cursor:default;pointer-events:none}
.shop-card.skel .ph{background:#101011}
.shop-card.skel .skel-bar{display:block;height:14px;width:70%;border-radius:6px;background:#1c1c1e;animation:skelpulse 1.1s ease-in-out infinite}
@keyframes skelpulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.shop-card.skel .skel-bar{animation:none;opacity:.6}}