/* Shoemaker Emergency Lighting — the DECKED page.
   The Switch Panel world, unchanged. The product-page pieces it shares with
   TigerTough (pick list, facts, photographs, rails, installs) come from
   tigertough.css; what is new here is the measured bench: DECKED's own cutouts
   standing on a dark bench lit by the section's lamp, with the dimensions DECKED
   publishes drawn on them. */

/* ---------- hero: the drawer system reads to the right of the glass ---------- */
.dk-hero {
  min-height: min(92svh, 880px);
  place-items: center start;
  padding-inline: max(var(--gut), calc((100% - 1220px) / 2));
}
.dk-hero .hero-media img { object-position: 64% 46%; }
/* Clears the header band and lands the foot on ink; nothing darkens the glass. */
.dk-hero .hero-media::after {
  background: linear-gradient(180deg, rgba(14,16,19,0.72) 0%, rgba(14,16,19,0) 17%, rgba(14,16,19,0) 72%, var(--ink) 100%);
}
@media (max-width: 860px) {
  .dk-hero { place-items: center; }
  .dk-hero .hero-media img { object-position: 50% 46%; }
}
/* On a phone the panel is taller than the photograph's free space, and over the
   whole photograph it hid the drawer system (finish review). So the photograph is
   a band at the top with the drawer in full view, and the glass begins over its
   lower edge, revealing it there, before running on over the ink the band fades into. */
@media (max-width: 560px) {
  .dk-hero { place-items: start center; padding-top: calc(var(--safe-t) + 4.4rem + 50vw); }
  .dk-hero .hero-media { bottom: auto; height: calc(var(--safe-t) + 4.4rem + 74vw); }
  .dk-hero .hero-media img { object-position: 50% 26%; }
  .dk-hero .hero-media::after {
    background: linear-gradient(180deg, rgba(14,16,19,0.7) 0%, rgba(14,16,19,0) 24%, rgba(14,16,19,0) 62%, var(--ink) 100%);
  }
}
/* The h1 names all three vehicles, longer than a product name: a step down from the
   panel display size keeps it to three lines, so the rockers stay in the first viewport. */
.dk-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); }
.dk-plate { padding-block: 0.4rem 0.85rem; }
.dk-plate img { width: auto; height: 30px; border-radius: 0; }
@media (max-width: 560px) { .dk-plate img { height: 26px; } }

/* ---------- section rhythm ---------- */
.dk-head { max-width: 62ch; }
.dk-first { margin-top: clamp(1.6rem, 3.6vw, 2.6rem); }
.dk-gap { margin-top: clamp(2.4rem, 5.4vw, 4rem); }
.dk-gap-sm { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
/* a new product inside a vehicle's section: a seam, so one ends before the next begins */
.dk-seam {
  margin-top: clamp(2.6rem, 5.8vw, 4.4rem);
  padding-top: clamp(2.2rem, 5vw, 3.6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dk-sub {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-stretch: 110%;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.dk-measure,
.dk-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1.6rem, 3.6vw, 2.6rem);
}
@media (min-width: 960px) {
  .dk-measure { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dk-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .dk-split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .dk-split--flip > :first-child { order: 2; }
  /* the video and the words beside it end level: equal columns, the readout under the copy,
     the quote under the video */
  .dk-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dk-narrow-only { display: none; }
}
/* stacked on a phone, the quote follows the words instead, after the reader knows what it is */
@media (max-width: 959px) { .dk-wide-only { display: none; } }
/* under the video the rail spans its full width, so its rule ends where the picture does */
.dk-video .tt-rail { max-width: none; }
.dk-split .tt-copy > .dk-sub:first-child { margin-top: 0; }

/* ---------- readouts: DECKED's numbers, as written ---------- */
.dk-specs .spec { grid-template-columns: minmax(7.4rem, 0.7fr) minmax(0, 1.6fr); }
.dk-specs .spec dd { text-align: left; color: #D6DCE4; }
@media (max-width: 420px) { .dk-specs .spec { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }
.tt-copy > .dk-specs { margin-top: clamp(1.2rem, 2.6vw, 1.6rem); }

/* ---------- accessories, by name and SKU ---------- */
.dk-acc { list-style: none; padding: 0; display: grid; }
.dk-acc li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1.2rem;
  align-items: baseline;
  padding: 1rem 0 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.dk-acc strong { font-weight: 650; color: #fff; }
.dk-acc p { margin-top: 0.25rem; color: var(--paper-dim); font-size: 0.92rem; max-width: 56ch; }
.dk-sku {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-stretch: 90%;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--paper-low);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .dk-acc li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the quote button takes its circuit's lamp ----------
   Red is the patrol circuit and the closing field; the pickup and organize sections
   light their quote in amber and the SUV section in lamp white, with dark type
   (#1B1206 on #E28814 is 6.8:1 at its foot; #0E1013 on #C9D3DF is 12.6:1). */
.dk-sec--amber .btn-lamp {
  background: linear-gradient(180deg, #FFB84F 0%, #E28814 100%);
  color: #1B1206;
}
.dk-sec--amber .btn-lamp:hover { background: linear-gradient(180deg, #FFC266 0%, #EC9420 100%); }
.dk-sec--white .btn-lamp {
  background: linear-gradient(180deg, #F2F5F9 0%, #C9D3DF 100%);
  color: #0E1013;
}
.dk-sec--white .btn-lamp:hover { background: linear-gradient(180deg, #FFFFFF 0%, #D6DEE8 100%); }

/* ---------- the CargoGlide video ---------- */
.dk-video { margin: 0; position: relative; }
/* The site's own play control over the poster, with the length and a promise of sound.
   The browser's controls take over once it plays (js/decked.js); without JS they are there
   from the start. */
.dk-play {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: calc(var(--dk-video-h, 56%) / 2 - 30px);
  padding: 0.45rem 1.15rem 0.45rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: rgba(14, 16, 19, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
  transition: background var(--detent), transform var(--detent);
}
.dk-play i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFB84F 0%, #E28814 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.7);
}
.dk-play svg { width: 18px; height: 18px; margin-left: 3px; fill: #1B1206; }
.dk-play b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-stretch: 104%; font-variant-numeric: tabular-nums; }
.dk-play span { color: var(--paper-dim); font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) {
  .dk-play:hover { background: rgba(14, 16, 19, 0.72); transform: scale(1.03); }
}
.dk-play[hidden] { display: none; }
@media (max-width: 420px) { .dk-play span { display: none; } }
.dk-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.9);
}
.dk-video figcaption { margin-top: 0.7rem; }
/* captions in the site's own type, on ink, not the browser's grey box */
.dk-video video::cue {
  background: rgba(14, 16, 19, 0.84);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* ---------- truck drawer photographs ---------- */
.dk-pair { display: grid; gap: 0.8rem; }
@media (min-width: 700px) { .dk-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dk-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}

/* ---------- SUV fitment ---------- */
.dk-fits { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dk-fits th,
.dk-fits td { text-align: left; vertical-align: baseline; padding: 0.85rem 0.9rem 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.11); }
.dk-fits thead th {
  padding-block: 0 0.6rem;
  border-top: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 78%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-low);
}
.dk-fits tbody th { font-weight: 600; color: #fff; }
.dk-fits tbody th span { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 0.86rem; color: var(--paper-dim); }
.dk-fits td { color: #D6DCE4; white-space: nowrap; }
.dk-fits td:last-child { padding-right: 0; color: var(--paper-low); }

/* ---------- Payloaders: three bins standing on one bench ---------- */
.dk-bins {
  list-style: none;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.2rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
  margin-top: clamp(1.6rem, 3.6vw, 2.6rem);
  display: grid;
  gap: clamp(1.8rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 30% at 50% 34%, color-mix(in srgb, var(--lamp, #DCE6F2) 12%, transparent), transparent 72%),
    linear-gradient(180deg, #191E23 0%, #12161A 78%, #101317 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 50px -30px rgba(0, 0, 0, 0.9);
}
@media (min-width: 760px) { .dk-bins { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.dk-bins li { display: grid; align-content: start; }
/* Every bin stands on the same horizon, the stage's foot: each image is lowered by its
   own shadow's depth (measured at build time), whatever size it is shown at. */
.dk-bin-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(130px, 16vw, 200px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.dk-bin-stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  translate: 0 calc((1 - var(--b)) * 100%);
}
.dk-bin-stage + h3 { position: relative; padding-top: 1.4rem; }
.dk-bins h3 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dk-bins h3 span { font-weight: 700; font-stretch: 100%; font-size: 0.55em; letter-spacing: 0; color: var(--paper-dim); }
.dk-carry { margin-top: 0.55rem; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
.dk-bins .t-md { margin-top: 0.3rem; }
.dk-colors { margin-top: 0.55rem; color: var(--paper-low); }