@font-face{font-family:"Outfit";src:url(fonts/outfit.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --night:#0d2236;--night-2:#173753;--on-night:#d3e1ee;--on-night-dim:#8fa8bf;
  --sun:#f6ae2d;--sun-ink:#1d1300;
  --bg:#eff3f7;--surface:#fff;--ink:#0f1d2b;--muted:#586a7c;--line:#dbe3eb;
  --link:#0a6a96;--sale:#d6334a;--ok:#12805c;--ok-bg:#dcf4ea;--r:16px;
  --shadow:0 1px 2px rgb(13 34 54/.06),0 6px 18px rgb(13 34 54/.07);
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--night:#07131e;--night-2:#112a41;--bg:#0a1722;--surface:#112233;--ink:#e9f0f6;--muted:#9bb0c3;--line:#223a50;
    --link:#6cc6ee;--sale:#ff7088;--ok:#5fe0b0;--ok-bg:#12382d;--shadow:0 1px 2px rgb(0 0 0/.3),0 6px 18px rgb(0 0 0/.25)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(90deg,var(--night) 272px,var(--bg) 272px);color:var(--ink);font:16px/1.55 var(--font);
  display:grid;grid-template-columns:272px minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100vh}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
h1{font-size:clamp(1.55rem,3vw,2.1rem);letter-spacing:-.025em;margin:.2em 0 .6em;line-height:1.15;font-weight:800}
h2{font-size:1.2rem;letter-spacing:-.01em;margin:2rem 0 .9rem;font-weight:700}
h3{font-size:.93rem;font-weight:600;margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- header + category column ---- */
.top{display:contents}
.brand{grid-column:1;grid-row:1;padding:.9rem 1.3rem;background:var(--night);align-self:stretch;display:flex;align-items:center}
.brand img{display:block;height:58px;width:auto;max-width:100%}
.search{grid-column:2;grid-row:1;display:flex;gap:.5rem;padding:.8rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--line);align-items:center}
.search input{flex:1;min-width:0;max-width:560px;padding:.65rem 1rem;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:inherit;font:inherit}
.search input:focus{border-color:var(--sun);outline:none;box-shadow:0 0 0 3px rgb(246 174 45/.3)}
.search button,.btn{padding:.65rem 1.3rem;border:0;border-radius:999px;background:var(--sun);color:var(--sun-ink);font:inherit;font-weight:700;cursor:pointer;display:inline-block}
.btn:hover,.search button:hover{filter:brightness(1.07)}
.navtoggle,.navbtn{display:none}

.side{grid-column:1;grid-row:2;padding:.75rem .75rem 2rem;background:var(--night);color:var(--on-night);font-size:.92rem;
  position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--night-2) transparent}
.side ul{list-style:none;margin:0;padding:0}
.side ul ul{margin-left:.7rem;padding-left:.6rem;border-left:1px solid var(--night-2)}
.side a{display:block;padding:.4rem .65rem;border-radius:9px;color:var(--on-night)}
.side a:hover{background:var(--night-2);color:#fff}
.side a[aria-current]{background:var(--sun);color:var(--sun-ink);font-weight:700}
.side summary{cursor:pointer;list-style:none;display:flex;align-items:center}
.side summary::-webkit-details-marker{display:none}
.side summary a{flex:1}
.side summary::after{content:"";width:.5rem;height:.5rem;margin:0 .7rem;border-right:2px solid var(--on-night-dim);border-bottom:2px solid var(--on-night-dim);transform:rotate(-45deg);transition:transform .15s;flex:none}
.side details[open]>summary::after{transform:rotate(45deg)}

main{grid-column:2;grid-row:2;padding:1.5rem 1.75rem 2.5rem;min-width:0;max-width:1240px;width:100%}
footer{grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.75rem;background:var(--night);color:var(--on-night-dim);font-size:.85rem}

/* ---- home ---- */
.hero{position:relative;overflow:hidden;margin:0 0 .5rem;padding:clamp(1.75rem,5vw,3.25rem) clamp(1.25rem,4vw,2.75rem);border-radius:22px;color:#fff;
  background:radial-gradient(circle at 92% 8%,rgb(246 174 45/.55),transparent 38%),linear-gradient(135deg,var(--night) 20%,var(--night-2))}
.hero::after{content:"";position:absolute;right:-4rem;top:-4rem;width:15rem;height:15rem;border-radius:50%;border:1.5px solid rgb(246 174 45/.35);box-shadow:0 0 0 2rem rgb(246 174 45/.07),0 0 0 4rem rgb(246 174 45/.04)}
.hero h1{position:relative;z-index:1;font-size:clamp(2rem,6vw,3.4rem);margin:0;letter-spacing:-.035em}
.hero p{position:relative;z-index:1;color:var(--on-night);margin:.5rem 0 0;font-size:clamp(1rem,2vw,1.2rem);max-width:34rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.85rem}
.tiles a{--c:var(--sun);display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.1rem;background:var(--surface);
  border-radius:14px;border-left:5px solid var(--c);box-shadow:var(--shadow);font-weight:600;transition:transform .15s}
.tiles a:nth-child(4n+2){--c:#1fa2b8}.tiles a:nth-child(4n+3){--c:var(--sale)}.tiles a:nth-child(4n+4){--c:#6c5fd6}
.tiles a:hover{transform:translateY(-2px)}
.tiles small{flex:none;background:var(--bg);color:var(--muted);font-weight:600;padding:.1rem .6rem;border-radius:999px;font-size:.8rem}

.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.crumbs a{color:var(--link)} .crumbs a:hover{text-decoration:underline} .crumbs span{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.chips a{padding:.45rem .95rem;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;font-size:.9rem;font-weight:500;transition:border-color .15s,background .15s}
.chips a:hover{border-color:var(--sun);background:rgb(246 174 45/.12)}
.chips small{color:var(--muted);margin-left:.25rem}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:.5rem 0 1rem;color:var(--muted);font-size:.9rem}
.sort{display:flex;gap:.25rem;flex-wrap:wrap;background:var(--surface);padding:.25rem;border-radius:999px;box-shadow:var(--shadow)}
.sort a{padding:.3rem .85rem;border-radius:999px;font-weight:500}
.sort a:hover{background:var(--bg)}
.sort a.cur{background:var(--night);color:#fff;font-weight:700}

/* ---- product grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgb(13 34 54/.16)}
.thumb{position:relative;aspect-ratio:1;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:contain}
.noimg{color:#6b7c8d;font-size:.8rem}
.badge{position:absolute;top:.6rem;left:.6rem;z-index:1;background:var(--sale);color:#fff;font-size:.75rem;font-weight:800;padding:.15rem .6rem;border-radius:999px;letter-spacing:.02em}
.meta{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.price{margin:0;font-size:1.05rem;margin-top:auto}
.price strong{font-weight:800}
.msrp{font-size:.72em;font-weight:600;color:var(--muted);margin-right:.2em}
.price s{color:var(--muted);margin-right:.35rem;font-size:.88rem}
.sale{color:var(--sale)}

.pager{display:flex;gap:.4rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}
.pager a,.pager .gap{min-width:2.5rem;text-align:center;padding:.45rem .7rem;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);font-weight:600}
.pager .gap{box-shadow:none;background:none;color:var(--muted)}
.pager a.cur{background:var(--night);color:#fff}

/* ---- product page ---- */
.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem;align-items:start}
.gallery{background:#fff;border-radius:22px;box-shadow:var(--shadow);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:contain;display:block}
.info{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,2rem)}
.info h1{margin-top:0}
.price.big{font-size:2rem;margin:.25rem 0 .75rem;letter-spacing:-.02em}
.price.big s{font-size:1.1rem}
.stock{display:inline-block;font-size:.82rem;font-weight:700;padding:.2rem .8rem;border-radius:999px;margin:0 0 1.25rem}
.stock.in{color:var(--ok);background:var(--ok-bg)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;margin:0;padding-top:1.1rem;border-top:1px solid var(--line)}
.facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:600}
.desc{grid-column:1/-1;background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,2rem);overflow-wrap:anywhere}
.desc h2{margin-top:0}
.desc>*{max-width:80ch}
.desc table{border-collapse:collapse;max-width:100%;display:block;overflow:auto}
.desc td,.desc th{border:1px solid var(--line);padding:.35rem .6rem}
.desc a{color:var(--link);text-decoration:underline}
.empty{color:var(--muted);text-align:center;padding:3rem 0}

@media (max-width:820px){
  body{background:var(--bg);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto}
  .brand{grid-column:1;grid-row:1;padding:.75rem 1rem}
  .brand img{height:52px}
  .search{grid-column:1;grid-row:2;padding:.65rem 1rem}
  .search input{max-width:none}
  .navbtn{display:flex;align-items:center;gap:.5rem;grid-column:1;grid-row:3;padding:.7rem 1rem;background:var(--night-2);color:#fff;font-weight:600;cursor:pointer}
  .navbtn::before{content:"";width:1.1rem;height:.8rem;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
  .navtoggle{display:block;position:absolute;opacity:0;pointer-events:none}
  .navtoggle:focus-visible+.navbtn{outline:3px solid var(--sun);outline-offset:-3px}
  .side{display:none;grid-column:1;grid-row:4;position:static;max-height:60vh;padding:.5rem 1rem 1rem}
  .navtoggle:checked~.side{display:block}
  main{grid-column:1;grid-row:5;padding:1rem}
  footer{grid-row:6;padding:1rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .tiles{grid-template-columns:1fr 1fr;gap:.6rem}
  .tiles a{padding:.8rem .85rem;font-size:.92rem}
  .product{grid-template-columns:1fr;gap:1rem}
  .hero{border-radius:18px}
  .facts{grid-template-columns:1fr;gap:.1rem}
  .facts dd{margin-bottom:.6rem}
}
@media (min-width:560px) and (max-width:820px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- product image zoom ---- */
.zoomlink{display:block;width:100%;height:100%;cursor:zoom-in}
.zoomlink img{transition:transform .12s ease-out;will-change:transform}
.zoomlink.is-zoomed img{transform:scale(2.4)}
html.noscroll{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgb(0 0 0/.9);overflow:hidden;touch-action:none}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;background:#fff;border-radius:6px;cursor:zoom-in;transition:transform .15s ease-out}
.lightbox.is-zoomed img{transform:scale(2.4);cursor:zoom-out}
.lb-close{position:absolute;top:.75rem;right:.75rem;width:2.75rem;height:2.75rem;border:2px solid rgb(255 255 255/.85);border-radius:50%;background:rgb(0 0 0/.7);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;z-index:2}
.lb-close:hover{background:rgb(0 0 0/.9)}
.lb-hint{position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);z-index:2;width:max-content;max-width:92vw;padding:.3rem .9rem;border-radius:999px;background:rgb(0 0 0/.7);color:#f5f5f4;font-size:.85rem;pointer-events:none}

/* ---- infinite scroll ---- */
.more{text-align:center;color:var(--muted);padding:1.5rem 0;min-height:3.5rem}
.infinite .pager{display:none}