/* New homepage — desktop (.ts) and mobile (.hp-m) design systems from "Tyre Shop UAE — Premium Homepage", each scoped to its own layout. */
body{margin:0;background:#0D0E10}
.ts a{color:inherit;text-decoration:none}
.ts a:hover{color:#E1251B}
.ts *{box-sizing:border-box}
.ts{font-family:'TSO Dirham','Archivo',system-ui,sans-serif;color:#111214;background:#F2F2F0;-webkit-font-smoothing:antialiased}
.ts .wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.ts .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}
.ts .mono{font-family:'TSO Dirham','JetBrains Mono',ui-monospace,monospace}
.ts .eyebrow{font-family:'TSO Dirham','JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.ts .ghost{font-family:'TSO Dirham','Saira Condensed',sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.22);line-height:1}
.ts .ghost-d{font-family:'TSO Dirham','Saira Condensed',sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(17,18,20,0.2);line-height:1}
.ts .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-family:'TSO Dirham','Archivo',sans-serif;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease}
.ts .btn:hover{transform:translateY(-1px)}
.ts .btn-ghost{border-color:rgba(255,255,255,0.22);color:#fff;background:rgba(255,255,255,0.04)}
.ts .btn-ghost:hover{background:rgba(255,255,255,0.1);color:#fff}
.ts .btn-dark{background:#111214;color:#fff}
.ts .btn-dark:hover{color:#fff;background:#000}
.ts .circ{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(17,18,20,0.16);transition:all .25s ease;flex:none}
.ts .card-h:hover .circ{background:#111214;color:#fff;border-color:#111214;transform:rotate(-45deg)}
.ts .circ-l{border-color:rgba(255,255,255,0.2)}
.ts .card-h:hover .circ-l{background:#fff;color:#111214;border-color:#fff}
.ts .pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0.02em}
.ts .glass{background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);color:#fff}
.ts .chip{min-height:44px;min-width:58px;padding:0 12px;border-radius:12px;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:15px;font-weight:500;cursor:pointer;transition:all .15s ease}
.ts .tab{flex:1;min-height:44px;border:0;border-radius:10px;font-family:'TSO Dirham','Archivo',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease}
.ts .seg{border:0;background:transparent;cursor:pointer;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;padding:4px 10px;border-radius:12px;transition:all .2s ease}
.ts .field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#9A9EA6;font-family:'TSO Dirham','JetBrains Mono',monospace;letter-spacing:0.08em;text-transform:uppercase}
.ts .field select{min-height:48px;border-radius:12px;background:#0D0E10;color:#fff;border:1px solid rgba(255,255,255,0.14);padding:0 14px;font-family:'TSO Dirham','Archivo',sans-serif;font-size:15px;text-transform:none;letter-spacing:0}
.ts .hair{border-top:1px solid rgba(17,18,20,0.12)}
.ts .hair-l{border-top:1px solid rgba(255,255,255,0.1)}
.ts .spin{animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ts .spin{animation:none}}
.ts .lift{transition:transform .3s ease,box-shadow .3s ease}
.ts .lift:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(0,0,0,0.35)}
.ts .flap{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 10px;background:#1A1C20;border-radius:6px;color:#fff;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;font-size:18px;letter-spacing:0.04em}
.ts .flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,0.65)}
.ts .row-h{transition:background .2s ease}
.ts .row-h:hover{background:rgba(255,255,255,0.04)}
.ts .ticket{position:relative;display:flex;border-radius:22px;overflow:hidden}
.ts .notch{position:absolute;width:28px;height:28px;border-radius:999px;background:#F2F2F0;left:-14px}
.ts .perf{border-left:2px dashed rgba(255,255,255,0.28)}
.ts .g-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.ts .g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ts .g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ts .g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.ts .g-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ts .g-offer{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px}
.ts .g-board{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 120px;align-items:center;gap:16px}
.ts .g-foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px}
.ts .g-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ts .g-emir{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.ts .g-guide{display:grid;grid-template-columns:280px minmax(0,1fr);gap:80px;align-items:start}
.ts .g-art{display:flex;flex-direction:column;gap:22px;padding:0 0 56px;margin-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.1);scroll-margin-top:100px}
.ts .g-head{display:flex;align-items:flex-end;gap:20px}
.ts .guide p{margin:0;font-size:16.5px;line-height:1.8;color:#C2C5CB;max-width:760px}
.ts .il{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.35);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .2s ease}
.ts .il:hover{color:#fff;text-decoration-color:#fff}
.ts .toc:hover{color:#fff}
.ts .g-ticks{display:flex;flex-wrap:wrap;gap:10px}
.ts .tick{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);font-size:14px;color:#E4E6E9}
.ts .g-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ts .spec{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:18px;background:#16181B;border:1px solid rgba(255,255,255,0.08);transition:border-color .2s ease,background .2s ease}
.ts a.spec:hover{border-color:rgba(255,255,255,0.24);background:#1A1C20;color:#fff}
.ts .g-decode{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ts .dec{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:#16181B;border:1px solid rgba(255,255,255,0.08)}
.ts .dec .flap{align-self:flex-start}
.ts .dec-l{font-size:10px;letter-spacing:0.14em;color:#6E727A}
.ts .dec-d{font-size:13px;line-height:1.5;color:#B8BCC3}
.ts .g-signs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.ts .g-signs li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,0.1);font-size:15px;color:#E4E6E9}
.ts .g-signs .mono{font-size:11px;color:#6E727A}
.ts .ccard{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}
.ts .ccard:hover{border-color:rgba(255,255,255,0.24);transform:translateY(-3px);color:#fff}
.ts .g-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px}
.ts .flink{display:inline-flex;align-items:center;padding:6px 0;font-size:14px;color:#A9ADB4;transition:color .2s ease}
.ts .flink:hover{color:#fff}
.ts .fl-arrow{width:0;opacity:0;margin-right:0;transition:all .25s ease;flex:none}
.ts .flink:hover .fl-arrow{width:14px;opacity:1;margin-right:8px}
.ts .fl-mono{font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:13px}
.ts .apill{height:40px;padding:0 16px;font-size:14px;font-weight:500;background:rgba(255,255,255,0.04)}
.ts .apill:hover{background:#fff;color:#111214}
.ts .social:hover{color:#111214}
.ts .wordmark{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.16)}
.ts .bg-hero{background-image:linear-gradient(90deg,#0D0E10 0%,rgba(13,14,16,0.92) 34%,rgba(13,14,16,0.35) 70%,rgba(13,14,16,0.55) 100%),url("../img/hp/banner3.webp");background-size:cover;background-position:right center}
.ts .bg-tread{background-image:linear-gradient(180deg,rgba(13,14,16,0.86),rgba(13,14,16,0.94)),url("../img/hp/banner-tyre4.webp");background-size:cover;background-position:center}
.ts .bg-stack{background-image:linear-gradient(90deg,#0D0E10 40%,rgba(13,14,16,0.6) 100%),url("../img/hp/banner-tire.webp");background-size:cover;background-position:right center}
.ts .bg-cta{background-image:linear-gradient(180deg,rgba(13,14,16,0.55) 0%,rgba(13,14,16,0.85) 70%,#0D0E10 100%),url("../img/hp/xxl.webp");background-size:cover;background-position:center}
.ts .logo-tile{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;overflow:hidden}
.ts .logo-tile img{width:100%;height:100%;object-fit:contain;display:block}
.ts .car-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid rgba(17,18,20,0.08);border-radius:18px;padding:18px 10px 14px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ts .car-tile img{height:46px;width:auto;max-width:90%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .25s ease,opacity .25s ease}
.ts .car-tile:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(0,0,0,.35);border-color:rgba(17,18,20,0.16);color:#111214}
.ts .car-tile:hover img{filter:none;opacity:1}
.ts .g-cars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.ts .prod-img{mix-blend-mode:multiply;height:210px;width:auto;max-width:86%;object-fit:contain;transition:transform .4s ease}
.ts .card-h:hover .prod-img{transform:scale(1.05) rotate(-2deg)}
.ts .offer-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ts .card-h:hover .offer-img{transform:scale(1.04)}
.ts .photo{width:100%;height:100%;object-fit:cover;display:block}
.ts .mbar{display:none}
.ts .hide-m{}
@media (max-width:1080px){.ts .g-hero,.ts .g-2,.ts .g-offer{grid-template-columns:minmax(0,1fr)}
.ts .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-emir{grid-template-columns:repeat(3,minmax(0,1fr))}
.ts .g-6{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-guide{grid-template-columns:minmax(0,1fr)}
.ts .g-links{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px}
.ts .g-decode{grid-template-columns:repeat(3,minmax(0,1fr))}
.ts .g-cars{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.ts .wrap{padding:0 20px}
.ts .g-3,.ts .g-4,.ts .g-6,.ts .g-foot{grid-template-columns:minmax(0,1fr)}
.ts .g-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-emir{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-board{grid-template-columns:minmax(0,1fr) auto}
.ts .hide-m{display:none !important}
.ts .g-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-specs,.ts .g-signs{grid-template-columns:minmax(0,1fr)}
.ts .g-decode{grid-template-columns:repeat(2,minmax(0,1fr))}
.ts .g-head{flex-direction:column;align-items:flex-start;gap:8px}
.ts .h1{font-size:60px !important}
.ts .h2{font-size:44px !important}
.ts .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;gap:8px;padding:8px;border-radius:999px;background:rgba(13,14,16,0.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12)}
.ts{padding-bottom:84px}}

/* ===== mobile ===== */
body{margin:0;background:#0D0E10}
.hp-m a{color:inherit;text-decoration:none}
.hp-m a:hover{color:#E1251B}
.hp-m *{box-sizing:border-box}
.hp-m{font-family:'TSO Dirham','Archivo',system-ui,sans-serif;color:#111214;background:#F2F2F0;-webkit-font-smoothing:antialiased;position:relative}
.hp-m .px{padding-left:20px;padding-right:20px}
.hp-m .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}
.hp-m .mono{font-family:'TSO Dirham','JetBrains Mono',ui-monospace,monospace}
.hp-m .eyebrow{font-family:'TSO Dirham','JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase}
.hp-m .ghost{font-family:'TSO Dirham','Saira Condensed',sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.22);line-height:1}
.hp-m .ghost-d{font-family:'TSO Dirham','Saira Condensed',sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(17,18,20,0.2);line-height:1}
.hp-m .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font-family:'TSO Dirham','Archivo',sans-serif;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer}
.hp-m .btn-ghost{border-color:rgba(255,255,255,0.22);color:#fff;background:rgba(255,255,255,0.05)}
.hp-m .btn-ghost:hover{color:#fff}
.hp-m .btn-dark{background:#111214;color:#fff}
.hp-m .btn-dark:hover{color:#fff}
.hp-m .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}
.hp-m .circ{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(17,18,20,0.16);flex:none}
.hp-m .circ-l{border-color:rgba(255,255,255,0.2)}
.hp-m .pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.hp-m .glass{background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);color:#fff}
.hp-m .chip{min-height:44px;min-width:56px;padding:0 12px;border-radius:12px;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:15px;font-weight:500;cursor:pointer;flex:none}
.hp-m .tab{flex:1;min-height:44px;border:0;border-radius:10px;font-family:'TSO Dirham','Archivo',sans-serif;font-weight:600;font-size:13px;cursor:pointer}
.hp-m .seg{border:0;background:transparent;cursor:pointer;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;padding:2px 8px;border-radius:10px}
.hp-m .rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 6px;scrollbar-width:none}
.hp-m .rail::-webkit-scrollbar{display:none}
.hp-m .rail>*{scroll-snap-align:start;flex:none}
.hp-m .hair{border-top:1px solid rgba(17,18,20,0.12)}
.hp-m .hair-l{border-top:1px solid rgba(255,255,255,0.1)}
.hp-m .logo-tile{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;overflow:hidden}
.hp-m .logo-tile img{width:100%;height:100%;object-fit:contain;display:block}
.hp-m .flap{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 9px;background:#1A1C20;border-radius:6px;color:#fff;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;font-size:16px;letter-spacing:0.03em}
.hp-m .flap::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,0.65)}
.hp-m .ticket{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.hp-m .notch{position:absolute;width:24px;height:24px;border-radius:999px;background:#F2F2F0;top:-12px}
.hp-m .perf{border-top:2px dashed rgba(255,255,255,0.3)}
.hp-m .photo{width:100%;height:100%;object-fit:cover;display:block}
.hp-m .prod-img{mix-blend-mode:multiply;height:170px;width:auto;max-width:86%;object-fit:contain}
.hp-m .bg-hero{background-image:linear-gradient(180deg,rgba(13,14,16,0.35) 0%,rgba(13,14,16,0.75) 38%,#0D0E10 62%),url("../img/hp/banner3.webp");background-size:auto 520px;background-position:62% top;background-repeat:no-repeat}
.hp-m .bg-tread{background-image:linear-gradient(180deg,rgba(13,14,16,0.86),rgba(13,14,16,0.95)),url("../img/hp/banner-tyre4.webp");background-size:cover;background-position:center}
.hp-m .bg-stack{background-image:linear-gradient(180deg,rgba(13,14,16,0.55) 0%,#0D0E10 46%),url("../img/hp/banner-tire.webp");background-size:auto 360px;background-position:70% top;background-repeat:no-repeat}
.hp-m .circ{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(17,18,20,0.16);flex:none;transition:transform .25s ease}
.hp-m .acc{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;min-height:68px;padding:14px 0;background:transparent;border:0;cursor:pointer;text-align:left;font-family:'TSO Dirham','Archivo',sans-serif;color:inherit}
.hp-m .g-body{display:flex;flex-direction:column;gap:16px;padding:0 0 26px}
.hp-m .g-body p{margin:0;font-size:15px;line-height:1.75;color:#C2C5CB}
.hp-m .il{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.35);text-underline-offset:4px}
.hp-m .il:hover{color:#fff}
.hp-m .spec{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:#16181B;border:1px solid rgba(255,255,255,0.08)}
.hp-m .dec{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:#16181B;border:1px solid rgba(255,255,255,0.08)}
.hp-m .dec .flap{align-self:flex-start}
.hp-m .tick{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);font-size:13px;color:#E4E6E9}
.hp-m .car-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid rgba(17,18,20,0.08);border-radius:16px;padding:14px 6px 10px}
.hp-m .car-tile img{height:34px;width:auto;max-width:90%;object-fit:contain}
.hp-m .bg-cta{background-image:linear-gradient(180deg,rgba(13,14,16,0.5) 0%,rgba(13,14,16,0.85) 70%,#0D0E10 100%),url("../img/hp/xxl.webp");background-size:cover;background-position:center}
.hp-m .wordmark{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.16)}

/* ---- which layout shows ---- */
.hp-m{display:none}
@media (max-width:760px){.ts{display:none!important}.hp-m{display:flex!important;flex-direction:column;width:100%;overflow-x:clip}}
.hp-m .m-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(13,14,16,0.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.12);box-shadow:0 16px 40px -12px rgba(0,0,0,0.5)}
.hp-m [data-menu-toggle][aria-expanded=true]{background:#D7261E;border-color:#D7261E}

/* ---- added for the WordPress build ---- */
[hidden]{display:none!important}
.hp-cart{position:relative}
.hp-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#D7261E;color:#fff;font:600 11px/18px Archivo,sans-serif;text-align:center}
.ts form[role=search] label{position:relative}
.field select:disabled{opacity:.55}
/* Slowly turning outlined tyre behind the hero */
.hp-tyre{position:absolute;top:50%;right:calc(50% - 720px);width:820px;height:820px;margin-top:-430px;pointer-events:none;z-index:0}
.hp-tyre svg{width:100%;height:100%;display:block}
#shop>.wrap{z-index:1}
@media (max-width:1080px){.hp-tyre{right:-420px;opacity:.7}}
@media (max-width:760px){.hp-tyre{top:180px;right:-300px;width:560px;height:560px;margin-top:-280px;opacity:.6}}
/* odd number of contact cards on mobile: last one spans the row */
.hp-m footer div[style*="grid-template-columns: 1fr 1fr"]>a:last-child:nth-child(odd){grid-column:1/-1}

/* ---- finder extras: size help ---- */
.hp-help{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:#0D0E10;border:1px solid rgba(255,255,255,0.08)}
.hp-help[hidden]{display:none!important}
.hp-help-tread{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hp-help-sep{font-family:'TSO Dirham','JetBrains Mono',monospace;color:#4A4E55;font-size:20px}
.hp-help p{margin:0;font-size:13px;line-height:1.6;color:#B8BCC3}
.hp-help .flap{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 9px;background:#1A1C20;border-radius:6px;color:#fff;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;font-size:15px}


/* ---- size finder: step-by-step design (guide + numbered steps); logic in home-premium.js ---- */
.hp-steps .guide{padding:18px 20px;border-radius:18px;background:#0D0E10;border:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:8px}
.hp-steps .guide-step{font-size:11px;letter-spacing:0.14em;color:#9A9EA6}
.hp-steps .gcode{font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;font-size:44px;line-height:1.1;display:flex;align-items:baseline;gap:6px}
.hp-steps .gsep{color:#4A4E55}
.hp-steps .gseg{padding-bottom:4px;border-bottom:3px solid transparent;color:#3E4148;transition:color .2s ease,border-color .2s ease}
.hp-steps .gseg.is-act{color:#D7261E;border-bottom-color:#D7261E}
.hp-steps .gseg.is-done{color:#fff}
.hp-steps .guide-text{font-size:14px;line-height:1.5;color:#C9CCD1}
.hp-steps .hlink{background:none;border:0;padding:6px 0;color:#FF6B63;font-family:'TSO Dirham','Archivo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hp-steps .hp-reset{align-self:flex-start;color:#9A9EA6}
.hp-steps .hp-reset[hidden]{display:none}
/* different rear size */
.hp-steps .hp-rear[hidden],.hp-steps .hp-rear-box[hidden],.hp-steps .hp-rear-add[hidden]{display:none}
.hp-steps .hp-rear-add{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px;border-radius:16px;border:0;background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);color:#fff;font-family:'TSO Dirham','Archivo',sans-serif;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:background .2s ease}
.hp-steps .hp-rear-add:hover{background:rgba(255,255,255,0.08)}
.hp-steps .hp-rear-plus{width:30px;height:30px;border-radius:99px;background:#D7261E;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:500;flex:none}
.hp-steps .hp-rear-box{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(215,38,30,0.08);box-shadow:inset 0 0 0 1.5px rgba(215,38,30,0.6)}
.hp-steps .hp-rear-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hp-steps .hp-rear-h .mono{font-size:11px;letter-spacing:0.16em;color:#FF8A84}
.hp-steps .hp-rear-h .hlink{color:#9A9EA6;padding:0}
.hp-steps .hp-rear-row{display:flex;align-items:flex-end;gap:8px}
.hp-steps .hp-rsel{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hp-steps .hp-rsel .mono{font-size:10px;letter-spacing:0.14em;color:#9A9EA6;text-transform:uppercase}
.hp-steps .hp-rsel select{width:100%;height:46px;padding:0 10px;border-radius:12px;border:1px solid rgba(255,255,255,0.18);background:#0D0E10;color:#fff;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:16px;font-weight:600;cursor:pointer}
.hp-steps .hp-rsel select:disabled{opacity:.45;cursor:not-allowed}
.hp-steps .hp-rsel select option{color:#111214;background:#fff}
.hp-steps .hp-rsep{padding-bottom:12px;color:#6E727A;font-size:18px}
.hp-steps .hp-help{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.05);border:0;gap:10px}
.hp-steps .stp{position:relative;display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 16px;border-radius:16px;transition:all .2s ease;background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}
.hp-steps .stp:focus-within{box-shadow:0 0 0 2px #D7261E}
.hp-steps .stp[data-st="act"]{background:rgba(215,38,30,0.10);box-shadow:inset 0 0 0 1.5px #D7261E}
.hp-steps .stp[data-st="off"]{background:rgba(255,255,255,0.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);opacity:.5}
.hp-steps .stn{width:32px;height:32px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-family:'TSO Dirham','JetBrains Mono',monospace;font-size:13px;font-weight:600;flex:none;background:rgba(255,255,255,0.08);color:#9A9EA6}
.hp-steps .stp[data-st="act"] .stn{background:#D7261E;color:#fff}
.hp-steps .stp[data-st="done"] .stn{background:#fff;color:#111214}
.hp-steps .stt{font-size:15px;font-weight:600;color:#fff}
.hp-steps .sth{font-size:12.5px;color:#9A9EA6}
.hp-steps .stv{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:'TSO Dirham','JetBrains Mono',monospace;font-weight:600;white-space:nowrap;font-size:14px;color:#6E727A;pointer-events:none}
.hp-steps .stp[data-st="act"] .stv [data-stv]{font-size:14px;color:#fff;padding:8px 14px;border-radius:999px;background:#D7261E}
.hp-steps .stp[data-st="done"] .stv{font-size:22px;color:#fff}
.hp-steps .sts{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer;border:0}
.hp-steps .sts:disabled{cursor:not-allowed}
.hp-steps .sts option{color:#111214;background:#fff;font-size:16px}
.hp-m .hp-steps .guide{padding:14px 16px;border-radius:16px;gap:6px}
.hp-m .hp-steps .guide-step{font-size:10px;letter-spacing:0.12em}
.hp-m .hp-steps .gcode{font-size:34px;gap:4px}
.hp-m .hp-steps .gseg{padding-bottom:3px}
.hp-m .hp-steps .guide-text{font-size:13px}
.hp-m .hp-steps .stp{gap:12px;min-height:62px;padding:10px 12px;border-radius:14px}
.hp-m .hp-steps .stn{width:30px;height:30px;font-size:12px}
.hp-m .hp-steps .stt{font-size:14px}
.hp-m .hp-steps .sth{font-size:12px}
.hp-m .hp-steps .stp[data-st="act"] .stv [data-stv]{font-size:13px;padding:7px 12px}
.hp-m .hp-steps .stp[data-st="done"] .stv{font-size:20px}
@media (max-width:1180px) and (min-width:761px){.ts .hp-steps .gcode{font-size:34px}}
/* button waits for a complete size (design: muted until all three steps are chosen) */
.ts .hp-go-off,.hp-m .hp-go-off{background:rgba(255,255,255,0.08)!important;color:#8D9199!important;cursor:not-allowed}