:root{
  --blue:#0D47A1;--blue2:#1565C0;--blue-l:#E3ECFA;--ink:#14213D;--muted:#5B6475;--line:#E2E6EE;--bg:#F4F6FA;--card:#fff;
  --red:#C62828;--green:#1B7F2A;--wa:#1FAF54;--yellow:#FFC400;--r:14px;--sh:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.06);
  font-family:Roboto,"Segoe UI",system-ui,-apple-system,"Noto Sans",Arial,sans-serif;color:var(--ink);background:var(--bg);
}
*{box-sizing:border-box}
body{margin:0;line-height:1.45;-webkit-text-size-adjust:100%}
a{color:var(--blue2)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px;z-index:10}.skip:focus{left:8px}
:focus-visible{outline:3px solid #FFB300;outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 14px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.brand{background:linear-gradient(160deg,#0B3C8C,#1565C0);color:#fff;padding:14px 0 16px}
.brand .row{display:flex;align-items:center;gap:14px}
.logo{width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);flex:none}
.brand h1{font-size:1.45rem;margin:0;letter-spacing:.06em;font-weight:800}
.brand .addr{display:flex;align-items:center;gap:4px;color:#E4ECFF;font-size:.95rem;text-decoration:none}
.brand .addr svg{fill:var(--yellow)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.chip-phone{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;letter-spacing:.02em;min-height:44px}
.chip-phone svg{fill:var(--yellow)}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid transparent;
  font-weight:700;text-decoration:none;cursor:pointer;background:var(--blue);color:#fff;font-size:.95rem;white-space:nowrap}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn.light{background:#fff;color:var(--blue)}
.btn.wa{background:var(--wa);color:#fff}
.btn.yellow{background:var(--yellow);color:#1b1b1b}
.btn.outline{background:transparent;border-color:#B7C3D9;color:var(--blue)}
.btn.block{width:100%}
.btn.big{min-height:52px;font-size:1.05rem}
.btn[disabled],.btn.disabled{background:#E7E9EE;color:#8B92A0;border-color:#E7E9EE;cursor:not-allowed}

/* tabs */
.tabs{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.tabs .wrap{display:flex;gap:4px}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 6px;text-decoration:none;color:var(--muted);font-weight:700;border-bottom:3px solid transparent;min-height:48px}
.tab svg{width:20px;height:20px;fill:currentColor}
.tab[aria-current=page]{color:var(--blue);border-bottom-color:var(--blue)}
.badge-n{min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:.75rem;display:inline-grid;place-items:center;padding:0 5px}

main{min-height:60vh;padding:12px 0 28px}
.loading{padding:40px;text-align:center;color:var(--muted)}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:16px}
h2{font-size:1.2rem;margin:.2em 0 .5em}
.muted{color:var(--muted)}.small{font-size:.85rem}
.sample-note{background:#FFF8E1;border:1px solid #FFE08A;color:#6D5300;border-radius:10px;padding:8px 12px;font-size:.88rem;margin:8px 0}

/* offers */
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px 0 10px;scrollbar-width:none}
.carousel.multi{grid-auto-columns:88%}
.carousel::-webkit-scrollbar{display:none}
.offer-banner{scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);color:#fff;text-decoration:none;min-height:86px}
.offer-banner .emo{font-size:2rem;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.offer-banner b{display:block;font-size:1.08rem}
.offer-banner .lbl{color:#FFEB3B;font-weight:800}
.offer-banner .view{margin-left:auto;background:#fff;color:#B71C1C;border-radius:999px;padding:7px 14px;font-weight:800;flex:none}
.offer-tag{display:inline-block;color:#fff;font-weight:800;font-size:.75rem;padding:3px 8px;border-radius:7px}

/* search & filters */
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #CBD3E1;border-radius:12px;padding:0 12px;min-height:48px}
.search svg{fill:var(--muted);width:22px;height:22px}
.search input{border:0;outline:0;flex:1;min-height:46px;background:transparent;font-size:1rem}
.cats{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:thin}
.cat{flex:none;border:1px solid #C4CCDA;background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;color:#33415C;cursor:pointer;min-height:40px}
.cat[aria-pressed=true]{background:var(--blue-l);border-color:var(--blue-l);color:var(--blue)}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.pcard{display:flex;flex-direction:column;padding:10px}
.pcard a.hit{text-decoration:none;color:inherit;display:block}
.thumb{position:relative;aspect-ratio:16/10;border-radius:11px;display:grid;place-items:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:44%;height:44%;fill:#fff;opacity:.95}
.thumb .offer-tag{position:absolute;left:8px;top:8px}
.thumb .sample{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.35);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.06em;border-radius:6px;padding:2px 6px}
.brandname{color:var(--blue2);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.pname{font-weight:600;margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spec1{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{font-size:1.35rem;font-weight:800;margin-top:6px}
.price.offer{color:var(--red)}
.was{color:var(--muted);text-decoration:line-through;font-size:.85rem;margin-right:6px}
.save{color:var(--green);font-weight:700;font-size:.85rem}
.stock{display:inline-block;font-size:.78rem;font-weight:700;border-radius:7px;padding:3px 8px;margin-top:6px}
.stock.IN_STOCK{background:#E6F4EA;color:#1B6B2E}.stock.LOW_STOCK{background:#FFF3E0;color:#A04B00}
.stock.OUT_OF_STOCK{background:#FDE8E8;color:#B3261E}.stock.ON_ORDER{background:#E8EEF9;color:#28467A}
.buy{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;padding-top:10px}
.buy .btn{padding:6px 8px;font-size:.88rem;min-height:40px}
.buy .btn.oos{grid-column:1/-1}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}

/* detail */
.detail{display:grid;gap:14px}
@media(min-width:860px){.detail{grid-template-columns:1.1fr 1fr;align-items:start}}
.hero{aspect-ratio:4/3;border-radius:var(--r)}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;margin:2px 0 10px;min-height:44px}
.specs{margin:8px 0 0;padding-left:20px}.specs li{margin:3px 0}
.stack{display:grid;gap:8px}

/* services */
.svc-tabs{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto}
.svc{padding:14px;display:grid;gap:6px}
.svc h3{margin:0;font-size:1.05rem}
.svc .rate{font-weight:800;font-size:1.1rem;color:var(--blue)}
.svc .meta{display:flex;flex-wrap:wrap;gap:6px}
.pill{background:#EEF2F8;border-radius:999px;padding:3px 10px;font-size:.8rem;color:#33415C}
.svc .row2{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}
.list{display:grid;gap:10px}
@media(min-width:860px){.list.two{grid-template-columns:1fr 1fr}}

/* cart & checkout */
.line{display:grid;grid-template-columns:64px 1fr auto;gap:10px;padding:12px;align-items:start}
.line .thumb{aspect-ratio:1;width:64px}
.qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.qty button{width:40px;height:40px;border-radius:50%;border:0;background:var(--blue-l);color:var(--blue);font-size:1.25rem;font-weight:800;cursor:pointer}
.qty button:disabled{opacity:.4}
.qty output{min-width:28px;text-align:center;font-weight:800}
.iconbtn{background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.iconbtn svg{width:22px;height:22px;fill:#5B6475}
.totals{position:sticky;bottom:0;z-index:4;margin-top:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line)}
.totals .t{font-size:1.5rem;font-weight:800}
form.checkout{display:grid;gap:12px}
@media(min-width:860px){.co{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}}
label.f{display:grid;gap:4px;font-weight:600;font-size:.92rem}
label.f input,label.f textarea{border:1px solid #C4CCDA;border-radius:10px;padding:11px 12px;min-height:46px;font-weight:400;font-size:1rem;background:#fff}
label.f .err{color:var(--red);font-weight:500;font-size:.82rem}
label.f.bad input,label.f.bad textarea{border-color:var(--red)}
fieldset{border:0;padding:0;margin:0;display:grid;gap:4px}
legend{font-weight:800;margin-bottom:4px}
.radio{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.radio input{width:20px;height:20px;accent-color:var(--blue)}
.sum-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.msg{white-space:pre-wrap;background:#DCF8C6;border-radius:10px;padding:12px;font-size:.92rem;max-height:52vh;overflow:auto;color:#111B21}

/* dialog/toast */
dialog{border:0;border-radius:18px;padding:0;max-width:min(520px,94vw);width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,20,40,.45)}
dialog .pad{display:grid;gap:12px}
dialog .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);background:#1F2937;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:30;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}

/* footer */
.footer{background:#0B2350;color:#D6E0F5;padding:24px 0 30px;font-size:.95rem}
.footer .cols{display:grid;gap:16px}
@media(min-width:760px){.footer .cols{grid-template-columns:1.2fr 1fr 1fr}}
.footer a{color:#fff}
.footer h2{color:#fff;font-size:1rem;margin:0 0 6px}
.footer .copy{margin-top:18px;border-top:1px solid rgba(255,255,255,.15);padding-top:12px;font-size:.85rem;color:#9FB0D0}

@media(min-width:760px){
  .brand .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}
  .brand .side{display:grid;gap:8px;min-width:440px}
  .chips,.actions{margin-top:0}
  .logo{width:76px;height:76px}.brand h1{font-size:1.8rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.tabs,.footer,.buy,.actions{display:none}}

/* sizing fixes */
svg{width:20px;height:20px;fill:currentColor;flex:none}
.brand .addr svg,.chip-phone svg{width:18px;height:18px}
.brand .row>div{min-width:0}
.grid>*{min-width:0}
.thumb svg{width:44%;height:44%}
.hero svg{width:34%;height:34%}
.empty svg{display:block;margin:0 auto 8px}
.line .thumb svg{width:56%;height:56%}
.cat svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.line .thumb .sample{display:none}