/* =========================================================================
   Chauffeur Business Kit — dedicated product page, page-specific styles.
   Scoped to .kit-* selectors, living only in this page's own directory, so
   nothing here can affect the homepage or the Tracker page (its own
   tracker.css is untouched). Reuses the shared tokens and components from
   /styles.css — only what that stylesheet doesn't already cover lives here.
   Structure mirrors the approved Tracker product page exactly, including its
   corrected single-column breakpoint (900px, used consistently everywhere
   below — no 600px/900px mismatch).
   ========================================================================= */

/* ---------- Hero: two-column product layout, ~1240px, ~60/40 ---------- */
.kit-hero { padding-top: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); padding-bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.kit-hero__wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kit-hero__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas: "gallery top" "gallery info";
  align-items: start;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}
.kit-hero__top { grid-area: top; }
.kit-hero__gallery { grid-area: gallery; }
.kit-hero__info { grid-area: info; }
@media (max-width: 900px) {
  .kit-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "gallery" "info";
    gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }
}

.kit-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0;
}
.kit-hero__lead {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 46ch;
}

/* Compact "£147 · One-time payment" line. */
.kit-price { display: block; margin: 0.6rem 0 0; font-size: 1.1rem; line-height: 1.4; }
.kit-price__amount { font-weight: 700; color: var(--color-text); }
.kit-price__sep { color: var(--color-text-faint); }
.kit-price__terms { font-weight: 500; color: var(--color-text-soft); }

.kit-hero__includes {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: 48ch;
}
.kit-hero__delivery {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-soft);
}
.kit-hero__buy { margin-top: var(--space-5); }

/* ---------- Slideshow ---------- */
.kit-slideshow { max-width: 620px; }
@media (min-width: 901px) { .kit-slideshow { max-width: none; } }

.kit-slide-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
  overflow: hidden;
}
.kit-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* complete artwork shown, never cropped or stretched */
}
.kit-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  background: rgba(11, 11, 14, 0.72);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.kit-slide-arrow:hover { background: rgba(18, 18, 22, 0.9); border-color: var(--color-accent-line); }
.kit-slide-arrow--prev { left: 12px; }
.kit-slide-arrow--next { right: 12px; }

.kit-slide-expand {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: rgba(11, 11, 14, 0.72);
  color: var(--color-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.kit-slide-expand:hover { border-color: var(--color-accent-line); }

.kit-slide-counter {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 14, 0.72);
  color: var(--color-text-soft);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}

/* Compact thumbnail strip — kept inside the gallery column (flex-wrap so
   seven thumbnails never force the column wider than the stage above it). */
.kit-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
}
.kit-thumb {
  display: flex;
  flex: 0 0 auto;
  width: 76px;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  transition: border-color 0.16s var(--ease);
}
.kit-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-bg); }
.kit-thumb span {
  padding: 0.28rem 0.25rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.62rem;
  line-height: 1.2;
  color: var(--color-text-soft);
}
.kit-thumb:hover { border-color: var(--color-line-strong); }
.kit-thumb.is-active { border-color: var(--color-accent-line); }
.kit-thumb.is-active span { color: var(--color-text); font-weight: 600; }

.kit-slideshow__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-eyebrow);
  color: var(--color-text-faint);
  text-align: center;
}

/* ---------- Enlarged image view ---------- */
.kit-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.kit-lightbox[hidden] { display: none; }
.kit-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.86);
  backdrop-filter: blur(2px);
}
.kit-lightbox__panel { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; }
.kit-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
}
.kit-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
body.kit-lightbox-open { overflow: hidden; }

/* Restrained accordion-section heading, deliberately smaller than the
   product title so it doesn't compete with it. */
.kit-details #kit-details-title {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

/* Compact-hero elements: not part of the two-column desktop layout, hidden
   by default and switched on inside the single-column block below. */
.kit-slide-controls-compact { display: none; }

/* =========================================================================
   Single-column layout (900px and below) — reorders and compacts the hero.
   Matches .kit-hero__grid's own stacking breakpoint exactly (both
   max-width: 900px) so there is no gap between "compact content" and
   "single column" — every width that stacks to one column also gets the
   compact order and gallery controls.
   ========================================================================= */
@media (max-width: 900px) {
  /* ---- STRUCTURE ---- */
  .kit-thumbs { display: none; }
  .kit-slide-stage .kit-slide-arrow,
  .kit-slide-stage .kit-slide-expand,
  .kit-slide-stage .kit-slide-counter { display: none; }

  .kit-slide-controls-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .kit-slide-arrow--compact { position: static; transform: none; width: 44px; height: 44px; flex: 0 0 auto; }
  .kit-slide-counter--compact {
    position: static; min-width: 52px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; backdrop-filter: none;
  }
  .kit-slide-expand--compact { position: static; height: 44px; margin-left: 0.25rem; }

  .kit-hero__info { display: flex; flex-direction: column; gap: 14px; }
  .kit-hero__info > * { margin: 0 !important; }

  .kit-hero__includes { order: 1; }
  .kit-hero__buy { order: 2; }
  .kit-hero__delivery { order: 3; border-top: 0; padding-top: 0; }
  .kit-hero__lead { order: 4; }   /* longer positioning copy, moved below the purchase area */

  .kit-hero__grid { gap: 16px; }

  /* ---- TYPOGRAPHY ---- */
  .kit-hero__delivery { font-size: var(--fs-eyebrow); line-height: 1.5; }
  .kit-hero__title { margin-top: 0.4rem; }
  .kit-price { margin-top: 0.4rem; }
  .kit-slideshow__caption { margin-top: 0.6rem; }
}