/* ============================================================================
   UNIVERSAL DRIVESHAFTS — DESIGN SYSTEM  ·  overhaul 2026-09, parts-counter redesign 2026-11
   Text + headings: IBM Plex Sans · Data (part numbers, prices, counts): IBM Plex Mono
   Loaded after uds.css; supersedes the global chrome. Page modules migrate
   into this file as they are redesigned.
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:112%;ascent-override:93%;descent-override:31%;line-gap-override:9%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:99%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Plex Sans Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:101%;ascent-override:102%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:"Plex Mono Fallback";src:local("Courier New"),local("Liberation Mono");size-adjust:100%;ascent-override:102%;descent-override:28%;line-gap-override:0%}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hankengrotesk-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibmplexsans-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibmplexmono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibmplexmono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibmplexmono-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* brand — blue is the single dominant colour */
  --blue:#1246ab; --blue-600:#1657cf; --blue-700:#0e3a8c; --blue-ink:#0b2455;
  --blue-050:#eef3fc; --blue-100:#dce7f8; --blue-200:#b7cdf0;
  /* accent — grounded teal, used only for go / in-stock / positive */
  --teal:#1f9e88; --teal-300:#54c6b1; --teal-050:#e3f4f0; --teal-ink:#0c4d43;
  /* dark surface */
  --steel:#0b1a33; --steel-800:#0d1c38; --steel-700:#16294a; --steel-600:#243a61;
  /* ink ramp (cool) */
  --ink:#141b28; --ink-2:#3a4557; --ink-3:#5c6879; --ink-soft:#3a4557; --ink-faint:#5c6879;
  /* surfaces */
  --paper:#ffffff; --paper-2:#f6f8fc; --paper-3:#eef2f8;
  --line:#e4e8f0; --line-2:#eef1f7; --line-strong:#d4dae6;
  /* status */
  --ok:#1a7f4b; --ok-bg:#e7f5ec; --ok-line:#b7e0c4;
  --warn:#9a6b12; --warn-bg:#fdf3e2;
  --err:#c02a2a; --err-bg:#fcecec; --err-line:#f2c4c4;
  --red:#c02a2a;
  /* type */
  --font-h:"IBM Plex Sans","Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-b:"IBM Plex Sans","Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-m:"IBM Plex Mono","Plex Mono Fallback",ui-monospace,"SF Mono",Menlo,monospace;
  /* restrained scale: a parts store reads like a catalog, not a poster */
  --fs-display:clamp(1.75rem,1.45rem + 1.2vw,2.35rem);
  --fs-h1:clamp(1.55rem,1.35rem + .8vw,1.95rem);
  --fs-h2:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --fs-h3:1.05rem;
  --fs-lead:1.02rem;
  --fs-body:.97rem;
  --lh-tight:1.2; --lh-snug:1.3; --lh:1.55;
  /* space + layout */
  --wrap:1220px; --wrap-narrow:900px; --wrap-prose:68ch;
  --gutter:clamp(1.1rem,.6rem + 2vw,1.9rem);
  --section-y:clamp(2rem,1.4rem + 2.4vw,3.25rem);
  /* every inset band (.ctaband/.premade-band/.counterband) uses this one value,
     so nested content indents by the same amount everywhere on the site. */
  --band-pad:clamp(1.75rem,1.2rem + 2.4vw,3rem);
  /* shape: square-ish everywhere (no pills); --r-round is the only full circle (count badges, round icons) */
  --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:6px; --r-xl:8px; --r-pill:4px; --r-round:999px;
  --radius:6px;
  /* elevation — blue-tinted, single light source from top */
  --sh-1:0 1px 2px rgba(11,26,51,.06),0 1px 3px rgba(11,26,51,.05);
  --sh-2:0 1px 3px rgba(11,26,51,.08),0 6px 16px -10px rgba(11,26,51,.18);
  --sh-3:0 2px 6px rgba(11,26,51,.08),0 16px 36px -18px rgba(11,26,51,.28);
  --sh-focus:0 0 0 3px var(--blue-100);
  --shadow:var(--sh-2);
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-1:.14s; --dur-2:.24s; --dur-3:.42s;
  /* ---- back-compat aliases for legacy uds.css modules (until migrated) ---- */
  --bg:var(--paper); --bg-soft:var(--paper-2); --bg-steel:var(--steel);
  --ink-faint:#5c6879;
  --teal-050:#e3f4f0;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--paper-2)}   /* the footer colour: no white band under the footer (has-floaty padding, iOS overscroll) */
body{
  margin:0;font-family:var(--font-b);font-size:var(--fs-body);line-height:var(--lh);
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-h);font-weight:600;line-height:var(--lh-tight);margin:0;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty}
/* Base element styles live in :where() so they carry ZERO specificity and can
   never out-rank a component class. This is what made every <a class="btn">
   lose its white label on hover (a:hover 0,1,1 beat .btn 0,1,0). */
:where(a){color:var(--blue);text-decoration:none}
:where(a:hover){color:var(--blue-700)}
img,svg,video{max-width:100%;display:block}
img{height:auto}
strong,b{font-weight:600}
small{font-size:.8125rem}
::selection{background:var(--blue);color:#fff}
:where(input,button,select,textarea){font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

/* numerals / codes */
.u-mono,.mono{font-family:var(--font-m);font-feature-settings:normal;letter-spacing:-.01em}
.u-nums{font-variant-numeric:tabular-nums}

/* ---------- a11y ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:.6rem;left:.6rem;z-index:200;transform:translateY(-160%);
  background:var(--blue);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-family:var(--font-h);font-weight:600;transition:transform var(--dur-2) var(--ease)}
.skip:focus{transform:none;color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.wrap--narrow{max-width:var(--wrap)}
/* a narrower reading measure must NOT move the rail: keep the page container
   and constrain the children, or the whole block re-centres and the headings
   jump inward (this used to put them at 300px instead of 140px). */
.wrap--narrow > *{max-width:var(--measure,var(--wrap-narrow))}
.section{padding-block:var(--section-y)}
.section + .section{padding-top:0}
.section--snug{padding-top:clamp(1.5rem,1rem + 2vw,2.5rem)}
.section--snug .gmain > .fitform-wrap:first-child{margin-top:0}
.section--tint{background:var(--paper-2)}
.section--dark{background:var(--steel);color:#c3d0e6}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}

/* section header — restrained; NOT an eyebrow on every section */
/* the measure has to be set on the elements, not the block: `ch` resolves
   against the container's own font, so a 60ch cap sized in body text throttles
   a 2.3rem heading down to ~480px and breaks it over three lines. */
.s-head{margin-bottom:clamp(2rem,1rem + 3vw,3.25rem)}
.s-head h2,.s-head h1,.secthead h2,.secthead h1,.section .head h2{max-width:30ch}
.s-head--between{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap}
.s-head h2{font-size:var(--fs-h2)}
.s-head p{margin:.75rem 0 0;color:var(--ink-2);font-size:var(--fs-lead);max-width:56ch}
.s-head .s-link{flex:none;font-family:var(--font-h);font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);white-space:nowrap}
.s-head .s-link .i{font-size:1.05em;transition:transform var(--dur-2) var(--ease)}
.s-head .s-link:hover .i{transform:translateX(3px)}

/* the one label style — use sparingly (max ~1 per 3 sections) */
/* retired 2026-11: the label above every heading read as template copy. Kept in the markup, never shown. */
.kicker{display:none!important}

.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);max-width:56ch}

.i{flex:none;display:inline-block;vertical-align:-0.125em}

/* ---------- motion: none on scroll (2026-11) ---------- */
/* content is simply there; .reveal / .reveal-stagger stay in the markup as no-ops */

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--blue); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-h);font-weight:600;font-size:.93rem;line-height:1.1;
  padding:.72rem 1.15rem;border-radius:var(--r-sm);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;white-space:nowrap;
  text-align:center;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.btn .i{font-size:1.1em}
.btn,.btn:hover,.btn:focus,.btn:active,.btn:visited{color:var(--btn-fg)}
.btn:active{transform:translateY(1px)}

.btn-primary{--btn-bg:var(--blue);--btn-fg:#fff}
.btn-primary:hover{--btn-bg:var(--blue-700)}
.btn-teal{--btn-bg:#0d6d5d;--btn-fg:#fff}
.btn-teal:hover{--btn-bg:#0a5749}
.btn-ghost{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.btn-ghost:hover{--btn-bd:var(--ink-3);--btn-bg:var(--paper-2)}
.btn-line{--btn-bg:#fff;--btn-fg:var(--blue);--btn-bd:var(--blue-200)}
.btn-line:hover{--btn-bg:var(--blue-050);--btn-bd:var(--blue)}
.btn-lg{padding:.85rem 1.4rem;font-size:1rem}
.btn-sm{padding:.5rem .85rem;font-size:.86rem;min-height:38px}
.btn-block{width:100%}
/* on dark surfaces */
:is(.on-dark,.section--dark,.uhero,.uendcta,.uband,.ucard,.ctaband,.premade-band,.ck-hero,.dsb-hero) .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
:is(.on-dark,.section--dark,.uhero,.uendcta,.uband,.ucard,.ctaband,.premade-band,.ck-hero,.dsb-hero) .btn-ghost:hover{--btn-bd:#fff;--btn-fg:#fff;background:rgba(255,255,255,.1)}

.textlink{font-family:var(--font-h);font-weight:600;display:inline-flex;align-items:center;gap:.4rem;color:var(--blue)}
.textlink .i{transition:transform var(--dur-2) var(--ease)}
.textlink:hover .i{transform:translateX(3px)}

/* ============================================================================
   SHELL — sidebar menu + top bar (2026-11, after PTI's dealer portal)
   partials/sidebar.blade.php is fixed on desktop (1100px and up) and folds to an
   icon rail (html.sb-rail, kept in localStorage, set before paint in the layout
   head); below 1100px it is the off-canvas menu (html.sb-open).
   --sb-w is the width the sidebar takes from the page: anything sized to the
   viewport (table bleeds, fixed bars) subtracts it.
   ========================================================================== */
:root{--sb-w:0px;--sb-bg:#101c2e;--sb-bg-2:#0a1422;--sb-ink:#c9d2df;--sb-dim:#8393a8;--sb-accent:#e2262d;--tb-h:64px}
@media (min-width:1100px){
  :root{--sb-w:256px}
  html.sb-rail{--sb-w:68px}
  .page{margin-left:var(--sb-w)}
}
.page{min-width:0;overflow-x:clip}

.sb{position:fixed;top:0;bottom:0;left:0;z-index:110;width:256px;display:flex;flex-direction:column;
  background:var(--sb-bg);color:var(--sb-ink);font-size:.9rem}
.sb__top{flex:none;height:var(--tb-h);display:flex;align-items:center;gap:.5rem;padding:0 .7rem 0 1.15rem;
  border-bottom:1px solid rgba(255,255,255,.07)}
.sb__logo{flex:1;min-width:0}
.sb__logo img{height:27px;width:auto;filter:brightness(0) invert(1)}
.sb__fold,.sb__x{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);
  background:none;color:var(--sb-dim);cursor:pointer}
.sb__fold:hover,.sb__x:hover{background:rgba(255,255,255,.07);color:#fff}
.sb__fold .i,.sb__x .i{font-size:1.1rem}
.sb__x{display:none}
.sb__scroll{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.8rem 0 1rem;
  scrollbar-width:thin;scrollbar-color:#2a3a52 transparent}
.sb__cta{display:flex;align-items:center;gap:.6rem;margin:0 .8rem .7rem;padding:.72rem .9rem;border-radius:var(--r-sm);
  background:var(--blue-600);color:#fff;font-weight:600;font-size:.92rem}
.sb__cta:hover{background:#2468e2;color:#fff}
.sb__cta .i{font-size:1.15rem}
.sb__head,.sb__link{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:.55rem 1.05rem .55rem .9rem;
  border:0;border-left:3px solid transparent;background:none;color:var(--sb-ink);font:500 .92rem/1.2 var(--font-b);
  text-align:left;cursor:pointer}
.sb__head .i:first-child,.sb__link .i{flex:none;font-size:1.2rem;color:var(--sb-dim)}
.sb__head span,.sb__link span{flex:1;min-width:0}
.sb__headrow{display:flex;align-items:stretch}
.sb__headrow .sb__head{flex:1;min-width:0}
.sb__tog{flex:none;width:44px;display:grid;place-items:center;border:0;background:none;color:var(--sb-dim);cursor:pointer}
.sb__tog .i{font-size:.8rem;transition:transform var(--dur-2) var(--ease)}
.sb__tog:hover{color:#fff;background:rgba(255,255,255,.04)}
.sb__head:hover,.sb__link:hover{background:rgba(255,255,255,.04);color:#fff}
.sb__grp.is-open .sb__headrow .sb__head{color:#fff}
.sb__grp.is-open .sb__tog .i{transform:rotate(180deg)}
.sb__head.is-on{color:#fff;border-left-color:var(--sb-accent)}
.sb__link.is-on{color:#fff;border-left-color:var(--sb-accent)}
.sb__list{display:none;list-style:none;margin:0;padding:.3rem 0 .55rem;background:var(--sb-bg-2)}
.sb__grp.is-open > .sb__list{display:block}
.sb__list a,.sb__list button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.47rem .95rem .47rem 3rem;
  border:0;border-left:3px solid transparent;background:none;color:#aab6c6;font:400 .875rem/1.3 var(--font-b);text-align:left;cursor:pointer}
.sb__list a:hover,.sb__list button:hover{color:#fff;background:rgba(255,255,255,.04)}
.sb__list a.is-on{color:#fff;border-left-color:var(--sb-accent);background:rgba(255,255,255,.05)}
.sb__list small{margin-left:auto;font:500 .7rem var(--font-m);color:#66778e}
.sb__list form{margin:0}
.sb__sep{height:1px;margin:.35rem .95rem .35rem 3rem;background:rgba(255,255,255,.08)}
.sb__subhead{display:flex;align-items:center}
.sb__subhead a{flex:1;min-width:0}
.sb .sb__subbtn{flex:none;width:42px;padding:.47rem 0;justify-content:center;border-left:0;color:var(--sb-dim)}
.sb__subbtn .i{font-size:.8rem;transition:transform var(--dur-2) var(--ease)}
.sb__sub.is-open .sb__subbtn .i{transform:rotate(180deg)}
.sb__sub > ul{display:none;list-style:none;margin:0 0 .35rem;padding:0}
.sb__sub.is-open > ul{display:block}
.sb .sb__sub > ul a{padding-left:3.75rem;font-size:.84rem}
.sb__foot{flex:none;display:grid;gap:.65rem;padding:.85rem 1.15rem 1rem;border-top:1px solid rgba(255,255,255,.07)}
.sb__help{display:grid;gap:.25rem;font-size:.8rem;color:var(--sb-dim)}
.sb__help-t{color:var(--sb-ink);font-weight:500}
.sb__tel{display:flex;align-items:center;gap:.5rem;color:#fff;font:600 1.02rem var(--font-m)}
.sb__wa{display:flex;align-items:center;gap:.5rem;color:#8fdcae;font-size:.85rem}
.sb__tel:hover,.sb__wa:hover{color:#fff}
.sb__tel .i,.sb__wa .i{font-size:1.05rem}
.sb .langsw{display:block}
.sb .langsw>summary{height:34px;padding:0 .6rem;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);background:none;color:var(--sb-ink)}
.sb .langsw>summary:hover,.sb .langsw[open]>summary{background:rgba(255,255,255,.06);color:#fff}
.sb .langsw__cur .langsw__code{display:none}
.sb .langsw__cur .langsw__name{display:inline;font-size:.82rem}
.sb .langsw .langsw__menu{top:auto;bottom:calc(100% + .4rem);left:0;right:auto;transform-origin:bottom left}

/* icon rail: one centred 44px button per entry, the section of the current page marked, and on hover (or keyboard
   focus) a group's links fly out beside the rail with its name on top, so nothing needs the menu unfolded. Nothing
   inside the rail is ever wider than it: no clipped labels, no scrollbars (owner, 2026-11-11: "necesito que se vea mejor"). */
.sb__list[data-title]::before{content:none}
@media (min-width:1100px){
  html.sb-rail .sb{width:68px}
  html.sb-rail .sb__top{justify-content:center;padding:0}
  html.sb-rail .sb__logo{display:none}
  html.sb-rail .sb__fold .i{transform:rotate(180deg)}
  html.sb-rail .sb__scroll{overflow:visible;padding:.75rem 0}
  html.sb-rail .sb__head span,html.sb-rail .sb__tog,html.sb-rail .sb .sb__grp > .sb__list,html.sb-rail .sb__help-t,html.sb-rail .sb__hours,html.sb-rail .sb .langsw{display:none}
  html.sb-rail .sb__nav{display:grid;gap:.25rem}
  html.sb-rail .sb__cta,html.sb-rail .sb__head,html.sb-rail .sb__link,html.sb-rail .sb__tel,html.sb-rail .sb__wa{position:relative;justify-content:center;
    width:44px;min-height:0;height:44px;margin:0 auto;padding:0;border:0;border-radius:var(--r)}
  html.sb-rail .sb__cta{margin-bottom:.6rem}
  html.sb-rail .sb__head .i:first-child,html.sb-rail .sb__link .i{font-size:1.25rem}
  html.sb-rail .sb__headrow{position:relative;justify-content:center}
  html.sb-rail .sb__headrow .sb__head{flex:none}
  html.sb-rail .sb__head:hover,html.sb-rail .sb__link:hover,html.sb-rail .sb__grp:hover .sb__head{background:rgba(255,255,255,.08)}
  html.sb-rail .sb__head:hover .i,html.sb-rail .sb__link:hover .i,html.sb-rail .sb__grp:hover .sb__head .i{color:#fff}
  /* the section you are in: lit icon and the red bar on the rail's edge */
  html.sb-rail .sb__grp.is-here .sb__head,html.sb-rail .sb__link.is-on{background:rgba(255,255,255,.1)}
  html.sb-rail .sb__grp.is-here .sb__head .i,html.sb-rail .sb__link.is-on .i{color:#fff}
  html.sb-rail .sb__grp.is-here .sb__headrow::before,html.sb-rail .sb__link.is-on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    border-radius:0 3px 3px 0;background:var(--sb-accent)}
  html.sb-rail .sb__link.is-on::before{left:-12px}
  /* fly-out */
  html.sb-rail .sb__grp{position:relative}
  /* keyboard focus keeps it open, a click does not (a clicked arrow would hold it open after the mouse left) */
  html.sb-rail .sb .sb__grp:hover > .sb__list{display:block}
  html.sb-rail .sb .sb__grp:has(:focus-visible) > .sb__list{display:block}
  html.sb-rail .sb .sb__grp > .sb__list{position:absolute;left:100%;top:0;z-index:5;
    width:272px;max-height:calc(100vh - 1.5rem);overflow-y:auto;overscroll-behavior:contain;padding:0 0 .45rem;
    background:var(--sb-bg);border:1px solid rgba(255,255,255,.08);border-left:0;border-radius:0 var(--r-xl) var(--r-xl) 0;
    box-shadow:14px 12px 32px rgba(4,10,20,.38);scrollbar-width:thin;scrollbar-color:#2a3a52 transparent;animation:sbFly var(--dur-1) var(--ease-out)}
  html.sb-rail .sb__list[data-title]::before{content:attr(data-title);display:block;padding:.8rem 1rem .6rem;margin-bottom:.3rem;
    border-bottom:1px solid rgba(255,255,255,.07);color:#fff;font:600 .9rem/1.2 var(--font-b)}
  html.sb-rail .sb__list a,html.sb-rail .sb__list button{padding-left:1rem}
  html.sb-rail .sb .sb__sub > ul a{padding-left:1.75rem}
  html.sb-rail .sb__sep{margin-left:1rem}
  /* name tips for the single buttons */
  html.sb-rail .sb__cta > span,html.sb-rail .sb__link > span,html.sb-rail .sb__tel > span,html.sb-rail .sb__wa > span{display:block;position:absolute;left:calc(100% + 12px);top:50%;z-index:5;
    transform:translateY(-50%);padding:.4rem .65rem;border-radius:var(--r-sm);background:#05101e;color:#fff;font:500 .82rem/1.2 var(--font-b);
    white-space:nowrap;box-shadow:0 6px 18px rgba(4,10,20,.35);pointer-events:none}
  html.sb-rail .sb__cta:not(:hover):not(:focus-visible) > span,html.sb-rail .sb__link:not(:hover):not(:focus-visible) > span,
  html.sb-rail .sb__tel:not(:hover):not(:focus-visible) > span,html.sb-rail .sb__wa:not(:hover):not(:focus-visible) > span{display:none}
  html.sb-rail .sb__cta:hover > span,html.sb-rail .sb__link:hover > span,html.sb-rail .sb__tel:hover > span,html.sb-rail .sb__wa:hover > span{animation:sbFly var(--dur-1) var(--ease-out)}
  /* call and WhatsApp stay one click away */
  html.sb-rail .sb__foot{padding:.6rem 0 .8rem;gap:0}
  html.sb-rail .sb__help{gap:.25rem}
  html.sb-rail .sb__tel{color:#fff}
  html.sb-rail .sb__tel:hover,html.sb-rail .sb__wa:hover{background:rgba(255,255,255,.08)}
  html.sb-rail .sb__tel .i,html.sb-rail .sb__wa .i{font-size:1.2rem}
}
@keyframes sbFly{from{opacity:0;translate:-4px 0}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){html.sb-rail .sb *{animation:none!important}}
/* off-canvas */
@media (max-width:1099.98px){
  .sb{width:min(86vw,320px);transform:translateX(-100%);visibility:hidden;
    transition:transform var(--dur-3) var(--ease),visibility var(--dur-3)}
  html.sb-open .sb{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sb__fold{display:none}
  .sb__x{display:grid}
  .sb-scrim{position:fixed;inset:0;z-index:105;background:rgba(6,12,24,.55)}
}
@media (min-width:1100px){.sb-scrim{display:none!important}}

/* top bar */
.tb{position:sticky;top:0;z-index:60;height:var(--tb-h);display:flex;align-items:center;gap:1rem;padding:0 var(--gutter);
  background:#fff;border-bottom:1px solid var(--line)}
.tb.is-stuck{box-shadow:0 4px 16px -12px rgba(11,26,51,.45)}
.tb__burger{display:none;flex:none;width:42px;height:42px;place-items:center;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);cursor:pointer}
.tb__burger .i{font-size:1.35rem}
.tb__burger,.tb__icon,.tb__cart,.sb button,.sb a{-webkit-tap-highlight-color:transparent}
.tb__logo{display:none;flex:none}
.tb__logo img{height:28px;width:auto}
.tb__search{flex:1;max-width:620px;display:flex;align-items:center;height:42px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--paper-2);overflow:hidden}
.tb__search:focus-within{border-color:var(--blue);background:#fff;box-shadow:var(--sh-focus)}
.tb__search > .i{flex:none;margin:0 .1rem 0 .8rem;color:var(--ink-3);font-size:1.1rem}
.tb__search input{flex:1;min-width:0;height:100%;padding:0 .6rem;border:0;background:none;font-size:.95rem;outline:none}
.tb__search input::placeholder{color:var(--ink-3)}
.tb__search button{flex:none;height:100%;padding:0 1.15rem;border:0;background:var(--blue);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer}
.tb__search button:hover{background:var(--blue-700)}
.tb__acts{margin-left:auto;display:flex;align-items:center;gap:.3rem;flex:none}
.tb__promo{display:none;align-items:center;gap:.45rem;margin-right:.5rem;font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.tb__promo .i{color:var(--teal);font-size:1.1rem}
.tb__tel{display:inline-flex;align-items:center;gap:.45rem;height:42px;padding:0 .7rem;color:var(--ink);font:600 .92rem var(--font-m);white-space:nowrap}
.tb__tel .i{color:var(--blue);font-size:1.1rem}
.tb__tel:hover{color:var(--blue)}
.tb__icon{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);cursor:pointer}
.tb__icon .i{font-size:1.3rem}
.tb__icon:hover{background:var(--blue-050);color:var(--blue)}
.tb__find{display:none}
.tb__cart{display:inline-flex;align-items:center;gap:.5rem;height:42px;padding:0 .85rem;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:.9rem}
.tb__cart:hover{border-color:var(--blue);color:var(--blue)}
.tb__cart .i{font-size:1.25rem}
.tb__cart b{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:var(--r-round);
  background:var(--blue);color:#fff;font:600 .72rem/1 var(--font-m)}
.tb__cart b[hidden]{display:none}
@media (min-width:1560px){.tb__promo{display:inline-flex}}
@media (max-width:1099.98px){.tb__burger{display:grid}.tb__logo{display:block}}
@media (max-width:1320px){.tb__tel span{display:none}.tb__tel{width:42px;padding:0;justify-content:center}}
@media (max-width:760px){
  .tb{height:56px;gap:.4rem;padding:0 .6rem}
  .tb__burger{width:40px;height:40px}
  .tb__logo{flex:1;min-width:0}
  .tb__logo img{height:24px;max-width:100%;object-fit:contain;object-position:left center}
  .tb__search,.tb__promo,.tb__tel,.tb__acct{display:none}
  .tb__acts{gap:0}
  .tb__find{display:grid}
  .tb__cart{position:relative;width:42px;padding:0;justify-content:center;border:0}
  .tb__cart-t{display:none}
  .tb__cart b{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;font-size:.66rem;border:2px solid #fff}
}

/* ============================================================================
   FOOTER  (light, compact: the sidebar carries the navigation)
   ========================================================================== */
.ufoot{background:var(--paper-2);border-top:1px solid var(--line);color:var(--ink-2);font-size:.88rem;padding-block:2.5rem 1.25rem}
.ufoot a{color:var(--ink-2)}
.ufoot a:hover{color:var(--blue)}
.ufoot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.35fr);gap:1.5rem 2rem}
.ufoot__grid nav,.ufoot__contact{display:grid;align-content:start;gap:.1rem}
.ufoot__grid nav a{padding:.3rem 0}
.ufoot .ufoot__h{margin:0 0 .5rem;color:var(--ink);font:600 .78rem var(--font-b);letter-spacing:.05em;text-transform:uppercase}
.ufoot .ufoot__h a{color:inherit;padding:0}
.ufoot__contact a{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-family:var(--font-m);font-size:.84rem}
.ufoot__contact .i{color:var(--blue)}
.ufoot .unews__form{display:flex;gap:.4rem;margin-top:.8rem}
.ufoot .unews__in{flex:1;min-width:0;height:38px;padding:0 .7rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;font-size:.85rem}
.ufoot .unews__in:focus{outline:2px solid var(--blue-200);border-color:var(--blue)}
.unews__hp{position:absolute;left:-9999px;opacity:0}
.unews__ok{margin:.4rem 0 0;color:var(--ok);font-size:.85rem}
.ufoot__legal{margin:2rem 0 0;max-width:120ch;font-size:.74rem;line-height:1.6;color:var(--ink-3)}
.ufoot__legal a{text-decoration:underline}
.ufoot__bar{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  align-items:center;justify-content:space-between;font-size:.8rem;color:var(--ink-3)}
.ufoot__bar nav{display:flex;flex-wrap:wrap;gap:.25rem 1.2rem}
.ufoot__social{display:flex;gap:.2rem}
.ufoot__social a{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-2)}
.ufoot__social a:hover{background:var(--blue-050);color:var(--blue)}
.ufoot__social .i{font-size:1.1rem}
/* four link columns since the measuring guides joined: the contact block takes its own row until the screen is wide */
@media (max-width:1500px){.ufoot__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ufoot__contact{grid-column:1/-1}.ufoot__contact .unews__form{max-width:560px}}
@media (max-width:900px){.ufoot__grid{grid-template-columns:1fr 1fr}.ufoot__contact{grid-column:1/-1}}
@media (max-width:520px){.ufoot{padding-top:1.75rem}.ufoot__grid{gap:1.25rem 1rem}.ufoot__grid nav a{padding:.25rem 0;font-size:.85rem}}

/* ============================================================================
   HERO — full-bleed industrial photograph, FLAT scrim (no gradient anywhere).
   Pattern: trust-authority-conversion. Credibility line, headline, one line of
   support, primary CTA. Trust strip sits directly underneath.
   ========================================================================== */
.uhero{position:relative;isolation:isolate;background:#0a1424;
  display:grid;align-items:center;
  min-height:clamp(430px,52vw,600px)}
.uhero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.uhero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
/* one flat colour wash. not a gradient. */
.uhero__media::after{content:"";position:absolute;inset:0;background:rgba(8,16,30,.58)}
.uhero__content{position:relative;padding-block:clamp(3rem,2rem + 4vw,5rem)}
/* the reading measure belongs to the children. Putting it on the container made
   .wrap's max-width lose, and margin-inline:auto then CENTRED the whole block —
   which is why the hero copy did not start on the same rail as every section. */
.uhero__content > *{max-width:46rem}
.uhero__kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#9fd8cc}
.uhero__kicker::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.8}
.uhero h1{color:#fff;font-size:clamp(2.15rem,1.3rem + 3.6vw,4rem);letter-spacing:-.032em;
  line-height:1.02;text-shadow:0 1px 24px rgba(0,0,0,.35)}
.uhero__sub{margin:1.15rem 0 2rem;font-size:var(--fs-lead);line-height:1.55;color:#d3dcec;max-width:40ch;
  text-shadow:0 1px 14px rgba(0,0,0,.35)}
.uhero__cta{display:flex;gap:.85rem;flex-wrap:wrap}
.uhero .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45);backdrop-filter:blur(2px)}
.uhero .btn-ghost:hover{--btn-bd:#fff;background:rgba(255,255,255,.1)}
@media (max-width:700px){
  .uhero{min-height:0}
  .uhero__media img{object-position:50% 45%}
  .uhero__media::after{background:rgba(8,16,30,.64)}
  .uhero__content{padding-block:clamp(2.5rem,2rem + 4vw,3.5rem)}
  .uhero__sub{max-width:none}
  .uhero__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================================
   TRUST STRIP  (replaces .trust — plain, no boxes)
   ========================================================================== */
.ustrip{border-bottom:1px solid var(--line);background:#fff}
.ustrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ustrip__item{display:flex;align-items:flex-start;gap:.7rem;padding:1.15rem 1.2rem;
  font-family:var(--font-h);font-weight:600;font-size:.88rem;color:var(--ink);line-height:1.35}
.ustrip__item + .ustrip__item{border-left:1px solid var(--line-2)}
.ustrip__item .i{font-size:1.35rem;color:var(--blue);flex:none;margin-top:-.1em}
.ustrip__item span{color:var(--ink-2);font-weight:400;display:block;font-size:.8rem;margin-top:.2rem;font-family:var(--font-b)}
@media (max-width:820px){.ustrip .wrap{grid-template-columns:1fr 1fr}
  .ustrip__item:nth-child(odd){border-left:0}
  .ustrip__item:nth-child(-n+2){border-bottom:1px solid var(--line-2)}}
@media (max-width:460px){.ustrip .wrap{grid-template-columns:1fr}
  .ustrip__item{border-left:0!important;border-bottom:1px solid var(--line-2)}}

/* ============================================================================
   PRODUCT CARD  (rebuild of .prod)
   ========================================================================== */
.uprods{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:1000px){.uprods{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.uprods{grid-template-columns:repeat(2,1fr);gap:.8rem}}

.uprod{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color var(--dur-2) var(--ease),
  box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.uprod:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px)}
.uprod__media{position:relative;aspect-ratio:1;background:var(--paper-2);display:grid;place-items:center;padding:1.1rem;overflow:hidden}
.uprod__media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform var(--dur-3) var(--ease)}
.uprod:hover .uprod__media img{transform:scale(1.06)}
.uprod__flag{position:absolute;top:.7rem;left:.7rem;font-family:var(--font-m);font-weight:600;
  font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;padding:.28rem .5rem;border-radius:var(--r-xs);
  background:var(--blue);color:#fff}
.uprod__flag--stock{background:var(--teal-050);color:var(--teal-ink)}
.uprod__wish{position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-faint);
  opacity:0;transform:translateY(-4px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.uprod:hover .uprod__wish,.uprod__wish:focus-visible{opacity:1;transform:none}
.uprod__wish:hover{color:var(--blue);border-color:var(--blue)}
.uprod__wish .i{font-size:1.05rem}
.uprod__body{display:flex;flex-direction:column;gap:.4rem;padding:.95rem 1rem 1.05rem;flex:1}
.uprod__sku{font-family:var(--font-m);font-size:.72rem;color:var(--ink-faint);letter-spacing:.02em}
.uprod__name{font-family:var(--font-h);font-weight:600;font-size:.9rem;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.uprod__name:hover{color:var(--blue)}
.uprod__rating{display:flex;align-items:center;gap:.3rem;color:#e8a33d;font-size:.8rem}
.uprod__rating span{color:var(--ink-faint);font-family:var(--font-m);font-size:.72rem}
.uprod__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.55rem}
.uprod__price{font-family:var(--font-h);font-weight:700;font-size:1.15rem;color:var(--ink)}
.uprod__price .u-mono{font-family:var(--font-m);font-weight:600}
.uprod__add{width:44px;height:44px;flex:none;border:0;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.uprod__add .i{font-size:1.2rem}
.uprod__add:hover{background:var(--blue-700);color:#fff}
.uprod__add:active{transform:scale(.94)}

/* ============================================================================
   CATEGORY TILE  (rebuild of .cat3)
   ========================================================================== */
.ucats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem}
@media (max-width:640px){.ucats{grid-template-columns:1fr 1fr}}
.ucat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.ucat:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px)}
.ucat__media{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:.8rem;overflow:hidden}
.ucat__media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--dur-3) var(--ease)}
.ucat:hover .ucat__media img{transform:scale(1.08)}
.ucat__body{padding:.85rem .95rem 1rem;border-top:1px solid var(--line-2)}
.ucat__body b{display:block;font-family:var(--font-h);font-weight:600;font-size:.9rem;color:var(--ink);line-height:1.3}
.ucat__body span{font-family:var(--font-m);font-size:.72rem;color:var(--ink-faint)}

/* ============================================================================
   FEATURE ROW  (asymmetric — replaces 3 equal cards)
   ========================================================================== */
.ufeature{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.ufeature--rev{grid-template-columns:.85fr 1.15fr}
.ufeature--rev .ufeature__text{order:2}
.ufeature__text h2{margin-bottom:.9rem}
.ufeature__text p{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.55}
.ufeature__list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.75rem}
.ufeature__list li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500}
.ufeature__list .i{color:var(--teal);font-size:1.2rem;flex:none;margin-top:.1rem}
.ufeature__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);box-shadow:var(--sh-2)}
.ufeature__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
  .ufeature,.ufeature--rev{grid-template-columns:1fr;gap:1.75rem}
  .ufeature--rev .ufeature__text{order:0}
}

/* ============================================================================
   BUILDER BAND  (replaces .builder)
   ========================================================================== */
.uband{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--steel);color:#c3d0e6;
  padding:clamp(2rem,1.4rem + 3vw,3.75rem);display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;align-items:center;isolation:isolate}
.uband::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--steel)}
.uband h2{color:#fff;margin-bottom:.8rem}
.uband p{color:#b9c6de;font-size:var(--fs-lead);max-width:44ch;margin-bottom:1.6rem}
.uband__tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-m);font-size:.75rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--teal-300);margin-bottom:1.1rem}
.uband__tag .i{font-size:1em}
.uband__side{display:grid;gap:.65rem}
.uband__side div{display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:.8rem .95rem;
  font-family:var(--font-h);font-weight:600;font-size:.88rem;color:#e7ecf6}
.uband__side .i{color:var(--teal-300);font-size:1.25rem}
@media (max-width:820px){.uband{grid-template-columns:1fr;gap:1.75rem}}

/* ============================================================================
   SPLIT CARDS  (Book a visit / Custom — replaces .visit .vcard)
   ========================================================================== */
.usplit{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:760px){.usplit{grid-template-columns:1fr}}
.ucard{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(1.75rem,1.2rem + 2vw,2.5rem);
  display:flex;flex-direction:column;min-height:250px;color:#fff;isolation:isolate;border:1px solid rgba(255,255,255,.08)}
.ucard::before{content:"";position:absolute;inset:0;z-index:-1}
.ucard--a::before{background:var(--blue-ink)}
.ucard--b::before{background:var(--steel)}
.ucard__ic{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;margin-bottom:1.1rem}
.ucard__ic .i{font-size:1.5rem}
.ucard h3{color:#fff;font-size:1.4rem;margin-bottom:.5rem}
.ucard p{color:#c3d0e6;max-width:34ch;margin-bottom:auto}
.ucard .btn{margin-top:1.5rem;align-self:flex-start}

/* ============================================================================
   FACILITY  (image cards — 3 up, but variable; replaces .facility .fcard)
   ========================================================================== */
.ufacility{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:820px){.ufacility{grid-template-columns:1fr}}
.ufac{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.ufac__media{aspect-ratio:16/11;overflow:hidden;background:var(--paper-2)}
.ufac__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
.ufac:hover .ufac__media img{transform:scale(1.04)}
.ufac__body{padding:1.3rem}
.ufac__body h3{font-size:1.15rem;margin-bottom:.35rem}
.ufac__body p{color:var(--ink-2);font-size:.95rem;margin:0}

/* ============================================================================
   CTA BAND (dark, centered) — replaces .insta / .ctaband
   ========================================================================== */
.uendcta{position:relative;overflow:hidden;background:var(--steel);color:#c3d0e6;isolation:isolate}
.uendcta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--steel)}
.uendcta .wrap{padding-block:var(--section-y)}
.uendcta h2{color:#fff;margin-bottom:.8rem;max-width:20ch}
.uendcta p{color:#b9c6de;max-width:48ch;margin:0 0 1.8rem;font-size:var(--fs-lead)}
.uendcta__cta{display:flex;gap:.9rem;flex-wrap:wrap}

/* ============================================================================
   legacy neutralisers — stop the old candy-mint / glow bits leaking through
   ========================================================================== */
.eyebrow{font-family:var(--font-m);font-weight:500;font-size:.75rem;letter-spacing:.1em;color:var(--blue)}
.hero .cta,.hero p{max-width:46ch}

/* floating contact buttons: phones and tablets only (the desktop sidebar and top bar carry the phone + WhatsApp) */
@media (min-width:1100px){body:not(.has-ua) .floaty{display:none}}
.floaty{position:fixed;right:1.15rem;bottom:1.15rem;z-index:100;display:flex;flex-direction:column;gap:.7rem}
.fbtn{width:52px;height:52px;border-radius:var(--r-round);display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px -8px rgba(11,26,51,.5);transition:transform var(--dur-2) var(--ease)}
.fbtn:hover{transform:scale(1.07);color:#fff}
.fbtn .i{font-size:1.55rem}
.fbtn-wa{background:#25d366}
.fbtn-tel{background:var(--blue)}
.floaty__menu{display:flex;flex-direction:column;gap:.7rem}
.floaty__lbl{display:none}
.floaty .floaty__toggle{display:none;border:2px solid #fff;cursor:pointer;background:var(--blue)}
/* phones: the button waits until the visitor scrolls, so it never sits on the first screen's CTAs */
@media (max-width:1024px){.floaty.is-idle{opacity:0;visibility:hidden;transform:translateY(8px)}
  .floaty{transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2)}}
.floaty__toggle .i + .i{display:none}
.floaty.is-open .floaty__toggle .i{display:none}
.floaty.is-open .floaty__toggle .i + .i{display:block}
.floaty__toggle:focus-visible,.floaty .fbtn:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
/* collapsed: phones/tablets, and anywhere the Ask UDS launcher shares the corner. One 48px "Contact" button opens
   WhatsApp + call as labelled pills above it, so nothing sits over the page's own CTAs. */
@media (max-width:1024px){
  .floaty{flex-direction:column;align-items:flex-end;right:.75rem;bottom:.75rem;gap:.55rem}
  body.has-floaty .ufoot{padding-bottom:calc(1.75rem + 76px)}   /* room for the floating buttons, painted navy instead of a white band under the footer */
}
@media (max-width:1024px){
  .floaty .floaty__toggle{display:grid;width:48px;height:48px;box-shadow:0 6px 18px -6px rgba(11,26,51,.55)}
  .floaty .floaty__toggle .i{font-size:1.35rem}
  .floaty .floaty__menu{display:none}
}
/* phones and tablets: the Ask UDS launcher already offers a person to talk to, so the contact button steps aside (two round buttons stacked in one corner kept colliding over bottom bars) */
@media (max-width:1099.98px){body.has-ua .floaty{display:none!important}}
body.has-ua .floaty{flex-direction:column;align-items:flex-end;gap:.55rem}
body.has-ua .floaty .floaty__toggle{display:grid;width:48px;height:48px;box-shadow:0 6px 18px -6px rgba(11,26,51,.55)}
body.has-ua .floaty .floaty__toggle .i{font-size:1.35rem}
body.has-ua .floaty .floaty__menu{display:none}
.floaty.is-open .floaty__menu{display:flex!important;align-items:flex-end;gap:.5rem}
.floaty.is-open .floaty__menu .fbtn{width:auto;height:44px;padding:0 1rem 0 .8rem;gap:.5rem;grid-auto-flow:column;
  font:600 .9rem/1 var(--font-h);box-shadow:0 6px 18px -6px rgba(11,26,51,.55)}
.floaty.is-open .floaty__menu .fbtn .i{font-size:1.2rem}
.floaty.is-open .floaty__lbl{display:inline}
.floaty.is-open .fbtn:hover{transform:none}
/* stacked above the Ask UDS launcher (launcher: 20px / 14px from the corner, 54px / 50px tall) */
body.has-ua .floaty{right:20px;bottom:88px!important}
body.has-ua{padding-bottom:84px}
@media (max-width:560px){
  body.has-ua .floaty{right:14px;bottom:74px!important}
  body.has-ua{padding-bottom:130px}
}

/* ============================================================================
   HOME (2026-11): sell first. Intro + vehicle finder, ways to buy, the catalog,
   popular parts with Add, four facts, one paragraph about us.
   ========================================================================== */
/* hero: the finished-driveshaft photo behind a dark wash (heavier on the text side), copy left, vehicle finder card right */
.hm-hero{position:relative;isolation:isolate;overflow:hidden;background:#0b1422;color:#fff}
.hm-hero__bg{position:absolute;inset:0;z-index:-2}
.hm-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hm-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,14,26,.9) 0%,rgba(8,14,26,.78) 42%,rgba(8,14,26,.35) 75%,rgba(8,14,26,.2) 100%)}
.hm-top__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:2rem 3rem;align-items:center;padding-block:3.25rem 3.5rem}
.hm-intro__tag{margin:0 0 .9rem;font:500 .78rem var(--font-m);letter-spacing:.03em;color:#ffb27a}
.hm-intro h1{font-size:clamp(2rem,1.55rem + 1.9vw,3.05rem);font-weight:600;line-height:1.1;letter-spacing:-.015em;max-width:15ch;color:#fff}
.hm-intro > p:not(.hm-intro__tag){margin:1rem 0 0;max-width:52ch;color:#c9d3e1;font-size:1.04rem}
.hm-intro__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.hm-btn-light{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45)}
.hm-btn-light:hover{--btn-bg:rgba(255,255,255,.16);--btn-bd:#fff}
.hm-intro__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:1.9rem 0 0;padding:1rem 0 0;border-top:1px solid rgba(255,255,255,.16);
  font-size:.86rem;color:#aab6c7}
.hm-intro__facts b{font:600 .92rem var(--font-m);color:#fff;margin-right:.25rem}
.hm-finder{display:grid;gap:.6rem;padding:1.25rem;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.hm-finder h2{display:flex;align-items:center;gap:.5rem;font-size:1.05rem}
.hm-finder h2 .i{color:var(--blue);font-size:1.3rem}
.hm-finder__n{margin:-.35rem 0 .2rem;font:500 .78rem var(--font-m);color:var(--ink-3)}
.hm-steps{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.hm-finder .n-sel{display:grid;gap:.25rem}
.hm-finder .n-sel label{display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
/* step number; a check once the step is answered */
.hm-finder .n-sel label i{width:20px;height:20px;display:grid;place-items:center;border-radius:var(--r-round);border:1.5px solid var(--line-strong);
  font:600 .72rem/1 var(--font-m);font-style:normal;color:var(--ink-3)}
.hm-finder .n-sel.is-set label{color:var(--ink)}
.hm-finder .n-sel.is-set label i{background:var(--blue);border-color:var(--blue);color:transparent;position:relative}
.hm-finder .n-sel.is-set label i::after{content:"";position:absolute;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);top:3px;left:6.5px}
.hm-finder .n-sel:has(select:not(:disabled)):not(.is-set) label i{border-color:var(--blue);color:var(--blue)}
.hm-finder .btn:disabled{opacity:.55;cursor:not-allowed}
.hm-finder__next{margin:0;font-size:.8rem;color:var(--ink-3)}
.hm-finder select{height:42px;padding:0 .7rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;font-size:.95rem}
.hm-finder select:disabled{background:var(--paper-2);color:var(--ink-3)}
.hm-finder .n-sel.is-set select{border-color:var(--blue)}
.hm-finder .btn{margin-top:.3rem}
@media (max-width:900px){
  .hm-top__grid{grid-template-columns:1fr;padding-block:2rem 1.5rem}
  .hm-hero::before{background:linear-gradient(180deg,rgba(8,14,26,.82) 0%,rgba(8,14,26,.7) 55%,rgba(8,14,26,.9) 100%)}
}
@media (max-width:560px){.hm-intro h1{font-size:1.85rem}.hm-intro__facts{gap:.35rem 1rem;font-size:.8rem}}

.hm-sec{padding-block:1.5rem}
.hm-sec:last-of-type{padding-bottom:var(--section-y)}
.hm-ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.hm-ways a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;height:100%;
  padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.hm-ways a:hover{border-color:var(--blue);color:var(--ink)}
.hm-ways .i{grid-row:1/3;font-size:1.6rem;color:var(--blue)}
.hm-ways b{font-size:.95rem}
.hm-ways span{font-size:.82rem;color:var(--ink-3)}
@media (max-width:1000px){.hm-ways{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.hm-ways{grid-template-columns:1fr}}

.hm-trust{list-style:none;margin:0;padding:1rem 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border-block:1px solid var(--line)}
.hm-trust li{display:flex;gap:.7rem;align-items:flex-start}
.hm-trust .i{flex:none;font-size:1.45rem;color:var(--blue);margin-top:.1rem}
.hm-trust b{display:block;font-size:.9rem}
.hm-trust span{font-size:.82rem;color:var(--ink-3)}
@media (max-width:1000px){.hm-trust{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.hm-trust{grid-template-columns:1fr}}
.hm-about h2{font-size:1rem}
.hm-about p{margin:.4rem 0 0;max-width:90ch;font-size:.88rem;color:var(--ink-3)}

/* ============================================================================
   HOME · decision panels
   ========================================================================== */
.upaths{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.upaths{grid-template-columns:1fr}}
.upath{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.upath:hover{border-color:var(--blue);box-shadow:var(--sh-3);transform:translateY(-4px);color:var(--ink)}
.upath__media{aspect-ratio:16/9;background:var(--steel);display:block;overflow:hidden}
.upath__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-3) var(--ease)}
.upath:hover .upath__media img{transform:scale(1.05)}
.upath__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.5rem;flex:1;border-top:1px solid var(--line-2)}
.upath__body > b{font-family:var(--font-h);font-weight:700;font-size:1.3rem;letter-spacing:-.015em}
.upath__body > span{color:var(--ink-2);line-height:1.55}
.upath__go{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-h);font-weight:600;font-size:.95rem;color:var(--blue)}
.upath__go .i{transition:transform var(--dur-2) var(--ease)}
.upath:hover .upath__go .i{transform:translateX(4px)}

/* ============================================================================
   HOME · horizontal product rail
   ========================================================================== */
.urail-wrap{overflow:hidden}
.urail{display:flex;gap:1rem;list-style:none;margin:0;padding:.25rem .25rem 1.5rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  /* let the rail bleed to the viewport edge while staying aligned to .wrap */
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.urail::-webkit-scrollbar{height:6px}
.urail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill)}
.urail > .uprod{flex:0 0 min(248px,72vw);scroll-snap-align:start}

/* ============================================================================
   HOME · guide links
   ========================================================================== */
.uguides{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.uguides{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.uguides{grid-template-columns:1fr}}
.uguide{display:flex;flex-direction:column;gap:.4rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.uguide:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--ink)}
.uguide > .i{font-size:1.6rem;color:var(--blue);margin-bottom:.5rem}
.uguide b{font-family:var(--font-h);font-weight:600;font-size:1rem}
.uguide span{color:var(--ink-2);font-size:.88rem;line-height:1.5}

/* ============================================================================
   BREADCRUMB
   ========================================================================== */
.ucrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-faint);
  padding-block:1.4rem .25rem}
.ucrumb a{color:var(--ink-2)}
.ucrumb a:hover{color:var(--blue)}
.ucrumb .i{font-size:.9em;opacity:.5}
.ucrumb [aria-current]{color:var(--ink);font-family:var(--font-m);font-weight:500}
@media (max-width:700px){.ucrumb [aria-current],.ucrumb .i:last-of-type{display:none}}

/* ============================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */
.pdp{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:start;padding-block:1.5rem}
@media (max-width:900px){.pdp{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .pdp > *{min-width:0}
  .pdp__sku{overflow-wrap:anywhere}
  /* one column: the photo must not push price and Add to cart off the first screen */
  /* (.pdp prefix: the general .pdp__stage rule below comes later and its 1/1 ratio turned 420px of height into 420px of width) */
  .pdp .pdp__stage{aspect-ratio:auto;width:100%;height:min(52vh,420px)}}

.pdp__stage{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  aspect-ratio:1/1;display:grid;place-items:center;padding:clamp(1rem,.5rem + 2vw,2rem);
  overflow:hidden;position:relative;cursor:zoom-in}
.pdp__stage img{width:100%;height:100%;object-fit:contain;
  transition:transform .18s var(--ease-out);will-change:transform}
.pdp__stage.is-zoom{cursor:zoom-out}
.pdp__stage--empty{color:var(--ink-faint);background:var(--paper-2)}
.pdp__stage--empty .i{font-size:3rem;opacity:.4}
.pdp__thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap;padding:0;list-style:none}
.pdp__thumbs button{width:66px;height:66px;padding:.35rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.pdp__thumbs button img{max-width:100%;max-height:100%;object-fit:contain}
.pdp__thumbs button:hover{border-color:var(--blue-200)}
.pdp__thumbs button[aria-current="true"]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-050)}

.pdp__brand{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.pdp__chip{font-family:var(--font-m);font-size:.72rem;font-weight:500;letter-spacing:.02em;
  padding:.3rem .6rem;border-radius:var(--r-xs);background:var(--blue-050);color:var(--blue-ink)}
.pdp__chip--oem{background:var(--paper-3);color:var(--ink-2)}
.pdp h1.pdp__sku{font-family:var(--font-m);font-weight:600;font-size:clamp(1.9rem,1.4rem + 2vw,2.6rem);
  letter-spacing:-.03em;line-height:1;margin:0}
.pdp__name{margin:.55rem 0 0;color:var(--ink-2);font-size:1.08rem;line-height:1.45;max-width:44ch}

.pdp__pricerow{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  margin:1.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.pdp__price{font-family:var(--font-h);font-weight:700;font-size:2.1rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.pdp__was{color:var(--ink-faint);text-decoration:line-through;font-variant-numeric:tabular-nums}
.pdp__save{font-family:var(--font-m);font-size:.75rem;font-weight:600;padding:.28rem .55rem;
  border-radius:var(--r-xs);background:var(--teal-050);color:var(--teal-ink)}

.pdp__stock{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-weight:500;font-size:.95rem}
.pdp__stock .i{font-size:1.15rem}
.pdp__stock--in{color:var(--ok)}
.pdp__stock--bo{color:var(--warn)}
.pdp__stock--out{color:var(--err)}
.pdp__stock b{font-weight:600}
.pdp__stocknote{margin:.35rem 0 0;font-size:.88rem;color:var(--ink-faint)}

.pdp__cart{display:flex;gap:.75rem;align-items:stretch;margin-top:1.5rem;flex-wrap:wrap}
.uqty{display:flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  overflow:hidden;background:#fff;flex:none}
.uqty button{width:42px;height:100%;min-height:48px;border:0;background:none;cursor:pointer;color:var(--ink-2);
  display:grid;place-items:center;transition:background var(--dur-2)}
.uqty button:hover{background:var(--paper-2);color:var(--blue)}
.uqty input{width:44px;border:0;text-align:center;font-family:var(--font-m);font-weight:600;font-size:1rem;
  background:none;outline:none;-moz-appearance:textfield}
.uqty input::-webkit-outer-spin-button,.uqty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__cart .btn{flex:1;min-width:190px}

.pdp__secondary{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:1rem}
.pdp__secondary button,.pdp__secondary a{display:inline-flex;align-items:center;gap:.45rem;background:none;
  border:0;cursor:pointer;font-family:var(--font-h);font-weight:600;font-size:.9rem;color:var(--ink-2);padding:0}
.pdp__secondary button:hover,.pdp__secondary a:hover{color:var(--blue)}
.pdp__secondary .is-on{color:var(--err)}

.pdp__assure{list-style:none;margin:1.75rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.75rem}
.pdp__assure li{display:flex;align-items:flex-start;gap:.65rem;font-size:.92rem;color:var(--ink-2)}
.pdp__assure .i{color:var(--blue);font-size:1.15rem;flex:none;margin-top:.1rem}
.pdp__assure b{color:var(--ink);font-weight:600}

/* ---- spec + notes blocks ---- */
.pdp__detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start;padding-block:clamp(2rem,1rem + 3vw,3.5rem);
  border-top:1px solid var(--line);margin-top:clamp(2rem,1rem + 3vw,3.5rem)}
@media (max-width:900px){.pdp__detail{grid-template-columns:1fr}}
.pdp__detail h2{font-size:1.28rem;margin-bottom:1.2rem}
.uspecs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;list-style:none;margin:0;padding:0}
@media (max-width:560px){.uspecs{grid-template-columns:1fr}}
.uspecs li{background:var(--paper-2);border-radius:var(--r-sm);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.uspecs dt,.uspecs .k{font-family:var(--font-m);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.uspecs dd,.uspecs .v{margin:0;font-family:var(--font-h);font-weight:600;font-size:.95rem;color:var(--ink)}
.pdp__notes{background:var(--paper-2);border-radius:var(--r);padding:1.4rem 1.5rem;color:var(--ink-2);line-height:1.6}
.pdp__notes p:last-child{margin-bottom:0}
.pdp__help{margin-top:1rem;display:flex;flex-direction:column;gap:.6rem}
.pdp__help a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-h);font-weight:600;font-size:.92rem}

/* ---- interchange / alternates ---- */
.ualts{border-top:1px solid var(--line);padding-block:clamp(2rem,1rem + 3vw,3.5rem)}
.ualts h2{font-size:1.28rem;margin-bottom:.4rem}
.ualts > p{color:var(--ink-2);margin-bottom:1.5rem;max-width:60ch}
.ualts__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
.ualt{display:flex;flex-direction:column;gap:.25rem;border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;color:var(--ink);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.ualt:hover{border-color:var(--blue-200);box-shadow:var(--sh-1);color:var(--ink)}
.ualt__sku{font-family:var(--font-m);font-weight:600;font-size:.95rem;color:var(--blue)}
.ualt__name{font-size:.84rem;color:var(--ink-2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ualt__price{margin-top:.35rem;font-family:var(--font-m);font-weight:600;font-variant-numeric:tabular-nums}

/* legal note under catalog pages */
.xref-note{font-size:.76rem;line-height:1.6;color:var(--ink-faint);max-width:110ch;margin:0;padding-block:1.5rem 2.5rem;border-top:1px solid var(--line-2)}
.xref-note a{color:var(--ink-2);text-decoration:underline}

/* ============================================================================
   CATALOG · hub + group grids
   ========================================================================== */
/* .shop-wide is retired: it gave the category template a second, wider rail
   (30px vs 140px) for no gain — the 11-column spec table already scrolls
   inside its own .ptbl-wrap at every viewport. */
.wrap.shop-wide{max-width:var(--wrap)}
.uhub{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.uhubcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.uhubcard:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--ink)}
.uhubcard__media{aspect-ratio:4/3;background:#fff;
  display:grid;place-items:center;padding:1rem;overflow:hidden;color:var(--ink-faint)}
.uhubcard__media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform var(--dur-3) var(--ease)}
.uhubcard:hover .uhubcard__media img{transform:scale(1.06)}
.uhubcard__media .i{font-size:2.4rem;opacity:.35}
.uhubcard__body{padding:.95rem 1.1rem 1.15rem;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:.2rem}
.uhubcard__body b{font-family:var(--font-h);font-weight:600;font-size:.98rem;line-height:1.3}
.uhubcard__body span{font-family:var(--font-m);font-size:.74rem;color:var(--ink-faint)}

/* ---- cart: add by part number (one row, like a parts counter) ---- */
.cartadd{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin-bottom:1.25rem;padding:.75rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)}
.cartadd__lbl{font-weight:600;font-size:.88rem;margin-right:.25rem}
.cartadd input{height:42px;padding:0 .7rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;font-size:.95rem}
.cartadd input:focus{outline:none;border-color:var(--blue);box-shadow:var(--sh-focus)}
.cartadd__sku{flex:1 1 240px;min-width:0;font-family:var(--font-m)}
.cartadd__qty{width:76px;text-align:center;font-family:var(--font-m)}
.cartadd .btn{height:42px}
.cartadd__more{margin-left:auto;font-size:.85rem}
.cartadd__msg{flex-basis:100%;margin:0;font-size:.85rem;color:var(--ok)}
.cartadd__msg.is-bad{color:var(--err)}
.cartlist + .cartadd{margin:.75rem 0 0}   /* under the cart lines (owner, 2026-11-12) */
@media (max-width:560px){.cartadd__lbl{flex-basis:100%}.cartadd__more{margin-left:0}}

/* ---- page head (catalog, group and other listing pages, 2026-11): breadcrumb, H1, one line ---- */
.pagehead{padding-top:1.4rem;padding-bottom:.5rem}
.pagehead__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-top:.6rem}
.pagehead__sub{margin:.4rem 0 0;color:var(--ink-2);font-size:.95rem}
.pagehead .btn-row{display:flex;flex-wrap:wrap;gap:.5rem}
.catsec{padding-block:1.25rem}
.catsec + .catsec{padding-top:.75rem}
.catsec:last-child{padding-bottom:var(--section-y)}
.catsec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem;margin-bottom:.85rem}
.catsec__head .textlink{white-space:nowrap;font-size:.9rem}
.catsec__head h2{font-size:1.15rem}
.catsec__head h2 a{color:var(--ink)}
.catsec__head h2 a:hover{color:var(--blue)}
.catsec__head h2 span{margin-left:.35rem;font:500 .8rem var(--font-m);color:var(--ink-3)}

/* ---- CATEGORY TILES (shop/partials/cat-tiles): photo on white, name, count; description only on hover/focus ---- */
.ctiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.75rem}
.ctile{position:relative;display:flex;flex-direction:column;height:100%;padding:.75rem .75rem .8rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink);overflow:hidden;
  transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.ctile:hover,.ctile:focus-visible{border-color:var(--blue);box-shadow:var(--sh-2);color:var(--ink)}
.ctile__img{position:relative;display:grid;place-items:center;aspect-ratio:4/3;margin-bottom:.6rem}
.ctile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.ctile__img .i{font-size:2.2rem;color:var(--ink-3)}
.ctile__name{font-weight:600;font-size:.92rem;line-height:1.25}
.ctile__n{margin-top:.2rem;font:500 .74rem var(--font-m);color:var(--ink-3)}
.ctile__about{position:absolute;inset:0;display:flex;align-items:flex-end;padding:.85rem;background:rgba(255,255,255,.97);
  color:var(--ink-2);font-size:.8rem;line-height:1.45;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
@media (hover:hover){.ctile:hover .ctile__about{opacity:1;transform:none}}
.ctile:focus-visible .ctile__about{opacity:1;transform:none}
/* phones: a compact two-column list, small square photo beside the name */
@media (max-width:560px){
  .ctiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .ctile{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:.6rem;align-items:center;padding:.5rem .6rem}
  .ctile__img{grid-row:1/3;width:52px;aspect-ratio:1;margin:0}
  .ctile__name{align-self:end;font-size:.82rem;overflow-wrap:break-word;hyphens:auto}
  .ctile__n{align-self:start;font-size:.7rem}
  .ctile__about{display:none}
}

/* ---- "About …" info button: the copy shows in a popover on hover / focus / tap (uds.js toggles .is-open on touch) ---- */
.cinfo{position:relative;display:inline-flex;vertical-align:middle}
.cinfo__btn{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink-2);font:500 .8rem var(--font-b);cursor:help;white-space:nowrap}
.cinfo__btn .i{font-size:1rem;color:var(--blue)}
.cinfo__btn:hover,.cinfo.is-open .cinfo__btn{border-color:var(--blue);color:var(--blue)}
.cinfo__pop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:min(440px,calc(100vw - 2rem));padding:.85rem 1rem;
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--sh-3);
  color:var(--ink-2);font:400 .88rem/1.55 var(--font-b);text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2)}
@media (hover:hover){.cinfo:hover .cinfo__pop{opacity:1;visibility:visible;transform:none}}
.cinfo:focus-within .cinfo__pop,.cinfo.is-open .cinfo__pop{opacity:1;visibility:visible;transform:none}
.ucathead__row,.pagehead__sub{position:relative}
@media (max-width:700px){
  .cinfo{position:static}
  .cinfo__pop{left:0;right:0;width:auto;top:calc(100% + 6px)}
}

/* ---- category page header ---- */
.ucathead__row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.ucathead__sub{color:var(--ink-faint);font-weight:500}
.ucathead .wrap{padding-block:1.4rem 1.1rem}
.ucathead h1{font-size:var(--fs-h1)}
.ucathead .ucathead__row{margin-top:.6rem}
.ucathead__blurb{margin:.6rem 0 0;color:var(--ink-2);max-width:62ch}
.usiblings{display:flex;gap:.5rem;overflow-x:auto;padding:1.4rem .25rem .25rem;margin-inline:-.25rem;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.usiblings::-webkit-scrollbar{height:5px}
.usiblings::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill)}
.usib{flex:none;display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.4rem .9rem .4rem .4rem;color:var(--ink-2);font-size:.85rem;font-weight:500;
  white-space:nowrap;transition:border-color var(--dur-2) var(--ease),color var(--dur-2)}
.usib:hover{border-color:var(--blue);color:var(--blue)}
.usib span{width:30px;height:30px;border-radius:var(--r-pill);background:var(--paper-2);display:grid;place-items:center;overflow:hidden;flex:none}
.usib span img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.usib span .i{font-size:.95rem;color:var(--ink-faint)}

/* ---- filter / sort controls ---- */
.shop-controls{display:grid;grid-template-columns:minmax(240px,2fr) repeat(auto-fit,minmax(160px,1fr));
  gap:.75rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--line);margin-bottom:1.25rem}
@media (max-width:760px){.shop-controls{grid-template-columns:1fr 1fr}
  .shop-controls .shop-search{grid-column:1/-1}}

.shop-search{display:flex;align-items:center;gap:.5rem;background:#fff;border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);padding:.4rem .4rem .4rem .9rem;min-width:0;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.shop-search:focus-within{border-color:var(--blue);box-shadow:var(--sh-focus)}
.shop-search input{flex:1;border:0;outline:none;background:none;font-family:var(--font-m);font-size:.9rem;min-width:0}
.shop-search input::placeholder{font-family:var(--font-b);color:var(--ink-faint)}
.shop-search button{width:36px;height:36px;border:0;border-radius:var(--r-xs);background:var(--blue);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none}
.shop-search button .i{font-size:1.15rem}
.shop-search button:hover{background:var(--blue-700)}
.sortsel{appearance:none;-webkit-appearance:none;background:#fff
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23697687'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>")
  no-repeat right .7rem center/14px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:.66rem 2.1rem .66rem .9rem;
  font-family:var(--font-h);font-weight:500;font-size:.86rem;color:var(--ink-2);cursor:pointer;
  min-width:0;width:100%;text-overflow:ellipsis}
.sortsel:hover{border-color:var(--blue-200)}
.sortsel:focus-visible{border-color:var(--blue);box-shadow:var(--sh-focus)}
.shop-count{font-family:var(--font-m);font-size:.82rem;color:var(--ink-faint);margin-bottom:.9rem}

/* ---- parts table ---- */
#shop-table{transition:opacity var(--dur-2) var(--ease)}
#shop-table.loading{opacity:.45;pointer-events:none}
.ptbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.ptbl{width:100%;border-collapse:collapse;font-size:.88rem}
.ptbl thead th{background:var(--steel);color:#c3d0e6;font-family:var(--font-m);font-weight:500;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;text-align:left;
  padding:.8rem .9rem;white-space:nowrap;position:sticky;top:0;z-index:1}
.ptbl thead th:first-child{border-top-left-radius:var(--r)}
.ptbl thead th:last-child{border-top-right-radius:var(--r)}
.th-sort{display:inline-flex;align-items:center;gap:.35rem;color:inherit}
.th-sort:hover{color:#fff}
.th-arrow{opacity:.4;font-size:.85em;line-height:1}
.th-arrow.on{opacity:1;color:var(--teal-300)}
.ptbl tbody tr{border-top:1px solid var(--line-2)}
.ptbl tbody tr:hover{background:var(--blue-050)}
.ptbl td{padding:.65rem .9rem;vertical-align:middle;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptbl td.l{white-space:normal;min-width:220px}
/* the .p-add / .p-view / .p-plus rules live further down in one place; this
   older copy carried !important and was turning the primary add-to-cart button
   back into an outline. */
.p-pic{width:88px;height:88px;min-width:88px;max-width:none;object-fit:contain;background:var(--paper-2);border-radius:var(--r-xs);
  padding:2px;cursor:zoom-in;mix-blend-mode:multiply}
.p-pic-ph{width:88px;height:88px;min-width:88px;display:grid;place-items:center;background:var(--paper-2);
  border-radius:var(--r-xs);color:var(--ink-faint)}
.p-pn{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-m);font-weight:600;color:var(--blue)}
.p-pn .i{font-size:.85em;opacity:.5}
.p-pn:hover .i{opacity:1}
.p-alt{display:inline-grid;place-items:center;margin-left:.35rem;color:var(--warn);cursor:help}
.p-price{display:flex;align-items:baseline;gap:.4rem;font-family:var(--font-m)}
.p-price .now{font-weight:600;color:var(--ink);font-size:.95rem}
.p-price .was{text-decoration:line-through;color:var(--ink-faint);font-size:.78rem}
.p-price .save{font-size:.66rem;font-weight:600;color:var(--teal-ink);background:var(--teal-050);
  padding:.15rem .35rem;border-radius:4px;letter-spacing:.02em}
.p-notes{white-space:normal;color:var(--ink-2)}
.p-muted{color:var(--ink-faint)}

/* pagination */
.shop-pg{display:flex;gap:.45rem;justify-content:center;align-items:center;margin-top:1.5rem;flex-wrap:wrap}
.shop-pg a,.shop-pg span{min-width:40px;height:40px;padding:0 .7rem;border-radius:var(--r-sm);
  display:inline-grid;place-items:center;font-family:var(--font-m);font-size:.85rem;
  border:1px solid var(--line);color:var(--ink-2);background:#fff}
.shop-pg a:hover{border-color:var(--blue);color:var(--blue)}
.shop-pg .cur{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.shop-pg .dis{opacity:.35;border-color:transparent;background:none}

/* empty state */
.aempty{text-align:center;padding:3.5rem 1rem;color:var(--ink-2);border:1px dashed var(--line-strong);
  border-radius:var(--r);background:var(--paper-2)}
.aempty b{display:block;font-family:var(--font-h);font-size:1.1rem;color:var(--ink);margin-bottom:.4rem}

/* ============================================================================
   SEARCH — the header field opens a results panel in the site's own language (owner, 2026-11-12: "no combina con el
   sitio web"; it was a dark full-screen takeover with a black Close button and yellow highlights).
   Desktop (.is-drop): the field stays where it is in the header, results drop down under it, a light scrim behind.
   Phones: a white sheet with a header-style field and a blue Cancel.
   ========================================================================== */
.uds-search{position:fixed;inset:0;z-index:500;display:none;flex-direction:column;background:#fff}
.uds-search.on{display:flex}
.us-top{background:#fff;border-bottom:1px solid var(--line);padding:.6rem var(--gutter,1rem)}
.us-topin{display:flex;gap:.6rem;align-items:center;max-width:980px;margin:0 auto}
.us-inputwrap{flex:1;min-width:0;display:flex;align-items:center;height:44px;background:var(--paper-2);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.us-inputwrap:focus-within{border-color:var(--blue);background:#fff;box-shadow:var(--sh-focus)}
.us-mag{display:grid;place-items:center;flex:none;margin:0 .1rem 0 .8rem;color:var(--ink-3);font-size:1.1rem}
.us-input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 .6rem;font-family:var(--font-b);font-size:1rem;color:var(--ink);outline:none}
.us-input::placeholder{color:var(--ink-3)}
.us-input::-webkit-search-cancel-button{display:none}
.us-clear{flex:none;border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:1.05rem;display:grid;place-items:center;padding:.4rem}
.us-clear:hover{color:var(--ink)}
.us-kbd{display:none;flex:none;font-family:var(--font-m);font-size:.68rem;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:.1rem .35rem;margin-inline-end:.5rem;background:#fff}
.us-go{display:none;flex:none;height:100%;padding:0 1.15rem;border:0;background:var(--blue);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer}
.us-go:hover{background:var(--blue-700)}
.us-close{flex:none;border:0;background:none;color:var(--blue);font-family:var(--font-h);font-weight:600;font-size:.95rem;padding:.6rem .2rem;cursor:pointer;white-space:nowrap}
.us-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.us-inner{max-width:980px;margin:0 auto;padding:0 0 3rem}

/* desktop: anchored to the header field (search.js sets --us-x/--us-y/--us-w/--us-h from it) */
.uds-search.is-drop{background:rgba(11,26,51,.16)}
.uds-search.is-drop .us-top{position:absolute;left:var(--us-x);top:var(--us-y);width:var(--us-w);padding:0;border:0;background:none}
.uds-search.is-drop .us-topin{max-width:none}
.uds-search.is-drop .us-inputwrap{height:var(--us-h);background:#fff;border-color:var(--blue);box-shadow:var(--sh-focus)}
.uds-search.is-drop .us-input{font-size:.95rem}
.uds-search.is-drop .us-kbd,.uds-search.is-drop .us-go{display:block}
.uds-search.is-drop .us-close{display:none}
.uds-search.is-drop .us-body{position:absolute;left:var(--us-x);top:calc(var(--us-y) + var(--us-h) + 6px);flex:none;
  width:min(max(var(--us-w),680px),calc(100vw - var(--us-x) - 16px));max-height:calc(100vh - var(--us-y) - var(--us-h) - 24px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3)}
.uds-search.is-drop .us-inner{max-width:none;padding:0}

/* idle: recent and popular searches as the results page's jump buttons */
.us-hint{padding:1rem;color:var(--ink-2);font-size:.92rem}
.us-hint:empty{display:none}
.us-busy{color:var(--ink-3)}
.us-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.75rem}
.us-chips__l{flex-basis:100%;font-size:.82rem;color:var(--ink-3);margin-bottom:.1rem}
.us-chip{border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:.4rem .75rem;font:inherit;font-size:.86rem;cursor:pointer}
.us-chip:hover,.us-chip:focus-visible{border-color:var(--blue);color:var(--blue);background:var(--blue-050);outline:none}
.us-chip--x{border-color:transparent;color:var(--ink-3);text-decoration:underline}
.us-tip{color:var(--ink-3);font-size:.84rem;margin:.75rem 0 0}
.us-tip b{color:var(--ink)}
.us-tip kbd{font-family:var(--font-m);font-size:.72rem;border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:.05rem .3rem;margin:0 .1rem;color:var(--ink-2);background:var(--paper-2)}
.us-none{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;color:var(--ink-2);line-height:1.55;background:var(--paper-2)}
.us-none b{display:block;color:var(--ink);font-family:var(--font-h);margin-bottom:.25rem}
.us-none a{color:var(--blue);font-weight:600}

/* results: a group per category, rows like the catalog tables (blue part number, the same blue Add) */
.us-results{display:flex;flex-direction:column}
.us-group{border-top:1px solid var(--line)}
.us-group:first-child{border-top:0}
.us-ghead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem 1rem .3rem}
.us-ghead h3{margin:0;font-family:var(--font-h);font-size:.95rem;font-weight:600;color:var(--ink)}
.us-ghead a{font-size:.84rem;font-weight:600;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.us-ghead a:hover{text-decoration:underline}
.us-card{display:flex;align-items:center;gap:.85rem;padding:.5rem 1rem;color:inherit;text-decoration:none}
.us-card:hover,.us-card.is-active{background:var(--blue-050)}
.us-cimg{width:48px;height:48px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;color:var(--ink-3)}
.us-cimg img{max-width:100%;max-height:100%;object-fit:contain}
.us-cbody{flex:1;min-width:0;display:flex;flex-direction:column}
.us-csku{order:-1;color:var(--blue);font-family:var(--font-m);font-weight:600;font-size:.82rem}
.us-cname{color:var(--ink);font-weight:400;font-size:.88rem;line-height:1.35;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.us-xref{font-size:.8rem;color:var(--ink-2)}
.us-card mark{background:none;color:inherit;font-weight:700}
.us-cprice{font-family:var(--font-m);font-weight:600;color:var(--ink);font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.us-cprice.is-call{font-family:var(--font-b);font-size:.8rem;color:var(--ink-3);font-weight:500}
.us-cadd{flex:none;display:inline-flex;align-items:center;gap:.35rem;height:36px;padding:0 .8rem;border:0;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;font-family:var(--font-h);font-weight:600;font-size:.85rem;cursor:pointer}
.us-cadd:hover{background:var(--blue-700)}
.us-cadd .i{font-size:1.05rem}
.us-cadd.is-busy{opacity:.6;pointer-events:none}
.us-cadd.is-busy .i{animation:uspin .7s linear infinite}
.us-cadd.is-done{background:var(--ok)}
.us-cadd.is-err{background:var(--err,#b42318)}
.us-cgo{width:36px;height:36px;flex:none;display:grid;place-items:center;color:var(--ink-3);font-size:1.05rem}
.us-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line)}
.us-all{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.85rem 1rem;color:var(--blue);font-weight:600;text-decoration:none}
.us-all:hover{background:var(--blue-050)}
@keyframes uspin{to{transform:rotate(360deg)}}
@media (max-width:760px){ .us-tip{display:none} }   /* keyboard keys mean nothing on a phone */
@media (max-width:560px){
  .us-cadd{width:40px;height:40px;padding:0;justify-content:center}
  .us-cadd span{display:none}
}

/* ============================================================================
   POPOVERS
   ========================================================================== */
.stock-pop,.alt-pop{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-3);background:#fff;
  font-size:.85rem;color:var(--ink-2)}
.img-pop{border-radius:var(--r-lg);box-shadow:var(--sh-3)}

/* ============================================================================
   SHARED MARKETING / CONTENT MODULES
   (supersedes the equivalents in uds.css for every internal page)
   ========================================================================== */

/* ---- page hero ---- */
.phero{background:var(--paper-2);border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  padding-block:0 clamp(2rem,1.2rem + 2.5vw,3.25rem)}
.phero::before{display:none}
.phero .wrap{position:relative}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ink-faint);
  padding-block:1.4rem .9rem;font-family:var(--font-b)}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--blue)}
.crumb .sep{opacity:.4}
.accentline{width:44px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:1.1rem}
.phero h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);max-width:20ch}
.phero .lead{margin-top:.9rem;max-width:62ch}

/* ---- split (text + media) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,1rem + 3.5vw,4rem);align-items:center}
.split.rev .txt{order:2}
.split > div > img,.split img.media,.split video{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:var(--sh-2);display:block}
.split h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);margin-bottom:.9rem}
.split p{color:var(--ink-2);line-height:1.65;font-size:1.03rem}
.split p:last-child{margin-bottom:0}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:1.75rem}.split.rev .txt{order:0}
  .split > div[style*="order:2"],.split > div[style*="order: 2"]{order:0!important}}

/* ---- section head ----
   There used to be two of these: .s-head (left) and .secthead (centred, auto
   margins). Two components meant the heading rail jumped between 140px and
   410px from one section to the next. .secthead is now the same object. */
.secthead{margin-inline:0;margin-bottom:clamp(2rem,1rem + 3vw,3.25rem)}
.secthead h2{font-size:var(--fs-h2)}
.secthead p{margin-top:.75rem;color:var(--ink-2);font-size:var(--fs-lead);max-width:56ch}

/* ---- benefit list ---- */
.benefits{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.7rem}
.benefits li{display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.95rem 1.15rem;font-family:var(--font-h);font-weight:500;
  font-size:.98rem;color:var(--ink)}
.benefits li::before{content:"";flex:none;width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--teal-050) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231f9e88'><path d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/></svg>") center/13px no-repeat}

/* ---- stat band ---- */
.counterband{display:flex;align-items:center;gap:1.25rem 1.75rem;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--band-pad);margin-block:2rem}
.counterband .cnum{font-family:var(--font-h);font-weight:800;font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);
  line-height:1;color:var(--blue);letter-spacing:-.03em}
.counterband .clab{font-family:var(--font-h);font-weight:500;font-size:1.05rem;color:var(--ink-2);max-width:26ch}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;text-align:left}
.stat .v{font-family:var(--font-h);font-weight:800;font-size:clamp(2rem,1.6rem + 1.6vw,2.7rem);
  color:var(--blue);letter-spacing:-.03em;line-height:1}
.stat .l{color:var(--ink-2);font-size:.92rem;margin-top:.5rem;font-weight:500}

/* ---- closing band on landing pages ---- */
.premade-band{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  border-radius:var(--r-xl);padding:var(--band-pad);margin-top:1rem}
.premade-band::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--steel)}
.premade-band h2{color:#fff;font-size:var(--fs-h2);margin-bottom:.7rem;max-width:22ch}
.premade-band p{color:#b9c6de;max-width:52ch;margin-inline:0;margin-bottom:1.75rem;font-size:var(--fs-lead)}
.premade-band .btn{margin:.3rem}
.premade-band .btn-primary{--btn-bg:#fff;--btn-fg:var(--blue-ink);box-shadow:none}
.premade-band .btn-primary:hover{--btn-bg:var(--paper-2);--btn-fg:var(--blue-ink)}
.premade-band .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35)}
.premade-band .btn-ghost:hover{--btn-bd:#fff;background:rgba(255,255,255,.08)}

/* ---- testimonials ---- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:1.1rem}
.tcard::before{content:"";width:26px;height:20px;flex:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='%23b7cdf0'><path d='M0 24V13.3C0 5.9 4.2 1 12 0v4.7C8 5.6 6.2 8 6.2 11.2H12V24H0zm20 0V13.3C20 5.9 24.2 1 32 0v4.7c-4 .9-5.8 3.3-5.8 6.5H32V24H20z'/></svg>") no-repeat center/contain}
.tcard p{color:var(--ink-2);line-height:1.6;margin:0;flex:1;font-size:.97rem;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.twho{display:flex;flex-direction:column;gap:.1rem;border-top:1px solid var(--line-2);padding-top:1rem}
.twho b{font-family:var(--font-h);font-weight:600;color:var(--ink);font-size:.95rem}
.twho span{color:var(--ink-faint);font-size:.8rem}

/* ---- service / value cards ---- */
.svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.svc:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px)}
.svc .ic{width:48px;height:48px;border-radius:var(--r-sm);background:var(--blue-050);color:var(--blue);
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:1.1rem}
.svc h3{font-size:1.15rem;margin-bottom:.5rem}
.svc p{color:var(--ink-2);font-size:.95rem;margin:0;line-height:1.6}
.svc .go{margin-top:1rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);
  font-family:var(--font-h);font-weight:600;font-size:.9rem}

.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2rem}
.why-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.why-card h3,.why-card h2{font-size:1.1rem;margin-bottom:.6rem}
.why-card p{color:var(--ink-2);line-height:1.6;font-size:.96rem;margin:0}

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.75rem}
.val .n{font-family:var(--font-m);font-weight:600;color:var(--blue-200);font-size:1.1rem}
.val h3{font-size:1.1rem;margin:.6rem 0 .4rem}
.val p{color:var(--ink-2);font-size:.95rem;margin:0;line-height:1.6}

/* ---- spec list / FAQ ---- */
.speclist{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:640px){.speclist{grid-template-columns:1fr}}
.speclist li{background:var(--paper-2);border-radius:var(--r-sm);padding:.9rem 1.1rem;
  color:var(--ink-2);line-height:1.55;font-size:.95rem}
.speclist li b{color:var(--ink);font-weight:600;display:block;margin-bottom:.15rem;font-family:var(--font-h)}

.faq{display:grid;gap:.6rem;margin-top:1.75rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--dur-2) var(--ease)}
.faq details[open]{border-color:var(--blue-200)}
.faq summary{cursor:pointer;padding:1.1rem 1.4rem;font-family:var(--font-h);font-weight:600;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231246ab'><path d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/></svg>") center/contain no-repeat;
  transition:transform var(--dur-2) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.4rem 1.3rem;margin:0;color:var(--ink-2);line-height:1.65}

/* ---- comparison ---- */
.vsgrid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.5rem;align-items:center;margin-top:1.75rem}
.vscol{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem}
.vscol h3{font-size:1.1rem;margin-bottom:.6rem}
.vscol p{color:var(--ink-2);line-height:1.6;margin:0 0 1.1rem;font-size:.96rem}
.vsbadge{width:64px}
/* 1fr is minmax(auto,1fr): a long CTA label set the track's min-content width
   and pushed the card past the viewport on small screens. */
@media (max-width:760px){.vsgrid{grid-template-columns:minmax(0,1fr)}.vsbadge{margin-inline:auto}}
.vscol .btn{max-width:100%;white-space:normal;text-align:center}

/* ---- prose ---- */
.prose{max-width:var(--wrap)}
.prose > *{max-width:var(--measure,var(--wrap-prose))}
.prose h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.8rem);margin:2.25rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.18rem;margin:1.75rem 0 .6rem}
.prose p{color:var(--ink-2);line-height:1.7;margin:0 0 1.1rem}
.prose ul,.prose ol{color:var(--ink-2);line-height:1.7;margin:0 0 1.1rem;padding-left:1.3rem;display:grid;gap:.45rem}
.prose b,.prose strong{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:.15em}

/* ---- info blocks row (kept for internal pages) ---- */
.infoblocks{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:#fff}
.iblock{display:flex;align-items:center;gap:1rem;padding:1.4rem 1.5rem;border-right:1px solid var(--line-2)}
.iblock:last-child{border-right:0}
.iblock .ic{width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-050);color:var(--blue);
  display:grid;place-items:center;font-size:1.35rem;flex:none}
.iblock h4{font-family:var(--font-h);font-weight:600;font-size:.95rem;color:var(--ink);margin:0 0 .1rem}
.iblock p{font-size:.82rem;color:var(--ink-faint);margin:0}
@media (max-width:900px){.infoblocks{grid-template-columns:1fr 1fr}
  .iblock:nth-child(2){border-right:0}
  .iblock:nth-child(-n+2){border-bottom:1px solid var(--line-2)}}
@media (max-width:520px){.infoblocks{grid-template-columns:1fr}
  .iblock{border-right:0;border-bottom:1px solid var(--line-2)}}

/* ---- generic CTA band ---- */
.ctaband{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  border-radius:var(--r-xl);padding:var(--band-pad)}
.ctaband::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--steel)}
.ctaband h2{color:#fff;margin-bottom:.7rem;max-width:22ch}
.ctaband p{color:#b9c6de;max-width:52ch;margin-inline:0;margin-bottom:1.75rem;font-size:var(--fs-lead)}
.ctaband .cta{display:flex;gap:.9rem;flex-wrap:wrap}
.ctaband .btn-primary{--btn-bg:#fff;--btn-fg:var(--blue-ink);box-shadow:none}
.ctaband .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35)}

/* ============================================================================
   FORMS  (contact, fitment, quote, measuring guides)
   ========================================================================== */
.fitform-wrap{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem)}
.fitform-wrap > h2{font-size:1.4rem;margin-bottom:.4rem}
.fitform-wrap > .sub{color:var(--ink-2);margin-inline:0;margin-bottom:1.75rem;max-width:56ch}

.fitform{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:600px){.fitform{grid-template-columns:1fr}}
.fitform .full,.fitform .fgrid2{grid-column:1/-1}
.fitform .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:600px){.fitform .fgrid2{grid-template-columns:1fr}}
.fitform label,.field label,.co-grid label,.apt-form label,.authform label{
  display:block;font-family:var(--font-h);font-weight:600;font-size:.82rem;color:var(--ink);
  margin-bottom:.4rem;letter-spacing:0}
.fitform input,.fitform .fsel,.fitform .ftxa,.fitform select,.fitform textarea,
.field input,.field select,.field textarea,
.co-grid input,.co-grid select,.co-grid textarea,
.apt-form input,.apt-form textarea,.authform input{
  width:100%;padding:.8rem .95rem;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font-family:var(--font-b);font-size:.98rem;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.fitform input::placeholder,.field input::placeholder,.co-grid input::placeholder,
.apt-form input::placeholder,.authform input::placeholder,.fitform .ftxa::placeholder{color:var(--ink-faint)}
.fitform input:focus,.fitform .fsel:focus,.fitform .ftxa:focus,.fitform select:focus,.fitform textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus,
.co-grid input:focus,.co-grid select:focus,.co-grid textarea:focus,
.apt-form input:focus,.apt-form textarea:focus,.authform input:focus{
  outline:none;border-color:var(--blue);box-shadow:var(--sh-focus)}
.fitform .ftxa,.field textarea,.co-grid textarea{min-height:120px;resize:vertical;line-height:1.6}
.fitform .fsel,.field select,.co-grid select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23697687'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:14px;padding-right:2.4rem}

.fitform button[type=submit],.form button[type=submit]{
  grid-column:1/-1;justify-self:start;min-width:220px;margin-top:.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 2rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-h);font-weight:600;font-size:1rem;
  color:#fff;background:var(--blue);
  box-shadow:0 10px 24px -12px rgba(18,70,171,.7);
  transition:transform var(--dur-1) var(--ease),background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.fitform button[type=submit]:hover{background:var(--blue-700);transform:translateY(-2px)}
.fitform button[type=submit]:active{transform:translateY(0) scale(.985)}
@media (max-width:600px){.fitform button[type=submit]{justify-self:stretch;width:100%}}

/* consent / helper checkbox row */
.qr{display:flex;align-items:center;gap:.6rem;font-family:var(--font-b);font-weight:500;
  color:var(--ink);cursor:pointer;font-size:.96rem}
.qr input[type=checkbox],.qr input[type=radio]{width:18px;height:18px;accent-color:var(--blue);cursor:pointer;flex:none}
.qradios{display:flex;gap:1.4rem;flex-wrap:wrap;padding:.25rem 0}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.consent input{margin-top:.2rem;width:17px;height:17px;accent-color:var(--blue);flex:none}
.consent a{text-decoration:underline}

/* multi-section quote form */
.qsection{grid-column:1/-1;display:flex;align-items:center;gap:.85rem;margin:1.25rem 0 .25rem;
  padding-top:1.5rem;border-top:1px solid var(--line)}
.qsection:first-child{border-top:0;padding-top:0;margin-top:0}
.qsection .qnum{width:30px;height:30px;border-radius:var(--r-pill);background:var(--blue);color:#fff;
  display:grid;place-items:center;font-family:var(--font-m);font-weight:600;font-size:.85rem;flex:none}
.qsection h3{font-size:1.15rem;margin:0}

/* success + error panels */
.fit-thanks{max-width:640px;margin-inline:auto;text-align:center;background:var(--ok-bg);
  border:1px solid var(--ok-line);border-radius:var(--r-lg);padding:2rem 1.75rem;color:var(--ok)}
.fit-thanks h3,.fit-thanks h2{color:var(--ok);font-size:1.25rem;margin-bottom:.5rem}
.fit-thanks p{margin:0;line-height:1.6;color:#1c6b41}
.co-errors,.autherr,.apt-errors,.qo-msg.bad{background:var(--err-bg);border:1px solid var(--err-line);
  color:var(--err);border-radius:var(--r-sm);padding:.85rem 1.1rem;font-size:.9rem}
.acct-ok,.qo-msg.ok,.co-coupon-on{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);
  border-radius:var(--r-sm);padding:.75rem 1.1rem;font-size:.9rem;display:flex;align-items:center;gap:.5rem}

/* ============================================================================
   GUIDE / SIDEBAR LAYOUT (contact + measuring guides)
   ========================================================================== */
.guidewrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.75rem,1rem + 2.5vw,3rem);align-items:start}
@media (max-width:980px){.guidewrap{grid-template-columns:1fr}}
.gmain{min-width:0}
.gside{display:flex;flex-direction:column;gap:1.1rem;position:sticky;top:110px}
@media (max-width:980px){.gside{position:static}}
.sbcard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.sbcard h3,.sbcard h2{font-size:1.05rem;margin:0 0 1rem}
.sbcard h3 + p,.sbcard h2 + p{margin-top:-.5rem}
.sbcard p{color:var(--ink-2);line-height:1.6;margin:0 0 .5rem;font-size:.95rem}
.sbcard p:last-child{margin-bottom:0}
.help-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;color:var(--ink);
  font-family:var(--font-h);font-weight:600;font-size:.93rem;line-height:1.35;word-break:break-word}
.help-row:last-child{margin-bottom:0}
.help-row .ic{width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;flex:none;color:#fff}
.help-row .ic .i{font-size:1.15rem}
.help-row .ic svg{width:19px;height:19px;fill:#fff}
.help-row:hover{color:var(--blue)}
.ic-phone{background:var(--blue)}.ic-wa{background:#25d366}.ic-mail{background:var(--teal)}
.social-row{display:flex;gap:.65rem}
.social-row a{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;color:#fff;
  transition:transform var(--dur-2) var(--ease)}
.social-row a:hover{transform:translateY(-2px);color:#fff}
.social-row .i{font-size:1.15rem}
.s-fb{background:#1877f2}.s-ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}.s-tt{background:#111}
.resmenu{list-style:none;margin:0;padding:0}
.resmenu li + li{border-top:1px solid var(--line)}
.resmenu a{display:block;padding:.75rem 0;color:var(--ink-2);font-family:var(--font-h);font-weight:500;font-size:.93rem;
  transition:color var(--dur-2) var(--ease),padding-left var(--dur-2) var(--ease)}
.resmenu a:hover{color:var(--blue);padding-left:.35rem}
.resmenu a.active{color:var(--blue);font-weight:600}

/* guide page content bits */
.vbanner{background:var(--steel);color:#fff;border-radius:var(--r);padding:1rem 1.5rem;
  font-family:var(--font-h);font-weight:600;font-size:1.15rem;line-height:1.3;margin:0 0 1.4rem}
.vbanner:first-child{margin-top:0}
.blackbar{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:.85rem 1.4rem;
  font-family:var(--font-h);font-weight:600;font-size:1.05rem;margin:0 0 1.25rem}
.impnote{color:var(--ink-2);line-height:1.7;font-size:1rem;margin:0 0 1.6rem;
  padding:1rem 1.25rem;border-left:3px solid var(--teal);background:var(--teal-050);border-radius:0 var(--r-sm) var(--r-sm) 0}
.impnote b{color:var(--ink)}
.gdiag{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;
  display:grid;place-items:center;box-shadow:var(--sh-1);margin:0 0 1.6rem}
.gdiag img{width:100%;max-width:760px;height:auto}
.gdiag.dual{grid-template-columns:1fr 1fr;gap:1.5rem;place-items:stretch}
@media (max-width:600px){.gdiag.dual{grid-template-columns:1fr}}
.measitem{margin:0 0 1.25rem}
.measitem .mlabel{display:flex;align-items:center;gap:.65rem;font-family:var(--font-h);font-weight:600;
  color:var(--ink);font-size:1rem;margin-bottom:.35rem}
.measitem .mlabel .badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font-family:var(--font-m);font-size:.78rem;flex:none}
.measitem .mtext{color:var(--ink-2);line-height:1.65;margin:0;padding-left:2.3rem;font-size:.97rem}
@media (max-width:560px){.measitem .mtext{padding-left:0}}
.deflist{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin:0 0 1rem}
.defitem{display:flex;align-items:center;gap:.65rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.7rem .9rem;font-family:var(--font-h);font-weight:600;color:var(--ink);font-size:.92rem}
.defitem .badge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font-family:var(--font-m);font-size:.78rem;flex:none}
.mrow,.otype{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;margin-top:1rem}
.mrow h4,.otype h3{font-family:var(--font-h);font-size:.95rem;color:var(--ink);margin:0 0 .5rem}
.otype h3{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.mrow p,.otype p{color:var(--ink-2);font-size:.95rem;line-height:1.6;margin:0 0 .5rem}
.mrow p:last-child,.otype p:last-child{margin-bottom:0}
.mrow .ml,.otype .ml{font-weight:600;color:var(--blue)}
.mnote{color:var(--ink-faint);font-size:.87rem;margin-top:.9rem}
.help-band{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.75rem;text-align:center;margin-top:.6rem}
.help-band h2{font-size:1.35rem;margin-bottom:.5rem}
.help-band p{color:var(--ink-2);max-width:52ch;margin-inline:auto;margin-bottom:1.4rem}
.dtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin:0 0 1.75rem}
.dtable{width:100%;border-collapse:collapse;min-width:440px;font-size:.93rem}
.dtable thead th{background:var(--steel);color:#c3d0e6;font-family:var(--font-m);font-weight:500;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:.8rem 1.1rem}
.dtable tbody td{padding:.7rem 1.1rem;border-top:1px solid var(--line-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dtable tbody td:first-child{font-family:var(--font-m);font-weight:600;color:var(--ink)}

/* ============================================================================
   CART
   ========================================================================== */
/* lines + add by part number | summary, and under the lines the suggestions (.cartmore). In the page the suggestions
   come after the summary, so a phone shows Checkout before them (owner, 2026-11-12). */
.cartpage{display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto 1fr;gap:0 clamp(1.5rem,1rem + 2.5vw,2.75rem);align-items:start}
.cartmain{grid-column:1;grid-row:1}
.cartpage > .cartsum{grid-column:2;grid-row:1/span 2}
.cartmore{grid-column:1;grid-row:2;min-width:0;margin-top:1.75rem}
.cartmore .cjob:first-child{margin-top:0}
@media (max-width:920px){
  .cartpage{grid-template-columns:1fr;grid-template-rows:none;row-gap:1.5rem}
  .cartmain,.cartpage > .cartsum,.cartmore{grid-column:1;grid-row:auto}
  .cartmore{margin-top:0}
}

.cartlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;overflow:hidden}
.cartline{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:1.1rem;align-items:center;
  padding:1.1rem 1.25rem;transition:opacity var(--dur-2) var(--ease)}
.cartline + .cartline{border-top:1px solid var(--line-2)}
.cartline.is-new{animation:cartnew 2.4s var(--ease-out)}   /* a part just added on the cart page (cart.js refresh) */
@keyframes cartnew{0%,35%{background:var(--ok-bg,#e8f5ee)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.cartline.is-new{animation:none}}
.cartline.is-busy{opacity:.45;pointer-events:none}
.cartline__media{width:76px;height:76px;border-radius:var(--r-sm);background:var(--paper-2);
  display:grid;place-items:center;overflow:hidden;flex:none;color:var(--ink-faint)}
.cartline__media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.cartline__media .i{font-size:1.6rem;opacity:.4}
.cartline__info{min-width:0}
.cartline__sku{font-family:var(--font-m);font-weight:600;font-size:.85rem;color:var(--blue);display:block}
.cartline__name{color:var(--ink);font-family:var(--font-h);font-weight:600;font-size:.95rem;line-height:1.35;
  margin:.15rem 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cartline__name a{color:inherit}
.cartline__name a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
/* the whole photo, centred in its box (.p-pic's 88px minimum made it overflow the 76/60px box and crop off-centre) */
.cartline__media{position:relative}
.cartline__media .p-pic{position:absolute;inset:0;width:100%;height:100%;min-width:0;max-width:none;max-height:none;padding:4px;box-sizing:border-box;object-fit:contain;object-position:center;background:transparent;cursor:zoom-in}
.cartline__cfg{color:var(--ink-faint);font-size:.8rem;margin-top:.25rem;line-height:1.5}
.cartline__unit{color:var(--ink-faint);font-family:var(--font-m);font-size:.8rem;margin-top:.35rem;display:block}
.cartline__right{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.cartline__total{font-family:var(--font-m);font-weight:600;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.cartline__rm{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:.8rem;
  display:inline-flex;align-items:center;gap:.3rem;padding:.15rem}
.cartline__rm:hover{color:var(--err)}
@media (max-width:560px){
  .cartline{grid-template-columns:60px minmax(0,1fr);gap:.8rem;padding:1rem}
  .cartline__media{width:60px;height:60px}
  .cartline__right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

.cartsum{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:1.5rem;
  position:sticky;top:110px;display:flex;flex-direction:column;gap:1rem}
@media (max-width:920px){.cartsum{position:static}}
.cartsum h2{font-size:1.1rem}
.cartsum__row{display:flex;justify-content:space-between;gap:1rem;font-size:.93rem;color:var(--ink-2)}
.cartsum__row span:last-child{font-family:var(--font-m);font-variant-numeric:tabular-nums;color:var(--ink)}
.cartsum__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-top:1rem;border-top:1px solid var(--line);font-family:var(--font-h);font-weight:700;font-size:1.05rem}
.cartsum__total span:last-child{font-family:var(--font-m);font-weight:700;font-size:1.5rem;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.cartsum__note{font-size:.8rem;color:var(--ink-faint);line-height:1.5;margin:0}

.freebar{display:flex;flex-direction:column;gap:.5rem}
.freebar__track{height:6px;background:var(--paper-3);border-radius:var(--r-pill);overflow:hidden}
.freebar__fill{height:100%;background:var(--teal);border-radius:var(--r-pill);
  transition:width var(--dur-3) var(--ease)}
.freebar p{margin:0;font-size:.85rem;color:var(--ink-2)}
.freebar p b{color:var(--ink);font-family:var(--font-m)}
.freebar.is-done p{color:var(--ok)}
.freebar.is-done .freebar__fill{background:var(--ok)}

.cartempty{text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  background:var(--paper-2);padding:clamp(2.5rem,2rem + 3vw,4.5rem) 1.5rem}
.cartempty>.i{font-size:2.75rem;color:var(--ink-faint);opacity:.45;margin-inline:auto}
.cartempty h2{font-size:1.3rem;margin:1rem 0 .5rem}
.cartempty p{color:var(--ink-2);max-width:42ch;margin-inline:auto;margin-bottom:1.75rem}
.cartempty__cta{display:flex;gap:.75rem;justify-content:center;align-items:center;flex-wrap:wrap}

/* ============================================================================
   CHECKOUT
   Owns the whole page — the view no longer ships an inline <style>. Flat
   surfaces only: no mesh gradients, no backdrop-filter, no glow rings, no
   shine sweep, no staggered card entrances. Every radius, shadow and colour
   comes from a token so checkout looks like the rest of the store.
   All JS hooks (ids, class names) are unchanged.
   ========================================================================== */
.ck{--ck-side-w:380px}

/* ---- hero band ---- */
.ck-hero{background:var(--steel);color:#fff}
.ck-hero .wrap{padding-block:clamp(1.6rem,1.2rem + 1.6vw,2.25rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem 2.5rem;align-items:center}
.ck-hero h1{margin:0;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);letter-spacing:-.025em;line-height:1.1;color:#fff}
.ck-eyebrow{margin:0 0 .55rem;font-family:var(--font-m);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-300)}
.ck-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.ck-trust span{display:inline-flex;align-items:center;gap:.45rem;font-size:.79rem;font-weight:500;
  color:#d3dcec;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);padding:.4rem .8rem}
.ck-trust svg{width:14px;height:14px;fill:var(--teal-300);flex:none}

/* ---- step indicator ---- */
.ck-steps{display:flex;align-items:center;font-family:var(--font-h);font-size:.82rem;font-weight:600}
.ck-steps .st{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.6)}
.ck-steps .st i{width:30px;height:30px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-style:normal;font-family:var(--font-m);font-weight:600;font-size:.8rem;
  border:1.5px solid rgba(255,255,255,.32);background:transparent}
.ck-steps .st.done{color:var(--teal-300)}
.ck-steps .st.done i{background:var(--teal);border-color:var(--teal);color:#fff}
.ck-steps .st.cur{color:#fff}
.ck-steps .st.cur i{background:#fff;border-color:#fff;color:var(--blue-ink)}
.ck-steps .ln{width:48px;height:2px;background:rgba(255,255,255,.22);margin:0 .75rem}
.ck-steps .ln.done{background:var(--teal)}

/* ---- layout ---- */
.ck-body{background:var(--paper-2);padding-block:clamp(1.75rem,1.2rem + 2vw,2.5rem) clamp(3rem,2rem + 3vw,4.5rem)}
.ck-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--ck-side-w);gap:1.75rem;align-items:start}
.ck-main{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
@media (max-width:1080px){.ck{--ck-side-w:340px}.ck-layout{gap:1.25rem}}
@media (max-width:900px){.ck-layout{grid-template-columns:1fr}.ck-side{position:static}}

/* ---- step cards ---- */
.cocard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.cocard:focus-within{border-color:var(--blue-200);box-shadow:var(--sh-2)}
.cocard > h3{margin:0;display:flex;align-items:center;gap:.85rem;padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--line);background:var(--paper-2);
  font-family:var(--font-h);font-size:1rem;font-weight:600;color:var(--ink)}
.cocard > h3 .no{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-family:var(--font-m);font-size:.82rem;font-weight:600;color:#fff;background:var(--blue);flex:none}
.cocard > h3 .ttl{flex:1;min-width:0}
.cocard > h3 .ttl small{display:block;font-size:.78rem;font-weight:400;color:var(--ink-faint);
  margin-top:.15rem;font-family:inherit}
.cocard .cob{padding:1.4rem}

/* small action button inside a card header */
.co-btn-sm{background:var(--blue);color:#fff;border:0;border-radius:var(--r-pill);
  padding:.55rem 1rem;font-family:var(--font-h);font-size:.8rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background var(--dur-2) var(--ease)}
.co-btn-sm:hover{background:var(--blue-700);color:#fff}

/* ---- fields ---- */
.cogrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cogrid .full{grid-column:1/-1}
@media (max-width:560px){.cogrid{grid-template-columns:1fr}}
.cogrid label,.cob label{display:block;font-family:var(--font-h);font-size:.82rem;font-weight:600;
  color:var(--ink);margin:0 0 .4rem;text-transform:none;letter-spacing:0}
.cob input,.cob select,.cob textarea{width:100%;padding:.7rem .85rem;border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);font-size:.98rem;font-family:inherit;background:#fff;color:var(--ink);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.cob input:hover,.cob select:hover,.cob textarea:hover{border-color:var(--blue-200)}
.cob input:focus,.cob select:focus,.cob textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--sh-focus)}
.cob select{appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235c6879' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center}

/* ---- ship-to summary ---- */
.co-static{display:flex;gap:.9rem;align-items:flex-start;color:var(--ink);font-size:.95rem;line-height:1.6;
  background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--r);padding:.9rem 1rem}
.co-static::before{content:"";width:36px;height:36px;flex:none;border-radius:var(--r-sm);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231246ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l9-4 9 4v10l-9 4-9-4z'/><path d='M3 7l9 4 9-4M12 11v10'/></svg>") center/20px no-repeat;
  border:1px solid var(--blue-100)}
.co-static b{display:block;font-family:var(--font-h);font-size:.97rem}
.co-static .muted{display:block;color:var(--ink-2);font-size:.85rem;margin-top:.15rem}

/* saved dropship addresses */
.ship-saved{margin-top:1rem}
.ship-saved .ss-lab{font-family:var(--font-h);font-size:.78rem;font-weight:600;color:var(--ink-faint);margin-bottom:.55rem}
.ship-saved .ss-list+.ss-lab{margin-top:1rem}
.ss-list{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;max-height:236px;overflow-y:auto;padding-right:2px}
@media (max-width:560px){.ss-list{grid-template-columns:1fr}}
.ss-item{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r);padding:.8rem .9rem .8rem 2.6rem;cursor:pointer;font-family:inherit;position:relative;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.ss-item::before{content:"";position:absolute;left:.9rem;top:1rem;width:16px;height:16px;border-radius:var(--r-pill);
  border:2px solid var(--line-strong);background:#fff;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.ss-item:hover{border-color:var(--blue-200)}
.ss-item.on{border-color:var(--blue);background:var(--blue-050)}
.ss-item.on::before{border-color:var(--blue);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 10px var(--blue)}
.ss-item b{display:block;font-family:var(--font-h);font-size:.88rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-item span{display:block;font-size:.79rem;color:var(--ink-2);margin-top:.2rem;line-height:1.45}

/* ---- shipping method meta ---- */
.ship-meta{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
@media (max-width:560px){.ship-meta{grid-template-columns:1fr}}
.ship-meta .m{display:flex;gap:.75rem;align-items:center;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);padding:.8rem .9rem}
.ship-meta .m i{width:34px;height:34px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;font-style:normal;font-size:1.05rem}
.ship-meta .m label{margin:0 0 .1rem;font-size:.75rem;color:var(--ink-faint);font-weight:500}
.ship-meta .m b{display:block;font-family:var(--font-h);font-size:.94rem;color:var(--ink)}
.ship-meta .m .muted{font-size:.78rem;color:var(--ink-faint)}
.info-note{font-size:.88rem;color:var(--ink-2);line-height:1.65}
.info-note + .info-note{margin-top:.6rem}
.info-note b{color:var(--ink)}
#ship-note{margin-top:.75rem;font-size:.82rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:center}
#ship-note::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:var(--teal);flex:none}

/* local pickup: always the last option, never preselected, always acknowledged */
.co-pickup{margin-top:1rem;padding:1rem 1.1rem;border-radius:var(--r);background:var(--warn-bg);border:1px solid #ead9b5;color:var(--ink-2);font-size:.9rem;line-height:1.6}
.co-pickup__head{display:flex;gap:.6rem;align-items:center;color:var(--ink);font-family:var(--font-h);font-size:.98rem;margin-bottom:.45rem}
.co-pickup__head svg{color:var(--warn);font-size:1.2em;flex:none}
.co-pickup p{margin:0 0 .6rem}
.co-pickup a{color:var(--blue);font-weight:600}
.co-pickup__far{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border-radius:var(--r-sm);background:var(--err-bg);border:1px solid var(--err-line);color:var(--ink)}
.co-pickup__far svg{color:var(--err);flex:none;margin-top:.15em}
.co-pickup .co-pickup__ack{background:#fff;margin-top:.4rem}
.co-pickup__payflag{display:flex;gap:.6rem;align-items:flex-start;margin-top:.75rem;padding:.75rem .85rem;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid #ead9b5;font-size:.88rem;color:var(--ink-2);line-height:1.55}
.co-pickup__payflag svg{color:var(--warn);flex:none;margin-top:.15em}
.co-pickup[hidden],.co-pickup__far[hidden],.co-pickup__payflag[hidden]{display:none}

/* ---- payment ---- */
.pay-brands{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.9rem}
.pay-brands span{font-family:var(--font-m);font-size:.68rem;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:var(--r-xs);padding:.25rem .5rem;color:var(--ink-2);background:#fff}
#stripe-card{background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:.9rem}
#stripe-card-err{color:var(--err)}
.pay-secure{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink-faint);margin-top:.75rem}
.pay-secure svg{width:14px;height:14px;fill:var(--ok)}

/* ---- collapsible info ---- */
.ck-info{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.ck-info summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;font-family:var(--font-h);
  font-weight:600;font-size:.94rem;color:var(--ink);display:flex;align-items:center;gap:.6rem}
.ck-info summary::-webkit-details-marker{display:none}
.ck-info summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--ink-faint);
  font-weight:400;transition:transform var(--dur-2) var(--ease)}
.ck-info[open] summary::after{transform:rotate(45deg)}
.ck-info .ib{padding:.9rem 1.25rem 1.15rem;border-top:1px solid var(--line-2)}

/* ---- order summary (white card, not a dark glass panel) ---- */
.ck-side{position:sticky;top:96px}
.sum{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden}
.sum-h{padding:1.15rem 1.35rem;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;border-bottom:1px solid var(--line)}
.sum-h h2{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
.sum-h .cnt{font-family:var(--font-m);font-size:.74rem;font-weight:600;color:var(--blue);
  background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--r-pill);padding:.2rem .6rem}
.sum-items{padding:.25rem 1.35rem;max-height:300px;overflow-y:auto;scrollbar-width:thin}
.sum-it{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.75rem;align-items:center;
  padding:.75rem 0;border-bottom:1px solid var(--line-2)}
.sum-it:last-child{border-bottom:0}
.sum-it .th{width:52px;height:52px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;position:relative}
.sum-it .th img{width:100%;height:100%;object-fit:contain}
.sum-it .th .q{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font-family:var(--font-m);font-size:.7rem;font-weight:600;
  display:grid;place-items:center;padding:0 .3rem}
.sum-it .nm{min-width:0}
.sum-it .nm b{display:block;font-family:var(--font-m);font-size:.84rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sum-it .nm span{display:block;font-size:.78rem;color:var(--ink-2);margin-top:.15rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-it .pr{font-family:var(--font-m);font-weight:600;font-size:.9rem;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right}
.sum-it .pr small{display:block;font-weight:400;color:var(--ink-faint);font-size:.72rem}

/* coupon */
.co-coupon2{padding:1rem 1.35rem .25rem}
.co-coupon-in{display:flex;gap:.5rem}
.co-coupon2 input{flex:1;min-width:0;padding:.65rem .85rem;border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);font-family:inherit;font-size:.92rem}
.co-coupon2 input::placeholder{color:var(--ink-faint)}
.co-coupon2 input:focus{outline:none;border-color:var(--blue);box-shadow:var(--sh-focus)}
.co-coupon2 .co-btn-sm{padding:.65rem 1rem;border-radius:var(--r-sm)}
.co-coupon2 .on{display:flex;align-items:center;gap:.6rem;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);border-radius:var(--r-sm);padding:.6rem .85rem;font-weight:600;font-size:.88rem}
.co-coupon2 .on button{background:none;border:0;color:var(--err);cursor:pointer;font-weight:600;
  margin-left:auto;font-family:inherit}
.co-coupon-err{display:block;color:var(--err);font-size:.81rem;margin-top:.4rem}

/* totals */
.sum-tot{padding:.9rem 1.35rem .25rem}
.sum-tot table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sum-tot td{padding:.4rem 0;font-size:.92rem;color:var(--ink-2)}
.sum-tot td.r{text-align:right;color:var(--ink);font-family:var(--font-m);font-weight:600}
.sum-tot tr.grand td{padding-top:.9rem;border-top:1px solid var(--line);font-family:var(--font-h);
  font-size:1rem;font-weight:700;color:var(--ink)}
.sum-tot tr.grand td.r{font-family:var(--font-m);font-size:1.5rem;letter-spacing:-.02em;color:var(--blue)}
.sum-tot #disc-row td.r{color:var(--ok)}

/* free shipping progress */
.sum-free{padding:.75rem 1.35rem 0}
.freeship{background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);
  border-radius:var(--r-sm);padding:.65rem .9rem;font-family:var(--font-h);font-weight:600;font-size:.83rem}
.freeship.done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.free-meter{height:6px;border-radius:var(--r-pill);background:var(--paper-3);margin-top:.5rem;overflow:hidden}
.free-meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--teal);
  width:var(--p,0%);transition:width .8s var(--ease)}

/* consent + place order */
.co-foot{padding:1.1rem 1.35rem 1.35rem;display:flex;flex-direction:column;gap:.9rem}
.co-agree{display:flex;gap:.65rem;align-items:flex-start;font-size:.82rem;color:var(--ink-2);
  line-height:1.55;margin:0;padding:.8rem;border-radius:var(--r-sm);background:var(--paper-2);
  border:1px solid var(--line)}
.co-agree input{margin-top:.1rem;width:17px;height:17px;accent-color:var(--blue);flex:none}
.co-agree a{color:var(--blue);text-decoration:underline;text-underline-offset:.15em}
.co-place{width:100%;background:var(--blue);color:#fff;border:0;border-radius:var(--r-pill);
  padding:1rem 1.4rem;font-family:var(--font-h);font-size:1.05rem;font-weight:600;cursor:pointer;
  transition:background var(--dur-2) var(--ease)}
.co-place:hover{background:var(--blue-700);color:#fff}
.co-place:disabled{background:var(--line-strong);color:#fff;cursor:default}
.co-edit{display:block;text-align:center;color:var(--ink-2);font-family:var(--font-h);
  font-size:.86rem;font-weight:600;text-decoration:none}
.co-edit:hover{color:var(--blue)}
.sum-trust{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.75rem;
  color:var(--ink-faint);padding:0 1.35rem 1.35rem}
.sum-trust span{display:inline-flex;align-items:center;gap:.35rem}
.sum-trust svg{width:13px;height:13px;fill:var(--teal)}

/* errors */
.co-errors{display:none;background:var(--err-bg);border:1px solid var(--err-line);color:var(--err);
  border-radius:var(--r);padding:.9rem 1.15rem;margin-bottom:1.15rem}
.co-errors ul{margin:0;padding-left:1.15rem}

/* ---- mobile sticky pay bar ---- */
.ck-mbar{display:none;transition:transform var(--dur-3) var(--ease),opacity var(--dur-3) var(--ease)}
.ck-mbar.hide{transform:translateY(110%);opacity:0;pointer-events:none}
@media (max-width:900px){
  .ck-hero .wrap{grid-template-columns:1fr}
  .ck-steps .ln{width:24px;margin:0 .5rem}
  .ck-steps .st span{display:none}
  .ck-steps .st.cur span{display:inline}
  .ck-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--steel);
    color:#fff;padding:.75rem 1rem;gap:1rem;align-items:center;justify-content:space-between;
    box-shadow:0 -10px 30px rgba(11,26,58,.25)}
  .ck-mbar b{font-family:var(--font-m);font-size:1.15rem;font-variant-numeric:tabular-nums}
  .ck-mbar small{display:block;font-family:var(--font-h);font-size:.72rem;color:#9fb0cc}
  .ck-mbar a{background:var(--blue);color:#fff;text-decoration:none;font-family:var(--font-h);
    font-weight:600;border-radius:var(--r-pill);padding:.7rem 1.2rem;font-size:.94rem;white-space:nowrap}
  .ck-mbar a:hover{background:var(--blue-700);color:#fff}
  .ck-body{padding-bottom:110px}
  .floaty{bottom:84px!important}
}

/* ---- estimated shipping modal ---- */
.esm-back{position:fixed;inset:0;background:rgba(11,26,58,.62);z-index:220;
  display:none;align-items:center;justify-content:center;padding:1.25rem}
.esm-back.on{display:flex}
.esm{background:#fff;border-radius:var(--r-xl);max-width:560px;width:100%;
  padding:clamp(1.75rem,1.25rem + 2vw,2.4rem);text-align:center;box-shadow:var(--sh-3)}
.esm h2{margin:0 0 1.1rem;font-size:1.45rem}
.esm hr{border:0;border-top:1px solid var(--line);margin:0 0 1.1rem}
.esm p{color:var(--ink-2);line-height:1.65;margin:0 0 .9rem;font-size:.95rem}
.esm .ok{background:var(--blue);color:#fff;border:0;border-radius:var(--r-pill);padding:.8rem 2rem;
  font-family:var(--font-h);font-weight:600;cursor:pointer;font-size:1rem;margin-top:.5rem}
.esm .ok:hover{background:var(--blue-700)}

/* ============================================================================
   RESOURCE / GUIDE CARDS
   ========================================================================== */
.gcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.gcard:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--ink)}
.gcard .im{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.gcard .im img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
.gcard:hover .im img{transform:scale(1.05)}
.gcard .b{padding:1.4rem}
.gcard .b h3{font-size:1.12rem;margin-bottom:.4rem}
.gcard .b p{color:var(--ink-2);font-size:.94rem;line-height:1.55;margin:0 0 .9rem}
.gcard .go{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);
  font-family:var(--font-h);font-weight:600;font-size:.9rem}
.gcard .go .i{transition:transform var(--dur-2) var(--ease)}
.gcard:hover .go .i{transform:translateX(3px)}

/* ============================================================================
   ORDER RECEIVED
   ========================================================================== */
.orc{max-width:680px;margin-inline:auto}
.orc__badge{width:60px;height:60px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok);
  display:grid;place-items:center;margin-inline:auto;margin-bottom:1.25rem}
.orc__badge .i{font-size:1.8rem}
.orc h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);text-align:center;margin-bottom:.5rem}
.orc__lead{text-align:center;color:var(--ink-2);margin-bottom:1.5rem}
.orc__num{display:block;text-align:center;font-family:var(--font-m);font-weight:600;font-size:1.2rem;
  color:var(--blue);background:var(--blue-050);border-radius:var(--r-sm);padding:.7rem 1.25rem;
  margin-inline:auto;margin-bottom:2rem;max-width:max-content;letter-spacing:.02em}
.orc-details{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 1.5rem;background:#fff}
.orc-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 1.25rem;font-size:.93rem}
.orc-row + .orc-row{border-top:1px solid var(--line-2)}
.orc-row dt{color:var(--ink-faint);margin:0;flex:none;max-width:40%}
.orc-row dd{color:var(--ink);font-weight:600;margin:0;text-align:right;min-width:0;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.orc-row--total dd,.orc-row--line dd{white-space:nowrap}
.orc-row--line dt{flex:1;max-width:none}
/* phones: long answers (payment, shipping status) go under their label instead of beside it */
@media (max-width:560px){
  .orc-row:not(.orc-row--total):not(.orc-row--line){flex-direction:column;align-items:flex-start;gap:.2rem}
  .orc-row:not(.orc-row--total):not(.orc-row--line) dt{max-width:none}
  .orc-row:not(.orc-row--total):not(.orc-row--line) dd{text-align:left}
  .orc-row--ship dd{align-items:flex-start}
}
.orc-row--total{background:var(--paper-2);font-family:var(--font-h)}
.orc-row--total dt{color:var(--ink);font-weight:700}
.orc-row--total dd{color:var(--blue);font-family:var(--font-m);font-size:1.15rem}
.orc h2{font-size:1.05rem;margin:1.75rem 0 .75rem}
.orc__help{color:var(--ink-2);font-size:.92rem;text-align:center;line-height:1.6}
.orc__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}

/* ============================================================================
   AUTH
   ========================================================================== */
.authbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.75rem,1.25rem + 2vw,2.5rem);box-shadow:var(--sh-1)}
.authbox h1{font-size:1.5rem;margin-bottom:.35rem}
.authbox .sub{color:var(--ink-2);font-size:.95rem;margin:0 0 1.75rem}
.authform{display:flex;flex-direction:column;gap:.35rem}
.authform label{margin-top:.85rem}
.authform button{margin-top:1.5rem}
.ordiv{display:flex;align-items:center;gap:.9rem;margin:1.5rem 0;color:var(--ink-faint);font-size:.82rem}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
.authalt{text-align:center;margin:1.4rem 0 0;font-size:.92rem;color:var(--ink-2)}
.authalt a{font-weight:600}
.gbtn{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;height:46px;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-h);font-weight:600;font-size:.95rem;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2)}
.gbtn:hover{border-color:var(--blue-200);background:var(--paper-2)}
.gbtn-note{margin-top:.6rem;font-size:.8rem;color:var(--ink-faint);text-align:center;line-height:1.45}
.login-split{border-radius:var(--r-xl)!important;box-shadow:var(--sh-2)!important;border-color:var(--line)!important}
.login-benes{background:var(--steel)!important;position:relative;isolation:isolate}
.login-benes::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--steel)}
.login-benes li .bi{border-radius:var(--r-sm)!important;background:rgba(255,255,255,.1)!important;color:var(--teal-300)}
.login-benes li .bi .i{font-size:1.15rem}

/* ============================================================================
   ACCOUNT
   ========================================================================== */
.acct-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.75rem;align-items:start}
@media (max-width:900px){.acct-grid{grid-template-columns:1fr}}
.acct-tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:1.75rem}
.acct-tab{border:0;background:none;padding:.8rem 1.1rem;font-family:var(--font-h);font-weight:600;font-size:.92rem;
  color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:.5rem;transition:color var(--dur-2) var(--ease)}
.acct-tab span{background:var(--paper-3);color:var(--ink-faint);border-radius:var(--r-pill);
  font-family:var(--font-m);font-size:.7rem;padding:.1rem .45rem;font-weight:600}
.acct-tab:hover{color:var(--blue)}
.acct-tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.acct-tab.on span{background:var(--blue);color:#fff}
.acct-order{display:flex;align-items:center;gap:1rem;border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.25rem;background:#fff;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.acct-order:hover{border-color:var(--blue-200);box-shadow:var(--sh-1)}
.acct-order b{color:var(--ink);font-family:var(--font-m);font-weight:600}
.acct-order .d{display:block;color:var(--ink-faint);font-size:.78rem;font-family:var(--font-b)}
.acct-order .st{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  border-radius:var(--r-pill);padding:.2rem .6rem;background:var(--paper-3);color:var(--ink-2)}
.acct-order .st-processing{background:var(--blue-050);color:var(--blue)}
.acct-order .st-completed{background:var(--ok-bg);color:var(--ok)}
.acct-order .st-cancelled{background:var(--err-bg)!important;color:var(--err)!important}
.acct-empty{text-align:center;color:var(--ink-2);padding:2.5rem 1rem;line-height:1.7}

/* ============================================================================
   APPOINTMENT BOOKER
   ========================================================================== */
.apt{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;align-items:stretch;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
@media (max-width:900px){.apt{grid-template-columns:1fr}}
.apt-side{background:var(--paper-2);border-right:1px solid var(--line);padding:1.6rem 1.5rem}
@media (max-width:900px){.apt-side{border-right:0;border-bottom:1px solid var(--line)}}
.apt-card .apt-host{font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:1.05rem;
  display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem}
.apt-host .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--teal)}
.apt-meta{display:flex;gap:.6rem;align-items:center;color:var(--ink-2);font-size:.88rem;line-height:1.5;margin-bottom:.75rem}
.apt-meta .i{color:var(--ink-faint);font-size:1.05rem;flex:none}
.apt-tzsel{border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:.4rem .6rem;
  font-family:var(--font-b);font-size:.82rem;background:#fff;max-width:190px}
.apt-sumrow b{font-family:var(--font-m);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
.apt-sumrow span{color:var(--ink);font-weight:600;font-size:.92rem}
.apt-main{padding:1.75rem}
.apt-h{font-family:var(--font-h);font-weight:700;font-size:1.2rem;color:var(--ink);margin:0 0 1.4rem}
.apt-back{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:.87rem;margin-bottom:.9rem;
  display:inline-flex;align-items:center;gap:.35rem}
.apt-back:hover{color:var(--blue)}
.apt-svc{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r);padding:1.1rem 1.35rem;cursor:pointer;
  font-family:var(--font-h);font-weight:600;font-size:.98rem;color:var(--ink);text-align:left;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.apt-svc:hover{border-color:var(--blue);box-shadow:var(--sh-1);transform:translateY(-2px)}
.apt-dur{font-family:var(--font-m);font-size:.78rem;font-weight:500;color:var(--ink-faint)}
.apt-day{aspect-ratio:1;border:1px solid transparent;background:var(--paper-2);border-radius:var(--r-sm);
  cursor:pointer;font-family:var(--font-m);font-size:.88rem;color:var(--ink);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.apt-day.has{background:var(--blue-050);color:var(--blue);font-weight:600}
.apt-day.has:hover{background:var(--blue);color:#fff}
.apt-day.off{background:transparent;color:var(--ink-faint);cursor:not-allowed;opacity:.4}
.apt-day.sel{background:var(--blue);color:#fff;box-shadow:0 0 0 3px var(--blue-100)}
.apt-cal-dow span{font-family:var(--font-m);font-size:.68rem;font-weight:500;color:var(--ink-faint);text-transform:uppercase}
.apt-cal-head span{font-family:var(--font-h);font-weight:700;color:var(--ink)}
.apt-cal-head button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  cursor:pointer;color:var(--ink-2);display:grid;place-items:center}
.apt-cal-head button:hover{border-color:var(--blue);color:var(--blue)}
.apt-time{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:.75rem;cursor:pointer;
  font-family:var(--font-m);font-weight:600;font-size:.9rem;color:var(--blue);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.apt-time:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.apt-done-badge{width:60px;height:60px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok);
  display:grid;place-items:center;margin-inline:auto;margin-bottom:1rem}
.apt-done-badge .i{font-size:1.8rem}
.apt-done h3{font-size:1.4rem;margin-bottom:.5rem}
.apt-done-ref{font-family:var(--font-m);font-weight:600;font-size:1.1rem;color:var(--blue);
  background:var(--blue-050);border-radius:var(--r-sm);padding:.55rem 1.1rem;display:inline-block;margin:.5rem 0 1.25rem}

/* ============================================================================
   DRIVESHAFT BUILDER — bring the tool onto the design system.
   The widget declares its own tokens on .ubs-dsb-wrap; redefine them here.
   ========================================================================== */
.ubs-dsb-wrap{
  --dsb-primary:var(--blue); --dsb-primary-h:var(--blue-600); --dsb-primary-d:var(--blue-700);
  --dsb-primary-50:var(--blue-050); --dsb-primary-100:var(--blue-100);
  --dsb-red:var(--err); --dsb-red-d:#8f2020; --dsb-red-50:var(--err-bg);
  --dsb-ink:var(--ink); --dsb-ink-2:var(--ink-2); --dsb-muted:var(--ink-faint);
  --dsb-border:var(--line); --dsb-border-2:var(--line-strong);
  --dsb-bg:var(--paper-2); --dsb-bg-2:var(--paper-3);
  --dsb-success:var(--ok);
  --dsb-r-sm:var(--r-sm); --dsb-r:var(--r-lg);
  --dsb-shadow-sm:var(--sh-1); --dsb-shadow:var(--sh-2); --dsb-shadow-lg:var(--sh-3);
  --dsb-tr:var(--dur-2) var(--ease);
  font-family:var(--font-b)!important;
  max-width:var(--wrap);
}
/* headings + controls keep the display face; body text does not */
.ubs-dsb-wrap :is(h1,h2,h3,h4,.dsb-step-title,.dsb-hero-title,.dsb-btn,.dsb-crumb,.dsb-card-title,
  .dsb-hero-price-value,label,legend){font-family:var(--font-h)}
.ubs-dsb-wrap :is(.dsb-hero-price-value,.dsb-price,.dsb-total,.dsb-qty input,input[type=number]){font-family:var(--font-m);font-variant-numeric:tabular-nums}
/* hero: flat brand band, not a gradient */
.dsb-hero{background:var(--steel)!important;position:relative;isolation:isolate}
.dsb-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--steel)}
.dsb-hero-logo{border-radius:var(--r)!important;background:rgba(255,255,255,.1)!important}
.dsb-hero-title{font-weight:700!important;letter-spacing:-.02em}
.dsb-hero-price-value{font-weight:700!important}
/* step chips */
.dsb-crumb{border-radius:var(--r-sm)!important;font-family:var(--font-h);font-weight:500!important;font-size:.78rem!important}
.dsb-crumb-num{font-family:var(--font-m);font-weight:600!important;border-radius:var(--r-pill)}
.dsb-crumb-value{font-style:normal!important;font-family:var(--font-m)}
/* buttons follow the site pill system */
.dsb-btn{border-radius:var(--r-pill)!important;font-weight:600!important;padding:.72rem 1.35rem!important;
  transition:transform var(--dur-1) var(--ease),background var(--dur-2) var(--ease),border-color var(--dur-2)}
.dsb-btn--lg{padding:.95rem 1.6rem!important}
.dsb-btn--primary:hover{transform:translateY(-2px)}
.dsb-btn--primary:active{transform:translateY(0) scale(.985)}
.dsb-btn--secondary{border-color:var(--line-strong)!important}
.dsb-btn--secondary:hover{border-color:var(--blue)!important;color:var(--blue)!important;background:#fff!important}
/* option cards */
.dsb-card{border-radius:var(--r)!important;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.dsb-card:hover{transform:translateY(-2px)}
.dsb-card-visual{border-radius:var(--r-sm)!important}
/* inputs */
.ubs-dsb-wrap :is(input,select,textarea){border-radius:var(--r-sm)!important;border:1.5px solid var(--line-strong)!important;
  font-family:var(--font-b)}
.ubs-dsb-wrap :is(input,select,textarea):focus{outline:none;border-color:var(--blue)!important;box-shadow:var(--sh-focus)!important}
@media (prefers-reduced-motion:reduce){.dsb-step--active{animation:none!important}}

.uhero__art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* "inside the shop": capability list instead of photography */
.ushop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,1rem + 3vw,4rem);align-items:center}
@media (max-width:820px){.ushop{grid-template-columns:1fr;gap:2rem}}
.ushop__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ushop__list li{display:flex;gap:1rem;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem}
.ushop__list .i{font-size:1.4rem;color:var(--blue);flex:none;margin-top:.1rem}
.ushop__list b{display:block;font-family:var(--font-h);font-weight:600;font-size:.98rem;color:var(--ink)}
.ushop__list span{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.55;margin-top:.2rem}


/* portrait feature media */
.ufeature__media--tall{aspect-ratio:4/5}
@media (max-width:820px){.ufeature__media--tall{aspect-ratio:4/3}}

/* ============================================================================
   SHOP · overlays, popovers and the mobile card view of the parts table
   (migrated out of shop/partials/style.blade.php so the cascade is predictable)
   ========================================================================== */

/* row buttons: primary action is solid blue with a white glyph */
.p-add{display:inline-flex;gap:.6rem}
.p-add button{width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.p-add button:active{transform:scale(.94)}
.p-add button .i{font-size:1.15rem}
.p-plus{background:var(--blue);border:1.5px solid var(--blue);color:#fff}
.p-plus:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff}

/* stock + image popovers */
.stock-pop{position:fixed;z-index:120;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-3);border-radius:var(--r);padding:.8rem 1.1rem;pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity var(--dur-2),transform var(--dur-2);
  font-size:.85rem;min-width:140px;text-align:center}
.stock-pop.on{opacity:1;transform:none}
.stock-pop .dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-pill);margin-right:.45rem}
.stock-pop .in{color:var(--ok)}   .stock-pop .in .dot{background:var(--ok)}
.stock-pop .bo{color:var(--warn)} .stock-pop .bo .dot{background:var(--warn)}
.stock-pop .out{color:var(--err)} .stock-pop .out .dot{background:var(--err)}
.stock-pop b{font-family:var(--font-m);font-size:1.1rem;display:block;margin-top:.15rem}
.img-pop{position:fixed;z-index:120;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-3);border-radius:var(--r-lg);padding:.5rem;pointer-events:none;opacity:0;
  transition:opacity var(--dur-2)}
.img-pop.on{opacity:1}
.img-pop img{display:block;width:260px;height:260px;object-fit:contain}

/* alternate-SKU popover */
.alt-pop{position:absolute;z-index:130;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-3);border-radius:var(--r);padding:.4rem;min-width:440px;max-width:560px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.alt-pop.on{opacity:1;pointer-events:auto}
.alt-pop .ap-h,.alt-pop .ap-row{display:grid;grid-template-columns:32px 1.1fr 1.5fr .9fr .8fr;
  gap:.5rem;align-items:center}
.alt-pop .ap-h{padding:.45rem .7rem;font-family:var(--font-m);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);border-bottom:1px solid var(--line)}
.alt-pop .ap-h .r{text-align:right}
.alt-pop .ap-row{padding:.55rem .7rem;border-bottom:1px solid var(--line-2);text-align:left}
.alt-pop .ap-row:last-child{border-bottom:0}
.alt-pop .ap-row.cur{background:var(--blue-050)}
.alt-pop .ap-add{width:26px;height:26px;border:0;border-radius:var(--r-xs);background:var(--blue);
  color:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;line-height:1}
.alt-pop .ap-add:hover{background:var(--blue-700)}
.alt-pop .ap-pn{color:var(--blue);font-family:var(--font-m);font-weight:600;font-size:.82rem;white-space:nowrap}
.alt-pop .ap-note{font-size:.8rem;color:var(--ink-2)}
.alt-pop .ap-type{font-size:.77rem;color:var(--ink-faint);white-space:nowrap}
.alt-pop .ap-type.cur{color:var(--blue);font-weight:600}
.alt-pop .ap-cur-tag{display:inline-block;margin-left:.35rem;font-family:var(--font-m);font-size:.62rem;
  background:var(--blue);color:#fff;border-radius:var(--r-pill);padding:.05rem .45rem;vertical-align:middle}
.alt-pop .ap-price{text-align:right;font-family:var(--font-m);font-weight:600;font-size:.85rem;
  font-variant-numeric:tabular-nums}
.alt-pop .ap-price.ap-lo{color:var(--ok)}
.alt-pop .ap-price.ap-hi{color:var(--err)}
.alt-pop .ap-was{display:block;text-decoration:line-through;color:var(--ink-faint);font-size:.72rem;font-weight:400}
@media (max-width:560px){
  .alt-pop{min-width:300px}
  .alt-pop .ap-h,.alt-pop .ap-row{grid-template-columns:28px 1fr .7fr;gap:.35rem}
  .alt-pop .ap-note,.alt-pop .ap-h span:nth-child(3){display:none}
}

/* ---------------------------------------------------------------------------
   PARTS CARD (phones, and .ptfit.is-cards when even the densest table is too
   wide): photo beside part number + price, the specs two to a row (label over
   value), Add to cart full width at the bottom. Keyed on data-col, which stays
   the same in every language (data-label is translated).
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  .ptbl-wrap{border:0;box-shadow:none;overflow:visible;background:none;border-radius:0}
  .ptbl{min-width:0;width:100%;display:block}
  .ptbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .ptbl tbody{display:block;width:100%;min-width:0}
  .shop-search{max-width:none}
  .shop-controls{gap:.5rem}
  .sortsel{flex:1;min-width:0;max-width:none}
}
@media (max-width:760px){
  .ptbl tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .9rem;min-width:0;
    margin-bottom:.6rem;padding:.75rem .85rem .85rem;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
  .ptbl tbody tr:hover{background:#fff}
  .ptbl tbody td{grid-column:auto;display:block;min-width:0;max-width:none;width:auto;padding:.4rem 0 0;
    border:0!important;text-align:left;white-space:normal!important;overflow-wrap:anywhere;font-size:.86rem;line-height:1.35}
  .ptbl tbody td::before{content:attr(data-label);display:block;margin-bottom:.05rem;font:500 .63rem/1.4 var(--font-m);
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
  .ptbl tbody td > *{min-width:0;max-width:100%}
  .ptbl tbody td.l,.ptbl tbody td.l .p-notes{text-align:left;max-width:none}
}

/* ---------------------------------------------------------------------------
   TABLE FIT: the whole parts table on screen, never a sideways scroll
   (category, search results, alternatives on the product page).
   A .ptfit box in a .shop-bleed leaves the page rail and grows with its table
   up to the viewport; column titles wrap. shop/partials/table-fit.blade.php
   then steps .is-d1 … .is-d5 (each one denser) until nothing overflows, and
   falls back to .is-cards when even the densest table is too wide.
   --------------------------------------------------------------------------- */
.shop-bleed{padding-inline:var(--gutter)}
@media (max-width:760px){.wrap .shop-bleed{padding-inline:0}}   /* inside the rail the rail's own gutter is enough */
@media (min-width:761px){
  /* inside the rail the bleed reaches out to the page edges instead: the viewport minus the sidebar
     (100vw counts the scrollbar: the gutter absorbs it) */
  .wrap .shop-bleed{margin-inline:calc(50% - (100vw - var(--sb-w)) / 2 + var(--gutter));padding-inline:0}
  .ptfit,.ptfit-set{width:max-content;min-width:min(100%,calc(var(--wrap) - 2*var(--gutter)));max-width:min(100%,1600px);margin-inline:auto}
  /* tables stacked on one page (search results) share one width: the set takes its widest table's, never its text's */
  .ptfit-set .ptfit{width:auto;min-width:0;max-width:none}
  .ptfit-set .xref-cap{width:0;min-width:100%}
  .ptfit .ptbl{--px:.9rem;--pic:88px}
  .ptfit .ptbl thead th{white-space:normal;line-height:1.3;vertical-align:bottom;padding-inline:var(--px)}
  .ptfit .ptbl thead th:nth-child(-n+4){white-space:nowrap}
  .ptfit .ptbl td{padding-inline:var(--px)}
  .ptfit .ptbl td.l{min-width:0}
  .ptfit .ptbl .p-notes{min-width:11ch}
  .ptfit .p-pic,.ptfit .p-pic-ph{width:var(--pic);height:var(--pic);min-width:var(--pic)}
  .ptfit .p-price{flex-wrap:wrap;gap:.1rem .4rem}
  /* the few very long part numbers wrap instead of setting the column width for everyone */
  .ptfit .p-pn--long{min-width:20ch;white-space:normal;overflow-wrap:anywhere}

  .ptfit:is(.is-d1,.is-d2,.is-d3,.is-d4,.is-d5) .ptbl{--px:.6rem;--pic:72px}
  .ptfit:is(.is-d2,.is-d3,.is-d4,.is-d5) .ptbl{--px:.45rem;--pic:60px}
  .ptfit:is(.is-d2,.is-d3,.is-d4,.is-d5) .p-add button{width:40px;height:40px}
  .ptfit:is(.is-d2,.is-d3,.is-d4,.is-d5) .p-add .p-plus{padding:0}
  .ptfit:is(.is-d2,.is-d3,.is-d4,.is-d5) .p-add .p-plus .p-plus__t{display:none}
  .ptfit:is(.is-d2,.is-d3,.is-d4,.is-d5) .p-add .p-call{width:auto;height:auto;min-height:40px;max-width:6.2rem;
    padding:.3rem .55rem;white-space:normal;text-align:center}
  .ptfit:is(.is-d3,.is-d4,.is-d5) .ptbl td{white-space:normal}
  .ptfit:is(.is-d3,.is-d4) .p-pn:not(.p-pn--long){white-space:nowrap}
  .ptfit:is(.is-d3,.is-d4,.is-d5) .th-arrow:not(.on){display:none}
  .ptfit:is(.is-d4,.is-d5) .ptbl{--px:.3rem;--pic:52px;font-size:.82rem}
  .ptfit:is(.is-d4,.is-d5) .ptbl thead th{font-size:.65rem;letter-spacing:.03em}
  .ptfit.is-d5 .p-pn{min-width:10ch;overflow-wrap:anywhere}

  /* the parts card (PARTS CARD above), several to a row (keep the two in step) */
  .ptfit.is-cards{width:auto}
  .ptfit.is-cards .ptbl-wrap{border:0;box-shadow:none;overflow:visible;background:none;border-radius:0}
  .ptfit.is-cards .ptbl{display:block}
  .ptfit.is-cards .ptbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .ptfit.is-cards .ptbl tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.75rem}
  .ptfit.is-cards .ptbl tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .9rem;align-content:start;min-width:0;
    padding:.75rem .85rem .85rem;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
  .ptfit.is-cards .ptbl tbody td{grid-column:auto;display:block;min-width:0;padding:.4rem 0 0;border:0;text-align:left;
    white-space:normal;overflow-wrap:anywhere;font-size:.86rem;line-height:1.35}
  .ptfit.is-cards .ptbl tbody td::before{content:attr(data-label);display:block;margin-bottom:.05rem;font:500 .63rem/1.4 var(--font-m);
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
  .ptfit.is-cards .ptbl tbody td.l .p-notes{text-align:left;max-width:none}
}

/* ============================================================================
   PROOF BAND — real catalogue numbers + the series a buyer scans for.
   Step 2 of trust-authority-conversion (proof), sits directly under the hero.
   ========================================================================== */
.uproof{background:var(--paper-2);border-bottom:1px solid var(--line)}
.uproof .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem);
  align-items:center;padding-block:clamp(2rem,1.5rem + 2vw,3rem)}
@media (max-width:900px){.uproof .wrap{grid-template-columns:1fr;gap:1.75rem}}
.uproof__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media (max-width:560px){.uproof__stats{grid-template-columns:1fr 1fr;gap:1.25rem 1rem}}
.uproof__stats div{display:flex;flex-direction:column;gap:.25rem}
.uproof__stats b{font-family:var(--font-m);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);
  color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.uproof__stats span{font-size:.82rem;color:var(--ink-2);line-height:1.4}
.uproof__series{border-left:1px solid var(--line);padding-left:clamp(1.5rem,1rem + 2vw,2.5rem)}
@media (max-width:900px){.uproof__series{border-left:0;border-top:1px solid var(--line);
  padding-left:0;padding-top:1.5rem}}
.uproof__series > p{margin:0 0 .75rem;font-family:var(--font-m);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.uproof__series ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.uproof__series li{font-family:var(--font-m);font-size:.82rem;font-weight:500;color:var(--blue-ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);padding:.3rem .6rem}
.uproof__series li.is-more{background:none;border-style:dashed;color:var(--ink-faint)}

/* quick-order delete button: glyph drawn in CSS because the row is built in JS */
.qo-del{position:relative}
.qo-del::before{content:"";position:absolute;inset:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/></svg>") center/16px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/></svg>") center/16px no-repeat}

/* stock line separator, replaces a stray comma */
.pdp__stock span:not(:empty)::before{content:"\00b7";margin-inline:.5rem;opacity:.5}

/* ---------------------------------------------------------------------------
   Radius normalisation: legacy modules still carried 2/4/6/14/18/20/24px and
   50%. Snap everything that is still off-scale onto the documented ladder.
   --------------------------------------------------------------------------- */
:is(.dsb-crumb,.dsb-card,.dsb-btn,.qv,.qv-img,.qv-specs,.alt-pop,.stock-pop,.img-pop,
   .cat-card,.cat-more-item,.ct-wrap,.pd-panel,.pd-gal .pd-main,.info-card,.form,
   .authbox,.sbcard,.gdiag,.vbanner,.help-band,.fitform-wrap,.dtable-wrap,.qo,
   .totbox,.co-sec,.acct-order,.rma-tab,.wish-card,.vcard,.svc,.why-card,.tcard,
   .uhubcard,.uguide,.upath,.ufac,.gcard){border-radius:var(--r-lg)}
:is(.dsb-crumb,.dsb-btn,.rma-tab){border-radius:var(--r-sm)}
:is(.p-pic,.p-pic-ph,.qo-del,.si-img,.us-cimg,.cartline__media,.pdp__thumbs button,
   .uspecs li,.speclist li,.benefits li,.defitem,.mrow,.otype,.uprod__flag,
   .pdp__chip,.ualt,.acct-tab span,.dsb-card-visual){border-radius:var(--r-sm)}
/* the few true circles: count badges, round icon buttons, numbered steps */
:is(.uprod__wish,.fbtn,.social-row a,.help-row .ic,
   .apt-host .dot,.orc__badge,.apt-done-badge,.qv-x,
   .measitem .mlabel .badge,.defitem .badge,.qsection .qnum,.co-sec h3 .n){border-radius:var(--r-round)}

/* ---------------------------------------------------------------------------
   Touch targets: dense catalogue controls still need a 44px hit area even when
   the visible glyph is smaller. Padding grows the target, not the ink.
   --------------------------------------------------------------------------- */
.p-pn{padding-block:.7rem}
.th-sort{padding-block:.55rem}
.uprod__name{display:-webkit-box;padding-block:.15rem;min-height:2.6em}
.s-link,.textlink,.gcard .go,.svc .go,.upath__go{min-height:44px;display:inline-flex;align-items:center}
.qr input[type=checkbox],.qr input[type=radio],.consent input,.ship-opt input{width:20px;height:20px}
/* the label is the real target for a checkbox */
.qr,.consent{min-height:44px}
.help-row{min-height:44px}

/* remaining dense-control hit areas */
.qo-del{min-height:44px}
.apt-cal-head button{width:44px;height:44px}
.uqty button{min-width:44px}


/* ============================================================================
   MOTION — every animation below has a job. Nothing loops.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* hero: establishes reading order on first paint */
  .js .uhero__content > *{animation:uRise .7s var(--ease) both}
  .js .uhero__content > *:nth-child(1){animation-delay:.05s}
  .js .uhero__content > *:nth-child(2){animation-delay:.13s}
  .js .uhero__content > *:nth-child(3){animation-delay:.21s}
  .js .uhero__content > *:nth-child(4){animation-delay:.29s}
  @keyframes uRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ============================================================================
   PRODUCT · sticky buy bar (appears when the buy box leaves the viewport)
   ========================================================================== */
.pdp__sticky{position:fixed;left:var(--sb-w);right:0;bottom:0;z-index:90;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px -12px rgba(11,26,51,.35);
  transform:translateY(110%);visibility:hidden;
  transition:transform var(--dur-3) var(--ease),visibility var(--dur-3)}
.pdp__sticky.is-on{transform:none;visibility:visible}
.pdp__sticky-in{max-width:var(--wrap);margin-inline:auto;padding:.7rem var(--gutter);
  display:flex;align-items:center;gap:1rem}
.pdp__sticky-media{width:48px;height:48px;flex:none;border-radius:var(--r-sm);background:var(--paper-2);
  display:grid;place-items:center;overflow:hidden;color:var(--ink-faint)}
.pdp__sticky-media img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pdp__sticky-id{display:flex;flex-direction:column;min-width:0;flex:1}
.pdp__sticky-id b{font-family:var(--font-m);font-weight:600;font-size:.92rem;color:var(--ink)}
.pdp__sticky-id span{font-size:.8rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdp__sticky-price{font-family:var(--font-m);font-weight:600;font-size:1.15rem;
  font-variant-numeric:tabular-nums;flex:none}
.pdp__sticky .btn{flex:none;min-height:48px}
/* confirmation line, then View cart + Checkout side by side at the same size */
.pdp__added{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.75rem;padding:.75rem;
  border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--r-sm);background:var(--paper)}
.pdp__added[hidden]{display:none}
.pdp__added-t{grid-column:1/-1;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--ink)}
.pdp__added .btn{min-height:44px;padding:.6rem .9rem;white-space:normal;line-height:1.2}   /* "Finaliser la commande" on a 320 px phone */
.pdp__added-t .i{color:var(--ok)}
@media (max-width:640px){
  /* price + Add to cart (+ Checkout once added) fill a phone's width; the part number is on the page above */
  .pdp__sticky-media,.pdp__sticky-id{display:none}
  .pdp__sticky-in{gap:.75rem;padding-inline:1rem}
  .pdp__sticky .btn{flex:1;justify-content:center}
}
/* the floating contact buttons must step aside for it */
.pdp__sticky.is-on ~ .floaty,body:has(.pdp__sticky.is-on) .floaty{bottom:calc(64px + 1rem)}

/* ============================================================================
   GROUP TILES — photographic entry points to the four catalogue groups.
   Big, image-led, one clear label. The dense category grid sits underneath.
   ========================================================================== */
.ugroups{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1000px){.ugroups{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ugroups{grid-template-columns:1fr}}
.ugroup{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  background:var(--steel);
  min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.4rem;color:#fff;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.ugroup:hover{transform:translateY(-4px);box-shadow:var(--sh-3);color:#fff}
.ugroup img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s var(--ease)}
.ugroup:hover img{transform:scale(1.06)}
.ugroup::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,16,30,.64);
  transition:background var(--dur-2) var(--ease)}
.ugroup:hover::after{background:rgba(8,16,30,.52)}
.ugroup__n{font-family:var(--font-m);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92);margin-bottom:.4rem;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ugroup b{font-family:var(--font-h);font-weight:700;font-size:1.2rem;line-height:1.22;letter-spacing:-.015em;
  min-height:2.44em;display:flex;align-items:flex-end;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.ugroup__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-family:var(--font-h);font-weight:600;font-size:.9rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ugroup__go .i{transition:transform var(--dur-2) var(--ease)}
.ugroup:hover .ugroup__go .i{transform:translateX(4px)}

/* compact chip row of the categories people actually search for */
.upop{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.upop a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink-2);
  font-family:var(--font-h);font-weight:500;font-size:.9rem;
  transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.upop a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}
.upop a span{font-family:var(--font-m);font-size:.76rem;color:var(--ink-faint)}
.upop a:hover span{color:var(--blue)}

/* remaining dense-control hit areas */
.qo-del{min-width:44px}

/* ============================================================================
   BUILDER BAND — full-bleed photo, flat wash, one white CTA.
   Replaces the rounded card with the off-system green button.
   ========================================================================== */
.ubuilder{position:relative;isolation:isolate;background:var(--steel);color:#d3dcec;overflow:hidden}
.ubuilder__media{position:absolute;inset:0;z-index:-2}
.ubuilder__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ubuilder__media::after{content:"";position:absolute;inset:0;background:rgba(8,16,30,.74)}
.ubuilder__content{position:relative;padding-block:clamp(3rem,2rem + 4vw,5rem)}
.ubuilder__content > *{max-width:44rem}
.ubuilder__tag{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  font-family:var(--font-m);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#a7e3d6}
.ubuilder h2{color:#fff;font-size:clamp(1.7rem,1.3rem + 1.8vw,2.6rem);letter-spacing:-.025em;line-height:1.08}
.ubuilder p{margin:1rem 0 1.9rem;font-size:var(--fs-lead);line-height:1.55;color:#d3dcec;max-width:42ch}
/* white CTA is the highest contrast available on this ground */
.ubuilder__cta{--btn-bg:#fff;--btn-fg:var(--blue-ink);box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.ubuilder__cta:hover{--btn-bg:var(--paper-2);--btn-fg:var(--blue-ink)}
.ubuilder__specs{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin:2rem 0 0;padding:1.5rem 0 0;
  border-top:1px solid rgba(255,255,255,.16)}
.ubuilder__specs li{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-h);
  font-weight:500;font-size:.92rem;color:#e6ecf6}
.ubuilder__specs .i{color:#a7e3d6;font-size:1.15rem}
@media (max-width:640px){
  .ubuilder__media::after{background:rgba(8,16,30,.78)}
  .ubuilder__cta{width:100%;justify-content:center}
  .ubuilder__specs{flex-direction:column;gap:.75rem}
}

/* ============================================================================
   ONLINE BUILDER — page framing around the configurator widget
   ========================================================================== */
.bldhead{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:0 1.75rem}
.bldhead h1{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);margin-bottom:.6rem}
.bldhead p{color:var(--ink-2);font-size:var(--fs-lead);max-width:62ch;margin:0}
.bldhead__switch{display:inline-flex;margin-top:1.4rem;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:.25rem}
.bldhead__switch a{min-height:44px;display:inline-flex;align-items:center;padding:0 1.35rem;
  border-radius:var(--r-pill);font-family:var(--font-h);font-weight:600;font-size:.92rem;color:var(--ink-2);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.bldhead__switch a:hover{color:var(--blue)}
.bldhead__switch a.is-on{background:var(--blue);color:#fff}
.bldwrap{padding-block:clamp(1.75rem,1rem + 2.5vw,3rem)}
.bldwrap .wrap{max-width:var(--wrap)}

/* widget: wider, flatter, on-system */
.ubs-dsb-wrap{max-width:100%!important;box-shadow:var(--sh-2)!important;border-radius:var(--r-lg)!important}
.dsb-hero{padding:1.5rem 1.75rem!important}
.dsb-hero-title{font-size:1.25rem!important}
.dsb-hero-sub{font-size:.92rem!important;color:#c3d0e6!important}
.dsb-hero-price-label{font-family:var(--font-m);font-size:.7rem!important;letter-spacing:.08em;
  text-transform:uppercase;color:#9fb2d0!important}
#ubs-dsb .dsb-sheet-price .dsb-hero-price-label{color:var(--ink-3)!important}   /* the price sheet is white: #9fb2d0 was 2.1:1 */
.dsb-hero-price-value{font-family:var(--font-m)!important;font-size:1.6rem!important;letter-spacing:-.02em}
.ubs-dsb-wrap .dsb-hero-logo{width:74px;height:74px}
/* step chips: quieter when empty, loud when done */
.dsb-crumbs{padding:1rem 1.25rem!important;gap:.5rem!important;background:var(--paper-2)!important}
.dsb-crumb{padding:.6rem .8rem!important}
.dsb-crumb-value{color:var(--ink-faint)!important;font-size:.72rem!important;font-style:normal!important}
.dsb-crumb.completed .dsb-crumb-value{color:var(--blue)!important;font-weight:600}
/* active chip is solid blue: its label and value must both go white */
.dsb-crumb.active .dsb-crumb-label,
.dsb-crumb.active .dsb-crumb-value{color:#fff!important}
.dsb-crumb.active .dsb-crumb-num{background:#fff!important;color:var(--blue)!important}
.dsb-stage{padding:1.75rem!important}
.dsb-step-title{font-size:1.15rem!important;letter-spacing:-.015em}
/* the disabled add-to-cart was near-invisible */
.ubs-dsb-wrap .dsb-btn[disabled],.ubs-dsb-wrap button[disabled]{opacity:1!important;
  background:var(--paper-3)!important;color:var(--ink-faint)!important;border-color:var(--line)!important;
  cursor:not-allowed}
.ubs-dsb-wrap .dsb-btn[disabled] *{color:inherit!important}

/* help row under the builder */
.bldhelp{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
@media (max-width:820px){.bldhelp{grid-template-columns:1fr}}
.bldhelp > div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem}
.bldhelp b{display:block;font-family:var(--font-h);font-weight:600;font-size:1rem;color:var(--ink);margin-bottom:.4rem}
.bldhelp p{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:0 0 .9rem}

/* ============================================================================
   THE RAIL  —  last block in the sheet, so it wins.

   Every heading and every block of section copy starts on the same vertical
   line: the inside edge of .wrap. Before this, the site had two section-header
   components (.s-head left, .secthead centred) plus a handful of bands that
   centred their own text, so the heading rail measured 140 / 164 / 382 / 398 /
   410px from one section to the next on the same page. One rail now.

   The legacy sheet (uds.css) still declares text-align:center and its own
   gradients on some of these selectors. It loads first, so equal-specificity
   rules here override it — but only where they are actually declared, which is
   why the resets below are explicit rather than omitted.
   ========================================================================== */

/* ---- one heading rail ---- */
.section .head,
.secthead,
.ctaband,
.premade-band,
.counterband,
.help-band,
.uendcta .wrap,
.fitform-wrap > h2,
.fitform-wrap > .sub{text-align:left}

.secthead{margin:0 0 clamp(2rem,1rem + 3vw,3.25rem)}
.section .head{margin:0 0 clamp(2rem,1rem + 3vw,3.25rem)}
.secthead p,.section .head p{max-width:58ch}
.ctaband p,.premade-band p,.uendcta p,.fitform-wrap > .sub{margin-inline:0}
.stats{text-align:left}
.counterband{justify-content:flex-start}
/* the legacy sheet centres these button rows; the copy above them is left-aligned */
.ctaband .cta,.premade-band .cta,.uendcta__cta{justify-content:flex-start}
.premade-band .btn{margin:.3rem .6rem .3rem 0}

/* ---- flat surfaces: no legacy gradient survives ---- */
.ctaband,.premade-band,.counterband,.insta,.vbanner,.builder{background:var(--steel)}
.ctaband::after,.vcard::after,.hero::after,.phero::before{display:none}
.counterband{background:var(--paper-2)}
.vcard.a{background:var(--blue-ink)}
.vcard.b{background:var(--steel)}
.svc .ic,.iblock .ic{background:var(--blue-050)}
.freebar .fb-fill{background:var(--teal)}
.help-band{background:var(--paper-2)}

/* the legacy sheet paints .counterband dark with color:#fff. It is a light card
   now, so the inherited white has to be overridden or every word disappears. */
.counterband{color:var(--ink)}
.counterband .cnum{color:var(--blue)}
.counterband .clab{color:var(--ink-2)}
.help-band{color:var(--ink)}

/* freight explainer trigger — replaces the modal that used to open by itself */
.ship-why{background:none;border:0;padding:0;font:inherit;color:var(--blue);font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
.ship-why:hover{color:var(--blue-700)}

/* <video> fallback copy: only ever painted when the browser cannot play the
   file, but it still has to be legible against the player's black background */
.vfallback{color:#e6ecf7;background:#0a1424;padding:1rem;margin:0;font-size:.95rem}
.vfallback a{color:var(--teal-300);text-decoration:underline;text-underline-offset:.15em}

/* ============================================================================
   BUILD CONFIGURATION  —  the driveshaft-builder spec, shown wherever a
   configured line appears: cart, checkout, order confirmation, invoice, admin.
   ========================================================================== */
.bcfg{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);margin-top:.65rem}
/* cart: the configuration opens in a dialog (owner, 2026-11) */
.bcfg-open{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;padding:.45rem .7rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:600 .85rem var(--font-b);cursor:pointer}
.bcfg-open:hover{border-color:var(--blue);color:var(--blue)}
.bcfg-open .i{color:var(--blue)}
.bcfg-open span{font:600 .72rem var(--font-m);color:var(--ink-3)}
.bcfg-dlg{width:min(560px,calc(100vw - 32px));max-height:min(80vh,720px);padding:0;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 60px -20px rgba(11,26,51,.45);color:var(--ink)}
.bcfg-dlg::backdrop{background:rgba(11,26,51,.45)}
.bcfg-dlg__head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;background:#fff;border-bottom:1px solid var(--line)}
.bcfg-dlg__head h2{margin:0;font-size:1.05rem}
.bcfg-dlg__x{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink-2);cursor:pointer}
.bcfg-dlg .bcfg__list{padding:.3rem 1.1rem 1rem;border:0}
.bcfg-dlg .bcfg__row dd{font-family:var(--font-b)}
@media (max-width:560px){
  .bcfg-dlg{width:100vw;max-width:100vw;margin:auto 0 0;max-height:85vh;border-radius:var(--r) var(--r) 0 0}
  .bcfg-dlg .bcfg__row{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}
}
.bcfg > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;
  padding:.55rem .75rem;font-family:var(--font-h);font-weight:600;font-size:.82rem;color:var(--ink)}
.bcfg > summary::-webkit-details-marker{display:none}
.bcfg > summary .i{color:var(--blue);font-size:1rem}
.bcfg > summary span{margin-left:auto;font-family:var(--font-m);font-size:.72rem;font-weight:600;
  color:var(--ink-faint);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.05rem .45rem}
.bcfg > summary::after{content:"+";margin-left:.5rem;font-size:1.1rem;font-weight:400;color:var(--ink-faint);
  transition:transform var(--dur-2) var(--ease)}
.bcfg[open] > summary::after{transform:rotate(45deg)}
.bcfg__list{margin:0;padding:.2rem .75rem .7rem;border-top:1px solid var(--line)}
.bcfg__row{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.5rem 1rem;padding:.32rem 0}
.bcfg__row + .bcfg__row{border-top:1px solid var(--line-2)}
.bcfg__row dt{margin:0;color:var(--ink-faint);font-size:.8rem}
.bcfg__row dd{margin:0;color:var(--ink);font-size:.84rem;font-family:var(--font-m);
  font-variant-numeric:tabular-nums;word-break:break-word}
.bcfg--compact .bcfg__row{grid-template-columns:1fr;gap:0;padding:.3rem 0}
.bcfg--compact .bcfg__row dt{font-size:.74rem}
.bcfg--compact .bcfg__row dd{font-size:.8rem}
@media (max-width:560px){.bcfg__row{grid-template-columns:1fr;gap:.1rem}}
/* admin order screen + confirmation page: same rows, plainer chrome */
.adm-cfg-t{width:100%;border-collapse:collapse;margin-top:.35rem}
.adm-cfg-t td{padding:.22rem .6rem .22rem 0;font-size:.78rem;vertical-align:top;border:0}
.adm-cfg-t td:first-child{color:var(--ink-faint);white-space:nowrap;width:11rem}
.adm-cfg-t td:last-child{font-family:var(--font-m);color:var(--ink)}
.orc-cfg{padding:0 0 .5rem;text-align:left}
.sum-it__cfg{grid-column:1/-1;margin:-.25rem 0 .5rem}

/* ============================================================================
   ADD-TO-CART FEEDBACK  —  every Add button on the site (uds.js udsAdd): working,
   added, failed look the same whatever the button's size or place.
   ========================================================================== */
.uadd-busy{opacity:.75;cursor:default;pointer-events:none}
.uadd-busy .i{animation:uspin .7s linear infinite}
.uadd-done,.uadd-done:hover{--btn-bg:var(--ok);--btn-fg:#fff;--btn-bd:var(--ok);background:var(--ok)!important;border-color:var(--ok)!important;color:#fff!important;box-shadow:none}
.uadd-err,.uadd-err:hover{--btn-bg:var(--err,#b42318);--btn-fg:#fff;--btn-bd:var(--err,#b42318);background:var(--err,#b42318)!important;border-color:var(--err,#b42318)!important;color:#fff!important}
.uadd-done .i,.uadd-err .i{transform:none;animation:none}
@media (prefers-reduced-motion:reduce){.uadd-busy .i{animation:none}}
.uadd-note{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:300;max-width:min(92vw,460px);background:var(--ink,#1b2433);color:#fff;
  padding:.7rem 1rem;border-radius:10px;font-size:.9rem;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.uadd-note[hidden]{display:none}
/* cart-count badge: a short pulse so a change register even off to the side */
[data-cart-count].bump{animation:ucartbump .5s var(--ease)}
@keyframes ucartbump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ============================================================================
   PDP · wishlist toggle  —  the wishlist page and header badge already
   existed; this is the button that actually lets a customer put something on
   the list. Square, same height as the buy button, outline that fills solid
   red-pink once saved (distinct from the blue "add to cart" action).
   ========================================================================== */
.pdp__wish{width:52px;flex:none;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);
  background:#fff;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.pdp__wish .i{font-size:1.3rem}
.pdp__wish:hover{border-color:#e0507a;color:#e0507a}
.pdp__wish.is-on{border-color:#e0507a;background:#e0507a;color:#fff}
.pdp__wish.is-busy{opacity:.6;pointer-events:none}
@media (max-width:480px){.pdp__cart{flex-wrap:wrap}.pdp__wish{flex:none}.pdp__cart .btn{white-space:normal;line-height:1.2;padding-inline:.9rem}}

/* ============================================================================
   WISHLIST TABLE  —  same .ptbl the catalog uses (icon-button "Add" cell,
   44px thumbnail, card-collapse on mobile) instead of a bespoke card grid, so
   the saved-parts list reads like the rest of the catalog rather than a
   different, older component.
   ========================================================================== */
.p-rm{background:#fff;border:1.5px solid var(--line-strong);color:var(--ink-2)}
.p-rm:hover{border-color:var(--err);color:var(--err);background:var(--err-bg)}
.p-rm:disabled{opacity:.5;pointer-events:none}
#wish-tbl .p-plus.is-busy{opacity:.7;pointer-events:none}
#wish-tbl .p-plus.is-busy .i{animation:uspin .7s linear infinite}
#wish-tbl .p-plus.is-done{background:var(--ok);border-color:var(--ok)}

/* ============================================================================
   TRACKING LINKS  —  order-received's shipped row, and account/orders' +
   account/dashboard's ".track" cell, which had no styling at all before this
   (a bare blue underlined link sitting inside a data table).
   ========================================================================== */
.orc-row--ship dd{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.orc-track{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);font-family:var(--font-m);
  font-weight:600;font-size:.92rem}
.orc-track:hover{color:var(--blue-700)}
.orc-track .i:last-child{font-size:.85em;opacity:.6}
.orc-shipdate{font-size:.78rem;color:var(--ink-faint);font-weight:400}

.track{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);font-family:var(--font-m);
  font-weight:600;font-size:.85rem;white-space:nowrap}
.track:hover{color:var(--blue-700)}
.track .i{font-size:1em}

/* ============================================================================
   ADDRESS SUGGESTIONS  —  the list js/geo.js draws under a [data-gplaces] street
   field (Google's predictions, our markup). Same card language as the site's
   other popovers; the "Powered by Google" line is required by Google's terms.
   ========================================================================== */
.addrsug-host{position:relative}
.addrsug{position:absolute;z-index:40;margin-top:.35rem;padding:.35rem;background:var(--paper,#fff);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);font-family:var(--font-b)}
.addrsug ul{list-style:none;margin:0;padding:0}
.addrsug li{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem .6rem;border-top:1px solid var(--line-2);
  border-radius:var(--r-sm);font-size:.92rem;line-height:1.3;color:var(--ink-2);cursor:pointer}
.addrsug li:first-child{border-top:0}
.addrsug li::before{content:"";flex:none;width:1.1rem;height:1.1rem;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z'/></svg>") center/contain no-repeat}
.addrsug li:hover,.addrsug li[aria-selected="true"]{background:var(--blue-050)}
.addrsug li span{min-width:0;overflow-wrap:anywhere}
.addrsug li b{font-family:var(--font-h);font-weight:600;color:var(--ink)}
.addrsug li small{font-size:.85rem;color:var(--ink-faint)}
.addrsug__by{display:flex;justify-content:flex-end;margin:.35rem .3rem .15rem}
.addrsug__by img{display:block;width:120px;height:14px}

/* spacing utilities (replace per-element inline margins) */
.u-mt{margin-top:.75rem!important}
.u-ml{margin-left:.6rem!important}

/* builder, phone: compact header (this sheet loads after dsb.css, so the mobile rules live here) */
@media (max-width:700px){
  .ubs-dsb-wrap .dsb-hero{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;justify-items:start;text-align:left;gap:12px;padding:14px 16px}
  .ubs-dsb-wrap .dsb-hero-logo{min-width:0;width:44px;height:44px;padding:4px;margin:0}
  .ubs-dsb-wrap .dsb-hero-logo img{width:100%;height:100%;object-fit:contain}
  .ubs-dsb-wrap .dsb-hero-title{font-size:.95rem!important;line-height:1.25;margin:0}
  .ubs-dsb-wrap .dsb-hero-sub{display:none}
  .ubs-dsb-wrap .dsb-hero-price{text-align:right;justify-self:end}
  .ubs-dsb-wrap .dsb-hero-price-label{font-size:.58rem;letter-spacing:.1em;white-space:nowrap}
  .ubs-dsb-wrap .dsb-hero-price-value{font-size:1.1rem}
}

/* auth pages: benefits panel + form, one component for sign in and create account */
.auth-split{display:grid;grid-template-columns:1.05fr .95fr;max-width:980px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:#fff}
.auth-benes{background:radial-gradient(70% 130% at 12% 0%,rgba(18,70,171,.55),transparent 60%),linear-gradient(160deg,#0c1830,#123163,#1246ab);color:#fff;padding:2.5rem 2.4rem;display:flex;flex-direction:column;gap:1.5rem}
.auth-benes h2{margin:0 0 .35rem;font-size:1.55rem;color:#fff;letter-spacing:-.015em}
.auth-benes .bsub{color:#c3d3ee;font-size:.95rem;margin:0}
.auth-benes ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.auth-benes li{display:flex;gap:.85rem;align-items:flex-start}
.auth-benes li .bi{width:38px;height:38px;flex:none;border-radius:var(--r-sm);background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:1.2rem}
.auth-benes li b{display:block;font-family:var(--font-h);font-weight:600;font-size:.98rem}
.auth-benes li span{display:block;color:#bccbe6;font-size:.84rem;margin-top:.15rem}
.auth-benes .auth-trust{margin-top:auto;background:none;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:#aeb9d0;display:flex;gap:1.25rem;flex-wrap:wrap}
.auth-form{padding:2.5rem 2.4rem;display:flex;flex-direction:column;justify-content:center}
.auth-form h1{margin:0 0 .3rem;font-size:1.7rem}
.auth-form .sub{color:var(--ink-faint);margin:0 0 1.4rem;font-size:.92rem}
.auth-form .authform{gap:.25rem}
.auth-form .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.auth-form .fgrid>*{min-width:0}
.auth-form .field{display:grid;gap:.3rem;margin-top:.85rem}
.auth-form .field label{font-family:var(--font-h);font-weight:600;font-size:.86rem;color:var(--ink);margin:0}
.auth-form .field input{height:48px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:0 .85rem;font:inherit;color:var(--ink);background:#fff}
.auth-form .field input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.auth-form .field small{color:var(--ink-faint);font-size:.78rem}
.auth-form .pw{position:relative}
.auth-form .pw input{padding-right:3.2rem}
.auth-form .pw button{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);height:36px;padding:0 .6rem;border:0;background:transparent;color:var(--blue);font:600 .8rem var(--font-h);cursor:pointer;border-radius:var(--r-xs)}
.auth-form .authform .btn{margin-top:1.25rem}
.auth-form .legal{font-size:.8rem;color:var(--ink-faint);margin:.9rem 0 0;line-height:1.5}
.auth-form .legal a{color:var(--blue)}
@media (max-width:820px){.auth-split{grid-template-columns:1fr}.auth-benes{order:2;padding:2rem 1.5rem}.auth-form{padding:2rem 1.5rem}.auth-form .fgrid{grid-template-columns:1fr}}

/* rich page hero + product grid + 3-step + comparison used by the content pages */
.phero--rich{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:0 clamp(2rem,1.5rem + 2vw,3.25rem)}
.phero--rich .ucrumb{margin-bottom:1.25rem}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem 3rem;align-items:center}
@media (max-width:860px){.phero__grid{grid-template-columns:minmax(0,1fr)}.phero__media{order:-1;max-width:420px}}
.phero--rich h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);margin:.6rem 0 .75rem;max-width:22ch}
.phero--rich .lead{margin:0;max-width:58ch}
.phero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.4rem}
@media (max-width:560px){.phero__cta .btn{width:100%;white-space:normal;padding-inline:1.2rem;text-align:center;line-height:1.25;min-height:52px;height:auto;padding-block:.7rem}}
.phero__facts{list-style:none;margin:1.6rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line);display:flex;gap:2rem;flex-wrap:wrap}
.phero__facts b{display:block;font-size:1.4rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.phero__facts span{font-size:.84rem;color:var(--ink-faint)}
.phero__media img{width:100%;height:auto;max-height:420px;object-fit:contain}
/* product cards (home, related parts, customers also bought): photo, SKU, name, price + stock, optional Add */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:.75rem}
/* phones: one swipeable row instead of four rows of cards */
@media (max-width:640px){
  .pgrid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) .25rem;scroll-padding-inline:var(--gutter)}
  .pgrid::-webkit-scrollbar{display:none}
  .pgrid > *{scroll-snap-align:start}
}
.pcard{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.pcard:hover{border-color:var(--line-strong);color:var(--ink)}
.pcard__media{aspect-ratio:1;display:grid;place-items:center;background:#fff;padding:.6rem;color:var(--ink-faint);font-size:2rem}
.pcard__media img{width:100%;height:100%;object-fit:contain}
/* the photo is pinned inside its square: a % height does not resolve in the grid cell, so tall or wide photos (many PTI
   shots are far from square) grew past the box and covered the part number (owner, /series/1350 on a phone, 2026-11-11) */
.pcard__media{position:relative;overflow:hidden}
.pcard__media img{position:absolute;top:.6rem;left:.6rem;width:calc(100% - 1.2rem);height:calc(100% - 1.2rem);max-width:none;max-height:none;object-fit:contain;object-position:center}
.pcard__body{display:grid;gap:.3rem;padding:.8rem .9rem 1rem;border-top:1px solid var(--line);align-content:start}
.pcard__sku{font:600 .86rem var(--font-m);color:var(--blue)}
.pcard__name{font-size:.84rem;line-height:1.35;min-height:2.7em;color:var(--ink-2)}
.pcard__foot{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-top:.3rem}
.pcard__foot b{font:600 1rem var(--font-m)}
.pcard__foot small{font-family:var(--font-m);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.pcard__ok{color:var(--ok)!important}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:none}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.steps3 li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.4rem 1.3rem;display:grid;gap:.4rem;align-content:start}
.steps3__n{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;margin-bottom:.4rem}
.steps3 b{font-family:var(--font-h);font-weight:600;font-size:1.05rem}
.steps3 p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.55}
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:760px){.vs2{grid-template-columns:1fr}}
.vs2__col{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.6rem 1.5rem;display:grid;gap:.6rem;align-content:start}
.vs2__col h3{margin:0;font-size:1.25rem}
.checks{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;gap:.45rem;color:var(--ink-2);font-size:.95rem}
.checks li{padding-left:1.4rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:.8rem;height:.45rem;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* page hero (all content pages): one rule for every page that opens with .phero */
.phero{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:0 clamp(2.25rem,1.5rem + 2.5vw,3.5rem);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 90% at 100% 0%,rgba(18,70,171,.08),transparent 60%)}
.phero .crumb{font-family:var(--font-b);font-size:.82rem;font-weight:500;color:var(--ink-faint);display:flex;gap:.5rem;align-items:center;margin:0 0 1.5rem;padding-top:1rem}
.phero .crumb a{color:var(--ink-2)}
.phero .crumb .sep{color:var(--line-strong)}
.phero .accentline{width:2.25rem;height:3px;border-radius:2px;background:var(--red,#c02a2a);margin:0 0 1rem}
.phero h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:22ch;margin:0}
.phero .lead{color:var(--ink-2);font-size:var(--fs-lead);max-width:60ch;margin:.9rem 0 0;line-height:1.6}
.phero .btn{margin-top:.25rem}
.phero>.wrap>div[style*="display:flex"]{margin-top:1.4rem!important}
/* content page sections: consistent rhythm for the legacy pages */
.secthead{margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem)}
.secthead h2{font-size:var(--fs-h2);margin:0;max-width:30ch;letter-spacing:-.015em}
.secthead p{color:var(--ink-2);font-size:var(--fs-lead);max-width:56ch;margin:.75rem 0 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:0}
@media (max-width:860px){.why-grid{grid-template-columns:1fr}}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.4rem;box-shadow:none}
.why-card h3,.why-card h2{font-size:1.05rem;margin:0 0 .4rem}
.why-card p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}

.phero__media--photo{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.phero__media--photo img{width:100%;height:100%;max-height:none;object-fit:cover}

/* catalog: category grid + series chips as links */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
@media (max-width:1000px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.catgrid{grid-template-columns:1fr 1fr}}
.catcard{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem .6rem .6rem;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);min-height:64px;transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.catcard:hover{transform:translateY(-2px);border-color:var(--blue-200)}
.catcard__media{width:46px;height:46px;flex:none;background:var(--paper-2);border-radius:var(--r-xs);display:grid;place-items:center;overflow:hidden}
.catcard__media img{width:100%;height:100%;object-fit:contain}
.catcard__body b{display:block;font-family:var(--font-h);font-weight:600;font-size:.88rem;line-height:1.25}
.catcard__body span{display:block;font-size:.72rem;color:var(--ink-faint);margin-top:.15rem}
.n-series{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.n-series li a,.n-series li{font-family:var(--font-m);font-size:.9rem;color:var(--ink)}
.n-series li a{display:inline-block;padding:.45rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.n-series li a:hover{border-color:var(--blue);color:var(--blue)}
.phero__photo{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-2)}

/* kicker on dark bands: the brand blue is unreadable on navy */
:is(.ctaband,.uband,.uendcta,.premade-band,.on-dark) .kicker{color:var(--blue-200)}

/* buttons on dark bands: hover must stay readable (white pill, blue text, in every state) */
:is(.ctaband,.premade-band,.uband,.uendcta,.on-dark,.n-dark) .btn-primary{--btn-bg:#fff;--btn-fg:var(--blue);background:#fff;color:var(--blue);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
:is(.ctaband,.premade-band,.uband,.uendcta,.on-dark,.n-dark) .btn-primary:hover,:is(.ctaband,.premade-band,.uband,.uendcta,.on-dark,.n-dark) .btn-primary:focus-visible{--btn-bg:var(--blue-050);--btn-fg:var(--blue-700);background:var(--blue-050);color:var(--blue-700)}
:is(.ctaband,.premade-band,.uband,.uendcta,.on-dark,.n-dark) .btn-ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.5);color:#fff}
:is(.ctaband,.premade-band,.uband,.uendcta,.on-dark,.n-dark) .btn-ghost:hover,:is(.ctaband,.premade-band,.uband,.uendcta,.on-dark,.n-dark) .btn-ghost:focus-visible{--btn-bd:#fff;--btn-fg:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* track order */
.trk{margin-top:1.5rem;max-width:40rem}
.trk__form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;padding:1.25rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.trk__form .btn{grid-column:1/-1;justify-self:start}
.trk__form .field{display:grid;gap:.3rem;min-width:0}
.trk__form label{font-family:var(--font-h);font-weight:600;font-size:.86rem;color:var(--ink)}
.trk__form input{height:48px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:0 .85rem;font:inherit;font-family:var(--font-m);color:var(--ink);background:#fff}
.trk__form input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.trk__form small{color:var(--ink-faint);font-size:.78rem}
@media (max-width:640px){.trk__form{grid-template-columns:1fr}}
.trk__notice{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem 1.2rem;background:var(--warn-bg);border:1px solid #ead9b5;border-radius:var(--r-lg)}
.trk__notice .i{color:var(--warn);font-size:1.3rem;flex:none;margin-top:.1rem}
.trk__notice b{display:block;font-family:var(--font-h);font-weight:600;margin-bottom:.2rem}
.trk__notice p{margin:0 0 .8rem;color:var(--ink-2);font-size:.93rem}
.trk__side{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;display:grid;gap:.5rem;align-content:start;align-self:start}
.trk__side b{font-family:var(--font-h);font-weight:600}
.trk__side p{margin:0 0 .4rem;color:var(--ink-2);font-size:.93rem}
.trk__side hr{border:0;border-top:1px solid var(--line);margin:.8rem 0}
.trk__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.trk__steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trk__steps{grid-template-columns:1fr}}
.trk__steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.3rem 1.2rem;display:grid;gap:.35rem;align-content:start;position:relative}
.trk__n{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;margin-bottom:.35rem}
.trk__steps b{font-family:var(--font-h);font-weight:600;font-size:1.02rem}
.trk__steps p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.55}

/* contact: a drawing sent from the designer */
.dsg-attach{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.25rem;align-items:center;padding:1rem 1.25rem;background:#fff;border:1.5px solid var(--steel);border-radius:var(--r-lg);margin-bottom:1.25rem}
@media (max-width:700px){.dsg-attach{grid-template-columns:1fr}}
.dsg-attach__img{background:linear-gradient(0deg,transparent 23px,#eef2f8 23px,#eef2f8 24px,transparent 24px) 0 0/100% 24px,linear-gradient(90deg,transparent 23px,#eef2f8 23px,#eef2f8 24px,transparent 24px) 0 0/24px 100%,#fff;border:1px solid var(--line);border-radius:var(--r);padding:.75rem}
.dsg-attach__img img{width:100%;height:auto;display:block}
.dsg-attach__body{display:grid;gap:.35rem}
.dsg-attach__body b{font-family:var(--font-h);font-weight:600}
.dsg-attach__body p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5}

/* wishlist hover must pass contrast */
.pdp__wish:hover,.pdp__wish:focus-visible{color:var(--err);border-color:var(--err)}

/* show/hide password toggle: legacy .authform button rules must not move it */
.auth-form .pw{position:relative}
.auth-form .authform .pw button,.auth-form .pw button{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);margin:0;width:auto;height:36px;padding:0 .6rem;border:0;background:transparent;color:var(--blue);font:600 .8rem var(--font-h);cursor:pointer;border-radius:var(--r-xs)}
.auth-form .authform .pw button:hover{background:var(--blue-050)}
.auth-form .authrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;font-size:.86rem}
.auth-form .authrow a{color:var(--blue);font-weight:600}

/* ============================================================================
   SEARCH RESULTS PAGE — one table per category
   ========================================================================== */
.srch-head .wrap{padding-block:0 1.5rem}
.srch-head h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem)}
.srch-q{font-family:var(--font-m);color:var(--blue);font-weight:600}
/* how a query was read ("Showing results for “driveshaft”") and the no-results "we'll find it" box */
.srch-read{margin:.5rem 0 0;color:var(--ink-2);font-size:.95rem}
.srch-read b{color:var(--ink)}
.srch-read span{display:block;color:var(--ink-faint);font-size:.85rem;margin-top:.15rem}
.srch-ask{margin:1.5rem auto 0;padding-top:1.25rem;border-top:1px solid var(--line);max-width:560px}
.srch-ask p{margin:0 0 .75rem;color:var(--ink-2)}
.srch-ask b{color:var(--ink)}
.srch-ask__cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.us-read{margin:0;padding:.6rem 1rem;background:var(--paper-2);border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.85rem}
.us-read b{color:var(--ink)}
.us-ask{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.srch-form{display:flex;align-items:center;gap:.6rem;background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:.35rem .4rem .35rem 1rem;max-width:760px;margin-top:1rem;box-shadow:var(--sh-1)}
.srch-form:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-100)}
.srch-form .i{color:var(--ink-faint);font-size:1.15rem;flex:none}
.srch-form input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;padding:.6rem 0;outline:none}
.srch-form .btn{flex:none}
.srch-jump{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.srch-jump a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-pill);padding:.4rem .85rem;font-size:.84rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.srch-jump a b{font-family:var(--font-m);font-weight:600;color:var(--blue)}
.srch-jump a:hover{border-color:var(--blue);color:var(--ink)}
.srch-body{padding-top:1.5rem}
.srch-sec{margin-bottom:2.5rem;scroll-margin-top:110px}
.srch-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.srch-sec__head h2{margin:0;font-size:1.25rem}
.srch-sec__head h2 span{font-family:var(--font-m);font-size:.8rem;font-weight:500;color:var(--ink-faint);margin-inline-start:.5rem}
.srch-sec__head .textlink{display:inline-flex;align-items:center;gap:.3rem;font-weight:600}
.srch-more{margin:.7rem 0 0;font-size:.88rem;color:var(--ink-2)}
.srch-more a{color:var(--blue);font-weight:600}
.srch-hints{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;margin-bottom:2rem}
.srch-hints h2{font-size:.78rem;font-family:var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .6rem}
.srch-hints ul{margin:0;padding:0 0 0 1.1rem;color:var(--ink-2);line-height:1.7}
.srch-quick{display:flex;flex-wrap:wrap;gap:.5rem}
.p-plus.is-done{background:var(--ok);border-color:var(--ok);color:#fff}

/* ============================================================================
   404 — the page that measures 404
   ========================================================================== */
.nf{position:relative;background:var(--steel);color:#fff;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:24px 24px}
.nf::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(closest-side,rgba(18,70,171,.55),transparent);pointer-events:none}
.nf__in{position:relative;z-index:1;padding-block:4rem 4.5rem;max-width:980px}
.nf__kicker{font-family:var(--font-m);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#9fb0cf;margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem}
.nf__kicker span{background:var(--red);color:#fff;border-radius:var(--r-pill);padding:.25rem .65rem;letter-spacing:.1em}
.nf h1{color:#fff;font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);line-height:1.1;max-width:18ch;margin:0 0 .9rem;text-wrap:balance}
.nf h1 b{color:#8fb4ff;font-family:var(--font-m);font-weight:600}
.nf__lead{color:#c3d0e6;font-size:1.05rem;max-width:62ch;margin:0 0 1.5rem;line-height:1.6}
.nf__art{margin:0 0 1.5rem;max-width:820px}
.nf__art svg{width:100%;height:auto;display:block}
.nf__art .parts path,.nf__art .parts line,.nf__art .parts polyline,.nf__art .parts polygon,.nf__art .parts ellipse,.nf__art .tube-line{stroke:#dbe4f5!important}
.nf__art [fill="#ffffff"],.nf__art [fill="#9d9fa2"]{fill:#17294b!important}
.nf__art .dim-line,.nf__art .dim-ext,.nf__art .dim-line-t,.nf__art .radius-line{stroke:#8fb4ff!important}
.nf__art .dim-arrow{fill:#8fb4ff!important}
.nf__art text{fill:#9fb0cf!important}
.nf__art text.dim-text{fill:#8fb4ff!important}
.nf__art text.dim-text.is-set{fill:#fff!important}
.nf__search{display:flex;align-items:center;gap:.6rem;background:#fff;border-radius:var(--r-pill);padding:.35rem .4rem .35rem 1rem;max-width:620px;box-shadow:var(--sh-2);margin:0 0 2rem}
.nf__search .i{color:var(--ink-faint);font-size:1.15rem;flex:none}
.nf__search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;padding:.6rem 0;outline:none;color:var(--ink)}
.nf__search .btn{flex:none}
.nf__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.nf__links a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:.9rem 1rem;color:#fff;text-decoration:none;transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.nf__links a .i{grid-row:1/3;font-size:1.4rem;color:#8fb4ff}
.nf__links a b{font-family:var(--font-h);font-weight:600;font-size:.95rem}
.nf__links a span{font-size:.8rem;color:#9fb0cf;line-height:1.35}
.nf__links a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);transform:translateY(-2px)}

/* one clear control: hide the browser's own search-cancel X */
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
@media (max-width:640px){.nf__in{padding-block:2.5rem 3rem}.nf__art{margin-inline:-6px}.nf__links{grid-template-columns:1fr}.nf__search{margin-bottom:1.5rem}}
/* auth fields: the toggle box hugs the input even when the neighbouring field carries a hint line */
.auth-form .field{align-content:start}
.auth-form .pw{align-self:start}
.auth-form .pw input{width:100%;display:block}

/* ============================================================================
   PHONE FIELDS — flag + dial code picker and national number (js/phone.js)
   ========================================================================== */
.tel{position:relative;display:flex;align-items:stretch;width:100%;min-width:0;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.tel:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.tel .tel__cc{flex:0 0 auto!important;width:auto!important;display:inline-flex;align-items:center;gap:.45rem;margin:0;border:0!important;border-right:1px solid var(--line)!important;border-radius:var(--r-sm) 0 0 var(--r-sm)!important;background:var(--paper-2);padding:0 .7rem 0 .75rem;font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer;min-height:44px;line-height:1;white-space:nowrap}
.tel .tel__cc:hover{background:var(--blue-050)}
.tel .tel__cc:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tel__flag{width:20px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(11,26,51,.12);object-fit:cover;flex:none}
.tel__code{font-family:var(--font-m);font-weight:600;font-size:.86rem}
.tel__caret{width:.55rem;height:.55rem;border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);transform:translateY(-2px) rotate(45deg);margin-left:.1rem}
.tel input[type="tel"]{flex:1 1 auto!important;width:auto!important;min-width:0;border:0!important;border-radius:0 var(--r-sm) var(--r-sm) 0!important;box-shadow:none!important;outline:none!important;background:#fff;height:auto;margin:0}
.tel input[type="tel"]:not(:placeholder-shown):invalid{color:var(--red)}
.tel__menu[hidden]{display:none!important}
.tel__menu{position:absolute;z-index:60;top:calc(100% + 6px);left:-1.5px;width:min(320px,calc(100vw - 2rem));background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--sh-3,0 18px 40px rgba(11,26,51,.18));padding:.5rem;display:flex;flex-direction:column;gap:.4rem}
.tel__q{width:100%;box-sizing:border-box;border:1.5px solid var(--line-strong)!important;border-radius:var(--r-sm)!important;padding:.55rem .7rem!important;font:inherit;font-size:.9rem;height:auto!important;margin:0}
.tel__q:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)!important}
.tel__list{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.tel__list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:var(--r-xs);cursor:pointer;font-size:.9rem;color:var(--ink)}
.tel__list li:hover,.tel__list li.is-hot{background:var(--blue-050)}
.tel__list li.is-on{background:var(--blue-100);font-weight:600}
.tel__list .tel__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel__list .tel__dial{font-family:var(--font-m);color:var(--ink-faint);font-size:.82rem}
.tel__list .tel__none{color:var(--ink-faint);cursor:default}

/* ============================================================================
   COMPLETE DRIVESHAFTS TABLE — cascading vehicle filter (make → year → model)
   ========================================================================== */
.vfilter{flex-wrap:wrap;row-gap:.75rem}
.vfilter__veh{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;flex:1 1 100%;padding:.9rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)}
.vsel{display:grid;gap:.3rem;flex:1 1 180px;min-width:0}
.vsel>span{font-family:var(--font-m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.vsel select{width:100%;min-height:46px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;padding:0 2.2rem 0 .8rem;font:inherit;color:var(--ink);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23697687'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:1rem}
.vsel select:disabled{color:var(--ink-faint);background-color:var(--paper-2);cursor:not-allowed}
.vsel select:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.vsel select:not(:disabled):not([value=""]):hover{border-color:var(--blue)}
.vfilter__clear{display:inline-flex;align-items:center;gap:.35rem;min-height:46px;padding:0 .9rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap}
.vfilter__clear:hover{border-color:var(--red);color:var(--red)}
.vfilter.is-loading .vfilter__veh{opacity:.6}
/* the vehicle box spans the whole controls grid (it sat in one of two phone columns, half width) */
.shop-controls .vfilter__veh{grid-column:1/-1}
@media (max-width:640px){
  .vfilter__veh{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.75rem}
  .vsel{flex:none}
  .vsel:first-child{grid-column:1/-1}
  .vfilter__clear{grid-column:1/-1;width:100%;justify-content:center}
  /* related categories: a two-column grid instead of a strip cut off at the screen edge */
  .usiblings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-top:1rem}
  .usib{min-width:0;font-size:.84rem}
  .usib > :last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ============================================================================
   TUBING SOLD BY THE FOOT — price suffix, badge, qty note and the heads-up popup
   ========================================================================== */
.pdp__perft{font-family:var(--font-m);font-size:.95rem;font-weight:600;color:var(--ink-faint);letter-spacing:0;margin-left:.3rem}
.pdp__ftbadge{display:inline-flex;align-items:center;gap:.4rem;margin-left:.8rem;padding:.4rem .8rem;border-radius:var(--r-pill);border:1.5px solid var(--blue);background:var(--blue-050);color:var(--blue);font:600 .8rem var(--font-h);cursor:pointer;vertical-align:middle;transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.pdp__ftbadge:hover{background:var(--blue);color:#fff}
.pdp__ftbadge .i{font-size:1rem}
.pdp__ftnote{flex:1 1 100%;margin:.4rem 0 0;display:flex;align-items:center;gap:.45rem;font-size:.86rem;color:var(--ink-2)}
.pdp__ftnote .i{color:var(--blue)}
.pdp__ftnote span{font-family:var(--font-m);font-size:.82rem;color:var(--ink)}
.ftpop{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:1rem}
.ftpop[hidden]{display:none}
.ftpop__scrim{position:absolute;inset:0;background:rgba(8,16,32,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ftpop__card{position:relative;width:min(520px,100%);background:#fff;border-radius:var(--r-xl);box-shadow:0 30px 80px rgba(8,16,32,.35);padding:1.6rem 1.7rem 1.5rem;animation:ftpop-in .32s var(--ease) both}
@keyframes ftpop-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ftpop__card{animation:none}}
.ftpop__x{position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;font-size:1.1rem}
.ftpop__x:hover{background:var(--line);color:var(--ink)}
.ftpop__art{color:var(--blue);background:linear-gradient(180deg,var(--blue-050),#fff);border:1px solid var(--blue-100);border-radius:var(--r);padding:.9rem 1.2rem .6rem;margin:0 0 1.1rem}
.ftpop__art svg{display:block;width:100%;height:auto}
.ftpop__kicker{margin:0 0 .3rem;font-family:var(--font-m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600}
.ftpop__card h2{margin:0 0 .6rem;font-size:1.45rem;line-height:1.15;letter-spacing:-.015em}
.ftpop__card h2 em{font-style:normal;color:var(--blue)}
.ftpop__lead{margin:0 0 1rem;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.ftpop__calc{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.8rem;padding:.8rem .9rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:.9rem}
.ftpop__calc label{font-family:var(--font-h);font-weight:600;font-size:.88rem;color:var(--ink)}
.ftpop__calc .uqty{background:#fff}
.ftpop__calc .uqty input{width:58px}
.ftpop__total{display:grid;justify-items:end;line-height:1.15}
.ftpop__total span{font-family:var(--font-m);font-size:.78rem;color:var(--ink-faint)}
.ftpop__total b{font-family:var(--font-h);font-size:1.4rem;color:var(--ink);letter-spacing:-.01em}
.ftpop__facts{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.4rem;font-size:.84rem;color:var(--ink-2)}
.ftpop__facts li{display:flex;align-items:center;gap:.5rem}
.ftpop__facts .i{color:var(--blue);flex:none}
.ftpop__acts{display:flex;gap:.6rem;flex-wrap:wrap}
.ftpop__acts .btn{flex:1 1 auto;justify-content:center}
@media (max-width:480px){.ftpop{padding:.6rem;align-items:end}.ftpop__card{padding:1.2rem 1.1rem 1.1rem;border-radius:var(--r-lg)}.ftpop__calc{grid-template-columns:1fr auto;grid-template-rows:auto auto}.ftpop__calc label{grid-column:1/3}.ftpop__total{justify-items:start}}

/* ============================================================================
   VEHICLE LANDING PAGES  (/driveshafts, /driveshafts/{make}, /driveshafts/{make}/{model})
   ========================================================================== */
.veh-head__row{display:flex;gap:1.5rem;align-items:flex-start;margin-top:.4rem}
.veh-head__row>div{min-width:0;flex:1}
.veh-logo{flex:none;width:96px;height:96px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.7rem;margin-top:.35rem}
.veh-logo img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.veh-h1-years{font-weight:500;color:var(--ink-faint);font-size:.62em;letter-spacing:0;white-space:nowrap}
.veh-stats{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.1rem;font-family:var(--font-m);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.veh-stats b{display:block;font-family:var(--font-h);font-size:1.3rem;letter-spacing:-.01em;text-transform:none;color:var(--ink);line-height:1.15;margin-bottom:.1rem}
.veh-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.veh-lead{margin:.5rem 0 0;color:var(--ink-2);max-width:70ch}
.veh-makes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;margin-top:1.25rem}
.veh-makes--compact{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.veh-make{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);min-width:0;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.veh-make:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-2px);color:var(--ink)}
.veh-make span{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--paper-2);border-radius:var(--r-sm);overflow:hidden;padding:4px;color:var(--ink-faint)}
.veh-make span img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.veh-make div{min-width:0}
.veh-make b{display:block;font-family:var(--font-h);font-weight:600;font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}
.veh-make small{display:block;font-family:var(--font-m);font-size:.72rem;color:var(--ink-faint);margin-top:.15rem}
.veh-years{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1rem}
.veh-chip{display:inline-flex;align-items:center;gap:.3rem;min-height:36px;padding:.3rem .75rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:#fff;
  font-family:var(--font-m);font-size:.84rem;font-weight:500;color:var(--ink-2);text-decoration:none;transition:border-color var(--dur-2),color var(--dur-2),background var(--dur-2)}
.veh-chip:hover{border-color:var(--blue);color:var(--blue)}
.veh-chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.veh-chip small{font-size:.7rem;opacity:.65}
.veh-row.is-hidden{display:none!important}
.veh-table .veh-yr{font-family:var(--font-m);font-weight:600;color:var(--ink)}
.veh-table td.veh-loc{white-space:normal;max-width:220px}
.veh-model{font-family:var(--font-h);font-weight:600;color:var(--blue)}
.veh-help{margin:1.1rem 0 0;color:var(--ink-2);font-size:.92rem}
.veh-faq{display:grid;gap:.7rem;max-width:860px;margin-top:1.1rem}
.veh-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 1.15rem}
.veh-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 0}
.veh-faq summary::-webkit-details-marker{display:none}
.veh-faq summary h3{font-size:1.02rem;font-weight:600;letter-spacing:-.005em;text-wrap:pretty}
.veh-faq summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--blue-050);color:var(--blue);font-family:var(--font-m);font-size:1.1rem;line-height:1}
.veh-faq details[open] summary::after{content:"\2212"}
.veh-faq details p{margin:0 0 1.05rem;color:var(--ink-2);line-height:1.6}
.veh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.veh-step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.25rem 1.25rem}
.veh-step i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-family:var(--font-m);font-weight:600;margin-bottom:.8rem}
.veh-step h3{font-size:1.05rem;margin-bottom:.4rem}
.veh-step p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.55}
.veh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.75rem 0 0}
.veh-note{margin-top:1.5rem;font-size:.8rem;color:var(--ink-faint)}
.veh-sibs{padding-top:1rem}
.veh-sibs .usib small{font-family:var(--font-m);font-size:.72rem;color:var(--ink-faint);font-weight:400}
@media (max-width:900px){.veh-steps{grid-template-columns:1fr}}
@media (max-width:760px){
  .veh-head__row{gap:1rem}
  .veh-logo{width:64px;height:64px;padding:.45rem}
  .veh-h1-years{display:block;font-size:.55em;white-space:normal;margin-top:.2rem}
  .veh-stats{gap:.6rem 1.4rem}
  .veh-stats b{font-size:1.1rem}
  .veh-acts .btn{flex:1 1 auto;justify-content:center;white-space:normal;text-align:center}
  .veh-cta .btn{white-space:normal;text-align:center}
  .veh-table tbody td[data-label="Add"]{order:-2}
  .veh-table tbody td[data-label="Part #"]{order:-1}
  .veh-table tbody td.veh-loc{max-width:none}
  .veh-table--models tbody td[data-label="Model"]{display:block;text-align:left;font-size:1.05rem}
  .veh-table--models tbody td[data-label="Model"]::before{display:none}
  .veh-table--models tbody td[data-label="View"]{display:block;text-align:right}
  .veh-table--models tbody td[data-label="View"]::before{display:none}
}

/* ============================================================================
   GUIDES — content hub (/guides) and long-form article typography
   ========================================================================== */
.guide-hero .guide-hero__in{max-width:52rem}
.guide-hero h1{max-width:26ch}
.guide-meta{margin:1.1rem 0 0;font-size:.78rem;color:var(--ink-faint);letter-spacing:.02em}
.guide-meta time{color:var(--ink-2)}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,1rem + 3vw,4rem);align-items:start}
.guide-side{order:2;position:sticky;top:96px;display:grid;gap:1rem}
.guide-body{order:1;min-width:0;max-width:var(--wrap-prose);font-size:var(--fs-body);line-height:var(--lh)}
.guide-body > p,.guide-body > ul,.guide-body > ol{color:var(--ink-2)}
.guide-body > p{margin:0 0 1.15rem}
.guide-body > p:first-child{font-size:1.12rem;line-height:1.6;color:var(--ink-2)}
.guide-body h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);line-height:1.2;letter-spacing:-.015em;margin:2.6rem 0 .9rem;padding-top:1.2rem;border-top:1px solid var(--line);scroll-margin-top:96px}
.guide-body h3{font-size:1.15rem;margin:1.7rem 0 .55rem;scroll-margin-top:96px}
.guide-body ul,.guide-body ol{margin:0 0 1.2rem;padding-left:1.3rem;display:grid;gap:.45rem}
.guide-body li{line-height:1.6}
/* ---- the old store's measuring guides (/resources, views/resources): pictures, lettered definitions, size tables ---- */
.rg-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rg-text{color:var(--ink-2);margin:0 0 1.15rem}
.rg-text p{margin:0 0 .8rem}
.rg-text ul,.rg-text ol{margin:0 0 1rem;padding-left:1.3rem;display:grid;gap:.4rem}
.rg-figs{display:grid;gap:1rem;margin:0 0 1.4rem;grid-template-columns:1fr}
.rg-figs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rg-figs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rg-figs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rg-fig{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.rg-fig a{display:block}
.rg-fig img{display:block;width:100%;height:auto;transition:opacity var(--dur-2)}
.rg-fig a:hover img{opacity:.9}
.rg-fig figcaption{padding:.5rem .75rem;font-size:.85rem;color:var(--ink-3)}
.rg-pick{display:grid;grid-template-rows:auto 1fr;color:var(--ink);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.rg-pick b{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .75rem;border-top:1px solid var(--line-2);font-weight:600;font-size:.95rem;line-height:1.25}
.rg-pick b .i{flex:none;color:var(--blue);transition:transform var(--dur-2)}
.rg-pick:hover{border-color:var(--blue);box-shadow:var(--sh-1)}
.rg-pick:hover b .i{transform:translateX(3px)}
.rg-defs{display:grid;gap:.55rem;margin:0 0 1.4rem}
.rg-defs div{display:flex;gap:.75rem;align-items:baseline}
.rg-defs dt{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--blue);color:#fff;font:600 .88rem var(--font-m)}
.rg-defs dd{margin:0;color:var(--ink)}
.rg-table{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.rg-table table{width:100%;border-collapse:collapse;font-size:.92rem}
.rg-table th,.rg-table td{padding:.55rem .75rem;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.rg-table thead th{background:var(--paper-2);font-weight:600;color:var(--ink);white-space:nowrap}
.rg-table tbody th{font-family:var(--font-m);font-weight:600;white-space:nowrap}
.rg-table tbody tr:last-child > *{border-bottom:0}
.rg-chart{max-height:70vh;overflow:auto}
.rg-filter{display:flex;align-items:center;gap:.5rem;max-width:26rem;margin:0 0 .75rem;padding:0 .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink-3)}
.rg-filter:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.rg-filter input{flex:1;min-width:0;border:0;outline:0;background:none;padding:.65rem 0;font:inherit;font-size:16px;color:var(--ink)}
.rg-filter__none{margin:-.6rem 0 1.4rem;color:var(--ink-2)}
.rg-chart thead th{position:sticky;top:0;z-index:1;white-space:normal;vertical-align:bottom;line-height:1.25}
.rg-chart td{white-space:nowrap}
.rg-chart tbody th{white-space:normal}
.rg-chart th,.rg-chart td{padding:.55rem .6rem}
.rg-chart td.rg-chart__app{white-space:normal;min-width:8rem}
.rg-chart .rg-ok{display:block;font-size:.75rem}
.rg-ok{color:var(--ok);font-weight:600}
.rg-next{display:flex;align-items:center;gap:.75rem;margin:0 0 .75rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);text-decoration:none;transition:border-color var(--dur-2),background var(--dur-2)}
.rg-next span{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.rg-next b{flex:1;font-weight:600}
.rg-next .i{color:var(--blue)}
.rg-next:hover{border-color:var(--blue);background:var(--blue-050)}
.rg-cta{margin:.5rem 0 1.4rem}
.rg-body a.btn,.rg-body a.rg-next,.rg-body .rg-pager a,.rg-body .rg-fig a,.rg-body a.rg-pick{text-decoration:none}
.rg-body a.rg-pick{color:var(--ink)}
.rg-s{display:none}
.rg-body a.btn-primary{color:#fff}
.rg-body a.btn-ghost{color:var(--ink)}
.rg-cta small{font-weight:400;opacity:.8}
.rg-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.rg-pager a{display:grid;gap:.15rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.rg-pager a:hover{border-color:var(--blue)}
.rg-pager small{color:var(--ink-3);font-size:.78rem}
.rg-pager__next{text-align:right}
.rg-family a[aria-current="page"]{font-weight:600;color:var(--blue)}
.rg-all{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--blue);font-size:.92rem}
.rg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.rg-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.rg-card__media{position:relative;display:grid;place-items:center;aspect-ratio:2/1;overflow:hidden;background:#fff;border-bottom:1px solid var(--line);color:var(--blue-200);font-size:3rem}
.rg-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:.35rem}
.rg-card__media:not(:has(img)){background:var(--paper-2)}
.rg-card__body{padding:1rem 1.1rem 1.2rem}
.rg-card h2{font-size:1.1rem;margin:0 0 .4rem}
.rg-card h2 a{color:var(--ink);text-decoration:none}
.rg-card p{margin:0 0 .6rem;color:var(--ink-2);font-size:.9rem}
.rg-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;font-size:.9rem}
.rg-card li a{color:var(--blue)}
.guide-help.rg-help-end{display:none}
@media (max-width:980px){.guide-help.rg-help-end{display:grid;margin-top:2rem}}
@media (max-width:640px){
  .rg-figs--3,.rg-figs--4{grid-template-columns:repeat(2,minmax(0,1fr))}.rg-pager{grid-template-columns:1fr}.rg-pager__next{text-align:left}
  .rg-cards{grid-template-columns:1fr;gap:1rem}
  .rg-table table{font-size:.84rem}
  .rg-table th,.rg-table td{padding:.5rem .55rem}
  .rg-table thead th{white-space:normal;line-height:1.25}
  .rg-chart__app,.rg-chart .rg-l{display:none}
  .rg-chart .rg-s{display:inline}
  .rg-chart table{font-size:.8rem;table-layout:fixed}
  .rg-chart th,.rg-chart td{padding:.5rem .4rem}
  .rg-chart tbody th{overflow-wrap:anywhere}
  .rg-chart thead th{overflow-wrap:anywhere;hyphens:auto}
  .rg-chart thead th:nth-child(1){width:28%}
  .rg-chart thead th:nth-child(2),.rg-chart thead th:nth-child(3),.rg-chart thead th:nth-child(4){width:16%}
  .rg-chart .rg-ok{font-size:.7rem}
}
.guide-body li strong,.guide-body p strong,.guide-body td strong{color:var(--ink)}
.guide-body a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--blue-200);text-underline-offset:.16em;text-decoration-thickness:1.5px}
.guide-body a:hover{text-decoration-color:var(--blue)}
.guide-body .dtable-wrap{margin:.4rem 0 1.5rem}
.guide-body .dtable{min-width:520px;font-size:.9rem}
.guide-body .dtable td a{text-decoration-thickness:1px}
.guide-body .dtable tbody td:first-child{white-space:nowrap}
.guide-chart tbody td:nth-child(2),.guide-chart tbody td:nth-child(3){font-family:var(--font-m);font-weight:600;color:var(--ink)}
.guide-steps{counter-reset:gs;list-style:none;padding-left:0!important}
.guide-steps li{counter-increment:gs;position:relative;padding-left:2.6rem}
.guide-steps li::before{content:counter(gs);position:absolute;left:0;top:.05rem;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--font-m);font-weight:600;font-size:.82rem;display:grid;place-items:center}
.guide-x{list-style:none;padding-left:0!important}
.guide-x li{position:relative;padding-left:1.6rem}
.guide-x li::before{content:"";position:absolute;left:0;top:.6em;width:.8rem;height:.42rem;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.guide-note,.guide-warn{margin:0 0 1.4rem;padding:1rem 1.2rem;border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:3px solid var(--blue);background:var(--blue-050);color:var(--ink-2);line-height:1.6;font-size:.97rem}
.guide-note b,.guide-warn b{color:var(--ink);font-family:var(--font-h);font-weight:600}
.guide-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.guide-formula{margin:0 0 1.2rem;padding:1.1rem 1.3rem;background:var(--steel);color:#fff;border-radius:var(--r);font-size:1.15rem;letter-spacing:0;overflow-x:auto;white-space:nowrap}
.guide-formula sub{font-size:.7em}
.guide-vs{margin:.5rem 0 1.6rem}
.guide-vs .vs2__col h3{margin:0}
.guide-body .faq{margin-top:1rem}
.guide-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:.25rem 1.2rem}
.guide-toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;font-family:var(--font-m);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:rotate(45deg);transition:transform var(--dur-2) var(--ease)}
.guide-toc details[open] summary::after{transform:rotate(-135deg)}
.guide-toc ol{list-style:none;margin:0;padding:0 0 .9rem;display:grid;gap:.1rem;counter-reset:toc}
.guide-toc li{counter-increment:toc}
.guide-toc a{display:flex;gap:.65rem;align-items:baseline;padding:.42rem 0;color:var(--ink-2);font-size:.92rem;line-height:1.35;border-top:1px solid var(--line-2)}
.guide-toc li:first-child a{border-top:0}
.guide-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-m);font-size:.72rem;color:var(--blue);flex:none;padding-top:.1em}
.guide-toc a:hover{color:var(--blue)}
.guide-help{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.3rem 1.2rem;display:grid;gap:.6rem}
.guide-help b{font-family:var(--font-h);font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.3}
.guide-help p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.55}
.guide-help .btn{justify-self:start}
.guide-help__tel{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-m);font-weight:600;font-size:.95rem;color:var(--ink)}
.guide-help__tel .i{color:var(--blue)}
.guide-parts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.guide-related.uguides{grid-template-columns:repeat(3,1fr)}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.guide-card{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.4rem;color:var(--ink);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.guide-card:hover{border-color:var(--blue-200);box-shadow:var(--sh-2);transform:translateY(-3px);color:var(--ink)}
.guide-card__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.4rem}
.guide-card__ic{width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-050);color:var(--blue);display:grid;place-items:center}
.guide-card__ic .i{font-size:1.35rem}
.guide-card__kicker{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.guide-card h3{font-size:1.15rem;line-height:1.3;margin:0;letter-spacing:-.01em}
.guide-card p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.55;flex:1}
.guide-card__go{margin-top:.6rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);font-family:var(--font-h);font-weight:600;font-size:.92rem}
.guide-card__go .i{transition:transform var(--dur-2) var(--ease)}
.guide-card:hover .guide-card__go .i{transform:translateX(3px)}
.uhubcard__media .i{color:var(--blue)}
@media (max-width:1100px){.guide-layout{grid-template-columns:minmax(0,1fr) 270px}.guide-parts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){
  .guide-layout{grid-template-columns:1fr;gap:1.5rem}
  .guide-side{order:1;position:static}
  .guide-body{order:2;max-width:none}
  .guide-help{display:none}
  .guide-toc details:not([open]) summary{padding:.9rem 0}
  .guide-grid,.guide-related.uguides{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .guide-parts,.guide-grid,.guide-related.uguides{grid-template-columns:1fr 1fr}
  .guide-body h2{margin-top:2.1rem}
  .guide-body > p:first-child{font-size:1.05rem}
  .guide-steps li{padding-left:2.3rem}
  .guide-formula{font-size:1rem}
}
@media (max-width:480px){.guide-grid,.guide-related.uguides{grid-template-columns:1fr}.guide-parts{grid-template-columns:1fr 1fr;gap:.7rem}}
/* guides: chart readability on phones, hub polish */
.guide-body .dtable thead th{white-space:nowrap}
.guide-chart{min-width:640px}
.guide-chart tbody td:last-child{min-width:240px}
.guide-grid .guide-card:nth-child(3n+1):last-child{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.6rem 1.5rem}
.guide-grid .guide-card:nth-child(3n+1):last-child .guide-card__top{margin:0;flex:none}
.guide-grid .guide-card:nth-child(3n+1):last-child h3{flex:1 1 220px;margin:0}
.guide-grid .guide-card:nth-child(3n+1):last-child p{flex:2 1 320px}
.guide-grid .guide-card:nth-child(3n+1):last-child .guide-card__go{margin:0;flex:none}
.guide-hub .uhubcard__media{background:var(--paper-2)}
.guide-hub .uhubcard__media img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.guide-hub .uhubcard__media--part img{object-fit:contain;padding:.6rem;mix-blend-mode:multiply;background:#fff}
@media (max-width:980px){.guide-grid .guide-card:nth-child(3n+1):last-child{grid-column:auto;flex-direction:column;align-items:stretch}.guide-grid .guide-card:nth-child(3n+1):last-child h3,.guide-grid .guide-card:nth-child(3n+1):last-child p{flex:none}}
.guide-scrollhint{display:none;margin:-1rem 0 1.2rem;font-family:var(--font-m);font-size:.74rem;color:var(--ink-faint);letter-spacing:.02em}
@media (max-width:700px){.guide-scrollhint{display:block}.guide-body .dtable tbody td{padding:.6rem .8rem}}
.usiblings{min-height:68px;scrollbar-width:thin}
.usib{min-height:46px;white-space:nowrap}
/* series chip strip: one scrolling row, so a late font swap can never wrap it and push the table (mobile CLS) */
.ucathead__series{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}
.ucathead__series>*{flex:none;white-space:nowrap}
/* product page: long description sits flush left (was centred inside the wrap, leaving a dead column) */
.pdp__desc .prose,.pdp__desc .prose>*{margin-inline:0}
.pdp__desc .prose table{width:100%;max-width:var(--wrap)}
/* alternative parts table */
.ualts__tbl td{vertical-align:middle}
.ualts__why{display:inline-block;font-size:.78rem;font-weight:600;color:var(--blue);background:var(--blue-050);border-radius:var(--r-pill);padding:.2rem .6rem;white-space:nowrap}
.ualts__in{color:var(--ok,#1a7f4b);font-weight:600}
/* CTA pairs (Find by vehicle / Build one to spec…): one row, equal height; two full-width rows on phones */
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.btn-row .btn{min-height:50px;justify-content:center}
@media (max-width:640px){.btn-row .btn{flex:1 1 100%}}
@media (max-width:640px){.veh-acts{display:flex;flex-wrap:wrap;gap:.6rem}.veh-acts .btn{flex:1 1 100%;justify-content:center;min-height:50px}}
/* cross-reference / interchange search: widget "Replaces …" line, results-page section + caption */
.us-xref{display:block;margin-top:.2rem;font-family:var(--font-m);font-size:.74rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.us-xref b{font-weight:600;color:var(--blue)}
.xref-cap{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .8rem;padding:.65rem .9rem;border:1px solid var(--blue-200);border-left:3px solid var(--blue);border-radius:var(--r-sm);background:var(--blue-050);color:var(--ink-2);font-size:.88rem;line-height:1.5}
.xref-cap .i{flex:none;color:var(--blue);font-size:1.05rem;margin-top:.15rem}
.xref-cap b{font-family:var(--font-m);font-weight:600;color:var(--ink)}
.xref-cap em{font-style:normal;font-weight:600}
.xref-cap__t{flex:1 1 auto;min-width:0}
.xref-sec td[data-label="Replaces"]{font-family:var(--font-m);font-weight:600;color:var(--blue);white-space:nowrap}
/* ==========================================================================
   commerce: buy again (/account/buy-again), customers also bought + shipping estimator (product page)
   ========================================================================== */
.ba-list{display:grid;gap:10px}
.ba-row{flex-wrap:wrap}
.ba-img{flex:none;width:64px;height:64px;display:grid;place-items:center;background:#fff;border:1px solid var(--line,#e3e8f0);border-radius:10px;overflow:hidden;color:var(--ink-faint)}
.ba-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.ba-mt{flex:1 1 220px;min-width:0}
.ba-sku{display:block;font-family:var(--font-m);font-size:.74rem;font-weight:600;color:var(--blue);letter-spacing:.03em;text-decoration:none}
.ba-mt b a{color:inherit;text-decoration:none}
.ba-mt b a:hover{color:var(--blue)}
.ba-stock{flex:none}
.ba-price{min-width:72px;text-align:right}
.ba-price small{font-size:.78rem;font-weight:600;color:var(--ink-faint)}
.ba-add{display:flex;align-items:center;gap:6px;flex:none;margin:0}
.ba-qty{width:64px;min-height:40px;padding:6px 8px;border:1.5px solid var(--line-strong,#d3dcea);border-radius:8px;background:#fff;font:inherit;font-variant-numeric:tabular-nums;text-align:center}
.ba-qty:focus{outline:none;border-color:var(--blue);box-shadow:var(--sh-focus)}
.ba-add .mbtn,.ba-order .mbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;border:0;cursor:pointer;font:inherit;font-weight:700;transition:background var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.ba-add .mbtn,.ba-order .mbtn{padding:0 16px;border-radius:10px;font-size:.92rem;text-decoration:none;white-space:nowrap;justify-content:center}
.ba-add .mbtn.pri,.ba-order .mbtn.pri{background:var(--blue);color:#fff}
.ba-order .mbtn.gho{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong)}
.ba-order .mbtn.gho:hover{border-color:var(--blue);color:var(--blue)}
.ba-add .mbtn:disabled,.ba-order .mbtn:disabled{opacity:.45;cursor:not-allowed}
.ba-add .mbtn.pri:hover,.ba-order .mbtn.pri:hover{background:var(--blue-700)}
.ba-add .mbtn.is-ok{background:#1e7a45}
.ba-add .mbtn.is-busy,.ba-order .mbtn.is-busy{opacity:.7}
.ba-order .mbtn.gho{display:inline-flex;align-items:center}
.ba-count{font-family:var(--font-m);font-size:.78rem;color:var(--ink-faint);white-space:nowrap}
.ba-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--navy,#0b1a33);color:#fff;padding:12px 18px;border-radius:12px;font-size:.92rem;box-shadow:0 12px 30px -10px rgba(11,26,51,.55);z-index:60;display:flex;gap:14px;align-items:center;max-width:calc(100vw - 32px)}
.ba-toast a{color:#9dc1ff;font-weight:700;text-decoration:none;white-space:nowrap}
.ba-toast[hidden]{display:none}
.apanel .apanel-sub.ba-sub{margin-top:14px}
@media (max-width:640px){
  .ba-row{padding:12px;gap:10px}
  .ba-row .mt.ba-mt{flex:1 1 calc(100% - 76px)}
  .ba-stock{order:5}
  .ba-price{order:6;flex:1;text-align:left}
  .ba-add{order:7;flex:1 1 100%}
  .ba-add .mbtn{flex:1;justify-content:center}
  .ba-order{gap:8px;flex-wrap:wrap}
  .mini-row.ba-order .mt{flex:1 1 100%}
  .ba-order .mprice{flex:1 1 100%;font-size:1.05rem}
  .ba-order .mbtn{flex:1 1 0;min-height:44px}
  .ba-add .ba-qty{min-height:44px}
  .ba-add .mbtn{min-height:44px}
  .ba-order .mprice{margin-right:auto}
}
/* customers also bought */
.ba-also{border-top:1px solid var(--line);padding-block:clamp(2rem,1rem + 3vw,3.5rem)}
.ba-also h2{font-size:1.28rem;margin-bottom:.4rem}
.ba-also>p{color:var(--ink-2);margin:0 0 1.2rem}
.ba-also__card .pcard__media,.ba-also__card .pcard__name{text-decoration:none;color:inherit}
.ba-also__card .pcard__sku{text-decoration:none}
.ba-also__card .pcard__name:hover{color:var(--blue)}
/* name takes the slack, so price and Add line up across a row of cards */
.ba-also__card .pcard__body{display:flex;flex-direction:column;gap:.3rem}
.ba-also__card .pcard__name{flex:1}
.ba-also__card .pcard__foot{margin-top:.2rem}
.ba-also__add{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;margin-top:.55rem;min-height:40px;border-radius:var(--r-sm);padding:.45rem .8rem;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;width:100%;transition:background var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.ba-also__add:active{transform:scale(.97)}
.ba-also__add .i{font-size:1rem}
/* shipping estimator */
.est{margin-block:clamp(2rem,1rem + 3vw,3.5rem) 0;padding:1.3rem 1.4rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2,#f6f8fb)}
.est__head h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;font-size:1.15rem}
.est__head h2 .i{color:var(--blue)}
.est__head p{margin:0 0 1rem;color:var(--ink-2);font-size:.9rem;max-width:72ch}
.est__form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.est__form .field{margin:0}
.est__form .field label{margin-bottom:.3rem;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint)}
.est__zip{flex:0 1 11rem}
.est__qty{flex:0 1 6rem}
.est__form .field input{padding:.72rem .85rem;min-height:48px}
.est__go{min-height:48px;background:#fff}
.est__out{margin-top:1rem}
.est__list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.est__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem .9rem;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:.92rem}
.est__list li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.est__list li s{color:var(--ink-faint);font-weight:400;margin-right:.3rem}
.est__list li small{display:block;font-family:var(--font-m);font-size:.7rem;letter-spacing:.04em;color:var(--ink-faint)}
.est__li-free{border-color:#bfe3cc!important;background:#f0faf3!important;color:#1e7a45;font-weight:600}
.est__li-free b{color:#1e7a45}
.est__note{margin:.6rem 0 0;font-size:.85rem;color:var(--ink-2)}
.est__meta{color:var(--ink-faint);font-size:.78rem}
.est__wait{margin:0;color:var(--ink-2);font-size:.9rem}
.est__err{margin:0;color:#c0392b;font-weight:600;font-size:.92rem}
.est__pickup{display:flex;align-items:center;gap:.4rem;margin:1rem 0 0;font-size:.88rem;color:var(--ink-2)}
.est__pickup .i{color:var(--blue)}
@media (max-width:640px){
  .est{padding:1.1rem 1rem 1rem}
  .est__zip{flex:1 1 52%}
  .est__qty{flex:1 1 30%}
  .est__go{flex:1 1 100%;justify-content:center}
  .est__list li{flex-wrap:wrap}
}

/* ============================================================================
   RECOVERY (recovery agent): notify-me block, quote modal, restored-cart page
   ========================================================================== */
.rcv-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.rcv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rcv-notify{margin-top:1.1rem;padding:1rem 1.1rem;border:1.5px solid var(--blue-100);background:var(--blue-050);border-radius:var(--r)}
.rcv-notify__head{display:flex;gap:.75rem;align-items:flex-start}
.rcv-notify__ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;border:1px solid var(--blue-100)}
.rcv-notify__ic svg{width:18px;height:18px}
.rcv-notify__head b{display:block;font-family:var(--font-h);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.3}
.rcv-notify__head span{display:block;font-size:.86rem;color:var(--ink-2);margin-top:.2rem;line-height:1.45}
.rcv-notify__row{display:flex;gap:.6rem;margin-top:.85rem}
.rcv-notify__row input{flex:1 1 auto;min-width:0;padding:.7rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);font:inherit;font-size:.95rem;background:#fff;color:var(--ink);min-height:44px}
.rcv-notify__row input:focus{outline:none;border-color:var(--blue);box-shadow:var(--sh-focus)}
.rcv-notify__row .btn{flex:0 0 auto}
.rcv-notify__msg{margin:.7rem 0 0;font-size:.9rem;line-height:1.45;color:var(--ok);font-weight:600}
.rcv-notify__msg a{color:var(--blue);text-decoration:underline}
.rcv-notify__msg.is-err{color:var(--err)}
.rcv-notify.is-done{border-color:var(--ok-line);background:var(--ok-bg)}
@media (max-width:480px){.rcv-notify__row{flex-direction:column}.rcv-notify__row .btn{width:100%}}
/* quote modal */
.rcv-lock{overflow:hidden}
.rcv-modal{position:fixed;inset:0;z-index:1200;background:rgba(11,26,51,.55);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .2s ease}
.rcv-modal.on{opacity:1}
.rcv-modal[hidden],.rcv-notify__row[hidden]{display:none}
.rcv-modal__card{position:relative;background:#fff;border-radius:var(--r-lg);width:100%;max-width:540px;max-height:calc(100vh - 2rem);overflow:auto;padding:1.7rem 1.7rem 1.5rem;box-shadow:0 30px 80px -30px rgba(11,26,51,.6);transform:translateY(12px);transition:transform .22s ease}
.rcv-modal.on .rcv-modal__card{transform:none}
.rcv-modal__x{position:absolute;top:.75rem;right:.75rem;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper-2);color:var(--ink-2);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.rcv-modal__x:hover{background:var(--line)}
.rcv-modal__kicker{margin:0 0 .35rem;font-family:var(--font-m);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:500}
.rcv-modal h2{margin:0 0 .5rem;font-size:1.4rem;line-height:1.2;padding-right:2.6rem}
.rcv-modal h2 span{font-family:var(--font-m);font-weight:500;color:var(--blue-ink)}
.rcv-modal__lead{margin:0 0 1.15rem;font-size:.93rem;color:var(--ink-2);line-height:1.55}
.rcv-qform .field{margin-bottom:.85rem}
.rcv-qform .field textarea{min-height:74px}
.rcv-qform__2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.rcv-qform__acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.rcv-qform__acts .btn{flex:1 1 auto}
.rcv-qdone{text-align:center;padding:1rem 0 .4rem}
.rcv-qdone__ic{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto .8rem}
.rcv-qdone p{color:var(--ink-2);margin:.5rem 0 1.1rem;line-height:1.5}
@media (max-width:540px){
  .rcv-qform__2{grid-template-columns:1fr}
  .rcv-modal{align-items:flex-end;padding:0}
  .rcv-modal__card{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;padding:1.3rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));transform:translateY(30px)}
}
/* restored / unsubscribed pages */
.rcv-page{max-width:680px}
.rcv-page .aempty p{color:var(--ink-2)}
.rcv-list{list-style:none;margin:1.3rem 0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.rcv-list li{display:flex;gap:.9rem;align-items:center;padding:.8rem .95rem;border-top:1px solid var(--line-2)}
.rcv-list li:first-child{border-top:0}
.rcv-list img{width:52px;height:52px;object-fit:contain;border-radius:8px;background:var(--paper-2);flex:0 0 auto}
.rcv-list .n{flex:1 1 auto;min-width:0;font-size:.94rem;line-height:1.35}
.rcv-list .n small{display:block;color:var(--ink-faint);font-family:var(--font-m);font-size:.76rem;margin-top:.15rem}
.rcv-list .p{font-weight:600;white-space:nowrap}
.rcv-skipped{background:var(--warn-bg);border-radius:var(--r);padding:.85rem 1rem;font-size:.9rem;line-height:1.5;color:var(--warn);margin-bottom:.5rem}

/* admin-managed announcement bars */
.uannounce{background:var(--steel);color:#fff;text-align:center;padding:9px var(--gutter);font:600 .92rem/1.4 var(--font-h)}
.uannounce--warn{background:#9a6b12}
/* hosted payment page */
.payp{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:900px){.payp{grid-template-columns:minmax(0,1fr) 380px;gap:2.5rem;align-items:start}}
.payp__card{margin-top:1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-1);display:grid;gap:1rem;max-width:560px}
.payp__card .input{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:1rem}
.payp__el{min-height:44px}
.payp__err{color:var(--err);font-size:.9rem;min-height:1.2em}
.payp__btn{width:100%;justify-content:center}
.payp__secure{display:flex;gap:.45rem;align-items:center;color:var(--ink-3);font-size:.85rem;margin:0}
.payp__box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem 1.3rem;box-shadow:var(--sh-1)}
.payp__box h2{font-size:1.05rem;margin:0 0 .8rem}
.payp__items{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.5rem;font-size:.92rem}
.payp__items li{display:flex;justify-content:space-between;gap:.8rem;border-bottom:1px dashed var(--line-2);padding-bottom:.5rem}
.payp__items small{display:block;color:var(--ink-3);font-family:var(--font-m);font-size:.78rem}
.payp__tot{display:flex;justify-content:space-between;gap:.8rem;font-size:.92rem;padding:.25rem 0;color:var(--ink-2)}
.payp__tot small{display:block;color:var(--ink-3);font-size:.78rem}
.payp__tot--due{border-top:2px solid var(--line);margin-top:.5rem;padding-top:.7rem;font:700 1.2rem var(--font-h);color:var(--ink)}
.payp__addr,.payp__help{font-size:.85rem;color:var(--ink-3);margin:.8rem 0 0}

/* footer newsletter */


/* pay page */
.payp-sec{padding-top:clamp(1.6rem,1rem + 2vw,2.8rem)!important}
.payp__main h1{margin:.5rem 0 .7rem;font-size:clamp(2.4rem,1.6rem + 3.6vw,4rem);letter-spacing:-.02em}
.payp__steps{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;margin:1.1rem 0 0;padding:0;font-size:.85rem;color:var(--ink-3)}
.payp__steps li{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem .35rem .4rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}
.payp__steps li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line-2);color:var(--ink-3);font:600 .75rem var(--font-h)}
.payp__steps li.is-on{color:var(--ink);border-color:var(--blue-200)}
.payp__steps li.is-on b{background:var(--blue);color:#fff}
.payp__card{max-width:600px}
.payp__phone{display:flex;gap:1rem;align-items:flex-start}
.payp__phone h2{font-size:1.2rem;margin:0 0 .25rem}
.payp__phone p{margin:0;color:var(--ink-2);font-size:.95rem}
.payp__phone-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--blue-050);color:var(--blue);font-size:1.35rem}
.payp__ref{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.8rem 1rem;border:1px dashed var(--blue-200);border-radius:var(--r);background:var(--blue-050)}
.payp__ref span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-family:var(--font-h);font-weight:600}
.payp__ref b{font:600 1.1rem var(--font-m);color:var(--blue-ink);letter-spacing:.02em}
.payp__copy{margin-left:auto;border:1px solid var(--blue-200);background:#fff;color:var(--blue);border-radius:var(--r-pill);padding:.3rem .9rem;font:600 .85rem var(--font-h);cursor:pointer}
.payp__copy:hover{background:var(--blue-100)}
.payp__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.payp__cta .btn{flex:1 1 220px;justify-content:center}
.payp__alt{background:#fff;border:1px solid var(--line-strong);color:var(--ink)}
.payp__trust{list-style:none;display:flex;gap:.4rem 1.4rem;flex-wrap:wrap;margin:1.3rem 0 0;padding:0;font-size:.88rem;color:var(--ink-2)}
.payp__trust li{display:inline-flex;align-items:center;gap:.45rem}
.payp__trust .i{color:var(--teal-600,var(--blue))}
.payp__tbd{font-weight:600;color:var(--warn)}
.payp__addr{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;padding-top:.8rem;border-top:1px solid var(--line-2)}
.payp__addr a{margin-left:auto;display:inline-flex;gap:.3rem;align-items:center;font-weight:600}
@media(max-width:560px){.payp__cta .btn{flex-basis:100%}.payp__copy{margin-left:0}}

/* checkout: dispatch line, freight delivery type, international duties */
.co-ships{margin-top:.55rem;font-size:.86rem;font-weight:600;color:var(--ok)}
.co-freight{margin:1rem 0 0;padding:1rem 1.1rem;border:1px solid var(--blue-100);border-radius:var(--r);background:var(--blue-050)}
.co-freight legend{padding:0 .3rem;margin-left:-.3rem;font:600 .95rem/1.4 var(--font-h);color:var(--ink)}
.co-freight__opt{display:flex;gap:.7rem;align-items:flex-start;margin-top:.6rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.co-freight__opt:hover{border-color:var(--blue-200)}
.co-freight__opt:has(input:checked){border-color:var(--blue);box-shadow:var(--sh-focus)}
.co-freight__opt input{margin-top:.2rem;accent-color:var(--blue)}
.co-freight__opt span{display:flex;flex-direction:column;gap:.1rem}
.co-freight__opt b{font-weight:600;color:var(--ink)}
.co-freight__opt small{font-size:.82rem;color:var(--ink-3)}
.co-freight__note{margin:.7rem 0 0;font-size:.82rem;color:var(--ink-3)}
.co-intl{margin:1rem 0 0;padding:.8rem 1rem;border-radius:var(--r);background:var(--warn-bg);border:1px solid #ead9b5;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
/* the checkout styles every input as a full-width text field; these are radios */
.co-form .co-freight .co-freight__opt{display:flex;flex-direction:row;margin:.6rem 0 0;font-weight:400}
.co-form .co-freight .co-freight__opt input[type=radio]{flex:none;width:18px;height:18px;min-height:0;margin:.15rem 0 0;padding:0;border:0;box-shadow:none;background:none;appearance:auto;-webkit-appearance:radio}
.co-form .co-freight legend{float:none;width:auto}
/* a <legend> straddles the fieldset border by default — keep the question inside the box */
.co-form .co-freight legend{float:left;width:100%;margin:0 0 .2rem;padding:0;line-height:1.35}
.co-form .co-freight legend + *{clear:both}

/* language menu (partials/lang-switch): a <details> whose summary shows the current language and whose list
   drops down from the top bar, opens upward in the footer, and expands in place in the mobile menu
   (the list rules sit under .langsw so the footer's ul / ul a rules don't reach them) */
.langsw{position:relative;display:inline-block}
.langsw>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 8px 0 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:inherit;font:600 .7rem/1 var(--font-m);letter-spacing:.06em;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.langsw>summary::-webkit-details-marker{display:none}
.langsw>summary:hover,.langsw[open]>summary{background:rgba(255,255,255,.16);color:#fff}
.langsw>summary:focus-visible{outline:2px solid var(--teal-300);outline-offset:2px}
.langsw__cur{display:inline-flex;align-items:center;gap:6px}
.langsw__label,.langsw__cur .langsw__name{display:none}
.langsw__chev{width:11px;height:11px;flex:none;transition:transform var(--dur-2) var(--ease)}
.langsw[open] .langsw__chev{transform:rotate(180deg)}
.langsw__flag{width:18px;height:12px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.langsw .langsw__menu{display:block;position:absolute;top:calc(100% + .5rem);right:0;z-index:90;min-width:216px;margin:0;padding:.35rem;list-style:none;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  transform-origin:top right;animation:langsw-in var(--dur-2) var(--ease)}
@keyframes langsw-in{from{opacity:0;transform:translateY(6px) scale(.985)}}
.langsw .langsw__menu li{margin:0}
.langsw .langsw__menu a{display:flex;align-items:center;gap:.7rem;min-height:42px;padding:.4rem .75rem;border-radius:var(--r-sm);
  color:var(--ink-2);font:500 .92rem/1.2 var(--font-b);letter-spacing:0;text-decoration:none!important}
.langsw .langsw__menu a:hover{background:var(--paper-2);color:var(--ink)}
.langsw .langsw__menu a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.langsw .langsw__menu .langsw__flag{width:20px;height:14px}
.langsw .langsw__menu .langsw__name{flex:1}
.langsw .langsw__menu .langsw__code{font:600 .68rem/1 var(--font-m);letter-spacing:.06em;color:var(--ink-faint)}
.langsw .langsw__menu a.is-on{background:var(--blue-050);color:var(--blue-ink);font-weight:600}
.langsw__check{width:16px;height:16px;flex:none;color:var(--blue)}
/* footer: a light pill with the language's name; the list opens upward */
.langsw--foot>summary{height:40px;padding:0 12px 0 10px;gap:8px;background:var(--paper-3);border-color:var(--line);color:var(--ink);
  font:600 .85rem/1 var(--font-b);letter-spacing:0}
.langsw--foot>summary:hover,.langsw--foot[open]>summary{background:#fff;color:var(--steel);border-color:var(--line-strong)}
.langsw--foot>summary:focus-visible{outline-color:var(--blue)}
.langsw--foot .langsw__cur .langsw__code{display:none}
.langsw--foot .langsw__cur .langsw__name{display:inline}
.langsw--foot .langsw__menu{top:auto;bottom:calc(100% + .5rem);left:0;right:auto;transform-origin:bottom left}
@media (prefers-reduced-motion:reduce){.langsw__menu{animation:none}.langsw__chev{transition:none}}

/* Chinese / Japanese: the brand faces have no CJK glyphs, so name the system CJK fonts right after them
   (Latin letters and numbers stay in Plex Sans / Plex Mono). Tight negative tracking and Latin
   leading crowd ideographs. */
html:lang(zh){--cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC"}
html:lang(ja){--cjk:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo","Noto Sans JP","Noto Sans CJK JP"}
html:lang(zh),html:lang(ja){
  --font-h:"IBM Plex Sans","Plex Sans Fallback",var(--cjk),system-ui,sans-serif;
  --font-b:"IBM Plex Sans","Plex Sans Fallback",var(--cjk),system-ui,sans-serif;
  --font-m:"IBM Plex Mono","Plex Mono Fallback",var(--cjk),ui-monospace,monospace;
  --lh-tight:1.3;--lh-snug:1.4}
html:lang(zh) :is(h1,h2,h3,h4,h5),html:lang(ja) :is(h1,h2,h3,h4,h5){letter-spacing:0}
html:lang(ja){line-break:strict}

/* vehicle make page: hero with a coverage card instead of a stray logo box */
.vhero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:.6rem}
.vhero__text h1{margin:.35rem 0 .8rem;text-wrap:balance}
.vhero__how{margin:.6rem 0 0;color:var(--ink-3);font-size:.98rem}
.vhero__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.vhero__brand{display:flex;align-items:center;gap:.9rem;padding-bottom:1rem;border-bottom:1px solid var(--line-2)}
.vhero__logo{flex:none;width:96px;height:56px;display:grid;place-items:center;padding:6px 10px;background:var(--paper-2);border-radius:var(--r-sm)}
.vhero__logo img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.vhero__make{font:600 1.25rem/1.2 var(--font-h);color:var(--ink)}
.vhero__stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0}
.vhero__stats div{padding:.75rem .85rem;background:var(--paper-2);border-radius:var(--r-sm);display:flex;flex-direction:column-reverse;gap:.25rem}
.vhero__stats dt{font:600 .66rem/1.2 var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.vhero__stats dd{margin:0;font:600 1.3rem/1.1 var(--font-h);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vhero__trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.84rem;color:var(--ink-2)}
.vhero__trust li{display:inline-flex;align-items:center;gap:.35rem}
.vhero__trust svg{width:15px;height:15px;color:var(--ok)}
.vcount{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:1.7rem;padding:0 .5rem;margin-left:.45rem;vertical-align:middle;position:relative;top:-.12em;border-radius:var(--r-pill);background:var(--blue-050);color:var(--blue-700);font:600 .9rem/1 var(--font-m)}
@media (max-width:860px){.vhero{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Slide-in cart (partials/cart-drawer): header cart icon on phones + after every add
   --------------------------------------------------------------------------- */
html.ucart-lock{overflow:hidden}
html.ucart-lock .ua,html.ucart-lock .floaty{display:none!important}   /* Ask UDS and the call buttons never sit over the open cart */
.ucart{position:fixed;inset:0;z-index:400}
.ucart [hidden]{display:none!important}
.ucart__scrim{position:absolute;inset:0;background:rgba(11,26,51,.5);backdrop-filter:blur(2px);opacity:0;transition:opacity .22s ease}
.ucart__panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,90vw);background:var(--paper-2);display:flex;flex-direction:column;
  box-shadow:-24px 0 48px -20px rgba(11,26,51,.5);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px)}
.ucart.is-open .ucart__scrim{opacity:1}
.ucart.is-open .ucart__panel{transform:none}
.ucart.is-busy .ucart__list{opacity:.55;pointer-events:none;transition:opacity .15s}
/* head */
.ucart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 14px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.ucart__title{display:flex;align-items:center;gap:10px;min-width:0}
.ucart__ic{width:36px;height:36px;border-radius:10px;background:var(--blue-050);color:var(--blue);display:grid;place-items:center;font-size:1.1rem;flex:none}
.ucart__head h2{margin:0;font-family:var(--font-h);font-size:1.1rem;font-weight:600;white-space:nowrap}
.ucart__count{font:600 .74rem/1 var(--font-m);color:var(--blue-700);background:var(--blue-100);padding:5px 8px;border-radius:var(--r-pill);white-space:nowrap}
.ucart__x{width:44px;height:44px;border:0;background:none;border-radius:var(--r-sm);display:grid;place-items:center;font-size:1.3rem;color:var(--ink-2);cursor:pointer;flex:none}
.ucart__x:hover{background:var(--paper-3)}
/* free shipping meter */
.ucart__ship{padding:12px 18px 14px;background:var(--paper);border-bottom:1px solid var(--line);display:grid;gap:8px}
.ucart__ship p{margin:0;font-size:.85rem;color:var(--ink-2);line-height:1.35}
.ucart__ship p b{color:var(--ink);font-family:var(--font-m)}
.ucart__bar{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.ucart__bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .4s ease}
.ucart__ship.is-done p{color:var(--ok);font-weight:600}
.ucart__ship.is-done .ucart__bar i{background:var(--ok)}
/* items */
.ucart__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px}
.ucart__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ucart__it{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.ucart__pic{width:68px;height:68px;border-radius:10px;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden}
.ucart__pic img{width:100%;height:100%;object-fit:contain;padding:4px}
.ucart__ph{width:100%;height:100%;background:var(--paper-3)}
.ucart__info{min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:30px}
.ucart__sku{font:600 .72rem/1.2 var(--font-m);color:var(--blue);letter-spacing:.02em}
.ucart__info b{font-size:.86rem;font-weight:500;line-height:1.35;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ucart__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.ucart__qty{display:inline-flex;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px}
.ucart__qty button{width:32px;height:32px;border:0;border-radius:50%;background:none;font-size:1.05rem;line-height:1;color:var(--ink);cursor:pointer}
.ucart__qty button:hover{background:var(--paper)}
.ucart__qty span{min-width:26px;text-align:center;font:600 .9rem/1 var(--font-m);font-variant-numeric:tabular-nums}
.ucart__price{display:grid;justify-items:end;font:600 1rem/1.15 var(--font-m);font-variant-numeric:tabular-nums;color:var(--ink)}
.ucart__price small{font:400 .7rem/1.3 var(--font-b);color:var(--ink-3)}
.ucart__rm{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.ucart__rm:hover{background:var(--err-bg);color:var(--err)}
/* empty */
.ucart__empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:56px 16px;color:var(--ink-2)}
.ucart__empty-ic{width:64px;height:64px;border-radius:50%;background:var(--blue-050);color:var(--blue);display:grid;place-items:center;margin-bottom:6px}
.ucart__empty b{font-family:var(--font-h);font-size:1.05rem;color:var(--ink)}
.ucart__empty p{margin:0 0 12px;font-size:.9rem}
/* footer */
.ucart__foot{background:var(--paper);border-top:1px solid var(--line);padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;box-shadow:0 -10px 24px -18px rgba(11,26,51,.35)}
.ucart__sub{display:flex;justify-content:space-between;align-items:baseline}
.ucart__sub span{font-weight:600;color:var(--ink)}
.ucart__sub b{font:600 1.3rem/1 var(--font-m);font-variant-numeric:tabular-nums}
.ucart__note{margin:-4px 0 2px;font-size:.78rem;color:var(--ink-3)}
.ucart__go{justify-content:center;min-height:50px;font-size:1rem;width:100%}
.ucart__links{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ucart__links a,.ucart__links button{border:0;background:none;padding:6px 2px;font:600 .88rem/1.2 var(--font-b);color:var(--blue);cursor:pointer;text-decoration:none}
.ucart__links button{color:var(--ink-2)}
.ucart :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ucart__panel,.ucart__scrim,.ucart__bar i{transition:none}}

/* alt-part marker: a small tappable tag next to the part number (opens the alternates chooser) */
button.p-alt{border:0;background:var(--warn-bg);color:var(--warn);border-radius:var(--r-pill);padding:2px 8px 2px 6px;gap:4px;
  display:inline-flex;align-items:center;font:600 .72rem/1.2 var(--font-b);cursor:pointer;vertical-align:middle;white-space:nowrap}
button.p-alt .i{font-size:.85rem}
button.p-alt span{display:none}
@media (max-width:760px){
  .ptbl tbody td[data-label="Part #"]{grid-template-columns:auto minmax(0,1fr)}
  .ptbl tbody td[data-label="Part #"] .p-pn{grid-column:2;justify-self:end}
  .ptbl tbody td[data-label="Part #"] .p-alt{grid-column:2;justify-self:end;margin:6px 0 0}
  button.p-alt{padding:5px 10px 5px 8px;font-size:.78rem}
  button.p-alt span{display:inline}
  /* alternates chooser: full width, one readable row per part */
  .alt-pop{left:12px!important;right:12px;width:auto!important;min-width:0;max-width:none}
  .alt-pop .ap-h{display:none}
  .alt-pop .ap-row{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"add pn price" "add note type";row-gap:2px;padding:.7rem .8rem}
  .alt-pop .ap-add{grid-area:add;width:32px;height:32px;align-self:center}
  .alt-pop .ap-pn{grid-area:pn;font-size:.95rem}
  .alt-pop .ap-note{grid-area:note}
  .alt-pop .ap-type{grid-area:type;text-align:right}
  .alt-pop .ap-price{grid-area:price;font-size:.95rem}
}

/* "translated with AI" notice after switching language */
.aitr{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1200;display:flex;align-items:flex-start;gap:10px;width:min(520px,calc(100% - 32px));padding:12px 12px 12px 14px;
  background:var(--ink,#141b28);color:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(10,20,40,.28);font-size:.9rem;line-height:1.45;animation:aitr-in .28s ease-out}
.aitr p{margin:0;flex:1}
.aitr__ic{flex:none;width:20px;height:20px;margin-top:1px;color:#9cc0ff}
.aitr__x{flex:none;width:32px;height:32px;margin:-6px -4px 0 0;border:0;border-radius:8px;background:transparent;color:#cdd6e6;font-size:20px;line-height:1;cursor:pointer}
.aitr__x:hover,.aitr__x:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.aitr.is-out{opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
@keyframes aitr-in{from{opacity:0;transform:translate(-50%,10px)}}
@media (prefers-reduced-motion:reduce){.aitr{animation:none}.aitr.is-out{transition:none}}
@media (max-width:640px){.aitr{bottom:84px}}

/* same-day ship countdown (partials/ship-countdown) */
.shipcd{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;font-size:.88rem;line-height:1.4;color:var(--ink-2)}
.shipcd svg{width:16px;height:16px;flex:none;color:var(--ink-faint)}
.shipcd.is-today{color:var(--ok,#167a3e);font-weight:600}
.shipcd.is-today svg{color:currentColor}
.shipcd--cart{justify-content:center;margin:.75rem 0 0;font-size:.84rem}
.shipcd--ck{margin:0 0 1rem;padding:.65rem .9rem;border-radius:var(--r-md,12px);background:var(--surface-2,#f3f6fb)}

/* checkout: express wallets, card-or-invoice choice (business accounts), Affirm line */
.co-express{border:1px solid var(--line);border-radius:var(--r);background:var(--paper,#fff);padding:1rem 1.1rem;margin:0 0 1rem}
.co-express__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin-bottom:.75rem}
.co-express__h b{font-family:var(--font-h);font-size:1rem}
.co-express__h span{color:var(--ink-faint);font-size:.86rem}
.co-express__terms{font-size:.78rem;color:var(--ink-faint);margin:.6rem 0 0;line-height:1.45}
.co-express__terms a{color:inherit;text-decoration:underline}
.co-express__or{display:flex;align-items:center;gap:.75rem;margin:1rem 0 0;color:var(--ink-faint);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.co-express__or::before,.co-express__or::after{content:"";flex:1;height:1px;background:var(--line)}
.co-paywith{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:0 0 1rem}
@media (max-width:560px){.co-paywith{grid-template-columns:1fr}}
.co-form .co-paywith__opt{display:flex;flex-direction:row;align-items:flex-start;gap:.6rem;border:1.5px solid var(--line-strong,var(--line));border-radius:var(--r-md,12px);padding:.75rem .85rem;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-weight:400}
.co-paywith__opt input{margin-top:.2rem;accent-color:var(--blue)}
.co-paywith__opt b{display:block;font-size:.92rem;color:var(--ink)}
.co-paywith__opt small{display:block;font-size:.8rem;color:var(--ink-faint);line-height:1.4;margin-top:.15rem}
.co-paywith__opt.on{border-color:var(--blue);background:var(--blue-050)}
.co-paywith__opt.is-off{opacity:.7;cursor:not-allowed}
.co-affirm{margin-top:.6rem}
.co-affirm:empty{display:none}
.affirm-msg{min-height:0;margin:.5rem 0 0}
.affirm-msg:empty{display:none}
.affirm-msg--cart{margin:.75rem 0 0}
.co-paywith__opt input[type=radio]{width:18px;height:18px;min-height:0;flex:none;margin:.15rem 0 0;padding:0}
.co-paywith__opt span{flex:1;min-width:0}
/* checkout: saved cards + "save this card" */
.co-saved{display:grid;gap:.55rem;margin:0 0 1rem}
.co-form .co-saved__opt{display:flex;flex-direction:row;align-items:center;gap:.65rem;border:1.5px solid var(--line-strong,var(--line));border-radius:var(--r-md,12px);padding:.7rem .85rem;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-weight:400}
.co-saved__opt input[type=radio]{width:18px;height:18px;min-height:0;flex:none;margin:0;padding:0;accent-color:var(--blue)}
.co-saved__opt svg{width:22px;height:22px;flex:none;color:var(--ink-soft)}
.co-saved__opt span{flex:1;min-width:0}
.co-saved__opt b{display:block;font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums}
.co-saved__opt small{display:block;font-size:.8rem;color:var(--ink-faint)}
.co-saved__opt.on{border-color:var(--blue);background:var(--blue-050)}
.co-form .co-savecard{display:flex;flex-direction:row;align-items:flex-start;gap:.55rem;margin:.8rem 0 0;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:600;font-size:.9rem;color:var(--ink)}
.co-savecard input{width:18px;height:18px;min-height:0;flex:none;margin:.1rem 0 0;padding:0;accent-color:var(--blue)}
.co-savecard small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-faint);margin-top:.1rem}


/* ============================================================================
   GOOGLE RATING BADGE (<x-google-rating>): figures from Admin → Settings → Reviews
   ========================================================================== */
.g-rate{--g-star:#e8a400;display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap;text-decoration:none!important;
  color:var(--ink-2);font-size:.88rem;line-height:1.2}
.g-rate__stars{position:relative;display:inline-block;letter-spacing:.06em;font-size:1rem;line-height:1;color:var(--line-strong)}
.g-rate__stars::before{content:"★★★★★";position:absolute;inset:0;width:var(--g-fill,94%);overflow:hidden;color:var(--g-star);white-space:nowrap}
.g-rate__stars span{visibility:visible}
.g-rate__n{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.g-rate__t{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.g-rate:hover .g-rate__t{text-decoration-color:currentColor}
.g-rate:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
/* on the dark home hero */
.g-rate--dark{color:rgba(255,255,255,.82)}
.g-rate--dark .g-rate__n{color:#fff}
.g-rate--dark .g-rate__stars{color:rgba(255,255,255,.28)}
.g-rate--dark .g-rate__t{text-decoration-color:rgba(255,255,255,.35)}
/* product pages: a quiet card above the guarantees */
.g-rate--card{display:flex;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);margin:.9rem 0 0}
/* checkout trust row */
.g-rate--compact{font-size:.75rem;gap:.3rem;color:inherit}
.g-rate--compact .g-rate__stars{font-size:.8rem}
.n-hero__rating{margin-top:1.1rem}
@media (prefers-reduced-motion:no-preference){.g-rate__t{transition:text-decoration-color .15s ease}}

/* =====================================================================
   HOW-TO-MEASURE DRAWINGS (App\Support\Measure)  —  part line work in ink,
   dimensions in brand blue; a lit callout (.is-on) turns solid, the rest fade.
   ===================================================================== */
.md-svg{display:block;width:100%;height:auto;font-family:var(--font-m);overflow:visible}
.md-part{fill:var(--paper-3);stroke:#1b2433;stroke-width:1.5;stroke-linejoin:round}
.md-outline{fill:none;stroke:#1b2433;stroke-width:1.5;stroke-linejoin:round}
.md-cut{stroke:none}
.md-void{fill:#fff;stroke:none}
.md-hole{fill:#fff;stroke:#1b2433;stroke-width:1.2}
.md-ball{stroke:#4a5568;stroke-width:.6}
.md-line{fill:none;stroke:#1b2433;stroke-width:1.1}
.md-edge{fill:none;stroke:#46536a;stroke-width:.7}
.md-thin{fill:none;stroke:#5c6879;stroke-width:.7}
.md-hid{fill:none;stroke:#5c6879;stroke-width:.8;stroke-dasharray:4.5 2.5}
.md-cl{fill:none;stroke:#8d98aa;stroke-width:.6;stroke-dasharray:14 3 2.5 3}
.md-ph{fill:none;stroke:#8d98aa;stroke-width:.9;stroke-dasharray:12 3 2 3 2 3}
.md-note{fill:var(--ink-3);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.md-dim{color:var(--blue);transition:opacity var(--dur-1) var(--ease-out)}
.md-ext{stroke:currentColor;stroke-width:.6;opacity:.65}
.md-dl{stroke:currentColor;stroke-width:.9;fill:none}
.md-arw{fill:currentColor}
.md-badge-o{fill:#fff;stroke:currentColor;stroke-width:1.4}
.md-badge text{fill:currentColor;font-size:11.5px;font-weight:600}
.md-hi{fill:none;stroke:currentColor;stroke-width:2.6;opacity:0}
.md-dim.is-on .md-hi{opacity:.9}
.md-dim.is-on .md-dl{stroke-width:1.7}
.md-dim.is-on .md-badge-o{fill:currentColor}
.md-dim.is-on .md-badge text{fill:#fff}
.md-svg.md-focus .md-dim{opacity:.13}
.md-svg.md-focus .md-dim.is-on{opacity:1}
@media (max-width:560px){.md-badge-o{r:13px}.md-badge text{font-size:14.5px}}   /* the sheet shrinks to ~330px on phones: keep the letters readable */
/* letter chip used next to a column / spec name */
.md-chip{display:inline-grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;flex:none;
  border:1.3px solid currentColor;font-family:var(--font-m);font-size:.72rem;font-weight:600;line-height:1;letter-spacing:0;
  color:var(--blue);background:#fff;text-transform:none}
/* table header: the letter is a button (tap / keyboard), the whole cell is the hover target */
.th-md{appearance:none;margin:0 0 0 .4rem;padding:0;cursor:help;vertical-align:-1px;
  width:1.55em;height:1.55em;color:#c3d0e6;background:transparent;border-color:rgba(195,208,230,.5)}
.ptbl thead th[data-md]:hover .th-md,.th-md:focus-visible,.th-md[aria-expanded="true"]{color:#fff;background:var(--blue-600);border-color:var(--blue-600)}
.th-md:focus-visible{outline:2px solid var(--teal-300);outline-offset:2px}
.md-pop{position:fixed;z-index:70;left:0;top:0;width:min(470px,calc(100vw - 24px));background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:.7rem .8rem .55rem;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.md-pop.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.md-pop__t{display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;font-family:var(--font-h);font-weight:600;font-size:.9rem;color:var(--ink)}
.md-pop .md-svg .md-dim{opacity:0}
.md-pop .md-svg .md-dim.is-on{opacity:1}
.md-pop .md-svg .md-dim.is-on .md-dl{stroke-width:2}
/* "how to measure" panel above the category table */
.md-panel{margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.md-panel > summary{display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;cursor:pointer;list-style:none;
  font-family:var(--font-h);font-weight:600;font-size:.92rem;color:var(--ink);min-height:44px}
.md-panel > summary::-webkit-details-marker{display:none}
.md-panel > summary .i{color:var(--blue);font-size:1.1rem}
.md-panel > summary::after{content:"";margin-left:auto;width:.5rem;height:.5rem;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-2) var(--ease)}
.md-panel[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.md-panel__body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem 1.5rem;align-items:center;padding:.25rem 1rem 1rem}
@media (max-width:720px){.md-panel__body{grid-template-columns:1fr}}
.md-legend{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.md-legend li{display:flex;align-items:center;gap:.55rem;padding:.35rem .5rem;border-radius:var(--r-xs);font-size:.88rem;color:var(--ink-2);cursor:default}
.md-legend li.is-md{background:var(--blue-050)}
.md-legend li.is-md .md-chip{background:var(--blue);border-color:var(--blue);color:#fff}
.md-note-txt{margin:.5rem 0 0;font-size:.8rem;color:var(--ink-3);line-height:1.5}
/* product page: the drawing above the spec list */
.pdp-md{margin:0 0 1rem;padding:.75rem 1rem .6rem;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pdp-md figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;margin-bottom:.4rem;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
/* the read-out: the dimension under the pointer, with this part's value */
.pdp-md__read{font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.pdp-md.is-reading .pdp-md__read{font-size:.92rem;font-weight:600;color:var(--blue-700)}
.uspecs .k .md-chip{margin-right:.4rem;font-size:.68rem;vertical-align:1px}
.uspecs > div[data-md]{cursor:default;transition:background var(--dur-1)}


/* ============================================================================
   HOME, CENTRED (owner, 2026-11-10): one symmetric column: intro, then the
   vehicle finder under it with its three steps side by side; section heads,
   the ways-to-buy cards, the trust row and the about text centred too.
   ========================================================================== */
.hm-top__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:2.1rem;padding-block:3.5rem 3.25rem}
.hm-intro{display:flex;flex-direction:column;align-items:center;max-width:860px}
.hm-intro h1{max-width:20ch;margin-inline:auto}
.hm-intro > p:not(.hm-intro__tag){margin-inline:auto}
.hm-intro__cta{justify-content:center}
.hm-intro__facts{justify-content:center;align-self:stretch}
.hm-finder{width:100%;max-width:820px;text-align:left}
.hm-finder h2{justify-content:center}
.hm-finder__n{text-align:center}
.hm-finder__next{text-align:center}
@media (min-width:720px){.hm-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}}
.hm-sec .catsec__head{flex-direction:column;align-items:center;text-align:center;gap:.25rem}
.hm-ways a{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;row-gap:.25rem;padding-block:1rem}
.hm-ways .i{grid-row:auto;margin-bottom:.2rem}
.hm-trust li{flex-direction:column;align-items:center;text-align:center;gap:.35rem}
.hm-about{text-align:center}
.hm-about p{margin-inline:auto;max-width:72ch}
/* popular parts fill whole rows: 6 across, 3 + 3 on tablets (the 6th card used to sit alone on a second row) */
@media (min-width:1200px){.hm-sec .pgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1199.98px){.hm-sec .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hm-sec .pcard__foot{flex-wrap:wrap;gap:.15rem .6rem}
.hm-sec .pcard__foot small{white-space:nowrap}

/* category tiles on hover: the photo stays visible (smaller, at the top) with the name and description under it */
@media (hover:hover) and (min-width:561px){
  .ctile__img img{transition:transform var(--dur-2) var(--ease-out)}
  .ctile:hover .ctile__img img,.ctile:focus-visible .ctile__img img{transform:translateY(-22%) scale(.58)}
  .ctile__about{inset:auto 0 0 0;top:auto;height:60%;align-items:flex-start;flex-direction:column;gap:.25rem;padding:.6rem .75rem .7rem;
    background:#fff;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);font-size:.76rem;line-height:1.4;overflow:hidden}
  .ctile__about b{display:block;font-size:.84rem;line-height:1.25;color:var(--ink)}
  .ctile__about span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
/* product drawing on touch screens: the letters are buttons (no double-tap zoom delay, no grey tap flash) */
.pdp-md .md-svg{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pdp-md .md-dim{cursor:pointer;outline:none}
.pdp-md .md-dim:focus-visible .md-badge-o{stroke-width:2.6}

/* ==== AUDIT 2026-11-11 ==== */
/* home on phones: ways to buy and the trust row as 2 x 2 instead of four tall cards each */
@media (max-width:480px){
  .hm-ways,.hm-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .hm-ways a{padding:.8rem .5rem}
  .hm-ways span,.hm-trust span{font-size:.76rem}
  .hm-trust{padding:.8rem 0}
}
/* category tiles on phones: words wrap whole ("Stub & Midshi / p Shaft"); a smaller photo leaves room for "Transmission" */
@media (max-width:560px){
  .ctile{grid-template-columns:44px minmax(0,1fr);column-gap:.5rem;padding:.5rem}
  .ctile__img{width:44px;overflow:hidden}
  .ctile__img img{transform:scale(1.18)}   /* the 4:3 category photos have white margins; fill the small square more */
  .ctile__name{font-size:.8rem;hyphens:manual}
}
/* home component tiles fill whole rows: 20 categories = 4 rows of 5 (6 across left 2 alone on the last row) */
@media (min-width:1200px){.hm-sec .ctiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1199.98px){.hm-sec .ctiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* product page card rows: one full row of 6 (3 + 3 on tablets); phones keep the swipe row with all of them */
@media (min-width:1200px){.ba-also .pgrid,.pdp__rel .pgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1199.98px){.ba-also .pgrid,.pdp__rel .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px){.ba-also .pgrid>:nth-child(n+7),.pdp__rel .pgrid>:nth-child(n+7){display:none}}
/* sidebar part counts: readable on the dark rail (was 4.0:1 at 11px) */
.sb__list small{color:#8b9ab0}
/* photos pinned inside their boxes: tall or wide photos (many PTI shots are far from square) were cropped by
   overflow:hidden or covered text, because a % height does not resolve in these grid cells (owner, 2026-11-11) */
.pdp__stage{--stage-pad:clamp(1rem,.5rem + 2vw,2rem)}
.pdp__stage img{position:absolute;top:var(--stage-pad);left:var(--stage-pad);width:calc(100% - 2*var(--stage-pad));height:calc(100% - 2*var(--stage-pad));max-width:none;max-height:none}
.pdp__sticky-media{position:relative}
.pdp__sticky-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none}
.uhubcard__media{position:relative}
.uhubcard__media img{position:absolute;top:1rem;left:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);max-width:none;max-height:none}
.guide-hub .uhubcard__media img{top:0;left:0;width:100%;height:100%}
/* checkout band in the current look: no kicker, no pill badges, no teal (teal is for in stock / go) */
.ck-trust{gap:.35rem 1.2rem}
.ck-trust span{background:none;border:0;border-radius:0;padding:0;color:#c3cde0}
.ck-trust svg{fill:#8fb0ea}
.ck-steps .st.done{color:#fff}
.ck-steps .st.done i{background:var(--blue);border-color:var(--blue);color:#fff}
.ck-steps .ln.done{background:var(--blue)}
/* wallet buttons: the row is reserved while Stripe loads (the form used to jump ~180px down) */
.co-express.is-loading #express-btns{min-height:48px;border-radius:var(--r);background:var(--paper-2)}
/* delivery date (js/arrival.js): one quiet line under the stock line and in the cart summary */
.arrive{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin:.45rem 0 0;font-size:.88rem;color:var(--ink-2);min-height:1.6rem}
.arrive:empty{display:none}
.arrive__i{width:18px;height:18px;flex:none;color:var(--blue)}
.arrive__t b{color:var(--ink);font-weight:600}
.arrive__t small{display:inline;font-size:.8rem;color:var(--ink-3)}
.arrive.is-loading{color:var(--ink-3)}
.arrive__chg,.arrive__ask,.arrive__loc{padding:0;border:0;background:none;color:var(--blue);font:600 .84rem var(--font-b);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.arrive__f{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.arrive__f input{width:6.5rem;height:36px;padding:0 .6rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:500 .9rem var(--font-m);background:#fff}
.arrive__go{height:36px;padding:0 .8rem;border:1px solid var(--blue);border-radius:var(--r-sm);background:var(--blue);color:#fff;font:600 .84rem var(--font-b);cursor:pointer}
.arrive__err{flex-basis:100%;color:var(--red);font-size:.8rem}
.arrive__err:empty{display:none}
/* cart summary: under the Shipping row it explains (where to, when, with whom) */
.arrive--cart{margin:-.35rem 0 0;font-size:.84rem;line-height:1.45;align-items:flex-start}
.arrive--cart .arrive__i{margin-top:.1rem}
.arrive--cart .arrive__t{flex:1 1 0;min-width:0}
.cartsum [data-shipval].is-loading,.cartsum:has([data-shipval].is-loading) [data-total]{opacity:.45}
/* cart: "Complete the job" (App\Services\CompleteJob) — parts matched on fitment, under the cart lines */
.cjob{margin-top:1.5rem}
.cjob h2{margin:0 0 .7rem;font-size:1.05rem}
.cjob__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:.6rem}
.cjob__card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.7rem .8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.cjob__img{position:relative;display:grid;place-items:center;width:64px;height:64px;color:var(--blue);font-size:1.6rem}
.cjob__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cjob__info{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.cjob__why{margin:0;font-size:.78rem;color:var(--ink-3);line-height:1.35}
.cjob__name{font-size:.86rem;line-height:1.3;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cjob__name b{font-family:var(--font-m);font-weight:600;color:var(--blue)}
.cjob__price{font:600 .92rem var(--font-m);color:var(--ink)}
.cjob__price small{font:500 .74rem var(--font-b);color:var(--ink-3)}
.cjob__add{white-space:nowrap}
.cjob__card--build{grid-column:1/-1;background:var(--paper-2)}
@media (max-width:480px){
  .cjob__list{grid-template-columns:1fr}
  .cjob__card{grid-template-columns:56px minmax(0,1fr);row-gap:.5rem}
  .cjob__img{width:56px;height:56px}
  .cjob__add{grid-column:1/-1;justify-content:center}
}
.pcard__why{display:block;margin-top:.2rem;font-size:.74rem;line-height:1.35;color:var(--ink-3)}
.cartmain{min-width:0}