@charset "utf-8";
/* ============================================================================
   TORQUE · ONE TIRE · tq.tirepage.css · /Tire/{id}/{name} (Tire.aspx)
   Round F3-2. READ ITS SIDEWALL. Built only from the site kit (tq.tokens.css,
   tq.base.css, tq.site.css) and /Tires' band (tq.racks.css): the page head,
   the crumbs, the badges, the price, the stock, the buttons, the totals, the
   panel, the kit's sidewall drawing, the stats, the ticks, the chips, the
   tire cards, the empty state and the alert are the kit's. This file adds
   what the page alone has:
     1  the band: the tire's name over /Tires' sidewall
     2  the set: the photos beside the deal, the set installed
     3  read its sidewall: the drawing beside its marks, the UTQG grades
     4  about it, the rows under it, a tire not found
     5  a narrow screen, print, forced colours
   ========================================================================= */


/* ═══ 1 · THE BAND ═══════════════════════════════════════════════════════
   /Tires' page head (tq.racks.css) with this tire's sidewall: the brand
   raised, the model and the size in the small letters. Its name beside it,
   the way the sidewall says it: the brand over the model, then the size.  */

.tq-tirepage__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tq-sp-3);
  max-inline-size: min(36rem, 52%);
  margin: var(--tq-sp-7) 0 0;
}
.tq-tirepage__brand {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
}
.tq-tirepage__model {
  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);
  overflow-wrap: anywhere;
}
.tq-tirepage__size {                       /* the kit's read-out, larger: the size is the tire's name too */
  margin-block-start: var(--tq-sp-3);
  font-size: var(--tq-fs-2xl);
  letter-spacing: .03em;
}
.tq-tirepage__flags { display: flex; flex-wrap: wrap; gap: var(--tq-sp-3); margin: var(--tq-sp-7) 0 0; }
.tq-tirepage__head--plain .tq-tirepage__title { max-inline-size: 30ch; }


/* ═══ 2 · THE SET ════════════════════════════════════════════════════════
   The photos beside the deal: the set's price, the stock, the one action,
   and the set installed in the quote window's own words.                  */

.tq-tirepage__buyin {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--tq-sp-10) clamp(2rem, 1rem + 3.5vw, 4.5rem);
}

/* the photos: on the card's own paper, a white backdrop melting into it */
.tq-tirepage__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xl);
  background: radial-gradient(120% 90% at 50% 40%, var(--tq-paper-0), var(--tq-paper-200));
  overflow: hidden;
}
.tq-tirepage__stage > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.tq-tirepage__stage.is-out > img { filter: grayscale(.8); opacity: .7; }
.tq-tirepage__nophoto { display: grid; place-items: center; gap: var(--tq-sp-4); color: var(--tq-text-subtle); font-size: var(--tq-fs-sm); }
.tq-tirepage__nophoto svg { inline-size: 64px; block-size: 64px; opacity: .6; }
.tq-tirepage__thumbs { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-5); }
.tq-tirepage__thumb {
  display: block;
  inline-size: 88px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid var(--tq-line-strong);
  border-radius: var(--tq-r-sm);
  background: radial-gradient(120% 90% at 50% 40%, var(--tq-paper-0), var(--tq-paper-200));
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--tq-d-fast) var(--tq-ease);
}
.tq-tirepage__thumb > img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tq-tirepage__thumb:hover { border-color: rgb(var(--tq-steel-rgb) / .4); }
.tq-tirepage__thumb[aria-pressed="true"] { border-color: var(--tq-accent-text); }
.tq-tirepage__thumb:focus-visible { border-radius: var(--tq-r-sm); }   /* the base's ring (and its outline in high contrast), the thumb's own corners */

/* the deal */
.tq-tirepage__deal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tq-sp-7); min-inline-size: 0; }
.tq-tirepage__stock { margin: calc(var(--tq-sp-3) * -1) 0 0; }
.tq-tirepage__stock .tq-stock { font-size: var(--tq-fs-sm); }
.tq-tirepage__acts { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); }
.tq-tirepage__ask, .tq-tirepage__note {
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-4);
  margin: 0;
  max-inline-size: 52ch;
  font-size: var(--tq-fs-sm);
  line-height: var(--tq-lh-body);
  color: var(--tq-text-muted);
}
.tq-tirepage__ask .tq-i, .tq-tirepage__note .tq-i { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 1px; color: var(--tq-text-subtle); }

/* the set installed: the quote window's totals, on a sunken panel */
.tq-tirepage__set { align-self: stretch; }
.tq-tirepage__seth {
  margin: 0 0 var(--tq-sp-6);
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.3;
  color: var(--tq-text-strong);
}
.tq-tirepage__set .tq-totals dt { padding-inline-end: var(--tq-sp-4); }
.tq-tirepage__incl {
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-3);
  margin: var(--tq-sp-7) 0 0;
  font-size: var(--tq-fs-xs);
  line-height: 1.5;
  color: var(--tq-text-muted);
}
.tq-tirepage__incl .tq-i { flex: none; inline-size: 18px; block-size: 18px; color: var(--tq-success); }
.tq-tirepage__nudge { margin: var(--tq-sp-6) 0 0; }
.tq-tirepage__offers { margin-block-start: var(--tq-sp-6); font-size: var(--tq-fs-xs); color: var(--tq-text-muted); }
.tq-tirepage__offers p { margin: 0; }
.tq-tirepage__offers ul { display: flex; flex-direction: column; gap: var(--tq-sp-2); margin: var(--tq-sp-3) 0 0; padding: 0; list-style: none; }
.tq-tirepage__offers li span { font-weight: var(--tq-fw-semibold); color: var(--tq-text-body); }
.tq-tirepage__offers small { font-size: inherit; color: var(--tq-text-subtle); }


/* ═══ 3 · READ ITS SIDEWALL ══════════════════════════════════════════════
   The kit's sidewall drawing with this tire's size, load and speed, each
   mark lit; beside it what each mark means. Pointing at a mark's line dims
   the others on the drawing (tq.tirepage.js).                             */

.tq-tirepage__readin {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--tq-sp-10) clamp(2rem, 1rem + 3.5vw, 4.5rem);
}
.tq-tirepage__swfig { display: grid; place-items: center; margin: 0; }
.tq-tirepage__sw { max-inline-size: 460px; }
.tq-tirepage__sw tspan[data-mark] { transition: fill-opacity var(--tq-d-base) var(--tq-ease); }
.tq-tirepage__sw.is-pointing tspan[data-mark]:not(.is-on) { fill-opacity: .28; }

/* the marks' column is as wide as the widest mark (the server's --glyph, in ems of the mark's face, from the face's own
   widths), so 121/118 or 33X12.50's 12.50 stays on one line; a mark typed longer than 6 ems wraps (is-long) */
.tq-tirepage__marks {
  --glyph-fs: var(--tq-fs-2xl);
  --glyph-gap: var(--tq-sp-6);
  --glyph-col: max(4.5rem, calc(var(--glyph, 3) * var(--glyph-fs) + var(--glyph-gap)));
  margin: 0;
}
.tq-tirepage__mark {
  padding: var(--tq-sp-5) var(--tq-sp-5) var(--tq-sp-5) 0;
  border-block-start: 1px solid var(--tq-line);
}
.tq-tirepage__mark:last-child { border-block-end: 1px solid var(--tq-line); }
.tq-tirepage__mark dt { display: flex; align-items: baseline; margin: 0; }
.tq-tirepage__glyph {
  flex: none;
  inline-size: var(--glyph-col);
  padding-inline-end: var(--glyph-gap);
  font-family: var(--tq-font-display);
  font-size: var(--glyph-fs);
  font-weight: var(--tq-fw-bold);
  line-height: 1.1;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--tq-text-strong);
  transition: color var(--tq-d-fast) var(--tq-ease);
}
.tq-tirepage__glyph.is-long { white-space: normal; overflow-wrap: anywhere; }
.tq-tirepage__mname { font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-tirepage__mark dd {
  margin: var(--tq-sp-1) 0 0 var(--glyph-col);
  font-size: var(--tq-fs-sm);
  line-height: var(--tq-lh-body);
  color: var(--tq-text-muted);
}
.tq-tirepage__mark.is-on .tq-tirepage__glyph { color: var(--tq-accent-text); }

/* the UTQG grades: the kit's read-outs, three across */
.tq-tirepage__utqg { margin-block-start: var(--tq-sp-12); }
.tq-tirepage__utqglead { margin: var(--tq-sp-4) 0 0; max-inline-size: 60ch; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-tirepage__utqglead b { color: var(--tq-text-strong); font-family: var(--tq-font-display); font-size: var(--tq-fs-md); letter-spacing: .03em; }
.tq-tirepage__grades { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: var(--tq-sp-8); }
.tq-tirepage__grades .tq-stat:first-child { padding-inline-start: 0; }
.tq-tirepage__gwords { font-size: var(--tq-fs-sm); line-height: var(--tq-lh-body); color: var(--tq-text-muted); }
.tq-tirepage__utqgraw { margin: var(--tq-sp-10) 0 0; font-size: var(--tq-fs-sm); color: var(--tq-text-muted); }
.tq-tirepage__utqgraw b { margin-inline-end: var(--tq-sp-3); color: var(--tq-text-strong); }


/* ═══ 4 · ABOUT IT · THE ROWS UNDER IT · A TIRE NOT FOUND ═══════════════ */

.tq-tirepage__abouth { margin: 0 0 var(--tq-sp-8); }
.tq-tirepage__aboutin {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--tq-sp-10) clamp(2rem, 1rem + 3.5vw, 4.5rem);
}
.tq-tirepage__aboutin.is-one { grid-template-columns: minmax(0, 1fr); }
.tq-tirepage__words { display: flex; flex-direction: column; gap: var(--tq-sp-6); min-inline-size: 0; }
.tq-tirepage__desc { margin: 0; max-inline-size: 64ch; font-size: var(--tq-fs-md); line-height: var(--tq-lh-lead); color: var(--tq-text-body); overflow-wrap: anywhere; }
.tq-tirepage__points { margin-block-start: var(--tq-sp-3); }
.tq-tirepage__facts { display: flex; flex-direction: column; gap: var(--tq-sp-9); min-inline-size: 0; }
.tq-tirepage__fact .tq-h6 { margin: 0 0 var(--tq-sp-5); }
.tq-tirepage__fits { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); margin: 0; padding: 0; list-style: none; }
.tq-tirepage__fits .tq-chip { text-decoration: none; }
.tq-tirepage__fits .tq-chip .tq-i { color: var(--tq-text-subtle); }
.tq-tirepage__warranty { display: flex; align-items: center; gap: var(--tq-sp-4); margin: 0; font-size: var(--tq-fs-md); color: var(--tq-text-body); }
.tq-tirepage__warranty .tq-i { flex: none; inline-size: 22px; block-size: 22px; color: var(--tq-success); }

.tq-tirepage__morein { display: flex; flex-direction: column; gap: var(--tq-sp-13); }
.tq-tirepage__row .tq-head { margin-block-end: var(--tq-sp-8); }
/* the kit's rail swipes on a phone; on a wide screen the row is the kit's own grid (.tq-tires), every card in it (up to 8) */
@media (min-width: 1024px) {
  .tq-tires.tq-tirepage__cards {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-block-end: 0;
  }
}
/* the cards' installed line: its promotion, add-ons priced by phone, fees (as /Tires has them, tq.racks.css section 4) */
.tq-tirepage .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-tirepage .tq-tire__installed .tq-racks__promo .tq-i { inline-size: 14px; block-size: 14px; }
.tq-tirepage .tq-tire__installed .tq-racks__phoneitems,
.tq-tirepage .tq-tire__installed .tq-racks__fee { flex-basis: 100%; white-space: normal; }

.tq-tirepage__gone { padding-block: var(--tq-sp-11); }
.tq-tirepage__emptyacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-3); }
.tq-tirepage__trouble { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tq-sp-8); }
.tq-tirepage__trouble .tq-alert { max-inline-size: 760px; }
.tq-tirepage__trouble .tq-tirepage__emptyacts { justify-content: flex-start; margin: 0; }


/* ═══ 5 · A NARROW SCREEN · PRINT · FORCED COLOURS ════════════════════════
   Under 900px /Tires' sidewall moves to the band's floor, across its width
   (tq.racks.css): the name takes the band's width over it.                 */

@media (max-width: 1023px) {
  .tq-tirepage__buyin, .tq-tirepage__readin, .tq-tirepage__aboutin { grid-template-columns: minmax(0, 1fr); }
  .tq-tirepage__photos { max-inline-size: 640px; }
  .tq-tirepage__swfig { justify-items: start; }
}
@media (max-width: 899px) {
  .tq-tirepage__title { max-inline-size: none; }
  /* a tire not found draws no sidewall: no room kept for one on the band's floor (tq.racks.css keeps it for the drawing) */
  .tq-tirepage__head.tq-tirepage__head--plain { padding-block-end: clamp(2rem, 1.2rem + 2.8vw, 3.25rem); }
}
@media (max-width: 767px) {
  .tq-tirepage__grades { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tq-tirepage__grades .tq-stat { padding: var(--tq-sp-6) 0; }
  .tq-tirepage__grades .tq-stat + .tq-stat { border-inline-start: 0; border-block-start: 1px solid var(--tq-line); }
}
@media (max-width: 559px) {
  .tq-tirepage__acts { inline-size: 100%; }
  .tq-tirepage__acts .tq-btn { flex: 1 1 100%; justify-content: center; }
  .tq-tirepage__thumb { inline-size: 72px; }
  .tq-tirepage__marks { --glyph-fs: var(--tq-fs-xl); --glyph-gap: var(--tq-sp-5); }
  .tq-tirepage__set { padding: var(--tq-sp-6); }
}

/* printed: the band's words in black on the white page, the photo beside the deal, the drawing beside its marks; no
   thumbnails, buttons or rows; a heading stays with what follows it */
@media print {
  .tq-tirepage__thumbs, .tq-tirepage__acts, .tq-tirepage__ask, .tq-tirepage__more, .tq-tirepage__emptyacts { display: none !important; }
  .tq-tirepage .tq-section { padding-block: var(--tq-sp-8) !important; }
  .tq-tirepage__head { padding-block: var(--tq-sp-6) !important; }
  .tq-tirepage__head .tq-tirepage__title, .tq-tirepage__head .tq-tirepage__title *, .tq-tirepage__head .tq-crumbs,
  .tq-tirepage__head .tq-crumbs a, .tq-tirepage__head .tq-crumbs span { color: #000 !important; }
  .tq-tirepage__head .tq-badge { background: none !important; color: #000 !important; border: 1px solid #000; box-shadow: none; }
  .tq-tirepage__title { max-inline-size: none; }
  .tq-tirepage__buyin, .tq-tirepage__readin { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) !important; gap: var(--tq-sp-8) !important; }
  .tq-tirepage h2, .tq-tirepage h3 { break-after: avoid; }
  .tq-tirepage__mark, .tq-tirepage__set, .tq-tirepage__grades .tq-stat, .tq-tirepage__fact { break-inside: avoid; }
}

@media (forced-colors: active) {
  .tq-tirepage__thumb[aria-pressed="true"] { border-color: Highlight; }
  .tq-tirepage__stage > img, .tq-tirepage__thumb > img { mix-blend-mode: normal; }
}