/* ============================================================
   TechByJ - store design (green, mobile first)
   ============================================================ */
:root{
  --paper:#ffffff; --bg:#f4f7f5; --ink:#10241a; --text:#3d5247; --muted:#6b7f74; --line:#e2e9e4; --soft:#f8faf9;
  --leaf:#0e9f4f; --leaf2:#087a3a; --mint:#e6f5ec; --mint2:#cdebd9;
  --sale:#e0463c; --saleBg:#fdecea; --amber:#a35a00; --amberBg:#fff3dc;
  --wa:#1faa59;
  --r-lg:20px; --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,36,26,.05),0 8px 24px rgba(16,36,26,.06);
  --hdr:64px;
}
html[data-theme="dark"]{
  --paper:#111c16; --bg:#0b130f; --ink:#eaf4ee; --text:#bccdc3; --muted:#86998e; --line:#22342a; --soft:#0f1913;
  --mint:#123222; --mint2:#1a4430; --saleBg:rgba(224,70,60,.16); --amberBg:rgba(245,158,11,.14);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
button,input,select{font-family:inherit;font-size:inherit;color:inherit;}
img{max-width:100%;}
:focus-visible{outline:2.5px solid var(--leaf);outline-offset:2px;border-radius:6px;}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* ---------- announcement bar ---------- */
.ann{background:var(--leaf2);color:#eafff1;font-size:13px;font-weight:500;}
.ann .wrap{display:flex;justify-content:center;gap:22px;height:34px;align-items:center;overflow:hidden;white-space:nowrap;}
.ann b{color:#fff;font-weight:700;}
@media(max-width:700px){.ann .hide-s{display:none;}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);}
.hdr .wrap{display:flex;align-items:center;gap:14px;height:var(--hdr);}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.03em;flex:0 0 auto;}
.logo svg{width:30px;height:30px;}
.logo span em{font-style:normal;color:var(--leaf);}
.hsearch{flex:1;max-width:560px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:0 6px 0 16px;height:44px;}
.hsearch:focus-within{border-color:var(--leaf);background:var(--paper);}
.hsearch input{flex:1;border:0;outline:0;background:transparent;min-width:0;font-size:15px;height:100%;}
.hsearch button{border:0;background:var(--leaf);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;}
.hsearch svg{width:17px;height:17px;}
.hnav{display:flex;gap:2px;}
.hnav a{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--text);padding:9px 12px;border-radius:999px;}
.hnav a:hover{color:var(--ink);background:var(--bg);}
.hnav a.on{color:var(--leaf2);background:var(--mint);}
.hact{display:flex;gap:8px;align-items:center;margin-left:auto;}
.ibtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;text-decoration:none;flex:0 0 auto;}
.ibtn svg{width:19px;height:19px;}
.wabtn{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;border-radius:999px;padding:0 16px;height:42px;white-space:nowrap;}
.wabtn svg{width:19px;height:19px;}
/* mobile header: logo + icons on row 1, search full width on row 2 */
@media(max-width:900px){
  .hnav{display:none;}
  .hdr .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:10px;}
  .hsearch{order:3;flex:1 1 100%;max-width:none;height:42px;}
  .wabtn{padding:0;width:42px;justify-content:center;}
  .wabtn span{display:none;}
}

/* ---------- bottom tab bar (phones) ---------- */
.tabs{display:none;}
@media(max-width:900px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);}
  .tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;text-decoration:none;font-size:11.5px;font-weight:600;color:var(--muted);}
  .tabs a svg{width:23px;height:23px;}
  .tabs a.on{color:var(--leaf);}
  .tabs a.wa{color:var(--wa);}
  body.has-buy{padding-bottom:calc(140px + env(safe-area-inset-bottom));}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:0 22px;height:48px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.btn svg{width:20px;height:20px;}
.btn.pri{background:var(--leaf);color:#fff;} .btn.pri:hover{background:var(--leaf2);}
.btn.wa{background:var(--wa);color:#fff;}
.btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);}
.btn.ghost:hover{border-color:var(--leaf);}
.btn.block{width:100%;}

/* ---------- hero ---------- */
.hero{margin:18px 0 0;border-radius:var(--r-lg);background:var(--mint);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;overflow:hidden;min-height:340px;}
.hero .tx{padding:40px 44px;}
.hero h1{margin:0 0 12px;font-size:clamp(30px,4.6vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:var(--ink);}
.hero p{margin:0 0 22px;font-size:16.5px;color:var(--text);max-width:46ch;}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;}
.hero .art{position:relative;height:100%;min-height:300px;}
.hero .art .disc{position:absolute;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:var(--shadow);overflow:hidden;}
.hero .art .disc img{width:78%;height:78%;object-fit:contain;}
.hero .art .d1{width:min(250px,46%);aspect-ratio:1;left:14%;top:12%;}
.hero .art .d2{width:min(170px,32%);aspect-ratio:1;right:10%;top:6%;}
.hero .art .d3{width:min(150px,28%);aspect-ratio:1;right:16%;bottom:8%;}
.hero .art .ring{position:absolute;border-radius:50%;border:2px solid var(--mint2);width:min(420px,80%);aspect-ratio:1;left:4%;top:-10%;}
.hero .art .tag{position:absolute;left:8%;bottom:12%;background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;border-radius:999px;padding:9px 15px;}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0;margin-top:12px;}
  .hero .tx{padding:26px 20px 8px;}
  .hero p{font-size:15px;margin-bottom:16px;}
  .hero .art{min-height:210px;}
  .hero .art .d1{width:150px;left:8%;top:10%;} .hero .art .d2{width:110px;right:8%;top:6%;} .hero .art .d3{width:96px;right:30%;bottom:8%;}
  .hero .art .ring{width:300px;left:-6%;top:-20%;}
  .hero .art .tag{left:auto;right:6%;bottom:10%;font-size:13px;}
  .hero .cta .btn{flex:1;padding:0 14px;}
}

/* ---------- trust row ---------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 0;}
.trust div{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;}
.trust svg{width:28px;height:28px;color:var(--leaf);flex:0 0 auto;}
.trust b{display:block;font-size:14.5px;line-height:1.25;}
.trust small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;}
@media(max-width:900px){.trust{grid-template-columns:1fr 1fr;gap:8px;}.trust div{padding:11px 12px;gap:10px;}.trust svg{width:24px;height:24px;}.trust b{font-size:13.5px;}.trust small{font-size:11.5px;}}

/* ---------- section heading ---------- */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:36px 0 14px;}
.sh h2{margin:0;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.025em;font-weight:800;}
.sh p{margin:3px 0 0;color:var(--muted);font-size:14px;}
.sh a{color:var(--leaf2);font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap;}
.sh a:hover{text-decoration:underline;}
@media(max-width:600px){.sh{margin:28px 0 12px;}}

/* ---------- category shelf (real product photos) ---------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px 10px;}
.shelf a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;text-align:center;}
.shelf .ph{width:100%;max-width:120px;aspect-ratio:1;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:border-color .15s;}
.shelf .ph img{width:70%;height:70%;object-fit:contain;}
.shelf .ph svg{width:40%;height:40%;color:var(--leaf);}
.shelf a:hover .ph{border-color:var(--leaf);}
.shelf b{font-size:13.5px;font-weight:600;line-height:1.25;}
.shelf small{font-size:12px;color:var(--muted);}
@media(max-width:600px){
  .shelf{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:84px;overflow-x:auto;scrollbar-width:none;gap:14px 12px;margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x proximity;}
  .shelf::-webkit-scrollbar{display:none;}
  .shelf a{scroll-snap-align:start;}
  .shelf b{font-size:12px;}
}

/* ---------- product rail & grid ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,232px);gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:2px 2px 6px;}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start;}
.railw{position:relative;}
.rarr{position:absolute;top:36%;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);}
.rarr svg{width:18px;height:18px;}
.rarr.l{left:-12px;} .rarr.r{right:-12px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
@media(max-width:900px){.rarr{display:none;}}
@media(max-width:600px){
  .rail{grid-auto-columns:46%;gap:10px;margin:0 -16px;padding:2px 16px 6px;scroll-padding:16px;}
  .grid{grid-template-columns:1fr 1fr;gap:10px;}
}

/* ---------- product card ---------- */
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.card:hover{border-color:var(--mint2);box-shadow:var(--shadow);}
.card .cl{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;}
.card .pic{position:relative;aspect-ratio:1;background:#fff;display:grid;place-items:center;}
.card .pic img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .25s;}
.card:hover .pic img{transform:scale(1.04);}
.card .pic .noimg{width:38%;height:38%;color:#c6d6cc;}
.card .badge{position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--sale);color:#fff;}
.card .badge.lbl{background:var(--ink);color:var(--paper);top:auto;bottom:10px;}
.card.oos .pic img{filter:grayscale(1);opacity:.55;}
.card .oosl{position:absolute;inset:auto 10px 10px auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:12px;padding:4px 9px;border-radius:999px;}
.card .cb{padding:12px 14px 6px;display:flex;flex-direction:column;gap:3px;flex:1;}
.card .bn{font-size:12px;font-weight:700;color:var(--leaf2);letter-spacing:.02em;}
.card .nm{font-size:14.5px;font-weight:600;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em;}
.card .pr{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.card .pr strong{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.card .pr strong.s{color:var(--sale);}
.card .pr s{font-size:13px;color:var(--muted);}
.card .st{font-size:12.5px;font-weight:600;}
.st.available{color:var(--leaf2);} .st.on_order{color:var(--amber);} .st.out_of_stock{color:var(--muted);}
.card .ob{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 14px 14px;height:40px;border-radius:999px;background:var(--mint);color:var(--leaf2);font-weight:700;font-size:14px;text-decoration:none;}
.card .ob:hover{background:var(--wa);color:#fff;}
.card .ob svg{width:17px;height:17px;}
.card.oos .ob{background:var(--soft);color:var(--text);border:1px solid var(--line);}
@media(max-width:600px){
  .card .cb{padding:10px 10px 4px;} .card .nm{font-size:13.5px;} .card .pr strong{font-size:16px;}
  .card .ob{margin:6px 10px 10px;height:38px;font-size:13px;}
  .card .badge{top:8px;left:8px;font-size:11px;}
}

/* ---------- promo band ---------- */
.band{margin:36px 0 0;border-radius:var(--r-lg);background:var(--ink);color:#eaf4ee;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;padding:30px 34px;align-items:center;}
html[data-theme="dark"] .band{background:var(--mint);}
.band h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;line-height:1.1;}
.band p{margin:0;color:#b9cdc1;font-size:15px;}
.band ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s;}
.band li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#d7e6dd;}
.band li::before{content:counter(s);flex:0 0 28px;height:28px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;}
.band li b{color:#fff;}
@media(max-width:820px){.band{grid-template-columns:1fr;padding:24px 20px;}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--leaf);font-weight:800;font-size:20px;line-height:1;}
.faq details[open] summary::after{content:"−";}
.faq p{margin:10px 0 2px;color:var(--text);font-size:14.5px;}
.faq a{color:var(--leaf2);font-weight:600;}
@media(max-width:820px){.faq{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
.foot{margin-top:56px;background:var(--paper);border-top:1px solid var(--line);}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:28px;padding:36px 16px 20px;}
.foot h4{margin:0 0 10px;font-size:14.5px;}
.foot p{margin:0;font-size:14px;color:var(--muted);line-height:1.6;max-width:40ch;}
.foot nav a{display:block;font-size:14px;color:var(--muted);text-decoration:none;padding:4px 0;}
.foot nav a:hover{color:var(--leaf2);}
.foot .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.foot .copy button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;}
@media(max-width:820px){.foot .wrap{grid-template-columns:1fr 1fr;gap:22px;}.foot .wrap > div:first-child,.foot .wrap > div:last-of-type{grid-column:1/-1;}}

/* ---------- shop page ---------- */
.crumb{font-size:13.5px;color:var(--muted);margin:16px 0 4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.crumb a{color:var(--muted);text-decoration:none;} .crumb a:hover{color:var(--leaf2);}
.crumb span{opacity:.5;}
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start;margin-top:12px;}
.side{position:sticky;top:calc(var(--hdr) + 16px);max-height:calc(100vh - var(--hdr) - 32px);overflow:auto;scrollbar-width:thin;}
.side h3{font-size:14px;margin:18px 0 8px;}
.side h3:first-child{margin-top:0;}
.side .cl{display:flex;flex-direction:column;gap:2px;}
.side .cl button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:0;background:none;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:14.5px;color:var(--text);}
.side .cl button:hover{background:var(--paper);color:var(--ink);}
.side .cl button.on{background:var(--mint);color:var(--leaf2);font-weight:700;}
.side .cl button small{color:var(--muted);font-weight:500;}
.side .row{display:flex;gap:8px;}
.side input[type=number]{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);}
.side label.ck{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:14.5px;cursor:pointer;}
.side label.ck input{width:18px;height:18px;accent-color:var(--leaf);}
.side .apply{margin-top:12px;}
.top-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.top-bar h1{margin:0;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;flex:1 1 auto;}
.top-bar .cnt{color:var(--muted);font-size:14px;}
.top-bar select{height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);padding:0 14px;font-weight:600;cursor:pointer;}
.fbtn{display:none;}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.chip.x{background:var(--mint);border-color:var(--mint2);color:var(--leaf2);}
.scrim{display:none;}
.empty{text-align:center;padding:60px 16px;color:var(--muted);background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);}
.empty b{display:block;font-size:18px;color:var(--ink);margin-bottom:6px;}
.empty a{color:var(--leaf2);font-weight:700;}
.skel{background:linear-gradient(90deg,var(--line),var(--soft),var(--line));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);height:320px;}
@keyframes sk{to{background-position:-200% 0;}}
.more{display:block;height:1px;margin:20px 0;}
@media(max-width:900px){
  .shop{grid-template-columns:1fr;gap:0;}
  .side{position:fixed;inset:auto 0 0 0;top:auto;z-index:90;max-height:82vh;background:var(--paper);border-radius:22px 22px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -10px 40px rgba(0,0,0,.18);}
  .side.open{transform:none;}
  .side .grab{display:block;width:42px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 14px;}
  .scrim{position:fixed;inset:0;background:rgba(8,20,14,.45);z-index:85;display:none;}
  .scrim.open{display:block;}
  .fbtn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-weight:700;cursor:pointer;}
  .fbtn svg{width:17px;height:17px;}
  .fbtn i{width:8px;height:8px;border-radius:50%;background:var(--leaf);}
  .top-bar h1{flex:1 1 100%;}
  .top-bar .cnt{flex:1;}
}
@media(min-width:901px){.side .grab,.side .sclose{display:none;}}

/* ---------- product page ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:start;margin-top:10px;}
.gal{position:sticky;top:calc(var(--hdr) + 16px);}
.gal .main{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.gal .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.gal .slides::-webkit-scrollbar{display:none;}
.gal .slides div{flex:0 0 100%;aspect-ratio:1;display:grid;place-items:center;scroll-snap-align:center;}
.gal .slides img{width:100%;height:100%;object-fit:contain;padding:22px;}
.gal .slides .noimg{width:30%;color:#c6d6cc;}
.gal .dots{display:none;justify-content:center;gap:6px;padding:0 0 12px;}
.gal .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);}
.gal .dots i.on{background:var(--leaf);width:20px;border-radius:9px;}
.gal .ths{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:none;}
.gal .ths button{flex:0 0 72px;height:72px;border-radius:var(--r-sm);border:2px solid var(--line);background:#fff;padding:4px;cursor:pointer;}
.gal .ths button.on{border-color:var(--leaf);}
.gal .ths img{width:100%;height:100%;object-fit:contain;}
.info .bn{font-size:13.5px;font-weight:700;color:var(--leaf2);text-decoration:none;}
.info h1{margin:6px 0 8px;font-size:clamp(22px,2.8vw,32px);line-height:1.15;letter-spacing:-.03em;}
.info .meta{font-size:13.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;}
.info .meta b{color:var(--text);font-weight:600;}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 6px;}
.price strong{font-size:34px;font-weight:800;letter-spacing:-.035em;}
.price strong.s{color:var(--sale);}
.price s{font-size:17px;color:var(--muted);}
.price em{font-style:normal;font-size:13px;font-weight:700;color:var(--sale);background:var(--saleBg);padding:4px 10px;border-radius:999px;}
.stock{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;}
.stock::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;}
.short{color:var(--text);margin:14px 0 0;}
.buy{display:flex;gap:10px;align-items:center;margin:20px 0 0;}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);height:48px;flex:0 0 auto;}
.qty button{width:44px;height:100%;border:0;background:none;font-size:20px;font-weight:700;cursor:pointer;}
.qty span{min-width:28px;text-align:center;font-weight:700;}
.buy .btn{flex:1;}
.total{font-size:13.5px;color:var(--muted);margin:8px 0 0;min-height:1.4em;}
.perks{margin:18px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);}
.perks div{display:flex;gap:12px;padding:13px 16px;font-size:14px;color:var(--text);}
.perks div + div{border-top:1px solid var(--line);}
.perks svg{width:22px;height:22px;flex:0 0 auto;color:var(--leaf);}
.perks b{color:var(--ink);display:block;font-size:14.5px;}
.perks a{color:var(--leaf2);font-weight:600;}
.oosbox{margin:16px 0 0;padding:13px 16px;border-radius:var(--r);background:var(--amberBg);color:var(--amber);font-size:14px;}
.tabsec{margin-top:40px;}
.tabsec nav{display:flex;gap:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.tabsec nav button{border:0;background:none;padding:12px 14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;}
.tabsec nav button.on{color:var(--ink);border-color:var(--leaf);}
.tabsec .pane{display:none;padding:20px 2px;max-width:820px;color:var(--text);}
.tabsec .pane.on{display:block;}
.tabsec ul{padding-left:20px;margin:0;} .tabsec li{margin:4px 0;}
.specs{width:100%;border-collapse:collapse;font-size:14.5px;}
.specs td{padding:11px 4px;border-bottom:1px solid var(--line);vertical-align:top;}
.specs td:first-child{color:var(--muted);width:40%;}
/* sticky buy bar on phones */
.sbuy{display:none;}
@media(max-width:900px){
  .pd{grid-template-columns:1fr;gap:18px;}
  .gal{position:static;margin:0 -16px;}
  .gal .main{border-radius:0;border-left:0;border-right:0;}
  .gal .ths{display:none;}
  .gal .dots{display:flex;}
  .price strong{font-size:28px;}
  .buy{display:none;}
  .sbuy{display:flex;gap:10px;align-items:center;position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:65;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px;}
  .sbuy .p{flex:0 0 auto;line-height:1.15;}
  .sbuy .p strong{display:block;font-size:18px;font-weight:800;}
  .sbuy .p small{color:var(--muted);font-size:12px;}
  .sbuy .qty{height:44px;} .sbuy .qty button{width:36px;}
  .sbuy .btn{flex:1;height:44px;padding:0 12px;font-size:14.5px;}
  .tabsec{margin-top:28px;}
}

/* ---------- content pages ---------- */
.page{max-width:760px;margin:28px auto 0;}
.page h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.035em;line-height:1.1;margin:0 0 10px;}
.page .lead{color:var(--text);font-size:17px;margin:0 0 20px;}
.page h2{font-size:20px;letter-spacing:-.02em;margin:30px 0 8px;}
.page p,.page li{color:var(--text);line-height:1.7;}
.page ul{padding-left:20px;}
.page .upd{font-size:13px;color:var(--muted);}
.page a{color:var(--leaf2);font-weight:600;}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0;}
.cgrid > *{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);}
.cgrid b{display:block;font-size:16px;margin:8px 0 2px;}
.cgrid small{color:var(--muted);font-size:14px;line-height:1.5;display:block;}
.cgrid svg{width:28px;height:28px;color:var(--leaf);}
a.cgo:hover{border-color:var(--leaf);}
.center{text-align:center;margin:26px 0 0;}

/* header order: logo, nav, search, WhatsApp (desktop) / logo ... WhatsApp, then search (phones) */
.hsearch{order:2;} .hact{order:3;margin-left:0;}
@media(max-width:900px){.hact{order:2;margin-left:auto;}.hsearch{order:3;}}
@media(max-width:600px){.card .ob .xs{display:none;}}
@media(max-width:820px){.hero .art .ring{display:none;}.hero .art{min-height:190px;}}
@media(max-width:900px){.top-bar .cnt{flex:1;min-width:0;white-space:nowrap;}.top-bar select{max-width:170px;}}