:root{--base:#07070B;--surface:#0E1018;--raised:#13152A;--text-primary:#D8D9E2;--text-secondary:rgba(168, 169, 184, 0.75);--text-muted:rgba(168, 169, 184, 0.45);--accent:#7B4DFF;--space-xs:.5rem;--space-sm:.75rem;--space-md:1.5rem;--space-lg:2.5rem;--space-xl:4rem;}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%}
html,body{background:var(--base);color:var(--text-primary);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:300;line-height:1.7}
.store-container{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.store-header{display:flex;justify-content:space-between;align-items:center;padding:2rem 0;border-bottom:0.5px solid rgba(168,169,184,0.07);margin-bottom:2rem}
.store-header h1{font-size:36px;font-weight:200;letter-spacing:-0.02em}
.cart-link{color:var(--accent);text-decoration:none;font-size:13px}
.store-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem}
.filter-tag{font-size:11px;color:var(--text-secondary);text-decoration:none;padding:4px 12px;border:0.5px solid rgba(255, 255, 255, 0.08);border-radius:12px;letter-spacing:0.06em;text-transform:uppercase;font-weight:400}
.filter-tag.active,.filter-tag:hover{color:var(--accent);border-color:var(--accent)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr}}
.product-card{background:var(--surface);overflow:hidden}
.product-image{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.placeholder{width:100%;aspect-ratio:1;background:var(--raised)}
.product-info{padding:1rem;display:flex;flex-direction:column;gap:8px}
.product-name{font-size:15px;font-weight:200;line-height:1.3}
.product-name a{color:var(--text-primary);text-decoration:none}
.product-name a:hover{color:var(--accent)}
.product-price{display:flex;gap:8px;align-items:center}
.price{font-size:15px;font-weight:400;color:var(--accent)}
.price-lg{font-size:26px;font-weight:200;color:var(--accent)}
.compare-price{font-size:12px;color:var(--text-muted);text-decoration:line-through}
.btn-add{background:var(--accent);color:#07070B;border:none;padding:8px 16px;font-size:11px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block}
.btn-add:hover{opacity:0.9}
.btn-lg{padding:12px 24px;font-size:13px}
.out-of-stock{font-size:11px;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase}
.empty-state{color:var(--text-muted);text-align:center;padding:3rem 0;font-size:15px}
.empty-state a{color:var(--accent)}
.back-link{color:var(--text-secondary);text-decoration:none;font-size:13px;display:inline-block;margin-bottom:1rem}
.back-link:hover{color:var(--accent)}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 0}
@media(max-width:700px){.product-detail{grid-template-columns:1fr}}
.product-detail-image img,.placeholder-lg{width:100%;aspect-ratio:1;object-fit:cover;background:var(--raised)}
.product-detail-info{display:flex;flex-direction:column;gap:1rem}
.product-category{font-size:11px;color:var(--accent);letter-spacing:0.06em;text-transform:uppercase;font-weight:400}
.product-description{font-size:15px;color:var(--text-secondary);line-height:1.7}
.qty-label{font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.qty-input{background:var(--raised);border:0.5px solid rgba(255, 255, 255, 0.08);padding:8px;color:var(--text-primary);font-family:inherit;font-size:13px;width:60px}
.stock-info{font-size:11px;color:var(--text-secondary)}
.variant-selector{margin:1rem 0}
.variant-selector label{font-size:11px;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;font-weight:400;display:block;margin-bottom:4px}
.variant-selector select{width:100%;background:var(--raised);border:0.5px solid rgba(255, 255, 255, 0.08);padding:8px 12px;color:var(--text-primary);font-family:inherit;font-size:13px}
.product-gallery{display:flex;gap:8px;flex-wrap:wrap;margin-top:1rem}
.gallery-thumb{width:80px;height:80px;object-fit:cover;cursor:pointer;opacity:0.7;transition:opacity 0.2s}
.gallery-thumb:hover{opacity:1}
.cart-items{display:flex;flex-direction:column;gap:1rem;margin:2rem 0}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--surface)}
.cart-item-info h3{font-size:15px;font-weight:200}
.cart-item-variant{font-size:11px;color:var(--text-muted)}
.cart-item-price{font-size:15px;color:var(--accent)}
.cart-item-actions{display:flex;gap:8px;align-items:center}
.qty-form{display:flex;gap:4px;align-items:center}
.qty-input-sm{width:50px;background:var(--raised);border:0.5px solid rgba(255, 255, 255, 0.08);padding:4px;color:var(--text-primary);font-family:inherit;font-size:13px;text-align:center}
.btn-sm{background:var(--raised);border:0.5px solid rgba(255, 255, 255, 0.08);color:var(--text-primary);padding:4px 8px;font-size:11px;cursor:pointer}
.btn-remove{background:none;border:none;color:var(--text-muted);font-size:11px;cursor:pointer;text-decoration:underline}
.btn-remove:hover{color:#e74c3c}
.cart-total{text-align:right;font-size:20px;font-weight:200;padding:1rem 0;margin-top:1rem;border-top:0.5px solid rgba(168,169,184,0.07)}
.btn-checkout{background:var(--accent);color:#07070B;border:none;padding:12px 24px;font-size:13px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;display:inline-block;text-decoration:none;margin-top:1rem}
.checkout-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;padding:2rem 0}
@media(max-width:700px){.checkout-layout{grid-template-columns:1fr}}
.checkout-form .form-group{margin-bottom:1rem}
.checkout-form label{font-size:11px;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;font-weight:400;display:block;margin-bottom:4px}
.checkout-form input,.checkout-form textarea,.checkout-form select{width:100%;background:var(--raised);border:0.5px solid rgba(255, 255, 255, 0.08);padding:10px 14px;color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:300;outline:none}
.checkout-form input:focus,.checkout-form textarea:focus{border-color:var(--accent)}
.checkout-form textarea{min-height:80px;resize:vertical}
.checkout-summary{background:var(--surface);padding:1.5rem;height:fit-content}
.checkout-summary h3{font-size:15px;font-weight:200;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:0.5px solid rgba(168,169,184,0.07)}
.summary-item{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary);padding:4px 0}
.summary-total{display:flex;justify-content:space-between;padding:1rem 0 0;margin-top:0.5rem;border-top:0.5px solid rgba(168,169,184,0.07);font-size:15px}
.order-confirmed{text-align:center;padding:4rem 0}
.order-confirmed h1{font-size:36px;font-weight:200;margin-bottom:1rem}
.order-confirmed p{color:var(--text-secondary);margin-bottom:0.5rem}
.order-detail{font-size:15px}
.btn-ghost{background:none;border:0.5px solid rgba(168,169,184,0.2);color:var(--text-primary);padding:12px 24px;font-size:11px;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;display:inline-block;text-decoration:none;margin-left:8px}
.cart-item-variant{font-size:11px;color:var(--text-muted)}
/* ── MOBILE-FIRST LADDER (2026-10-13) ─────────────────────────────────────────────────────────
   phone 360 -> tablet 768 -> laptop -> desktop. Type (html font-size), --space-* spacing and every
   grid step together, so a store built from this generator is born responsive: product cards are
   1-up on a phone, 2-up on a large phone / tablet, 3-up on a laptop and desktop. Tap targets are
   >=44px and the page never scrolls sideways (overflow-x:clip keeps the sticky header sticky). */
@media(max-width:1280px){:root{--space-xl:3.75rem;--space-lg:2.4rem;--space-md:1.5rem;--space-sm:.75rem;--space-xs:.5rem}.store-container{padding:2rem 1.25rem}.product-grid{grid-template-columns:repeat(3,1fr)}.product-detail{grid-template-columns:repeat(2,1fr)}.checkout-layout{grid-template-columns:repeat(2,1fr)}.account-grid{grid-template-columns:repeat(2,1fr)}.store-header h1{font-size:clamp(26px,5vw,36px)}.price-lg{font-size:clamp(22px,4vw,26px)}}
@media(max-width:1024px){:root{--space-xl:3.5rem;--space-lg:2.25rem;--space-md:1.4rem;--space-sm:.7rem;--space-xs:.45rem}.store-container{padding:2rem 1.1rem}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){html{font-size:15.5px}:root{--space-xl:3rem;--space-lg:2rem;--space-md:1.25rem;--space-sm:.66rem;--space-xs:.42rem}.store-container{padding:1.5rem 1rem}.product-grid{grid-template-columns:repeat(2,1fr)}.product-detail,.checkout-layout,.account-grid,.migration-layout{grid-template-columns:1fr}}
@media(max-width:600px){html{font-size:15.5px}:root{--space-xl:2.75rem;--space-lg:1.85rem;--space-md:1.15rem;--space-sm:.62rem;--space-xs:.4rem}.store-container{padding:1.25rem .9rem}.product-grid{grid-template-columns:repeat(2,1fr)}body{overflow-x:clip}.btn-add,.btn-checkout,.btn-ghost,.btn-lg,.filter-tag,.cart-link{min-height:44px;display:inline-flex;align-items:center}}
@media(max-width:480px){html{font-size:15px}:root{--space-xl:2.5rem;--space-lg:1.65rem;--space-md:1.05rem;--space-sm:.58rem;--space-xs:.375rem}.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:414px){html{font-size:15px}:root{--space-xl:2.25rem;--space-lg:1.5rem;--space-md:1rem;--space-sm:.55rem;--space-xs:.36rem}.product-grid{grid-template-columns:1fr}}
@media(max-width:360px){html{font-size:15px}.product-grid,.product-detail,.checkout-layout,.account-grid,.migration-layout{grid-template-columns:1fr}}