/* ==========================================================================================
   HOME THEME — every inner page wears the same clothes as the homepage
   ------------------------------------------------------------------------------------------
   The homepage (site/index.html) is the demo build: charcoal #0E1116, hazard yellow #FFC400,
   Archivo Black headings, yellow primary buttons. The inner pages were a light retail theme
   with an orange accent, which read as a different website. These rules bring the inner pages
   onto the homepage's palette without touching the layout.

   Kept as an override layer on purpose: the original light rules above still define spacing and
   grid, so this block only repaints. Delete the block to go back to the light theme.
   ========================================================================================== */

:root{
  --paper:#0e1116; --paper2:#151b22; --paper3:#1b232c; --paper4:#101519;
  --edge:#232c36; --edge2:#313d4a;
  --text:#e9eef4; --text2:#c3ccd6; --text3:#98a4b0;
  --yellow:#ffc400; --yellow-d:#e0ab00;
  --steel:#0e1116; --steel2:#161b22; --steel3:#1d242c; --haz:#ffc400; --haz-d:#e0ab00;
  --head:'Archivo Black',Inter,system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------------------------------------------------------------- page + type */
body{background:var(--paper);color:var(--text);font-family:var(--body)}
h1,h2,h3,h4,.sec{font-family:var(--head);font-weight:400;color:#fff;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;margin:0 0 14px}
h2{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;margin:0 0 12px}
h3{font-size:1.06rem;line-height:1.3;margin:0 0 8px}
.lede,.muted,.meta,.hint,.sub{color:var(--text3)}
.lede{font-size:1.05rem;color:var(--text2)}
.crumbs{color:var(--text3);font-size:.82rem}
.crumbs a{color:var(--text3)}
.crumbs a:hover{color:var(--yellow)}
p a:not(.btn),.prose a:not(.btn){color:var(--yellow);border-bottom:1px solid rgba(255,196,0,.35)}
p a:not(.btn):hover,.prose a:not(.btn):hover{border-color:var(--yellow)}
code{background:#0b0f14;border:1px solid var(--edge);border-radius:6px;padding:2px 6px;
     color:var(--yellow);font-family:var(--mono);font-size:.86em}
strong,b{color:#fff}
hr{border:0;border-top:1px solid var(--edge)}

/* ---------------------------------------------------------------- header (home bar) */
header.top{background:rgba(14,17,22,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.mark{background:var(--yellow);color:#111;font-family:var(--head);border-radius:4px}
.brandtext{color:#fff}.brandtext small{color:var(--text3)}
nav a{color:var(--text2)}
nav a:hover{color:var(--yellow);border-color:var(--yellow)}
.haz.top{background:repeating-linear-gradient(135deg,var(--yellow) 0 14px,#14181c 14px 28px);opacity:.5}

/* ---------------------------------------------------------------- buttons
   Yellow = do this (WhatsApp / order). Outline = the rest. Shopee stays recognisable but
   steps back so it never competes with the yellow primary action. */
.btn{background:var(--paper3);border-color:var(--edge2);color:var(--text);border-radius:6px}
.btn:hover{background:#273140;color:#fff}
.btn.wa,.btn.order{background:var(--yellow);border-color:var(--yellow);color:#111}
.btn.wa:hover,.btn.order:hover{background:var(--yellow-d);border-color:var(--yellow-d);color:#111}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--edge2)}
.btn.ghost:hover{background:var(--text);color:#111}
.btn.shopee{background:transparent;border-color:#5d3a2b;color:#ff8a5c}
.btn.shopee:hover{background:#ee4d2d;border-color:#ee4d2d;color:#fff}
.linkmore{color:var(--yellow)}
.cmpbtn,.cmpbtn-inline{border-color:var(--edge2)}

/* ---------------------------------------------------------------- blocks, cards, panels */
.blk{background:transparent}
.blk,.band{border-color:var(--edge)}
.blk+.blk{border-top:1px solid var(--edge)}
.blk:nth-of-type(even){background:var(--paper4)}
.sec+.lede,.section-head p{color:var(--text3)}
.card,.cardwrap,.pdp .card,.compare,.cmp,.note,.payrow,.ref,.oferr{
  background:var(--paper2);border:1px solid var(--edge);border-radius:10px}
.cardwrap a:hover,.card:hover{border-color:var(--yellow)}
.note,.hint{color:var(--text2)}
.cardwrap,.cardwrap img{background:var(--paper2)}
.badge,.chip,.tagnow,.ph,.sku{
  background:var(--paper3);border:1px solid var(--edge);color:var(--text2);border-radius:999px}
.tagnow{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:700}
.badge.out{background:transparent;color:var(--text3)}
.price{color:var(--yellow);font-family:var(--mono)}
.price.big{color:var(--yellow);font-family:var(--mono);font-weight:700}
.save{color:#8fd79a}
.stockline{color:#8fd79a}
.stockline.ask{color:var(--yellow)}
.stockline:before{background:#8fd79a}
.stockline.ask:before{background:var(--yellow)}
.fcount,.meta,.capnote{color:var(--text3)}
.filters,.filters a,.scrollx{color:var(--text2)}
.filters a{border-color:var(--edge2)}
.filters a:hover,.filters a.here{background:var(--yellow);border-color:var(--yellow);color:#111}
.thumbs .thumb,.thumbs img{border-color:var(--edge);background:#fff}
.thumbs .thumb:hover{border-color:var(--yellow)}
.thumbs .thumb.ti{border-color:var(--yellow)}
.gal img,.ph img{background:#fff}

/* ---------------------------------------------------------------- tables (specs, options) */
.specs,.variants{background:var(--paper2);border:1px solid var(--edge);border-radius:10px;
                 overflow:hidden;color:var(--text2)}
.specs th,.variants th{background:var(--paper3);color:#fff;border-color:var(--edge)}
.specs td,.variants td{border-color:var(--edge);color:var(--text2)}
.specs tr:nth-child(even) td,.variants tr:nth-child(even) td{background:#121821}
.specs a,.variants a{color:var(--yellow)}
.vart{background:var(--paper3);color:var(--text2)}

/* ---------------------------------------------------------------- forms (order page) */
input,textarea,select{background:#0b0f14;border:1.5px solid var(--edge2);color:var(--text);
                      border-radius:10px}
input:focus,textarea:focus,select:focus{border-color:var(--yellow);outline:none}
input::placeholder,textarea::placeholder{color:#6d7987}
select{background-image:none}
.ofield label{color:#fff}
.steps li{color:var(--text2)}
.steps li:before{background:var(--yellow);color:#111}
.ref{background:#12201a;border-color:#2c4a37;color:#9fe0b0}
.wafter .btn{color:var(--text)}
.paypage .floatwa,.orderpage .floatwa{display:none}
.orderpage .floatwa{display:none}

/* ---------------------------------------------------------------- payment + footer */
.payrow b,.payrow span{color:var(--text2)}
.payrow img{border:1px solid var(--edge);border-radius:12px}
footer{background:#0a0e12;border-top:1px solid var(--edge);color:var(--text2)}
footer h4{color:#fff}
footer a{color:var(--text3)}
footer a:hover{color:var(--yellow)}
footer .legal,footer .muted{color:#7c8794}
.floatwa{background:var(--yellow);color:#111;border:1px solid var(--yellow);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.floatwa:hover{background:var(--yellow-d);border-color:var(--yellow-d);color:#111}

/* ---------------------------------------------------------------- photo panels
   Product photography arrives on a white canvas; on a dark page a bare white rectangle reads as
   a hole. Frame it so the photo looks deliberate, and keep the thumbnails on the same canvas. */
.pdp .ph,.gal,.ph,.hero-photo{background:#151b22;border:1px solid var(--edge);border-radius:14px;padding:10px}
.thumbs .thumb,.thumbs a{background:#151b22;border:1px solid var(--edge);border-radius:10px;padding:4px}
.thumbs .thumb:hover{border-color:var(--yellow)}
.thumbs .thumb.ti{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.thumbs .thumb img,.gal img{background:#fff;border-radius:8px}

/* ---------------------------------------------------------------- phone: no sideways scrolling
   A five-column comparison table has a min-content width of ~560px, and a grid item defaults to
   min-width:auto, so on a 390px phone the whole product page stretched to 586px and the headline
   and price got clipped. Let the columns shrink and let a wide table scroll inside its own box. */
@media (max-width:1040px){
  .pdp{grid-template-columns:minmax(0,1fr)}
  .pdp>*{min-width:0}
  .specs,.variants,.compare,.cmp,table.vart{display:block;overflow-x:auto;max-width:100%}
  .specs tr,.variants tr,.compare tr{min-width:0}
  .thumbs{flex-wrap:wrap}
}
html,body{max-width:100%;overflow-x:hidden}

/* ---------------------------------------------------------------- header: keep it uncrowded
   Six category links plus two buttons in one bar wrapped onto two lines on a laptop. Shorten
   the set, stop the wrapping, and let spacing tighten before anything breaks. */
header.top nav{flex-wrap:nowrap;gap:18px}
header.top nav a{white-space:nowrap}
.bar{flex-wrap:nowrap}
.bar .brandtext{white-space:nowrap}
@media (max-width:1000px){header.top nav{gap:13px}header.top nav a{font-size:.72rem;letter-spacing:.06em}}
@media (max-width:860px){header.top nav a:nth-child(n+5){display:none}}

/* inner header: the two buttons squeezed their labels onto two lines around 1000-1100px and got
   clipped below that -- never wrap a button, drop items in stages instead */
.bar .btn{white-space:nowrap}
/* measured: the Shopee button ran 150px past the edge at 1000px (clipped, unclickable) and the
   WhatsApp button did the same at 390 -- drop items before they ever reach the edge */
@media (max-width:1140px){.bar .brandtext small{display:none}.bar a.shopee{display:none}}
@media (max-width:1040px){.bar nav{gap:14px}.bar nav a{font-size:.72rem;letter-spacing:.06em}}
@media (max-width:900px){.bar nav a:nth-child(n+4){display:none}}
@media (max-width:820px){.bar .brandtext{display:none}}
@media (max-width:640px){
  .bar{flex-wrap:wrap}
  .bar nav{display:flex;order:9;width:100%;margin-top:8px;gap:14px;overflow-x:auto;
           padding-bottom:2px;scrollbar-width:none}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{font-size:.7rem}
}

/* ---------------------------------------------------------------- cart + buy box
   Dark surface, yellow primary action — the same language as the rest of the site. */
.btn.cart{gap:6px}
.cartn{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#ffc400;color:#111;font:700 11.5px/1 inherit}
.cartn.empty{background:#2a333d;color:#93a1b0}
/* Buy box: one decision per line. Labels above their controls, the price gets its own line,
   and there is exactly one primary button. */
.buybox{margin:18px 0 10px;padding:20px 20px 16px;border:1px solid #263140;border-radius:16px;
  background:linear-gradient(180deg,#141b24 0%,#111821 100%)}
.buybox .bbfield{margin:0 0 4px}
.buybox .bbfield label{display:block;font:700 11.5px/1 inherit;letter-spacing:.12em;text-transform:uppercase;
  color:#8f9dab;margin:0 0 8px}
.buybox input[type=number]{width:100%;padding:12px 14px;border-radius:11px;
  border:1.5px solid #313d4a;background:#0b0f14;color:#e9eef4;font:inherit;font-size:15px}
.buybox input:focus{outline:none;border-color:#ffc400}
/* option pills — pick one like on Shopee: name on top, that option's own price under it */
.buybox .bbopts{display:flex;flex-wrap:wrap;gap:10px}
.buybox .bbopt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:118px;
  padding:10px 14px;border:1.5px solid #313d4a;border-radius:12px;background:#0b0f14;color:#cfd8e2;
  font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:border-color .15s,color .15s,background .15s}
.buybox .bbopt .n{font-weight:600;line-height:1.25}
.buybox .bbopt .p{font:600 12.5px/1.2 ui-monospace,monospace;color:#8f9dab}
.buybox .bbopt:hover{border-color:#4a5a6b;color:#fff}
.buybox .bbopt.on{border-color:#ffc400;background:rgba(255,196,0,.08);color:#fff}
.buybox .bbopt.on .p{color:#ffc400}
.buybox .bbopt:focus-visible{outline:2px solid #ffc400;outline-offset:2px}
.buybox .bbrow{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin:16px 0 0}
.buybox .bbqn{flex:0 0 96px;margin:0}
.buybox .bbunit{flex:1 1 190px;min-width:0;padding-bottom:2px}
.buybox .bbunitprice{display:block;font:700 26px/1.1 ui-monospace,monospace;color:#ffc400;letter-spacing:-.5px}
.buybox .bbstock{display:inline-block;margin-top:6px;font-size:13px;color:#8fd79b}
.buybox .bbstock.ask{color:#ffc46b}
.buybox .bbfoot{margin:12px 0 0;font:400 12.5px/1.4 inherit;color:#7f8d9b;min-height:16px}
.buybox .bbacts{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.buybox .bbadd{flex:1 1 200px}
.buybox .bbbuy{flex:0 0 auto}
.buybox .bbnote{margin:14px 0 0;padding-top:13px;border-top:1px solid #222c37;font-size:12.5px;color:#7f8d9b;line-height:1.5}
.cta.secondary{margin-top:14px;gap:8px;align-items:center}
.cta.secondary .btn{font-size:13.5px;padding:10px 14px}
.carttable{width:100%;border-collapse:collapse;margin:8px 0 18px}
.carttable th{text-align:left;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#8f9dab;
  padding:8px 10px;border-bottom:1px solid #232c36}
.carttable td{padding:12px 10px;border-bottom:1px solid #1b222b;vertical-align:middle}
.carttable .ci{display:flex;gap:12px;align-items:center}
.carttable .ci img{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid #2a333d;border-radius:10px}
.carttable .ci b{display:block;font-size:14.5px}
.carttable .ci .opt{display:block;color:#cfd8e2;font-size:13px}
.carttable .ci .muted{font-size:12px}
.carttable .price,.carttable .line{font:600 14.5px/1.2 ui-monospace,monospace;white-space:nowrap}
.carttable .line{color:#ffc400}
.carttable .qty{white-space:nowrap}
.carttable .qty input{width:52px;text-align:center;padding:7px 4px;border-radius:8px;border:1.5px solid #313d4a;
  background:#0b0f14;color:#e9eef4;font:inherit;margin:0 4px}
.carttable .qty button{width:30px;height:32px;border-radius:8px;border:1.5px solid #313d4a;background:#151b22;
  color:#e9eef4;font-size:15px;cursor:pointer}
.carttable .rmv{background:none;border:0;color:#ff9b9b;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.cartsum{border:1px solid #232c36;border-radius:14px;background:#121821;padding:16px;max-width:620px}
.cartsum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;margin:0 0 8px}
.cartsum-row b{color:#ffc400;font:700 22px/1 ui-monospace,monospace}
.cartacts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cartempty{max-width:560px}
.phh-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:#ffc400;color:#111;
  font:700 14px/1.3 inherit;padding:12px 18px;border-radius:999px;z-index:60;transition:transform .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:92vw;text-align:center}
.phh-toast.on{transform:translate(-50%,0)}
@media (max-width:700px){
  .carttable thead{display:none}
  .carttable tr{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:12px 0;border-bottom:1px solid #1b222b}
  .carttable td{border:0;padding:0}
  .carttable .ci{grid-column:1/-1}
}