/* Public website (thephonehospital.com). Update 0.006 (Oct 15, 2026):
   Inter type, clean white header, light / dark, phone-first layout.
   Colours come from the logo: red, black, white. Triage colours
   (green / amber / red) are only used as small accents. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Inter-Regular.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Inter-SemiBold.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Inter-Bold.woff") format("woff")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/InterDisplay-Bold.woff") format("woff")}
@font-face{font-family:"Inter Display";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/InterDisplay-ExtraBold.woff") format("woff")}

:root{
  --red:#e11e2c;--red-dk:#b8141f;--red-soft:#fdecee;
  --ink:#111214;--text:#1d1f22;--muted:#5d6168;--faint:#8a8f97;
  --bg:#f7f7f5;--card:#ffffff;--soft:#f1f1ee;--line:#e4e4e0;--field:#ffffff;--field-line:#c9cbcf;
  --g:#1f9254;--g-soft:#e5f5ec;--a:#e9a41a;--a-soft:#fff5dc;--r:#d4252c;--r-soft:#fdeaea;
  --shadow:0 1px 2px rgba(17,18,20,.06),0 8px 24px rgba(17,18,20,.06);
  --shadow-lg:0 2px 6px rgba(17,18,20,.08),0 18px 40px rgba(17,18,20,.12);
  --radius:14px;--radius-sm:10px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Inter Display","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#f3f3f1;--text:#e7e8ea;--muted:#a3a7ae;--faint:#7c818a;
  --bg:#0f1012;--card:#17191c;--soft:#1e2125;--line:#2b2f34;--field:#121417;--field-line:#3a3f46;
  --red-soft:#3a1517;--g-soft:#12291c;--a-soft:#2e2510;--r-soft:#33161a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--shadow-lg:0 2px 6px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--text);background:var(--bg);
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--red-dk)}
:root[data-theme="dark"] main a:not([class]),:root[data-theme="dark"] .s-note a,:root[data-theme="dark"] .w-list a{color:#ff7a82}
img{max-width:100%}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:6px}
::selection{background:rgba(225,30,44,.18)}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.022em;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.75rem);font-weight:800;margin:0 0 .35em}
h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);font-weight:700;margin:0 0 .5em}
h3{font-size:1.12rem;font-weight:700;margin:0 0 .35em;letter-spacing:-.01em}
p{margin:0 0 .9em}
.s-skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:10px 14px;z-index:60}
.s-skip:focus{left:10px;top:10px}
.s-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.s-wrap{padding:0 16px}body{font-size:16px}}
.num,.s-price,.s-big,.s-bill td:last-child,.s-prices td:last-child{font-variant-numeric:tabular-nums}

/* ---------- utility strip + header ---------- */
.s-strip{background:var(--ink);color:#e9e9e9;font-size:.84rem}
:root[data-theme="dark"] .s-strip{background:#000;color:#cfd2d6}
.s-strip .s-wrap{display:flex;gap:18px;align-items:center;min-height:34px}
.s-strip a{color:#fff;text-decoration:none;font-weight:600}
.s-strip .s-lang{margin-left:auto}
@media (max-width:820px){.s-strip{display:none}}
.s-top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 var(--red)}
.s-top.scrolled{box-shadow:inset 0 3px 0 var(--red),0 6px 20px rgba(0,0,0,.06)}
.s-bar{display:flex;align-items:center;gap:20px;min-height:74px}
.s-logo{display:flex;align-items:center;flex:none}
.s-logo img{height:42px;width:auto;display:block}
:root[data-theme="dark"] .s-logo{background:#fff;border-radius:10px;padding:4px 8px}
:root[data-theme="dark"] .s-logo img{height:36px}
.s-nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.s-nav a{position:relative;color:var(--text);text-decoration:none;font-weight:600;font-size:.96rem;padding:9px 12px;border-radius:9px}
.s-nav a:hover{background:var(--soft);color:var(--ink)}
.s-nav a.on{color:var(--ink)}
.s-nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2.5px;border-radius:2px;background:var(--red)}
.s-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.s-open{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.86rem;color:var(--muted);
  border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px;white-space:nowrap}
.s-open i{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px var(--g-soft);display:inline-block}
.s-open.shut i{background:var(--faint);box-shadow:0 0 0 3px var(--soft)}
.s-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.s-iconbtn:hover{background:var(--soft)}
.s-iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.s-menubtn{display:none}
.s-drawer{display:none}
@media (max-width:1060px){.s-open{display:none}}
@media (max-width:900px){
  .s-nav{display:none}
  .s-menubtn{display:inline-flex}
  .s-bar{min-height:64px;gap:12px}
  .s-logo img{height:36px}
  .s-drawer{display:block;position:fixed;inset:64px 0 auto 0;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;max-height:calc(100vh - 64px);overflow:auto}
  .s-drawer.open{opacity:1;transform:none;pointer-events:auto}
  .s-drawer nav{display:grid;padding:8px 16px 16px}
  .s-drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line);
    color:var(--ink);text-decoration:none;font-weight:600;font-size:1.05rem}
  .s-drawer nav a::after{content:"›";color:var(--faint);font-size:1.3rem}
  .s-drawer .s-drawer-foot{display:flex;gap:10px;flex-wrap:wrap;padding:0 16px 18px}
}
@media (max-width:420px){.s-actions .s-btn.sm{padding:9px 12px;font-size:.9rem}}

/* ---------- buttons ---------- */
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:var(--card)!important;text-decoration:none;
  font-weight:600;padding:12px 22px;border-radius:11px;border:1.5px solid var(--ink);font-size:1rem;font-family:inherit;line-height:1.2;cursor:pointer;
  transition:background .14s,border-color .14s,transform .08s,box-shadow .14s}
.s-btn:hover{background:var(--red);border-color:var(--red);color:#fff!important}
.s-btn:active{transform:translateY(1px)}
.s-btn.red{background:var(--red);border-color:var(--red);color:#fff!important}
.s-btn.red:hover{background:var(--red-dk);border-color:var(--red-dk)}
.s-btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--field-line)}
.s-btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--card)!important}
.s-btn.sm{padding:9px 16px;font-size:.92rem;border-radius:10px}
.s-btn.big{padding:15px 28px;font-size:1.06rem}
.s-btn[disabled]{opacity:.5;cursor:not-allowed}
.s-cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}

/* ---------- panels, cards, sections ---------- */
.s-sec{padding-top:48px;padding-bottom:48px}
.s-sec.tight{padding-top:28px;padding-bottom:28px}
.s-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.s-panel+.s-panel{margin-top:18px}
.s-pad{padding:28px 30px}
@media (max-width:640px){.s-pad{padding:22px 18px}.s-sec{padding-top:32px;padding-bottom:32px}}
.s-narrow{max-width:640px}
.s-narrow.s-wrap{padding-left:24px;padding-right:24px}
.s-sub,.s-sub2{color:var(--muted);font-size:1.08rem;margin:0 0 22px;max-width:60ch}
.s-eyebrow{color:var(--red);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;margin:0 0 6px}
.s-note{color:var(--muted);font-size:.93rem}
.s-big{font-family:var(--display);font-size:2rem;font-weight:800;margin:4px 0 10px;color:var(--ink);letter-spacing:-.02em}
.s-full{width:100%}
.s-center{text-align:center}
.s-split{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.s-fine{color:var(--faint);font-size:.82rem;margin-top:22px}
.s-free{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius-sm);padding:14px 18px;max-width:760px}
.s-band{background:var(--soft);padding:52px 0;border-top:1px solid var(--line)}
.stripe-g,.stripe-a,.stripe-r{position:relative}
.stripe-g::before,.stripe-a::before,.stripe-r::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:var(--radius) var(--radius) 0 0}
.stripe-g::before{background:var(--g)}.stripe-a::before{background:var(--a)}.stripe-r::before{background:var(--red)}

/* ---------- home: hero picker + widgets ---------- */
.s-hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;padding-top:30px}
@media (max-width:980px){.s-hero{grid-template-columns:1fr}}
.s-pick .s-panel{padding:30px 32px 0;overflow:hidden}
@media (max-width:640px){.s-pick .s-panel{padding:22px 16px 0}}
.s-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.s-tri{grid-template-columns:repeat(2,1fr);gap:10px}}
.s-tcard{position:relative;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:20px 18px 16px;text-decoration:none;
  color:var(--ink);background:var(--card);transition:transform .14s,box-shadow .14s,border-color .14s;overflow:hidden}
.s-tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.s-tcard.g{--c:var(--g)}.s-tcard.a{--c:var(--a)}.s-tcard.r{--c:var(--r)}
.s-tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--field-line)}
.s-tcard b{font-size:1.08rem;font-weight:700;margin-top:10px;letter-spacing:-.01em}
.s-tcard small{color:var(--muted);font-size:.9rem}
.s-ico{display:inline-flex;width:42px;height:42px;border-radius:11px;background:var(--soft);align-items:center;justify-content:center}
.s-ico svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s-legend{display:flex;gap:22px;flex-wrap:wrap;margin:20px 0;color:var(--muted);font-size:.9rem}
.s-legend span{display:inline-flex;align-items:center;gap:8px}
.s-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.s-legend .g{background:var(--g)}.s-legend .a{background:var(--a)}.s-legend .r{background:var(--r)}
.s-unsure{background:var(--soft);display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px 32px;margin:0 -32px;flex-wrap:wrap;border-top:1px solid var(--line)}
.s-unsure p{margin:0;max-width:640px}
@media (max-width:640px){.s-unsure{padding:16px;margin:0 -16px}}
/* widgets: small, calm, informative */
.s-widgets{display:grid;gap:14px}
@media (max-width:980px) and (min-width:641px){.s-widgets{grid-template-columns:1fr 1fr}}
.s-widget{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.s-widget h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--font);font-weight:700;margin:0 0 10px}
.s-widget .w-big{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.s-widget .w-sub{color:var(--muted);font-size:.9rem}
.w-bar{height:6px;border-radius:6px;background:var(--soft);overflow:hidden;margin:12px 0 6px}
.w-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g),#46c37b);border-radius:6px}
.w-bar.shut i{background:var(--faint)}
.w-times{display:flex;justify-content:space-between;color:var(--faint);font-size:.78rem;font-variant-numeric:tabular-nums}
.w-track{display:flex;gap:8px;margin-top:4px}
.w-track input{flex:1;min-width:0}
.w-dots{display:flex;gap:6px;margin-top:10px}
.w-dots span{flex:1;height:8px;border-radius:4px;background:var(--soft)}
.w-dots span.on{background:var(--g)}
.w-list{list-style:none;margin:0;padding:0;font-size:.93rem}
.w-list li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.w-list li:last-child{border-bottom:0}
.s-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.s-quick a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px;
  transition:transform .14s,box-shadow .14s}
.s-quick a:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.s-quick b{font-weight:700}
.s-quick span{color:var(--muted);font-size:.86rem}
@media (max-width:900px){.s-quick{grid-template-columns:repeat(2,1fr)}}
.s-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.s-why div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px;box-shadow:var(--shadow)}
.s-why div::before{content:"";display:block;width:28px;height:4px;border-radius:4px;background:var(--red);margin-bottom:14px}
.s-why p{margin:0;color:var(--muted)}
.s-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0 26px}
.s-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.s-card p{margin:0;color:var(--muted)}
.s-visit{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:760px){.s-visit{grid-template-columns:1fr}}
.s-hours{border-collapse:separate;border-spacing:0;width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.s-hours td{padding:10px 16px;border-bottom:1px solid var(--line)}
.s-hours tr:last-child td{border-bottom:0}
.s-hours td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.s-hours tr.today td{background:var(--red-soft);font-weight:700}

/* ---------- forms ---------- */
.s-form label,.s-book label{display:block;font-weight:600;font-size:.93rem;color:var(--ink);margin:16px 0 6px}
.s-form input,.s-form select,.s-form textarea,.s-book input,.s-book select,.s-book textarea,.w-track input{width:100%;padding:12px 14px;border:1px solid var(--field-line);
  border-radius:11px;font:inherit;font-size:1rem;color:var(--text);background:var(--field);transition:border-color .14s,box-shadow .14s}
.s-form input::placeholder,.s-book input::placeholder,.w-track input::placeholder{color:var(--faint)}
.s-form input:focus,.s-form select:focus,.s-form textarea:focus,.s-book input:focus,.s-book select:focus,.s-book textarea:focus,.w-track input:focus{
  border-color:var(--ink);outline:none;box-shadow:0 0 0 4px rgba(225,30,44,.16)}
.s-form .s-btn{margin-top:20px}
.s-form label.s-check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.s-form label.s-check input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--red)}
.s-radio{border:0;padding:0;margin:16px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.s-radio legend{font-weight:600;font-size:.93rem;margin-bottom:6px}
.s-radio label{display:inline-flex;align-items:center;gap:8px;font-weight:500;margin:0;border:1px solid var(--field-line);border-radius:999px;padding:7px 14px;cursor:pointer}
.s-radio input{width:auto;accent-color:var(--red)}
.s-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.s-two{grid-template-columns:1fr}}
.s-row3{display:grid;grid-template-columns:1fr 1.3fr 1.3fr auto;gap:12px;align-items:end}
.s-row3 label{margin-top:0}.s-row3 .s-btn{margin-top:0;height:48px}
@media (max-width:820px){.s-row3{grid-template-columns:1fr}}
.s-trap{position:absolute;left:-5000px}
/* a button that appears inside the field once it's filled in */
.s-field{position:relative}
.s-field input{padding-right:132px}
.s-field .s-inbtn{position:absolute;right:6px;top:50%;transform:translateY(-50%) scale(.96);opacity:0;pointer-events:none;
  background:var(--red);color:#fff;border:0;border-radius:9px;padding:8px 14px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;
  transition:opacity .16s,transform .16s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.s-field .s-inbtn.ready{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.s-field .s-inbtn:hover{background:var(--red-dk)}
/* show / hide password */
.s-pw{position:relative;display:block}
.s-pw input{padding-right:52px!important}
.s-pw .s-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:36px;border:0;border-radius:8px;background:transparent;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.s-pw .s-eye:hover{background:var(--soft);color:var(--ink)}
.s-pw .s-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* messages */
.s-msgs{padding-top:18px}
.s-msg{display:flex;gap:10px;align-items:flex-start;background:var(--a-soft);border:1px solid color-mix(in srgb,var(--a) 45%,transparent);border-radius:12px;padding:12px 16px;margin:0 0 8px;color:var(--text)}
.s-msg::before{content:"i";flex:none;width:20px;height:20px;border-radius:50%;background:var(--a);color:#fff;font-weight:700;font-size:.78rem;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.s-msg.error{background:var(--r-soft);border-color:color-mix(in srgb,var(--r) 40%,transparent)}
.s-msg.error::before{content:"!";background:var(--r)}
.s-msg.success{background:var(--g-soft);border-color:color-mix(in srgb,var(--g) 40%,transparent)}
.s-msg.success::before{content:"✓";background:var(--g)}

/* ---------- prices / parts ---------- */
.s-result{margin-top:22px}
.s-parts{display:grid;gap:10px;margin:14px 0 18px}
.s-part{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card)}
.s-part .p-main{flex:1;min-width:0}
.s-part .p-title{font-weight:700;color:var(--ink)}
.s-part .p-meta{color:var(--muted);font-size:.88rem;margin-top:2px}
.s-part .p-price{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums}
label.s-part{cursor:pointer}
label.s-part:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 3px rgba(225,30,44,.16)}
.s-part input[type=radio]{width:20px;height:20px;accent-color:var(--red);flex:none;margin:0}
.s-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:700;letter-spacing:.01em;vertical-align:1px}
.s-chip.genuine{background:#111;color:#fff}
:root[data-theme="dark"] .s-chip.genuine{background:#fff;color:#111}
.s-chip.oled{background:var(--g-soft);color:var(--g)}
.s-chip.standard,.s-chip.quality{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.s-chip.stock{background:var(--g-soft);color:var(--g)}
.s-chip.order{background:var(--a-soft);color:#8a5a00}
:root[data-theme="dark"] .s-chip.order{color:#f2c25c}
/* the little "no warranty" sticker */
.s-nowar{display:inline-flex;align-items:center;gap:4px;border:1.5px dashed var(--r);color:var(--r);border-radius:6px;padding:0 7px;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;transform:rotate(-2deg);background:var(--r-soft);line-height:1.6}
.s-prices{border-collapse:separate;border-spacing:0;width:100%;margin:8px 0 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.s-prices td{padding:12px 16px;border-bottom:1px solid var(--line)}
.s-prices tr:last-child td{border-bottom:0}
.s-prices td:last-child{text-align:right;font-weight:700}
.s-estimate{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:.93rem}
.s-estimate svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}

/* ---------- booking ---------- */
.s-book{max-width:760px;margin:30px auto}
.s-book .s-panel{padding:30px 32px}
@media (max-width:640px){.s-book{margin:16px auto}.s-book .s-panel{padding:22px 16px}}
.s-steps-head{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.s-steps-head span{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted)}
.s-steps-head span b{width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.s-book h2{font-size:1.15rem;margin:28px 0 10px;display:flex;align-items:center;gap:10px}
.s-book h2 .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--card);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-family:var(--font)}
.s-issues{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.s-issue{display:flex;align-items:center;gap:10px;border:1px solid var(--field-line);border-radius:11px;padding:11px 13px;cursor:pointer;background:var(--field);font-weight:500;font-size:.95rem;line-height:1.3}
.s-issue input{width:18px!important;height:18px;margin:0;accent-color:var(--red);flex:none}
.s-issue:has(input:checked){border-color:var(--ink);background:var(--red-soft)}
.s-pickparts{margin-top:14px;display:grid;gap:14px}
.s-pickparts .pp h3{font-size:1rem;margin:0 0 8px}
.bookdays{display:flex;gap:8px;overflow-x:auto;margin:6px 0 14px;padding:2px 2px 6px;scroll-snap-type:x mandatory}
.bookday{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:9px 6px;border:1px solid var(--field-line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--field);scroll-snap-align:start}
.bookday small{color:var(--muted);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bookday b{font-size:1.25rem;font-family:var(--display)}
.bookday.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.bookday.on small{color:inherit;opacity:.8}
.bookslots{display:flex;flex-wrap:wrap;gap:8px}
.slot{display:inline-flex;margin:0!important}
.slot input{position:absolute;opacity:0;width:1px!important;height:1px}
.slot span{padding:9px 16px;border:1px solid var(--field-line);border-radius:999px;cursor:pointer;font-weight:600;font-variant-numeric:tabular-nums;background:var(--field)}
.slot input:checked+span{background:var(--red);color:#fff;border-color:var(--red)}
.slot input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.s-done{text-align:center;padding:12px 0}
.s-done .tick{width:64px;height:64px;border-radius:50%;background:var(--g-soft);color:var(--g);display:inline-flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:10px}

/* ---------- tracking, account ---------- */
.s-tkhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.s-tkhead h1{margin:2px 0}
.s-statuschip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;background:var(--card);white-space:nowrap;font-size:.92rem}
.s-statuschip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--faint)}
.s-st-ready,.s-st-picked_up{background:var(--g-soft);border-color:transparent;color:var(--g)}
.s-st-ready::before,.s-st-picked_up::before{background:var(--g)}
.s-st-awaiting_parts,.s-st-in_repair,.s-st-diagnosing{background:var(--a-soft);border-color:transparent;color:#8a5a00}
.s-st-awaiting_parts::before,.s-st-in_repair::before,.s-st-diagnosing::before{background:var(--a)}
:root[data-theme="dark"] .s-st-awaiting_parts,:root[data-theme="dark"] .s-st-in_repair{color:#f2c25c}
.s-st-closed,.s-st-recycled{background:var(--soft);color:var(--muted)}
.s-trow .s-statuschip{margin-left:auto;font-size:.82rem;padding:3px 10px}
.s-steps{list-style:none;display:flex;padding:0;margin:24px 0 10px}
.s-steps li{flex:1;position:relative;text-align:center;font-size:.86rem;color:var(--muted);padding-top:32px}
.s-steps li span{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:2px solid var(--field-line);background:var(--card);z-index:1}
.s-steps li::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:3px;background:var(--line)}
.s-steps li:first-child::before{display:none}
.s-steps li.done span{background:var(--g);border-color:var(--g)}.s-steps li.done::before,.s-steps li.now::before{background:var(--g)}
.s-steps li.now span{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(225,30,44,.18)}
.s-steps li.now{color:var(--ink);font-weight:700}
@media (max-width:620px){.s-steps{flex-direction:column;gap:12px}.s-steps li{text-align:left;padding:0 0 0 36px}.s-steps li span{left:11px}.s-steps li::before{display:none}}
.s-explain{font-size:1.1rem;margin:8px 0 6px}
.s-grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
.s-grid2>div>.s-panel:first-child{margin-top:18px}
.s-grid2 .s-panel{margin-top:18px}
@media (max-width:820px){.s-grid2{grid-template-columns:1fr}}
.s-grid2.solo{grid-template-columns:1fr;max-width:660px}
.s-tag{display:inline-block;border-radius:6px;padding:1px 8px;font-size:.78rem;font-weight:700}.s-tag.a{background:var(--a-soft)}.s-tag.r{background:var(--r-soft);color:var(--r)}
.s-rec{border-top:1px solid var(--line);padding:12px 0}.s-rec p{margin:4px 0}
.s-list{padding-left:20px;margin:8px 0}.s-list li{margin:4px 0}
.s-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.s-photos img{width:100%;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.s-photos.big{grid-template-columns:1fr 1fr}.s-photos.big img{height:220px}
.s-bill{width:100%;border-collapse:collapse}.s-bill td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}.s-bill td:last-child{text-align:right;white-space:nowrap}
.s-bill .sum td{color:var(--muted);border-bottom:0;padding:3px 0}.s-bill .tot td{font-weight:800;font-size:1.15rem;border-top:1.5px solid var(--ink);color:var(--ink)}
.s-paid{color:var(--g);font-weight:700}
.s-wrow{border:1px solid var(--line);border-left:4px solid var(--field-line);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--card)}.s-wrow.ok{border-left-color:var(--g)}
.s-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
@media (max-width:820px){.s-tiles{grid-template-columns:repeat(2,1fr)}}
.s-tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}
.s-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ink)}
.s-tile.g::before{background:var(--g)}.s-tile.a::before{background:var(--a)}.s-tile.r::before{background:var(--red)}
.s-tile b{font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.s-tile span{color:var(--muted);font-size:.9rem}
.s-trow{display:flex;align-items:center;gap:8px;padding:12px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);flex-wrap:wrap;border-radius:8px}.s-trow:hover{background:var(--soft)}
.s-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 20px}.s-tabs a{border:1px solid var(--field-line);border-radius:999px;padding:7px 15px;text-decoration:none;color:var(--ink);font-weight:600;background:var(--card);font-size:.93rem}.s-tabs a.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.s-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.s-prod{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;transition:transform .14s,box-shadow .14s}
.s-prod:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.s-prodimg{display:flex;align-items:center;justify-content:center;height:180px;background:var(--soft);border-radius:10px;overflow:hidden;font-size:3rem}
.s-prodimg img{width:100%;height:100%;object-fit:cover}
.s-prod small{color:var(--muted)}.s-price{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-top:auto}
.s-panel details{border-top:1px solid var(--line);padding:14px 0}.s-panel details summary{font-weight:600;cursor:pointer;color:var(--ink)}.s-panel details p{margin:8px 0 0;color:var(--text)}
.s-locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

/* ---------- footer ---------- */
.s-foot{background:#0d0e10;color:#c9ccd1;padding:44px 0 28px;margin-top:40px;font-size:.93rem;border-top:4px solid var(--red)}
.s-foot a{color:#fff;text-decoration:none}
.s-foot a:hover{text-decoration:underline}
.s-foot b{color:#fff;display:block;margin-bottom:6px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.s-footlogo{height:40px;width:auto;margin-bottom:10px;background:#fff;border-radius:8px;padding:4px 8px}
.s-footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.s-foot .s-fine{color:#80858d;border-top:1px solid #23262a;padding-top:18px}

/* ---------- chat ---------- */
.s-chat{position:fixed;right:18px;bottom:18px;z-index:50}
.s-chatbtn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--card);border:0;border-radius:999px;padding:13px 20px;font:inherit;font-weight:700;cursor:pointer;box-shadow:var(--shadow-lg)}
.s-chatbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-chatbtn:hover{background:var(--red);color:#fff}
.s-chatbox{position:absolute;right:0;bottom:60px;width:min(370px,calc(100vw - 28px));background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.s-chatbox header{background:var(--ink);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:6px}
:root[data-theme="dark"] .s-chatbox header{background:#000}
.s-chatbox header button{margin-left:auto;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;padding:0 4px}
.s-chatlog{height:320px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.s-chatlog p{margin:0;padding:9px 13px;border-radius:14px;max-width:85%;white-space:pre-wrap;word-wrap:break-word;font-size:.95rem}
.s-chatlog p small{display:block;font-size:.7rem;opacity:.7;margin-top:2px}
.s-chatlog .me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}.s-chatlog .them{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.s-chatlog .s-chatsys{align-self:center;background:transparent;color:var(--muted);font-size:.83rem;text-align:center;max-width:100%}
#sChatWho{display:grid;gap:6px;padding:10px 10px 0}#sChatWho input{padding:9px 11px;border:1px solid var(--field-line);border-radius:10px;font:inherit;background:var(--field);color:var(--text)}
.s-chatrow{display:flex;gap:6px;padding:10px}.s-chatrow textarea{flex:1;padding:9px 11px;border:1px solid var(--field-line);border-radius:10px;font:inherit;resize:none;background:var(--field);color:var(--text)}
.s-chatrow button{background:var(--ink);color:var(--card);border:0;border-radius:10px;padding:0 16px;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:640px){.s-chat{right:12px;bottom:12px}.s-chatbtn .lbl{display:none}.s-chatbtn{padding:14px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.s-top,.s-strip,.s-foot,.s-chat,.s-drawer{display:none}body{background:#fff;color:#000}}
/* chips and part rows inside forms keep their own layout */
.s-form label.s-issue,.s-book label.s-issue{display:flex;align-items:center;margin:0;font-weight:500;font-size:.95rem}
.s-form label.s-part,.s-book label.s-part{display:flex;align-items:center;margin:0;font-weight:400}
.s-form .s-issue input,.s-form .s-part input[type=radio]{width:18px;height:18px;padding:0;flex:none;box-shadow:none}
.s-form label.slot{margin:0}

/* two-step sign-in */
.s-link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}

/* ---------- pick lists (combo.js) ---------- */
.phc{position:relative}
.phc input{padding-right:44px}
.phc-btn{position:absolute;right:4px;top:4px;bottom:4px;width:38px;border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.phc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.phc.is-open .phc-btn svg{transform:rotate(180deg)}
.phc-btn:hover{background:var(--soft);color:var(--ink)}
.phc-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:min(320px,55vh);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);overscroll-behavior:contain}
.phc-list li{padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline;line-height:1.35;color:var(--text)}
.phc-list li small{color:var(--faint);font-size:.8rem;white-space:nowrap}
.phc-list li.is-active{background:var(--soft)}
.phc-list li.is-picked{font-weight:700;color:var(--ink)}
.phc-list li.is-picked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;align-self:center}
.phc-list li.phc-empty{cursor:default;color:var(--muted);font-size:.92rem}
@media (hover:none){.phc-list li{padding:13px 12px}}

/* ---------- repair prices ---------- */
.s-kinds{border:0;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.s-kinds legend{font-weight:600;font-size:.93rem;color:var(--ink);margin-bottom:8px;padding:0}
.s-form label.s-kind{margin:0;display:inline-flex;cursor:pointer;font-weight:500}
.s-kind input{position:absolute;opacity:0;width:1px;height:1px}
.s-kind span{border:1px solid var(--field-line);border-radius:999px;padding:8px 15px;font-size:.93rem;background:var(--field);transition:background .14s,border-color .14s,color .14s}
.s-kind input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--card)}
.s-kind input:focus-visible+span{box-shadow:0 0 0 4px rgba(225,30,44,.2)}
.s-priceform .s-row3{margin-top:6px}
.s-askprice p{margin:0 0 14px}
.s-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media (max-width:640px){.s-ways{grid-template-columns:1fr 1fr}}
.s-way{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;text-align:left;transition:border-color .14s,transform .14s}
.s-way:hover{border-color:var(--ink);transform:translateY(-1px)}
.s-way svg{width:22px;height:22px;fill:none;stroke:var(--red);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.s-way span{font-weight:700}.s-way small{color:var(--muted);font-size:.84rem}
.s-issue[hidden],.phc-list[hidden]{display:none!important}
.s-tm{display:inline-block;margin-top:6px;font-size:.78rem;opacity:.8;max-width:900px}
.s-deal{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:18px 0 6px;padding:18px 20px;border-radius:14px;
  background:var(--red-soft);border:1px solid rgba(225,30,44,.25)}
.s-deal-txt{flex:1 1 360px}.s-deal-txt p{margin:0;color:var(--text)}
.s-deal-h{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink)!important;margin-bottom:4px!important}
.s-deal-cta{display:flex;gap:10px;flex-wrap:wrap}.s-deal-cta .s-btn{margin:0}
