/* ARIYO store: product cards, cart drawer, product popup, toast. Shared by / and /shop.
   Uses the page's colour variables (--amber, --neon, --muted, --type, --stencil...). */

/* Product cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);background:#0c0d10;
  background-image:radial-gradient(ellipse at 50% 30%,#1c1f24,transparent 70%)}
.card{text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:14px}
.shot{width:100%;height:clamp(200px,17vw,270px);display:flex;justify-content:center}
.shot img{height:100%;width:auto;object-fit:contain;transition:transform .3s;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.card:hover .shot img{transform:scale(1.02)}
.card h3{font-size:clamp(20px,1.7vw,28px);font-weight:600;line-height:1;letter-spacing:-.01em;margin-top:4px}
.card h3 a:hover,.card h3 button:hover{color:var(--amber)}
.card .price{font-size:clamp(20px,1.7vw,28px);line-height:1}
.card .meta{font-size:clamp(13px,1vw,17px);font-weight:500;margin-top:4px;padding:0 10px}
.stock{color:var(--neon);font-size:14px;margin-top:4px;letter-spacing:.06em}
.card{scroll-margin-top:90px}  /* share links scroll to the card under the header */

/* Colour/size picker + ADD TO CART on the card (/shop, grid[data-quick]) */
.pick{width:100%;padding:4px 6px 0;display:flex;flex-direction:column;align-items:center}
.pick .opt{margin-top:12px}
.pick .opt legend{margin:0 auto 6px;font-size:13px}
.pick .chips{justify-content:center;gap:6px}
.pick .chip{padding:5px 11px;font-size:15px}
.add{margin-top:16px;font-family:var(--stencil);font-size:17px;letter-spacing:.14em;color:#fff;background:var(--red,#e3161b);border-radius:3px;padding:9px 26px;
  box-shadow:0 0 12px #ff202055;transition:box-shadow .2s}
.add:hover{box-shadow:0 0 18px #ff3030,0 0 36px #ff202088}
.chip .dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:-1px;border:1px solid #777}

/* Share button in the product popup */
.share{font-family:var(--type);font-size:13px;letter-spacing:.14em;color:var(--muted);border:1px solid #444;border-radius:3px;padding:4px 10px;margin-bottom:12px}
.share:hover{color:#fff;border-color:var(--amber)}

/* Buttons */
.cta{grid-column:1/-1;margin-top:12px;background:linear-gradient(#ff2a2a,#d8121a);font-family:var(--stencil);font-size:27px;letter-spacing:.14em;color:#ffe9e0;padding:4px;border-radius:2px;
  box-shadow:0 0 10px #ff2020aa,0 0 26px #ff202066;transition:box-shadow .2s}
.cta:hover{box-shadow:0 0 14px #ff3030,0 0 40px #ff2020aa}
.cta:disabled{opacity:.6;cursor:wait}

/* Cart drawer and product popup */
/* ---------- Drawers / modals ---------- */
.scrim{position:fixed;inset:0;background:#000b;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#111;border-left:1px solid #2a2a2a;z-index:60;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s;display:flex;flex-direction:column}
.drawer.open{transform:none;visibility:visible}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #222;font-size:24px;letter-spacing:.1em}
.close{font-size:30px;line-height:1;width:36px;height:36px}
.items{flex:1;overflow:auto;padding:10px 22px}
.item{display:grid;grid-template-columns:70px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid #1e1e1e;align-items:center}
.item img{width:70px;height:60px;object-fit:cover;border-radius:4px}
.item small{display:block;color:var(--muted);font-weight:500;font-size:15px}
.qty{display:flex;align-items:center;gap:8px;margin-top:4px}
.qty button{width:26px;height:26px;border:1px solid #444;border-radius:4px}
.rm{color:var(--muted);font-size:14px;text-decoration:underline}
.empty{color:var(--muted);text-align:center;padding:60px 10px}
.empty .buy{border:1px solid #444;padding:8px 20px;margin-top:16px;color:#fff}
.dfoot{padding:18px 22px;border-top:1px solid #222}
.dfoot .cta{width:100%;margin:0}
/* Free-shipping progress */
.freebar{margin-bottom:14px;font-family:var(--type);font-size:14px;color:#ddd}
.freebar[hidden]{display:none}
.freebar b{color:var(--amber);font-weight:700}
.freebar .track{height:6px;border-radius:3px;background:#262626;margin-top:7px;overflow:hidden}
.freebar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d8121a,var(--amber));transition:width .4s}
.freebar.done b{color:var(--green,#9fd06a)}
.freebar.done i{background:var(--green,#9fd06a)}
.row{display:flex;justify-content:space-between;font-size:22px;margin-bottom:12px}
.row.sm{font-size:17px;color:#ddd}
.shipto{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.shipto label{font-size:16px;white-space:nowrap}
.shipto input{flex:1;min-width:0;margin:0}
.dfoot .err{display:block;margin:-6px 0 10px}
.note{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}

.modal{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-46%);opacity:0;visibility:hidden;transition:.2s;width:min(840px,94vw);max-height:92vh;overflow:auto;background:#111;border:1px solid #2a2a2a;border-radius:6px;display:grid;grid-template-columns:1.1fr 1fr}
.modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.modal .pic{background:#0a0b0d;display:grid;place-items:center}
.modal .info{padding:26px;position:relative}
.modal .close{position:absolute;right:12px;top:10px}
.modal h3{font-size:30px;line-height:1.05;padding-right:30px}
.modal .price{font-size:26px;color:var(--amber);margin:6px 0 10px}
.modal p{color:#ccc;font-weight:500;white-space:pre-line}
.modal .pic{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-bottom:10px}
.modal .pic > img{width:100%;max-height:60vh;object-fit:contain}
.thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 10px}
.thumbs:empty{display:none}
.thumbs button{width:54px;height:54px;border:1px solid #333;border-radius:4px;overflow:hidden;opacity:.6}
.thumbs button[aria-pressed=true]{border-color:var(--amber);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}
.grid-msg{grid-column:1/-1}
.add:disabled{background:#333;box-shadow:none;cursor:not-allowed}
.opt{margin-top:18px;border:0}
.opt legend{font-size:16px;margin-bottom:8px;color:var(--muted);letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #444;border-radius:3px;padding:6px 14px;font-size:17px}
.chip[aria-pressed=true]{border-color:var(--amber);color:var(--amber)}
.chip:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.modal .cta{width:100%;margin-top:22px;font-size:22px}

.drawer input{font-family:var(--type);font-size:17px;text-transform:uppercase;background:#0a0a0a;color:#fff;border:1px solid #666;border-radius:3px;padding:3px 12px;margin:5px 0}
.drawer input::placeholder{color:#cfcfcf}
.drawer input:focus{outline:none;border-color:var(--amber)}
.drawer input[aria-invalid=true]{border-color:var(--neon)}
.drawer label{font-family:var(--type)}
.drawer .err{color:#ff7373;font-size:14px;font-family:var(--type)}
.drawer .err:empty{display:none}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);opacity:0;visibility:hidden;background:#1a1a1a;border:1px solid var(--amber);color:#fff;padding:10px 20px;border-radius:4px;z-index:70;transition:.25s;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:28px;padding-bottom:10px}
  .shot{height:auto}
  .shot img{width:100%;height:auto;max-width:560px}
  .card h3,.card .price{font-size:26px}
  .card .meta{font-size:16px}
  .modal{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cta{font-size:22px;letter-spacing:.08em}
}