/* Site chrome — shared by every page (homepage included): desktop mega-menu header (.hp-mm), mobile header (.mch),
   mobile drill-down drawer (.mdr), site footer (.sft) and the WhatsApp icon on buttons (.hp-wa).
   From the "Mega menu", "Mobile menu" and inner-page footer artboards of the Tyre Shop UAE design. */
/* ---- UAE dirham sign (U+20C3): a one-glyph font ("TSO Dirham", only that character via unicode-range) placed first
   in every font-family list of the theme, so prices show the symbol the same way on every device. Prices print it
   via tso_dirham(). ---- */
@font-face{font-family:'TSO Dirham';src:url("../fonts/dirham.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block;unicode-range:U+20C3}
/* WhatsApp buttons use the site's WhatsApp icon */
.hp-wa svg{display:none}
.hp-wa::before{content:"";flex:none;width:26px;height:26px;margin:-3px 0;border-radius:50%;background:url("../img/whatsapp.svg") center/contain no-repeat}
/* ===== Mega-menu header (new homepage, desktop) — from the "Mega menu" artboard ===== */
.hp-mm{position:relative;z-index:45;background:#0D0E10;color:#fff;font-family:'TSO Dirham','Archivo',system-ui,sans-serif}
.hp-mm a{color:inherit;text-decoration:none}
.hp-mm a:hover{color:#D7261E}
.hp-mm .mm-wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.hp-mm .mm-util{border-bottom:1px solid rgba(255,255,255,0.08);color:#9A9EA6}
.hp-mm .mm-util>.mm-wrap{display:flex;justify-content:space-between;align-items:center;height:42px;font-size:13px}
.hp-mm .mm-util-l{display:flex;gap:24px;align-items:center}
.hp-mm .mm-util-l span{display:flex;align-items:center;gap:8px}
.hp-mm .mm-util-r{display:flex;gap:22px;align-items:center;font-size:12px;letter-spacing:0.04em}
.hp-mm .mm-head{display:flex;align-items:center;gap:32px;height:100px}
.hp-mm .mm-search{flex:1;display:flex;align-items:center;height:52px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:0 6px 0 22px;gap:12px;margin:0;position:relative}
.hp-mm .mm-search:focus-within{border-color:rgba(255,255,255,0.35)}
.hp-mm .mm-search input[type=search]{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;font-family:'TSO Dirham',Archivo,sans-serif;font-size:15px}
.hp-mm .mm-kbd{font-size:11px;color:#6E727A;border:1px solid rgba(255,255,255,0.14);border-radius:6px;padding:3px 7px}
.hp-mm .mm-call{display:flex;align-items:center;gap:12px;color:#fff}
.hp-mm .mm-call-ic{width:46px;height:46px;border-radius:999px;background:rgba(215,38,30,0.16);display:flex;align-items:center;justify-content:center;color:#D7261E}
.hp-mm .mm-icon{width:46px;height:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.16);color:#fff;flex:none}
.hp-mm .mm-badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 4px;border-radius:99px;background:#D7261E;font-size:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.hp-mm .mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font-family:'TSO Dirham','Archivo',sans-serif;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.hp-mm .mm-btn:hover{filter:brightness(1.05)}
.hp-mm .mm-navbar{border-top:1px solid rgba(255,255,255,0.08);position:relative}
.hp-mm .mm-nav{display:flex;align-items:center}
.hp-mm .mm-nav-i{display:inline-flex;align-items:center;gap:6px;height:64px;padding:0 16px;border:0;background:transparent;color:#C9CCD1;font-family:'TSO Dirham','Archivo',sans-serif;font-size:15px;font-weight:600;cursor:pointer;position:relative;transition:color .2s ease;white-space:nowrap}
.hp-mm .mm-nav-i:hover,.hp-mm .mm-nav-i[aria-expanded=true]{color:#fff}
.hp-mm .mm-nav-i[aria-expanded=true]::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#D7261E}
.hp-mm .mm-chev{transition:transform .25s ease}
.hp-mm .mm-nav-i[aria-expanded=true] .mm-chev{transform:rotate(180deg)}
.hp-mm .mm-panel{position:absolute;left:0;right:0;top:100%;background:#fff;color:#111214;border-radius:0 0 28px 28px;box-shadow:0 40px 80px -30px rgba(0,0,0,0.55);z-index:5}
.hp-mm .mm-panel[hidden],.hp-mm [data-mm-panel][hidden],.hp-mm .mm-dim[hidden]{display:none!important}
.hp-mm .mm-panel-in{padding-top:36px;padding-bottom:40px;min-height:470px}
.hp-mm .mm-grid{display:grid;gap:40px}
.hp-mm .mm-colh{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(17,18,20,0.1);font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;color:#5F636B}
.hp-mm .mm-colh b{font-weight:500;color:#A3A6AD}
.hp-mm .mm-sizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hp-mm .mm-flap{position:relative;display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 14px;background:#16181B;border-radius:10px;color:#fff;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;font-size:15px;transition:background .2s ease}
.hp-mm .mm-flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,0.6)}
.hp-mm .mm-flap:hover{background:#D7261E;color:#fff}
.hp-mm .mm-flap:hover span{color:#fff!important}
.hp-mm .mm-list{display:flex;flex-direction:column;gap:2px}
.hp-mm .mm-vrow{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;transition:background .2s ease;color:#111214}
.hp-mm .mm-vrow:hover{background:#F4F4F2;color:#111214}
.hp-mm .mm-vic{width:40px;height:40px;border-radius:12px;background:#F2F2F0;display:flex;align-items:center;justify-content:center;flex:none;color:#111214}
.hp-mm .mm-vrow:hover .mm-vic{background:#111214;color:#fff}
.hp-mm .mm-vt{display:flex;flex-direction:column;gap:2px}
.hp-mm .mm-vt span{font-size:15px;font-weight:600}
.hp-mm .mm-vt small{font-size:12px;color:#6E727A}
.hp-mm .mm-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* Tyre Brands panel: two logos per row so each logo has room to read (3 per row gave 81px tiles) */
.hp-mm #mm-brands .mm-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-mm #mm-brands .mm-lt{height:58px;padding:8px 14px}
.hp-mm .mm-lt{display:flex;align-items:center;justify-content:center;height:64px;padding:8px 7px;background:#fff;border:1px solid rgba(17,18,20,0.08);border-radius:14px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;color:#111214}
.hp-mm .mm-lt img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.hp-mm .mm-lt b{font-size:13px}
.hp-mm .mm-lt:hover{border-color:rgba(17,18,20,0.22);transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(0,0,0,0.35)}
.hp-mm .mm-ct{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:96px;padding:8px 4px 8px;background:#F6F6F4;border:1px solid transparent;border-radius:14px;transition:all .2s ease;color:#111214}
.hp-mm .mm-ct img{height:48px;max-width:92%;object-fit:contain;filter:grayscale(1);opacity:.9;transition:all .2s ease}
.hp-mm .mm-ct span{font-size:12px;font-weight:500;color:#4D5158}
.hp-mm .mm-ct:hover{background:#fff;border-color:rgba(17,18,20,0.14);box-shadow:0 12px 24px -16px rgba(0,0,0,0.35)}
.hp-mm .mm-ct:hover img{filter:none;opacity:1}
.hp-mm .mm-mono{width:34px;height:34px;border-radius:50%;background:#111214;color:#fff;font-style:normal;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.hp-mm .mm-more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#D7261E;margin-top:16px}
.hp-mm .mm-more:hover{color:#111214}
.hp-mm .mm-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:#6E727A}
.hp-mm .mm-promo{border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;color:#fff}
.hp-mm .mm-promo a:hover{color:inherit}
.hp-mm .mm-plain{font-size:14px;font-weight:600;text-align:center;color:#fff}
.hp-mm .mm-bg-tread{background-image:linear-gradient(160deg,rgba(13,14,16,0.82),rgba(13,14,16,0.96)),url("../img/hp/banner-tyre4.webp");background-size:cover;background-position:center}
.hp-mm .mm-sidewall{display:flex;gap:6px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);margin-top:4px}
.hp-mm .mm-sidewall span{font-size:18px;font-weight:600}
.hp-mm .mm-sidewall i{font-style:normal;color:#6E727A;font-family:'TSO Dirham','JetBrains Mono',monospace}
.hp-mm .mm-sidewall small{font-size:12px;color:#9A9EA6;margin-left:auto}
.hp-mm .mm-feat-img{width:92px;height:92px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.hp-mm .mm-feat-img img{height:80px;width:auto;mix-blend-mode:multiply}
.hp-mm .mm-bcard{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px 10px;border-radius:16px;background:#F6F6F4;border:1px solid transparent;transition:all .2s ease;color:#111214}
.hp-mm .mm-bcard img{height:84px;max-width:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s ease}
.hp-mm .mm-bcard span{font-size:13px;font-weight:600}
.hp-mm .mm-bcard:hover{background:#fff;border-color:rgba(17,18,20,0.14);box-shadow:0 12px 24px -16px rgba(0,0,0,0.35)}
.hp-mm .mm-bcard:hover img{transform:scale(1.06)}
.hp-mm .mm-srow{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;border:1px solid rgba(17,18,20,0.08);transition:all .2s ease;color:#111214}
.hp-mm .mm-srow img{width:56px;height:44px;object-fit:contain;mix-blend-mode:multiply}
.hp-mm .mm-srow span{font-size:14px;font-weight:600;flex:1}
.hp-mm .mm-srow i{font-style:normal;color:#A3A6AD}
.hp-mm .mm-srow:hover{border-color:rgba(17,18,20,0.2);box-shadow:0 12px 24px -16px rgba(0,0,0,0.3)}
.hp-mm .mm-batt-img{height:120px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center}
.hp-mm .mm-batt-img img{height:100px;mix-blend-mode:multiply}
.hp-mm .mm-svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hp-mm .mm-svc{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;background:#F6F6F4;border:1px solid transparent;transition:all .25s ease;min-height:200px;color:#111214}
.hp-mm .mm-svc:hover{background:#fff;border-color:rgba(17,18,20,0.14);box-shadow:0 18px 36px -22px rgba(0,0,0,0.35);color:#111214}
.hp-mm .mm-svc .mm-vic{background:#fff}
.hp-mm .mm-svc:hover .mm-vic{background:#D7261E;color:#fff}
.hp-mm .mm-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:600;align-self:flex-start}
.hp-mm .mm-sel{height:44px;border-radius:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:#fff;padding:0 12px;font-family:'TSO Dirham','Archivo',sans-serif;font-size:14px;width:100%}
.hp-mm .mm-sel option{color:#111214}
.hp-mm .mm-sel:disabled{opacity:.55}
.hp-mm .mm-dim{position:fixed;inset:0;background:rgba(13,14,16,0.55);backdrop-filter:blur(2px);z-index:-1}
@media (max-width:1240px){.hp-mm .mm-call,.hp-mm .mm-kbd{display:none}.hp-mm .mm-head{gap:20px}.hp-mm .mm-nav-i{padding:0 11px;font-size:14px}}
@media (max-width:1080px){.hp-mm .mm-nav-x{display:none}.hp-mm .mm-grid{grid-template-columns:1fr 1fr!important}.hp-mm .mm-util-l span:last-child{display:none}}
/* ---- mobile menu: drill-down drawer (Mobile menu artboard) ---- */
html.mdr-lock,html.mdr-lock body{overflow:hidden}
.mdr{position:fixed;inset:0;z-index:200;background:#0D0E10;color:#fff;display:flex;flex-direction:column;font-family:'TSO Dirham','Archivo',system-ui,sans-serif}
.mdr[hidden]{display:none}
.mdr [hidden]{display:none!important}
.mdr-top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;background:rgba(13,14,16,0.94);border-bottom:1px solid rgba(255,255,255,0.06);min-height:68px}
.mdr-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mdr-view{padding:16px 18px 30px}
.mdr-search{position:relative;display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:14px;background:#16181B;border:1px solid rgba(255,255,255,0.1)}
.mdr-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;font-family:'TSO Dirham',Archivo,sans-serif;font-size:16px}
.mdr-search:focus-within{border-color:#D7261E}
.mdr-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px -18px 0;padding:0 18px}
.mdr-chips::-webkit-scrollbar{display:none}
.mdr-chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);font-size:13px;font-weight:600;white-space:nowrap;flex:none;color:#fff}
.mdr-lab{font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:10px;letter-spacing:0.16em;color:#7E828A;padding:22px 0 12px}
.mdr-row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 4px;background:transparent;border:0;border-top:1px solid rgba(255,255,255,0.08);color:#fff;text-align:left;cursor:pointer;font-family:'TSO Dirham','Archivo',sans-serif}
.mdr-ric{width:42px;height:42px;border-radius:13px;background:#16181B;border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.mdr-row:hover .mdr-ric,.mdr-row:focus-visible .mdr-ric{background:#D7261E;border-color:#D7261E}
.mdr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer}
.mdr-call{margin-top:22px;padding:18px;border-radius:20px;background:#16181B;border:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:12px}
.mdr-flap{position:relative;display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 12px;background:#1A1C20;border:1px solid rgba(255,255,255,0.06);border-radius:10px;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;font-size:15px;color:#fff}
.mdr-flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,0.6)}
.mdr-more{display:block;margin-top:12px;font-size:14px;font-weight:600;color:#FF6B63}
.mdr-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mdr-logos[hidden]{display:none}
.mdr .mm-lt{display:flex;align-items:center;justify-content:center;height:56px;padding:8px 7px;background:#fff;border-radius:12px;color:#111214;font-size:13px}
.mdr .mm-lt img{max-width:100%;max-height:100%;object-fit:contain}
.mdr .mm-ct{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:92px;padding:6px 4px;background:#fff;border-radius:12px;color:#111214}
.mdr .mm-ct img{height:44px;max-width:88%;object-fit:contain}
.mdr .mm-ct span{font-size:11px;font-weight:500;color:#4D5158}
.mdr .mm-mono{width:30px;height:30px;border-radius:99px;background:#111214;color:#fff;font-style:normal;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:11px;display:flex;align-items:center;justify-content:center}
.mdr-promo{margin-top:22px;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:10px}
.mdr-tread{background-image:linear-gradient(160deg,rgba(13,14,16,0.75),rgba(13,14,16,0.95)),url("../img/hp/banner-tyre4.webp");background-size:cover;background-position:center}
.mdr-segs{display:flex;gap:4px;padding:4px;background:#16181B;border-radius:13px;border:1px solid rgba(255,255,255,0.08)}
.mdr-seg{flex:1;min-height:40px;border:0;border-radius:10px;font-family:'TSO Dirham','Archivo',sans-serif;font-weight:600;font-size:13px;cursor:pointer;background:transparent;color:#9A9EA6}
.mdr-seg[aria-selected="true"]{background:#fff;color:#111214}
.mdr-feat{margin-top:20px;border-radius:20px;padding:18px;background:#D7261E;display:flex;gap:14px;align-items:center;color:#fff}
.mdr-feat-img{width:84px;height:84px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.mdr-feat-img img{height:72px;mix-blend-mode:multiply}
.mdr-carbox{padding:16px;border-radius:18px;background:#16181B;border:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:10px}
.mdr-sel{height:44px;min-width:0;border-radius:10px;background:#0D0E10;color:#fff;border:1px solid rgba(255,255,255,0.14);padding:0 8px;font-size:14px}
.mdr-sel:disabled{opacity:.5}
.mdr-bc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:14px;background:#fff;color:#111214}
.mdr-bc img{height:70px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.mdr-svc{display:flex;gap:14px;padding:16px;border-radius:18px;background:#16181B;border:1px solid rgba(255,255,255,0.08);color:#fff}

/* ---- page frame (inner pages): desktop header ≥761px, mobile header ≤760px ---- */
.tso-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;color:#111214;padding:10px 16px;font-family:'TSO Dirham','Archivo',sans-serif}
.tso-skip:focus{left:10px}
.hp-mm *,.mch *,.mdr *,.sft *{box-sizing:border-box}
.mch{display:none}
@media (max-width:760px){.sch-d{display:none}.mch{display:block}body.tso-site{padding-bottom:84px}}

/* ---- mobile header ---- */
.mch{font-family:'TSO Dirham','Archivo',system-ui,sans-serif;color:#fff}
.mch a{color:inherit;text-decoration:none}
.mch-ann{background:#0D0E10;color:#9A9EA6;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;min-height:34px;display:flex;align-items:center;justify-content:center;gap:14px;border-bottom:1px solid rgba(255,255,255,0.08)}
.mch-dot{color:#D7261E}
.mch-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:0 16px;background:rgba(13,14,16,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.08)}
.mch{position:sticky;top:-34px;z-index:70} /* above the sticky bottom bar, so the open drawer covers it */
.mch-logo img{height:38px;width:auto;display:block}
.mch .ibtn,.mdr .ibtn{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.04);color:#fff;cursor:pointer;flex:none;padding:0}
.mch [data-menu-toggle][aria-expanded=true]{background:#D7261E;border-color:#D7261E}
.mch-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#D7261E;color:#fff;font:600 10px/18px 'TSO Dirham','JetBrains Mono',monospace;text-align:center}
.mch-badge[hidden]{display:none}

/* ---- drawer: type and links (the homepage got these from its mobile layout) ---- */
.mdr a{color:inherit;text-decoration:none}
.mdr .disp{font-family:'TSO Dirham','Saira Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.92;font-weight:700}
.mdr .mono{font-family:'TSO Dirham','JetBrains Mono',ui-monospace,monospace}

/* ---- site footer (inner pages) ---- */
.sft{background:#0D0E10;color:#fff;font-family:'TSO Dirham','Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.sft a{color:inherit;text-decoration:none}
.sft-wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.sft-cta{background-image:linear-gradient(180deg,rgba(13,14,16,0.55) 0%,rgba(13,14,16,0.88) 70%,#0D0E10 100%),url("../img/hp/xxl.webp");background-size:cover;background-position:center}
.sft-disp{font-family:'TSO Dirham','Saira Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.94;font-weight:700}
.sft-big{font-size:clamp(64px,8.4vw,120px)}
.sft-mono{font-family:'TSO Dirham','JetBrains Mono',ui-monospace,monospace}
.sft-eb{font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.sft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease}
.sft-btn:hover{transform:translateY(-1px)}
.sft-btn-red{background:#D7261E;color:#fff}
.sft-btn-ghost{border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.05);color:#fff}
.sft-card{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:22px;background:#16181B;border:1px solid rgba(255,255,255,0.08);transition:border-color .25s ease,transform .25s ease}
.sft-card:hover{border-color:rgba(255,255,255,0.24);transform:translateY(-3px)}
.sft-circ{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.18);color:#fff;flex:none;transition:all .25s ease}
.sft-card:hover .sft-circ{background:#fff;color:#111214;transform:rotate(-45deg)}
.sft-hair{border-top:1px solid rgba(255,255,255,0.1)}
.sft-pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);white-space:nowrap;transition:all .2s ease}
.sft-pill:hover{background:#fff;color:#111214}
.sft-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px}
.sft-link{display:inline-flex;align-items:center;padding:6px 0;font-size:14px;color:#A9ADB4;transition:color .2s ease}
.sft-link:hover{color:#fff}
.sft-link.fl-mono{font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:13px}
.sft-la{width:0;opacity:0;margin-right:0;transition:all .25s ease;flex:none}
.sft-link:hover .sft-la{width:14px;opacity:1;margin-right:8px}
.sft-wordmark{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.16);font-size:clamp(64px,16.4vw,236px);font-weight:800;line-height:0.8;text-align:center;white-space:nowrap;overflow:hidden;padding-top:8px}
.sft-pay{height:32px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);display:inline-flex;align-items:center;font-size:11px;letter-spacing:0.1em;color:#B8BCC3}
.sft-mbar{display:none}
@media (max-width:1080px){.sft-wrap{padding:0 20px}.sft-cols{grid-template-columns:minmax(0,1fr)!important}.sft-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sft-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
.sft-wrap{padding:0 16px}
.sft-cta .sft-wrap{padding-top:72px!important;padding-bottom:56px!important}
.sft-cards{grid-template-columns:minmax(0,1fr)!important}
.sft-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.sft-mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:8px;padding:8px;border-radius:999px;background:rgba(13,14,16,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.1);font-family:'TSO Dirham','Archivo',sans-serif}
.sft-mbar .sft-btn{min-height:50px}
}
.hp-mm .mm-badge[hidden]{display:none}
.sft-mbar a{text-decoration:none;color:#fff;font-family:'TSO Dirham','Archivo',sans-serif}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- sticky menu bar: the header sticks with a negative offset (set by chrome.js), so the top strip and logo row
   scroll away and only the nav bar stays pinned. --stick = height of what stays pinned, for sticky page elements. ---- */
:root{--stick:65px}
.sch-d,.ts>.hp-mm{position:sticky;top:var(--mm-top,-127px);z-index:45}
@media (max-width:760px){:root{--stick:64px}}

/* ---- "Fitted price ⓘ" label + "Fully fitted price per tyre" popup (tso_fit_label(), inc/site-chrome.php) ---- */
.fit-i{display:inline-flex;align-items:center;gap:5px;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.fit-i>span:first-child{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fit-i svg{flex:none;color:#8D9199;transition:color .2s ease}
.fit-i:hover svg,.fit-i:focus-visible svg{color:#D7261E}
.fit-dlg{width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:44px 52px 48px;border:0;border-radius:20px;background:#fff;color:#111214;font-family:'TSO Dirham','Archivo',system-ui,sans-serif;overflow:visible;box-shadow:0 40px 80px -30px rgba(0,0,0,0.5)}
.fit-dlg::backdrop{background:rgba(13,14,16,0.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.fit-dlg[open]{animation:fitIn .2s ease}
@keyframes fitIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.fit-dlg h2{margin:0 0 18px;font-family:'TSO Dirham','Saira Condensed','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1;text-transform:uppercase;letter-spacing:-0.01em}
.fit-dlg p{margin:0 0 20px;font-size:clamp(16px,1.7vw,19px);line-height:1.55}
.fit-dlg ul{margin:0;padding:0 0 0 24px;font-size:clamp(15px,1.6vw,18px);line-height:1.5;display:flex;flex-direction:column;gap:8px}
.fit-dlg li::marker{color:#D7261E}
.fit-x{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:999px;border:0;background:#D7261E;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px -6px rgba(215,38,30,0.6)}
.fit-x:hover{background:#B81F18}
@media (max-width:760px){.fit-dlg{padding:36px 22px 30px}.fit-x{top:-16px;right:12px}}

/* ---- FAQ, site-wide look: numbered question cards + "Still have a question?" strip (tso_faq_card(), tso_faq_cta(),
   template-parts/ui/faq.php). Self-contained so it works on the homepage and every inner page. ---- */
.faqx{padding:clamp(64px,7vw,96px) 0;font-family:'TSO Dirham','Archivo',system-ui,sans-serif;color:#111214}
.faqx-wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.faqx-head{display:flex;flex-direction:column;gap:14px;padding-bottom:32px}
.faqx-eb{font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#5F636B}
.faqx-h{margin:0;font-family:'TSO Dirham','Saira Condensed','Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.94;font-size:clamp(40px,4.6vw,64px);color:#111214}
.faqx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.faqx-grid.one{grid-template-columns:minmax(0,1fr)}
.fqx{background:#fff;border:1px solid rgba(17,18,20,0.08);border-radius:20px;transition:border-color .2s ease,box-shadow .25s ease;font-family:'TSO Dirham','Archivo',system-ui,sans-serif}
.fqx:hover{border-color:rgba(17,18,20,0.2)}
.fqx[open]{border-color:#111214;box-shadow:0 22px 44px -32px rgba(0,0,0,0.45)}
.fqx summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 20px 20px 22px;cursor:pointer}
.fqx summary::-webkit-details-marker{display:none}
.fqx-n{font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:12px;color:#A3A7AE;letter-spacing:0.06em}
.fqx[open] .fqx-n{color:#D7261E}
.fqx-q{font-size:16.5px;font-weight:600;line-height:1.4;color:#111214}
.fqx-pm{position:relative;width:34px;height:34px;border-radius:999px;background:#F2F2F0;flex:none;transition:background .2s ease}
.fqx-pm::before,.fqx-pm::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#111214;border-radius:2px;transition:transform .25s ease,background .2s ease}
.fqx-pm::after{transform:rotate(90deg)}
.fqx[open] .fqx-pm{background:#D7261E}
.fqx[open] .fqx-pm::before{background:#fff}
.fqx[open] .fqx-pm::after{transform:rotate(0deg);background:#fff}
.fqx-a{padding:0 24px 22px 56px;font-size:15px;line-height:1.7;color:#4D5158}
.fqx-a p{margin:0 0 10px}
.fqx-a p:last-child{margin:0}
.fqx-a a{color:#D7261E;text-decoration:underline;text-underline-offset:3px}
.fqx-a ul,.fqx-a ol{margin:0 0 10px;padding-left:20px}
.faqx-cta{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 22px 22px 30px;border-radius:24px;background:#111214;color:#fff;font-family:'TSO Dirham','Archivo',system-ui,sans-serif}
.faqx-cta-t{display:flex;flex-direction:column;gap:4px}
.faqx-cta-t b{font-family:'TSO Dirham','Saira Condensed','Arial Narrow',sans-serif;font-size:28px;font-weight:700;text-transform:uppercase;line-height:1}
.faqx-cta-t span{font-size:14.5px;color:#B8BCC3}
.faqx-cta-b{display:flex;gap:10px;flex-wrap:wrap}
.faqx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s ease}
.faqx-btn:hover{transform:translateY(-1px)}
.faqx-wa,.faqx-wa:hover{background:#1FA855;color:#fff}
.faqx-tel,.faqx-tel:hover{border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.05);color:#fff;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:14px}
@media (max-width:1080px){.faqx-wrap{padding:0 20px}.faqx-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.faqx-wrap{padding:0 16px}.fqx summary{gap:12px;padding:16px}.fqx-q{font-size:15.5px}.fqx-a{padding:0 18px 18px 18px}.faqx-cta{padding:22px}.faqx-cta-b,.faqx-btn{width:100%}}
/* buttons that say "WhatsApp" (class added in inc/site-chrome.php): WhatsApp green */
.wa-green,.wa-green:hover,.wa-green:focus-visible{background:#1FA855!important;border-color:#1FA855!important;color:#fff!important}
.wa-green:hover{background:#178F47!important;border-color:#178F47!important}