/* Shop pieces: product cards, the product drawer, the bag, the dashboard's order rows. */
.card.product .card-media{ aspect-ratio:2/3; }
.tag--out{ background:var(--ink); color:var(--on-ink); }
.tag--soft{ background:var(--surface-2); color:var(--accent); }
.card-title a{ text-decoration:none; }
.link-btn{ background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; }
.nav-cta .cart-count{ display:inline-block; min-width:1.4em; margin-left:.4em; padding:0 .35em; border-radius:999px; background:var(--accent-light); color:var(--ink-deep); font-size:.75rem; font-weight:700; line-height:1.4em; text-align:center; }
.nav-cta .cart-count[hidden]{ display:none; }

/* the product drawer */
.drawer{ position:fixed; inset:0; z-index:90; background:rgba(var(--scrim-rgb),.55); display:grid; place-items:center; padding:1rem; overflow:auto; }
.drawer[hidden]{ display:none; }
.drawer-panel{ position:relative; width:min(940px,100%); max-height:calc(100vh - 2rem); overflow:auto; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-md); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
.drawer-media img{ width:100%; height:100%; object-fit:cover; }
.drawer-body{ padding:clamp(1.25rem,3vw,2rem); display:grid; gap:.7rem; align-content:start; }
.drawer-body h2{ margin:0; }
.drawer-price{ font-family:var(--font-display); font-size:1.6rem; color:var(--ink); margin:0; }
.drawer-price small{ font-family:var(--font-body); font-size:.8rem; color:var(--ink-soft); }
.drawer-pieces{ margin:0; font-size:.92rem; }
.drawer-note{ margin:0; font-size:.85rem; color:var(--accent); }
.drawer-close{ position:absolute; top:.6rem; right:.6rem; z-index:2; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.drawer-form{ margin-top:.25rem; display:grid; gap:.75rem; }
.drawer-form .btn-row{ margin:0; }
body.drawer-open{ overflow:hidden; }
.small{ font-size:.85rem; }
@media (max-width:760px){ .drawer-panel{ grid-template-columns:1fr; max-height:none; } .drawer{ align-items:start; } .drawer-media img{ max-height:52vh; } }

/* the bag */
.cart-line{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:.9rem; align-items:center; }
.cart-line img{ width:72px; height:108px; object-fit:cover; border-radius:8px; }
.cart-line .c-side{ display:grid; gap:.35rem; justify-items:end; }
.cart-line select{ font:inherit; padding:.35rem .5rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.cart-line.is-over{ border-color:var(--danger); }
.cart-line.is-over small{ color:var(--danger); }
.set-piece{ display:flex; gap:.6rem; align-items:center; padding:.55rem .75rem; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:.9rem; }
.set-piece span small{ display:block; color:var(--ink-soft); font-size:.78rem; }
.set-piece.is-off{ opacity:.55; cursor:not-allowed; }

/* orders on the dashboard */
.o-status{ display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.o-status.pending{ background:var(--warn-bg); color:var(--warn-ink); }
.o-status.paid{ background:#e2f4e9; color:#1f6b40; }
.o-status.ready, .o-status.shipped{ background:#eef3f8; color:#2c4a6b; }
.o-status.done{ background:var(--line-soft); color:var(--ink-soft); }
.o-status.cancelled, .o-status.expired{ background:#fbe4e4; color:#a32222; }
.o-lines{ margin:.25rem 0 0; padding:0; list-style:none; font-size:.85rem; color:var(--ink-soft); }
.stock-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; }
.stock-row{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:.75rem .9rem; display:grid; gap:.35rem; }
.stock-row b{ font-weight:500; color:var(--ink); }
.stock-row .stock-opt{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.88rem; }
.stock-row input{ width:4.5rem; font:inherit; padding:.3rem .5rem; border:1px solid var(--line); border-radius:8px; text-align:right; }