@charset "utf-8";
/* ═══ GoodWay home · section 5 · THE BRANDS ════════════════════════════════
   The brands on the shop's racks. Each brand sits on a shelf of its own:
   its logo on a white plate (the logos came with the shop's site, white
   behind them, so the plate stays white whatever the theme), what the
   website has of it right now (in stock, rim sizes, its seasons as chips
   that open the Tires page filtered, its longest treadwear warranty) and
   its lowest price, with a steel beam under the shelf, the way tires sit
   on a pallet rack. Beside the shelves, the shop's own photo of its racks,
   with a price tag hanging on it: "Tires from $X". While the visitor points
   at a brand, the tag reads that brand's own price, its digits turning on
   the kit's odometer wheels (data-tq-odo; Scripts/gw.sec5.js swaps the
   words). The shelves come in one after another as they are reached (the
   kit's reveal, data-tq-reveal-stagger).
   Torque: the kit's head, buttons, chips, media, odometer and reveal; this
   file adds the shelves, the plates, the beams and the tag. Drawn by
   Services/HomeBrands.vb. Mobile first: the phone, then 768 (each shelf on
   one line), 1024 (a wider band of the photo), 1280 (the photo beside the
   shelves).
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s5 {
  position: relative;
  padding-block: var(--tq-section);
  background: var(--tq-bg);
  color: var(--tq-text-body);
}
.gw-s5__head { margin-block-end: var(--tq-sp-9); }
.gw-s5__head .tq-head__lead { max-inline-size: 56ch; text-wrap: pretty; }
.gw-s5__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-4); }

/* ── the body: the photo, then the shelves ────────────────────────────────── */
.gw-s5__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tq-sp-8); align-items: start; }

/* the photo of the racks, the tag hanging on it */
.gw-s5__rack { position: relative; min-inline-size: 0; }
.gw-s5__photo { aspect-ratio: 4 / 3; box-shadow: var(--tq-el-2); }
.gw-s5__photo > picture { position: absolute; inset: 0; display: block; }
.gw-s5__photo > img, .gw-s5__photo > picture > img { position: absolute; inset: 0; object-position: 50% 42%; }

.gw-s5__tag {
  position: absolute;
  inset-block-start: 38px;
  inset-inline-end: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-inline-size: 132px;
  max-inline-size: calc(100% - 44px);
  padding: 22px 16px 12px 18px;
  border-radius: 7px 7px 10px 10px;
  border-inline-start: 6px solid var(--tq-brand-500);
  background: #FFFFFF;
  color: #15171A;
  box-shadow: 0 14px 26px -10px rgb(0 0 0 / .55), 0 2px 5px rgb(0 0 0 / .22);
  rotate: -3deg;
  transform-origin: 50% -24px;
  pointer-events: none;
}
.gw-s5__tag::before {                 /* the string, from a pin in the photo to the tag's hole */
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: calc(100% - 13px);
  inline-size: 2px;
  block-size: 37px;
  margin-inline-start: -1px;
  background: linear-gradient(180deg, #E8EAED 0 5px, #3C4046 5px);
  border-radius: 1px;
}
.gw-s5__tag::after {                  /* the punched hole */
  content: "";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 50%;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-start: -4px;
  border-radius: 50%;
  background: #2A2D32;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / .6);
}
.gw-s5__tag-what, .gw-s5__tag-each {
  font-size: var(--tq-fs-2xs);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #474C54;
}
.gw-s5__tag-price {
  display: block;
  font-family: var(--tq-font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.15rem);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: #101215;
}
/* the kit's reveal, as a drop onto its string rather than a rise */
.tq-js .gw-s5__tag[data-tq-reveal]:not(.is-in) { transform: translate3d(0, -14px, 0); }

/* ── the shelves ──────────────────────────────────────────────────────────── */
.gw-s5__shelves { display: flex; flex-direction: column; gap: var(--tq-sp-3); margin: 0; padding: 0; list-style: none; min-inline-size: 0; }

.gw-s5__shelf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "plate price" "facts facts" "go go";
  align-items: center;
  gap: var(--tq-sp-5) var(--tq-sp-6);
  padding-block: var(--tq-sp-6) calc(var(--tq-sp-6) + 8px);
}
/* the steel beam under each shelf, with the rack's holes along it */
.gw-s5__shelf::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 6px;
  border-radius: 2px;
  background:
    radial-gradient(circle, rgb(var(--tq-steel-rgb) / .6) 0 1.25px, transparent 1.75px) 18px 50% / 56px 6px repeat-x,
    linear-gradient(180deg, #8A9098 0, #5A5F67 30%, #3A3E44 100%);
  box-shadow: 0 3px 6px -2px rgb(var(--tq-steel-rgb) / .3);
}

/* the plate: white, whatever the theme, because the logos are */
.gw-s5__name { grid-area: plate; margin: 0; min-inline-size: 0; }
.gw-s5__plate {
  display: grid;
  place-items: center;
  inline-size: 148px;
  block-size: 64px;
  padding: 10px 12px;
  border-radius: var(--tq-r-sm);
  background: #FFFFFF;
  box-shadow: var(--tq-el-2), inset 0 0 0 1px rgb(var(--tq-steel-rgb) / .08);
  transition: transform var(--tq-d-base) var(--tq-ease-out), box-shadow var(--tq-d-base) var(--tq-ease-out);
}
.gw-s5__plate picture { display: contents; }
.gw-s5__plate img {
  display: block;
  inline-size: min(var(--lw, 100%), 100%);
  block-size: auto;
  max-block-size: 100%;
  object-fit: contain;
}
.gw-s5__plate--type {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-bold);
  line-height: 1.05;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: #15171A;
}
.gw-s5__shelf:hover .gw-s5__plate,
.gw-s5__shelf:focus-within .gw-s5__plate { transform: translateY(-2px); box-shadow: var(--tq-el-3), inset 0 0 0 1px rgb(var(--tq-steel-rgb) / .08); }

/* what the website has of it */
.gw-s5__facts { grid-area: facts; display: flex; flex-direction: column; align-items: flex-start; gap: var(--tq-sp-4); min-inline-size: 0; }
.gw-s5__stock { display: flex; align-items: flex-start; gap: var(--tq-sp-2); margin: 0; font-size: var(--tq-fs-sm); line-height: 1.4; color: var(--tq-text-body); }
.gw-s5__stock .tq-i { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--tq-success); }
.gw-s5__stock b { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-bold); color: var(--tq-text-strong); font-variant-numeric: tabular-nums; }
.gw-s5__stock.is-out { color: var(--tq-text-muted); }
.gw-s5__n, .gw-s5__rims { white-space: nowrap; }
.gw-s5__rims { color: var(--tq-text-muted); }
.gw-s5__seasons { display: flex; flex-wrap: wrap; gap: var(--tq-sp-2); margin: 0; padding: 0; list-style: none; }
.gw-s5__chip { block-size: 30px; padding-inline: var(--tq-sp-5); font-size: var(--tq-fs-xs); text-decoration: none; }
.gw-s5__chip:focus-visible { outline: none; box-shadow: var(--tq-ring); }
.gw-s5__line { margin: 0; font-size: var(--tq-fs-sm); line-height: 1.45; color: var(--tq-text-body); text-wrap: pretty; }
.gw-s5__warranty { display: flex; align-items: flex-start; gap: var(--tq-sp-2); margin: 0; font-size: var(--tq-fs-xs); line-height: 1.4; color: var(--tq-text-muted); }
.gw-s5__warranty .tq-i { flex: none; inline-size: 16px; block-size: 16px; margin-block-start: 1px; color: var(--tq-text-subtle); }

/* the price and the way to the brand's tires */
.gw-s5__buy { display: contents; }
.gw-s5__from {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  font-size: var(--tq-fs-xs);
  line-height: 1.2;
  text-align: end;
  color: var(--tq-text-muted);
}
.gw-s5__from b {
  font-family: var(--tq-font-display);
  font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem);
  font-weight: var(--tq-fw-bold);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--tq-text-strong);
}
.gw-s5__go {
  grid-area: go;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-2);
  min-block-size: 32px;
  border-radius: var(--tq-r-xs);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  color: var(--tq-accent-text);
  text-decoration: none;
}
.gw-s5__go .tq-i { inline-size: 16px; block-size: 16px; transition: transform var(--tq-d-base) var(--tq-ease-out); }
.gw-s5__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-s5__go:hover .tq-i, .gw-s5__go:focus-visible .tq-i { transform: translateX(3px); }
.gw-s5__go:focus-visible { outline: none; box-shadow: var(--tq-ring); }

/* ── 768: each shelf on one line: plate, facts, price ─────────────────────── */
@media (min-width: 768px) {
  .gw-s5__photo { aspect-ratio: 16 / 9; }
  .gw-s5__photo > img, .gw-s5__photo > picture > img { object-position: 50% 38%; }
  .gw-s5__shelf { grid-template-columns: 184px minmax(0, 1fr) auto; grid-template-areas: "plate facts buy"; gap: var(--tq-sp-5) var(--tq-sp-8); }
  .gw-s5__plate { inline-size: 184px; block-size: 80px; padding: 12px 14px; }
  .gw-s5__buy { grid-area: buy; display: flex; flex-direction: column; align-items: flex-end; gap: var(--tq-sp-3); }
  .gw-s5__go { justify-self: auto; }
}

/* ── 1024: a wider band of the photo over the shelves ─────────────────────── */
@media (min-width: 1024px) {
  .gw-s5__photo { aspect-ratio: 21 / 9; }
  .gw-s5__photo > img, .gw-s5__photo > picture > img { object-position: 50% 36%; }
}

/* ── 1280: the photo beside the shelves, held in view while they scroll by ── */
@media (min-width: 1280px) {
  .gw-s5__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tq-sp-10); }
  .gw-s5__body--nophoto { grid-template-columns: minmax(0, 1fr); }
  .gw-s5__rack { position: sticky; inset-block-start: calc(var(--tq-header-h, 72px) + var(--tq-sp-8)); }
  .gw-s5__photo { aspect-ratio: 3 / 4; }
  .gw-s5__photo > img, .gw-s5__photo > picture > img { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gw-s5__plate, .gw-s5__go .tq-i { transition: none; }
}
/* printed before the shelves were reached: all of them */
@media print {
  .gw-s5 [data-tq-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .gw-s5__rack { position: static; }
}
@media (forced-colors: active) {
  .gw-s5__plate, .gw-s5__tag { border: 1px solid CanvasText; }
  .gw-s5__shelf::after { background: CanvasText; }
}