/* Shoemaker Emergency Lighting — the WeatherTech range.
   The Switch Panel world, unchanged, with the Feniex shelf for a long range:
   a control plate of latching category rockers and a find field over cards.
   What is new is that the cards are WeatherTech's photographs, not cutouts on
   a bench, and that the WeatherTech logo sits on a solid ink plate: its brand
   guidelines keep the logo off a busy photograph, and glass is meant to show
   the photograph through it. */

/* ---------- hero: the fender flares are on the truck's near side, so the glass sits right ---------- */
.wt-hero {
  min-height: min(92svh, 880px);
  place-items: center end;
  padding-inline: max(var(--gut), calc((100% - 1220px) / 2));
}
.wt-hero .hero-media img { object-position: 40% 62%; }
/* Clears the header band and lands the foot on ink; nothing darkens the glass. The top
   stop is firmer than on the other brand pages: WeatherTech shoots in daylight, and the
   nav sat on a white truck roof and pale sky (finish review). */
.wt-hero .hero-media::after {
  background: linear-gradient(180deg, rgba(14,16,19,0.86) 0, rgba(14,16,19,0.86) calc(var(--safe-t) + 4rem), rgba(14,16,19,0) calc(var(--safe-t) + 9rem), rgba(14,16,19,0) 72%, var(--ink) 100%);
}
.wt-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); }
@media (max-width: 860px) {
  .wt-hero { place-items: center; }
}
/* On a phone the panel is taller than the photograph's free space and would hide the
   truck, so the photograph is a band at the top and the glass begins over its lower
   edge (the DECKED hero's answer to the same problem). */
@media (max-width: 560px) {
  .wt-hero { place-items: start center; padding-top: calc(var(--safe-t) + 4.4rem + 52vw); }
  .wt-hero .hero-media { bottom: auto; height: calc(var(--safe-t) + 4.4rem + 76vw); }
  .wt-hero .hero-media img { object-position: 40% 60%; }
  .wt-hero .hero-media::after {
    /* A fixed-height band, not a percentage: the phone photo is ~366px tall, and 26% of it
       left the nav on bright sky at under 3:1 (finish review). */
    background: linear-gradient(180deg, rgba(14,16,19,0.9) 0, rgba(14,16,19,0.9) calc(var(--safe-t) + 3.4rem), rgba(14,16,19,0) calc(var(--safe-t) + 7rem), rgba(14,16,19,0) 62%, var(--ink) 100%);
  }
}

/* A product's own photograph is framed by WeatherTech for the product, not for a panel:
   the glass stands left, where the type reads, and the whole photograph is in the
   gallery below. */
.wt-hero--product { place-items: center start; }
.wt-hero--product .hero-media img { object-position: 64% 50%; }
.wt-hero--product h1 { font-size: clamp(1.95rem, 4.2vw, 3.1rem); }
@media (max-width: 860px) { .wt-hero--product { place-items: center; } }
@media (max-width: 560px) {
  /* The call bar carries the actions here, so the hero ends with its panel, not a band of ink. */
  .wt-hero--product { place-items: start center; min-height: 0; padding-bottom: 2rem; }
  .wt-hero--product .hero-media img { object-position: 50% 50%; }
}

/* A photograph on white would turn the glass into a grey slab. It stands on a light
   tile beside the panel instead, the way it was shot. */
.wt-hero--tile .hero-media {
  inset: 50% max(var(--gut), calc((100% - 1220px) / 2)) auto auto;
  width: min(44vw, 540px);
  aspect-ratio: 1;
  transform: translateY(-46%);
  /* No inset: the photo's own white is the margin, and a product that runs off its frame
     (a belt strap) runs to the tile's edge instead of stopping mid-air. */
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
}
.wt-hero--tile .hero-media img { object-fit: contain; object-position: 50% 50%; }
.wt-hero--tile .hero-media::after { display: none; }
@media (max-width: 860px) {
  .wt-hero--tile { place-items: start center; padding-top: calc(var(--safe-t) + 5.2rem + min(68vw, 420px) + 1.2rem); }
  .wt-hero--tile .hero-media {
    inset: calc(var(--safe-t) + 5.2rem) auto auto 50%;
    width: min(68vw, 420px);
    height: auto;          /* the phone photo band's fixed height must not unsquare the tile */
    transform: translateX(-50%);
  }
}

.wt-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.15rem;
  row-gap: 0.3rem;
  margin: -0.2rem 0 clamp(1rem, 2.4vw, 1.3rem);
  color: var(--paper-dim);
}
.wt-meta span:first-child { color: var(--paper); }

/* ---------- made for what it goes on: a filled-in quote as a readout ---------- */
.wt-ticket { margin: 0; }
.wt-ticket figcaption { margin-top: 0.6rem; }

/* ---------- one product ---------- */
.wt-detail { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 960px) { .wt-detail { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.wt-detail .tt-list { margin-top: clamp(1rem, 2.4vw, 1.4rem); }
.wt-colors { color: var(--paper-dim); }
.wt-grid { margin-top: 0; }
.wt-grid .job-shot.is-lead img { aspect-ratio: 4 / 3; max-height: none; object-fit: cover; }
/* WeatherTech's on-white product shots stay on white: cropped to fill, they lose the product. */
.wt-shot.is-onwhite { background: #fff; }
.wt-shot.is-onwhite img { object-fit: contain; }
.credit { margin-top: clamp(1.6rem, 3.6vw, 2.4rem); }

/* ---------- the shelf: WeatherTech's photographs fill the plate ---------- */
/* Seven groups: four across leaves one short row, not one orphan. */
@media (min-width: 1100px) { .wt-shelf .bank--shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Four "more" cards fill the row instead of leaving a fifth column empty. */
.wt-more .parts { grid-template-columns: repeat(auto-fit, minmax(min(44%, 214px), 1fr)); }
.wt-all { margin-top: clamp(1.2rem, 3vw, 1.8rem); display: inline-flex; }
.wt-part .part-plate { background: var(--ink-3); }
.wt-part .part-plate::before { display: none; }
.wt-part .part-plate.is-photo img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* An on-white cover arrives keyed (tools/weathertech-build.py), so it stands on the dark plate
   like the photographs around it, under a little light so a black mat still reads. */
.wt-part .part-plate.is-cut { background: radial-gradient(78% 72% at 50% 44%, var(--ink-4), var(--ink-3) 74%); }
.wt-part .part-plate.is-cut img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.wt-part .part-plate.is-onwhite { background: #fff; }
.wt-part .part-plate.is-onwhite img { inset: 0; width: 100%; height: 100%; object-position: 50% 50%; }
.wt-part a:hover .part-plate img { transform: scale(1.03); }
.wt-part .part-no { color: var(--paper-low); }
/* One-word names (WindshieldFone™) must not widen a two-up card on a 320px phone. */
.wt-part { min-width: 0; }
.wt-part .part-name { overflow-wrap: break-word; }

/* ---------- shelf to product ----------
   The tapped photograph becomes the product page's hero. A 4:3 card growing into
   a full-bleed hero changes shape, so both snapshots cover their box rather than
   stretch to it. */
.wt-hero--product [data-vt-hero] { view-transition-name: bench-product; }
::view-transition-old(bench-product),
::view-transition-new(bench-product) { height: 100%; object-fit: cover; }
.wt-hero--tile [data-vt-hero] { view-transition-name: none; }