/* Displays area — /displays/, single cph_display ("shop the look") and /grottos/.
   Prefixes: .dsp- (displays), .gro- (grottos). Tokens come from base.css.
   Skin: Option B "High Street" heritage — soft shadows, 2px green frames, pill chips. */

/* ---------- shared: breadcrumb ---------- */
.dsp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: clamp(24px, 3vw, 44px); }
.dsp-crumb a {
  /* >=44px touch target; horizontal padding + negative margin keeps the left edge aligned */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  margin: 0 -6px;
  color: var(--ink-soft);
}
.dsp-crumb a:hover { color: var(--red); }
.dsp-crumb .sep { color: var(--ink-soft); }

/* ---------- single display: head (mobile-first: stacked, row from 860px) ---------- */
.dsp-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 16px;
  padding-bottom: clamp(22px, 3vw, 30px);
}
.dsp-title { max-width: 800px; font-size: clamp(34px, 4.2vw, 56px); }
.dsp-title em { font-style: normal; color: var(--red); }
.dsp-intro { font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.55; }
.dsp-intro p { margin: 0 0 10px 0; }
.dsp-intro p:last-child { margin-bottom: 0; }

/* ---------- single display: scene image ---------- */
.dsp-scene { position: relative; }
.dsp-scene__frame {
  border: 2px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
}
.dsp-scene__frame img { width: 100%; height: clamp(280px, 44vw, 620px); object-fit: cover; }
.dsp-scene__badge {
  position: absolute;
  bottom: -18px;
  right: clamp(12px, 3vw, 40px);
  background: var(--red);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 20px;
  border-radius: 999px;
  transform: rotate(-2deg);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
}

/* ---------- single display: parts slider ---------- */
.dsp-parts__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.dsp-arrows { display: flex; gap: 12px; }
.dsp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--green);
  border-radius: 999px;
  background: var(--cream);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dsp-arrow--gold { background: var(--gold); }
.dsp-arrow:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 68, 43, 0.25); }
.dsp-arrow svg { display: block; stroke: var(--green); }

.dsp-slider {
  display: flex;
  gap: clamp(16px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.dsp-slider .dsp-slide {
  flex: 0 0 min(78vw, 300px);
  scroll-snap-align: start;
}
/* ≥44px touch target for the slider add buttons + landing-grid "See the look" links */
.dsp-slide .btn-small,
.dsp-grid-card .btn-small { padding-top: 13px; padding-bottom: 13px; }
@media (prefers-reduced-motion: reduce) {
  .dsp-slider { scroll-behavior: auto; }
}

.dsp-empty {
  border: 2px solid var(--green);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
  padding: clamp(24px, 4vw, 40px);
  max-width: 720px;
}
.dsp-empty p { margin: 0; font-weight: 600; }

/* ---------- single display: whole-look band (stacked on mobile) ---------- */
.dsp-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 24px);
  background: var(--gold);
  border: 2px solid var(--green);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3.5vw, 40px);
  margin-top: clamp(30px, 4vw, 48px);
  margin-bottom: clamp(44px, 6vw, 72px);
  text-align: left;
}
.dsp-band__copy { display: flex; flex-direction: column; gap: 4px; }
.dsp-band__title { font-size: clamp(20px, 2.2vw, 26px); }
.dsp-band__copy p { margin: 0; font-size: 15px; font-weight: 600; }

/* ---------- single display: more displays strip ---------- */
.dsp-more { background: var(--green); color: var(--cream); }
.dsp-more__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.dsp-more__links { font-family: var(--body); font-weight: 800; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; }
.dsp-more__links a { color: var(--cream); }
.dsp-more__links a:hover { color: var(--gold); }
.dsp-more__links .dot { color: var(--gold); padding: 0 6px; }
.dsp-more svg { flex: 0 0 auto; stroke: var(--gold); } /* overrides old-palette #F2B23E baked into the template SVG */
/* "All displays" arrow: pad out to a >=44px touch target without moving the layout */
.dsp-more__inner > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  margin: -9px;
}

/* ---------- /displays/ landing ---------- */
.dsp-landing-head { padding-bottom: 0; }
.dsp-lede { max-width: 640px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 500; margin: 18px 0 0 0; }


.dsp-grid-card__excerpt { font-size: 14px; color: var(--ink-soft); font-weight: 500; margin: 0; }

.dsp-coming {
  border: 2px solid var(--green);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
  padding: clamp(28px, 5vw, 56px);
  position: relative;
}
.dsp-coming__title { font-size: clamp(22px, 2.4vw, 29px); margin-bottom: 12px; }
.dsp-coming p { max-width: 620px; font-weight: 500; margin: 0 0 22px 0; }
.dsp-coming__sticker {
  position: absolute;
  top: -26px;
  right: clamp(16px, 4vw, 48px);
  width: 108px;
  height: 108px;
  font-size: 13px;
  padding: 10px;
}
@media (max-width: 559px) {
  /* keep the panel title clear of the overhanging sticker */
  .dsp-coming { padding-top: 72px; }
}
.dsp-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.dsp-chip {
  display: inline-block;
  border: 2px solid var(--green);
  border-radius: 999px;
  background: var(--cream);
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 13px 18px; /* ≥44px touch target: ~20px line + 26px padding + 4px border */
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dsp-chip:hover { background: var(--red); border-color: var(--red); color: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 68, 43, 0.25); }

/* ---------- /grottos/ ---------- */
.gro-head { padding-bottom: 0; }
.gro-head h1 em { font-style: normal; color: var(--red); }
.gro-lede { max-width: 640px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 500; margin: 18px 0 0 0; }

.gro-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.gro-story + .gro-story { margin-top: clamp(44px, 6vw, 80px); }
.gro-story__media { position: relative; }
.gro-figure {
  margin: 0;
  border: 2px solid var(--green);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
}
.gro-figure img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; }
.gro-figure figcaption {
  border-top: 2px solid var(--green);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  background: var(--cream);
}
.gro-figure a { color: var(--ink); display: block; }
.gro-figure a:hover img { opacity: 0.92; }
.gro-sticker {
  position: absolute;
  top: -24px;
  right: -6px;
  width: 104px;
  height: 104px;
  font-size: 12px;
  padding: 10px;
  transform: rotate(-8deg);
  z-index: 2;
}
.gro-story__kicker { margin-bottom: 10px; }
.gro-story__title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 16px; }
.gro-story__title em { font-style: normal; color: var(--red); }
.gro-story__body p { margin: 0 0 14px 0; font-weight: 500; max-width: 62ch; }
.gro-story__body p:last-child { margin-bottom: 0; }
.gro-facts { list-style: none; margin: 18px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gro-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; }
.gro-facts svg { flex: 0 0 auto; margin-top: 2px; stroke: var(--green); } /* overrides old-palette #0B5F3B baked into the template SVG */

/* booking-window band (colour band: deep green, cream/gold text only) */
.gro-band {
  background: var(--green);
  color: var(--cream);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
  padding: clamp(26px, 4vw, 44px);
}
.gro-band__title { color: var(--cream); font-size: clamp(22px, 2.5vw, 31px); margin-bottom: 6px; }
.gro-band__sub { margin: 0 0 24px 0; font-weight: 600; opacity: 0.92; }
.gro-band__grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.6vw, 18px); }
.gro-window { border: 2px solid var(--cream); border-radius: 10px; padding: 18px 20px; }
.gro-window__who { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 6px; }
.gro-window__when { font-family: var(--display); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.15; }
.gro-band__late {
  margin-top: 22px;
  background: var(--red);
  color: var(--cream);
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.02em;
  transform: rotate(-1deg);
  display: inline-block;
}

/* grottos CTA */
.gro-cta { text-align: center; }
.gro-cta__title { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
.gro-cta p { max-width: 560px; margin: 0 auto 26px auto; font-weight: 500; }
.gro-cta__contact { margin-top: 18px; font-size: 15px; font-weight: 700; }
.gro-cta__contact a {
  /* inline phone/email links: >=44px touch target without breaking the line box */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  vertical-align: middle;
  color: var(--ink);
}
.gro-cta__contact a:hover { color: var(--red); }

/* ---------- responsive: mobile-first, layered upward ---------- */
@media (min-width: 640px) {
  .gro-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .dsp-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .dsp-intro { max-width: 420px; }
  .dsp-slider .dsp-slide { flex-basis: 300px; }
  .dsp-band { flex-direction: row; justify-content: center; align-items: center; }
  .dsp-more__inner { flex-direction: row; justify-content: space-between; align-items: center; }
  .gro-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .gro-story--flip .gro-story__media { order: 2; }
  .gro-sticker { right: auto; left: -14px; }
  .gro-story--flip .gro-sticker { left: auto; right: -14px; transform: rotate(8deg); }
}

@media (min-width: 1800px) {
  .dsp-slider .dsp-slide { flex-basis: 340px; }

}

/* superwide: display type keeps growing (values continuous at the boundary) */
@media (min-width: 2200px) {
  .dsp-title { font-size: clamp(56px, 2.55vw, 64px); }          /* 2.55vw@2200 ≈ 56.1 → continuous */
  .gro-story__title { font-size: clamp(36px, 1.64vw, 42px); }   /* 1.64vw@2200 ≈ 36.1 → continuous */
  .gro-cta__title { font-size: clamp(40px, 1.82vw, 46px); }     /* 1.82vw@2200 ≈ 40 → continuous */
}

/* ---------- shop-the-look spotlight + quantity chips ---------- */
.dsp-scene__frame { position: relative; }
.dsp-spot[hidden] { display: none !important; }
.dsp-spot {
  position: absolute;
  border: 3px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(15, 24, 16, 0.55), 0 0 34px rgba(200, 155, 60, 0.5);
  opacity: 0;
  transition: opacity 0.28s ease, left 0.35s cubic-bezier(0.23, 1, 0.32, 1), top 0.35s cubic-bezier(0.23, 1, 0.32, 1), width 0.35s cubic-bezier(0.23, 1, 0.32, 1), height 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.dsp-spot.is-on { opacity: 1; }
.dsp-slide.is-lit { outline: 3px solid var(--gold); outline-offset: 2px; }
.dsp-slide--spotlit .prop-card__media { cursor: pointer; }
.dsp-qty-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--green);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 800;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 24, 16, 0.35);
}
.dsp-slide__qtyline { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .dsp-spot { transition: opacity 0.2s ease; }
}

.dsp-landing-head .accent-red { font-style: normal; color: var(--red); }

/* ================= /displays/ — The Arcade =================
   Full-width alternating rows: a lit shop window on one side, the mood copy on
   the other, flipping sides down the page. Each window lights as it scrolls into
   view and dims as it leaves (JS toggles .is-lit). Mobile stacks and swaps the
   paragraph for a single short line. Transform/opacity/filter only. */

.dsp-filter { padding-top: 6px; padding-bottom: 6px; }
.dsp-filter__label {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--red);
}
.dsp-filter__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dsp-filter__chip,
.dsp-arcade__reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--cream);
  border: 2px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.dsp-filter__chip:hover { transform: translateY(-2px); }
.dsp-filter__chip.is-on { background: var(--green); color: var(--cream); }
.dsp-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-size: 11.5px;
}
.dsp-filter__chip.is-on .dsp-filter__count { background: var(--gold); color: var(--ink); }

/* ---- rows ---- */
.dsp-arcade {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.2vw, 68px);
  max-width: 1460px;
  margin: 0 auto;
}
.dsp-window[hidden] { display: none !important; }

.dsp-window__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: center;
  color: var(--ink);
}
@media (min-width: 900px) {
  .dsp-window__copy::before { inset: -26px -30px; }
  .dsp-window__link {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(30px, 3.6vw, 64px);
  }
  /* JS stripes visible rows so alternation survives filtering */
  .dsp-window.is-flipped .dsp-window__frame { order: 2; }
  .dsp-window.is-flipped .dsp-window__copy { order: 1; }
}

/* ---- the window ---- */
.dsp-window__frame {
  border: 2px solid var(--green);
  border-radius: 14px;
  overflow: hidden;
  background: var(--green);
  box-shadow: 0 14px 34px rgba(20, 68, 43, 0.16);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.dsp-window.is-lit .dsp-window__frame {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(20, 68, 43, 0.26);
}
.dsp-window__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 16px; }

.dsp-window__valance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--green);
  color: var(--cream);
}
.dsp-window__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1.5px solid rgba(200, 155, 60, 0.7);
  color: var(--gold);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
}
.dsp-window__plate {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #D8AE55, #B98B33);
  color: #2A1C06;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dsp-window__glass { position: relative; overflow: hidden; background: #0E1A12; }
.dsp-window__img {
  display: block;
  width: 100%;
  height: clamp(230px, 27vw, 430px);
  object-fit: cover;
  transform: scale(1.05);
  filter: brightness(0.44) saturate(0.58) contrast(0.95);
  transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.dsp-window__warm {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 108%, rgba(255, 196, 106, 0.42), rgba(255, 176, 74, 0.13) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.dsp-window__sheen {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 55%;
  height: 170%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-14deg);
  transition: left 0.95s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

/* ---- copy ---- */
.dsp-window__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
}
.dsp-window__copy::before {
  content: "";
  position: absolute;
  inset: -18px -10px; /* wider bleed only where there is room (see 900px up) */
  border-radius: 20px;
  background: radial-gradient(70% 65% at 25% 40%, rgba(255, 196, 106, 0.17), transparent 72%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.dsp-window.is-lit .dsp-window__copy::before { opacity: 1; }
.dsp-window__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.7vw, 42px);
  line-height: 1.08;
  color: var(--green);
}
.dsp-window__mood {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--ink);
}
.dsp-window__mood-short { display: none; margin: 0; }
.dsp-window__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 800;
  color: var(--red);
  transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}
.dsp-window.is-lit .dsp-window__cta { transform: translateX(5px); }

/* mobile: one short line instead of the paragraph */
@media (max-width: 899px) {
  .dsp-window__mood { display: none; }
  .dsp-window__mood-short {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 40ch;
  }
  .dsp-window__cta { min-height: 40px; }
}

/* ---- lit ---- */
.dsp-window.is-lit .dsp-window__img,
.dsp-window:focus-within .dsp-window__img { filter: brightness(1.02) saturate(1.06) contrast(1); transform: scale(1); }
.dsp-window.is-lit .dsp-window__warm,
.dsp-window:focus-within .dsp-window__warm { opacity: 1; }
.dsp-window.is-lit .dsp-window__sheen { left: 110%; }

@media (hover: hover) and (pointer: fine) {
  .dsp-window:hover .dsp-window__frame { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(20, 68, 43, 0.3); }
  .dsp-window:hover .dsp-window__cta { transform: translateX(8px); }
}

.dsp-arcade__empty { margin: 26px auto 0 auto; max-width: 1460px; font-size: 16px; font-weight: 600; }
.dsp-arcade__empty[hidden] { display: none; }
.dsp-arcade__reset { min-height: 0; padding: 6px 14px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .dsp-window__frame,
  .dsp-window__img,
  .dsp-window__warm,
  .dsp-window__sheen,
  .dsp-window__copy::before,
  .dsp-window__cta { transition: none; }
  .dsp-window.is-lit .dsp-window__frame,
  .dsp-window:hover .dsp-window__frame { transform: none; }
  .dsp-window.is-lit .dsp-window__cta { transform: none; }
  .dsp-window__sheen { display: none; }
}