/* PWP v4 — control panel. Loaded last on every page (after ui.css).
   The header and footer are a dark instrument console; every group of choices is a segmented control with a
   sliding thumb (pwp-ui.js); keys sink when pressed and spring back on release. Light grey working surfaces.
   Arabic: Changa for headings, keys and labels; Noto Sans Arabic for reading text. Visual rules only. */
:root:not(#_){
  --paper:#E8EBEF; --surface:#F6F8FA; --panel:#FFFFFF; --line:#C9CFD7; --line2:#DDE2E8; --graphite:#14171B; --steel:#5D6672;
  --red:#C8141F; --red2:#A00F18; --red-deep:#A00F18; --green:#1F6F4A; --amber:#8A6515;
  --gold:#8A6515; --gold-bg:#F4ECD8; --gold-ln:#E0CFA3; --pur:#5A3DC8; --pur-bg:#EEEBFA; --pur-ln:#D3CAF3;
  --ink2:#2A2F37; --soft:#EEF1F4; --led:#FF2A36;
  --con:#14171B; --con2:#0F1216; --con-line:#262B33; --con-key:#1B1F26; --con-key2:#252A33; --con-ink:#AAB3BF;
  --ui-red-dk:#8E0E16; --ui-edge:#B9C1CB;
  --r:8px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --fd:'Saira Condensed','Changa',system-ui,sans-serif;
  --fb:'IBM Plex Sans','Noto Sans Arabic',system-ui,sans-serif;
  --font-display:var(--fd); --font-body:var(--fb);
  --far:'Changa','Noto Sans Arabic',system-ui,sans-serif;
  --i-home:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2010.2%2012%203.5l8.5%206.7V20a.8.8%200%200%201-.8.8H15v-6H9v6H4.3a.8.8%200%200%201-.8-.8z'/%3E%3C/svg%3E");
  --i-store:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.6%208.2%205%203.9A1.3%201.3%200%200%201%206.2%203h11.6a1.3%201.3%200%200%201%201.2.9l1.4%204.3'/%3E%3Cpath%20d='M3.5%208.2h17v1.3a2.8%202.8%200%200%201-5.6%200%202.8%202.8%200%200%201-5.6%200%202.8%202.8%200%200%201-5.8%200z'/%3E%3Cpath%20d='M5%2012v7.5A1.5%201.5%200%200%200%206.5%2021h11a1.5%201.5%200%200%200%201.5-1.5V12'/%3E%3Cpath%20d='M10%2021v-4.5a2%202%200%200%201%204%200V21'/%3E%3C/svg%3E");
  --i-faq:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9.3%209.3a2.8%202.8%200%201%201%203.9%202.6c-.8.4-1.2%201-1.2%201.8v.5'/%3E%3Cpath%20d='M12%2017.2h.01'/%3E%3C/svg%3E");
  --i-contact:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%2011.6a8.6%208.6%200%200%201-12.5%207.7L3.2%2020.8l1.5-4.8A8.6%208.6%200%201%201%2020.8%2011.6z'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4.2'/%3E%3Cpath%20d='M4%2020.5c0-3.9%203.6-6%208-6s8%202.1%208%206'/%3E%3C/svg%3E");
  --i-bag:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%208h14l-1.2%2012.2H6.2z'/%3E%3Cpath%20d='M9%208V6.5a3%203%200%200%201%206%200V8'/%3E%3C/svg%3E");
  --i-doc:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203H6.5A1.5%201.5%200%200%200%205%204.5v15A1.5%201.5%200%200%200%206.5%2021h11a1.5%201.5%200%200%200%201.5-1.5V8z'/%3E%3Cpath%20d='M14%203v5h5'/%3E%3Cpath%20d='M8.5%2013h7M8.5%2016.5h5'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.2%2019%206v5.6c0%204.4-3%207.6-7%209.2-4-1.6-7-4.8-7-9.2V6z'/%3E%3C/svg%3E");
  --i-insta:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='3.5'%20width='17'%20height='17'%20rx='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M17.2%206.8h.01'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3.5%206.5%208.5%206.5%208.5-6.5'/%3E%3C/svg%3E");
  --i-wa:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2011.7a8.5%208.5%200%200%201-12.6%207.5L3.5%2020.5l1.3-4.2a8.5%208.5%200%201%201%2015.7-4.6z'/%3E%3Cpath%20d='M8.8%208.6c.4%202.8%202.3%205%205.2%206l1.3-1.3-1.9-1-1%20.7c-.9-.4-1.8-1.3-2.1-2.1l.7-1-1-1.9z'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%206%206%206-6%206'/%3E%3C/svg%3E");
  --i-chevL:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m15%206-6%206%206%206'/%3E%3C/svg%3E");
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--graphite);text-rendering:optimizeLegibility}
[dir=rtl] body{font-family:'Noto Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .btn,[dir=rtl] button,[dir=rtl] label,[dir=rtl] th,[dir=rtl] .tag,[dir=rtl] .lbl{font-family:var(--far)}
[dir=rtl] h1,[dir=rtl] h2{font-weight:700;letter-spacing:0!important;font-style:normal!important}
::selection{background:var(--red);color:#fff}

/* ── press and release (classes set by pwp-ui.js) ───────────── */
.is-pressing:not(#_){transform:translateY(1px) scale(.965)!important;transition:transform 80ms ease-out!important}
.is-released:not(#_){animation:pwp-spring .34s var(--spring)}
@keyframes pwp-spring{0%{transform:translateY(1px) scale(.965)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.is-pressing:not(#_){transform:none!important}.pwp-thumb{transition:none!important}}

/* ── the sliding thumb shared by every segmented control ────── */
.has-thumb{position:relative;isolation:isolate}
.pwp-thumb{position:absolute;top:0;left:0;z-index:-1;pointer-events:none;border-radius:7px;opacity:0;
  transition:transform .28s var(--ease),width .28s var(--ease),height .28s var(--ease),opacity .2s;background:#fff;box-shadow:0 1px 2px rgba(20,23,27,.16),0 0 0 1px rgba(20,23,27,.06)}

/* ── rail ──────────────────────────────────────────────────── */
.rail{height:3px!important;background:linear-gradient(90deg,var(--red) 0 18%,#C9A24A 18% 21%,var(--con) 21% 100%)!important}
[dir=rtl] .rail{background:linear-gradient(270deg,var(--red) 0 18%,#C9A24A 18% 21%,var(--con) 21% 100%)!important}

/* ── header: the console ──────────────────────────────────── */
nav.top,body>nav{background:var(--con)!important;backdrop-filter:none!important;border-bottom:1px solid var(--con-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px -18px rgba(0,0,0,.6);color:var(--con-ink)}
.nav-in,.top-in{height:68px!important;gap:16px!important}
.brand{display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none;flex:none}
.brand .mark{display:none!important}
.brand-plate{height:30px;width:auto;display:block}
.brand .sub{font-family:'Saira Condensed',system-ui,sans-serif!important;font-size:.7rem!important;letter-spacing:.22em!important;color:#C9A24A!important;font-weight:700!important;white-space:nowrap;padding-inline-start:12px;border-inline-start:1px solid var(--con-line);line-height:1.2}
@media (max-width:1180px){.brand .sub{display:none}}

/* segmented control on the console */
.nav-links{display:flex!important;align-items:center;gap:2px!important;padding:3px;margin-inline-start:auto;background:var(--con2);border:1px solid var(--con-line);border-radius:10px;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.nav-links .pwp-thumb{background:linear-gradient(180deg,#2B313A,#232830);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5);border-radius:7px}
.nav-links a{position:relative;display:inline-flex!important;align-items:center;gap:8px;height:36px;padding:0 14px!important;border:0!important;border-radius:7px;background:transparent!important;color:var(--con-ink)!important;font-weight:600!important;font-size:.9rem!important;text-decoration:none;white-space:nowrap;transition:color .18s}
[dir=rtl] .nav-links a{font-family:var(--far)!important}
.nav-links a::before{content:"";width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:var(--i,var(--i-doc)) center/contain no-repeat;mask:var(--i,var(--i-doc)) center/contain no-repeat}
.nav-links a[href="/"],.nav-links a[href="/index.html"]{--i:var(--i-home)}
.nav-links a[href^="/store"]{--i:var(--i-store)}
.nav-links a[href^="/faq"]{--i:var(--i-faq)}
.nav-links a[href^="/contact"],.nav-links a[href="#contact"]{--i:var(--i-contact)}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff!important}
.nav-links:not(.has-thumb) a[aria-current]{background:#262B33!important}
.nav-links a[aria-current]::after{content:"";position:absolute;bottom:3px;left:32%;right:32%;height:2px;border-radius:2px;background:var(--led);box-shadow:0 0 8px var(--led)}

/* square console keys: bell, account, cart */
.nav-act,.top-act{display:flex;align-items:center;gap:6px!important}
nav .icon-btn,nav .top-ico,nav .pwpn-btn{position:relative;width:38px!important;height:38px!important;display:grid!important;place-items:center;border-radius:9px!important;background:var(--con-key)!important;border:1px solid var(--con-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;color:#D5DAE1!important;transition:background .15s,color .15s,border-color .15s}
nav .icon-btn:hover,nav .top-ico:hover,nav .pwpn-btn:hover{background:var(--con-key2)!important;color:#fff!important;border-color:#353C47!important}
nav .icon-btn[aria-current],nav .top-ico[aria-current]{color:#fff!important;border-color:#3A424D!important;background:var(--con-key2)!important}
nav .icon-btn[aria-current]::after,nav .top-ico[aria-current]::after{content:"";position:absolute;bottom:4px;left:30%;right:30%;height:2px;border-radius:2px;background:var(--led);box-shadow:0 0 8px var(--led)}
nav .badge,nav .cart-badge,nav .top-ico .n,nav .pwpn-badge{border:2px solid var(--con)!important}

/* language switch */
nav .lang{display:inline-flex!important;padding:3px!important;gap:0;border:1px solid var(--con-line)!important;border-radius:9px!important;background:var(--con2)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
nav .lang .pwp-thumb{background:linear-gradient(180deg,#2B313A,#232830);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.lang button,.lang .lang-b{font-family:'Saira Condensed','Changa',system-ui,sans-serif!important;font-weight:700!important;min-width:34px;height:30px;padding:0 10px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#8A94A1!important;box-shadow:none!important;transition:color .18s}
.lang button.on,.lang .lang-b.active,.lang button[aria-pressed="true"]{color:#fff!important}
.lang:not(.has-thumb) button.on,.lang:not(.has-thumb) .lang-b.active{background:#262B33!important}
/* a .lang sitting on a light page (e.g. admin sign-in) */
body:not(#_) .lang:not(nav .lang){background:var(--line2)!important;border-color:var(--line)!important;box-shadow:inset 0 1px 2px rgba(20,23,27,.1)}
body:not(#_) .lang:not(nav .lang) button.on,body:not(#_) .lang:not(nav .lang) .lang-b.active{color:var(--graphite)!important}
body:not(#_) .lang:not(nav .lang) .pwp-thumb{background:#fff}

/* phones: plate + keys on the first row, the four page keys as one console strip underneath */
@media (max-width:900px){
  nav.top .nav-in,body>nav .nav-in,nav.top .top-in{flex-wrap:wrap;height:auto!important;padding-block:10px 8px;row-gap:10px!important}
  body>header:has(> .nav-links){flex-wrap:wrap;height:auto!important;padding-block:10px 8px;row-gap:10px!important}
  .brand-plate{height:26px}
  nav.top .nav-links,body>nav .nav-links,body>header>.nav-links{order:3;width:100%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));margin:0!important;overflow:visible}
  nav.top .nav-links a,body>nav .nav-links a,body>header>.nav-links a{flex-direction:column;justify-content:center;gap:4px;height:auto!important;min-height:50px;padding:6px 2px!important;font-size:.72rem!important;line-height:1.15;white-space:normal;text-align:center}
  nav.top .nav-links a::before,body>nav .nav-links a::before,body>header>.nav-links a::before{width:19px;height:19px}
  nav.top .nav-links a[aria-current]::after{bottom:2px}
  nav.top .nav-act,body>nav .nav-act,nav.top .top-act,body>header>.nav-act{margin-inline-start:auto!important}
  body .cats{top:140px}
}

/* ── buttons on the working surface ───────────────────────── */
.btn,.btn-red,.btn-primary,.btn-dark,.btn-light,.btn-ghost,.btn-danger,.tbtn,.btn-google,.btn-apple,.btn-ghost-lg{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:var(--r)!important;font-weight:600;letter-spacing:.01em;
  transition:background-color .16s,border-color .16s,box-shadow .2s,color .16s,transform .12s!important;transform:none}
.btn-red,.btn-primary{background:var(--red)!important;border:1px solid #B01019!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(120,10,16,.35),0 0 0 0 rgba(200,20,31,0)!important}
.btn-red:hover,.btn-primary:hover{background:#D5182A!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(120,10,16,.3),0 0 0 4px rgba(200,20,31,.14)!important}
.btn-dark{background:var(--graphite)!important;border:1px solid #000!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.3)!important}
.btn-dark:hover{background:#222831!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 4px rgba(20,23,27,.12)!important}
.btn-ghost,.btn-light,.tbtn,.btn-ghost-lg,.btn-google{background:#fff!important;border:1px solid var(--line)!important;color:var(--graphite)!important;box-shadow:0 1px 2px rgba(20,23,27,.07)!important}
.btn-ghost:hover,.btn-light:hover,.tbtn:hover,.btn-ghost-lg:hover,.btn-google:hover{border-color:#8E97A3!important;box-shadow:0 0 0 4px rgba(20,23,27,.07)!important}
.btn-danger{background:#fff!important;border:1px solid #E7B4B7!important;color:var(--red2)!important}
.btn:disabled,.btn[disabled],.btn-red:disabled,.btn-primary:disabled{opacity:.5;box-shadow:none!important;cursor:not-allowed}
.btn:focus-visible,.btn-red:focus-visible,.btn-primary:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #C9A24A!important;outline-offset:2px}

/* ── fields ───────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea{
  border:1px solid var(--ui-edge)!important;border-radius:var(--r)!important;background-color:#fff;box-shadow:inset 0 1px 2px rgba(20,23,27,.06)!important;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,select:focus,textarea:focus{border-color:var(--graphite)!important;box-shadow:0 0 0 3px rgba(201,162,74,.28)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--red)}
input:disabled,select:disabled{background-color:#E3E7EC!important;color:var(--steel)}
input[aria-invalid=true]:not(#_),select[aria-invalid=true]:not(#_),textarea[aria-invalid=true]:not(#_){border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(200,20,31,.18)!important}

/* ── segmented controls on the working surface ─────────────── */
.dept,.cats-in,.fx-seg,.pwp-seg{background:var(--line2)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:3px!important;gap:2px!important;box-shadow:inset 0 1px 2px rgba(20,23,27,.08)}
.dept button,.cats-in a,.fx-seg button{border:0!important;background:transparent!important;border-radius:7px!important;color:var(--steel)!important;font-weight:600!important;transition:color .18s}
.dept button.on,.cats-in a.on,.fx-seg button.on{color:var(--graphite)!important;background:transparent!important;box-shadow:none!important}
.dept:not(.has-thumb) button.on,.cats-in:not(.has-thumb) a.on,.fx-seg:not(.has-thumb) button.on{background:#fff!important}
.dept button:hover,.cats-in a:hover,.fx-seg button:hover{color:var(--graphite)!important}
.cats{background:rgba(232,235,239,.94)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)!important}
.cats-in{display:inline-flex!important;margin-block:8px}

/* choice cards (tune types, devices, delivery): a selected card is lit, not just outlined */
.variant,.dev,.chip{transition:border-color .15s,box-shadow .18s,background .15s,transform .12s}
.variant.on,.dev.on,.chip.on{border-color:var(--graphite)!important;box-shadow:0 0 0 1px var(--graphite),0 6px 16px -10px rgba(20,23,27,.5)!important;background:#fff!important}
.variant.on::after,.dev.on::after{content:"";position:absolute;top:8px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.variant,.dev{position:relative}

/* ── page heads ───────────────────────────────────────────── */
.head{padding-top:36px!important}
.head h1,.sec-h h2,.dept-head h2{letter-spacing:-.02em}
.crumbs+.head{padding-top:10px!important}
[dir=rtl] .head h1,[dir=rtl] .sec-h h2,[dir=rtl] .dept-head h2{font-family:var(--far)!important;font-weight:800!important}
.crumbs a,.crumb a{color:var(--steel)}

/* ── footer: the lower console ────────────────────────────── */
footer{background:var(--con)!important;color:#8A94A1!important;border-top:1px solid var(--con-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
footer .brand .sub{color:#C9A24A!important;border-inline-start-color:var(--con-line)}
footer .row>div:not(.brand),footer .foot-links,footer nav{display:flex;flex-wrap:wrap;gap:6px}
/* the home page footer columns: the same key chips, with room between rows (owner 2026-10-08) */
footer .foot-col{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;flex:1 1 220px;max-width:360px}
footer .foot-col h4{flex-basis:100%;margin-bottom:4px}
footer a:not(.brand){position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px;background:var(--con-key);border:1px solid var(--con-line);color:#C6CDD6!important;font-size:.84rem;font-weight:500;text-decoration:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:background .15s,color .15s,border-color .15s}
[dir=rtl] footer a:not(.brand){font-family:var(--far)}
footer a:not(.brand)::before{content:"";width:15px;height:15px;flex:none;background:currentColor;opacity:.85;-webkit-mask:var(--i,var(--i-doc)) center/contain no-repeat;mask:var(--i,var(--i-doc)) center/contain no-repeat}
footer a[href^="/faq"]{--i:var(--i-faq)}
footer a[href*="doc=terms"]{--i:var(--i-doc)}
footer a[href*="doc=privacy"]{--i:var(--i-shield)}
footer a[href^="/contact"],footer a[href="#contact"]{--i:var(--i-contact)}
footer a[href*="instagram"]{--i:var(--i-insta)}
footer a[href^="mailto:"]{--i:var(--i-mail)}
footer a[href*="wa.me"],footer a[href*="whatsapp"]{--i:var(--i-wa)}
footer a[href^="/store"]{--i:var(--i-store)}
footer a[href="/"]:not(.brand){--i:var(--i-home)}
footer a:not(.brand):hover{background:var(--con-key2);border-color:#353C47;color:#fff!important}

/* ── Musaad key (injected by chat-bubble.js) ───────────────── */
body .pwp-hd{background:var(--con)!important}
body .pwp-panel{border-radius:12px!important}

/* ── account: the customer's panel ─────────────────────────── */
.shell .sidebar{align-self:start;position:sticky;top:80px;max-height:calc(100dvh - 92px);overflow:auto;background:var(--panel);border:1px solid var(--line)!important;border-radius:12px;padding:0!important;margin:20px 0;box-shadow:0 10px 26px -22px rgba(20,23,27,.5)}
.shell .side-profile{padding:18px 18px 16px!important;margin:0!important;border-bottom:1px solid var(--line2)!important;background:var(--surface)}
.shell .side-nav{padding:6px!important;display:flex!important;flex-direction:column;gap:2px}
.shell .side-nav .pwp-thumb{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line2)}
.shell .side-link{position:relative;display:flex!important;align-items:center;gap:12px;width:100%;margin:0!important;padding:10px 12px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--ink2)!important;font:600 .94rem/1.3 var(--fb)!important;text-align:start;cursor:pointer;transition:color .2s}
[dir=rtl] .shell .side-link{font-family:var(--far)!important}
.shell .side-nav .side-link+.side-link::before{content:"";position:absolute;top:-1px;inset-inline:12px;height:1px;background:var(--line2)}
.shell .side-link svg{box-sizing:content-box;width:18px;height:18px;padding:7px;border-radius:8px;background:var(--soft);border:1px solid var(--line2);color:var(--graphite);flex:none;transition:background .2s,color .2s,border-color .2s}
.shell .side-nav .side-link::after{content:"";width:16px;height:16px;margin-inline-start:auto;flex:none;background:currentColor;opacity:.4;-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
[dir=rtl] .shell .side-nav .side-link::after{-webkit-mask-image:var(--i-chevL);mask-image:var(--i-chevL)}
.shell .side-link:hover{color:var(--graphite)!important}
/* the selected item carries its own dark plate, so it stays readable wherever the hover highlight is */
.shell .side-nav .side-link.active{background:var(--con)!important;box-shadow:0 4px 12px -6px rgba(20,23,27,.6)}
.shell .side-nav .side-link.active{color:#fff!important}
.shell .side-nav .side-link.active::before,.shell .side-nav .side-link.active+.side-link::before{opacity:0}
.shell .side-link.active svg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.shell .side-link.active::after{opacity:.8}
.shell .side-link .side-dot,.shell .side-link .msg-badge{margin-inline-start:6px}
.shell .side-logout{padding:6px 10px 12px!important;border-top:1px solid var(--line2)!important}
.shell .side-logout .side-link{justify-content:center;color:var(--red2)!important;border:1px solid var(--line)!important;padding:9px 12px!important;background:#fff!important;margin-top:6px!important}
.shell .side-logout .side-link svg{background:none;border:0;padding:0;color:var(--red2)}
@media (max-width:820px){
  .shell .sidebar{position:static;max-height:none;margin:12px 0 0}
  .shell .side-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px!important}
  .shell .side-nav .side-link{flex-direction:column;justify-content:center;gap:6px;padding:10px 4px!important;font-size:.78rem!important;text-align:center}
  .shell .side-nav .side-link::after,.shell .side-nav .side-link+.side-link::before{display:none}
}

/* ── admin / workshop side console ─────────────────────────── */
aside{background:var(--con)!important;border-inline-end:1px solid var(--con-line)}
aside .nav .pwp-thumb{background:linear-gradient(180deg,#2B313A,#232830);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5);border-radius:8px}
aside .nav button{position:relative;border:0!important;border-radius:8px!important;margin-bottom:2px!important;font-weight:600;background:transparent!important;transition:color .18s}
[dir=rtl] aside .nav button{font-family:var(--far)!important}
aside .nav button:hover{color:#fff!important}
aside .nav:not(.has-thumb) button.on{background:#262B33!important}
aside .nav button.on{color:#fff!important}
aside .nav button.on::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;background:var(--led);box-shadow:0 0 8px var(--led)}
aside .nav .grp{color:#6E7885!important;border-top:1px solid var(--con-line);margin-top:8px}
aside .nav .grp:first-child{border-top:0;margin-top:0}
aside .logo img,.logo .brand-plate{height:28px;width:auto;display:block}

/* ── generic surfaces ─────────────────────────────────────── */
.card,.panel,.box,.sec-card,.summary,.sum,.side,.order,.ord{border-radius:10px}
dialog{border-radius:12px;border:1px solid var(--line)}
.toast{border-radius:var(--r)!important}
table th{letter-spacing:.04em}

/* ═══════════════ HOME ═══════════════ */
.v2hero{position:relative;background:#0E0E10;color:#F4F2EE;overflow:hidden;border-bottom:1px solid #26262B}
.v2hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 80% at 78% 55%,rgba(224,32,46,.22),transparent 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 70px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px);pointer-events:none}
[dir=rtl] .v2hero::before{background:
  radial-gradient(60% 80% at 22% 55%,rgba(224,32,46,.22),transparent 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 70px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px)}
.v2hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px;min-height:clamp(520px,72vh,640px);padding-top:40px;padding-bottom:40px}
.v2hero .eyebrow{font-family:'Saira Condensed',system-ui,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.26em;color:#C9A24A;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.v2hero .eyebrow::before{content:"";width:28px;height:2px;background:#C9A24A}
.v2hero h1{font-family:'Saira Condensed','Changa',system-ui,sans-serif;font-weight:800;font-style:italic;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:.98;letter-spacing:-.02em;margin:18px 0 18px;color:#fff}
[dir=rtl] .v2hero h1{font-family:'Changa',system-ui,sans-serif;font-style:normal;font-weight:800;letter-spacing:0;line-height:1.2;font-size:clamp(2.2rem,4.6vw,3.6rem)}
.v2hero h1 em{font-style:inherit;color:#FF4550}
.v2hero .lhero-line{font-size:1.2rem;color:#F4F2EE;max-width:34ch;margin:0 0 8px}
.v2hero .lhero-sub{color:#A9A6A1;max-width:46ch;margin:0 0 28px;font-size:1rem}
.v2hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.v2hero .btn-ghost{background:transparent!important;color:#fff!important;border:1px solid #4A4A52!important;box-shadow:none!important}
.v2hero .btn-ghost:hover{border-color:#fff!important}
.v2hero .stats{display:flex;gap:34px;margin-top:34px;padding-top:22px;border-top:1px solid #2A2A30;flex-wrap:wrap}
.v2hero .stats b{display:block;font-family:'Saira Condensed',system-ui,sans-serif;font-weight:800;font-size:1.9rem;line-height:1;color:#fff}
.v2hero .stats span{font-size:.8rem;color:#A9A6A1;letter-spacing:.02em}
.v2hero-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.v2hero-art img{width:min(560px,100%);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(75% 75% at 50% 50%,#000 58%,transparent 100%)}
@media (max-width:860px){
  .v2hero-in{grid-template-columns:1fr;gap:0;min-height:0;padding-top:12px}
  .v2hero-art{order:-1;margin:0 -28px}
  .v2hero-art img{width:100%;max-width:420px;margin:0 auto}
  .v2hero .stats{gap:22px}
}
.dyno-lift{margin-top:-60px!important;position:relative;z-index:2}
.dyno{border-radius:var(--r)!important;border:1px solid var(--line)!important;box-shadow:0 18px 40px -24px rgba(20,20,22,.35)!important;background:#fff!important}

/* ═══════════════ STORE ═══════════════ */
.cats{top:72px;background:rgba(232,235,239,.96)!important;backdrop-filter:blur(10px)}
.cats a,.dept button{border-radius:var(--r)!important}
.models{gap:14px!important}
.model{--fam:var(--graphite);position:relative;background:#fff!important;border:1px solid var(--line)!important;border-top:4px solid var(--fam)!important;border-radius:var(--r)!important;padding:14px 16px 16px!important;gap:6px!important;color:var(--graphite)!important;transition:border-color .15s,box-shadow .15s,transform .15s}
.model:hover{border-color:var(--ui-edge)!important;border-top-color:var(--fam)!important;box-shadow:0 10px 26px -18px rgba(20,20,22,.45);transform:translateY(-1px)}
.model.on{background:#fff!important;border-color:var(--graphite)!important;border-top-color:var(--fam)!important;box-shadow:0 0 0 1px var(--graphite),0 14px 30px -20px rgba(20,20,22,.55)!important;color:var(--graphite)!important}
.model.on span{color:var(--steel)!important}
.model .art{height:92px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#EEF1F4,#E3E7EC);border-radius:4px;margin-bottom:6px;overflow:hidden}
.model .art .pwp-car{width:86%;height:auto;max-height:84px}
.model>svg:not(.pwp-car){display:none}
.model b{font-size:1.4rem!important}
.model .pick{position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ui-edge);background:#fff}
.model.on .pick{border-color:var(--graphite);background:radial-gradient(circle,var(--graphite) 0 5px,#fff 5.5px)}
[dir=rtl] .pwp-car{transform:scaleX(-1)}
/* home: the signed-in customer's car beside the 3D logo */
.hero-car{position:absolute;z-index:2;inset-inline-start:-6%;bottom:6%;width:62%;display:block;color:#F4F2EE;text-decoration:none}
.hero-car img{display:block;width:100%;height:auto}
.hero-car.is-photo img{aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}
.hero-car.is-sketch img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.hero-car-cap{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding-inline-start:4px}
.hero-car-cap b{font-family:'Saira Condensed',system-ui,sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.hero-car-cap i{font-style:normal;color:#C9A24A;font-family:'Saira Condensed',system-ui,sans-serif;letter-spacing:.1em;font-size:.85rem}
.hero-car:hover b{text-decoration:underline}
@media (max-width:860px){.hero-car{width:46%;inset-inline-start:-2%;bottom:4%}.hero-car.is-photo{width:40%}.hero-car-cap b{font-size:1rem}}
/* 2026-10-02 sketches (img.pwp-car) replace the drawings: never mirrored, they carry lettering */
[dir=rtl] img.pwp-car,[dir=rtl] .gv-art img,[dir=rtl] .gv-hero-art img,[dir=rtl] .side-car-art img,[dir=rtl] .gv-fam img,[dir=rtl] .gar-offer-art img{transform:none!important}
img.pwp-car{display:block;object-fit:contain;-webkit-user-drag:none;user-select:none}
.model .art{height:124px!important;position:relative;background:radial-gradient(120% 90% at 50% 100%,#DDE2E8 0,#EEF1F4 55%,#F6F7F9 100%)!important}
.model .art img.pwp-car{width:100%;height:100%;max-height:none;padding:6px 8px 2px}
.pwp-badge{position:absolute;top:8px;inset-inline-start:10px;font-family:'Saira Condensed',system-ui,sans-serif;font-style:italic;font-weight:800;font-size:1.05rem;letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#9AA1AB 0%,#2A2E35 48%,#0F1114 52%,#6E7681 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));padding-bottom:3px;border-bottom:2px solid var(--fam)}
.gen-h .gart{width:112px!important}
.head-art{width:300px}
.side-car-art img{width:84%;height:auto;object-fit:contain}
.gv-art img,.gv-hero-art img{width:100%;height:auto;object-fit:contain}
.gv-fam span img{width:100%;height:auto}
.gar-offer-art img{width:88%;height:auto;object-fit:contain}
.gv-empty-art img{width:100%;height:auto}
.fam-mustang_gt{--fam:#C8141F!important}
.fam-gt350{--fam:#1D4E89!important}
.fam-gt500{--fam:#2B2B30!important}
.fam-f150{--fam:#8A6515!important}

.gen{border:1px solid var(--line)!important;border-top:3px solid var(--fam)!important;border-inline-start:1px solid var(--line)!important;border-radius:var(--r)!important;background:#fff!important;box-shadow:0 1px 2px rgba(20,20,22,.04)}
.gen-h{align-items:center!important;background:#fff!important;padding:14px 20px!important}
.gen-h h3{color:var(--graphite)!important;display:flex;align-items:center;gap:14px}
.gen-h .gart{width:92px;flex:none;display:block}
.gen-h .gart .pwp-car{width:100%;height:auto;display:block}
.gen-h small{font-family:'Saira Condensed',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem!important}
.var{background:#fff;min-height:150px!important;box-shadow:none!important;transition:background .15s}
.var:hover{background:var(--soft)!important}
.var .tag{align-self:flex-start;font-family:'Saira Condensed',system-ui,sans-serif;font-size:.72rem!important;font-weight:700!important;letter-spacing:.12em!important;padding:2px 8px;border-radius:3px;color:#8A6515!important;background:var(--gold-bg)}
.var.na .tag{color:#1F6F4A!important;background:#E6F3EC}
.var .pr{font-size:1.5rem!important}
.var .cta{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r);background:var(--graphite);color:#fff!important;font-size:.9rem!important}
.var:hover .cta{background:var(--red)!important;color:#fff!important}
.var.empty{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(20,20,22,.03) 10px 20px)!important}
.svc{background:var(--pur-bg)!important;border:1px solid var(--pur-ln)!important;border-top:3px solid var(--pur)!important;border-radius:var(--r)!important}
.svc h3{color:#2E1F75!important}
.svc>p{color:#5A5670!important}
.svc a{border:1px solid var(--pur-ln)!important;border-radius:var(--r)!important;color:#2E1F75!important;background:#fff!important}
.svc a:hover{border-color:var(--pur)!important;box-shadow:0 8px 20px -14px rgba(90,61,200,.6)!important}
.svc a span{color:#6B6785!important}
.svc a .p{color:var(--pur)!important}
.tunebar{background:#14171B!important;border-radius:var(--r)!important;border-inline-start:4px solid var(--red)}

/* ═══════════════ TUNE (model page) ═══════════════ */
.vpick,.vopt,.variant,.opt,.dopt{border-radius:var(--r)!important}

/* ── fixes ── */
@media (max-width:700px){
  .gen-b{grid-template-columns:1fr!important}
  .var{min-height:0!important;flex-direction:column}
  .gen-h{flex-wrap:wrap}
  .gen-h .gart{width:74px}
}
.var .cta{white-space:nowrap}
.dyno svg,.dyno-chart svg{direction:ltr}
.v2hero{background:#060607!important}
.v2hero-art img{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)!important;mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)!important;border-radius:0!important}
@media (max-width:860px){.dyno-lift{margin-top:24px!important}.v2hero-art img{max-width:300px!important}.v2hero-in{padding-bottom:28px}}
/* model page head with the car drawing */
.head.has-art{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.head-art{flex:none;width:260px;padding:12px 16px 8px;background:linear-gradient(180deg,#fff,#E3E7EC);border:1px solid var(--line);border-top:3px solid var(--fam,#C8141F);border-radius:var(--r)}
.head-art .pwp-car{width:100%;height:auto;display:block}
@media (max-width:700px){.head.has-art{flex-direction:column;align-items:flex-start;gap:14px}.head-art{width:200px;padding:8px 12px 6px}}
/* phone keyboard open (body.kb, set by chat-bubble.js / the tune page): bars fixed to the bottom get out of the way */
.kb .mobile-bar,.kb .pwp-chat{display:none!important}
/* a whole section needing attention (device / appointment) */
section.block[aria-invalid=true]{outline:2px solid var(--red);outline-offset:3px}
section.block:focus{outline:none}
section.block[aria-invalid=true]:focus{outline:2px solid var(--red)}
/* small text-style actions still get a comfortable tap area */
button.link{min-height:32px;padding:6px 8px;margin:-6px -8px;border-radius:4px}
button.link:hover{background:var(--soft)}

/* ═══════════════ MY GARAGE (account) and "From my garage" (tune page) ═══════════════ */
.gar-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.gar-lede{color:var(--steel);font-size:.92rem;max-width:62ch}
.gar-add-btn{white-space:nowrap}
.gar-list{display:grid;gap:14px}
.gar-card{--fam:var(--red);display:grid;grid-template-columns:230px minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--fam);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 26px -22px rgba(20,23,27,.5)}
.gar-card.fam-gt350{--fam:#1D4E89}.gar-card.fam-gt500{--fam:#2B2B30}.gar-card.fam-f150{--fam:#8A6515}
.gar-art{display:flex;align-items:center;justify-content:center;padding:18px 16px;background:linear-gradient(180deg,#F1F4F7,#E3E7EC);border-inline-end:1px solid var(--line2)}
.gar-art .pwp-car{width:100%;height:auto;max-height:110px;display:block}
.gar-body{padding:16px 18px 18px;min-width:0}
.gar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.gar-name{font-family:var(--fd);font-weight:800;font-size:1.45rem;line-height:1.1;letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
[dir=rtl] .gar-name{font-family:var(--far);font-weight:700;letter-spacing:0}
.gar-sub{color:var(--steel);font-size:.88rem;margin-top:3px}
.gar-tag{flex:none;font-size:.72rem;font-weight:700;color:var(--green);background:#E6F3EC;border:1px solid #BFE0CD;border-radius:20px;padding:3px 10px;white-space:nowrap}
[dir=rtl] .gar-tag{font-family:var(--far)}
.gar-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;margin:14px 0 12px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.gar-spec{background:var(--key);padding:8px 12px;min-width:0}
.gar-spec span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.06em;color:var(--steel);text-transform:uppercase}
[dir=rtl] .gar-spec span{letter-spacing:0;font-family:var(--far)}
.gar-spec b{display:block;font-family:var(--fd);font-weight:700;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir=rtl] .gar-spec b{font-family:var(--far);font-weight:600;font-size:.95rem}
.gar-parts{border:1px solid var(--line2);border-radius:var(--r);background:#fff}
.gar-ph{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);padding:9px 12px;border-bottom:1px solid var(--line2);background:var(--surface);border-radius:var(--r) var(--r) 0 0}
[dir=rtl] .gar-ph{letter-spacing:0;font-family:var(--far);text-transform:none;font-size:.82rem}
.gar-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 12px;font-size:.9rem}
.gar-row+.gar-row{border-top:1px dashed var(--line2)}
.gar-row .k{color:var(--steel);flex:0 1 auto;min-width:0}
.gar-row .v{font-weight:600;text-align:end;min-width:0;overflow-wrap:anywhere}
.gar-none{padding:12px;color:var(--steel);font-size:.88rem}
.gar-notes{margin-top:10px;background:var(--surface);border:1px solid var(--line2);border-inline-start:3px solid var(--line);border-radius:var(--r);padding:9px 12px;font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.gar-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.gar-acts .btn-red,.gar-go{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:40px;padding:9px 16px}
[dir=rtl] .gar-go{font-family:var(--far)}
.gar-form{margin:0 0 16px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--graphite);border-radius:var(--r);padding:16px 18px}
.gar-form-in{margin:14px 0 0;background:var(--surface);border-top-color:var(--line)}
.gar-form-h{font-family:var(--fd);font-weight:800;font-size:1.3rem;margin-bottom:12px}
[dir=rtl] .gar-form-h{font-family:var(--far);font-weight:700}
.gar-erows{display:grid;gap:6px}
.gar-erow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) 36px;gap:8px;align-items:center}
.gar-erow .k{font-size:.86rem;color:var(--steel);overflow-wrap:anywhere}
.gar-erow input{padding:9px 11px}
.gar-x{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--red2);font-size:1.2rem;line-height:1;cursor:pointer}
.gar-x:hover{border-color:var(--red)}
.gar-empty{text-align:center;background:var(--panel);border:1px dashed var(--ui-edge);border-radius:var(--r);padding:28px 20px 24px}
.gar-empty-art{width:min(260px,70%);margin:0 auto 10px;opacity:.9}
.gar-empty-art .pwp-car{width:100%;height:auto;display:block}
.gar-empty b{display:block;font-family:var(--fd);font-weight:800;font-size:1.35rem}
[dir=rtl] .gar-empty b{font-family:var(--far);font-weight:700}
.gar-empty p{color:var(--steel);max-width:54ch;margin:6px auto 4px;font-size:.93rem;line-height:1.8}
@media (max-width:700px){
  .gar-card{grid-template-columns:1fr}
  .gar-art{border-inline-end:0;border-bottom:1px solid var(--line2);padding:12px 24px}
  .gar-art .pwp-car{max-width:260px;max-height:96px;margin:0 auto}
  .gar-body{padding:14px}
  .gar-acts .gar-go{flex:1 1 100%}
  .gar-acts .tbtn{flex:1 1 0;justify-content:center}
  .gar-erow{grid-template-columns:minmax(0,1fr) 36px}
  .gar-erow .k,.gar-erow .k-in{grid-column:1/-1}
  .gar-add-btn{width:100%}
}
/* tune page: "From my garage" */
.gar-pick{background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--red);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.gar-pick-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.gar-pick-h b{font-family:var(--fd);font-weight:700;font-size:1.05rem}
[dir=rtl] .gar-pick-h b{font-family:var(--far)}
.gar-pick-h span{font-size:.82rem;color:var(--steel)}
.gar-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gar-chips::-webkit-scrollbar{display:none}
.gar-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1px solid var(--ui-edge);border-radius:999px;background:linear-gradient(180deg,#fff,var(--key));color:var(--graphite);cursor:pointer;font-family:inherit;text-align:start;box-shadow:inset 0 -2px 0 rgba(20,23,27,.06)}
.gar-chip span{display:flex;flex-direction:column;line-height:1.15}
.gar-chip b{font-size:.92rem;white-space:nowrap}
.gar-chip small{font-size:.74rem;color:var(--steel);white-space:nowrap}
.gar-chip:hover{border-color:var(--graphite)}
.gar-chip.on{background:var(--graphite);border-color:var(--graphite);color:#fff}
.gar-chip.on small{color:#C9CFD7}
.gar-pick .hint{margin-top:8px}

/* ── the key sitting on the sliding thumb keeps a readable label (hover and active) ── */
.nav-links a.is-under,nav .lang .is-under{color:#fff!important}
aside .nav button.is-under,aside .nav button.is-under *{color:#fff!important}
.shell .side-nav .side-link.is-under:not(.active){color:var(--graphite)!important}
.shell .side-nav .side-link.is-under::before,.shell .side-nav .side-link.is-under+.side-link::before{opacity:0}
.dept .is-under,.cats-in .is-under,.fx-seg .is-under{color:var(--graphite)!important}
/* hover without a thumb yet (before pwp-ui.js runs): a quiet tint, never a black block */
.shell .side-nav:not(.has-thumb) .side-link:hover:not(.active){background:var(--soft)!important;color:var(--graphite)!important}
aside .nav:not(.has-thumb) button:hover:not(.on){background:#1F242C!important}

/* ── One search field everywhere: a single rounded box with the magnifier inside (store, FAQ, admin, workshop) ── */
.fx-search,.ib-search,div.search,.pwp-search{display:flex!important;align-items:center;gap:9px;height:44px;padding:0 14px!important;background:#F5F6F8!important;border:1.5px solid #E3E6EA!important;border-radius:12px!important;color:var(--steel);position:relative;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;cursor:text}
.fx-search:hover,.ib-search:hover,div.search:hover,.pwp-search:hover{border-color:#AEB6C1!important}
.fx-search:focus-within,.ib-search:focus-within,div.search:focus-within,.pwp-search:focus-within{background:#fff!important;border-color:var(--graphite)!important;box-shadow:0 0 0 3px rgba(200,20,31,.13)}
.fx-search svg,.ib-search svg,div.search svg,.pwp-search svg{position:static!important;transform:none!important;flex:none;width:17px;height:17px;color:var(--steel)}
.fx-search input:not(#_),.ib-search input:not(#_),div.search input:not(#_),.pwp-search input:not(#_),.fx-search input:not(#_):hover,.ib-search input:not(#_):hover,div.search input:not(#_):hover,.pwp-search input:not(#_):hover,.fx-search input:not(#_):focus,.ib-search input:not(#_):focus,div.search input:not(#_):focus,.pwp-search input:not(#_):focus{flex:1;min-width:0;height:100%;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important;font:inherit;font-size:.95rem!important;color:var(--graphite)}
.fx-search input::placeholder,.ib-search input::placeholder,div.search input::placeholder,.pwp-search input::placeholder{color:#8A939E}
.fx-search input::-webkit-search-cancel-button,.ib-search input::-webkit-search-cancel-button,div.search input::-webkit-search-cancel-button,.pwp-search input::-webkit-search-cancel-button{-webkit-appearance:none;width:16px;height:16px;cursor:pointer;background:currentColor;opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── My garage v4: a personal space (photo, name, parts in the customer's words) ── */
.gv{display:flex;flex-direction:column;gap:16px}
.gv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.gv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gv-card{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;cursor:pointer;text-align:start;font:inherit;color:var(--graphite);transition:transform .18s,box-shadow .18s,border-color .18s}
.gv-card:hover{transform:translateY(-2px);border-color:#AEB6C1;box-shadow:0 14px 30px -18px rgba(20,23,27,.45)}
.gv-card.sold{opacity:.72}
.gv-ph{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#2A2F37,#0F1216);display:grid;place-items:center;overflow:hidden}
.gv-img,.gv-hero-img{width:100%;height:100%;object-fit:cover;display:block}
.gv-art,.gv-hero-art{width:82%;display:grid;place-items:center}.gv-art svg,.gv-hero-art svg{width:100%;height:auto}
[dir=rtl] .gv-art svg,[dir=rtl] .gv-hero-art svg,[dir=rtl] .side-car-art svg,[dir=rtl] .gv-fam svg,[dir=rtl] .gar-offer-art svg{transform:scaleX(-1)}
.gv-tag{position:absolute;top:10px;inset-inline-start:10px;background:rgba(10,12,15,.66);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.72rem;font-weight:700;padding:2px 10px}
.gv-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px}
.gv-name{font-family:var(--fd);font-weight:800;font-size:1.12rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir=rtl] .gv-name,[dir=rtl] .gv-hero-name{font-family:var(--far);font-weight:700}
.gv-sub{font-size:.8rem;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-year{font-family:var(--fd);font-weight:800;font-size:1.25rem;color:var(--steel);flex:none}
.gv-sold summary{cursor:pointer;color:var(--steel);font-weight:600;padding:10px 2px;border-top:1px solid var(--line)}
.gv-sold .gv-grid{margin-top:8px}
.gv-empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;background:#fff;border:1px solid var(--line);border-radius:14px}
.gv-empty-art{width:min(300px,80%)}.gv-empty-art svg{width:100%;height:auto}
.gv-empty b{font-size:1.15rem}.gv-empty p{color:var(--steel);max-width:52ch;margin:0 0 6px}
.gv-back{align-self:flex-start;background:none;border:0;font:inherit;font-weight:600;color:var(--steel);cursor:pointer;padding:4px 0}
.gv-back:hover{color:var(--graphite)}
.gv-hero{position:relative;aspect-ratio:16/8;max-height:380px;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#2A2F37,#0F1216);display:grid;place-items:center}
.gv-hero-art{width:70%}
.gv-hero-cap{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:40px 18px 14px;background:linear-gradient(0deg,rgba(8,10,12,.9),transparent);color:#fff}
.gv-hero-name{font-family:var(--fd);font-weight:800;font-size:1.7rem;line-height:1.1}
.gv-hero-sub{font-size:.86rem;color:#C9CFD7;margin-top:3px}
.gv-hero-year{font-family:var(--fd);font-weight:800;font-size:2rem;line-height:1}
.gv-more{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border-radius:50%;background:rgba(10,12,15,.6);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
.gv-more:hover{background:rgba(10,12,15,.8)}
.gv-menu{position:absolute;top:56px;inset-inline-end:12px;z-index:5;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(10,12,16,.55);overflow:hidden;display:flex;flex-direction:column;animation:gvIn .16s ease}
@keyframes gvIn{from{opacity:0;transform:translateY(-4px)}}
.gv-menu button{background:none;border:0;border-bottom:1px solid var(--line2);text-align:start;padding:11px 14px;font:inherit;font-weight:600;color:var(--graphite);cursor:pointer}
.gv-menu button:last-child{border-bottom:0}.gv-menu button:hover{background:var(--soft)}
.gv-menu button.del{color:var(--red2)}
.gv-chips{display:flex;flex-wrap:wrap;gap:8px}
.gv-chip{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.88rem}
.gv-chip i{font-style:normal;color:var(--steel);font-size:.78rem}
.gv-none{color:var(--steel);font-size:.92rem}
.gv-notes{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.92rem;white-space:pre-line}
.gv-notes i{display:block;font-style:normal;font-size:.76rem;color:var(--steel);margin-bottom:2px}
.gv-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gv-btn{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;border:1px solid transparent;padding:0 14px;text-align:center}
.gv-btn.dark{background:var(--con,#14171B);color:#fff}
.gv-btn.red{background:var(--red);color:#fff}
.gv-btn:hover{filter:brightness(1.08)}
.gv-addphoto{align-self:flex-start;background:none;border:1.5px dashed var(--line);border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;color:var(--steel);cursor:pointer}
.gv-addphoto:hover{border-color:var(--graphite);color:var(--graphite)}
.gv-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.gv-form-h{font-family:var(--fd);font-weight:800;font-size:1.3rem}[dir=rtl] .gv-form-h{font-family:var(--far);font-weight:700}
.gv-form-acts{display:flex;gap:10px;flex-wrap:wrap}
.gv-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.gv-fam{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface,#F6F8FA);cursor:pointer;font:inherit;color:var(--graphite)}
.gv-fam span{width:100%}.gv-fam svg{width:100%;height:auto}
.gv-fam b{font-size:.86rem}
.gv-fam.on{border-color:var(--red);box-shadow:0 0 0 3px rgba(200,20,31,.14);background:#fff}
.gv-sec{font-weight:700;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line2);padding-top:12px}
.gv-sec span{font-weight:400;font-size:.82rem;color:var(--steel)}
.gv-parts-ed{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 14px}
.gv-prow{display:flex;flex-direction:column;gap:4px}
.gv-dlg{border:1px solid var(--line);border-radius:14px;padding:20px;width:min(420px,92vw);display:flex;flex-direction:column;gap:8px;margin:auto}
.gv-dlg[open]{display:flex}
.gv-dlg::backdrop{background:rgba(15,18,22,.45)}
.gv-dlg p{margin:0 0 6px;color:var(--steel)}
.gv-dlg-acts{display:flex;gap:10px;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--red2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:640px){.gv-acts{grid-template-columns:1fr}.gv-hero{aspect-ratio:16/10}.gv-hero-name{font-size:1.35rem}}

/* account side card: the customer's car on top (display only) */
.side-car{position:relative;margin:0 0 0;border-bottom:1px solid var(--line2)}
.side-car-ph{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:linear-gradient(160deg,#2A2F37,#0F1216);position:relative;overflow:hidden;cursor:pointer}
.side-car-ph img{width:100%;height:100%;object-fit:cover;display:block}
.side-car-art{position:absolute;inset:0;display:grid;place-items:center}.side-car-art svg{width:78%;height:auto}
.side-car-cap{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:22px 12px 8px;background:linear-gradient(0deg,rgba(8,10,12,.85),transparent);color:#fff;text-align:start}
.side-car-cap b{font-size:.95rem}.side-car-cap i{font-style:normal;font-family:var(--fd);font-weight:800}
.side-car-sw{position:absolute;top:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:50%;background:rgba(10,12,15,.6);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer}
@media (max-width:900px){.side-car-ph{aspect-ratio:16/6}}

/* order form: optional copy from the garage */
.gar-use{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.gar-use-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--graphite);border-radius:10px;background:#fff;font:inherit;font-weight:700;color:var(--graphite);cursor:pointer}
.gar-use-btn:hover{background:var(--soft)}
.gar-use.done{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;background:#E4F3EA;color:#1E6B40;border-radius:10px;padding:9px 12px;font-weight:600;font-size:.9rem}
.gar-hint{font-size:.8rem;color:var(--steel);margin-top:4px}

/* after payment: optional "Add to my garage" */
.gar-offer{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin:18px 0 6px;text-align:start}
.gar-offer-art{background:linear-gradient(160deg,#2A2F37,#0F1216);border-radius:10px;aspect-ratio:16/10;display:grid;place-items:center}.gar-offer-art svg{width:86%;height:auto}
.gar-offer-b{display:flex;flex-direction:column;gap:4px}.gar-offer-b span{color:var(--steel);font-size:.9rem}
.gar-offer-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
@media (max-width:520px){.gar-offer{grid-template-columns:1fr}}
/* a garage card from Musaad in a conversation */
.gcm{margin-top:8px;background:#fff;border:1px solid #CFC4F3;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:220px;max-width:340px;color:var(--graphite)}
.gcm-h{font-weight:700}
.gcm-r{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;border-top:1px dashed var(--line2);padding-top:5px}
.gcm-r span{color:var(--steel)}
.gcm-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.gcm-b{padding:7px 12px!important;font-size:.86rem!important}
.gcm-done{color:#1E7A46;font-weight:700;font-size:.88rem}
.gcm-note{color:var(--steel);font-size:.84rem}

/* ═══════════════ ACCOUNT: a fixed control panel ═══════════════
   Computer: a dark panel pinned to the side under the header (like the admin console); the page
   uses the whole width next to it. Phone: a fixed tab bar at the bottom, and "More" opens the rest. */
.acc-more-btn,.acc-backdrop{display:none}
@media (min-width:821px){
  #app .shell{max-width:none!important;margin:0!important;grid-template-columns:272px minmax(0,1fr)!important;min-height:calc(100dvh - var(--acc-top,69px))}
  #app .shell .sidebar{position:sticky;top:var(--acc-top,69px);height:calc(100dvh - var(--acc-top,69px));max-height:none;margin:0!important;padding:0!important;display:flex;flex-direction:column;overflow:hidden;
    background:var(--con);border:0!important;border-inline-end:1px solid var(--con-line)!important;border-radius:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.02)}
  #app .shell .side-car{flex:none;border-bottom:1px solid var(--con-line)}
  #app .shell .side-car-ph{aspect-ratio:16/8.5}
  #app .shell .side-profile{flex:none;display:flex;align-items:center;gap:12px;padding:16px 18px!important;background:transparent;border-bottom:1px solid var(--con-line)!important}
  #app .shell .side-profile .avatar{flex:none;width:42px;height:42px;margin:0;border-radius:10px;background:var(--con-key2);border:1px solid #333A44;color:#fff;font-size:1rem}
  #app .shell .side-profile>div:last-child{min-width:0}
  #app .shell .side-name{color:#fff;font-size:1.05rem}
  #app .shell .side-email{color:var(--con-ink);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app .shell .side-nav{flex:1;min-height:0;overflow-y:auto;padding:10px!important;gap:3px;scrollbar-width:thin;scrollbar-color:#2C3139 transparent}
  #app .shell .side-nav .pwp-thumb{background:linear-gradient(180deg,#2B313A,#232830);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5)}
  #app .shell .side-link{color:var(--con-ink)!important;padding:9px 12px!important;border-radius:9px!important}
  #app .shell .side-nav .side-link+.side-link::before{display:none}
  #app .shell .side-link svg{background:var(--con-key);border-color:var(--con-line);color:#D5DAE1}
  #app .shell .side-link:hover,#app .shell .side-nav .side-link.is-under:not(.active){color:#fff!important}
  #app .shell .side-nav:not(.has-thumb) .side-link:hover:not(.active){background:var(--con-key)!important}
  #app .shell .side-nav .side-link.active{background:#262B33!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  #app .shell .side-nav .side-link.active::before{display:block;content:"";opacity:1;position:absolute;top:10px;bottom:10px;height:auto;inset-inline-start:0;inset-inline-end:auto;width:3px;border-radius:3px;background:var(--red);box-shadow:0 0 10px rgba(228,38,47,.7)}
  #app .shell .side-link.active svg{background:var(--red);border-color:var(--red);color:#fff}
  #app .shell .side-nav .side-link::after{opacity:.3}
  #app .shell #wsLink{margin-top:8px!important;border-top:1px solid var(--con-line)!important;border-radius:0!important;padding-top:14px!important;color:#C9A24A!important}
  #app .shell .acc-more-btn{display:none!important}
  #app .shell .side-logout{flex:none;width:auto!important;margin:auto 0 0!important;padding:10px 12px 14px!important;border:0!important;border-top:1px solid var(--con-line)!important;border-radius:0;background:transparent!important}
  #app .shell .side-logout .side-link{justify-content:center!important}
  html.acct-msgs .pwp-chat{display:none!important}
  #app .shell .side-logout .side-link{background:var(--con-key)!important;border:1px solid var(--con-line)!important;color:#FF8A90!important;margin:0!important}
  #app .shell .side-logout .side-link:hover{background:#2A1417!important;border-color:#5A2127!important}
  #app .shell .side-logout .side-link svg{color:#FF8A90}
  #app .shell .content{padding:28px clamp(24px,3vw,48px) 64px!important}
  html:not(.acct-msgs) #app .shell .content>*{max-width:1320px}
  html.acct-msgs #app .shell .content{padding:20px clamp(16px,2vw,28px) 20px!important}
  html.acct-msgs #app .mm{grid-template-columns:340px minmax(0,1fr)}
  html.acct-msgs #app .mm-side,html.acct-msgs #app .mm-pane .mx-chat,html.acct-msgs #app .mm-pick{height:calc(100dvh - var(--acc-top,69px) - 40px);min-height:480px}
  html.acct-msgs #app .mx-chat .msg-bub{max-width:min(720px,70%)}
}
@media (min-width:821px) and (max-width:1100px){ #app .shell{grid-template-columns:232px minmax(0,1fr)!important} html.acct-msgs #app .mm{grid-template-columns:280px minmax(0,1fr)} }

@media (max-width:820px){
  #app .shell{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  #app .shell .sidebar{position:fixed;inset-inline:0;bottom:0;top:auto;z-index:70;margin:0!important;max-height:none;overflow:visible;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;column-gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;
    background:var(--con);border:0!important;border-top:1px solid var(--con-line)!important;border-radius:0;box-shadow:0 -12px 30px -22px rgba(0,0,0,.7)}
  #app .shell .side-nav{display:contents!important}
  #app .shell .side-nav .pwp-thumb{display:none!important}
  #app .shell .side-car,#app .shell .side-profile,#app .shell .side-logout,
  #app .shell .side-nav>.side-link[data-tab=profile],#app .shell .side-nav>.side-link[data-tab=address],#app .shell .side-nav>.side-link[data-tab=security],#app .shell .side-nav>.side-link.side-videos,#app .shell .side-nav>#wsLink{display:none!important}
  /* the bar */
  #app .shell .side-nav>.side-link,#app .shell .acc-more-btn{order:5;position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;min-width:0;
    padding:6px 2px!important;margin:0!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;
    color:#8C96A3!important;font-size:.66rem!important;font-weight:600;line-height:1.1;text-align:center;white-space:normal;overflow:visible;-webkit-tap-highlight-color:transparent}
  #app .shell .side-nav>.side-link::after,#app .shell .side-nav>.side-link::before{display:none!important}
  #app .shell .side-nav>.side-link svg,#app .shell .acc-more-btn svg{width:22px;height:22px;padding:0;border:0!important;background:none!important;color:currentColor}
  #app .shell .side-nav>.side-link.active,#app .shell .acc-more-btn.on{color:#fff!important}
  #app .shell .side-nav>.side-link.active::before,#app .shell .acc-more-btn.on::before{content:"";display:block!important;position:absolute;top:-6px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--red);box-shadow:0 0 10px rgba(228,38,47,.7);opacity:1}
  #app .shell .side-nav>.side-link.active svg{color:#fff}
  #app .shell .side-link .side-dot,#app .shell .side-link .msg-badge{position:absolute;top:4px;inset-inline-start:calc(50% + 6px);margin:0!important}
  #app .shell .acc-more-btn{display:flex!important;cursor:pointer;font-family:inherit}
  [dir=rtl] #app .shell .acc-more-btn{font-family:var(--far)}
  /* "More": the rest of the menu slides up above the bar */
  html.acc-more #app .shell .sidebar{border-radius:18px 18px 0 0;max-height:88dvh;overflow-y:auto;padding-top:0!important;animation:accUp .22s cubic-bezier(.2,.8,.2,1)}
  html.acc-more #app .shell .side-car{display:block!important;order:1;grid-column:1/-1;margin:0 -6px;border-radius:18px 18px 0 0;overflow:hidden;border-bottom:1px solid var(--con-line)}
  html.acc-more #app .shell .side-car-ph{aspect-ratio:16/7}
  html.acc-more #app .shell .side-profile{display:flex!important;order:2;grid-column:1/-1;align-items:center;gap:12px;padding:14px 8px!important;background:transparent;border-bottom:1px solid var(--con-line)!important}
  html.acc-more #app .shell .side-profile .avatar{width:42px;height:42px;margin:0;border-radius:10px;background:var(--con-key2);border:1px solid #333A44;color:#fff}
  html.acc-more #app .shell .side-name{color:#fff}
  html.acc-more #app .shell .side-email{color:var(--con-ink)}
  html.acc-more #app .shell .side-profile>div:last-child{padding:0;min-width:0}
  html.acc-more #app .shell .side-nav>.side-link[data-tab=profile],html.acc-more #app .shell .side-nav>.side-link[data-tab=address],html.acc-more #app .shell .side-nav>.side-link[data-tab=security],html.acc-more #app .shell .side-nav>.side-link.side-videos,html.acc-more #app .shell .side-nav>#wsLink{
    display:flex!important;order:3;grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:12px;min-height:52px;padding:8px 10px!important;margin:2px 0!important;font-size:.95rem!important;color:#D5DAE1!important;border-radius:10px!important}
  html.acc-more #app .shell .side-nav>.side-link:is([data-tab=profile],[data-tab=address],[data-tab=security],.side-videos) svg{width:18px;height:18px;padding:7px;border-radius:8px;background:var(--con-key)!important;border:1px solid var(--con-line)!important}
  html.acc-more #app .shell .side-link[data-tab=profile].active,html.acc-more #app .shell .side-link[data-tab=address].active,html.acc-more #app .shell .side-link[data-tab=security].active,html.acc-more #app .shell .side-link[data-tab=datalog].active,html.acc-more #app .shell .side-link[data-tab=videos].active{background:#262B33!important;color:#fff!important}
  html.acc-more #app .shell .side-link[data-tab=profile].active::before,html.acc-more #app .shell .side-link[data-tab=address].active::before,html.acc-more #app .shell .side-link[data-tab=security].active,html.acc-more #app .shell .side-link[data-tab=datalog].active::before,html.acc-more #app .shell .side-link[data-tab=videos].active::before{display:none!important}
  html.acc-more #app .shell #wsLink{color:#C9A24A!important}
  html.acc-more #app .shell .side-logout{display:block!important;order:4;grid-column:1/-1;padding:8px 2px 12px!important;margin:0 0 6px!important;border:0!important;border-bottom:1px solid var(--con-line)!important;background:transparent!important;position:static;width:auto;height:auto;overflow:visible}
  html.acc-more #app .shell .side-logout .side-link{display:flex!important;position:static;width:100%;height:46px;justify-content:center!important;gap:10px;font-size:.95rem!important;color:#FF8A90!important;background:var(--con-key)!important;border:1px solid var(--con-line)!important;border-radius:10px}
  html.acc-more #app .shell .side-logout .side-link *:not(svg):not(path){display:initial}
  html.acc-more #app .shell .side-logout .side-link svg{position:static;margin:0!important;color:#FF8A90;stroke:#FF8A90}
  html.acc-more #app .acc-backdrop{display:block;position:fixed;inset:0;z-index:69;background:rgba(8,10,12,.55);animation:accFade .2s ease}
  html.acc-more,html.acc-more body{overflow:hidden}
  html.acc-more .pwp-chat{display:none!important}
  /* a conversation opened full screen hides the bar */
  html.mx-open #app .shell .sidebar{display:none!important}
  html.acc-bar .pwp-chat{bottom:calc(84px + env(safe-area-inset-bottom))!important}
  html.acc-more .pwp-chat{display:none!important}
}
@keyframes accUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes accFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.acc-more #app .shell .sidebar,html.acc-more #app .acc-backdrop{animation:none}}

/* ═══════════════ CONVERSATIONS: like WhatsApp ═══════════════
   My messages always on the right and the other side on the left, in Arabic and English.
   Voice notes play left to right (play button on the left), whatever the page language. */
.msg-row,.ws-row{direction:ltr}
[dir=rtl] .msg-row>*,[dir=rtl] .ws-row>*{direction:rtl}
.msg-row{justify-content:flex-start}.msg-row.me{justify-content:flex-end}
.ws-row{justify-content:flex-start}.ws-row.team{justify-content:flex-end}.ws-row.team.bot{justify-content:flex-start}
.mx-chat .msg-row.them .msg-bub,.ws-row.cust .ws-bub,.ws-row.team.bot .ws-bub{border-bottom-left-radius:5px!important;border-bottom-right-radius:16px!important}
.mx-chat .msg-row.me .msg-bub,.ws-row.team:not(.bot) .ws-bub{border-bottom-right-radius:5px!important;border-bottom-left-radius:16px!important}
.voice,.voice audio{direction:ltr}
[dir=rtl] .voice .vtx{direction:rtl}

/* Musaad cards: choose a new time */
.acm-opts{display:flex;flex-direction:column;gap:6px;width:100%;margin:2px 0 4px}
.acm-opts.need .acm-o{border-color:var(--red)}
.acm-o{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:.9rem;background:#fff}
.acm-o input{width:auto;margin:0;accent-color:var(--red)}
.acm-o:has(input:checked){border-color:var(--red);background:#FFF4F4}
.gcm-note.bad{color:var(--red2)}

/* ═══════════════ TOOLBARS: one look everywhere ═══════════════
   Any row of tools, tabs or filters is a dark console strip, a step lighter than the header, so it reads as a
   toolbar and not as page content. Each choice is a key with a visible edge; the chosen key is lit PWP red.
   Applied through the existing classes (no markup change); add class "tb" to any new row to get the same look.
   Strips: order tools (.otabs), list filters (.fx),
   admin rows (.bot-tabs, .tools), legal (.tabs), bulk bar (.bulk). Dark wells for segmented controls:
   .fx-seg, .dept, .auth-tabs. Content areas stay light. The Workshop conversations page keeps its own light look
   (owner 3/10/2026). */
:root:not(#_){--tb:#1D2229;--tb-well:#121519;--tb-edge:#2F353E;--tb-key:#2A3039;--tb-key-h:#363D47;--tb-key-ln:#4C5560;
  --tb-key-lnh:#6A7480;--tb-ink:#E8EBEE;--tb-mute:#B3BCC6;--tb-on:#C8141F;--tb-on-ln:#E1252F;--tb-focus:#E9C46A}

/* the strip */
body:not(#_) :is(.tb,.otabs,.fx,.bot-tabs,.tabs,.tools,.bulk){
  background:var(--tb)!important;border:1px solid var(--tb-edge)!important;color:var(--tb-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 16px -14px rgba(0,0,0,.7)!important;border-radius:12px!important}
body:not(#_) :is(.tb,.bot-tabs,.tabs,.tools){display:flex;align-items:center;gap:6px!important;padding:6px!important}
body:not(#_) .fx{padding:10px!important;gap:8px!important}
body:not(#_) .bulk{padding:8px 12px!important}
/* tab bars: one line, swipe sideways on a narrow screen instead of wrapping */
body:not(#_) :is(.tb,.otabs,.bot-tabs,.tabs){flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--tb-key-ln) transparent;-webkit-overflow-scrolling:touch}
body:not(#_) :is(.tb,.otabs,.bot-tabs,.tabs)>*{flex:none}

/* strips that sit inside a card: flush with its edges */
body:not(#_) .otabs{gap:6px!important;padding:7px!important;border:0!important;border-bottom:1px solid #0E1013!important;border-radius:0!important}
body:not(#_) .otools{border-color:var(--tb-edge)!important}

/* keys */
body:not(#_) :is(.tb,.otabs,.q-filters,.bot-tabs,.tabs,.fx-seg,.dept,.auth-tabs)>:is(button,a,.tb-k),
body:not(#_) .tb .tbk{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px!important;margin:0!important;
  border:1px solid var(--tb-key-ln)!important;border-radius:9px!important;background:var(--tb-key)!important;color:var(--tb-ink)!important;
  font-family:inherit;font-weight:600!important;font-size:.86rem!important;line-height:1.2;letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.45)!important;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
body:not(#_) .fx-tog{min-height:40px;padding:0 14px!important;border:1px solid var(--tb-key-ln)!important;border-radius:9px!important;background:var(--tb-key)!important;color:var(--tb-ink)!important;
  font-weight:600!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.45)!important;align-items:center;gap:6px}
body:not(#_) :is(.tb,.otabs,.q-filters,.bot-tabs,.tabs,.fx-seg,.dept,.auth-tabs)>:is(button,a,.tb-k):hover:not(:is(.on,.active,[aria-selected="true"],[aria-current]:not([aria-current="false"]))),
body:not(#_) .fx-tog:hover{
  background:var(--tb-key-h)!important;border-color:var(--tb-key-lnh)!important;color:#fff!important}
/* the chosen key: lit red */
body:not(#_) :is(.tb,.otabs,.q-filters,.bot-tabs,.tabs,.fx-seg,.dept,.auth-tabs)>:is(button,a,.tb-k):is(.on,.active,[aria-selected="true"],[aria-current]:not([aria-current="false"])){
  background:var(--tb-on)!important;border-color:var(--tb-on-ln)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(0,0,0,.35),0 0 14px -3px rgba(225,37,47,.75)!important}
/* filter chips (what the list shows) light up white, so they never compete with the red "where am I" tabs */
body:not(#_) :is(.q-filters)>button:is(.on,.active,[aria-pressed="true"]):not(#_){
  background:#F4F6F8!important;border-color:#FFFFFF!important;color:var(--graphite)!important;
  box-shadow:inset 0 -2px 0 var(--tb-on),0 0 0 1px rgba(0,0,0,.35)!important}
/* keyboard focus */
body:not(#_) :is(.tb,.otabs,.q-filters,.bot-tabs,.tabs,.fx-seg,.dept,.auth-tabs,.fx,.tools,.bulk) :is(button,a,label,.tb-k):focus-visible{outline:2px solid var(--tb-focus)!important;outline-offset:2px}
body:not(#_) .tb>button:disabled{opacity:.55;cursor:not-allowed}

/* dark wells for segmented controls; the sliding thumb is not used here, the chosen key is lit instead */
body:not(#_) :is(.fx-seg,.dept,.auth-tabs){background:var(--tb-well)!important;border:1px solid var(--tb-edge)!important;border-radius:12px!important;
  padding:4px!important;gap:4px!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.55)!important;overflow:visible}
body:not(#_) .dept{display:inline-flex!important;max-width:100%;margin-block:8px;overflow-x:auto!important}
body:not(#_) .auth-tabs>.auth-tab{flex:1}
body:not(#_) :is(.fx-seg,.dept,.auth-tabs,.tb)>.pwp-thumb{display:none!important}

/* counters and badges on keys */
body:not(#_) :is(.fx-seg,.dept,.q-filters)>button :is(b,.n){color:inherit!important;opacity:.85}
body:not(#_) .fx-tog b{background:var(--tb-on)!important;color:#fff!important}


/* words inside a strip */
body:not(#_) :is(.tb,.fx,.tools,.bulk) :is(.hint,.fx-meta,.cv-lang,label:not(.cv-ic):not(.fx-search),small){color:var(--tb-mute)!important}
/* the light filter strip (.fx2, Workshop and admin lists) keeps grey words: the light ones above vanished on it (layout check 2026-10-09) */
/* (two :not(#_) because the rule above counts as id+3 classes+2 tags through label:not(.cv-ic):not(.fx-search)) */
body:not(#_):not(#_) .fx.fx2 :is(.hint,.fx-meta):not(:is(.fx-seg,.tb) *){color:#5D6672!important}
body:not(#_) :is(.tb,.fx,.tools,.bulk) .hint.ok{color:#86D9AC!important}
body:not(#_) :is(.tb,.fx,.tools,.bulk) .hint.bad,body:not(#_) .fx .fx-clear{color:#FF8E94!important}
body:not(#_) .bulk b{color:#fff}
body:not(#_) :is(.tb,.tools) .hint{margin:0!important;align-self:center}

@media (prefers-reduced-motion:reduce){body:not(#_) :is(.tb,.otabs,.q-filters,.bot-tabs,.tabs,.fx-seg,.dept,.auth-tabs)>*{transition:none!important}}