@charset "utf-8";
/* ============================================================================
   TORQUE · THE SHOP'S TIRES · tq.racks.css · /Tires (Tires.aspx)
   Round F3-1. YOUR SIZE ON THE SIDEWALL. Built only from the site kit
   (tq.tokens.css, tq.base.css, tq.site.css): the page head, the size field,
   the chips, the tire cards, the sheet and the empty state are the kit's.
   This file adds what the page alone has:
     1  the page head: the sidewall, the size field on the dark
     2  the aisle: the rail of filters beside the racks
     3  the racks: one per rim size, its label plate and its sizes
     4  the cards' own lines (the installed line's extras, UTQG)
     5  nothing matches, who to ask
     6  a phone: the filters' button and the sheet
     7  motion, reduced motion, forced colours
   The rubber's colours (section 1) are the Fitting Bay's sidewall
   (gw.sec2.css): a drawing, not a role, so they never turn with .tq-dark.
   ========================================================================= */


/* ═══ 1 · THE PAGE HEAD ══════════════════════════════════════════════════
   The kit's page head (.tq-pagehead.tq-dark, its lane along the floor) with
   the top of a tire rising out of its floor on the right. The size the
   visitor searched is raised on the sidewall; until then the size field's
   pattern waits there, ___/__R__.                                          */

.tq-racks__head {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(1.75rem, 1rem + 2.6vw, 3rem) clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
}
.tq-racks__headin { position: relative; z-index: 1; }
.tq-racks__head .tq-crumbs { position: relative; }

.tq-racks__title {
  max-inline-size: 22ch;
  margin: var(--tq-sp-6) 0 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-d3);
  font-weight: var(--tq-fw-bold);
  line-height: 1.02;
  letter-spacing: var(--tq-tr-display);
  text-transform: uppercase;
  color: var(--tq-text-strong);
}
.tq-racks__kick { color: var(--tq-text-muted); }
.tq-racks__size { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.tq-racks__words { text-transform: none; overflow-wrap: anywhere; }
.tq-racks__lead {
  max-inline-size: 46ch;
  margin: var(--tq-sp-6) 0 0;
  font-size: var(--tq-fs-md);
  line-height: var(--tq-lh-lead);
  color: var(--tq-text-muted);
}

/* the size field on the dark, as the home page's hero has it (gw.sec1.css) */
.tq-racks__find {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--tq-sp-5) var(--tq-sp-6);
  max-inline-size: 600px;
  margin-block-start: var(--tq-sp-9);
}
.tq-racks__sizefield { flex: 1 1 320px; container-type: inline-size; }
/* a narrow field wraps its line under it to two lines; it keeps the height of two either way, so the size's read-out
   (two lines of bold numbers) takes the hint's place without moving the page */
@container (max-width: 310px) {
  .tq-racks__sizefield .tq-sizefield__read { min-block-size: 52px; align-content: flex-start; }
}
.tq-racks__sizefield .tq-sizefield__box {
  background: rgb(var(--tq-black-rgb) / .58);
  border-color: rgb(var(--tq-white-rgb) / .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tq-racks__sizefield .tq-sizefield__box:hover { border-color: rgb(var(--tq-white-rgb) / .3); }
.tq-racks__sizefield .tq-sizefield__mask { color: rgb(var(--tq-white-rgb) / .38); }   /* the pattern at 3:1 on the dark field */
.tq-racks__sizefield .tq-sizefield__read { color: var(--tq-text-muted); }
.tq-racks__go {
  flex: none;
  block-size: var(--tq-control-h-lg);
  margin-block-start: calc(var(--tq-fs-sm) * 1.3 + var(--tq-sp-3));
}

/* the sidewall: a drawing behind the words. The tire takes the band's right
   side (--wall-w) but never grows past what the band can show of it: its
   size is lettered in the drawing's top 380 of 560, so no wider than 2.5
   times the band's height. On a wide screen its right edge stays 100px past
   the content (the wide container's edge); the tread runs on past its box. */
.tq-racks__wall {
  position: absolute;
  z-index: 0;
  inset: 0;
  container-type: size;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}
.tq-racks__fade {
  --wall-d: min(var(--wall-w, 64cqw), 250cqh);
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: calc(var(--wall-d) + max(0px, (100cqw - var(--tq-container-wide)) / 2));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--wall-d) * .34));
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--wall-d) * .34));
}
.tq-racks__fade::before {                  /* the shop light the rubber catches, never the signal */
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: calc(var(--wall-d) * .25);
  inline-size: calc(var(--wall-d) * .6);
  aspect-ratio: 1.5;
  background: radial-gradient(closest-side, rgb(255 255 255 / .075), transparent);
}
.tq-racks__tire {
  position: absolute;
  inset-block-start: var(--wall-top, 0px);
  inset-inline-start: 0;
  inline-size: var(--wall-d);
  block-size: auto;
  aspect-ratio: 1000 / 560;
  overflow: visible;
}
.tq-racks__tread  { fill: #0B0C0E; }
.tq-racks__blocks { fill: none; stroke: #1B1D21; stroke-width: 22; stroke-dasharray: 15 9; }
.tq-racks__rib    { fill: none; stroke: #FFFFFF; stroke-opacity: .05; stroke-width: 2; }
.tq-racks__big {
  fill: #E8EBEE;
  font-family: var(--tq-font-display);
  font-size: 108px;
  font-weight: 700;
  letter-spacing: .05em;
}
.tq-racks__small {
  fill: #9AA0A8;
  font-family: var(--tq-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .22em;
}
.tq-racks__wall.is-ghost .tq-racks__big { fill: #4D525A; }
.tq-racks__wall .tq-racks__big tspan { fill: #4D525A; }   /* the pattern still to come, as the field's mask has it */
.tq-racks__shine { fill: #FFFFFF; opacity: 0; filter: none; }
.tq-racks__letters { transform-box: view-box; transform-origin: 50% 300%; }


/* ═══ 2 · THE AISLE ══════════════════════════════════════════════════════
   The filters in a rail that stays in view while the racks scroll; the
   racks beside it. The filters are the kit's chips, each with its count.  */

.tq-racks__aisle { padding-block-start: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
.tq-racks__layout {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  align-items: start;
  gap: var(--tq-sp-10) clamp(1.75rem, .5rem + 2.6vw, 3.5rem);
}
.tq-racks__layout > .tq-alert,
.tq-racks__layout > .tq-empty { grid-column: 1 / -1; }

.tq-racks__rail {
  position: sticky;
  inset-block-start: calc(var(--tq-header-h) + var(--tq-sp-8));
  max-block-size: calc(100vh - var(--tq-header-h) - var(--tq-sp-11));
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: var(--tq-sp-3);
}
/* a rail taller than the screen fades at its foot until it is scrolled to its end, so the filters below show they are there */
@supports (animation-timeline: scroll()) {
  .tq-racks__rail {
    -webkit-mask-image: linear-gradient(#000 calc(100% - var(--rail-fade, 0px)), transparent);
    mask-image: linear-gradient(#000 calc(100% - var(--rail-fade, 0px)), transparent);
    animation: tq-racks-rail linear both;
    animation-timeline: scroll(self);
  }
  @keyframes tq-racks-rail { from, 97% { --rail-fade: 56px; } to { --rail-fade: 0px; } }
}
.tq-racks__filters { display: flex; flex-direction: column; gap: var(--tq-sp-9); }
.tq-racks__group { display: flex; flex-direction: column; gap: var(--tq-sp-5); }
.tq-racks__group[hidden] { display: none; }
.tq-racks__glabel {
  margin: 0;
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.3;
  color: var(--tq-text-strong);
}
.tq-racks__chips { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); }
.tq-racks .tq-chip:disabled { opacity: .45; cursor: default; transform: none; }
.tq-racks .tq-chip:disabled:hover { color: var(--tq-text-body); border-color: var(--tq-line-strong); }
.tq-racks__text { position: relative; }
.tq-racks__text > .tq-i {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  inline-size: 18px;
  block-size: 18px;
  color: var(--tq-text-subtle);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.tq-racks__text .tq-input { padding-inline-start: 42px; }
.tq-racks__clear { align-self: flex-start; }

.tq-racks__main { min-inline-size: 0; }
.tq-racks__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tq-sp-5) var(--tq-sp-8);
  padding-block-end: var(--tq-sp-7);
  border-block-end: 1px solid var(--tq-line);
}
.tq-racks__summary { flex: 1 1 auto; margin: 0; font-size: var(--tq-fs-md); color: var(--tq-text-muted); }
.tq-racks__summary b {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-bold);
  color: var(--tq-text-strong);
  font-variant-numeric: tabular-nums;
}
.tq-racks__summary b[data-racks-units] { font-size: var(--tq-fs-lg); }
.tq-racks__sumstock { white-space: nowrap; }
.tq-racks__sort { display: flex; align-items: center; gap: var(--tq-sp-5); }
.tq-racks__sortlabel { font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); color: var(--tq-text-muted); }
.tq-racks__select { inline-size: 260px; }    /* one width before and after the kit upgrades it, the longest order whole */
.tq-racks__open { display: none; }
.tq-racks__nf {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: var(--tq-r-full);
  background: var(--tq-accent);
  color: var(--tq-on-accent);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-bold);
  font-variant-numeric: tabular-nums;
}
.tq-racks__nf[hidden] { display: none; }

/* the filters on, one capsule each to take it off: a narrow screen's (section 6), where the rail is in the sheet. On a wide
   screen only the old Shop By box's width and ratio show here (is-wa): the rail has no chips for them */
.tq-racks__active { display: none; flex-wrap: wrap; gap: var(--tq-sp-4); padding-block-start: var(--tq-sp-6); }
@media (min-width: 1100px) {
  .tq-racks__active[data-racks-wa]:not([hidden]) { display: flex; }
  .tq-racks__active .tq-chip:not(.is-wa) { display: none; }
}


/* ═══ 3 · THE RACKS ══════════════════════════════════════════════════════
   One rack per rim size, the smallest first. Its label is a plate: the rim
   in white on graphite, the way a shop labels its racks. The sizes on the
   rack are pressed to search one.                                         */

.tq-racks__main { container: racks / inline-size; }
.tq-racks__list {
  --cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: start;
  gap: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem) var(--tq-sp-7);
  padding-block-start: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
}
.tq-racks__rack { --k: 1; grid-column: span var(--k); min-inline-size: 0; }
.tq-racks__rack[hidden] { display: none; }
@container racks (min-width: 560px) {
  .tq-racks__list { --cols: 2; }
  .tq-racks__rack[data-n="2"], .tq-racks__rack[data-n="3"] { --k: 2; }
}
@container racks (min-width: 860px) {
  .tq-racks__list { --cols: 3; }
  .tq-racks__rack[data-n="3"] { --k: 3; }
}
.tq-racks__rackhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tq-sp-4) var(--tq-sp-5);
  margin-block-end: var(--tq-sp-7);
  padding-block-end: var(--tq-sp-5);
  border-block-end: 2px solid var(--tq-line-strong);
}
.tq-racks__rim {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tq-sp-4);
  margin: 0;
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-medium);
  color: var(--tq-text-muted);
}
.tq-racks__rim b {
  display: inline-grid;
  place-items: center;
  min-inline-size: 64px;
  padding: 6px 12px 5px;
  border-radius: var(--tq-r-xs);
  background: var(--tq-graphite-900);
  color: var(--tq-ink-950);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-2xl);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 0 rgb(255 255 255 / .06);
}
.tq-racks__rackn {
  margin: 0;
  padding-inline-start: var(--tq-sp-6);
  border-inline-start: 1px solid var(--tq-line-strong);
  font-size: var(--tq-fs-sm);
  color: var(--tq-text-muted);
  font-variant-numeric: tabular-nums;
}
.tq-racks__sizes { display: flex; flex-wrap: wrap; gap: var(--tq-sp-3); flex-basis: 100%; }
.tq-racks__sizes[hidden] { display: none; }
.tq-racks__sizego {
  display: inline-flex;
  align-items: center;
  block-size: 30px;
  padding-inline: var(--tq-sp-5);
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-full);
  background: var(--tq-surface);
  color: var(--tq-text-body);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: var(--tq-t-color), border-color var(--tq-d-fast) var(--tq-ease), transform var(--tq-d-fast) var(--tq-ease-out);
}
.tq-racks__sizego:hover { color: var(--tq-accent-text); border-color: rgb(var(--tq-accent-text-rgb) / .4); transform: translateY(-1px); }
.tq-racks__grid { grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: var(--tq-sp-8) var(--tq-sp-7); }
.tq-racks__grid > .tq-tire[hidden] { display: none; }


/* ═══ 4 · THE CARDS' OWN LINES ═══════════════════════════════════════════
   The installed line's promotion, its add-ons priced by phone and the fees
   when installation is by phone: as the Fitting Bay sets them (gw.sec2.css). */

.tq-racks .tq-tire__installed .tq-racks__promo { display: flex; align-items: center; gap: var(--tq-sp-2); flex-basis: 100%; color: var(--tq-success); font-weight: var(--tq-fw-semibold); white-space: normal; }
.tq-racks .tq-tire__installed .tq-racks__promo .tq-i { inline-size: 14px; block-size: 14px; }
.tq-racks .tq-tire__installed .tq-racks__phoneitems,
.tq-racks .tq-tire__installed .tq-racks__fee { flex-basis: 100%; white-space: normal; }
.tq-racks__utqg {
  margin-inline-end: var(--tq-sp-2);
  font-family: var(--tq-font-display);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .06em;
  color: var(--tq-text-subtle);
}


/* ═══ 5 · NOTHING MATCHES · WHO TO ASK ═══════════════════════════════════ */

.tq-racks__none, .tq-racks__nosize { padding-block-start: var(--tq-sp-6); }   /* under the bar, where the racks would start */
.tq-racks__none[hidden], .tq-racks__nosize[hidden] { display: none; }
.tq-racks__nosize .tq-empty__title span { white-space: nowrap; font-family: var(--tq-font-display); letter-spacing: .03em; }
.tq-racks__emptyacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tq-sp-5); margin-block-start: var(--tq-sp-3); }
.tq-racks .tq-empty__msg a, .tq-racks__ask a { color: var(--tq-accent-text); font-weight: var(--tq-fw-semibold); white-space: nowrap; }
.tq-racks__ask {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-4);
  margin: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem) 0 0;
  padding-block-start: var(--tq-sp-8);
  border-block-start: 1px solid var(--tq-line);
  font-size: var(--tq-fs-md);
  color: var(--tq-text-muted);
}
.tq-racks__ask .tq-i { flex: none; inline-size: 22px; block-size: 22px; color: var(--tq-text-subtle); }
.tq-racks__down { margin-block-start: var(--tq-sp-4); }


/* ═══ 6 · A NARROW SCREEN · A PHONE ══════════════════════════════════════
   Under 1100px the rail leaves the aisle: the filters open in the kit's
   sheet (the script moves them there), from the button in the bar, and the
   filters that are on show over the racks. Without the script the rail
   stays, over the racks (the page's noscript style).                     */

@media (max-width: 1279px) {
  .tq-racks__wall { --wall-w: 60cqw; }
}
@media (max-width: 1099px) {
  .tq-racks__layout { grid-template-columns: minmax(0, 1fr); }
  .tq-racks__rail { position: static; max-block-size: none; overflow: visible; padding: 0; }
  .tq-racks__rail { display: none; }
  .tq-racks__open { display: inline-flex; }
  .tq-racks__active:not([hidden]) { display: flex; }
  .tq-racks__wall { --wall-w: 56cqw; }
}
@media (max-width: 899px) {
  /* the tire rises out of the band's floor, across its width: the tread, the size and its small letters in view */
  .tq-racks__head { --wall-h: calc(27vw + 1.5rem); padding-block-end: calc(var(--wall-h) + var(--tq-sp-3)); }
  .tq-racks__wall { inset-block-start: auto; block-size: var(--wall-h); }
  .tq-racks__fade { --wall-d: 100cqw; inline-size: 100%; -webkit-mask-image: none; mask-image: none; }
  .tq-racks__fade::before { display: none; }
  .tq-racks__tire { --wall-top: -6vw; }
}
@media (max-width: 639px) {
  .tq-racks__title { max-inline-size: none; }
  .tq-racks__find { flex-wrap: nowrap; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-8); }
  .tq-racks__sizefield { flex: 1 1 auto; min-inline-size: 0; }
  .tq-racks__go { inline-size: var(--tq-control-h-lg); padding: 0; justify-content: center; }
  .tq-racks__go .tq-i { margin: 0; }
  .tq-racks__golabel { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tq-racks__bar { gap: var(--tq-sp-5); }
  .tq-racks__summary { flex-basis: 100%; order: -1; }
  .tq-racks__open { flex: none; justify-content: center; }
  .tq-racks__sort { flex: 1 1 0; min-inline-size: 0; }
  .tq-racks__sortlabel { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tq-racks__select { inline-size: auto; min-inline-size: 0; flex: 1 1 auto; }
  .tq-racks__rackhead { gap: var(--tq-sp-4) var(--tq-sp-5); }
  .tq-racks__ask { align-items: flex-start; }
}

/* the sheet: the rail's filters, with the sheet's own clear in its foot */
.tq-racks__sheet .tq-modal__body { padding-block-start: var(--tq-sp-2); }
.tq-racks__sheet .tq-racks__filters { gap: var(--tq-sp-8); }
.tq-racks__sheet .tq-racks__clear { display: none; }
.tq-racks__sheet .tq-modal__foot { justify-content: space-between; }


/* ═══ 7 · MOTION · REDUCED MOTION · FORCED COLOURS ═══════════════════════
   One moment: the size lands on the sidewall (on arrival with a size, and
   at each search), the letters pressing in and a shop light crossing them
   once. Reduced motion: the letters are simply there.                     */

/* arriving with a size, the letters wait for the script to land them; if it never comes, they show after 2.5 s */
.tq-racks__wall.is-arriving .tq-racks__letters { animation: tq-racks-show 1ms 2.5s both; }
@keyframes tq-racks-show { from { opacity: 0; } to { opacity: 1; } }
.tq-racks__wall.is-landing .tq-racks__letters { animation: tq-racks-land var(--tq-d-ambient) var(--tq-ease-out) both; }
.tq-racks__wall.is-landing .tq-racks__shine { animation: tq-racks-shine-on 1.5s var(--tq-ease) .35s both; }
.tq-racks__wall.is-landing .tq-racks__sweep { animation: tq-racks-sweep 1.5s var(--tq-ease-in-out) .35s both; }
@keyframes tq-racks-land {
  0%   { opacity: 0; transform: scale(1.035); filter: blur(3px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
@keyframes tq-racks-shine-on { 0%, 100% { opacity: 0; } 20%, 80% { opacity: .55; } }
@keyframes tq-racks-sweep { from { transform: translateX(0); } to { transform: translateX(1260px); } }

@media (prefers-reduced-motion: reduce) {
  .tq-racks__wall.is-arriving .tq-racks__letters,
  .tq-racks__wall.is-landing .tq-racks__letters,
  .tq-racks__wall.is-landing .tq-racks__shine,
  .tq-racks__wall.is-landing .tq-racks__sweep { animation: none; }
  .tq-racks__sizego:hover { transform: none; }
}

@media (forced-colors: active) {
  .tq-racks__wall { display: none; }
  .tq-racks__rim b { border: 1px solid CanvasText; }
  .tq-racks__nf { border: 1px solid CanvasText; }
  /* the kit marks a pressed chip by its fill, which forced colours take away: the system's own highlight instead */
  .tq-racks .tq-chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

@media print {
  .tq-racks__wall, .tq-racks__rail, .tq-racks__bar, .tq-racks__active, .tq-racks__find, .tq-racks__ask, .tq-tire__action { display: none !important; }
  .tq-racks__layout { display: block; }
  /* the band prints on white (the kit's print rule takes its fill): its words in black, no room left for the sidewall */
  .tq-racks__head { padding-block-end: var(--tq-sp-8) !important; }
  .tq-racks__head .tq-racks__title, .tq-racks__head .tq-racks__kick, .tq-racks__head .tq-racks__lead, .tq-racks__head .tq-crumbs,
  .tq-racks__head .tq-crumbs a, .tq-racks__head .tq-crumbs span { color: #000 !important; }
  .tq-racks__rim b { background: none !important; color: #000 !important; border: 1px solid #000; }
}