/* Better Call Tarhini — bold yellow & black "call us now" theme */
:root{
  /* Better Call Tarhini brand: sky blue (main) + yellow + red, tied together with deep navy */
  /* new identity: royal blue #1554C9, navy #0B1F3A, red #E8262E, yellow #FFC21A */
  --sky:#1554C9; --sky-d:#0E3F9E; --sky-l:#EAF0FC; --yellow:#FFC21A; --yellow-2:#FFD45C; --red:#E8262E; --red-d:#B81920;
  --ink:#0B1F3A; --ink-2:#132C52;
  --brand-grad:linear-gradient(135deg,#0B1F3A 0%,#10306B 55%,#1554C9 100%); --paper:#F6F8FC;
  --muted:#5B6B85; --line:#DCE4F2; --ok:#1a9d55; --err:#E8262E; --card:#ffffff;
  --stripe:linear-gradient(90deg,var(--sky) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6% 100%);
  --stripe2:linear-gradient(90deg,var(--yellow) 0 50%,var(--red) 50% 100%);
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.08);
  --head:'Oswald','Arial Narrow',Arial,sans-serif; --body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.6rem)} h2{font-size:clamp(1.5rem,3vw,2.2rem)} h3{font-size:1.2rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.ar{font-family:'Noto Kufi Arabic','Tahoma',sans-serif;direction:rtl}
.muted{color:var(--muted)} .center{text-align:center} .small{font-size:.875rem}
.hl{background:var(--yellow);padding:0 .25em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* top strip + header */
.strip{background:var(--ink);color:#fff;font-size:.85rem}
.strip .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;min-height:36px;flex-wrap:wrap}
.strip a{color:var(--yellow);text-decoration:none;font-weight:600}
header.site{background:#fff;color:var(--ink);box-shadow:0 2px 14px rgba(11,31,58,.08);position:sticky;top:0;z-index:50;border-bottom:5px solid transparent;border-image:var(--stripe2) 1}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:72px;padding-top:4px;padding-bottom:4px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo svg{width:44px;height:44px}
.logo .t1{display:block;font-family:var(--head);font-size:.8rem;letter-spacing:3px;font-style:italic;font-weight:500}
.logo .t2{display:block;font-family:var(--head);font-size:1.55rem;font-weight:700;letter-spacing:1px;line-height:1}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.main a{font-family:var(--head);text-transform:uppercase;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:500;letter-spacing:.5px}
nav.main a{color:var(--ink)}
nav.main a:hover{background:var(--sky-l);color:var(--sky)}
nav.main a.on{background:var(--sky);color:#fff}
.icons{display:flex;gap:8px;align-items:center}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;text-decoration:none;border:0;border-radius:999px;padding:9px 14px;font-weight:700;font-family:var(--head);text-transform:uppercase;cursor:pointer;font-size:.9rem}
.icon-btn .count{background:var(--red);color:#fff!important;color:var(--ink);border-radius:999px;font-size:.75rem;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.burger{display:none;background:none;border:0;font-size:1.8rem;cursor:pointer;padding:4px 8px;color:var(--ink)}
@media (max-width:1200px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:8px 16px 16px;border-bottom:4px solid var(--sky);box-shadow:0 10px 20px rgba(11,31,58,.12)}
  nav.main.open{display:flex}
  .burger{display:block;margin-left:auto}
  header.site .wrap{gap:10px}
  .icon-btn .lbl{display:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);text-transform:uppercase;letter-spacing:.6px;font-weight:600;font-size:1rem;padding:12px 22px;border-radius:10px;border:3px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red-d);color:#fff}
.btn.red:hover{box-shadow:4px 4px 0 var(--red-d)}
.btn.sky{background:var(--sky);border-color:var(--sky-d);color:#fff}
.btn.white{background:#fff;color:var(--ink)}
.btn.wa{background:#25d366;border-color:#128c4a;color:#fff}
.btn.wa:hover{box-shadow:4px 4px 0 #128c4a}
.btn.sm{padding:7px 12px;font-size:.85rem;border-width:2px}
.btn.block{width:100%}
.btn.danger{background:var(--err);border-color:var(--err);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* hero */
.hero{background:var(--brand-grad);color:#fff;border-bottom:5px solid transparent;border-image:var(--stripe2) 1;overflow:hidden;position:relative}
.hero h1{color:#fff;text-shadow:3px 3px 0 var(--ink)}
.hero h1 .big{color:var(--yellow)}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero .kicker{display:inline-block;background:var(--red);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:2px;padding:6px 12px;border-radius:6px;margin-bottom:14px;font-size:.9rem}
.hero h1 span{display:block}
.hero h1 .big{font-size:1.25em}
.hero p.lead{font-size:1.15rem;max-width:520px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.hero-card{background:var(--ink);color:#fff;border-radius:20px;padding:28px;transform:rotate(2deg);box-shadow:10px 10px 0 var(--yellow);position:relative}
.hero-card .phone{font-family:var(--head);font-size:2.2rem;color:var(--yellow);letter-spacing:1px}
.hero-card ul{list-style:none;padding:0;margin:16px 0 0}
.hero-card li{padding:6px 0;border-bottom:1px dashed #2f5a80}
.hero-card .stamp{position:absolute;top:-18px;right:-12px;background:var(--red);color:#fff;font-family:var(--head);text-transform:uppercase;padding:8px 14px;border-radius:8px;transform:rotate(8deg);font-size:.9rem;border:3px solid #fff}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:40px}.hero-card{transform:none}}

/* sections */
section.sec{padding:56px 0}
section.sec.dark{background:var(--ink);color:#fff}
section.sec.dark h2{color:var(--yellow)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head p{margin:0}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr;gap:12px}}

.tile{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);padding:22px;box-shadow:5px 5px 0 var(--sky)}
.tile .ic{font-size:2rem;margin-bottom:8px}
.dark .tile{background:var(--ink-2);border-color:var(--sky);box-shadow:5px 5px 0 var(--sky)}

.cat{display:block;text-decoration:none;border:3px solid var(--ink);border-radius:18px;padding:28px;background:#fff;position:relative;overflow:hidden;min-height:170px;transition:transform .15s}
.cat:hover{transform:translateY(-4px)}
.cat.y{background:var(--yellow)}
.cat.s{background:var(--brand-grad);color:#fff}
.cat h3{font-size:1.8rem;margin-bottom:6px}
.cat .go{position:absolute;right:20px;bottom:16px;font-family:var(--head);font-size:1.1rem}
.cat .num{font-family:var(--head);font-size:3.5rem;opacity:.12;position:absolute;right:14px;top:0}

/* product cards */
.pcard{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s}
.pcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--sky)}
.pcard .img{aspect-ratio:4/3;background:var(--sky-l);position:relative;display:flex;align-items:center;justify-content:center}
.pcard .img img{width:100%;height:100%;object-fit:cover}
.badge{display:inline-block;font-family:var(--head);text-transform:uppercase;font-size:.75rem;letter-spacing:1px;padding:3px 8px;border-radius:6px;background:var(--sky);color:#fff}
.badge.new{background:var(--yellow);color:var(--ink);border:2px solid var(--ink)}
.badge.sale{background:var(--red);color:#fff}
.badge.out{background:#888;color:#fff}
.pcard .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.pcard .body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .t{font-weight:700;text-decoration:none;font-size:1rem;line-height:1.3}
.pcard .specs{font-size:.82rem;color:var(--muted)}
.price{font-family:var(--head);font-size:1.4rem;font-weight:700;color:var(--red)}
.price s{font-size:.9rem;color:var(--muted);font-weight:400;margin-left:6px}
.pcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:8px}
@media (max-width:600px){.pcard .body{padding:10px}.pcard .t{font-size:.9rem}.price{font-size:1.15rem}.pcard .row{flex-direction:column;align-items:stretch}}
.laptop-ph{width:62%;opacity:.85}

/* shop filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:12px;margin-bottom:22px}
.filters .seg{display:flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.filters .seg a{padding:8px 14px;text-decoration:none;font-family:var(--head);text-transform:uppercase;font-size:.9rem}
.filters .seg a.on{background:var(--sky);color:#fff}
input,select,textarea{font:inherit;padding:11px 12px;border:2px solid #c3dbe9;border-radius:10px;background:#fff;width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--yellow)}
.filters input,.filters select{width:auto;flex:1;min-width:140px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px}
.field{margin-bottom:14px}
.check{display:flex;gap:8px;align-items:center;font-weight:500}
.check input{width:auto}

/* product page */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:36px 0}
.pd .gallery{background:var(--sky-l);border:3px solid var(--ink);border-radius:18px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.pd .gallery img{width:100%;height:100%;object-fit:cover}
.spec-table{width:100%;border-collapse:collapse;margin:16px 0;background:#fff;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.spec-table td{padding:10px 14px;border-bottom:1px solid var(--line)}
.spec-table td:first-child{font-weight:700;width:40%;background:var(--sky-l)}
.qty{display:flex;align-items:center;border:2px solid var(--ink);border-radius:10px;overflow:hidden;width:max-content}
.qty button{border:0;background:var(--yellow);width:38px;height:42px;font-size:1.2rem;cursor:pointer;font-weight:700}
.qty input{border:0;width:50px;text-align:center;border-radius:0;padding:8px 0}
.buy-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}
@media (max-width:860px){.pd{grid-template-columns:1fr;gap:20px;padding:20px 0}}

/* cart */
.cart-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;padding:30px 0 60px;align-items:start}
.cart-item{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:12px;margin-bottom:12px}
.cart-item img,.cart-item .ph{width:84px;height:64px;object-fit:cover;border-radius:8px;background:#f4f1e6}
.cart-item .rm{background:none;border:0;color:var(--err);cursor:pointer;font-size:.85rem;padding:0;margin-top:4px}
.summary{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:22px;position:sticky;top:96px;box-shadow:6px 6px 0 var(--sky)}
.summary .tot{display:flex;justify-content:space-between;font-family:var(--head);font-size:1.5rem;border-top:2px dashed var(--ink);padding-top:12px;margin-top:12px}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio-cards label{border:2px solid #c3dbe9;border-radius:10px;padding:12px;cursor:pointer;display:flex;gap:8px;align-items:center;font-weight:600}
.radio-cards input{width:auto}
.radio-cards label:has(input:checked){border-color:var(--ink);background:var(--yellow)}
@media (max-width:860px){.cart-grid{grid-template-columns:1fr}.summary{position:static}}
.empty{text-align:center;padding:60px 16px;background:#fff;border:2px dashed var(--ink);border-radius:16px}

/* maintenance */
.svc{display:flex;gap:14px;align-items:flex-start}
.svc .ic{font-size:1.8rem;background:var(--sky-l);border:2px solid var(--ink);border-radius:12px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc h3{margin-bottom:4px}
.svc p{margin:0;font-size:.92rem}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps div{counter-increment:s;background:var(--ink-2);border:2px solid var(--sky);border-radius:14px;padding:18px;position:relative}
.steps div::before{content:counter(s);font-family:var(--head);font-size:2.4rem;color:var(--yellow);display:block;line-height:1}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.form-card{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:26px;box-shadow:8px 8px 0 var(--sky)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}

/* tracking timeline */
.track-box{max-width:760px;margin:0 auto}
.ticket{background:#fff;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:8px 8px 0 var(--sky)}
.ticket .top{background:var(--sky);color:#fff;padding:18px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.ticket .top .code{font-family:var(--head);font-size:1.6rem;color:#fff;letter-spacing:2px;text-shadow:2px 2px 0 var(--ink)}
.ticket .cur{background:var(--yellow);padding:18px 22px;display:flex;gap:14px;align-items:center;border-bottom:3px solid var(--ink)}
.ticket .cur .ic{font-size:2.4rem}
.ticket .cur b{font-family:var(--head);font-size:1.5rem;text-transform:uppercase;display:block}
.ticket .inner{padding:22px}
.progress{display:flex;gap:4px;margin:6px 0 20px}
.progress span{flex:1;height:10px;border-radius:4px;background:var(--line)}
.progress span.done{background:var(--sky)}
.progress span.now{background:var(--yellow);border:2px solid var(--ink)}
.flow{list-style:none;padding:0;margin:0;position:relative}
.flow li{display:flex;gap:14px;padding:0 0 18px;position:relative;opacity:.4}
.flow li::before{content:'';position:absolute;left:17px;top:36px;bottom:0;width:2px;background:#ddd}
.flow li:last-child::before{display:none}
.flow li .dot{width:36px;height:36px;border-radius:50%;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff}
.flow li.done,.flow li.now{opacity:1}
.flow li.done .dot{background:var(--sky);border-color:var(--sky)}
.flow li.done::before{background:var(--sky)}
.flow li.now .dot{background:var(--yellow);border-color:var(--ink);box-shadow:0 0 0 5px rgba(255,199,44,.4);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(255,199,44,.1)}}
.flow li .when{font-size:.8rem;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}

/* about */
.story{font-size:1.08rem;max-width:760px}
.story p{margin:0 0 1em}
.timeline-about{border-left:4px solid var(--sky);padding-left:22px;margin:24px 0}
.timeline-about div{position:relative;margin-bottom:22px}
.timeline-about div::before{content:'';position:absolute;left:-33px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.timeline-about b{font-family:var(--head);font-size:1.2rem;display:block}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photos img{aspect-ratio:1;object-fit:cover;border-radius:12px;border:3px solid var(--sky)}
.photos .ph{aspect-ratio:1;border-radius:12px;border:3px dashed var(--sky);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;background:#fff;color:var(--muted);font-size:.9rem}
@media (max-width:600px){.photos{grid-template-columns:1fr 1fr}}

/* flash / alerts */
.flash{padding:12px 16px;border-radius:10px;margin:16px 0;border:2px solid;font-weight:600}
.flash.ok{background:#e8f7ee;border-color:var(--ok);color:#0e5c32}
.flash.err{background:#fdecea;border-color:var(--err);color:#8c1d13}

/* footer */
footer.site{background:var(--ink);color:#d6e4ef;padding:48px 0 24px;border-top:6px solid transparent;border-image:var(--stripe) 1;margin-top:40px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer.site h4{color:var(--yellow);font-size:1rem}
footer.site a{color:#d6e4ef;text-decoration:none;display:block;padding:3px 0}
footer.site a:hover{color:var(--yellow)}
footer.site .bottom{border-top:1px solid #234b70;margin-top:28px;padding-top:16px;font-size:.85rem;color:#999;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:500px){footer.site .cols{grid-template-columns:1fr}}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25);border:3px solid #fff}
.wa-float svg{width:32px;height:32px;fill:#fff}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;border-left:6px solid var(--yellow);padding:12px 20px;border-radius:10px;font-weight:700;z-index:70;transition:transform .25s;max-width:calc(100% - 32px)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* tables (portal + admin) */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:2px solid var(--ink);border-radius:12px;overflow:hidden;font-size:.92rem}
.tbl th{background:var(--sky);color:#fff;text-align:left;font-family:var(--head);text-transform:uppercase;font-weight:500;letter-spacing:.5px;padding:10px 12px}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--sky-l)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-flex;gap:4px;align-items:center;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700;background:#eee;white-space:nowrap}
.pill.requested{background:#e9e4ff}.pill.received{background:#dcefff}.pill.diagnosing{background:#fff1c7}
.pill.waiting_parts{background:#ffe2c7}.pill.repairing{background:#ffd9a8}.pill.ready{background:#c9f2d8}
.pill.delivered{background:#e0e0e0}.pill.cancelled{background:#f8d0cb}
.pill.new{background:var(--yellow)}.pill.confirmed{background:#dcefff}.pill.delivering{background:#ffe2c7}.pill.completed{background:#c9f2d8}

/* admin */
.admin-body{background:var(--paper)}
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.admin-side{background:var(--ink);color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh}
.admin-side .logo{color:#fff;margin-bottom:24px}
.admin-side a.nav{display:block;padding:10px 12px;border-radius:8px;color:#ddd;text-decoration:none;font-weight:600;margin-bottom:2px}
.admin-side a.nav:hover,.admin-side a.nav.on{background:var(--sky);color:#fff}
.admin-main{padding:24px;min-width:0}
.admin-main h1{font-size:2rem}
.stat{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:18px}
.stat b{font-family:var(--head);font-size:2.4rem;display:block;line-height:1}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input,.toolbar select{width:auto}
@media (max-width:860px){.admin-shell{grid-template-columns:1fr}.admin-side{position:static;height:auto;display:flex;flex-wrap:wrap;gap:4px;align-items:center}.admin-side .logo{margin:0 12px 0 0;width:100%}.admin-main{padding:16px}}
.thumb{width:56px;height:42px;object-fit:cover;border-radius:6px;background:#eee}
.panel{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:20px;margin-bottom:20px}
@media (max-width:600px){.strip .wrap>span:first-child{display:none}.strip .wrap{justify-content:center}}
.logo-img{height:58px;width:auto;max-width:240px;object-fit:contain;display:block}
.logo-img.ar{height:64px}
footer.site .logo-img{height:64px}.admin-side .logo-img{height:46px;max-width:190px}
@media (max-width:600px){.logo-img{height:44px;max-width:170px}.logo-img.ar{height:50px}}

.dark .tile h3{color:var(--yellow)}
.logo .t1{color:var(--yellow)}
header.site .logo,.hero{color:#fff}
.ticket .top .sub{color:rgba(255,255,255,.9)}
.pcard .img img.laptop-ph,.pd .gallery img.laptop-ph{width:58%;height:auto;object-fit:contain}

/* ---------- language button ---------- */
.lang-btn{background:var(--yellow);color:var(--ink)!important;padding:3px 10px;border-radius:999px;font-weight:700;text-decoration:none;margin-inline-start:6px;white-space:nowrap}

/* ---------- "Tarhini comes to you" ---------- */
.ctu{background:linear-gradient(180deg,#fff 0,var(--sky-l) 100%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-image:var(--stripe) 1}
.ctu-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.ctu .kicker{display:inline-block;background:var(--red);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:1.5px;padding:6px 12px;border-radius:6px;margin-bottom:10px;font-size:.9rem}
.ctu h2{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--sky-d)}
.ctu .lead{font-size:1.08rem;max-width:560px}
.fees{background:#fff;border:2px solid var(--ink);border-radius:14px;overflow:hidden;max-width:440px;box-shadow:5px 5px 0 var(--yellow)}
.fees-head{background:var(--yellow);font-weight:800;padding:10px 14px;border-bottom:2px solid var(--ink)}
.fees-row{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px dashed var(--line)}
.fees-row b{color:var(--red);font-family:var(--head);font-size:1.15rem}
.ctu-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:c}
.ctu-steps li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:16px;box-shadow:5px 5px 0 var(--sky);position:relative;counter-increment:c}
.ctu-steps li::after{content:counter(c);position:absolute;top:10px;inset-inline-end:14px;font-family:var(--head);font-size:2rem;color:var(--sky);opacity:.35}
.ctu-steps .ic{font-size:1.7rem;background:var(--sky-l);border:2px solid var(--sky);border-radius:12px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ctu-steps h3{margin:2px 0 4px} .ctu-steps p{margin:0;font-size:.92rem;color:var(--muted)}
@media (max-width:860px){.ctu-grid{grid-template-columns:1fr}}

/* ---------- booking form ---------- */
.step-label{display:flex;align-items:center;gap:8px;font-family:var(--head);text-transform:uppercase;font-size:1.05rem;margin-bottom:10px}
.step-label>span:first-child{background:var(--red);color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem}
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice-cards input{position:absolute;opacity:0;pointer-events:none}
.choice-cards label{margin:0;cursor:pointer;position:relative}
.choice-cards .cc{display:flex;flex-direction:column;gap:4px;border:2px solid #c3dbe9;border-radius:14px;padding:16px;height:100%;transition:.15s;background:#fff}
.choice-cards .cc-ic{font-size:2rem}
.choice-cards small{color:var(--muted);font-weight:500}
.choice-cards input:checked+.cc{border-color:var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}
.choice-cards input:focus-visible+.cc{outline:3px solid var(--sky)}
@media (max-width:600px){.choice-cards{grid-template-columns:1fr}}
.note{background:var(--sky-l);border-inline-start:5px solid var(--sky);padding:10px 14px;border-radius:8px;font-size:.9rem;margin:0 0 14px}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;min-height:44px;align-items:center}
.slot{border:2px solid var(--sky);background:#fff;color:var(--ink);border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;font:inherit;font-weight:700}
.slot:hover:not(:disabled){background:var(--sky-l)}
.slot.on{background:var(--sky);color:#fff;border-color:var(--sky-d)}
.slot:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.appt{display:flex;gap:12px;align-items:center;background:var(--sky-l);border:2px dashed var(--sky);border-radius:12px;padding:12px 14px;margin-bottom:18px}
.appt-ic{font-size:1.8rem}

/* ---------- Arabic / RTL ---------- */
[dir=rtl] body{font-family:'Cairo',var(--body)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .btn,[dir=rtl] nav.main a,[dir=rtl] .icon-btn,[dir=rtl] .kicker,[dir=rtl] .badge,[dir=rtl] .step-label,[dir=rtl] .tbl th,[dir=rtl] .filters .seg a,[dir=rtl] .ticket .cur b{font-family:'Cairo',var(--head);letter-spacing:0}
[dir=rtl] h1,[dir=rtl] h2{font-weight:800}
[dir=rtl] .hero h1 .big{text-align:right}
[dir=rtl] .flow li::before{left:auto;right:17px}
[dir=rtl] .timeline-about{border-left:0;border-right:4px solid var(--sky);padding-left:0;padding-right:22px}
[dir=rtl] .timeline-about div::before{left:auto;right:-33px}
[dir=rtl] .tbl th{text-align:right}
[dir=rtl] .wa-float{right:auto;left:18px}
[dir=rtl] .hero-card .stamp{right:auto;left:-12px;transform:rotate(-8deg)}
[dir=rtl] .pcard .badges{left:auto;right:10px}
[dir=rtl] .cat .num{right:auto;left:14px} [dir=rtl] .cat .go{right:auto;left:20px}
[dir=rtl] .ctu-steps li::after{inset-inline-end:14px}
.slot.on,.slot.on:hover{background:var(--sky)!important;color:#fff;border-color:var(--sky-d)}
.fees-row{align-items:center;gap:10px}
.fees-foot{background:var(--sky-l);padding:10px 14px;font-size:.85rem;border-top:2px solid var(--ink)}

/* ---------- offers box (top of home page) ---------- */
.offers{padding:22px 0 6px;background:var(--paper)}
.offers-box{background:var(--brand-grad);border:3px solid var(--ink);border-radius:20px;padding:20px;box-shadow:8px 8px 0 var(--red);color:#fff;position:relative;overflow:hidden}
.offers-box::after{content:'%';position:absolute;inset-inline-end:-10px;top:-40px;font-family:var(--head);font-size:12rem;color:rgba(255,255,255,.08);pointer-events:none}
.offers-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px;position:relative;z-index:1}
.offers-head .kicker{display:inline-block;background:var(--red);color:#fff;font-family:var(--head);text-transform:uppercase;letter-spacing:1.5px;padding:5px 12px;border-radius:6px;font-size:.85rem;margin-bottom:6px}
.offers-head h2{color:var(--yellow);margin:0;text-shadow:2px 2px 0 var(--ink)}
.offers-head p{margin:4px 0 0;color:#e8f4fb}
.offers-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,270px);justify-content:start;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;position:relative;z-index:1}
.offer{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;scroll-snap-align:start}
.offer-img{aspect-ratio:16/10;background:var(--sky-l);display:flex;align-items:center;justify-content:center;position:relative}
.offer-img img{width:100%;height:100%;object-fit:cover}
.offer-img img.laptop-ph{width:55%;height:auto;object-fit:contain}
.offer-pct{position:absolute;top:8px;inset-inline-end:8px;background:var(--red);color:#fff;font-family:var(--head);font-size:1.3rem;padding:4px 10px;border-radius:10px;border:2px solid #fff;transform:rotate(6deg)}
.offer-cond{position:absolute;top:8px;inset-inline-start:8px}
.offer-body{padding:12px;display:flex;flex-direction:column;gap:5px;flex:1}
.offer-body .t{font-weight:700;text-decoration:none;line-height:1.3}
.offer-body .specs{font-size:.8rem;color:var(--muted)}
.offer-body .price{margin-top:auto}
.offer-tag{background:var(--yellow);border:1px solid var(--ink);border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:700;width:max-content;max-width:100%}
@media (max-width:600px){.offers-box{padding:14px;box-shadow:5px 5px 0 var(--red)}.offers-row{grid-auto-columns:78%}}

/* ---------- side notice: WhatsApp number changed ---------- */
.wa-notice{position:fixed;z-index:59;bottom:92px;inset-inline-end:18px;width:250px;background:#fff;border:3px solid var(--ink);border-inline-start:8px solid var(--red);border-radius:14px;padding:12px 14px;box-shadow:6px 6px 0 var(--yellow);font-size:.88rem}
.wa-notice b{display:block;color:var(--red);margin-bottom:4px}
.wa-notice p{margin:0 0 6px;color:var(--ink)}
.wa-notice-num{display:inline-block;background:#25d366;color:#fff;text-decoration:none;font-family:var(--head);font-size:1.25rem;padding:4px 12px;border-radius:8px;letter-spacing:1px}
.wa-notice-x{position:absolute;top:-14px;inset-inline-end:-14px;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;border:3px solid #fff;font-size:1.25rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;padding:0}
.wa-notice-x:hover{background:var(--red-d)}
.wa-notice-x:focus-visible{outline:3px solid var(--sky)}
.wa-notice-tab{display:none}
.wa-notice.min{width:auto;padding:0;border-width:2px;bottom:92px;box-shadow:3px 3px 0 var(--yellow)}
.wa-notice.min>*:not(.wa-notice-tab){display:none}
.wa-notice.min .wa-notice-tab{display:block;background:var(--yellow);border:0;font-size:1.4rem;padding:8px 10px;cursor:pointer;border-radius:10px}
@media (max-width:600px){.wa-notice{width:auto;inset-inline-start:12px;inset-inline-end:84px;bottom:14px;font-size:.82rem;padding:10px 12px}.wa-notice.min{inset-inline-start:auto;inset-inline-end:84px}}

/* ---------- shop tabs ---------- */
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:10px;scrollbar-width:thin}
.cat-tabs a{flex-shrink:0;display:inline-flex;gap:6px;align-items:center;text-decoration:none;font-weight:700;padding:10px 16px;border:2px solid var(--ink);border-radius:12px;background:#fff;white-space:nowrap}
.cat-tabs a .n{background:var(--sky-l);color:var(--sky-d);border-radius:999px;font-size:.75rem;padding:1px 8px}
.cat-tabs a:hover{background:var(--sky-l)}
.cat-tabs a.on{background:var(--sky);border-color:var(--sky-d);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.cat-tabs a.on .n{background:var(--yellow);color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chips a{text-decoration:none;padding:6px 14px;border-radius:999px;border:2px solid var(--sky);font-weight:600;font-size:.9rem;background:#fff}
.chips a.on{background:var(--yellow);border-color:var(--ink)}
/* category tiles on home */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cat2{display:flex;flex-direction:column;gap:4px;text-decoration:none;border:3px solid var(--ink);border-radius:18px;padding:20px;min-height:150px;position:relative;transition:transform .15s;background:#fff}
.cat2:hover{transform:translateY(-4px)}
.cat2 .ic{font-size:2.2rem}
.cat2 b{font-family:var(--head);text-transform:uppercase;font-size:1.35rem;line-height:1.1}
[dir=rtl] .cat2 b{font-family:'Cairo',var(--head);font-weight:800}
.cat2 small{opacity:.85}
.cat2 .go{margin-top:auto;font-weight:700;font-size:.9rem}
.cat2.c0{background:var(--ink);color:#fff}.cat2.c0 b{color:var(--yellow)}
.cat2.c1{background:var(--brand-grad);color:#fff}
.cat2.c2{background:var(--yellow)}
.cat2.c3{background:#fff;box-shadow:5px 5px 0 var(--sky)}
.cat2.c4{background:var(--sky-l)}
.cat2.cm{background:var(--red);color:#fff;border-color:var(--red-d)}
@media (max-width:860px){.cat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cat-grid{gap:10px}.cat2{padding:14px;min-height:130px}.cat2 b{font-size:1.1rem}.cat2 small{display:none}}
nav.main a{font-size:.95rem;padding:8px 9px}

nav.main a{white-space:nowrap}
.ph-icon{font-size:4.5rem;filter:drop-shadow(3px 3px 0 rgba(21,103,177,.25))}

/* ---------- about page ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats>div{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:18px;text-align:center;box-shadow:5px 5px 0 var(--sky)}
.stats>div:nth-child(2){box-shadow:5px 5px 0 var(--yellow)}.stats>div:nth-child(3){box-shadow:5px 5px 0 var(--red)}
.stats b{display:block;font-family:var(--head);font-size:2.6rem;color:var(--sky-d);line-height:1.1}
.stats span{font-weight:600;font-size:.92rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.story h2{color:var(--sky-d)}
.quote{margin:24px 0 0;background:var(--sky-l);border-inline-start:6px solid var(--red);border-radius:12px;padding:18px 20px}
.quote p{margin:0 0 8px;font-size:1.08rem;font-weight:600;font-style:italic}
.quote cite{font-style:normal;color:var(--sky-d);font-weight:700}
.values{display:grid;gap:12px}
.values>div{display:grid;grid-template-columns:52px 1fr;column-gap:12px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:14px;box-shadow:4px 4px 0 var(--sky)}
.values span{grid-row:span 2;font-size:1.6rem;background:var(--yellow);border:2px solid var(--ink);border-radius:12px;width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.values b{font-size:1.05rem}.values p{margin:2px 0 0;font-size:.9rem;color:var(--muted)}
[dir=rtl] .burger{margin-left:0;margin-right:auto}

/* ---------- new identity tweaks ---------- */
.hero h1{text-shadow:none}
.logo .t1,.logo .t2{display:none}
.about-logo{background:#fff;border-radius:24px;padding:28px;box-shadow:0 18px 40px rgba(0,0,0,.25);max-width:380px;margin:0 auto}
.about-logo img{width:100%;max-height:300px;object-fit:contain;margin:0 auto}
.ph-icon{filter:drop-shadow(3px 3px 0 rgba(21,84,201,.2))}
.icon-btn{white-space:nowrap}
@media (max-width:1420px){.icon-btn .lbl{display:none}}

/* ---------- free diagnosis & consultations ---------- */
.free-box{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;background:var(--brand-grad);color:#fff;border-radius:22px;padding:32px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--yellow)}
.free-box .kicker{display:inline-block;background:var(--yellow);color:var(--ink);font-family:var(--head);text-transform:uppercase;letter-spacing:1.5px;padding:5px 12px;border-radius:6px;font-size:.85rem;margin-bottom:8px}
.free-box h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.free-box .lead{color:#dfe7f7;font-size:1.06rem}
.free-motto{border-inline-start:5px solid var(--red);padding:6px 14px;margin:14px 0 20px;font-weight:700;color:var(--yellow);font-size:1.05rem}
.free-list{display:grid;gap:12px}
.free-list>div{display:grid;grid-template-columns:48px 1fr;column-gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px}
.free-list span{grid-row:span 2;font-size:1.5rem;background:#fff;border-radius:12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.free-list b{color:#fff}.free-list p{margin:2px 0 0;color:#c9d6ee;font-size:.9rem}
@media (max-width:860px){.free-box{grid-template-columns:1fr;padding:22px}}

/* ---------- reviews ---------- */
.reviews .kicker{display:inline-block;background:var(--sky-l);color:var(--sky);font-weight:800;padding:4px 12px;border-radius:999px;font-size:.85rem;margin-bottom:6px}
.g-rating{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.g-rating b{font-family:var(--head);font-size:2rem;color:var(--ink)}
.stars{color:var(--yellow);letter-spacing:2px;font-size:1.15rem;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.stars .off{color:#d5dbe7}
.g-logo{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285F4;font:700 .95rem/1 Arial,sans-serif;border:1px solid var(--line)}
.g-logo.sm{width:16px;height:16px;font-size:.7rem}
.rev-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.rev{margin:0;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:5px 5px 0 var(--sky)}
.rev blockquote{margin:0;flex:1;line-height:1.6}
.rev figcaption{display:flex;gap:10px;align-items:center}
.rev figcaption small{display:flex;gap:4px;align-items:center;color:var(--muted)}
.rev figcaption>span:last-child{display:flex;flex-direction:column}
.av{width:38px;height:38px;border-radius:50%;background:var(--sky);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rev-cta{margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:#fff;border:3px dashed var(--red);border-radius:18px;padding:18px 22px}
.rev-cta .pct{background:var(--red);color:#fff;border-radius:16px;padding:12px 16px;text-align:center;font-family:var(--head);font-size:2.4rem;line-height:1;transform:rotate(-4deg)}
.rev-cta .pct small{display:block;font-size:.9rem;letter-spacing:2px}
.rev-cta h3{margin:0 0 4px;color:var(--ink)}
.rev-cta p{margin:0;color:var(--muted);font-size:.95rem}
.rev-cta .acts{display:flex;flex-direction:column;gap:8px}
@media (max-width:860px){.rev-cta{grid-template-columns:1fr;text-align:center}.rev-cta .pct{justify-self:center}}

/* ---------- admin: one-click repair steps ---------- */
.step-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.step-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border:2px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:.12s}
.step-btn span{font-size:1.5rem}.step-btn b{font-size:.88rem}.step-btn small{color:var(--muted);font-size:.78rem}
.step-btn:hover{border-color:var(--sky);background:var(--sky-l)}
.step-btn.on{border-color:var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.step-btn.cancelled:not(.on){opacity:.7}
@media (max-width:760px){.step-btns{grid-template-columns:1fr 1fr}}
.rev blockquote{white-space:pre-line}
.rev-row{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.rev-row{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(290px,340px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 8px 14px 2px;scrollbar-width:thin}
.rev{scroll-snap-align:start}
@media (max-width:600px){.rev-row{grid-auto-columns:85%}}

/* ---------- compact reviews ---------- */
.reviews.sec{padding:36px 0}
.reviews .sec-head{margin-bottom:14px}
.reviews h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:4px}
.rev-row{grid-auto-columns:minmax(220px,250px);gap:12px;padding-bottom:10px}
.rev{padding:12px 14px;gap:6px;border-width:1.5px;border-radius:12px;box-shadow:3px 3px 0 var(--sky)}
.rev .stars{font-size:.85rem;letter-spacing:1px}
.rev blockquote{font-size:.85rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rev figcaption b{font-size:.85rem}
.rev figcaption small{font-size:.72rem}
.av{width:28px;height:28px;font-size:.8rem}
.rev-cta{margin-top:14px;padding:12px 16px;gap:14px;border-width:2px}
.rev-cta .pct{font-size:1.7rem;padding:8px 12px;border-radius:12px}
.rev-cta .pct small{font-size:.7rem}
.rev-cta h3{font-size:1.05rem}
.rev-cta p{font-size:.85rem}
.rev-cta .btn{padding:8px 14px;font-size:.85rem}
@media (max-width:600px){.rev-row{grid-auto-columns:72%}}

/* ---------- address under the logo ---------- */
.brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex-shrink:0}
.logo-loc{font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.2px;white-space:nowrap;padding-inline-start:2px}
@media (max-width:600px){.logo-loc{font-size:.66rem}}

/* ---------- calmer hero headline ---------- */
.hero h1{font-size:clamp(1.6rem,3.2vw,2.5rem)}
.hero h1 .big{font-size:1.08em}

/* ---------- WhatsApp box (replaces appointment booking) ---------- */
.wa-box{background:#fff;border:3px solid #25d366;border-radius:20px;padding:30px;text-align:center;box-shadow:8px 8px 0 #128c4a}
.wa-box .kicker{display:inline-block;background:#e9fbf0;color:#0e7a3b;font-weight:800;padding:5px 14px;border-radius:999px;font-size:.85rem;margin-bottom:8px}
.wa-box h2{color:var(--ink)}
.wa-box p{max-width:620px;margin:0 auto 20px;color:var(--muted);font-size:1.05rem}

/* ---------- category illustrations & hover effects ---------- */
.cat2 b{font-size:1.75rem}
[dir=rtl] .cat2 b{font-size:1.6rem}
.cat2 .ill{display:block;height:86px;margin-bottom:4px}
.cat2 .ill svg{height:100%;width:auto;display:block;overflow:visible;transition:transform .3s}
.cat2{transition:transform .25s, box-shadow .25s}
.mini-ic{height:1.25em;width:auto;vertical-align:-.3em;display:inline-block}
.h1-ic{height:1.1em;width:auto;vertical-align:-.15em;margin-inline-end:8px;display:inline-block}
/* gaming: moving RGB glow, a little shake, keyboard lights flicker */
.k-gaming:hover,.k-gaming:focus-visible{transform:translateY(-4px);animation:rgbglow 1.2s linear infinite}
.k-gaming:hover .ill svg{animation:gshake .35s ease-in-out infinite}
.k-gaming:hover .kb{animation:kbflash .25s steps(2) infinite alternate}
.k-gaming:hover .kb2{animation-delay:.12s}
@keyframes rgbglow{0%{box-shadow:0 0 0 3px #E8262E,0 0 26px 4px rgba(232,38,46,.7)}33%{box-shadow:0 0 0 3px #FFC21A,0 0 26px 4px rgba(255,194,26,.7)}66%{box-shadow:0 0 0 3px #1554C9,0 0 26px 4px rgba(21,84,201,.8)}100%{box-shadow:0 0 0 3px #E8262E,0 0 26px 4px rgba(232,38,46,.7)}}
@keyframes gshake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-1.5deg)}75%{transform:translate(2px,-1px) rotate(1.5deg)}}
@keyframes kbflash{from{opacity:.35}to{opacity:1}}
/* office: calm lift, light sheen sweeps across, the lid tilts open, red pointer dot glows */
.k-office{position:relative;overflow:hidden}
.k-office::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-15deg);pointer-events:none}
.k-office:hover,.k-office:focus-visible{transform:translateY(-6px);box-shadow:0 18px 30px rgba(11,31,58,.28)}
.k-office:hover::after{animation:sheen 1s ease-out}
.k-office .lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s ease}
.k-office:hover .lid{transform:perspective(300px) rotateX(-14deg)}
.k-office:hover .ill svg{transform:scale(1.05)}
.k-office .tp{transition:r .3s, filter .3s}
.k-office:hover .tp{r:3.4;filter:drop-shadow(0 0 3px #E8262E)}
@keyframes sheen{to{left:130%}}
/* maintenance: the wrench turns like tightening a screw */
.k-repair .wrench{transform-box:fill-box;transform-origin:85% 15%}
.k-repair:hover,.k-repair:focus-visible{transform:translateY(-4px)}
.k-repair:hover .wrench{animation:turn .7s ease-in-out infinite alternate}
@keyframes turn{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}
@media (prefers-reduced-motion:reduce){.cat2,.cat2 *,.cat2::after{animation:none!important;transition:none!important}}
@media (max-width:480px){.cat2 b{font-size:1.2rem}.cat2 .ill{height:60px}}

/* ---------- product photo gallery ---------- */
.pgal{display:flex;flex-direction:column;gap:10px;min-width:0}
.pgal .gallery{position:relative}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(11,31,58,.75);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gnav.prev{left:10px}.gnav.next{right:10px}
.gnav:hover{background:var(--sky)}
.gcount{position:absolute;bottom:10px;right:12px;background:rgba(11,31,58,.75);color:#fff;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px}
.gthumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px}
.gthumbs button{flex:0 0 74px;height:58px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff}
.gthumbs button.on{border-color:var(--sky);box-shadow:0 0 0 2px var(--sky)}
.gthumbs img{width:100%;height:100%;object-fit:cover}
.adm-gallery{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.adm-ph{width:120px;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.adm-ph.main{border-color:var(--sky)}
.adm-ph img{width:100%;height:84px;object-fit:cover;display:block}
.adm-ph-acts{display:flex;gap:4px;justify-content:space-between;align-items:center;padding:5px}
.adm-ph-acts .btn{padding:3px 8px;font-size:.72rem}

/* ---------- free delivery badge ---------- */
.badge.fd{background:#25d366;color:#fff}
.offer-tag.fd{background:#e9fbf0;border-color:#25d366;color:#0e7a3b}

/* ---------- reviews: tap to read all ---------- */
.rev{cursor:pointer}
.rev.open blockquote{-webkit-line-clamp:unset;display:block}

/* ---------- consistent menu: every item = small icon + label, same size and font ---------- */
nav.main{gap:2px}
nav.main a{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;padding:8px 10px;white-space:nowrap;line-height:1}
.nav-ic{display:inline-flex;align-items:center;justify-content:center;height:24px;flex-shrink:0;color:var(--sky)}
.nav-ic svg{width:22px;height:22px;display:block}
.nav-ic img{height:24px;width:auto;display:block}
nav.main a.on .nav-ic{color:#fff}
nav.main a.on .nav-ic img{filter:drop-shadow(0 0 1px #fff)}
@media (max-width:1200px){nav.main a{font-size:1rem;padding:10px 12px}}
.logo-loc{white-space:nowrap}
@media (max-width:1460px) and (min-width:1201px){nav.main a{font-size:.84rem;padding:8px 6px;gap:5px}.nav-ic svg{width:19px;height:19px}.nav-ic img{height:21px}header.site .wrap{gap:12px}}

/* menu items never shrink or get clipped; the logo gives way instead */
nav.main a{flex-shrink:0}
nav.main{min-width:0}
@media (max-width:1460px) and (min-width:1201px){.logo-img{height:50px;max-width:190px}.logo-loc{font-size:.68rem}.icon-btn{padding:9px 12px}}
.shop-note{background:#FFF7DD;border:2px solid var(--yellow);border-inline-start:6px solid var(--yellow);border-radius:12px;padding:12px 16px;margin-bottom:18px}
.shop-note b{display:block;color:var(--ink);margin-bottom:4px}
.shop-note p{margin:0;white-space:pre-line;font-size:1.02rem}

/* ---------- home on phones: simpler and better ordered ---------- */
.home-flow{display:flex;flex-direction:column}
@media (max-width:700px){
  .home-flow .h-offers{order:1}
  .home-flow .h-hero{order:2}
  .home-flow .h-cats{order:3}
  .home-flow .h-reviews{order:4}
  .home-flow>*{order:5}
  .h-hero .wrap{padding-top:22px;padding-bottom:24px;gap:0}
  .h-hero .kicker,.h-hero .hero-card,.h-hero .h-track{display:none}
  .h-hero h1{font-size:1.45rem;margin-bottom:8px}
  .h-hero h1 .big{font-size:1.15em}
  .h-hero .lead{font-size:.95rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .h-hero .ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .h-hero .ctas .btn{padding:11px 8px;font-size:.88rem;width:100%}
  .h-hero .h-wa{background:#25d366;border-color:#128c4a;color:#fff}
  .offers{padding-top:14px}
  .offers-box h2{font-size:1.35rem}
  .offers-box p{font-size:.88rem}
  .h-cats .sec{padding:26px 0}
  .h-cats h2{font-size:1.35rem}
}

/* ---------- hero: headline + small animated drawing (calm, minimal) ---------- */
.hero .wrap{grid-template-columns:1.25fr .75fr}
.hero-art{display:flex;align-items:center;justify-content:center}
.scene{width:100%;max-width:340px;height:auto;overflow:visible;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.scene .drop{animation:fall 1.6s ease-in infinite;opacity:0}
.scene .d2{animation-delay:.5s}.scene .d3{animation-delay:1s}
@keyframes fall{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(98px)}}
.scene .mug{transform-box:fill-box;transform-origin:20% 80%;animation:tilt 3.2s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-38deg)}}
.scene .puddle{transform-box:fill-box;transform-origin:center;animation:puddle 3.2s ease-in-out infinite}
@keyframes puddle{0%,20%{transform:scale(0)}80%,100%{transform:scale(1)}}
.scene .crack{stroke-dasharray:160;stroke-dashoffset:160;animation:crack 3s ease-out infinite}
@keyframes crack{0%{stroke-dashoffset:160}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.scene .spark{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}
.scene .s2{animation-delay:.6s}.scene .s3{animation-delay:1.2s}
@keyframes twinkle{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.1);opacity:1}}
.scene .tag{transform-box:fill-box;transform-origin:center;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.scene .steam{animation:steam 2.4s ease-in-out infinite;opacity:0}
.scene .t2{animation-delay:.8s}.scene .t3{animation-delay:1.6s}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-14px)}}
.scene .spin{transform-box:fill-box;transform-origin:center;animation:spin 3.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene .bar{transform-box:fill-box;transform-origin:left;animation:crawl 6s ease-in-out infinite}
@keyframes crawl{0%{transform:scaleX(.05)}90%,100%{transform:scaleX(.35)}}
.scene .charge{transform-box:fill-box;transform-origin:left;animation:drain 3s ease-in infinite}
@keyframes drain{0%{transform:scaleX(1);fill:#25d366}60%{fill:#FFC21A}100%{transform:scaleX(.08);fill:#E8262E}}
.scene .key{transform-box:fill-box;animation:pop 1.2s ease-in-out infinite}
.scene .k2{animation-delay:.4s}.scene .k3{animation-delay:.8s}
@keyframes pop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px) rotate(-12deg)}}
.scene .rgb{animation:rgb 1.5s linear infinite}
@keyframes rgb{0%{fill:#E8262E}33%{fill:#FFC21A}66%{fill:#1554C9}100%{fill:#E8262E}}
.scene .cap{transform-box:fill-box;transform-origin:center bottom;animation:bob 1.8s ease-in-out infinite}
.scene .bang{transform-box:fill-box;transform-origin:center;animation:pulse2 1.2s ease-in-out infinite}
@keyframes pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.scene .ring{transform-box:fill-box;transform-origin:center;animation:ring .9s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important;opacity:1!important}}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-art{order:-1}.scene{max-width:220px}}
@media (max-width:700px){.h-hero .hero-art{display:flex}.h-hero .scene{max-width:150px;margin-bottom:6px}}

/* ---------- clean, calm shop ---------- */
.pcard{border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,31,58,.04)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,31,58,.10)}
.pcard .img{background:#F3F6FB}
.pcard .body{padding:14px 16px 16px;gap:4px}
.pcard .t{font-size:1rem}
.pcard .btn.sm{border-width:0;border-radius:999px;padding:8px 14px}
.pcard .btn.sm:hover{box-shadow:none;transform:none;filter:brightness(1.08)}
.shop-h1{font-size:clamp(1.6rem,3vw,2.2rem)!important;display:flex;align-items:center;gap:10px}
.h1-ic{height:1.4em}
.cat-tabs a{border:1px solid var(--line);font-weight:600;padding:9px 14px;border-radius:999px;background:#fff}
.cat-tabs a.on{border-color:var(--sky);box-shadow:none}
.chips a{border:1px solid var(--line)}
.filters{border:1px solid var(--line);box-shadow:none;padding:10px}
.filters .seg{border:1px solid var(--line)}
.filters input,.filters select{border:1px solid var(--line)}
.filters .btn{border-width:0}
.h-hero .h-track{display:none}
.h-hero .lead{font-size:1.1rem;opacity:.9}

/* ---------- spare parts ---------- */
.parts-head{margin-bottom:18px}
.parts-head .kicker{display:inline-block;background:var(--sky-l);color:var(--sky);font-weight:800;padding:4px 12px;border-radius:999px;font-size:.85rem;margin-bottom:6px}
.parts-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:6px}
.parts-head p{max-width:640px;margin:0}
.parts-form{border:1px solid var(--line);box-shadow:0 10px 30px rgba(11,31,58,.06)}
.part-chips{display:flex;flex-wrap:wrap;gap:8px}
.part-chip{margin:0;cursor:pointer}
.part-chip input{position:absolute;opacity:0;pointer-events:none}
.part-chip span{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:.92rem;transition:.12s}
.part-chip:hover span{border-color:var(--sky)}
.part-chip input:checked+span{background:var(--sky);border-color:var(--sky);color:#fff}
.part-chip input:focus-visible+span{outline:3px solid var(--yellow)}
.parts-send{display:flex;gap:10px;flex-wrap:wrap}
.parts-send .btn{flex:1;min-width:200px}
.tab-parts{background:var(--yellow)!important;border-color:var(--yellow)!important}
.part-chip{position:relative}
.part-chip input{width:1px;height:1px;margin:0;inset:0}
@media (max-width:1500px) and (min-width:1201px){nav.main a{font-size:.8rem;padding:7px 5px;gap:4px}.nav-ic svg{width:17px;height:17px}.nav-ic img{height:18px}header.site .wrap{gap:8px}.icons{gap:6px}.icon-btn{padding:8px 11px}}
header.site .wrap{max-width:1400px}
@media (min-width:1501px){nav.main a{font-size:.86rem;padding:8px 7px;gap:5px}.nav-ic svg{width:19px;height:19px}.nav-ic img{height:21px}header.site .wrap{gap:12px}}

/* ---------- simpler, bigger menu with drop-downs ---------- */
@media (min-width:1201px){
  nav.main{gap:4px;align-items:center}
  nav.main a,nav.main .dd-top{font-size:1.02rem!important;padding:10px 14px!important;gap:8px!important;border-radius:10px}
  .nav-ic svg{width:23px!important;height:23px!important}
  .dd{position:relative}
  .dd .caret{font-size:.75em;opacity:.7;margin-inline-start:-2px}
  .dd-menu{position:absolute;top:100%;inset-inline-start:0;min-width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(11,31,58,.16);padding:8px;display:none;flex-direction:column;gap:4px;z-index:60}
  .dd::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:flex;margin-top:6px}
}
.dd-menu a{text-transform:none!important;font-family:var(--body)!important;letter-spacing:0!important}
.dd-item{display:flex!important;align-items:center;gap:12px!important;padding:10px 12px!important;border-radius:10px;color:var(--ink)!important;white-space:normal!important}
.dd-item:hover{background:var(--sky-l)!important;color:var(--ink)!important}
.dd-item img{width:54px;height:auto;flex-shrink:0}
.dd-item b{display:block;font-size:.98rem}
.dd-item small{display:block;color:var(--muted);font-size:.8rem;line-height:1.3;font-weight:500}
.dd-gaming{background:#0B1F3A!important}.dd-gaming b{color:#FFC21A}.dd-gaming small{color:#c9d6ee}
.dd-gaming:hover{background:#132C52!important}
.dd-ic{font-size:1.5rem;width:54px;text-align:center;flex-shrink:0}
.dd-all{font-size:.88rem!important;color:var(--sky)!important;padding:8px 12px!important;font-weight:700}
/* phones/tablets (☰ menu): show the sub-items right under their heading */
@media (max-width:1200px){
  .dd{display:flex;flex-direction:column}
  .dd .caret{display:none}
  .dd-menu{display:flex;flex-direction:column;gap:2px;padding:0 0 6px;padding-inline-start:22px}
  .dd-item small{display:none}
  .dd-item img{width:38px}
  .dd-ic{font-size:1.2rem;width:38px}
  .dd-gaming{background:none!important}.dd-gaming b{color:var(--ink)}
}

/* ---------- "Track my order" under the cart ---------- */
.cart-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.track-order{font-size:.72rem;font-weight:700;color:var(--sky);text-decoration:none;white-space:nowrap;line-height:1}
.track-order:hover{text-decoration:underline}
.ot-row{display:flex;gap:10px;flex-wrap:wrap}
.ot-row input{flex:1;min-width:220px;font-size:1.1rem}
.ot-list{display:grid;gap:12px;margin-top:20px}
.ot-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:.15s}
.ot-card:hover{box-shadow:0 10px 24px rgba(11,31,58,.1);transform:translateY(-2px)}
.ot-top,.ot-bot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ot-bot b{font-family:var(--head);font-size:1.2rem;color:var(--red)}
.save-code{background:#FFF7DD;border:2px solid var(--yellow);border-radius:14px;padding:14px 18px;margin:12px auto 14px;max-width:420px}
.big-code{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0}
.big-code b{font-family:var(--head);font-size:2rem;letter-spacing:2px;color:var(--ink)}
.save-warn{font-weight:700;color:var(--red-d);font-size:.95rem}

/* ---------- follow us (quiet) ---------- */
.social{display:inline-flex;gap:8px;align-items:center;vertical-align:middle}
.soc{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;text-decoration:none;transition:.15s}
.soc svg{width:100%;height:100%}
.social-sm{margin-inline-start:10px;gap:6px}
.social-sm .soc{width:17px;height:17px;color:#9fb3cf;padding:0}
.social-sm .soc:hover{color:#fff}
.follow{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.follow>span{font-size:.85rem;color:#9fb3cf}
.social-lg .soc{width:36px;height:36px;padding:8px;background:rgba(255,255,255,.08);color:#d6e4ef;display:inline-flex!important}
.social-lg .soc:hover{background:var(--sky);color:#fff}
@media (max-width:600px){.social-sm{display:none}}