*:focus{outline:2px solid #888;outline-offset:2px}
:root{--bg:#0f0f10;--fg:#e6e6e6;--muted:#a0a0a0;--card:#1a1a1b;--border:#2a2a2b;--accent:#dcdcdc;--shadow:rgba(0,0,0,.4)}
@media (prefers-color-scheme: light){:root{--bg:#ffffff;--fg:#151515;--muted:#535353;--card:#f5f5f5;--border:#dedede;--accent:#111;--shadow:rgba(0,0,0,.08)}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:16px}
.row{display:flex;gap:12px}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;justify-items:center}
@media (min-width: 640px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width: 1024px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.section-head{margin:8px 0 16px;flex-wrap:wrap}
.hero{padding:24px 0;border-bottom:1px solid var(--border);margin-bottom:16px}
.muted{color:var(--muted)}
.badge{background:var(--card);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
.logo{filter:grayscale(100%)}

.site-header,.site-footer{border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.site-footer{border-top:1px solid var(--border);border-bottom:none;margin-top:32px}
.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:700}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 2px 10px var(--shadow);display:flex;flex-direction:column;gap:8px;max-width:340px;width:100%;margin:0 auto}
.card .product-link,.card .title{cursor:pointer}
.card .title{font-weight:600;color:var(--fg);text-decoration:none}
/* Ensure link states stay within grayscale (no purple visited links) */
.card .title:link,
.card .title:visited,
.card .title:hover,
.card .title:active,
.card .title:focus{color:var(--fg);text-decoration:none}
.card .price{font-weight:700}
.card .actions{display:flex;gap:8px}

.btn{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--fg);padding:10px 14px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.ghost{background:transparent}
.input, input, select{background:var(--card);border:1px solid var(--border);color:var(--fg);padding:10px 12px;border-radius:10px}
/* Gallery */
.gallery{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:10px;margin-bottom:12px;background:var(--card);}
.gallery-track{display:flex;transition:transform .35s ease;}
.gallery-slide{min-width:100%;display:flex;align-items:center;justify-content:center;padding:8px;}
.gallery-slide img{max-width:100%;max-height:60vh;object-fit:contain;}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:0;padding:6px 10px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;}
.gal-nav.prev{left:8px;}
.gal-nav.next{right:8px;}
.gal-thumbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.gal-thumbs .thumb{border:1px solid var(--border);background:var(--bg);padding:2px;border-radius:6px;cursor:pointer;opacity:.6;}
.gal-thumbs .thumb.active{opacity:1;border-color:var(--fg);}
.gal-thumbs img{display:block;width:48px;height:48px;object-fit:cover;border-radius:4px;}
@media (max-width:600px){ .gallery-slide img{max-height:40vh;} }
/* Simplified gallery2 */
.gallery2{display:flex;flex-direction:column;gap:8px}
.gallery2 .g2-main{position:relative;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px;}
.gallery2 .g2-img{max-width:100%;max-height:60vh;object-fit:contain;display:block;border-radius:6px}
.gallery2 .g2-img{transition:opacity .2s ease}
.gallery2 .g2-thumbs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.gallery2 .g2-thumb{border:1px solid var(--border);background:var(--bg);padding:2px;border-radius:6px;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.gallery2 .g2-thumb.active,.gallery2 .g2-thumb:hover{opacity:1;border-color:var(--fg)}
.gallery2 .g2-thumb img{display:block;width:60px;height:60px;object-fit:cover;border-radius:4px}
@media (max-width:600px){ .gallery2 .g2-img{max-height:45vh;} .gallery2 .g2-thumb img{width:48px;height:48px;} }
/* Product card stack wrapper */
.card .stack{display:block;text-decoration:none;color:inherit}
.card .stack .prod-img{display:block;width:100%;height:220px;object-fit:contain;background:var(--card);border-radius:8px}
.card .title{line-height:1.2;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.2em * 2);line-clamp:2}
.card .meta-cat{min-height:1.2em}
.card .meta-desc{line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.2em * 2);line-clamp:2}
.card .price{margin-top:auto}

.cart{position:fixed;top:0;right:0;width:360px;max-width:90vw;height:100dvh;background:var(--bg);border-left:1px solid var(--border);box-shadow:-6px 0 18px var(--shadow);padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.cart[hidden]{display:none}
.cart-items{flex:1 1 auto;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;border-bottom:1px dashed var(--border);padding-bottom:8px}
.cart-item:last-child{border-bottom:none}
.qty{display:flex;align-items:center;gap:6px}
.qty.compact .btn{padding:6px 8px;border-radius:8px}
.qty.compact .btn.ghost{padding:6px 8px}
.qty input{width:44px;text-align:center;padding:6px 8px}
/* Small buttons */
.btn.sm{padding:6px 8px;border-radius:8px;font-size:.9em}

@media (max-width:480px){
  .cart-item{grid-template-columns:44px 1fr auto}
  .cart-item img{width:44px;height:44px}
  .qty input{width:40px}
}

.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters input,.filters select{flex:1 1 160px;min-width:0;max-width:100%}
@media (max-width:640px){
  .section-head{flex-direction:column;align-items:stretch}
  .section-head .filters{width:100%;justify-content:stretch}
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:16px;z-index:9999;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal[hidden]{display:none}
.modal-content{background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px var(--shadow);max-width:900px;width:100%;padding:12px;margin:16px auto}
.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.modal-media img{width:100%;height:auto;border:1px solid var(--border);border-radius:10px;background:var(--card)}
@media (max-width:800px){
  .modal-body{grid-template-columns:1fr}
}
body.modal-open{overflow:hidden}
.modal-price-row{margin-top:8px}
.modal-add-row{margin-top:12px}
.card-title{margin:.5em 0 0}
.meta-desc{font-size:.9em}
.variant-selector{display:block;margin-top:12px;margin-bottom:8px}
.variant-selector strong{display:block;margin-bottom:6px;font-size:1em}
.variant-selector select{width:100%;padding:12px;font-size:1em}

/* Minimal print */
@media print{
  .cart,.site-header .btn,#cartButton,.filters,.actions,.hero{display:none!important}
}