/* site.media-queries.css: the same rules as site.css with container queries rewritten as media queries, ready for a theme stylesheet. Generated from tools/rwd.css and tools/rwd.d/*.css by tools/inject-css.js. Do not edit here.
   Shared responsive rules for every artboard. Source: tools/rwd.css. Do not edit inside an artboard:
   edit that file and run `node tools/inject-css.js`, which rewrites this block everywhere.

   Why container queries: on the design canvas a phone artboard and a desktop artboard can sit in one
   document, so the layout has to answer to the width of its own frame, not the window. In the theme
   build these become ordinary media queries at the same widths (see docs/08-responsive-system.md).

     phone    up to 699px
     tablet   700px to 1079px
     desktop  1080px and up

   (One extra step inside the tablet range, at 989px, shortens three header links; see below.)

   Inline styles on the elements are the desktop design. The rules below override them, which is why
   they carry !important. */
.tg-m,.tg-t,.tg-tm{display:none!important}
/* canvas only: a board is one long frame, so these classes tell the sheet and the menu how tall the screen is */
.tg-vh-844{--tg-vh:844px}.tg-vh-1180{--tg-vh:1180px}
.tg-noscroll::-webkit-scrollbar{display:none}
.tg-noscroll{scrollbar-width:none}
a{color:#0F5C9A}a:hover{color:#003050}
.tg-press{transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out,box-shadow .14s ease-out}
:where(a,button,input,select,textarea,summary,video):focus-visible{outline:2px solid #003050;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,184,28,.6)}
.tg-ondark :where(a,button,input,select,summary):focus-visible{outline-color:#FFFFFF}
.tg-amber:hover{background:#F2AB0D!important}.tg-amber:active{background:#E19F0C!important}
.tg-ghost:hover{background:rgba(0,48,80,.06)!important}
.tg-tile:hover{border-color:#003050!important;box-shadow:0 6px 18px rgba(2,26,43,.10)}
.tg-navlink:hover{background:rgba(255,255,255,.12)!important}
.tg-rail:hover{background:#E9EDF1}
.tg-rail[aria-pressed="true"]{background:#003050!important;color:#FFFFFF!important}
.tg-model[aria-pressed="true"],.tg-save[aria-pressed="true"],.tg-chip[aria-pressed="true"]{background:#003050!important;color:#FFFFFF!important;border-color:#003050!important}
[aria-expanded="true"]>.tg-chev{transform:rotate(180deg)}
.tg-chev{transition:transform .16s ease-out}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
details[open]>summary .tg-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important} }

/* ---------- state hooks (set by the artboard logic on the canvas and by site.js in the static export) ---------- */
[data-oem="closed"] .tg-mega,[data-oem="closed"] .tg-sheet,[data-oem="closed"] .tg-scrim{display:none!important}
[data-acc="closed"]>.tg-acc-body{display:none}
[data-search="closed"] .tg-suggest{display:none!important}
[data-search="open"] .tg-search-box{border-radius:4px 4px 0 0!important;box-shadow:0 0 0 3px rgba(255,184,28,.55)}
[data-sound="on"] .tg-sound-off,[data-sound="off"] .tg-sound-on{display:none!important}
[data-play="on"] .tg-play-off,[data-play="off"] .tg-play-on{display:none!important}

/* ---------- tablet and phone: up to 1079px ---------- */
@media (max-width:1079px){
  .tg-d{display:none!important}
  .tg-tm{display:block!important}
  .tg-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"copy media" "finder finder"!important;gap:0 32px!important}
  .tg-hero-copy{padding-top:36px!important;padding-bottom:28px!important;align-self:center!important}
  .tg-hero-media{padding-top:36px!important;padding-bottom:28px!important}
  .tg-hero-finder{padding-bottom:36px!important}
  .tg-band{overflow-x:auto;flex-wrap:nowrap!important}
  .tg-band>*{flex:0 0 auto!important}
  .tg-band nav a{padding-left:11px!important;padding-right:11px!important}
  .tg-mega{max-height:calc(var(--tg-vh,100dvh) - 226px);overflow-y:auto;overscroll-behavior:contain}
  .tg-mega-grid{grid-template-columns:minmax(0,1fr)!important}
  .tg-mega-railwrap{border-right:0!important;border-bottom:1px solid #DCE2E8;padding:14px 0 12px!important}
  .tg-mega-find{padding:0 0 10px!important;max-width:420px}
  .tg-mega-rail{flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important}
  .tg-mega-rail>*{flex:0 0 auto!important;width:auto!important;min-height:46px!important;border:1px solid #8796A5!important;border-radius:4px!important;padding:4px 12px!important}
  .tg-mega-rail .tg-rail-sub{display:none!important}
  .tg-mega-main{grid-template-columns:minmax(0,1fr)!important}
  .tg-mega-body{padding:16px 0 18px!important}
  .tg-mega-side{border-left:0!important;border-top:1px solid #DCE2E8;padding:16px 0 20px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;align-items:start}
  .tg-mainbar{gap:12px 16px!important}
  .tg-suggest{max-height:calc(var(--tg-vh,100dvh) - 150px);overflow-y:auto;overscroll-behavior:contain}
  .tg-suggest-side{border-right:0!important;border-bottom:1px solid #E9EDF1}
  .tg-logo img{height:54px!important}
  .tg-acct>a{padding:0 10px!important}
  .tg-types{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .tg-type{min-height:128px!important}
  .tg-steps{grid-template-columns:minmax(0,1fr)!important}
  .tg-sidebar-layout{flex-direction:column!important}
  .tg-sidebar{flex:1 1 auto!important;width:100%!important;max-width:none!important}
  .tg-pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important}
  .tg-co{grid-template-columns:minmax(0,1fr)!important}
  .tg-co-summary{order:-1!important;position:static!important}
}
/* ---------- narrow tablet (portrait), 700px to 989px: three band links use their short name so the whole
   band fits without scrolling. The link keeps its full name for screen readers through aria-label. ---------- */
@media (min-width:700px) and (max-width:989px){
  .tg-band nav a[data-short]{font-size:0!important;letter-spacing:0!important}
  .tg-band nav a[data-short]::before{content:attr(data-short);font-size:17px;letter-spacing:.05em}
  .tg-band nav a[data-short]>span{display:none}
}
/* ---------- tablet only: 700px to 1079px ---------- */
@media (min-width:700px) and (max-width:1079px){
  .tg-t{display:block!important}
  .tg-makes{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .tg-cols4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tg-cols3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .tg-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .tg-footer-wide{grid-column:span 3!important}
  .tg-footer-oem{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(3,auto)!important}
  .tg-crawler-row{padding-left:24px!important;padding-right:24px!important}
  .tg-oemgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tg-finder{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tg-finder>a{grid-column:1/-1}
}
/* ---------- phone: up to 699px ---------- */
@media (max-width:699px){
  .tg-dt{display:none!important}
  .tg-m{display:block!important}
  .tg-gutter{padding-left:16px!important;padding-right:16px!important}
  .tg-mainbar{padding:8px 12px!important;gap:8px!important}
  .tg-logo img{height:44px!important}
  .tg-search{order:9;flex:1 1 100%!important;height:48px!important}
  .tg-search-box{height:48px!important}
  .tg-suggest{max-height:calc(var(--tg-vh,100dvh) - 196px)}
  .tg-acct{gap:0!important}
  .tg-acct>a{padding:0!important;border:0!important}
  .tg-sec{padding-top:40px!important;padding-bottom:40px!important}
  .tg-hero{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"copy" "media" "finder"!important}
  .tg-hero-copy{padding-top:28px!important;padding-bottom:20px!important;gap:16px!important}
  .tg-hero-media{padding-top:0!important;padding-bottom:20px!important}
  .tg-hero-finder{padding-bottom:28px!important}
  .tg-lead{font-size:17px!important}
  .tg-makes{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .tg-make{padding:14px!important;min-height:0!important}
  .tg-make .tg-make-models{display:none!important}
  .tg-cols4,.tg-cols3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .tg-cols2{grid-template-columns:minmax(0,1fr)!important}
  .tg-swipe{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:12px!important;scroll-snap-type:x proximity;scroll-padding-left:16px;scroll-padding-right:16px;margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;scrollbar-width:none}
  .tg-swipe::-webkit-scrollbar{display:none}
  .tg-swipe>*{flex:0 0 78%!important;max-width:320px;scroll-snap-align:start}
  .tg-chips{flex-wrap:nowrap!important;overflow-x:auto;margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;scrollbar-width:none}
  .tg-chips::-webkit-scrollbar{display:none}
  .tg-chips>*{flex:0 0 auto!important}
  .tg-stack{flex-direction:column!important;align-items:stretch!important}
  .tg-full{width:100%!important;max-width:none!important;flex:1 1 auto!important}
  .tg-types{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tg-pdp{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  .tg-row{flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .tg-row-actions{max-width:none!important;flex:1 1 auto!important}
  .tg-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 20px!important}
  .tg-footer-wide{grid-column:1/-1!important}
  .tg-oemgrid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .tg-shopall{border-top:1px solid #E9EDF1;margin-top:10px}
  .tg-eyebrow{font-size:clamp(11px,3.25cqw,13px)!important;letter-spacing:.06em!important;padding:5px 14px!important;white-space:nowrap}
  .tg-finder{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tg-finder>a{grid-column:1/-1}
  .tg-finder-title{font-size:clamp(18px,5.4cqw,22px)!important}
  .tg-page[data-nodock] .tg-dock{display:none!important}
  .tg-h2{margin-bottom:18px!important}
  .tg-dock-pad{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
  .tg-table-cards thead{display:none}
  .tg-table-cards tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 16px!important;border-top:1px solid #DCE2E8}
  .tg-table-cards td{display:block!important;padding:0!important;border:0!important}
}
/* ---------- page: Brand (tools/rwd.d/Brand.css) ---------- */
/* Brand: the make landing page ("CUES compatible parts"). Class prefix br-.
   Phone order: make name, fit answer, model and pipe-size chips (one swipe row each), part-type tiles,
   tread comparison as swipe cards, popular parts as a swipe row. Tablet keeps the comparison as a table. */

/* ---------- tablet and phone ---------- */
@media (max-width:1079px){
  /* breadcrumb links are 44px tall to the touch; the row's own spacing shrinks to match */
  .br-crumb>a,.br-crumb>[aria-current]{display:inline-flex;align-items:center;min-height:44px}

  /* chips: glove-sized, and a pressed look on touch */
  .br-chip{min-width:48px;min-height:44px!important;padding-left:16px!important;padding-right:16px!important;justify-content:center}
  .br-chip:not([aria-current]):active{background:#E9EDF1!important;border-color:#003050!important}

  /* part types: upright tiles (photo on top, name, hint, count pinned to the bottom edge) */
  .br-types{gap:12px!important}
  .br-type{flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:12px 12px 10px!important;box-sizing:border-box}
  .br-type:active{border-color:#003050!important;background:#F4F6F8!important}
  .br-type-img{width:100%!important;height:92px!important;flex:0 0 92px!important}
  .br-type-txt{flex:1 1 auto}
  .br-type-name{font-size:20px!important}
  .br-type-n{margin-top:auto;padding-top:4px;font-size:15px!important}

  /* buttons on the product cards */
  .br-btn{min-height:48px!important;font-size:16px!important}
  .br-btn-cart:active{background:#E19F0C!important}
  .br-btn-quote:active{background:#E9EDF1!important}
}

/* ---------- tablet only ---------- */
@media (min-width:700px) and (max-width:1079px){
  .br-head-in{padding-top:6px!important;padding-bottom:26px!important}
  .br-crumb{margin-bottom:8px!important}
  .br-h1{font-size:28px!important}
  .br-h2{font-size:22px!important}
  /* chips wrap; the pipe-size group follows the last model chip on the same line when it fits, and moves down as one piece when it does not */
  .br-narrow-in{padding-top:14px!important;padding-bottom:14px!important;gap:8px!important}
  .br-chips-models{display:contents!important}
  .br-chips-models>:last-child{margin-right:20px}
  .br-chips-pipe{flex-wrap:nowrap!important}
  .br-types-sec{padding:38px 0 44px!important}
  .br-sec-head{align-items:center!important;margin-bottom:16px!important}
  .br-viewall-top{display:inline-flex!important;align-items:center;min-height:44px}
  .br-type-img{height:104px!important;flex-basis:104px!important}

  /* the comparison stays a table; it is allowed to narrow instead of scrolling sideways */
  .br-cmp-sec{padding:44px 0 48px!important}
  .br-cmp{min-width:0!important}
  .br-cmp th,.br-cmp td{padding-left:12px!important;padding-right:12px!important}
  .br-cmp-head th{white-space:nowrap}
  .br-cmp-name{white-space:nowrap}
  .br-cmp-price{white-space:nowrap}
  .br-cmp-act{padding-left:4px!important}
  .br-cmp-view{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:2px solid #003050;border-radius:4px;background:#FFFFFF;color:#003050!important;text-decoration:none!important;box-sizing:border-box}
  .br-cmp-view:active{background:#E9EDF1}

  /* popular parts: two across, photo beside the text, both buttons full width under them */
  .br-pop-sec{padding:44px 0 56px!important}
  .br-pop{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  .br-card{display:grid!important;grid-template-columns:clamp(124px,32%,168px) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:16px;padding:16px;box-sizing:border-box}
  .br-card-body{display:contents!important}
  .br-card-media{grid-column:1;grid-row:1 / span 4;align-self:center}
  .br-card-img{padding:0!important;aspect-ratio:1 / 1!important}
  .br-card-sku{grid-column:2;grid-row:1;justify-self:start;margin-bottom:8px}
  .br-card-title{grid-column:2;grid-row:2}
  .br-card-fit{grid-column:2;grid-row:3;margin-top:6px}
  .br-card-price{grid-column:2;grid-row:4}
  .br-card-btns{grid-column:1 / -1;grid-row:5;margin-top:14px}
}

/* ---------- phone only ---------- */
@media (max-width:699px){
  /* page head: breadcrumb row, the make name large with "compatible parts" under it, then the fit answer */
  .br-head-in{padding-top:0!important;padding-bottom:14px!important}
  .br-crumb{margin-bottom:0!important;flex-wrap:nowrap!important;font-size:15px!important}
  .br-head-row{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:12px!important}
  .br-head-copy{flex:0 0 auto!important}
  .br-h1{margin:0!important;font-size:15px!important;line-height:1.25!important;color:#114575!important;overflow-wrap:break-word}
  .br-h1-make{display:block;margin-bottom:6px;font-size:30px;line-height:1.05;color:#003050}
  .br-fit{flex:0 0 auto!important;padding:11px 14px 12px!important;gap:10px!important}

  /* model and pipe-size chips: one swipe row each, the label leads the row */
  .br-narrow-in{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important;padding-top:6px!important;padding-bottom:6px!important}
  .br-chips{padding-top:6px!important;padding-bottom:6px!important;padding-right:0!important;overscroll-behavior-x:contain}
  /* a fade that rides the right edge while there are more chips to swipe to, and sits past the last chip at the end */
  .br-chips::after{content:"";flex:0 0 24px;align-self:stretch;position:sticky;right:0;margin-left:-8px;background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 80%);pointer-events:none}
  .br-chips-models::after{flex-basis:56px;background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 82%)}
  /* both labels take the same width so the two rows of chips line up; on a narrower phone the label gives the width back */
  .br-chips-label{min-width:min(86px,calc(100cqw - 304px));margin-right:0!important;font-size:15px!important;box-sizing:border-box}

  /* part types */
  .br-types-sec{padding-top:22px!important;padding-bottom:36px!important}
  .br-sec-head{margin-bottom:12px!important}
  .br-h2{font-size:20px!important;text-wrap:balance}
  .br-types{gap:10px!important}
  .br-type-img{height:84px!important;flex-basis:84px!important}
  .br-type-name{font-size:19px!important}
  .br-type-sub{font-size:15px!important;line-height:1.4}

  /* tread comparison: each table row becomes a card, the cards swipe sideways.
     Every card has the same rows in the same place, so swiping compares like with like. */
  .br-cmp-lead{margin-bottom:16px!important}
  .br-cmp-wrap{overflow:visible!important;border:0!important;border-radius:0!important}
  .br-cmp{display:block!important;width:auto!important;min-width:0!important}
  .br-cmp-head{display:none!important}
  .br-cmp-body{display:flex!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:16px;margin:0 -16px;padding:0 16px 2px}
  .br-cmp-card{flex:0 0 80%;max-width:320px;box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;scroll-snap-align:start;background:#FFFFFF;border:1px solid #DCE2E8!important;border-radius:6px;box-shadow:inset 0 3px 0 #003050;overflow:hidden}
  .br-cmp-card>*{display:block!important;box-sizing:border-box}
  .br-cmp [data-label]::before{content:attr(data-label);display:block;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#566574;white-space:nowrap}
  .br-cmp-name{grid-column:1 / -1;padding:14px 14px 12px!important;font-size:19px;line-height:1.2;border-bottom:1px solid #E9EDF1}
  .br-cmp-img{width:60px!important;height:60px!important;flex:0 0 60px}
  .br-cmp-what{grid-column:1 / -1;padding:12px 14px 14px!important;font-size:15px!important;line-height:1.45}
  .br-cmp-what::before{margin-bottom:3px}
  .br-cmp-sku{grid-column:1 / -1;display:flex!important;align-items:baseline;justify-content:space-between;gap:12px;margin:0 14px;padding:10px 0!important;border-top:1px solid #E9EDF1;border-bottom:1px solid #E9EDF1;font-size:18px!important;color:#0E1B26}
  .br-cmp-price{grid-column:1;align-self:center;padding:10px 0 14px 14px!important;text-align:left!important;font-size:24px!important;line-height:1.15}
  .br-cmp-act{grid-column:2;align-self:center;padding:12px 14px 14px 0!important}
  .br-cmp-view{display:inline-flex!important;align-items:center;justify-content:center;min-width:112px;min-height:48px;padding:0 18px;border:2px solid #003050;border-radius:4px;background:#FFFFFF;color:#003050!important;font-size:16px;text-decoration:none!important;box-sizing:border-box}
  .br-cmp-view:active{background:#E9EDF1}

  /* popular parts: swipe row, cards the same height, price and both buttons on each */
  .br-pop{scroll-padding-left:16px;overscroll-behavior-x:contain}
  .br-pop>.br-card{flex:0 0 clamp(264px,78%,320px)!important}
  .br-card-img{aspect-ratio:auto!important;height:172px!important;padding:14px!important}
  .br-card-fit{font-size:15px!important}
  .br-card-sku{font-size:15px!important}
}
/* ---------- page: Cart (tools/rwd.d/Cart.css) ---------- */
/* Cart (prefix ca-). Below desktop each line item is a card on a grid: photo and details on top, a hairline,
   then the quantity stepper at the left and the line total with Remove at the right. Tablet: items at the
   left, order summary at the right. Phone: one column in the order items, coupon, summary, cross-sells, with
   a checkout bar at the bottom of the screen (.ca-bar, markup in the artboard after the footer). */
@media (max-width:1079px){
  .ca-steps{flex-wrap:nowrap!important;white-space:nowrap}
  .ca-lines{display:flex;flex-direction:column;gap:12px;background:none!important;border:0!important;border-radius:0!important;overflow:visible!important}
  .ca-line{display:grid!important;grid-template-columns:88px minmax(0,1fr) auto;grid-template-areas:"photo info info" "rule rule rule" "qty qty total";gap:12px 16px!important;align-items:start!important;padding:16px 18px!important;background:#FFFFFF;border:1px solid #DCE2E8!important;border-radius:6px}
  .ca-line::after{content:"";grid-area:rule;border-top:1px solid #E9EDF1}
  .ca-photo{grid-area:photo}
  .ca-photo img{width:88px!important;height:88px!important}
  .ca-info{grid-area:info}
  .ca-qty{grid-area:qty;align-self:end;justify-self:start}
  .ca-total{grid-area:total;align-self:end}
  .ca-stepper{height:48px!important}
  .ca-stepper button{width:48px!important;font-size:24px!important}
  .ca-stepper input{width:56px!important;font-size:18px!important;-moz-appearance:textfield;appearance:textfield}
  .ca-stepper input::-webkit-inner-spin-button,.ca-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .ca-remove{min-height:44px!important;padding:0 0 0 16px!important;font-size:15px!important}
  .ca-add{min-height:44px!important;min-width:60px}
  .ca-xs-name{padding:8px 0;margin:-8px 0}
  .ca-po{display:flex!important}
  .ca-tel{padding:13px 0}
  .ca-total-label{text-wrap:balance}
}
@media (min-width:700px) and (max-width:1079px){
  .ca-layout{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(300px,34%,340px);gap:24px!important}
  .ca-summary{max-width:none!important}
  .ca-sum-card{padding:18px!important}
  .ca-notes{padding:16px 18px!important}
  .ca-total-label{font-size:16px!important}
  .ca-zip{flex-wrap:nowrap!important}
  .ca-zip>div{min-width:0}
  .ca-zip label{white-space:nowrap}
  .ca-cross-row{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
}
@media (max-width:699px){
  .ca-main{padding-top:16px!important}
  .ca-steps{gap:6px!important;font-size:14px!important;letter-spacing:.04em!important;margin-bottom:14px!important}
  .ca-step{gap:6px!important;flex:0 0 auto}
  .ca-step-n{width:24px!important;height:24px!important;font-size:13px!important}
  .ca-step-line{flex:1 1 10px;width:auto!important;min-width:6px}
  .ca-h1{font-size:22px!important;margin-bottom:14px!important}
  .ca-layout{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:16px!important}
  .ca-items{display:contents!important}
  .ca-lines{order:1}
  .ca-line{grid-template-columns:80px minmax(0,1fr) auto;gap:12px!important;padding:14px!important}
  .ca-photo img{width:80px!important;height:80px!important}
  .ca-name{font-size:17px!important}
  .ca-fit{font-size:14px!important}
  .ca-each{font-size:15px!important}
  .ca-tools{order:2;gap:0 12px!important}
  .ca-coupon-toggle{display:inline-flex!important}
  [data-coupon="closed"] .ca-coupon{display:none!important}
  .ca-coupon{flex:1 1 100%;flex-wrap:nowrap!important;margin:4px 0}
  .ca-coupon-field{flex:1 1 auto;min-width:0}
  .ca-coupon-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ca-coupon-field input{width:100%!important;height:48px!important}
  .ca-apply{height:48px!important;padding:0 20px!important;font-size:16px!important}
  .ca-summary{order:3;flex:0 0 auto!important}
  .ca-sum-card{padding:16px!important}
  .ca-notes{padding:16px!important}
  .ca-zip input,.ca-zip button{height:48px!important}
  .ca-total-label{font-size:16px!important}
  .ca-total-amt{font-size:24px!important}
  .ca-cross{order:4;margin-top:8px!important}
  .ca-h2{font-size:20px!important}
  .ca-cross-row{scroll-padding:0 16px}
  .ca-xs{align-items:stretch!important}
  .ca-xs img{align-self:center}
  .ca-xs-body{justify-content:space-between}
}
/* ---------- page: Category (tools/rwd.d/Category.css) ---------- */
/* Category (product list): tablet and phone. Class prefix ct-.
   Below desktop the filter sidebar becomes a drawer, the toolbar sticks to the top of the screen and each
   product row is re-laid as a compact card. The markup is the desktop markup; nothing is written twice. */

/* controls that only exist below desktop */
.ct-filterbtn,.ct-step,.ct-count{display:none}
/* the filter drawer is positioned against the page root. This cannot sit inside the container query: a query never styles its own container */
.ct-page{position:relative}

@media (max-width:1079px){
  /* ----- layout: one column, the sidebar wrapper dissolves ----- */
  .ct-layout{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:16px!important;padding-top:0!important}
  .ct-side{display:contents!important}
  .ct-results{flex:0 0 auto!important}
  .ct-note{order:2;padding-bottom:6px!important;font-size:15px!important}
  .ct-note a{display:flex!important;align-items:center;min-height:44px;margin-top:0!important}

  /* ----- filter drawer -----
     .ct-filters is laid over the whole page; .ct-stage sticks to the top of the screen with no height; the scrim
     and the drawer hang from it, one screen tall. (With media queries in the theme this can simply be position:fixed.) */
  .ct-filters{position:absolute;left:0;top:0;right:0;bottom:0;z-index:70;pointer-events:none}
  .ct-stage{position:sticky;top:0;height:0}
  .ct-scrim{pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .18s ease-in,visibility 0s linear .18s}
  .ct-sheet{position:absolute;left:0;top:0;width:min(90cqw,360px);height:var(--tg-vh,100dvh);background:#FFFFFF;box-shadow:8px 0 24px rgba(2,26,43,.35);pointer-events:auto;transform:translateX(-104%);visibility:hidden;transition:transform .18s ease-in,visibility 0s linear .18s}
  /* closed is the resting state; the drawer shows only while the page root says data-filters="open".
     Hidden with visibility, not display, so the ticked boxes still count for the number on the Filter button */
  [data-filters="open"] .ct-scrim{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility 0s}
  [data-filters="open"] .ct-sheet{transform:none;visibility:visible;transition:transform .22s ease-out,visibility 0s}
  .ct-form{display:flex;flex-direction:column;height:100%;margin:0}
  .ct-sheet-head,.ct-sheet-foot{flex:0 0 auto}
  .ct-sheet-body{display:block!important;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .ct-shopping{border-radius:0!important;border-top:1px solid rgba(255,255,255,.16)}
  .ct-shopping select{height:48px!important}
  .ct-make{display:inline-flex;align-items:center;min-height:44px;font-size:15px!important}
  .ct-flabel{font-size:14px!important}
  .ct-group{border:0!important;border-bottom:1px solid #DCE2E8!important;border-radius:0!important;padding:16px 16px 10px!important;gap:0!important;min-width:0}
  .ct-group legend{margin-bottom:4px!important}
  .ct-check{min-height:48px!important;gap:12px!important;font-size:16px;cursor:pointer}
  .ct-check input{flex:0 0 auto;width:22px!important;height:22px!important;margin:0}
  .ct-check span:last-child:not(:only-of-type){font-size:14px!important}
  .ct-range{gap:12px!important;margin:4px 0 6px}
  .ct-range label{font-size:14px!important}
  .ct-range input{height:48px!important}
  .ct-group:last-child{border-bottom:0!important}

  /* number of ticked filters on the Filter button (a CSS counter, so it needs no script; the theme prints it) */
  .ct-layout{counter-reset:ctf}
  .ct-filters input[type="checkbox"]:checked{counter-increment:ctf}
  .ct-count{order:-1}
  .ct-count::after{content:counter(ctf)}
  .ct-layout:has(.ct-filters input[type="checkbox"]:checked) .ct-count{display:inline-flex}
  .ct-layout:has(.ct-filters input[type="checkbox"]:checked) .ct-filterbtn svg{display:none}
  .ct-layout:has(.ct-filters input[type="checkbox"]:checked) .ct-filterbtn{background:#003050!important;color:#FFFFFF!important}

  /* ----- toolbar: sticks to the top of the screen while the list scrolls ----- */
  .ct-filterbtn{display:inline-flex}
  .ct-bar{position:sticky;top:0;z-index:10;margin:0 -24px 20px!important;padding:8px 24px;background:#FFFFFF;border-bottom:1px solid #DCE2E8;box-shadow:0 8px 12px -10px rgba(2,26,43,.28);box-sizing:border-box}

  /* ----- product rows: shared pieces ----- */
  .ct-card{display:grid!important;align-items:start!important}
  .ct-actions{display:contents!important}
  .ct-main,.ct-spec{flex:0 0 auto!important}
  .ct-spec{display:flex!important;flex-wrap:wrap;gap:2px 18px!important;font-size:15px!important}
  .ct-spec dt,.ct-spec dd{display:inline}
  .ct-spec dt{margin-right:6px}
  .ct-price{grid-area:price;align-self:center;flex-direction:row!important;flex-wrap:wrap;align-items:baseline!important;gap:0 10px}
  .ct-amount{font-size:22px!important;line-height:1.2}
  .ct-stock{font-size:14px!important}
  .ct-oos .ct-stock{padding:2px 8px;border-radius:3px;background:#E9EDF1;color:#36454F!important}
  .ct-oos .ct-photo img{opacity:.55}
  .ct-quote{grid-area:quote;align-self:center!important;justify-self:end;min-height:44px!important;padding:0 0 0 12px!important;font-size:15px!important}
  .ct-buy,.ct-viewbtn{grid-area:buy}
  .ct-add,.ct-viewbtn{min-height:48px!important;font-size:16px!important}
  /* quantity: − field + joined into one control, then Add to cart */
  .ct-buy{gap:0!important}
  .ct-step{display:block}
  .ct-step[data-tg-step="-1"]{border-right:0!important;border-radius:4px 0 0 4px}
  .ct-step[data-tg-step="1"]{border-left:0!important;border-radius:0 4px 4px 0}
  .ct-buy input{flex:0 0 48px;width:48px!important;height:48px!important;padding:0!important;border-left-color:#C5CED7!important;border-right-color:#C5CED7!important;border-radius:0!important;font-weight:600;-moz-appearance:textfield;appearance:textfield}
  .ct-buy input::-webkit-outer-spin-button,.ct-buy input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .ct-add{margin-left:8px}
}

/* ---------- tablet: full-width list, each row in three columns (photo, details, price and buy) ---------- */
@media (min-width:700px) and (max-width:1079px){
  .ct-layout{padding-bottom:56px!important}
  .ct-intro{text-wrap:pretty}
  .ct-card{grid-template-columns:84px minmax(0,1fr) 284px;gap:0 20px!important;padding:16px!important}
  .ct-info{display:flex!important;flex-direction:column;gap:8px;min-width:0}
  .ct-right{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"price quote" "buy buy";gap:4px 12px;align-items:center}
  .ct-note{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding:8px 16px!important}
  .ct-note strong{margin-bottom:0!important}
  .ct-note a{margin-left:auto}
}

/* ---------- phone ---------- */
@media (max-width:699px){
  /* page head: breadcrumb, title, who it fits, pipe sizes in one swipe row */
  .ct-head-in{padding-top:2px!important;padding-bottom:10px!important}
  .ct-crumbs{margin-bottom:0!important;gap:0 8px!important}
  .ct-crumbs a,.ct-crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
  .ct-head-row{display:block!important}
  .ct-title{font-size:22px!important;margin-bottom:0!important}
  .ct-sizes{gap:6px!important;padding-top:6px!important;padding-bottom:6px!important}
  .ct-sizes a{padding:0 12px!important}
  .ct-sizes-label{margin-right:2px!important;font-size:15px!important}

  /* toolbar: Filter, Sort, count in one 56px row, edge to edge */
  .ct-bar{flex-wrap:nowrap!important;gap:6px!important;min-height:56px;margin:0 -16px!important;padding:6px 16px}
  .ct-filterbtn{padding:0 12px 0 10px!important}
  .ct-bar-l,.ct-bar-r{display:contents!important}
  .ct-sort{display:flex!important;position:relative;flex:1 1 0;min-width:0;max-width:260px;order:1}
  .ct-sort-label{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:13px!important;letter-spacing:.08em;text-transform:uppercase;color:#566574!important}
  /* iOS Safari ignores padding on a native select, so the text ran under the Sort label: draw the control ourselves */
  .ct-sort-select{-webkit-appearance:none!important;appearance:none!important;width:100%;min-width:0;padding-left:52px!important;padding-right:30px!important;font-size:16px!important;text-overflow:ellipsis;background-color:#FFFFFF!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003050' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 9px center!important;background-size:16px 16px!important}
  .ct-total{order:2;margin-left:auto;padding-left:2px;font-size:15px!important;white-space:nowrap}

  /* product cards, edge to edge */
  .ct-list{margin:0 -16px;padding-top:8px;gap:8px;background:transparent!important;border:0!important;border-radius:0!important}
  .ct-card{grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"photo main main" "spec spec spec" "price price quote" "buy buy buy";gap:0 12px!important;padding:12px 16px 14px!important;background:#FFFFFF;border-top:1px solid #DCE2E8!important;border-bottom:1px solid #DCE2E8}
  .ct-info,.ct-right{display:contents!important}
  .ct-photo{grid-area:photo}
  .ct-photo img{width:96px!important;height:96px!important}
  .ct-main{grid-area:main;gap:5px!important}
  .ct-name{line-height:1.28!important}
  .ct-tags{display:contents!important}
  .ct-pn{order:-1;align-self:flex-start;padding:1px 7px!important;line-height:1.3}
  .ct-fit{align-self:flex-start;padding:3px 8px!important;font-size:14px!important;line-height:1.3}
  .ct-fit svg{flex:0 0 auto;align-self:flex-start;margin-top:3px}
  .ct-spec{grid-area:spec;margin-top:8px!important;line-height:1.35}
  .ct-quote{margin-top:-8px;padding-top:8px!important}
  .ct-buy,.ct-viewbtn{margin-top:8px}

  /* below the list */
  .ct-showing{font-size:15px!important}
  .ct-links{margin-top:20px!important;gap:12px!important}
  .ct-link{line-height:1.4}
  .ct-link span span{font-size:15px!important}
}
/* ---------- page: Checkout (tools/rwd.d/Checkout.css) ---------- */
/* Checkout: reduced header, the form in five numbered steps, the order summary. Class prefix ck-.
   Phone: one-row header (logo, secure label, tap-to-call), the order summary as a bar at the top that
   opens in place (data-summary on the aside), one-column form, radio cards, two payment tiles.
   Tablet: form at the left, summary at the right in a fluid column (300px at 820, 332px at 1024, the same as the cart) that
   stays on screen while the form scrolls; payment choices as two full-width rows.
   State: data-pay="card|po" on the form column picks the payment panel and the Place order label;
   data-summary="open|closed" on the summary only matters on a phone. */

/* ---------- every width ---------- */
/* things that only exist below desktop */
.ck-sumbar,.ck-call-ico,.ck-pay-ico{display:none}
/* payment: both panels and both button labels are in the page, the attribute shows the matching one */
[data-pay="card"] .ck-panel-po,[data-pay="po"] .ck-panel-card,[data-pay="card"] .ck-if-po,[data-pay="po"] .ck-if-card{display:none!important}
/* the pressed look comes from aria-pressed, so the static export (site.js) and the canvas agree */
.ck-pay[aria-pressed="true"]{border-color:#003050!important;background:#F4F6F8!important}
.ck-pay[aria-pressed="false"]{border-color:#8796A5!important;background:#FFFFFF!important}
.ck-pay[aria-pressed="true"]>.ck-pay-dot{border:6px solid #003050!important}
.ck-pay[aria-pressed="false"]>.ck-pay-dot{border:2px solid #8796A5!important}
@keyframes ck-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none} }

/* ---------- tablet and phone ---------- */
@media (max-width:1079px){
  /* full-size targets for the small links: the Cart step, links inside a sentence, the footer */
  .ck-steps-link{min-height:44px!important}
  .ck-tap{padding-top:14px;padding-bottom:14px}
  .ck-foot{align-items:center}
  .ck-foot-links a{display:inline-flex;align-items:center;min-height:44px}

  /* fields: two fixed columns. Everything spans both unless it is marked as a half */
  .ck-grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ck-grid2>*{grid-column:1 / -1}
  .ck-grid2>.ck-half{grid-column:auto}
  .ck-check input{width:24px!important;height:24px!important;flex:0 0 24px!important;margin:0!important}
  .ck-form select{padding-left:10px!important}
  .ck-check{gap:12px!important}
  .ck-hint{text-wrap:pretty}

  /* shipping methods: radio cards. The selected look follows the real radio */
  .ck-ship{box-sizing:border-box;min-height:56px!important;padding:8px 14px!important;border:1px solid #8796A5!important;cursor:pointer}
  .ck-ship:has(input:checked){border-color:#003050!important;box-shadow:inset 0 0 0 1px #003050;background:#F4F6F8}
  .ck-ship:active{background:#E9EDF1}
  .ck-ship input{flex:0 0 22px;width:22px!important;height:22px!important;margin:0}
  .ck-ship-rate{flex:0 0 auto;white-space:nowrap}

  /* payment choices and the Place order button: a pressed look on touch */
  .ck-pay:active{background:#E9EDF1!important}
  .ck-place:active{background:#E19F0C!important}
  .ck-link{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}

  /* order summary: item name on its own line, part number and price under it */
  .ck-item{display:grid!important;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:12px!important;row-gap:2px!important;align-items:start!important}
  .ck-item img{grid-row:1 / span 2;width:52px!important;height:52px!important}
  .ck-item-text{display:contents}
  .ck-item-name{grid-column:2 / 4;font-size:15px}
  .ck-item-sku{grid-column:2;align-self:baseline}
  .ck-item-price{grid-column:3;align-self:baseline;font-size:15px}
  .ck-sumedit{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0;font-size:15px!important}
  .ck-coupon{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin:-10px 0 -12px}
}

/* ---------- tablet only ---------- */
@media (min-width:700px) and (max-width:1079px){
  .ck-call{padding:10px 0 10px 16px;margin:-10px 0}
  .ck-foot{padding-top:8px!important;padding-bottom:8px!important}
  .ck-main{padding-bottom:56px!important}
  .ck-cols{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(300px,34%,340px);gap:24px!important;align-items:start!important}
  .ck-form{gap:16px!important}
  .ck-card{padding:20px!important}
  /* the summary stays beside the form; if a long order makes it taller than the screen it scrolls inside */
  .ck-summary{position:sticky;top:16px;max-height:calc(var(--tg-vh,100dvh) - 32px);overflow-y:auto;scrollbar-width:thin}
  .ck-sumcard{padding:18px!important;gap:14px!important}
  .ck-sumtotal{font-size:22px!important}
  .ck-fit{padding:12px 14px!important}
  /* payment: two full-width rows like the shipping cards (side by side the names wrap at 1024) */
  .ck-pays{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:1fr;gap:8px!important}
  .ck-pay{min-height:72px!important;align-items:center!important;gap:10px!important;padding:12px!important}
  .ck-pay-dot{margin-top:0!important}
  .ck-pay-text{text-wrap:balance}
  .ck-fit span{text-wrap:pretty}
  .ck-fine{text-wrap:balance}
}

/* ---------- phone ---------- */
@media (max-width:699px){
  /* header: one compact row. Logo, secure label on two short lines, the number as a tap-to-call button */
  .ck-head{flex-wrap:nowrap!important;gap:10px!important;padding:8px 16px!important}
  .ck-logo{flex:0 0 auto}
  .ck-logo img{height:44px!important}
  .ck-secure{flex:0 1 auto;min-width:18px;gap:0 6px!important;font-size:13px!important;letter-spacing:.06em!important;line-height:1.15!important}
  .ck-secure svg{flex:0 0 18px;width:18px;height:18px;margin:6px 0}
  .ck-secure span{width:min-content}
  /* on the narrowest phones the words drop to a second line that is cut off, leaving the lock */
  .ck-secure{flex-wrap:wrap;height:30px;overflow:hidden;align-content:flex-start}
  .ck-help{flex:0 0 auto}
  .ck-help-note{display:none!important}
  .ck-call{display:inline-flex!important;align-items:center;gap:7px;box-sizing:border-box;min-height:44px;padding:0 12px;border:1px solid #003050;border-radius:4px;font-size:16px!important;white-space:nowrap}
  .ck-call:active{background:#E9EDF1}
  .ck-call-ico{display:block;flex:0 0 16px}

  /* page: one column. The two-column wrapper dissolves so the summary can move above the heading */
  .ck-main{display:flex!important;flex-direction:column!important;padding:0 16px 28px!important}
  .ck-cols{display:contents!important}
  .ck-form{flex:0 0 auto!important;gap:12px!important}

  /* order summary: a full-width bar under the header; the summary itself opens below it */
  .ck-summary{order:-1!important;flex:0 0 auto!important;max-width:none!important;margin:0 -16px!important;gap:0!important;background:#FFFFFF;border-bottom:1px solid #C5CED7}
  .ck-sumbar{display:flex!important}
  .ck-sumbar:active{background:#F4F6F8!important}
  .ck-sumbar:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px rgba(255,184,28,.6)}
  .ck-summary[data-summary="closed"] .ck-sumbody{display:none!important}
  .ck-summary[data-summary="open"] .ck-sumbody{animation:ck-reveal .18s ease-out}
  .ck-sumbody{gap:12px!important;padding:4px 16px 16px;border-top:1px solid #E9EDF1}
  .ck-sumcard{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:14px 12px!important;padding:12px 0 0!important;border:0!important;border-radius:0!important}
  .ck-sumcard>*{grid-column:1 / -1}
  .ck-sumhead{display:contents!important}
  .ck-sumtitle{display:none!important}
  .ck-sumedit{grid-column:1;order:8;margin:-8px 0 -10px}
  .ck-coupon{grid-column:2!important;order:9;justify-self:end;align-self:auto;margin:-8px 0 -10px}
  .ck-item-name{font-size:16px}
  .ck-item-price{font-size:16px}
  .ck-sumtotal{font-size:24px!important}

  /* progress, heading, intro */
  .ck-steps{flex-wrap:nowrap!important;gap:6px!important;margin:10px 0 8px!important;font-size:14px!important;letter-spacing:.04em!important}
  .ck-steps li{gap:6px!important;white-space:nowrap}
  .ck-steps-link{gap:6px!important}
  .ck-steps-line{flex:1 1 10px;width:auto!important;min-width:8px;max-width:40px}
  .ck-steps-dot{width:24px!important;height:24px!important;font-size:13px!important}
  .ck-h1{font-size:22px!important;margin-bottom:6px!important}
  .ck-intro{font-size:15px!important;margin-bottom:16px!important}

  /* the form: 16px text, 52px fields, labels a size up */
  .ck-card{padding:16px!important}
  .ck-h2{font-size:20px!important;margin-bottom:12px!important}
  .ck-h2-tight{margin-bottom:4px!important}
  .ck-form label[for]{font-size:15px!important}
  .ck-form input:not([type="checkbox"]):not([type="radio"]),.ck-form select{height:52px!important}
  .ck-hint{font-size:14px!important;line-height:1.4}
  .ck-grid2,.ck-pair{column-gap:12px!important}
  .ck-check{min-height:48px!important}

  /* shipping: taller cards */
  .ck-ship{min-height:60px!important}
  .ck-ship input{flex-basis:24px;width:24px!important;height:24px!important}

  /* payment: two equal tiles side by side. Radio dot and icon on top, short name, one-line note */
  .ck-pays{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .ck-pay{position:relative;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;min-height:104px!important;padding:12px!important}
  .ck-pay-dot{flex:0 0 22px!important;width:22px!important;height:22px!important;margin-top:0!important}
  .ck-pay-ico{display:block;position:absolute;top:10px;right:12px;color:#566574}
  .ck-pay[aria-pressed="true"]>.ck-pay-ico{color:#003050}
  .ck-pay-text{display:flex;flex-direction:column;gap:1px}
  .ck-pay-text strong{line-height:1.2}
  .ck-panel{margin-top:12px!important;padding:14px!important}
  .ck-panel p{text-wrap:pretty}
  .ck-panel>p:first-child{text-wrap:balance}

  /* place order */
  .ck-place{min-height:56px!important;font-size:18px!important}

  /* footer */
  .ck-foot{flex-direction:column;align-items:stretch;gap:4px!important;padding:16px 16px 20px!important;font-size:14px}
  .ck-foot>span:first-child{text-wrap:pretty}
  .ck-foot-links{gap:0 20px!important}
  .ck-foot-links a{font-size:14px}
}
/* ---------- page: Confirmation (tools/rwd.d/Confirmation.css) ---------- */
/* Confirmation (prefix cf-). Below desktop the order facts become receipt rows (label left, value right).
   Tablet: one two-column grid for the whole page: facts beside "what happens next", order details full
   width, then the address cards and the account and help cards in pairs. Phone: one column, the banner and
   the order facts on the first screen, actions as full-width buttons. */
@media (max-width:1079px){
  .cf-steps{flex-wrap:nowrap!important;white-space:nowrap}
  .cf-h1{text-wrap:balance}
  .cf-lead{overflow-wrap:anywhere}
  .cf-facts{display:flex!important;flex-direction:column}
  .cf-fact{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;box-sizing:border-box;padding:8px 20px!important;border-right:0!important}
  .cf-fact:last-child{border-bottom:0!important}
  .cf-fact dt{flex:0 0 auto;font-size:14px!important}
  .cf-fact dd{margin:0!important;min-width:0;text-align:right;font-size:17px!important;line-height:1.3;overflow-wrap:anywhere}
  .cf-fact:first-child dd{font-size:20px!important;color:#003050}
  .cf-next-list{grid-template-columns:minmax(0,1fr)!important}
  .cf-policy{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px}
}
@media (min-width:700px) and (max-width:1079px){
  .cf-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .cf-steps{grid-column:1/-1;margin-bottom:4px!important}
  .cf-banner{grid-column:1/-1;flex-direction:column;flex-wrap:nowrap!important;align-items:flex-start!important;gap:18px!important;padding:26px 28px!important}
  .cf-banner-copy{flex:0 0 auto!important}
  .cf-actions{padding-left:70px}
  .cf-facts{margin:0!important}
  .cf-layout,.cf-col{display:contents!important}
  .cf-order,.cf-addr,.cf-aside{grid-column:1/-1}
  .cf-aside{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px!important}
}
@media (max-width:699px){
  .cf-main{padding-top:16px!important}
  .cf-steps{gap:6px!important;font-size:14px!important;letter-spacing:.04em!important;margin-bottom:14px!important}
  .cf-step{gap:6px!important;flex:0 0 auto}
  .cf-step-n{width:24px!important;height:24px!important;font-size:13px!important}
  .cf-step-n svg{width:13px;height:13px}
  .cf-step-line{flex:1 1 10px;width:auto!important;min-width:6px}
  .cf-banner{padding:18px 16px!important;gap:16px!important}
  .cf-banner-copy{flex:1 1 100%!important;gap:12px!important}
  .cf-check{flex-basis:40px!important;height:40px!important}
  .cf-check svg{width:22px;height:22px}
  .cf-h1{font-size:20px!important;line-height:1.2!important}
  .cf-lead{font-size:16px!important}
  .cf-actions{flex:1 1 100%!important;flex-direction:column;flex-wrap:nowrap!important}
  .cf-facts{margin-top:12px!important}
  .cf-fact{padding:6px 16px!important}
  .cf-layout{margin-top:12px!important;gap:12px!important}
  .cf-col{gap:12px!important}
  .cf-card{padding:16px!important}
  .cf-h2{font-size:20px!important}
  .cf-order-h{padding:14px 16px!important}
  .cf-item{display:grid!important;grid-template-columns:56px minmax(0,1fr) auto;grid-template-rows:1fr auto auto 1fr;grid-template-areas:"img . ." "img name name" "img sub price" "img . .";gap:0 12px!important;align-items:start!important;padding:14px 16px!important}
  .cf-item img{grid-area:img;width:56px!important;height:56px!important}
  .cf-item-text{display:contents}
  .cf-item-name{grid-area:name;line-height:1.3}
  .cf-item-sub{grid-area:sub;align-self:end;margin-top:3px;font-size:15px!important}
  .cf-item-price{grid-area:price;align-self:end;font-size:17px!important}
  .cf-totals{padding:14px 16px!important}
  .cf-addr{gap:12px!important}
  .cf-aside{gap:12px!important}
}
/* ---------- page: Contact (tools/rwd.d/Contact.css) ---------- */
/* Contact. Class prefix cn-.
   Phone order: phone number as the headline with Call and Text buttons, the email address, the message form
   in one column, then the direct lines as tappable cards, quick answers and the EU store.
   Tablet: Call and Text sit under the number on the right of the page head; form and direct lines side by side. */

/* ---------- tablet and phone ---------- */
@media (max-width:1079px){
  /* small links get a 44px touch area without moving anything */
  .cn-crumb a{display:inline-block;padding:12px 10px 12px 0;margin:-12px -10px -12px 0}
  .cn-privacy a{display:inline-block;padding:14px 0;margin:-14px 0}
  .cn-num{display:block;padding:6px 0}
  .cn-call{gap:0!important}
  .cn-acts{margin-top:8px!important}

  /* Call and Text: pressed look on touch (the amber one uses tg-amber) */
  .cn-act-text:hover{background:rgba(255,255,255,.1)}
  .cn-act-text:active{background:rgba(255,255,255,.2)}
  .cn-mail:active{background:rgba(255,255,255,.14)}

  .cn-privacy{font-size:15px!important}

  /* direct lines: one card per line. Where a line has a link, the link is stretched over the whole card */
  .cn-lines{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;gap:10px!important}
  .cn-line{position:relative;align-items:center!important;min-height:68px;padding:12px 16px;box-sizing:border-box;background:#FFFFFF;border:1px solid #DCE2E8;border-radius:6px}
  .cn-line>svg{margin-top:0!important}
  .cn-line-link{padding-right:44px}
  .cn-line-link::before{content:"";position:absolute;right:21px;top:50%;width:8px;height:8px;margin-top:-5px;border-top:2.5px solid #0F5C9A;border-right:2.5px solid #0F5C9A;border-radius:1px;transform:rotate(45deg)}
  .cn-line-a::after{content:"";position:absolute;inset:0;border-radius:6px}
  .cn-line-link:hover{border-color:#8796A5}
  .cn-line-link:active{border-color:#003050;background:#F4F6F8}
  .cn-line-a:focus-visible{outline:0;box-shadow:none}
  .cn-line-a:focus-visible::after{outline:2px solid #003050;outline-offset:2px;box-shadow:0 0 0 4px rgba(255,184,28,.6)}
  .cn-line-email{font-size:17px!important;overflow-wrap:anywhere}

  /* quick answers: taller rows */
  .cn-quick{padding:18px 16px 4px!important}
  .cn-q{min-height:52px!important}
  .cn-q>svg{flex:0 0 16px}
  .cn-q:active{color:#0F5C9A!important}

  /* EU card: the number can be tapped, the store link is a full row */
  .cn-eu{padding:18px 16px 10px!important;gap:4px!important}
  .cn-eu-tel{display:inline-block;padding:13px 0;margin:-13px 0;color:#FFFFFF!important;font-weight:700;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap}
  .cn-eu-link{display:flex;align-items:center;min-height:44px;margin-top:0!important;text-underline-offset:3px}
}

/* ---------- tablet only ---------- */
@media (min-width:700px) and (max-width:1079px){
  /* page head: title and lead on the left, number with Call and Text on the right */
  .cn-head{padding-top:16px!important;padding-bottom:32px!important}
  .cn-crumb{margin-bottom:20px!important}
  .cn-head-row{flex-wrap:nowrap!important;gap:32px!important}
  .cn-head-copy{flex:1 1 0!important}
  .cn-h1{font-size:26px!important}
  .cn-call{flex:0 0 auto!important}
  .cn-num{font-size:30px!important}
  .cn-act{min-height:52px!important}

  /* form beside the direct lines: 428px + 320px at 820, 632px + 320px at 1024 (the fields go two-up there) */
  .cn-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 320px;gap:24px!important;padding-top:28px!important;padding-bottom:56px!important}
  .cn-form{padding:24px!important}
  /* two-up fields: if one label wraps, the two inputs still line up */
  .cn-field{justify-content:flex-end}
}

/* ---------- phone ---------- */
@media (max-width:699px){
  /* page head: everything needed to reach a person on the first screen */
  .cn-head{padding-top:14px!important;padding-bottom:20px!important}
  .cn-crumb{margin-bottom:12px!important}
  .cn-h1{font-size:22px!important;margin-bottom:8px!important}
  .cn-head-row{gap:14px!important}
  .cn-call{flex:1 1 100%!important}
  .cn-call-label{font-size:14px!important}
  .cn-num{font-size:32px!important}

  /* form: one column, glove-sized fields, full-width send button */
  .cn-layout{padding-top:20px!important;gap:20px!important}
  .cn-form{flex-basis:100%!important;padding:20px 16px!important;box-sizing:border-box}
  .cn-h2{font-size:24px!important}
  .cn-form-intro{margin-bottom:16px!important}
  .cn-field label{font-size:15px!important}
  .cn-field input,.cn-field select{height:52px!important}
  .cn-field textarea{min-height:168px}
  .cn-send-row{flex-direction:column;align-items:stretch!important;gap:12px!important}
  .cn-send{width:100%;min-height:56px!important;font-size:18px!important}
  .cn-privacy{text-align:center}
  .cn-aside{flex-basis:100%!important}
}
/* ---------- page: Main (tools/rwd.d/Main.css) ---------- */
/* Home (Main.dc.html). Prefix hm-. Inline styles are the desktop design; these rules only apply below 1080px. */

/* ---------- tablet and phone ---------- */
@media (max-width:1079px){
  .hm-h2,.hm-prod-title,.hm-prod-meta{text-wrap:balance}
  .hm-quote-by{text-wrap:pretty}
  .hm-more{margin-top:16px}
  .hm-fleet-link{display:inline-flex!important;align-items:center;min-height:44px;margin-top:0!important;align-self:flex-start}
  .hm-fleet-item{border-top:1px solid rgba(255,255,255,.24)}
  /* swipe rows stop with the card on the page gutter, not on the screen edge */
  .hm-prods,.hm-quotes{scroll-padding-left:16px;scroll-padding-right:16px}
}

/* ---------- tablet only: 700px to 1079px ---------- */
@media (min-width:700px) and (max-width:1079px){
  /* section headings: the same size on a real tablet (where the inline clamp gives 22px) and on a canvas board */
  .hm-h2{font-size:22px!important}
  .hm-sec{padding-top:56px!important;padding-bottom:52px!important}

  /* hero polish: the eyebrow stays on one line beside the video */
  .hm-hero-eyebrow{font-size:13px!important;letter-spacing:.08em!important;padding:6px 16px!important}

  /* trust strip: one row of four */
  .hm-trust{grid-template-columns:repeat(4,auto)!important;justify-content:space-between!important;gap:8px 16px!important}

  /* shop by OEM: 3 columns (tg-makes), every row the same height */
  .hm-makes{grid-auto-rows:1fr}
  .hm-make{min-height:112px!important}
  .hm-make-name{font-size:26px!important}
  .hm-oem-lead{max-width:none!important}

  /* part types: 3 columns of wide tiles, photo left */
  .hm-types{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .hm-type{flex-direction:row!important;align-items:stretch}
  .hm-type-img{width:38%!important;flex:0 0 38%;max-width:128px;height:auto!important;aspect-ratio:1/1!important;align-self:center;padding:8px!important}
  .hm-type-txt{flex:1 1 auto;min-width:0;justify-content:center;border-top:0!important;border-left:1px solid #E9EDF1;padding:12px 12px 12px 14px!important}
  .hm-type-name{font-size:19px!important;line-height:1.12}

  /* how it works: photo beside the steps, photo runs to the screen edge */
  .hm-how{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;gap:0 36px!important}
  .hm-how-img{min-height:0!important;margin-left:-24px}
  .hm-how-photo{object-position:66% 50%}
  .hm-how-body{padding:48px 0!important;gap:22px!important}

  /* popular products: 2 columns, photo beside the details */
  .hm-prods{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .hm-prod{flex-direction:row!important}
  .hm-prod-media{flex:0 0 36%;display:flex!important;align-items:center;min-width:0}
  .hm-prod-img{aspect-ratio:1/1!important;padding:8px!important}
  .hm-prod-body{min-width:0;border-top:0!important;border-left:1px solid #E9EDF1;padding:14px 14px 14px!important}
  .hm-prod-title{font-size:16px!important}
  /* the two buttons sit side by side when the card is wide enough, and stack when it is not (small tablets) */
  .hm-prod-btns{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))!important}
  .hm-prod-btns button{padding:0 2px!important}

  /* testimonials: 3 across */
  .hm-quotes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .hm-quote{padding:20px 20px 18px!important;gap:14px!important}
  .hm-quote-text{font-size:16px!important}

  /* beyond the crawler: 3 across, photo above the text */
  .hm-beyond{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .hm-bey{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  .hm-bey-img{width:96px!important;height:96px!important;flex:0 0 96px!important}
  .hm-bey-name{font-size:21px!important;line-height:1.15}

  /* city and fleet: heading across, the two ways to buy side by side */
  .hm-fleet{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 40px!important;padding-top:48px!important;padding-bottom:44px!important}
  .hm-fleet-head{grid-column:1/-1}
  .hm-fleet-item{padding-top:18px}
}

/* ---------- phone: up to 699px ---------- */
@media (max-width:699px){
  /* section headings: 20px at 390 wide, easing down on narrower phones so none runs past two lines */
  .hm-h2{font-size:clamp(17px,5.13cqw,20px)!important;line-height:1.2!important}
  .hm-eyebrow{font-size:14px!important;letter-spacing:.12em!important;margin-bottom:6px!important}
  .hm-head{gap:8px!important}
  .hm-morelink{display:flex!important;width:100%}

  /* trust strip: 2 by 2 */
  .hm-trust{grid-template-columns:minmax(0,auto) minmax(0,auto)!important;justify-content:start!important;gap:8px 22px!important;padding-top:12px!important;padding-bottom:12px!important;font-size:14px!important}
  .hm-trust li{gap:8px!important}
  .hm-trust svg{width:18px;height:18px;flex:0 0 18px}

  /* shop by OEM: 2 columns of compact tiles, name and part count (tg-make hides the model list) */
  .hm-oem{padding-top:32px!important;padding-bottom:36px!important}
  .hm-make{padding:12px 12px 10px 14px!important;gap:8px!important;min-height:72px!important}
  .hm-make-name{font-size:22px!important}
  .hm-make-foot{font-size:15px!important}

  /* part types: 2 columns of compact tiles, photo left. Sizes ease down on narrow phones */
  .hm-types{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .hm-type{flex-direction:row!important;align-items:center;gap:8px;min-height:76px;padding:8px 8px 8px 6px;box-sizing:border-box}
  .hm-type-img{width:clamp(46px,15cqw,60px)!important;height:clamp(46px,15cqw,60px)!important;flex:0 0 auto;aspect-ratio:auto!important;padding:0!important}
  .hm-type-txt{min-width:0;border-top:0!important;padding:0!important;gap:2px!important}
  .hm-type-name{font-size:clamp(15px,4.4cqw,17px)!important;line-height:1.1}
  .hm-type-desc{display:none!important}
  .hm-type-count{font-size:14px!important}

  /* how it works: short photo strip across the screen, then the steps */
  .hm-how-img{min-height:0!important;height:200px;margin-left:-16px;margin-right:-16px}
  .hm-how-body{padding:28px 0 36px!important;gap:20px!important}
  .hm-steps{gap:16px!important}
  .hm-steps li{gap:14px!important}
  .hm-step-title{font-size:17px!important}
  .hm-how-cta{gap:10px!important}
  .hm-how-btn{flex:1 1 auto;padding:0 12px!important;white-space:nowrap}

  /* popular products: swipe row (tg-swipe), shorter photo, 48px buttons */
  .hm-prod-img{aspect-ratio:16/10!important;padding:12px!important}
  .hm-prod-body{padding:12px 14px 14px!important;gap:6px!important}
  .hm-prod-title{font-size:16px!important}
  .hm-prod-meta{font-size:15px!important}
  .hm-prod-btns button{min-height:48px!important;padding:0 4px!important}

  /* testimonials: swipe row, wider cards so the quote reads comfortably */
  .hm-quotes>.hm-quote{box-sizing:border-box;flex:0 0 90%!important;max-width:340px;padding:20px 20px 18px!important;gap:14px!important}
  .hm-quote-text{font-size:17px!important;line-height:1.45!important}

  /* beyond the crawler: three compact rows */
  .hm-beyond{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .hm-bey{gap:14px!important;padding:12px 14px 12px 12px!important}
  .hm-bey-img{width:76px!important;height:76px!important;flex:0 0 76px!important}
  .hm-bey-name{font-size:20px!important;line-height:1.15}
  .hm-bey-desc{font-size:15px!important;line-height:1.4}

  /* city and fleet: heading, then the two ways to buy with a rule between */
  .hm-fleet{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding-top:36px!important;padding-bottom:28px!important}
  .hm-fleet-item{margin-top:18px;padding-top:16px;gap:4px!important}

  /* newsletter: field and button full width */
  .hm-news{padding-top:32px!important;padding-bottom:32px!important;gap:16px!important}
  .hm-news-copy,.hm-news-form{flex:1 1 100%!important}
  .hm-news-form{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:12px!important}
  .hm-news-field{flex:0 0 auto!important}
  .hm-news-field label{font-size:14px!important}
  .hm-news-btn{width:100%}
}
/* ---------- page: Product (tools/rwd.d/Product.css) ---------- */
/* full-set buttons: the pressed look follows aria-pressed at every width (same values as the inline desktop styles) */
.pd-set[aria-pressed="true"]{border:2px solid #003050!important;background:#003050!important;color:#FFFFFF!important}
.pd-set[aria-pressed="false"]{border:1px solid #8796A5!important;background:#FFFFFF!important;color:#0E1B26!important}
/* Product page (Product.dc.html). Class prefix pd-.
   Phone: title, part number and rating first, then a swipe gallery, the fit line directly above the price,
   a buy bar that stays at the bottom of the screen, and long sections that open with a tap.
   Tablet: gallery beside the title and buy card, everything below in one column. */

/* ----- pieces that exist only on a phone (hidden elsewhere by tg-m) ----- */
.pd-shot-ph{height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:16px;border:2px dashed #8796A5;border-radius:6px;text-align:center;font-size:14px;line-height:1.35;color:#36454F}
.pd-acc-h{margin:0;font:inherit}
.pd-acc-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 16px;box-sizing:border-box;border:0;background:transparent;color:#003050;font:inherit;text-align:left;cursor:pointer}
.pd-acc-btn:focus-visible{outline-offset:-4px}
.pd-acc-t{flex:1 1 auto;min-width:0;font-family:PIRULEN,'Barlow Condensed',sans-serif;font-weight:400;font-size:18px;line-height:1.2;text-transform:uppercase}
.pd-acc-sub{display:flex;align-items:center;gap:5px;margin-top:5px;font-family:Barlow,'Segoe UI',system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.3;text-transform:none;color:#0E1B26}
.pd-acc-btn>.tg-chev{flex:0 0 auto}
.pd-bar-in{display:flex;align-items:center;gap:8px;min-height:64px;box-sizing:border-box;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:#FFFFFF;border-top:1px solid #C5CED7;box-shadow:0 -6px 16px rgba(2,26,43,.12);color:#0E1B26}
.pd-bar-price{flex:0 0 auto;min-width:88px;display:flex;flex-direction:column;gap:3px;line-height:1.1}
.pd-bar-amt{font-size:14px;color:#566574;white-space:nowrap}
.pd-bar-amt strong{font-size:22px;font-weight:700;color:#003050}
.pd-bar-stock{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#17794A}
.pd-bar-call{flex:0 0 48px;width:48px;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid #003050;border-radius:4px;background:#FFFFFF;color:#003050}
.pd-bar-cart{flex:1 1 auto;min-width:0;height:48px;box-sizing:border-box;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:4px;background:#FFB81C;color:#0E1B26;font-weight:700;font-size:clamp(15px,4.4cqw,17px);white-space:nowrap;text-decoration:none}
.pd-bar-cart:hover{color:#0E1B26}
/* phone gallery: the thumbnail outline follows the photo in view. Scroll-driven, no script; browsers without
   scroll timelines simply keep the first thumbnail outlined. */
@keyframes pd-thumb-1{0%,24%{border-color:#003050} 26%,100%{border-color:#C5CED7} }
@keyframes pd-thumb-2{0%,24%{border-color:#8796A5} 26%,74%{border-color:#003050} 76%,100%{border-color:#8796A5} }
@keyframes pd-thumb-3{0%,74%{border-color:#8796A5} 76%,100%{border-color:#003050} }

/* ----- tablet and phone ----- */
@media (max-width:1079px){
  .pd-crumbs{padding-top:6px!important}
  .pd-crumbs a{display:inline-flex;align-items:center;min-height:44px}
  /* the buy column dissolves into the section grid so its parts can be placed one by one */
  .pd-top{display:grid!important;align-items:start!important;padding-top:8px!important}
  .pd-info{display:contents!important}
  .pd-copy{width:44px!important;height:44px!important}
  .pd-rating{min-height:44px!important;white-space:nowrap}
  /* fit line: tick at the left, text runs on, "Change crawler" follows the text instead of squeezing it */
  .pd-fit{display:block!important;position:relative;padding:12px 14px 12px 48px!important}
  .pd-fit-ic{position:absolute;left:14px;top:13px;margin:0!important}
  .pd-fit-txt{display:inline}
  .pd-fit-change{display:inline;margin-left:2px;padding:13px 0;font-size:15px!important}
  /* full-set buttons: name over price, so two always sit side by side */
  .pd-stepper{height:52px!important}
  .pd-set{display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:52px!important;padding:0 14px!important;line-height:1.15}
  .pd-set-p{font-size:14px;font-weight:500}
  /* text links get a taller touch area without moving the text */
  .pd-assure a,.pd-fits a{padding:13px 0}
  .pd-fits-note a{padding:14px 0}
}

/* ----- tablet only ----- */
@media (min-width:700px) and (max-width:1079px){
  /* left: gallery, then the reassurance list. right: title, summary, fit line, buy card.
     Row 4 is the flexible one: the photo frame stretches so both columns end level. */
  .pd-top{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;grid-template-rows:auto auto auto 1fr auto;gap:16px 28px!important;padding-bottom:44px!important}
  .pd-gallery{grid-column:1;grid-row:1 / span 4;align-self:stretch}
  .pd-shots{flex:1 1 auto}
  .pd-head{grid-column:2;grid-row:1}
  .pd-short{grid-column:2;grid-row:2}
  .pd-fit{grid-column:2;grid-row:3}
  .pd-buy{grid-column:2;grid-row:4 / span 2}
  .pd-assure{grid-column:1;grid-row:5;grid-template-columns:minmax(0,1fr)!important}
  .pd-title{font-size:clamp(20px,2.7cqw,22px)!important}
  .pd-meta{gap:6px 12px!important}
  .pd-sku>span:first-child{padding:0 8px!important}
  /* quantity and full sets always share one row: the set buttons take what is left */
  .pd-opts{flex-wrap:nowrap!important;gap:12px!important}
  .pd-step{width:44px!important}
  .pd-qty-in{width:52px!important}
  .pd-setsg{flex:1 1 0;min-width:0}
  .pd-sets{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-set{padding:0 4px!important}
  .pd-thumbs{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))!important}
  .pd-cta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pd-fits{min-width:0!important}
  .pd-fits thead th:last-child{white-space:nowrap}
  .pd-fits tbody th,.pd-fits tbody td{padding-top:15px!important;padding-bottom:15px!important}
  .pd-acc-specs,.pd-desc{max-width:720px!important}
  .pd-revs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pd-rev:last-child:nth-child(odd){grid-column:1 / -1}
  .pd-related{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ----- phone only ----- */
@media (max-width:699px){
  .pd-crumbs{padding-top:0!important}
  .pd-crumbs nav{flex-wrap:nowrap!important;gap:6px!important;white-space:nowrap;overflow:hidden}

  /* order on a phone: title block, photos, fit line, buy card, summary, reassurance */
  .pd-top{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;padding-top:0!important;padding-bottom:28px!important}
  .pd-head{order:1}
  .pd-gallery{order:2;gap:8px!important}
  .pd-fit{order:3;padding:10px 12px 10px 46px!important}
  .pd-fit-ic{left:12px;top:11px}
  .pd-buy{order:4}
  .pd-short{order:5}
  .pd-assure{order:6;gap:12px!important}
  .pd-title{font-size:20px!important;margin-bottom:8px!important}
  .pd-meta{gap:2px 12px!important}
  .pd-sku>span:first-child{padding:0 8px!important}

  /* gallery: one photo per view, swipe sideways */
  .pd-shots{padding:0!important;justify-content:flex-start!important;align-items:stretch!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .pd-shot{flex:0 0 100%!important;width:100%!important;max-width:none!important;height:236px!important;aspect-ratio:auto!important;box-sizing:border-box;padding:12px;scroll-snap-align:start;scroll-snap-stop:always}
  .pd-thumbs{display:flex!important;gap:8px!important}
  @supports (animation-timeline:scroll()){
    .pd-gallery{timeline-scope:--pd-shots}
    .pd-shots{scroll-timeline:--pd-shots x}
    .pd-thumb{animation:linear both;animation-timeline:--pd-shots}
    .pd-thumb:nth-child(1){animation-name:pd-thumb-1}
    .pd-thumb:nth-child(2){animation-name:pd-thumb-2}
    .pd-thumb:nth-child(3){animation-name:pd-thumb-3}
  }
  .pd-thumb{height:52px!important;aspect-ratio:auto!important;box-sizing:border-box}
  button.pd-thumb{flex:0 0 52px;padding:3px!important}
  button.pd-thumb img{width:100%!important;height:100%!important}
  .pd-thumb-ph{flex:1 1 0;min-width:0;padding:4px 8px!important;font-size:12px!important;line-height:1.25!important}

  /* buy card */
  .pd-buy{padding:16px!important;gap:14px!important}
  .pd-price{font-size:34px!important}
  .pd-opts{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:12px!important}
  .pd-step{flex:0 0 56px;width:56px!important;font-size:26px!important}
  .pd-qty-in{flex:1 1 auto;min-width:0;width:auto!important;font-size:20px!important}
  .pd-sets{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-cta{grid-template-columns:minmax(0,1fr)!important}
  .pd-quote{min-height:52px!important}
  .pd-zip-in,.pd-zip-btn{height:48px!important}

  /* sections that open with a tap */
  .pd-acc{display:flow-root;background:#FFFFFF!important;border-top:1px solid #DCE2E8!important;border-bottom:0!important;padding:0!important}
  .pd-acc-reviews{border-bottom:1px solid #DCE2E8!important}
  .pd-ds{padding:0!important}
  .pd-ds-in{display:block!important;padding:0!important}
  [data-fits="closed"] .pd-acc-body,[data-desc="closed"] .pd-acc-body,[data-specs="closed"] .pd-acc-body,[data-reviews="closed"] .pd-acc-body{display:none!important}
  .pd-acc-body{padding-bottom:24px!important}

  /* what it fits: each make is a stacked row */
  .pd-fits-intro{margin-bottom:14px!important;font-size:15px}
  .pd-fits-wrap{overflow:hidden!important}
  .pd-fits{display:block!important;min-width:0!important}
  .pd-fits thead{display:none!important}
  .pd-fits tbody{display:block}
  .pd-fits tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:12px 14px}
  .pd-fits tr:first-child{border-top:0!important}
  .pd-fits th,.pd-fits td{display:block;padding:0!important}
  .pd-fits th{grid-column:1 / -1;font-size:17px}
  .pd-fits td:nth-child(2){grid-column:1 / -1;color:#36454F}
  .pd-fits td:nth-child(3){grid-column:1;margin-top:4px}
  .pd-fits td:nth-child(4){grid-column:2;white-space:nowrap}
  .pd-fits-note{font-size:15px!important}

  /* description and specifications */
  .pd-desc{padding:0 16px 24px!important;max-width:none!important;font-size:16px!important;line-height:1.55!important}
  .pd-specs{width:calc(100% - 32px)!important;margin:0 16px 24px;padding:0!important;border:0!important;background:transparent!important;font-size:16px!important}
  .pd-specs th{width:40%!important;padding:12px 12px 12px 0!important;background:transparent!important;font-size:15px;vertical-align:top}
  .pd-specs td{padding:12px 0!important;vertical-align:top}
  .pd-specs tr:first-child th,.pd-specs tr:first-child td{border-top:1px solid #DCE2E8}

  /* reviews */
  .pd-rev-head{display:block!important;margin-bottom:14px!important}
  .pd-rev-sum>span{display:none!important} /* the score and count are in the section header on a phone */
  .pd-rev-write{flex:1 1 100%;min-height:48px!important}
  .pd-revs{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .pd-rev{padding:16px!important}
  .pd-rev p:last-child{font-size:15px!important}

  /* more for this pipe size: a row to swipe */
  .pd-more{padding:32px 0 36px!important}
  .pd-related{scroll-padding-left:16px;scroll-padding-right:16px} /* without this, scroll snap pulls the first card to the screen edge */
  .pd-h2{font-size:20px!important;margin-bottom:14px!important}
}
/* ---------- page: Subpage (tools/rwd.d/Subpage.css) ---------- */
/* Subpage: the content page template (About, FAQ, policies). Class prefix sp-.
   Phone: compact page head, then the section navigation as one swipe row of chips that stays at the top of
   the screen, then the article in one column at 17px.
   Tablet: the navigation is a sidebar when it fits beside the article (landscape) and one swipe row above a
   centred article column when it does not (portrait). Nothing switches on a page width: the layout wraps on
   its own and the navigation lays itself out from the room it is given. */

/* ---------- tablet and phone ---------- */
@media (max-width:1079px){
  /* the breadcrumb link gets a 44px touch area without moving anything */
  .sp-crumb a{display:inline-block;padding:12px 10px 12px 0;margin:-12px -10px -12px 0}
  .sp-navlink:active{background:#E9EDF1}
  /* where the browser supports it, open the swipe row with the current page's link in view */
  .sp-navlink[aria-current="page"]{scroll-initial-target:nearest}
  .sp-nav,.sp-navlist{scroll-padding-left:120px}
  /* text added later by the content editor must never push the page sideways */
  .sp-article img,.sp-article video,.sp-article iframe{max-width:100%}
  .sp-article table{display:block;max-width:100%;overflow-x:auto;border:1px solid #DCE2E8;border-radius:6px;background:#FFFFFF}
}

/* ---------- tablet only ---------- */
@media (min-width:700px) and (max-width:1079px){
  .sp-head{padding-top:16px!important;padding-bottom:32px!important}
  .sp-crumb{margin-bottom:20px!important}
  .sp-h1{font-size:28px!important}
  .sp-lead{font-size:19px!important}
  .sp-layout{gap:20px 40px!important;padding-top:28px!important;padding-bottom:56px!important}

  /* the navigation card: 220px beside the article when the two fit on one line, otherwise the full row.
     It stays on screen either way; the shadow is a strip of page colour that hides text passing above it.
     On a short screen (a phone held sideways) the sidebar scrolls inside itself instead of being cut off */
  .sp-nav{flex:1 0 220px!important;position:sticky;top:12px;z-index:10;box-sizing:border-box;padding:8px!important;overflow-x:auto;scrollbar-width:none;box-shadow:0 -12px 0 #F4F6F8;max-height:calc(var(--tg-vh,100dvh) - 24px);scroll-padding-top:48px}
  .sp-nav::-webkit-scrollbar{display:none}
  /* in a narrow card (under 400px) every item takes a full line: a list. In a wide card the list is as wide
     as its items, so it is one row that swipes inside the card */
  .sp-navlist{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px;width:max-content;min-width:100%;max-width:clamp(100%,(100% - 400px)*999,9999px)}
  .sp-navlist>*{flex:0 1 auto;box-sizing:border-box;min-width:clamp(0px,(400px - 100%)*999,100%)}
  .sp-navlabel{margin-top:0!important;border-top:0!important;padding:10px 12px 6px!important}
  .sp-navlabel~.sp-navlabel{padding-top:16px!important}
  .sp-navlink{padding:6px 12px!important;border-radius:4px;line-height:1.35}

  .sp-article{max-width:700px!important;margin-left:auto;margin-right:auto}
  .sp-article h2,.sp-article [id]{scroll-margin-top:96px}
  .sp-facts{grid-template-columns:repeat(4,auto)!important}
  .sp-facts>div{padding:14px 16px!important}
  .sp-facts dd{font-size:20px!important;white-space:nowrap}
}

/* ---------- phone ---------- */
@media (max-width:699px){
  .sp-head{padding-top:14px!important;padding-bottom:22px!important}
  .sp-crumb{margin-bottom:12px!important}
  .sp-h1{font-size:22px!important;margin-bottom:10px!important}
  .sp-layout{display:block!important;padding-top:0!important}

  /* section navigation: a 52px bar of chips, edge to edge, stuck to the top of the screen
     (tg-chips on the list gives the single swipe row and the bleed into the gutters) */
  .sp-nav{position:sticky;top:0;z-index:10;max-width:none!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important}
  .sp-navlist{display:flex;align-items:center;gap:8px;height:52px;box-sizing:border-box;background:#FFFFFF;border-bottom:1px solid #DCE2E8;overscroll-behavior-x:contain}
  .sp-navlabel{display:flex;align-items:center;height:28px;margin:0!important;padding:0 2px 0 0!important;border-top:0!important;font-size:12px!important;white-space:nowrap}
  .sp-navlabel~.sp-navlabel{margin-left:6px!important;padding-left:14px!important;border-left:1px solid #C5CED7}
  .sp-navlink{position:relative;box-sizing:border-box;min-height:40px!important;padding:0 14px!important;border:1px solid #8796A5;border-radius:4px;font-size:15px;font-weight:600;white-space:nowrap}
  .sp-navlink[aria-current="page"]{border-color:#003050}
  .sp-navlink::after{content:"";position:absolute;inset:-5px -4px}

  /* article */
  .sp-article{margin-top:20px;font-size:17px!important;line-height:1.6!important;gap:18px!important}
  .sp-article h2{margin-top:12px!important;font-size:20px!important}
  .sp-article h2,.sp-article [id]{scroll-margin-top:68px}
  .sp-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:2px!important}
  .sp-facts>div{padding:12px 14px!important}
  .sp-facts>div:nth-child(2n){border-right:0!important}
  .sp-facts>div:nth-child(n+3){border-top:1px solid #E9EDF1}
  .sp-facts dd{font-size:19px!important}
  .sp-article>figure{margin-top:4px!important;margin-bottom:4px!important}
  .sp-article blockquote{margin:4px 0!important;padding:18px!important;font-size:19px!important;line-height:1.4!important}
  .sp-big{font-size:19px!important;line-height:1.5}
  .sp-cta{margin-top:8px!important;padding:20px 18px!important}
  .sp-cta-acts{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:1 1 100%}
  .sp-cta-acts>a{min-height:52px!important;padding:0 10px!important}
}