/* CMT Cross Machine Tool theme. Loads last; overrides the upstream dark chrome on every page. */
:root{
  --black:#2b2b2b;      /* ink (kept as var name so legacy rules still resolve) */
  --panel:#ffffff;
  --panel2:#f1f3f6;
  --white:#222222;      /* legacy "text" var */
  --muted:#49515b;
  --bronze:#a81f33;     /* accent: emblem crimson (legacy var name kept so upstream rules resolve) */
  --bronze2:#c9283f;
  --line:#d3d8df;
  --max:1240px;
  --cmt-bg:#e8eaee;
  --cmt-surface:#ffffff;
  --cmt-ink:#222222;
  --cmt-muted:#49515b;
  --cmt-line:#d3d8df;
  --cmt-accent:#a81f33;        /* iris crimson, sampled from the emblem */
  --cmt-accent-hover:#8c1829;
  --cmt-accent-tint:#fbeef0;
  --cmt-accent-ink:#ffffff;
  --cmt-steel:#4a4a4a;
  --cmt-accent-on-dark:#e8536a;   /* crimson, lifted for the dark header */
}
html{background:var(--cmt-bg)}
body{background:var(--cmt-bg)!important;color:var(--cmt-ink)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--cmt-ink)}
h1,h2,h3{font-family:Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmt-shell{width:min(var(--max),calc(100% - 40px));margin:auto}
/* buttons */
.button,button.button{background:var(--cmt-accent)!important;border:1px solid var(--cmt-accent)!important;color:var(--cmt-accent-ink)!important;border-radius:4px;font-weight:600;text-shadow:none;box-shadow:none}
.button.secondary{background:transparent!important;color:var(--cmt-ink)!important;border-color:var(--cmt-steel)!important}
.button:hover{background:var(--cmt-accent-hover)!important;border-color:var(--cmt-accent-hover)!important}
.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--cmt-accent);outline-offset:2px}
/* header */
.cmt-header{background:var(--cmt-surface);border-bottom:1px solid var(--cmt-line);position:sticky;top:0;z-index:40}
.cmt-bar{background:#2b2b2b;color:#fff}
.cmt-bar-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;min-height:78px}
.cmt-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.cmt-emblem,.cmt-mark{flex:none;border-radius:50%;display:block}
/* Static first-paint mark in the pre-hydration header. Sized to match the
   chrome-injected emblem so swapping them causes no layout shift. */
.cmt-mark{width:68px;height:68px}
@media(max-width:560px){.cmt-mark{width:52px;height:52px}}
.cmt-wordmark{display:flex;flex-direction:column;line-height:1;font-weight:800;font-size:1.35rem;letter-spacing:.04em}
.cmt-wordmark{flex-direction:row;gap:.35em;align-items:baseline}
.cmt-wordmark em{font-style:normal;font-weight:500;color:#b5b5b5;letter-spacing:.02em}
/* The search form anchors the suggestion list. */
.cmt-search{position:relative}
.cmt-search input{width:100%;max-width:420px;height:38px;border:1px solid #4a4a4a;background:#383838;color:#fff;border-radius:4px;padding:0 12px;font:inherit}
.cmt-search input::placeholder{color:#9a9a9a}
.cmt-utility{display:flex;align-items:center;gap:18px}
.cmt-utility a{color:#fff;text-decoration:none;font-size:.92rem}
.cmt-cart-count{display:inline-block;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:var(--cmt-accent);color:#fff;font-size:.75rem;font-weight:700;padding:0 6px;margin-left:4px}
.cmt-menu-toggle{display:none;align-items:center;justify-content:center;background:none;border:0;padding:0;color:#fff;cursor:pointer;border-radius:4px}
.cmt-menu-toggle-icon{display:flex;flex-direction:column;justify-content:center;gap:6px;width:26px;height:22px}
.cmt-menu-toggle-icon i{display:block;width:26px;height:2.5px;background:#fff;border-radius:2px}
.cmt-menu-toggle[aria-expanded="true"] .cmt-menu-toggle-icon i:nth-child(2){opacity:0}
.cmt-nav-row{background:var(--cmt-surface)}
.cmt-nav-inner{display:flex;align-items:center;gap:16px;min-height:48px;flex-wrap:wrap}
.cmt-nav-group{display:flex;align-items:center;gap:4px;white-space:nowrap}
.cmt-nav-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cmt-muted);margin-right:8px}
.cmt-nav-link{padding:6px 10px;border-radius:4px;text-decoration:none;font-size:.92rem;font-weight:500;color:var(--cmt-ink)}
.cmt-nav-link:hover,.cmt-nav-link:focus-visible{background:var(--panel2)}
.cmt-nav-link[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--cmt-accent)}
.cmt-nav-platforms{margin-left:12px;padding-left:16px;border-left:1px solid var(--cmt-line)}
.cmt-nav-platform{border:1px solid var(--cmt-line);font-size:.85rem;padding:4px 10px}
.cmt-nav-company{margin-left:auto}
.cmt-nav-quiet{color:var(--cmt-muted);font-weight:400}
/* The phone drawer. A panel down the left, 84% of the screen at most, over a
   dimmed page: the page behind it stops scrolling and the panel scrolls on its
   own, so a menu longer than the screen is still a menu. Inside it, the same
   shelves as the desktop row, each with its lines folded under a caret. */
.cmt-drawer{display:none}
.cmt-drawer-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.55)}
.cmt-drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(84vw,340px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 28px;background:var(--cmt-surface);color:var(--cmt-ink);box-shadow:12px 0 40px rgba(0,0,0,.28);animation:cmt-drawer-in .22s ease-out}
@keyframes cmt-drawer-in{from{transform:translateX(-28px);opacity:.5}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.cmt-drawer-panel{animation:none}}
.cmt-drawer-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;min-height:56px;margin:0 -16px 6px;padding:0 6px 0 16px;background:var(--cmt-surface);border-bottom:1px solid var(--cmt-line)}
.cmt-drawer-title{font-size:.85rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cmt-drawer-close{width:44px;height:44px;border:0;border-radius:4px;background:none;color:var(--cmt-ink);font-size:1.7rem;line-height:1;cursor:pointer}
.cmt-drawer-group{padding:10px 0 6px;border-top:1px solid var(--cmt-line)}
.cmt-drawer-group h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cmt-muted);margin:0 0 4px;font-weight:600}
.cmt-drawer-link{display:block;padding:10px 0;text-decoration:none;font-size:1.02rem;color:var(--cmt-ink)}
.cmt-drawer-link[aria-current="page"],.cmt-drawer-link[aria-current="true"],.cmt-drawer-sublink[aria-current="page"]{color:var(--cmt-accent);font-weight:600}
.cmt-drawer-fold-row{display:flex;align-items:center;gap:4px}
.cmt-drawer-fold-row .cmt-drawer-link{flex:1 1 auto;min-width:0}
.cmt-drawer-fold-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:4px;background:var(--panel2);color:var(--cmt-ink);cursor:pointer}
.cmt-drawer-fold-toggle .cmt-nav-caret{width:14px;height:9px;transition:transform .15s ease}
.cmt-drawer-fold.is-open .cmt-drawer-fold-toggle{background:var(--cmt-accent-tint);color:var(--cmt-accent)}
.cmt-drawer-fold.is-open .cmt-nav-caret{transform:rotate(180deg)}
.cmt-drawer-fold-list{display:grid;margin:0 0 8px;padding:2px 0 4px 14px;border-left:2px solid var(--cmt-accent)}
.cmt-drawer-fold-list[hidden]{display:none}
.cmt-drawer-sublink{display:block;padding:9px 0;text-decoration:none;font-size:.95rem;color:var(--cmt-ink)}
.cmt-drawer-sublink:first-child{font-weight:600}
.cmt-drawer-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 8px}
.cmt-drawer-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--cmt-line);border-radius:999px;text-decoration:none;color:var(--cmt-ink);font-size:.9rem}
.cmt-drawer-search{display:flex;gap:8px;padding:6px 0 10px}
html.cmt-drawer-open{overflow:hidden}
.cmt-ship-bar-copy-short{display:none}
.cmt-drawer-search input{flex:1;min-width:0;height:42px;border:1px solid var(--cmt-line);border-radius:4px;padding:0 12px;font:inherit;background:var(--cmt-surface);color:var(--cmt-ink)}
.cmt-drawer-search button{flex:none;height:42px;padding:0 16px;border:0;border-radius:4px;background:var(--cmt-accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:900px){
  /* The search column is hidden below 900px, so the bar is brand + utility.
     An `auto` grid track sizes to max-content, so the brand refused to shrink
     and pushed the menu button ~14px past the shell on every page, giving the
     whole storefront a horizontal scrollbar on a phone. minmax(0,1fr) lets the
     brand column shrink instead. */
  .cmt-bar-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .cmt-utility{flex:none}
  .cmt-wordmark{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmt-search{display:none}
  .cmt-utility a:not(.cmt-cart){display:none}
  .cmt-menu-toggle{display:flex}
  .cmt-nav-row{display:none}
  .cmt-drawer:not([hidden]){display:block;position:fixed;inset:0;z-index:80}
}
/* footer */
.cmt-footer{background:#2b2b2b;color:#cfcfcf;margin-top:48px;padding:40px 0 24px}
.cmt-footer a{color:#e8e8e8;text-decoration:none;display:block;padding:3px 0;font-size:.92rem}
.cmt-footer h3{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-weight:600}
.cmt-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.cmt-footer-brand{display:flex;gap:14px;align-items:flex-start}
.cmt-footer-brand div{display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.cmt-footer-brand strong{color:#fff}
.cmt-footer-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #444;margin-top:28px;padding-top:16px;font-size:.8rem;color:#9a9a9a}
@media(max-width:760px){.cmt-footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
/* Grid and flex children default to min-width:auto, so a long unbreakable
   string cannot shrink its column - it widens the grid instead. The footer's
   contact address (support@cmttac.com) is 28 characters with no
   break opportunity, which pushed the whole page wider than a phone viewport
   and gave every storefront page a horizontal scrollbar. */
.cmt-footer-grid > *{min-width:0}
.cmt-footer a,.cmt-footer-brand div{overflow-wrap:anywhere}
.cmt-bar-inner > *,.cmt-brand,.cmt-wordmark{min-width:0}
@media(max-width:560px){.cmt-footer-grid{grid-template-columns:1fr;gap:20px}}
/* legacy surfaces on light theme. The static header is replaced by the one
   cmt-chrome.js builds after parsing; hiding it with display:none meant the
   page painted headerless and then dropped by the header's height when the
   script ran - the largest jump on every page. It keeps the bar's height and
   just stays invisible until it is swapped out. */
.site-header{visibility:hidden;height:78px;min-height:0;margin:0;padding:0;overflow:hidden;border:0}
footer.footer-grid{display:none}
.crumbs{color:var(--cmt-muted);font-size:.85rem;padding:14px 0 0}
.crumbs a{color:var(--cmt-muted)}
.eyebrow{color:var(--cmt-accent);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.lead{color:var(--cmt-muted)}
.status{color:var(--cmt-muted)}
.media-panel,.media-panel img{background:var(--cmt-surface)}
.product-copy .price,.price{color:var(--cmt-ink)}
/* catalog components */
.category-tile,.product-card,.filters,.specs,.notice{background:var(--cmt-surface);border-color:var(--cmt-line)}
.category-tile:hover,.product-card:hover{border-color:var(--cmt-steel)}
.category-tile-name{font-family:inherit;font-weight:700;font-size:1.05rem}
.category-tile-count{color:var(--cmt-accent)}
.product-card-image{background:#fff;padding:14px}
.product-card-image img{object-fit:contain}
.chip{border-color:var(--cmt-line);color:var(--cmt-muted);background:var(--panel2)}
.stock.in{color:#1f7a3a}
.badge-blem{background:#efe3d3;color:#6b4522}
.badge-ffl{background:#dfe7f2;color:#264a73}
.platform-link{border-color:var(--cmt-line);color:var(--cmt-ink);background:var(--cmt-surface)}
.platform-link:hover{border-color:var(--cmt-accent)}
.filters .link{color:var(--cmt-accent)}
.notice{border-left-color:var(--cmt-accent)}
.notice-ffl{border-left-color:#264a73}
.quantity{border-color:var(--cmt-line);background:var(--cmt-surface)}
.quantity button,.quantity input{background:var(--cmt-surface);color:var(--cmt-ink)}
.catalog-hero h1,.home-hero h1,.home-section h2{font-family:inherit}
.specs th{color:var(--cmt-muted)}
.detail-copy{color:var(--cmt-ink)}
.image-placeholder{background:repeating-linear-gradient(135deg,#eef0f3 0 12px,#f6f7f9 12px 24px)}
/* legacy plan b panels (cart, checkout, account) */
.panel,.cart-panel,.checkout-section,.account-card,article.product,.card{background:var(--cmt-surface)!important;border-color:var(--cmt-line)!important;color:var(--cmt-ink)}
input,select,textarea{background:#fff;color:var(--cmt-ink);border-color:var(--cmt-line)}

h1,h2,h3,.catalog-hero h1,.home-hero h1{text-transform:none!important;letter-spacing:-.02em}
.button{text-transform:none!important;letter-spacing:0!important}
/* Support popup emblem is the real mark; drop the upstream bronze ring styling. */
.support-emblem{width:70px;height:70px;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;display:block}
@media(max-width:640px){.support-emblem{width:54px;height:54px}}
.support-dialog-inner,dialog{background:var(--cmt-surface)!important;color:var(--cmt-ink)!important;border-color:var(--cmt-line)!important}
.support-option{background:var(--panel2)!important;border-color:var(--cmt-line)!important;color:var(--cmt-ink)!important}
.support-option-featured{border-color:var(--cmt-accent)!important}
.oem-facts article,.oem-form,.oem-form-intro,.oem-hero{background:var(--cmt-surface)!important;border-color:var(--cmt-line)!important;color:var(--cmt-ink)}
.oem-program-grid label,.oem-product-grid label{background:var(--panel2)!important;border-color:var(--cmt-line)!important;color:var(--cmt-ink)!important}

/* newsletter block: styled by newsletter-signup.css, on the same palette. */

/* account / dealer page on light theme */
.account-panel,.account-pane,.account-dashboard,.account-orders,.account-order-list li{background:var(--cmt-surface)!important;border:1px solid var(--cmt-line)!important;color:var(--cmt-ink)!important;box-shadow:none!important;background-image:none!important}
.account-tabs{background:var(--panel2)!important;border:1px solid var(--cmt-line)!important;border-bottom:0!important}
.account-tab{background:transparent!important;color:var(--cmt-muted)!important;border:0!important;text-transform:none!important;letter-spacing:0!important;font-weight:600}
.account-tab[aria-selected="true"],.account-tab.is-active{color:var(--cmt-ink)!important;box-shadow:inset 0 -2px 0 var(--cmt-accent)!important;background:var(--cmt-surface)!important}
.account-form label,.account-form span,.account-form legend,.account-pane h2,.account-pane h3,.account-orders-heading{color:var(--cmt-ink)!important;text-transform:none!important;letter-spacing:0!important;border-color:var(--cmt-line)!important}
.account-form input,.account-form select{background:#fff!important;color:var(--cmt-ink)!important;border:1px solid var(--cmt-line)!important;border-radius:4px}
.account-form input:focus{border-color:var(--cmt-accent)!important;box-shadow:0 0 0 3px rgba(176,122,60,.2)!important;outline:0}
.account-status{color:var(--cmt-muted)!important}
.account-intro li,.account-intro p{color:var(--cmt-muted)!important}
.account-intro li::before{border-color:var(--cmt-accent)!important}
.account-hero .notice{background:var(--cmt-surface)!important;border-left:3px solid var(--cmt-accent)!important;color:var(--cmt-ink)!important}
.account-intro,.account-hero>div:first-child{background:transparent!important;border:0!important}
.account-hero h1{font-size:clamp(1.8rem,3.4vw,2.5rem)!important;max-width:14ch}
.account-hero h1{font-family:inherit!important}

/* smaller product and category cards */
/* No !important: this is the default track sizing, but catalog.css needs to be
   able to override it for categories small enough to fit one desktop row.
   cmt-theme.css loads after catalog.css, so source order already wins ties. */
.product-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.product-card-image{padding:10px}
.product-card-body{padding:10px 11px 11px;gap:4px}
.product-card h3{font-size:.88rem}
.product-card .price{font-size:.92rem}
.chip{font-size:.66rem;padding:1px 5px}
.stock{font-size:.68rem}
.category-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.category-tile{min-height:84px;padding:14px 14px 12px}
.category-tile-name{font-size:.95rem}
.category-tile-copy{font-size:.8rem}
.category-tile-art{aspect-ratio:16/9}
.category-tile.has-art .category-tile-name{padding:10px 14px 0}
.category-tile.has-art .category-tile-copy{padding:0 14px}
.category-tile.has-art .category-tile-count{padding:0 14px 10px}

/* Sale banner, mounted by cmt-chrome.js directly under the header.
   A faded, textured red-to-black rather than a flat crimson bar. Four layers,
   top to bottom: fine grain (an inline SVG noise tile - CSP allows data:
   images, so no extra request), faint diagonal brushing, a crimson glow that
   fades out from behind the copy, and the red-black base. Text stays white on
   a dark ground, so contrast is better than on the flat accent it replaces. */
.cmt-sale-banner{position:relative;color:#fff;background-color:#16080a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(115deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),radial-gradient(90% 220% at 14% 50%,rgba(168,31,51,.62) 0%,rgba(168,31,51,.22) 42%,rgba(168,31,51,0) 72%),linear-gradient(100deg,#521019 0%,#2c0b10 48%,#0f0607 100%);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid #000}
.cmt-sale-banner-copy small{color:#f0b7bf}
.cmt-sale-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 0;flex-wrap:wrap}
.cmt-sale-banner-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmt-sale-banner-copy small{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.cmt-sale-banner-copy strong{font-size:1.05rem;font-weight:800;line-height:1.2}
.cmt-sale-banner-copy p{margin:0;font-size:.9rem;opacity:.92}
.cmt-sale-banner-button{box-sizing:border-box;flex:none;background:#fff;color:var(--cmt-accent);border-radius:4px;padding:9px 16px;font-weight:700;text-decoration:none;white-space:nowrap}
.cmt-sale-banner-button:hover,.cmt-sale-banner-button:focus-visible{background:#f2f2f2}
@media(max-width:560px){.cmt-sale-banner-inner{padding:27px 0}.cmt-sale-banner-button{width:100%;text-align:center}}

/* Disabled purchase controls. An out-of-stock product renders these inert. */
.button[disabled],button.button[disabled],.cart-add-button[disabled]{background:#c8ccd2!important;border-color:#c8ccd2!important;color:#6b7280!important;cursor:not-allowed;pointer-events:none}
.quantity button[disabled],.quantity input[disabled]{opacity:.5;cursor:not-allowed}
.status[data-availability="out"]{color:#6b7280}

/* Header search suggestions. An accelerator only - the form still submits to
   /shop/?q= and behaves correctly with this script disabled. */
.cmt-suggest{position:absolute;top:calc(100% + 6px);left:0;width:min(420px,100%);z-index:60;background:var(--cmt-surface);border:1px solid var(--cmt-line);border-radius:6px;box-shadow:0 18px 44px rgba(15,20,28,.24);overflow:hidden}
.cmt-suggest-head{padding:8px 12px 6px;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cmt-muted);background:var(--cmt-bg);border-bottom:1px solid var(--cmt-line)}
.cmt-suggest-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;text-decoration:none;color:var(--cmt-ink);font-size:.92rem}
.cmt-suggest-item small{color:var(--cmt-muted);font-size:.76rem;white-space:nowrap}
.cmt-suggest-item:hover,.cmt-suggest-item.is-active{background:var(--cmt-bg)}
.cmt-suggest-item + .cmt-suggest-item{border-top:1px solid var(--cmt-line)}
.cmt-drawer-search{position:relative}
@media(max-width:900px){.cmt-suggest{width:100%}}

/* Components menu in the nav row. The trigger is a button so one control does
   the whole job for a mouse, a keyboard and a thumb; it is styled to sit in the
   row as just another nav item. */
.cmt-nav-drop { position: relative; display: inline-flex; }
.cmt-nav-drop { align-items: center; border-radius: 4px; }
.cmt-nav-drop-link { padding-right: 4px; }
.cmt-nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A real tap target on touch without widening the row on desktop. */
  min-width: 24px;
  align-self: stretch;
  padding: 0 8px 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cmt-nav-drop-link[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--cmt-accent); }
.cmt-nav-drop-toggle:hover { color: var(--cmt-accent); }
.cmt-nav-caret { transition: transform .15s ease; }
.cmt-nav-drop.is-open .cmt-nav-caret { transform: rotate(180deg); }

.cmt-nav-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  display: grid;
  padding: 6px;
  border: 1px solid var(--cmt-line);
  border-radius: 6px;
  background: var(--cmt-surface);
  box-shadow: 0 12px 34px rgba(16, 20, 26, .16);
}
.cmt-nav-menu[hidden] { display: none; }
.cmt-nav-menu-link {
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--cmt-ink);
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}
.cmt-nav-menu-link:hover,
.cmt-nav-menu-link:focus-visible { background: var(--panel2); }
.cmt-nav-menu-link[aria-current="page"] { color: var(--cmt-accent); font-weight: 600; }
/* "All components" is the parent shelf, so it reads as a heading row. */
.cmt-nav-menu-link:first-child {
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cmt-line);
  border-radius: 4px 4px 0 0;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .cmt-nav-caret { transition: none; } }

/* The CMT mark. Drawn inline by cmt-chrome.js so it takes its colour from the
   surface: white on the dark header and footer, ink on light surfaces. The old
   round bullet-hole badge was square and sat in a 68px circle; this mark is 3:2
   and must not be forced into that slot, so it is sized by height and left to
   find its own width. */
.cmt-brand-mark,
.cmt-footer-mark {
  display: block;
  flex: none;
  width: auto;
  color: #fff;
}
.cmt-brand-mark { height: 52px; }
.cmt-footer-mark { height: 48px; }

/* The old rule rounded the emblem into a circle, which would now clip the
   corners off a rectangular mark. */
.cmt-emblem, .cmt-mark { border-radius: 0; }

@media (max-width: 560px) {
  .cmt-brand-mark { height: 38px; }
  .cmt-footer-mark { height: 40px; }
}

/* The caret sat on the text baseline, which put it low and slightly adrift of
   the word next to it. Centring it on the button's own line and nudging it down
   by a hair lines its midpoint up with the middle of the capitals. */
.cmt-nav-caret {
  flex: none;
  align-self: center;
  transform-origin: 50% 50%;
}

/* CMT reads in the same crimson as the Shop the catalog button, so the wordmark
   and the site’s primary action are the one colour. */
.cmt-wordmark { color: var(--cmt-accent, #a81f33); }

/* ---------------------------------------------------------------- phones

   Three products to a row. Two columns of tall cards meant a category of
   fifteen rails was eight screens of scrolling; three columns halve that, and a
   customer comparing four lengths of the same rail can see all four at once
   instead of holding two of them in their head.

   Three columns only work if the card is rebuilt for the width: a 390px phone
   leaves about 112px per card, so the padding, the type and the chips all have
   to give. What survives is what a buyer chooses on — the photograph, the name,
   the price and whether it is in stock. */
@media(max-width:560px){
  /* Nine rail lines, one to a row, was 2,700px of scrolling before the first
     product. Two to a row halves it and still leaves the photograph big enough
     to tell a TANO from an HDM. */
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-tile{min-height:0}
  .category-tile-name{font-size:.82rem;line-height:1.25}
  .category-tile-copy{font-size:.68rem;line-height:1.35}
  .category-tile-count{font-size:.64rem}
  .category-tile.has-art .category-tile-name{padding:8px 10px 0}
  .category-tile.has-art .category-tile-copy{padding:0 10px}
  .category-tile.has-art .category-tile-count{padding:0 10px 9px}

  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .product-card{border-radius:5px}
  /* 10px of inset around a 112px photograph is most of the card. */
  .product-card-image{padding:4px}
  .product-card-body{padding:7px 7px 8px;gap:3px}
  /* The category line repeats the page heading on every card and is the first
     thing to go when there is no room for it. */
  .product-card-top .category{display:none}
  .product-card-top{font-size:.58rem}
  .badge{padding:2px 5px;font-size:.52rem;letter-spacing:.04em}
  .product-card h3{font-size:.76rem;line-height:1.24}
  /* Spec chips are a scanning aid on a wide grid and noise at this width; the
     length and profile are already in the product name. */
  .product-card .chips{display:none}
  .product-card-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    padding-top:3px;
  }
  .product-card .price{font-size:.82rem}
  .product-card .msrp{font-size:.66rem}
  .product-card .stock{font-size:.56rem}

  /* Below about 340px three columns stop being legible rather than merely
     tight, so the grid gives way instead of overflowing. */
  @media(max-width:339px){
    .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .product-card h3{font-size:.84rem}
  }
}

/* ------------------------------------------------ tiered shipping surfaces */

/* The free-shipping thresholds. A full-width bar under the navigation rather
   than a grey aside beside the search box: it was invisible there, and it was
   pushing Create account and Cart out of position. Here it is the widest thing
   on the page, in the brand accent, and it reads on a phone too. */
.cmt-ship-bar {
  background: var(--cmt-accent, #a81f33);
  color: #fff;
}
.cmt-ship-bar-inner {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
.cmt-ship-bar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: .7rem;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .cmt-ship-bar-inner { padding: 6px 12px; font-size: .8rem; letter-spacing: .01em; line-height: 1.3; white-space: nowrap; }
  .cmt-ship-bar-mark { display: none; }
  .cmt-ship-bar-copy { display: none; }
  .cmt-ship-bar-copy-short { display: inline; }
}

/* Product card and product page. One line, the same sentence in both places. */
.product-card-shipping {
  margin-top: 2px;
  color: var(--cmt-accent, #a81f33);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.product-shipping {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0 0 18px;
}
.product-shipping-line { color: var(--cmt-accent, #a81f33); font-size: .86rem; font-weight: 800; }
.product-shipping-more { color: var(--cmt-muted, #49515b); font-size: .82rem; }

/* Cart: what this subtotal has earned and what the next tier costs. */
.cart-shipping-nudge {
  margin: 6px 0 0;
  color: var(--cmt-accent, #a81f33);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Checkout: the method chooser. */
.shipping-choice { margin: 18px 0; }
.shipping-choice h3 {
  margin: 0 0 4px;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shipping-choice-note { margin: 0 0 10px; color: var(--cmt-muted, #49515b); font-size: .78rem; line-height: 1.45; }
.shipping-choice-status { margin: 0 0 8px; color: var(--cmt-muted, #49515b); font-size: .78rem; }
.shipping-options { display: flex; flex-direction: column; gap: 8px; }
.shipping-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--cmt-line, #d3d8df);
  border-radius: 6px;
  background: var(--cmt-surface, #fff);
  cursor: pointer;
}
.shipping-option.is-selected { border-color: var(--cmt-accent, #a81f33); box-shadow: inset 0 0 0 1px var(--cmt-accent, #a81f33); }
.shipping-option input { margin-top: 3px; accent-color: var(--cmt-accent, #a81f33); flex: 0 0 auto; }
.shipping-option-body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.shipping-option-label { font-size: .9rem; font-weight: 800; }
.shipping-option-service,
.shipping-option-eta { color: var(--cmt-muted, #49515b); font-size: .76rem; }
/* The one number that changes a decision, in the colour of the thing being
   offered rather than the grey of the rest of the row. */
.shipping-option-hint { margin-top: 2px; color: var(--cmt-muted, #49515b); font-size: .72rem; font-style: italic; }
.shipping-option-cost { flex: 0 0 auto; text-align: right; font-size: .9rem; font-weight: 800; }
.shipping-option-free { color: #1c6b2e; }
@media (max-width: 560px) {
  .shipping-option { padding: 9px 10px; }
  .shipping-option-label { font-size: .84rem; }
  .shipping-option-service, .shipping-option-eta, .shipping-option-hint { font-size: .7rem; }
}

/* Checkout form fields. They inherited the upstream dark theme — near-black inputs
   with white text — while the CMT checkout around them is light, so every field
   read as a black rectangle. Pre-existing, but it is the page the shipping
   chooser now lives on, and a checkout that looks broken does not get used. */
#checkout-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
#card-form input:not([type="submit"]),
#checkout-form select,
#checkout-form textarea {
  background: var(--cmt-surface, #fff);
  color: var(--cmt-ink, #222);
  border: 1px solid var(--cmt-line, #d3d8df);
}
#checkout-form input::placeholder,
#card-form input::placeholder,
#checkout-form textarea::placeholder { color: var(--cmt-muted, #8b939c); }
#checkout-form input:focus-visible,
#card-form input:focus-visible,
#checkout-form select:focus-visible,
#checkout-form textarea:focus-visible {
  outline: 2px solid var(--cmt-accent, #a81f33);
  outline-offset: 1px;
}

/* --------------------------------------------------- checkout, made legible

   The form panel and its labels were still the upstream dark theme on a light CMT
   page: tan label text on white, and a dark slab behind it. On the one page
   where a customer is deciding whether to trust the site, "looks unfinished"
   and "looks unsafe" are the same thing. */
.checkout-form,
.checkout-flow .checkout-form { background: var(--cmt-surface, #fff); color: var(--cmt-ink, #222); }
.checkout-section { border-color: var(--cmt-line, #d3d8df); }
.checkout-section h2 { color: var(--cmt-ink, #222); }
.checkout-form label > span { color: var(--cmt-muted, #49515b); }
.checkout-form label > span small { color: var(--cmt-muted, #8b939c); }
.checkout-note,
.checkout-security { color: var(--cmt-muted, #49515b); }

/* Why a field is being asked for, next to the field. */
.checkout-field-note {
  margin: 2px 0 0;
  color: var(--cmt-muted, #49515b);
  font-size: .78rem;
  line-height: 1.45;
}

/* Validation, said when they leave the field rather than after the button. */
.checkout-field-error {
  display: block;
  margin-top: 4px;
  color: #8f1d1d;
  font-size: .78rem;
  font-weight: 700;
}
.checkout-form label.has-error input,
.checkout-form label.has-error select { border-color: #8f1d1d; }

/* The promotional code, behind a link so an empty box does not send people off
   to hunt for a code they do not have. */
.checkout-offer-section { padding-block: 14px; }
.checkout-offer-toggle { font-size: .84rem; font-weight: 700; }

/* ------------------------------------------------------------ FFL lookup */
.ffl-finder {
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid var(--cmt-line, #d3d8df);
  border-radius: 6px;
  background: var(--cmt-panel2, #f4f6f8);
}
.ffl-finder-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ffl-finder-controls label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
.ffl-finder-controls label > span {
  color: var(--cmt-muted, #49515b);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ffl-finder-controls input { width: 100%; padding: 8px 10px; }
.ffl-finder-controls .button { flex: 0 0 auto; }
.ffl-finder-status { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--cmt-muted, #49515b); }
.ffl-finder-status.is-good { color: #1c6b2e; font-weight: 700; }
.ffl-finder-status.is-warn { color: #8a5a00; font-weight: 700; }
.ffl-finder-results { display: grid; gap: 8px; margin-top: 10px; max-height: 320px; overflow-y: auto; }
.ffl-result {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--cmt-line, #d3d8df);
  border-radius: 5px;
  background: var(--cmt-surface, #fff);
  cursor: pointer;
  text-align: left;
}
.ffl-result:hover,
.ffl-result:focus-visible { border-color: var(--cmt-accent, #a81f33); }
.ffl-result.is-chosen { border-color: var(--cmt-accent, #a81f33); box-shadow: inset 0 0 0 1px var(--cmt-accent, #a81f33); }
.ffl-result-name { font-size: .88rem; font-weight: 800; color: var(--cmt-ink, #222); }
.ffl-result-place,
.ffl-result-licence { color: var(--cmt-muted, #49515b); font-size: .76rem; }
@media (max-width: 560px) {
  .ffl-finder-controls { gap: 8px; }
  .ffl-finder-controls .button { width: 100%; }
}

/* The footer carries the header's wordmark now, so it has to be the header's
   wordmark: `.cmt-footer-brand strong` is the more specific selector and would
   otherwise repaint it white at the footer's own body size. */
.cmt-footer-brand strong.cmt-wordmark {
  color: var(--cmt-accent, #a81f33);
  font-size: 1.35rem;
  letter-spacing: .04em;
}

/* An art tile normally ends with its line count, and that is what carries the
   bottom padding. The home page's tiles have no count, so the copy was the last
   element and sat flush against the card edge — worst on Handguards & Rail
   Systems, whose four lines of copy filled the tile to the millimetre. */
.category-tile.has-art .category-tile-copy:last-child {
  padding-bottom: 12px;
}

/* Inventory recovery: shown when stock cannot be checked, with a retry. The
   saved cart is untouched while it is up. */
.inventory-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: calc(100% - 24px);
  margin: 16px auto;
  padding: 14px;
  border: 1px solid var(--cmt-accent, #a81f33);
  border-radius: 6px;
  background: var(--cmt-accent-tint, #fbeef0);
  color: var(--cmt-ink, #222);
}
.inventory-recovery[hidden] { display: none; }
.inventory-recovery button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--cmt-accent, #a81f33);
  border-radius: 4px;
  background: var(--cmt-accent, #a81f33);
  color: var(--cmt-accent-ink, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Skip link: off screen until a keyboard user tabs to it. */
.storefront-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--cmt-accent, #a81f33);
  color: var(--cmt-accent-ink, #fff);
  font-weight: 700;
}
.storefront-skip-link:focus { top: 12px; }

/* Below the desktop breakpoint the card photo sits in a fixed square. A
   portrait photograph used to size its own box, so one hand-held rail made a
   whole row of three cards twice as tall and left the other two half empty. */
@media(min-width:561px) and (max-width:900px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
}
@media(max-width:900px){
  .product-card-image{position:relative;aspect-ratio:1;overflow:hidden}
  .product-card-image img{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain}
}
@media(max-width:560px){
  .product-card-image img{top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
}

/* ------------------------------------------------ compact phone layout
   Less scrolling before the first product. The hero is a third of a screen
   rather than a whole one and the photograph shows through it; the facts sit
   two-up; tile copy holds to two lines; the photo band keeps all three pictures
   in one row instead of dropping one; the product photo stops at the fold. The
   pictures stay - what goes is padding and words the page already said. */
@media(max-width:560px){
  .catalog-hero-art{opacity:.8}
  .catalog-hero-overlay::after{background:linear-gradient(180deg,rgba(43,43,43,.72) 0%,rgba(43,43,43,.5) 60%,rgba(43,43,43,.64) 100%)}
  .catalog-hero-copy{padding:22px 0 20px;min-height:0}
  .catalog-hero-copy h1{font-size:clamp(1.7rem,7.2vw,2.1rem);margin:6px 0 8px}
  .catalog-hero-copy .lead{font-size:.95rem;line-height:1.45;margin:0 0 14px}
  .home-hero-copy{padding:26px 0 22px;min-height:0}
  .home-hero-copy h1{font-size:clamp(1.9rem,8vw,2.3rem);max-width:none}
  .home-hero .lead{font-size:.95rem;margin:0 0 14px}
  .home-hero .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .home-hero .actions .button:first-child{grid-column:1/-1}
  .home-hero .actions .button{min-height:44px;padding:10px 12px}
  .home-facts-row{grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 0 6px}
  .home-facts-row div{font-size:.84rem}
  .home-section{padding:12px 0 2px}
  .home-section h2{font-size:1.3rem}
  .home-section .sub{font-size:.9rem;margin:0 0 10px}
  .category-grid{margin:10px 0 14px}
  .category-tile-art{aspect-ratio:16/9}
  .category-tile-copy{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.7em}
  .category-tile.has-art .category-tile-copy:last-child{padding-bottom:0;margin-bottom:12px}
  .home-band{grid-template-columns:repeat(3,1fr);margin:18px 0 0}
  .home-band img,.home-band img:last-child{display:block;aspect-ratio:1;max-height:140px}
  .home-process{padding:14px 0 26px;gap:14px}
  .home-process p{font-size:.86rem}
  .catalog-hero,.catalog-hero.compact{padding:18px 0 8px}
  .media-main{max-height:60vw;object-fit:contain}
  .media-thumbs{margin-top:8px}
  .cmt-footer{margin-top:28px;padding:28px 0 18px}
}

/* ---------------------------------------- filters beside the cards on phones
   Below the desktop breakpoint the filter panel used to stack above the grid,
   closed, so filtering meant scrolling back up and opening it. It now stands
   as a narrow rail on the left, open, scrolling on its own under the sticky
   header, and the cards take the rest of the width in two columns (three on a
   tablet). Narrower than 340px there is no room for two of anything, so the
   rail gives way to the stacked layout. */
@media(min-width:340px) and (max-width:900px){
  .catalog-layout:not(.no-filters){grid-template-columns:minmax(116px,30%) minmax(0,1fr);gap:10px;align-items:start}
  .catalog-layout:not(.no-filters) .filters{position:sticky;top:104px;max-height:calc(100vh - 116px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 10px 10px;border-radius:6px}
  .catalog-layout:not(.no-filters) .filters-head{margin:0 -10px 4px;padding:8px 10px 6px;gap:8px}
  .catalog-layout:not(.no-filters) .filters-head strong,.catalog-layout:not(.no-filters) .filters-toggle{font-size:.8rem!important;min-height:0;padding:0}
  .catalog-layout:not(.no-filters) .filters-toggle::after{display:none}
  .catalog-layout:not(.no-filters) .filters .link{font-size:.8rem!important;min-height:0;padding:0}
  .catalog-layout:not(.no-filters) .filter-group{padding:8px 0 2px}
  .catalog-layout:not(.no-filters) .filter-group legend{font-size:.8rem!important;padding:0 0 4px}
  .catalog-layout:not(.no-filters) .filter-group label{gap:6px;min-height:30px;padding:2px 0;font-size:.8rem!important;line-height:1.25;overflow-wrap:anywhere}
  .catalog-layout:not(.no-filters) .filters input[type="checkbox"]{width:18px;height:18px;flex:none;accent-color:var(--cmt-accent)}
  .catalog-layout:not(.no-filters) .filters-count{font-size:.8rem!important;margin:8px 0 0}
  .catalog-layout:not(.no-filters) .filters.is-collapsed .filter-group,.catalog-layout:not(.no-filters) .filters.is-collapsed .filters-count{display:block}
  .catalog-layout:not(.no-filters) .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .catalog-layout:not(.no-filters) .product-card-image{padding:4px}
  .catalog-layout:not(.no-filters) .product-card-body{padding:7px 7px 8px;gap:3px}
  .catalog-layout:not(.no-filters) .product-card h3{font-size:.8rem!important;line-height:1.2}
  .catalog-layout:not(.no-filters) .product-card .chips,.catalog-layout:not(.no-filters) .product-card-top .category{display:none}
  .catalog-layout:not(.no-filters) .product-card-bottom{flex-direction:column;align-items:flex-start;gap:1px;padding-top:3px}
}
@media(min-width:561px) and (max-width:900px){
  .catalog-layout:not(.no-filters){grid-template-columns:minmax(170px,26%) minmax(0,1fr);gap:14px}
  .catalog-layout:not(.no-filters) .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}

/* ============================================================================
   Phone and small-tablet refinements

   Measured at 320, 360, 390, 414, 768 and 1024px. The storefront already
   reflowed correctly at every one of those widths - no sideways scroll on any
   page - but it reflowed by shrinking: badges at 8.3px, stock labels at 9px,
   buttons at 10.9px, and tap targets down to a 13px radio. This layer sets
   floors rather than a new design: nothing moves, nothing is hidden, and every
   capability the desktop has stays where it is. Desktop is untouched - all of
   it is behind a phone-width query.

   The three numbers it is built on: 12px is the smallest type worth setting on
   a phone, 16px is the size below which iOS zooms the page when a field takes
   focus, and 44px is the smallest square a thumb hits reliably.
   ========================================================================== */
@media (max-width: 900px) {
  /* Anchors and in-page links land below the sticky header rather than behind
     it. Kept slightly above the header's own height so the target is visible
     rather than flush against it. */
  html { scroll-padding-top: 104px; }

  /* --- type that had shrunk below reading size --- */
  .badge, .stock, .msrp, s.msrp, .eyebrow, .category-tile-count, .category-tile-copy,
  .product-card-shipping, .cart-line-sku, .home-carousel-badge, .home-carousel-out,
  .planb-newsletter-eyebrow, .discount-badge, .filters-count, .catalog-count,
  .card-link, .status, .form-fine, .field-help, .dealer-renewal small {
    font-size: .8rem !important;
    line-height: 1.35;
  }
  .home-carousel-title { font-size: 1rem !important; }
  .crumbs, .cmt-ship-bar-copy { font-size: .82rem !important; }
  th, td { font-size: .86rem !important; }
  label, legend, .filters label, .checkout-steps li, .checkout-progress li, .steps li {
    font-size: .9rem !important;
  }
  /* A button is the one thing on the page a customer has to be sure of. */
  .button, button.button, a.button, .cart-add-button, .oem-submit, .account-tab,
  .checkout-submit, .cart-checkout {
    font-size: 1rem !important;
  }
  /* iOS zooms the whole page in when a focused field is under 16px, and it does
     not zoom back out. Every field on the site is at least 16px here. */
  input, select, textarea { font-size: 16px !important; }

  /* --- targets a thumb can actually hit --- */
  .cmt-brand, .cmt-cart, .cart-nav-link, .mobile-cart-shortcut {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cmt-menu-toggle { width: 44px; height: 44px; }
  .cmt-footer a { padding: 10px 0; }
  .cmt-drawer-link { padding: 12px 0; }
  .home-carousel-button {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem !important;
  }
  .home-carousel-controls, .home-carousel-nav { gap: 10px !important; }
  .filters-toggle, button.link, .text-button, .checkout-offer-toggle, .clear-cart {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* The shipping choice was a 13px radio: the label is the target, and the row
     it sits in is the size of the row a thumb aims at. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: none; }
  .filters label, .shipping-option, .shipping-choice label, .checkout-terms label,
  .terms-agreement label, .filters-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .qty button, .quantity button, .cart-qty button, .cart-line-remove, .media-thumb {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- the header, which was 122px of a 780px screen, permanently --- */
  .cmt-bar-inner { min-height: 64px; gap: 10px; }
  .cmt-ship-bar-inner { padding: 7px 0; }
}

@media (max-width: 560px) {
  /* The footer stays one column on a phone, which is what makes it readable:
     a column of plain rows, nothing packed side by side. The rows are taller
     than they were so each link is a real target, and the footer is longer for
     it - which costs nothing, because it sits below everything a customer came
     for. */
  .cmt-footer a { padding: 9px 0; font-size: .9rem; }
}

/* Second pass over the same widths: the forms that arrive with their own
   stylesheet (the newsletter signup, product reviews, the cart reminder) sized
   their own checkboxes and type, so they were missed by selectors written
   against the shop's. Same floors, nothing else changed. */
@media (max-width: 900px) {
  .planb-newsletter-consent { grid-template-columns: 22px 1fr !important; }
  .planb-newsletter-consent input,
  .review-consent input,
  .cart-reminder-consent input { width: 22px !important; height: 22px !important; }
  .planb-newsletter-consent span,
  .planb-newsletter-fine,
  .planb-newsletter-eyebrow,
  .planb-newsletter-status,
  .review-status,
  .review-fine,
  .checkout-security,
  .checkout-card-brand,
  .checkout-card-marks-secure,
  .cart-reminder-consent span,
  .form-note,
  small { font-size: .8rem !important; line-height: 1.4; }
  .planb-newsletter-button,
  .review-submit,
  .cart-line-remove,
  .clear-cart { font-size: .95rem !important; }
  /* Links that stand alone as a row are targets, not prose. */
  .platform-link,
  .cmt-footer-legal a,
  .policy-link,
  .shop-all-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Third pass. The shipping picker, the cart's Remove control and two labels on
   the account page were the last things under the floors, and the shop index's
   line lists were rows 16px tall - a list of links a thumb cannot separate. */
@media (max-width: 900px) {
  .shipping-option-service,
  .shipping-option-eta,
  .shipping-option-hint,
  .shipping-option-price,
  .cart-line-sku,
  .security-note span,
  .security-note strong,
  .cart-reminder span,
  .cart-reminder label span { font-size: .84rem !important; }
  .cart-line-actions button,
  .cart-line button { font-size: .9rem !important; min-height: 44px; }
  /* A category's product lines on the shop index, and any list of links that
     is a list rather than a sentence. */
  .catalog-hero-lines a,
  .category-tile-lines a,
  .catalog-lines a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* The last of them, found by reading the rendered page rather than the
   stylesheets: the drawer's section headings, the cart's Remove control and
   its reminder form, and the free-shipping progress labels. */
@media (max-width: 900px) {
  .cmt-drawer-group h2 { font-size: .82rem !important; }
  .cmt-ship-bar-mark { font-size: .9rem !important; }
  .cart-line-total button { font-size: .9rem !important; min-height: 44px; }
  .cart-reminder-form label span,
  .cart-reminder-form small { font-size: .84rem !important; }
  .free-shipping-progress__labels span,
  .free-shipping-modal__dialog small { font-size: .82rem !important; }
}