/* =========================================================
   DIP Computer — extras: creative headings, banner fix, reviews,
   mobile header + slider. Loaded on every page, after the rest.
   ========================================================= */

/* ---------- creative headings ---------- */
.sh h2,.pghd h1,.px-box h2,.ttl{position:relative;display:inline-block;font-weight:600;letter-spacing:-.03em;padding-bottom:16px;
  background:linear-gradient(100deg,var(--ink) 0%,var(--blue) 45%,var(--sky) 60%,var(--blue) 75%,var(--ink) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hshine 7s linear infinite}
.pghd h1,.px-box h2{background-image:linear-gradient(100deg,#fff 0%,#bfe3ff 40%,var(--sky) 55%,#fff 75%,#fff 100%)}
@keyframes hshine{to{background-position:-250% 0}}
.sh h2:after,.pghd h1:after,.px-box h2:after{content:"";position:absolute;left:0;bottom:0;height:5px;width:64px;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--sky));transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .25s}
.sh h2:before,.pghd h1:before,.px-box h2:before{content:"";position:absolute;left:72px;bottom:0;width:10px;height:5px;border-radius:99px;background:var(--sky);opacity:0;transition:opacity .4s 1s}
.sh.ctr h2:after{transform-origin:center}
.hd-in h2:after,.hd-in h1:after,.pghd h1:after{transform:scaleX(1)}.hd-in h2:before,.hd-in h1:before,.pghd h1:before{opacity:1}
.sh>div,.px-box h2{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sh.hd-in>div,.px-box h2.hd-in{opacity:1;transform:none}
.sh p{transition-delay:.15s}
.pghd h1{animation:hshine 7s linear infinite,hup .8s var(--ease) both}@keyframes hup{from{opacity:0;transform:translateY(20px)}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);background:#fff;border:1.5px solid var(--line);padding:7px 14px;border-radius:99px}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 rgba(240,112,32,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(240,112,32,0)}100%{box-shadow:0 0 0 0 rgba(240,112,32,0)}}
/* hero slide title: blue -> sky gradient words */
.sc .t{font-weight:500}.sc .t b{font-weight:500;background:linear-gradient(90deg,var(--blue),#064a78);-webkit-background-clip:text;background-clip:text;color:transparent}
/* card titles get a soft underline sweep on hover */

/* ---------- advertisement banner: fixed (text never cut) ---------- */
.ad{aspect-ratio:1600/420;min-height:260px;background:var(--ink)}
.ad img{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:right center}
.ad:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,25,43,.88) 0%,rgba(7,25,43,.6) 38%,rgba(7,25,43,0) 70%)}
.ad-c{top:0;bottom:0;left:0;transform:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px 5%;max-width:min(560px,60%)}
.ad-c h2{line-height:1.15;margin-bottom:18px;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.ad-c b{animation:hup .8s var(--ease) both}

/* ---------- reviews ---------- */
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.rv-open{box-shadow:0 14px 30px rgba(10,104,168,.3);animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-4px)}}
.rv-note{background:#e7f8ee;color:#15803d;border:1px solid #b7e8c9;padding:12px 18px;border-radius:14px;font-weight:600;margin-bottom:20px}.rv-note.bad{background:#fdecec;color:#b91c1c;border-color:#f6c4c4}
.rv-empty{text-align:center;color:var(--mute);padding:20px}
.rc{position:relative}.rc:before{content:"\201C";position:absolute;right:22px;top:4px;font:700 90px/1 Lato,sans-serif;color:var(--mist)}

/* popup */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(7,25,43,.6);backdrop-filter:blur(4px);animation:fade .3s}
.modal-box{position:relative;width:min(540px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:24px;padding:30px;display:grid;gap:14px;box-shadow:0 40px 80px rgba(7,25,43,.4);animation:pop .4s var(--ease)}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.96)}}
.modal-box h3{font-size:1.4rem}.modal-box .mute{color:var(--mute);font-size:.86rem;margin-top:-8px}
.modal-box label{gap:6px;font-weight:700;font-size:.84rem;color:var(--ink)}.modal-box label small{font-weight:500;color:var(--mute)}
.modal-box input:not([type=radio]),.modal-box textarea{width:100%;padding:12px 16px;border:1.5px solid #c7dbea;border-radius:14px;font:500 .9rem Lato,sans-serif;transition:.25s;box-sizing:border-box}
.modal-box input:focus,.modal-box textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,104,168,.12)}
.modal-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--mist);cursor:pointer;display:grid;place-items:center}
.f2c{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hp{position:absolute;left:-9999px;opacity:0}
.rate{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}.rate legend{font-weight:700;font-size:.84rem;margin-bottom:6px;width:100%}
.rate input{position:absolute;opacity:0;pointer-events:none}.rate label{cursor:pointer;filter:grayscale(1) opacity(.35);transition:.2s;display:block}
.rate label:hover,.rate label:hover~label,.rate input:checked~label{filter:none;transform:scale(1.08)}
.rate input:focus-visible+label{outline:2px solid var(--blue);border-radius:6px}
body.mopen{overflow:hidden}

/* ---------- mobile header: slide-in drawer ---------- */
.nav-bg{display:none}
@media(max-width:1000px){
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .hdr nav{display:flex!important;position:fixed;top:0;bottom:0;left:auto;right:0;width:min(320px,84vw);height:100vh;height:100dvh;padding:86px 22px 30px;gap:4px;overflow-y:auto;
    transform:translateX(105%);transition:transform .45s var(--ease);z-index:60;box-shadow:-20px 0 50px rgba(7,25,43,.2)}
  .open .hdr nav{transform:none}
  .hdr nav>a,.dd>a{padding:14px 16px;border-radius:14px;font-size:1rem}
  .hdr nav>a,.hdr nav .dd{opacity:0;transform:translateX(30px);transition:.4s var(--ease)}
  .open .hdr nav>a,.open .hdr nav .dd{opacity:1;transform:none}
  .open .hdr nav>*:nth-child(2){transition-delay:.06s}.open .hdr nav>*:nth-child(3){transition-delay:.12s}.open .hdr nav>*:nth-child(4){transition-delay:.18s}.open .hdr nav>*:nth-child(5){transition-delay:.24s}
  .ddm a{padding:10px 14px;display:block;font-size:.9rem}
  .nav-bg{display:block;position:fixed;inset:0;background:rgba(7,25,43,.5);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.35s;z-index:55}
  .open .nav-bg{opacity:1;visibility:visible}
  .burger{position:relative;z-index:61}.open{overflow:hidden}
}
@media(max-width:640px){
  .hdr{padding:0 4%;gap:8px}.icons{gap:2px}.ib{width:36px;height:36px}.brand img{max-height:48px}
  .tb{font-size:.72rem}.sbar{padding:10px 4%}.sbar .btn{padding:9px 14px}
}
@media(max-width:380px){.icons a[aria-label=Wishlist]{display:none}}

/* ---------- mobile hero slider ---------- */
@media(max-width:700px){
  .hs{height:auto;min-height:0;aspect-ratio:auto;height:78vh;max-height:620px;min-height:500px}
  .sl .bg{object-position:70% center}

  .sc{z-index:2;left:0;right:0;bottom:56px;width:auto;padding:0 6%;text-align:left}
  .sc .t{font-size:1.4rem;line-height:1.15;margin-bottom: 8px;}.sc p{font-size:.9rem;margin:10px 0 18px}
  .sc .btn{width:76%}
  .dots{left:50%;transform:translateX(-50%);bottom:20px}
}
/* other mobile fixes */
@media(max-width:700px){
  .sh{margin-bottom:26px}.sh p{font-size:.95rem}
  .sh h2,.px-box h2{font-size:1.3rem}
  .ad{aspect-ratio:auto;min-height:187px}.ad:before{background:linear-gradient(180deg,rgba(7,25,43,.25),rgba(7,25,43,.88))}
  .ad-c{max-width:100%;justify-content:flex-end;padding:24px}.ad-c h2{font-size:1.3rem}
  .rv-top{justify-content:center;text-align:center}.rv-open{width:64%}
  .f2c{grid-template-columns:1fr}.modal-box{padding:24px 20px;border-radius:20px}
  .wyimg{height:300px}.mx-n{font-size:2.2rem}
}
@media(prefers-reduced-motion:reduce){.sh>div,.px-box h2{opacity:1;transform:none}}

/* ============ v8: every product photo on the same soft background, same size, never cropped ============ */
:root{--pbg:#f2f7fb}
.media,.m1,.m2,.pd .gal,.th,.ci-img{background:#fff}
.m1,.m2{box-sizing:border-box;padding:10px}
.m1 img:not(.ph),.m2 img:not(.ph){width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd .gal:not(.noimg) img{object-fit:contain;padding:18px;box-sizing:border-box;mix-blend-mode:multiply}
.th img{object-fit:contain;padding:4px;box-sizing:border-box;mix-blend-mode:multiply}
.ci-img img:not(.ph){object-fit:contain;padding:4px;box-sizing:border-box;mix-blend-mode:multiply}
.card .media{border-bottom:1px solid var(--line)}

/* ============ v8: checkout ============ */
.cko{grid-template-columns:1fr 400px}
.ck-form{display:grid;gap:22px;max-width:none}
.ck-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;display:grid;gap:16px}
.ck-card h3{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.ck-card h3 i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.8rem}
.ck-card h3 small{margin-left:auto;font-weight:500;color:var(--mute);font-size:.74rem}
.ck-g{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ck-g .full{grid-column:1/-1}
.fl2{display:grid;gap:6px;font-size:.76rem;font-weight:700;color:var(--mute)}.fl2 em{color:#dc2626;font-style:normal}
.ck-card input:not([type=radio]),.ck-card select,.ck-card textarea{padding:13px 16px;border:1.5px solid #c7dbea;border-radius:14px;font:500 .92rem Lato,sans-serif;width:100%;background:#fff;color:var(--ink);transition:.25s;box-sizing:border-box}
.ck-card input:focus,.ck-card select:focus,.ck-card textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,104,168,.12)}
.ck-card textarea{min-height:84px;resize:vertical}
.ck-card input:user-invalid,.ck-card select:user-invalid{border-color:#dc2626}
.geo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1.5px dashed #9cc5e0;border-radius:16px;background:#f2f8fc}
.geo button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;background:var(--blue);color:#fff;font:700 .82rem Lato,sans-serif;padding:11px 18px;cursor:pointer;transition:.25s}
.geo button:hover{background:var(--ink)}.geo button[disabled]{opacity:.6;cursor:wait}
.geo span{font-size:.78rem;color:var(--mute);flex:1;min-width:180px}.geo span.ok{color:#15803d;font-weight:700}.geo span.bad{color:#b91c1c;font-weight:600}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{position:relative;flex:1;min-width:150px}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;width:100%;height:100%}
.opt span{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1.5px solid #c7dbea;border-radius:14px;font-weight:700;font-size:.86rem;transition:.25s;background:#fff}
.opt span:before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #9db0d8;flex:none;transition:.25s}
.opt input:checked+span{border-color:var(--blue);background:#eaf4fb;color:var(--blue)}
.opt input:checked+span:before{border-color:var(--blue);background:radial-gradient(var(--blue) 0 45%,#fff 50%)}
.opt input:focus-visible+span{box-shadow:0 0 0 4px rgba(10,104,168,.15)}
.opt.big span{align-items:flex-start;padding:16px}.opt.big b{display:block;font-size:.92rem;color:var(--ink)}.opt.big small{display:block;font-weight:500;color:var(--mute);margin-top:3px;font-size:.74rem;line-height:1.4}
.opt.big input:checked+span b{color:var(--blue)}
.ck-btn{width:100%;justify-content:center;font-size:1rem;padding:16px}
.ck-note{font-size:.76rem;color:var(--mute);text-align:center}
.ck-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:14px;padding:12px 16px;font-weight:600;font-size:.88rem}
.ck-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;border-radius:14px;padding:12px 16px;font-weight:600;font-size:.88rem}
.mini{align-items:center}.mini span{display:flex;align-items:center;gap:10px}.mini img{width:46px;height:36px;object-fit:contain;background:var(--pbg);border-radius:8px;padding:2px;flex:none}
.done-box{max-width:640px;margin:auto;text-align:center;padding:44px 28px;border:1px solid var(--line);border-radius:26px;background:#fff}
.done-box h1{margin:10px 0 8px}.done-box p{color:var(--mute);margin-bottom:6px}.done-box .btn{margin-top:18px}
@media(max-width:900px){.cko{grid-template-columns:1fr}}
@media(max-width:560px){.ck-g{grid-template-columns:1fr}.ck-card{padding:18px}}

/* ============ v9: customer account, orders ============ */
.acc{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:start}
.acc-side{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;position:sticky;top:110px}
.acc-me{display:grid;justify-items:center;text-align:center;gap:4px;padding:6px 0 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.acc-me span{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#f07020);color:#fff;display:grid;place-items:center;font:700 1.5rem Lato,sans-serif;margin-bottom:6px}
.acc-me small{color:var(--mute);overflow-wrap:anywhere}
.acc-side nav{display:grid;gap:4px}.acc-side nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;font-weight:700;font-size:.88rem;transition:.25s}
.acc-side nav a:hover{background:var(--mist)}.acc-side nav a.on{background:var(--blue);color:#fff}
.acc-main h2{margin-bottom:16px;display:flex;align-items:center;gap:10px}.acc-main h2 small{font-size:.74rem;background:var(--mist);color:var(--blue);border-radius:99px;padding:3px 11px}
.ord{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:16px;display:grid;gap:12px}
.ord-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.ord-h small{display:block;color:var(--mute);font-size:.76rem;margin-top:2px}
.ord-i{display:grid;gap:8px}.ord-it{display:flex;gap:12px;align-items:center;padding:6px 0}.ord-it small{display:block;color:var(--mute);font-size:.76rem;margin-top:2px}.ord-it b{font-size:.9rem}
.ord-im{width:64px;height:48px;border-radius:10px;background:var(--pbg);flex:none;display:grid;place-items:center;overflow:hidden}.ord-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.ord-im .ph{width:70%;height:auto}
.ord-f{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px;flex-wrap:wrap}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:.72rem;font-weight:700;background:#dcecf8;color:#0a4f80}.pill.paid,.pill.delivered{background:#dcfce7;color:#166534}.pill.pending{background:#fef3c7;color:#92400e}.pill.cancelled{background:#fee2e2;color:#991b1b}.pill.shipped{background:#d3e6f4;color:#07507f}
.ordx{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}.ordx aside .ck-card .btn{justify-content:center}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:14px 0 4px;padding:0}.tl li{position:relative;text-align:center;font-size:.74rem;font-weight:700;color:var(--mute);padding-top:30px}
.tl li i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#dce9f3;border:3px solid #fff;box-shadow:0 0 0 2px #dce9f3;z-index:1}
.tl li:before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:3px;background:#dce9f3}.tl li:first-child:before{display:none}
.tl li.on{color:var(--ink)}.tl li.on i{background:var(--blue);box-shadow:0 0 0 2px var(--blue)}.tl li.on:before{background:var(--blue)}
.r2{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.88rem}.r2.t{border:0;font-weight:700;font-size:1.05rem}
@media(max-width:900px){.acc,.ordx{grid-template-columns:1fr}.acc-side{position:static}.acc-side nav{grid-template-columns:1fr 1fr}}
@media print{.tb,.hdr,.ft,.wa-float,.top-btn,.noprint,.pghd,.nav-bg{display:none!important}.wrap{max-width:100%}.ordx{grid-template-columns:1fr}.ck-card,.ord{border:1px solid #ccc;box-shadow:none}body{background:#fff}}

/* ============ v9: reviews page ============ */
.rvs{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 30px;margin-bottom:28px}
.rvs-a{display:grid;justify-items:center;gap:4px}.rvs-a b{font:700 3rem Lato,sans-serif;line-height:1;color:var(--ink)}.rvs-a small{color:var(--mute)}
.rvs-b{display:grid;gap:7px;max-width:420px;width:100%}.rvs-b div{display:grid;grid-template-columns:38px 1fr 30px;gap:10px;align-items:center;font-size:.78rem;font-weight:700}
.rvs-b i{height:8px;border-radius:99px;background:#e1edf6;overflow:hidden}.rvs-b u{display:block;height:100%;background:#f5b301;border-radius:99px}.rvs-b em{font-style:normal;color:var(--mute)}
.rvg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}.rvg .bc{flex:none}
@media(max-width:800px){.rvs{grid-template-columns:1fr;justify-items:center;text-align:center}.rvs-b{max-width:none}}

/* ============ v9: mobile - 2 product cards per row, shorter hero slider ============ */
@media(max-width:700px){
  /* product grid: always 2 columns */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{border-radius:16px}.card:hover{transform:none}
  .m1,.m2{padding:6px}
  .badge{top:8px;left:8px;font-size:.56rem;padding:3px 8px}
  .off{left:8px;bottom:8px;font-size:.58rem;padding:3px 8px}
  .wl{top:6px;right:6px;width:30px;height:30px}.wl .ic{width:15px;height:15px}
  .card .body{padding:11px 11px 12px;gap:6px}
  .bn{font-size:.62rem;flex-wrap:wrap;gap:4px}.low{font-size:.56rem;padding:1px 7px}
  .card h3{font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
  .card .sp{gap:4px}.card .sp i{font-size:.58rem;padding:3px 7px}.card .sp i:nth-child(n+3){display:none}
  .card .price{gap:5px}.card .price b{font-size:1rem}.card .price s{font-size:.7rem}
  .card .buy{flex-direction:column;align-items:stretch;gap:7px;padding-top:4px}
  .card .buy .qty{width:100%;justify-content:space-between}.card .buy .qty.sm button{width:34px;height:32px}.card .buy .qty.sm input{flex:1;width:auto;min-width:0}
  .card .buy .btn{width:100%;padding:9px 6px;font-size:.72rem;justify-content:center}
  .chips{gap:8px}.chips a{padding:8px 14px;font-size:.76rem}

  /* hero slider: low height, text sits at the bottom of the picture */
  .hs{height:230px;min-height:0}
  .sl .bg{object-position:70% center}
  .sl:after{content:"";position:absolute;inset:0;;pointer-events:none}
  .sc{left:4%;right:4%;        width: 56%;
        top: auto;
        bottom: 64px;transform:none;padding:0;z-index:2}
  .sc .t{font-size:1.05rem;line-height:1.2}
  .sc p{font-size:.8rem;margin:8px 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:none}
  .sc .btn{padding:10px 18px;font-size:.8rem}
}
@media(max-width:360px){.card .sp{display:none}.hs{height:320px}}


/* ---------- enquiry: card buttons, popup, account list ---------- */
.card .buy{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:6px}
.card .buy .btn{width:100%;padding:10px 8px;font-size:.76rem;justify-content:center;gap:6px;white-space:nowrap}
.btn.wa{background:#25a244;border-color:#25a244;color:#fff}.btn.wa:hover{background:#1c8a37;border-color:#1c8a37;color:#fff}
.btn.wa .ic{flex:none}
.buyrow .btn{flex:1 1 auto;justify-content:center}
.enq-prod{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--mist);border-radius:14px;padding:12px 16px;font-size:.88rem;margin-top:-4px}
.enq-prod[hidden]{display:none}.enq-prod b{line-height:1.3}.enq-prod span{font-weight:700;color:var(--blue);white-space:nowrap}
.modal-box em{color:#dc2626;font-style:normal}
.enq-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:10px 14px;font-weight:600;font-size:.84rem;margin:0}
.enq-err[hidden],#enq-form-wrap[hidden],.enq-done[hidden]{display:none}
.enq-done{display:grid;gap:12px;justify-items:center;text-align:center;padding:10px 0}.enq-done p{color:var(--mute);margin:0}
.enq-done .btn{justify-content:center;width:100%}
.enq-tick{width:70px;height:70px;border-radius:50%;background:#16a34a;display:grid;place-items:center;animation:pop .5s var(--ease)}
.pill.new{background:#fff7e0;color:#92400e}.pill.contacted{background:#dcecf8;color:#0a4f80}.pill.closed{background:#dcfce7;color:#166534}
.enq-msg{color:var(--mute);font-size:.86rem;line-height:1.5;margin:0}


/* ---------- header v12: Our Products flyout submenus + How to Pay button ---------- */
.sub{position:relative}.sub>a{justify-content:space-between}
.hassub:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);margin-left:12px;transition:transform .3s}
.sm{position:absolute;top:-8px;left:100%;background:#fff;border-radius:16px;min-width:210px;padding:8px;box-shadow:0 24px 50px rgba(7,25,43,.18);opacity:0;visibility:hidden;transform:translateX(10px);transition:.3s var(--ease)}
.sub:hover>.sm,.sub:focus-within>.sm{opacity:1;visibility:visible;transform:none}
.sub:hover>.hassub{background:var(--mist);color:var(--blue)}
.hdr nav>a.nav-pay{display:none}
.paybtn{background:var(--sky);color:#fff;padding:11px 22px;font-size:.82rem;box-shadow:0 8px 20px rgba(240,112,32,.28)}.paybtn:hover{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:0 10px 22px rgba(7,25,43,.25)}
.chips+.chips{margin-top:-14px}
@media(max-width:1000px){
  .sm{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 0 14px;min-width:0;border-left:2px solid var(--line);margin:0 0 6px 14px;border-radius:0}
  .hassub:after{display:none}.sub>a{font-weight:700}
  .hdr nav>a.nav-pay{display:flex;justify-content:center;background:var(--sky);color:#fff;margin-top:10px}
  .hdr nav>a.nav-pay:hover{background:var(--ink);color:#fff}
  .open .hdr nav>*:nth-child(5){transition-delay:.24s}
}
@media(max-width:640px){.paybtn{display:none}}

/* ---------- home v13: shop by brand / category / price ---------- */
.bds{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.bd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:26px 18px;transition:.45s var(--ease)}
.bd:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 24px 46px rgba(10,104,168,.18)}
.bdl{display:grid;place-items:center;height:64px;width:100%}.bdl img{max-height:44px;max-width:140px;width:auto;height:auto;object-fit:contain;transition:transform .45s var(--ease)}.bd:hover .bdl img{transform:scale(1.12)}
.bdl b{font-size:1.15rem;color:var(--navy)}.bd h3{font-size:1rem;color:var(--navy)}
.prs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.pr{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;background:linear-gradient(135deg,var(--navy),#124a77);color:#fff;border-radius:24px;padding:30px 26px;transition:.45s var(--ease)}
.pr:after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:rgba(240,112,32,.25);transition:transform .6s var(--ease)}
.pr:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(7,25,43,.28)}.pr:hover:after{transform:scale(2.2)}
.pr small{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffb98c;font-size:.7rem}.pr b{font-size:1.45rem;line-height:1.25;position:relative;z-index:1}
.pr .go{color:#fff;margin-top:14px;position:relative;z-index:1}
.pm-empty{color:#fff;text-align:center;padding:26px 0;font-weight:600}

/* ---------- v14: back bar, focused listing page, premium slider + card polish ---------- */
.pbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 6px}
.pbar .back{padding:9px 18px;font-size:.8rem;gap:8px;border-radius:99px}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--mute,#5b6b7a);min-width:0}
.crumbs a{font-weight:600;transition:color .25s}.crumbs a:hover{color:var(--blue)}
.crumbs span{opacity:.5}.crumbs b{color:var(--navy);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.pcount{margin-left:auto;background:var(--mist);color:var(--blue);font-weight:700;font-size:.76rem;padding:7px 14px;border-radius:99px}
.pempty{grid-column:1/-1;text-align:center;background:var(--mist);border:1.5px dashed var(--line);border-radius:22px;padding:48px 22px}
.pempty b{display:block;font-size:1.15rem;color:var(--navy);margin-bottom:8px}.pempty p{color:var(--mute,#5b6b7a);margin-bottom:18px}

/* cards: cleaner, discount tag removed */
.card{border-radius:20px;box-shadow:0 4px 18px rgba(7,25,43,.06)}
.card:hover{box-shadow:0 26px 50px rgba(7,25,43,.16)}
.card .price{display:flex;align-items:baseline;gap:10px}.card .price b{font-size:1.2rem;color:var(--navy)}.card .price s{color:#8a97a3;font-size:.82rem}
.card .sp i{background:var(--mist);color:var(--navy);font-style:normal;font-weight:600}

/* premium slider */
.pm{padding:84px 0 64px}
.pm-hd{align-items:flex-end}
.pm-tabs{gap:12px;padding:4px 2px 26px;scroll-snap-type:x proximity}
.pm-tabs button{scroll-snap-align:start;padding:11px 22px;font-size:.86rem;backdrop-filter:blur(4px)}
.pm-tabs button.on{box-shadow:0 10px 26px rgba(0,0,0,.28);transform:translateY(-2px)}
.pm-track{gap:22px}
.pc .card{border:0}
.pm-ar{box-shadow:0 12px 28px rgba(7,25,43,.35)}
@media(max-width:700px){
  .pbar{padding-top:16px}.pcount{margin-left:0}
  .pm-hd{align-items:flex-start}.pm-cta{width:100%}.pm-cta .btn{flex:1;justify-content:center}
  .pm-tabs button{padding:9px 16px;font-size:.8rem}
  .pc{flex:0 0 78%}
}

/* ---------- v15: product highlights (7 days return, 3 years warranty, imported) ---------- */
.hl{--g1:#0a68a8;--g2:#f07020}
.hl-s{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0}
.hl-s .hli{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:8px 4px 7px;border-radius:12px;background:linear-gradient(160deg,#f4f9fd,#e6f1fa);border:1px solid var(--line);transition:.35s var(--ease)}
.hl-s .hli:hover{transform:translateY(-3px);border-color:var(--g1);box-shadow:0 8px 18px rgba(10,104,168,.15)}
.hl-s .hlc{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));margin-bottom:3px}
.hl-s .hlc .ic{width:14px;height:14px}
.hl-s b{font-size:.66rem;color:var(--navy);line-height:1.1;font-weight:700}
.hl-s small{font-size:.56rem;color:var(--mute);line-height:1.15;font-weight:600}
@media(max-width:700px){.card .hl-s{gap:4px}.hl-s b{font-size:.6rem}.hl-s small{font-size:.52rem}.hl-s .hlc{width:22px;height:22px}
}

/* ---------- v16: product page highlights + specification tables ---------- */
.pdx{padding-top:8px}
.sph{margin-bottom:22px}.sph h2{font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--navy);letter-spacing:-.02em}.sph p{color:var(--mute);margin-top:4px;font-size:.92rem}
.spg{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.spc{background:var(--mist);border:1px solid var(--line);border-radius:22px;padding:22px}
.spc h3{font-size:1.05rem;color:var(--navy);margin-bottom:14px;padding-left:12px;border-left:4px solid var(--sky)}
.spr{display:grid;gap:10px}
.sprow{display:grid;grid-template-columns:38% 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;transition:.3s var(--ease)}
.sprow:hover{border-color:var(--blue);transform:translateX(4px);box-shadow:0 8px 18px rgba(10,104,168,.12)}
.sprow span{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.sprow b{font-size:.92rem;font-weight:500;color:var(--ink)}
@media(max-width:900px){.spg{grid-template-columns:1fr}}
@media(max-width:480px){.sprow{grid-template-columns:1fr 1fr;gap:2px}.spc{padding:16px}}

/* ---------- v17: select configuration ---------- */
.cfg{background:#f6f9fc;border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px;margin:4px 0 18px}
.cfg h3{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.cfg-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.cfo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;font-family:inherit;transition:.3s var(--ease)}
.cfo b{font-size:.92rem;color:var(--ink);font-weight:700}.cfo strong{font-size:1.1rem;color:var(--navy);font-weight:700}
.cfo:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 10px 22px rgba(10,104,168,.14)}
.cfo.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset,0 10px 22px rgba(7,25,43,.12)}
.cst{font-size:.78rem;font-weight:700}.cst.in{color:#0f7a3d}.cst.out{color:#c0262d}
.cfo.oos{background:#f4f5f7}.cfo.oos b,.cfo.oos strong{color:#7a8794}.cfo.oos strong{text-decoration:line-through}
.stk.out2{color:#c0262d}
.price s[hidden],.price em[hidden]{display:none}
@media(max-width:480px){.cfg-g{grid-template-columns:1fr 1fr}.cfo{padding:12px}}

/* ---------- v18: out of stock = whole product blurred, enquiry closed ---------- */
.card{position:relative}
.card.oos{border-color:#d6dde4;box-shadow:none}
.card.oos .media,.card.oos .body{filter:blur(3.5px) grayscale(.7);opacity:.55;pointer-events:none;user-select:none}
.card.oos:hover{transform:none;box-shadow:none}
.oos-tag{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-6deg);z-index:5;background:#c0262d;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;padding:10px 22px;border-radius:12px;box-shadow:0 12px 28px rgba(192,38,45,.35);white-space:nowrap;pointer-events:none}
.card.oos .btn[disabled]{background:#9aa6b2;cursor:not-allowed}
.oosbn{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;background:#fff1f1;border:1.5px solid #f3c1c3;border-radius:18px;padding:16px 20px}
.oosbn b{color:#c0262d;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}.oosbn span{color:#5b2b2d;flex:1;min-width:200px;font-size:.9rem}
.pd.oos{filter:blur(4px) grayscale(.7);opacity:.55;user-select:none;pointer-events:none}

/* ---------- v19: highlights = 3 blue cards (icon top, text below); softer out-of-stock look ---------- */
.card.oos .media,.card.oos .body{filter:blur(1.2px) grayscale(.35);opacity:.8}
.pd.oos{filter:blur(1.2px) grayscale(.3);opacity:.85}
.oos-tag{top:30%}

/* SEO text block on product list pages */
.seo-txt{max-width:900px;margin-top:-100px;}.seo-txt h2{font-size:22px;margin:0 0 10px}.seo-txt p{color:#475569;line-height:1.7;margin:0 0 10px}.seo-txt a{color:#1d4ed8;text-decoration:underline}

/* round call button (product page) */
.callc{flex:none;width:48px;height:48px;border-radius:50%;display:inline-grid;place-items:center;background:var(--blue);box-shadow:0 8px 18px rgba(10,104,168,.28);transition:.25s var(--ease)}
.callc:hover{background:var(--ink);transform:translateY(-2px)}.callc .ic{display:block}
/* field errors */
.ferr{display:block;position:static;margin-top:6px;color:#b91c1c;font-size:.74rem;font-weight:600;line-height:1.35}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}

/* ---------- v20: header active page + Premium A1 slide ---------- */
.hdr nav>a,.dd>a{position:relative}
.hdr nav>a:after,.dd>a.hasdd:before{content:"";position:absolute;left:50%;bottom:3px;width:0;height:3px;border-radius:3px;background:var(--sky);transform:translateX(-50%);transition:width .35s var(--ease)}
.hdr nav>a:hover:after,.dd:hover>a.hasdd:before{width:22px}
.hdr nav>a.on,.dd.on>a.hasdd{color:var(--blue);background:var(--mist);font-weight:700}
.hdr nav>a.on:after,.dd.on>a.hasdd:before{width:26px}
.hdr nav>a.nav-pay-orange:after{display:none}
.hdr nav>a.nav-pay-orange.on{box-shadow:0 0 0 3px rgba(240,112,32,.28),0 8px 22px rgba(255,105,0,.42)}
@media(max-width:1000px){
  .hdr nav>a:after,.dd>a.hasdd:before{display:none}
  .hdr nav>a.on,.dd.on>a.hasdd{box-shadow:inset 4px 0 0 var(--sky);border-radius:14px}
  .ddm a{display:block}
}

/* premium: tabs + cards slide */
.pm-tabs{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;cursor:grab;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);padding-left:22px;padding-right:22px}
.pm-tabs.drag,.pm-track.drag{cursor:grabbing;user-select:none}
.pm-tabs button{transition:background .3s,color .3s,transform .35s var(--ease),box-shadow .3s;user-select:none}
.pm-tabs button:active{transform:scale(.96)}
.pm-track{scroll-behavior:smooth;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;scroll-padding-left:2px}
.pc{scroll-snap-align:start;scroll-snap-stop:always}
.pm-track.swap .pc:not([hidden]){animation:pcIn .65s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes pcIn{from{opacity:0;transform:translateX(70px) scale(.94)}to{opacity:1;transform:none}}
.pm-ar{transition:opacity .3s,transform .3s var(--ease),background .3s}
.pm-ar:hover{transform:scale(1.1)}.pm-ar:active{transform:scale(.94)}
.pm-ar.dis{opacity:.35}
.pm-empty{animation:pcIn .5s var(--ease) both}
@media(max-width:700px){
  .pc{flex:0 0 82%}
  .pm-track{padding-left:4px;scroll-padding-left:4px}
  .pm-ar{display:none}
  .pm-tabs button{padding:9px 16px}
}
@media(prefers-reduced-motion:reduce){.pm-track.swap .pc{animation:none}.pm-tabs,.pm-track{scroll-behavior:auto}}

/* ---------- hero slide 1: small "Buy Premium" line above the big title ---------- */
.sc .t .pre{display:block;font-size:.4em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f27b2d;margin:0 0 .5em;opacity:0;transform:translateY(12px)}
.sl.on .t .pre{animation:up .7s var(--ease) .1s forwards}
@media(max-width:700px){.sc .t .pre{font-size:.52em;letter-spacing:.12em;margin-bottom:.35em}}


/* ---------- Home: "Before You Buy Used" (white, split layout) ---------- */
.bys{background:#fff;padding:7px 0;border-top:1px solid var(--line)}
.bys-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.bys-eye{display:inline-block;padding:6px 14px;border-radius:99px;background:#fff1e6;color:#d9560f;font:700 .72rem Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.bys-l h2{font-size:clamp(1.6rem,3.2vw,1.7rem);line-height:1.2;font-weight:500;color:var(--ink);margin:0 0 16px}
.bys-l h2 b{color:var(--blue);background:linear-gradient(transparent 62%,rgba(240,112,32,.25) 62%);padding:0 4px}
.bys-l p{color:var(--mute);font-size:1rem;    line-height: 1.5;
    margin: 0 0 10px;max-width:440px}
.bys-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.bys-c{position:relative;overflow:hidden;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:20px;padding:14px 26px;background:#fff;border:1.5px solid var(--line);border-radius:20px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.bys-c:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(var(--blue2),var(--sky));transform:scaleY(0);transition:transform .35s var(--ease)}
.bys-c:hover{transform:translateX(8px);border-color:#b9d6ec;box-shadow:0 16px 34px rgba(10,104,168,.12)}
.bys-c:hover:before{transform:scaleY(1)}
.bys-i{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--mist);color:var(--blue);font-size:1.5rem;transition:.35s var(--ease)}
.bys-c:hover .bys-i{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;transform:rotate(-6deg)}
.bys-t h3{font-size:1.18rem;line-height:1.3;margin:0 0 4px;color:var(--ink)}
.bys-t p{margin:0;color:var(--mute);font-size:.92rem;line-height:1.5}
.bys-n{font:700 2.2rem/1 Lato,sans-serif;color:#e3edf6}
@media(max-width:900px){.bys{padding:13px 0}.bys-in{grid-template-columns:1fr;gap:32px}.bys-l p{max-width:none}}
@media(max-width:560px){.bys-c{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px}.bys-i{width:52px;height:52px;font-size:1.2rem;border-radius:14px}.bys-n{display:none}.bys-t h3{font-size:1rem}.bys-c:hover{transform:none}}

/* Why DIP Computer (mobile): tighter spacing + smaller fonts */
@media(max-width:700px){
  .bys{padding:4px 0}
  .bys-in{gap:14px}
  .bys-eye{padding:4px 10px;font-size:.62rem;margin-bottom:8px}
  .bys-l h2{font-size:1.2rem;line-height:1.25;margin:0 0 8px}
  .bys-l p{font-size:.8rem;line-height:1.4;margin:0 0 8px;max-width:none}
  .bys-l .btn{padding:8px 14px;font-size:.8rem}
  .bys-list{gap:8px}
  .bys-c{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:14px}
  .bys-i{width:40px;height:40px;font-size:1rem;border-radius:12px}
  .bys-t h3{font-size:.88rem;margin:0 0 2px}
  .bys-t p{font-size:.74rem;line-height:1.35}
}

/* Reviews heading (mobile): centered under the eyebrow + button, underline bar centered too */
@media(max-width:768px){
  #reviews .sh.ctr{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;margin-bottom:20px}
  #reviews .sh.ctr>div:first-child{width:100%;text-align:center}
  #reviews .sh.ctr h2{font-size:1.35rem;line-height:1.25;padding-bottom:14px}
  #reviews .sh.ctr h2:after{left:calc(50% - 41px)}
  #reviews .sh.ctr h2:before{left:calc(50% + 31px)}
}


/* ---------- Home: product sliders (laptops / gaming / macbook / desktops) ---------- */
.ps .sec{padding:64px 0}
.ps-ctl{display:flex;align-items:center;gap:10px}
.ps-ar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.3s var(--ease)}
.ps-ar:hover:not(:disabled){background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.ps-ar:disabled{opacity:.4;cursor:default}
.ps-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:10px 4px 30px;margin:-10px -4px -30px}
.ps-track::-webkit-scrollbar{display:none}
.ps-track>.card{flex:0 0 calc((100% - 66px)/4);min-width:0;scroll-snap-align:start}
.ps-track .card.rv{opacity:1;transform:none}
@media(max-width:1100px){.ps-track>.card{flex-basis:calc((100% - 44px)/3)}}
@media(max-width:800px){.ps-track{gap:14px}.ps-track>.card{flex-basis:calc((100% - 14px)/2)}.ps .sec{padding:44px 0}}
@media(max-width:560px){.ps-track>.card{flex-basis:100%}.ps-ar{width:38px;height:38px}.ps-ctl{width:100%}.ps-ctl .btn{margin-right:auto}}


/* ---------- Shop by category: no icons, tidy spacing ---------- */
.cats .ct h3{margin-top:0}

/* ---------- Home: video reviews (white background, square videos, centre-focus slider) ---------- */
.vr{position:relative;overflow:hidden;padding:76px 0 60px;background:#fff;border-top:1px solid var(--line)}
.vr .wrap{position:relative;z-index:1}
.vr-hd{text-align:center;max-width:640px;margin:0 auto 34px}
.vr-eye{display:inline-block;padding:6px 14px;border-radius:99px;background:#fff1e6;color:#d9560f;font:700 .72rem Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.vr-hd h2{color:var(--ink);font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:500;margin:0 0 12px}
.vr-hd h2 b{color:var(--blue);background:linear-gradient(transparent 62%,rgba(240,112,32,.25) 62%);padding:0 4px}
.vr-hd p{color:var(--mute);margin:0;font-size:.98rem;line-height:1.6}
.vr-stage{position:relative;display:flex;align-items:center;gap:14px}
.vr-view{flex:1;min-width:0;overflow:hidden;padding:30px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vr-track{display:flex;gap:28px;will-change:transform;transition:transform .8s var(--ease)}
.vr-c{position:relative;flex:none;width:320px;aspect-ratio:1/1;margin:0;border-radius:24px;overflow:hidden;background:#e8f1f8;cursor:pointer;outline:0;opacity:.5;transform:scale(.82);filter:saturate(.75);transition:transform .8s var(--ease),opacity .8s,filter .8s,box-shadow .8s;box-shadow:0 8px 20px rgba(7,25,43,.12)}
.vr-c.near{opacity:.8;transform:scale(.9);filter:saturate(.9)}
.vr-c.on{opacity:1;transform:scale(1.05);filter:none;box-shadow:0 24px 50px rgba(10,104,168,.28),0 0 0 3px var(--blue)}
.vr-c video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vr-c:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,25,43,.85) 100%);pointer-events:none}
.vr-play{position:absolute;z-index:2;left:50%;top:44%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:var(--blue);transition:transform .4s var(--ease)}
.vr-play svg{margin-left:3px}
.vr-c.on .vr-play{animation:vrPulse 2.2s infinite}
.vr-c:hover .vr-play{transform:scale(1.12)}
@keyframes vrPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%,100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.vr-c figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px 18px 18px;display:grid;gap:2px}
.vr-st{color:#f59e0b;font-size:.82rem;letter-spacing:2px}
.vr-c b{font:700 1rem Lato,sans-serif;color:#fff}
.vr-c small{color:#d6e7f3;font-size:.76rem;font-weight:600}
.vr-bar{position:absolute;z-index:3;left:0;bottom:0;height:4px;width:100%;background:linear-gradient(90deg,#f59e0b,#f07020);transform:scaleX(0);transform-origin:left}
.vr-c.on .vr-bar{animation:vrBar var(--vrt,5s) linear forwards}
.vr.hold .vr-c.on .vr-bar{animation-play-state:paused}
@keyframes vrBar{to{transform:scaleX(1)}}
.vr-ar,.ps-ar{flex:none}
.vr-ar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;box-shadow:0 8px 20px rgba(7,25,43,.1);cursor:pointer;transition:.3s var(--ease);z-index:3}
.vr-ar:hover{background:var(--blue);border-color:var(--blue);transform:scale(1.08)}
.vr-ar .ic,.ps-ar .ic{width:20px;height:20px}
.vr-ar:hover .ih .i1,.ps-ar:hover:not(:disabled) .ih .i1{display:none}.vr-ar:hover .ih .i2,.ps-ar:hover:not(:disabled) .ih .i2{display:block}
.vr-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
.vr-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:#cfdeea;cursor:pointer;transition:.35s var(--ease)}
.vr-dots button.on{width:30px;background:var(--blue)}
.vr-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(5,14,24,.86);backdrop-filter:blur(6px)}
.vr-modal[hidden]{display:none}
.vr-mb{position:relative;width:min(560px,94vw);aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:vrIn .35s var(--ease)}
.vr-mb video{width:100%;height:100%;object-fit:contain;display:block}
.vr-x{position:absolute;z-index:2;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
@keyframes vrIn{from{opacity:0;transform:scale(.92)}}
@media(max-width:700px){.vr{padding:52px 0 40px}.vr-c{width:250px;border-radius:20px}.vr-track{gap:18px}.vr-ar{display:none}.vr-stage{display:block}.vr-play{width:46px;height:46px;margin:-23px 0 0 -23px}}
@media(prefers-reduced-motion:reduce){.vr-track,.vr-c{transition:none}.vr-c.on .vr-play,.vr-c.on .vr-bar{animation:none}}

/* ---------- Product cards: everything centred, warranty highlighted ---------- */
.card .body{align-items:center;text-align:center}
.card .body .wtag{align-self:center;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border:0;border-radius:99px;background:linear-gradient(135deg,#f07020,#f59e0b);color:#fff;font:700 .78rem/1 Lato,sans-serif;letter-spacing:.03em;box-shadow:0 8px 18px rgba(240,112,32,.32)}
.card .body .wtag i{font-size:.82rem}
.card .body .wtag:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:wtShine 4s ease-in-out infinite}
@keyframes wtShine{0%,55%{left:-70%}100%{left:130%}}
.card .body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.card .body .sp,.card .body .price,.card .body .bn{justify-content:center}
.card .body .price b{font-size:1.4rem}
.card .body .buy{width:100%}
@media(max-width:560px){.card .body .wtag{font-size:.66rem;padding:6px 11px}.card .body .price b{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.card .body .wtag:after{animation:none}}


/* ---------- Footer: popular search keywords ---------- */

/* ---------- Video reviews: continuous marquee, every card fully visible ---------- */
.vr-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.vr-track{transition:none;width:max-content;will-change:transform}
.vr-c,.vr-c.near,.vr-c.on{opacity:1;transform:none;filter:none;box-shadow:0 12px 28px rgba(7,25,43,.16);transition:box-shadow .3s,transform .3s}
.vr-c:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,104,168,.28)}
.vr-c video{background:#0b1b2b}
.vr-bar,.vr-dots{display:none}
.vr-c .vr-play{animation:vrPulse 2.2s infinite}
/* ---------- MacBook / Gaming tabbed slider ---------- */
.pst-tabs{display:flex;gap:10px;margin:0 0 22px;flex-wrap:wrap}
.pst-tabs button{padding:11px 22px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:700 .92rem Lato,sans-serif;cursor:pointer;transition:.3s var(--ease)}
.pst-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.pst-tabs button.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(10,104,168,.28)}
.pst-pane[hidden]{display:none}
.pst-empty{flex:1;display:grid;justify-items:center;gap:10px;text-align:center;padding:46px 20px;border:1.5px dashed var(--line);border-radius:20px;background:#fff}
.pst-empty b{font:700 1.1rem Lato,sans-serif;color:var(--ink)}.pst-empty span{color:var(--mute)}
/* Video reviews: first card starts right beside the Previous button (no empty gap, no fade on the left) */
.vr-view{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent);padding-left:0}
.vr-track{margin-left:0;padding-left:0}
.vr-c:first-child{margin-left:0}

/* ---------- Customer reviews: continuous marquee ---------- */
.rs.rs-m{overflow:hidden;scroll-snap-type:none;padding:6px 0 18px}
.rs-track{display:flex;gap:20px;width:max-content;will-change:transform}
.rs.rs-m .rs-track>.bc{flex:0 0 min(360px,84vw);scroll-snap-align:none}

/* ---------- Video reviews added from the admin: YouTube cards + popup ---------- */
.vr-c>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0b1b2b}
.vr-mb video[hidden],.vr-mb iframe[hidden]{display:none!important}
.vr-mb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vr-mb.yt{aspect-ratio:16/9;width:min(920px,94vw)}
.vr-mb.yt.v{aspect-ratio:9/16;width:min(400px,92vw,calc(84vh*9/16))}
.vr-x{z-index:3}

/* Lato everywhere (icons keep their own icon font) */
body,h1,h2,h3,h4,h5,h6,button,input,select,textarea,option,table{font-family:Lato,sans-serif}
/* lighter headings */
h1,h2,h3,h4,h5,h6{font-weight:400!important}