/* ==========================================================================
   GAAB Website — products-page.css
   Standalone styles for the /products catalogue subpage. Apple-minimal:
   a calm light canvas, a vertical category filter rail, and a clean product
   grid with a detail modal. Reuses the global navbar/footer + design tokens;
   nothing here affects the home page.
   ========================================================================== */

.catalog-page {
  background: var(--color-off-white);
}

/* --------------------------------------------------------------------------
   HERO / PAGE HEADER
   -------------------------------------------------------------------------- */
.catalog-hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(140px, 19vh, 200px) var(--container-padding) clamp(40px, 6vh, 64px);
  text-align: center;
}

.catalog-hero__eyebrow {
  margin-bottom: 16px;
}

.catalog-hero__title {
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.catalog-hero__title .grad-text {
  background: linear-gradient(90deg, #1B3A6B 0%, #3A5A9F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.catalog-hero__subtitle {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   DOOR SELECTOR — Tesla-style door-type picker (above the catalogue)
   -------------------------------------------------------------------------- */
.door-selector {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--container-padding) clamp(48px, 8vh, 96px);
}

/* Guiding line under the door row — visible only in the initial (no-selection)
   state; it fades away the moment a door is picked. */
.door-selector__hint {
  margin: clamp(32px, 5vh, 56px) auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: var(--weight-regular);
  color: var(--color-medium-gray);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.door-selector.has-selection .door-selector__hint {
  opacity: 0;
  pointer-events: none;
}

/* --- Grid of door cards --- */
.door-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.door-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 0 20px;
  background: var(--color-off-white);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.door-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 38px) clamp(22px, 3vw, 42px) 0;
}

/* Soft contact shadow — a blurred ellipse on the floor so each door reads as
   grounded / floating, Tesla-style. Grows subtly on hover as the door lifts. */
.door-card__frame::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 56%;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(10, 10, 10, 0.20) 0%, rgba(10, 10, 10, 0.09) 48%, transparent 72%);
  filter: blur(7px);
  opacity: 0.65;
  pointer-events: none;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease, transform 0.3s ease;
}

.door-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 1; /* all doors alive at rest — dim only happens once one is picked */
  /* White photo backgrounds melt into the cream card. */
  mix-blend-mode: multiply;
  transition: opacity 0.35s ease, transform 0.3s ease;
}

.door-card__name {
  position: relative;
  font-size: 1rem;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-text-primary); /* normal, alive at rest */
  text-align: center;
  padding-bottom: 8px;
  transition: color 0.35s ease;
}

.door-card__name::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-blue-gaab);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover — gentle lift + the door brightens + its contact shadow spreads. */
.door-card:hover { transform: translateY(-6px); }
.door-card:hover .door-card__img { opacity: 1; transform: scale(1.02); }
.door-card:hover .door-card__frame::after { width: 64%; opacity: 0.85; }

/* All doors full at rest. Once one is picked, the others recede (image, contact
   shadow AND name dim) to focus the chosen door; deselecting restores all. */
.door-card.is-active .door-card__img { opacity: 1; }
.door-selector.has-selection .door-card:not(.is-active):not(:hover) .door-card__img { opacity: 0.45; }
.door-selector.has-selection .door-card:not(.is-active):not(:hover) .door-card__frame::after { opacity: 0.35; }
.door-selector.has-selection .door-card:not(.is-active):not(:hover) .door-card__name { color: var(--color-text-secondary); }

.door-card.is-active .door-card__name {
  color: var(--color-text-primary);
  font-weight: 600;
}
.door-card.is-active .door-card__name::after { width: 28px; }

/* --- Products panel (phase-2 placeholder) --- */
/* --- Products panel: category accordions of code chips --- */
/* Panel hidden until a door is chosen; then it fades + slides up. */
.door-products-panel {
  margin-top: clamp(20px, 3vh, 36px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.door-products-panel.is-visible { opacity: 1; transform: translateY(0); }
/* Cross-fade when switching doors — content fades in place, no slide. */
.door-products-panel.is-swapping {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.2s ease;
}

.door-panel__soon {
  text-align: center;
  padding: clamp(28px, 5vh, 56px) 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--color-medium-gray);
  opacity: 0.7;
  margin: 0;
}

.door-cats {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(12px, 2.5vh, 28px) 0;
}

/* No hard "Excel" rules — just air, with a near-imperceptible hairline that
   reads as separation without drawing attention. */
.door-cat { border-bottom: 1px solid rgba(10, 10, 10, 0.045); }
.door-cat:last-child { border-bottom: none; }

.door-cat__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
}

.door-cat__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}
.door-cat__tag {
  font-size: 0.58rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-medium-gray);
  border: 1px solid rgba(10, 10, 10, 0.09);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.door-cat__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.door-cat__count {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}
.door-cat__chev {
  color: var(--color-medium-gray);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.door-cat.is-open .door-cat__chev { transform: rotate(180deg); }

/* Collapsible body: JS sets an explicit height (measured from content) so the
   transition is exact regardless of how many rows the chips wrap to. */
.door-cat__body {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.door-cat__inner { overflow: hidden; }
.door-cat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 22px;
  /* Chips ease in (fade + slight rise) once the category opens. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}
.door-cat.is-open .door-cat__chips { opacity: 1; transform: translateY(0); }

.door-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(10, 10, 10, 0.09);
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.015);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease,
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.door-chip__code {
  /* System sans (Inter) with tabular figures + slight tracking → reads as a
     clean technical code, elegant and cohesive with the rest of the site
     (no crude default monospace). */
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  transition: color 0.25s ease;
}
.door-chip__note {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  transition: color 0.25s ease;
}
.door-chip:hover {
  border-color: var(--color-blue-gaab);
  background: var(--color-blue-gaab);
  transform: translateY(-1px) scale(1.03);
}
.door-chip:hover .door-chip__code,
.door-chip:hover .door-chip__note { color: #fff; }

/* Tablet: 2×2 */
@media (max-width: 1024px) {
  .door-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}

/* Mobile: all four doors visible at once as a 2×2 grid. This replaces a
   horizontal snap carousel that only showed ~2 cards — the other two were
   offscreen and easy to miss entirely. Card, image and title all shrink so the
   four fit without overflow. */
@media (max-width: 768px) {
  .door-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .door-card { gap: 10px; padding: 0; }
  .door-card__name { font-size: 0.78rem; letter-spacing: -0.01em; line-height: 1.25; }
}

@media (max-width: 400px) {
  .door-grid { gap: 10px; }
  .door-card__name { font-size: 0.72rem; }
}

/* --------------------------------------------------------------------------
   BODY LAYOUT — filter rail + results
   -------------------------------------------------------------------------- */
.catalog-body {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) clamp(80px, 12vh, 140px);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* ----- Filter rail (vertical list, sticky on desktop) ----- */
.catalog-filters {
  position: sticky;
  top: 96px;
}

.cat-filter-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Rail base: cada item = hairline divider superior + padding vertical parejo,
   accent bar a la izquierda que solo se prende con la activa. */
.cat-filter {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px 14px 12px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.015em;
  color: var(--color-medium-gray);
  cursor: pointer;
  border-top: 1px solid #ECECEC;
  transition: color 200ms var(--ease-out);
}

/* Barrita azul GAAB a la izquierda — invisible por default, se enciende sólo
   cuando la categoría queda activa (no en hover, para no competir con la
   señal de "seleccionado"). */
.cat-filter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0.4);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--color-blue-gaab);
  opacity: 0;
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}

.cat-filter:hover {
  color: var(--color-text-primary);
}

.cat-filter.is-active {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.cat-filter.is-active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

/* La última categoría cierra con hairline inferior para que el bloque termine
   sellado (no colgando en el aire). */
.cat-filter:last-child {
  border-bottom: 1px solid #ECECEC;
}

/* "All" es siempre el primer item — funciona como cabecera del rail: un toque
   más grande y con letter-spacing más ancho para diferenciarlo del resto. */
.cat-filter:first-child {
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ----- Results column ----- */
.catalog-results__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

/* Density toggle — desktop already fits 3-up, so this is a mobile affordance. */
.cp-density {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;   /* keeps the 40px target without moving the row */
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-medium-gray);
  cursor: pointer;
  transition: color 160ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.cp-density[aria-pressed="true"] { color: var(--color-blue-gaab); }

.catalog-results__count {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.catalog-results__active {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* ----- Grid ----- */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}

/* --------------------------------------------------------------------------
   PRODUCT CARD — minimal, Apple-clean
   -------------------------------------------------------------------------- */
.cp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px);
  animation: cpReveal 600ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

@keyframes cpReveal {
  to { opacity: 1; transform: translateY(0); }
}

.cp-card:hover {
  border-color: rgba(10, 10, 10, 0.14);
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.10);
  transform: translateY(-2px);
}

.cp-card__media {
  position: relative;
  aspect-ratio: 4 / 5;          /* taller tile — image now carries the card */
  background: var(--color-white);
  overflow: hidden;
}

.cp-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* white-bg product shots show in full */
  padding: 18px;
  transition: transform 600ms var(--ease-out);
}

.cp-card:hover .cp-card__img {
  transform: scale(1.04);
}

.cp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.cp-card__tag {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-blue-gaab);
}

.cp-card__title {
  margin-top: 2px;
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.cp-swatches {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.cp-swatch {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: inset 0 0 0 2px var(--color-white);
}

.cp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
}

.cp-card__price {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.cp-card__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  /* Frosted-glass pill — translucent base, blur, soft float */
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.65);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.cp-card__add:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(27, 58, 107, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cp-card__add:hover {
  background: var(--color-blue-gaab);
  border-color: var(--color-blue-gaab);
  color: var(--color-white);
}

.cp-card__add.is-added {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-white);
}

/* ----- Empty state (filter with no matches) ----- */
.cp-empty {
  grid-column: 1 / -1;
  padding: clamp(48px, 10vh, 96px) 0;
  text-align: center;
}

.cp-empty__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.cp-empty__text {
  margin-top: 10px;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.cp-empty__cta {
  display: inline-block;
  margin-top: 20px;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-blue-gaab);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .cp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .catalog-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Filter rail becomes a horizontal scroll strip above the grid */
  .catalog-filters {
    position: static;
    top: auto;
    margin: 0 calc(var(--container-padding) * -1);
    padding: 0 var(--container-padding);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .catalog-filters::-webkit-scrollbar { display: none; }
  .cat-filter-list {
    flex-direction: row;
    gap: 8px;
    width: max-content;
  }
  .cat-filter {
    padding: 9px 16px;
    font-size: var(--text-small);
    white-space: nowrap;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
  }
  .cat-filter.is-active {
    background: var(--color-blue-gaab);
    border-color: var(--color-blue-gaab);
    color: var(--color-white);
  }
}

/* One card per row was the default and it made the catalogue an endless scroll.
   2-up is the new default; the density toggle switches back to the big 1-up. */
@media (max-width: 520px) {
  .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cp-grid.cp-grid--roomy { grid-template-columns: 1fr; }
  .cp-density { display: inline-flex; }

  /* More air around "All · X products". */
  .catalog-results__bar { margin-bottom: 20px; padding-bottom: 14px; }
  .catalog-results__active { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   PRODUCT DETAIL MODAL
   -------------------------------------------------------------------------- */
.cp-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
}

.cp-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.cp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cp-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(10, 10, 10, 0.30);
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
}

.cp-modal.is-open .cp-modal__dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.cp-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-dark-gray);
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.12);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.cp-modal__close:hover {
  background: var(--color-white);
  transform: rotate(90deg);
}

.cp-modal__media {
  position: relative;   /* containing block for the .cp-modal__shots strip */
  background: var(--color-white);
  display: flex;
}

.cp-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 28px;
  transition: opacity 0.18s ease;
}

.cp-modal__body {
  padding: clamp(28px, 4vw, 44px);
  overflow-y: auto;
}

.cp-modal__tag {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-blue-gaab);
}

.cp-modal__title {
  margin-top: 12px;
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.cp-modal__price {
  margin-top: 12px;
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.cp-modal__desc {
  margin-top: 16px;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* CTA "Contact us" — reusa la clase .hero-cta (fondo negro + shine ring del
   banner del home). Este selector solo agrega el spacing dentro del modal:
   queda separado de la descripción y del bloque de especificaciones. */
.cp-modal__contact-cta {
  margin: 20px 0 8px;
}

/* Toast liviano — aparece cuando copiamos el mail al clipboard como fallback
   del mailto: (mobile sin cliente de mail configurado). Un solo nodo global,
   reutilizado en cada disparo. */
.cp-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 20px);
  padding: 12px 22px;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s var(--ease-out, ease-out), opacity .3s var(--ease-out, ease-out);
  z-index: 10000;
}
.cp-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Finish selector */
.cp-modal__finish-label {
  margin-top: 24px;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}
.cp-modal__finish-label b {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.cp-modal__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Finish chip (JSON cliente 2026-09) — pill "swatch + CÓDIGO (Nombre)". El
   circulito toma su hex de FINISH_META (misma fuente que las tarjetas
   preview) y el texto queda a su derecha con 8 px de gap. */
.cp-modal__finish-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.cp-modal__finish-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.15);
}
.cp-modal__finish-text { display: inline-block; }

.cp-modal__swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: inset 0 0 0 3px var(--color-white);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.cp-modal__swatch.is-active {
  box-shadow: inset 0 0 0 3px var(--color-white),
              0 0 0 2px var(--color-blue-gaab);
  transform: scale(1.05);
}

/* Specs */
.cp-modal__specs {
  margin-top: 26px;
  border-top: 1px solid var(--color-border-light);
}

/* Extra views — thumbnail strip under the product photo. Only rendered when a
   product carries more than one shot of the same finish. */
.cp-modal__shots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.cp-shot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 160ms ease-out, border-color 160ms ease-out;
}
.cp-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;   /* photos ship with baked-in white backgrounds */
}
.cp-shot:hover { opacity: 0.85; }
.cp-shot.is-active {
  opacity: 1;
  border-color: var(--color-blue-gaab);
}

/* Feature bullets — quiet spec list under the description. */
.cp-modal__features {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.cp-modal__features li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 3px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.cp-modal__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-blue-gaab);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Size / Function rows — selectable pills, sitting under the finish swatches.
   -------------------------------------------------------------------------- */
.cp-modal__opt { margin-top: 22px; }

.cp-modal__opt-label {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.cp-modal__pills { display: flex; flex-wrap: wrap; gap: 8px; }

.cp-pill {
  padding: 8px 14px;
  min-height: 34px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color 160ms ease-out, color 160ms ease-out,
              background 160ms ease-out;
}
.cp-pill:hover { border-color: var(--color-dark-gray); color: var(--color-text-primary); }
.cp-pill.is-active {
  border-color: var(--color-blue-gaab);
  background: var(--color-blue-gaab);
  color: #FFFFFF;
}

/* Compact variant — used in the Finish/Size/Wires meta row on G2101B. Smaller
   labels + tighter padding so the Size row can sit next to Finish without
   dominating the layout. */
.cp-modal__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.cp-modal__meta-left { min-width: 0; flex: 1 1 auto; }
.cp-modal__meta-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.cp-modal__opt--compact { margin-top: 0; }
.cp-modal__opt--compact .cp-modal__opt-label {
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  text-align: left;
}
.cp-modal__pills--compact { justify-content: flex-start; gap: 6px; }
.cp-modal__pills--compact .cp-pill {
  padding: 5px 10px;
  min-height: 26px;
  font-size: 0.74rem;
}

/* Static wires pill — display-only, no click. Available wires reuse the same
   outlined look as measures (base .cp-pill). Muted wires stay faded / dashed
   to signal "not in this size". */
.cp-pill--static { cursor: default; user-select: none; }
.cp-pill--static:hover { border-color: var(--color-border-light); color: var(--color-text-secondary); }
.cp-pill--static.is-muted {
  opacity: 0.35;
  color: var(--color-text-secondary);
  border-style: dashed;
}

/* Size availability marker — when a Finish is selected, sizes that ship in it
   stay lit; sizes that don't fade to a dashed outline. The is-active blue
   still wins visually for whichever size is currently selected. */
.cp-pill.is-muted-size:not(.is-active) {
  opacity: 0.4;
  border-style: dashed;
  color: var(--color-text-secondary);
}
.cp-pill.is-muted-size:not(.is-active):hover {
  opacity: 0.7;
  border-color: var(--color-dark-gray);
}

/* Composed SKU — code - finish [- measure/fn si hay una sola disponible].
   Va JUSTO arriba de los bullets de descripción. Mismo font-family que el
   título, medium, un poco más chico. Suficiente peso para leerse claro sin
   competir con el H3 del título. */
.cp-modal__sku {
  margin: 18px 0 12px;
  font-family: var(--font-sans);
  font-size: calc(var(--text-h3) * 0.7);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.cp-modal__spec {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.cp-modal__spec dt {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.cp-modal__spec dd {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-align: right;
}

/* Actions */
.cp-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.cp-modal__add {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: var(--radius-md);
  background: var(--color-blue-gaab);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(27, 58, 107, 0.28);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.cp-modal__add:hover {
  background: var(--color-blue-gaab-dark);
  transform: translateY(-2px);
}

.cp-modal__add.is-added {
  background: var(--color-text-primary);
}

.cp-modal__quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.cp-modal__quote:hover {
  border-color: rgba(10, 10, 10, 0.2);
  background: var(--color-off-white);
}

body.cp-modal-open {
  overflow: hidden;
}

/* Mobile: read as a floating card, not a takeover. 92vh left almost no backdrop
   visible, so the modal looked like a full page. 78vh + more padding leaves a
   blurred frame all the way round; the body scrolls INSIDE the card (the page
   behind stays locked via body.cp-modal-open). */
@media (max-width: 700px) {
  .cp-modal { padding: 20px 16px; }
  .cp-modal__dialog {
    /* minmax(0, 1fr) evita que el intrinsic size del media (aspect-ratio +
       imagen 1500px de ancho natural) empuje el track de la columna a
       expandirse más allá del dialog → antes el media era 429px en un
       dialog de 343px y la foto se veía "recortada" fuera de cuadro. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 78vh;
  }
  .cp-modal__backdrop {
    background: rgba(10, 10, 10, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  /* Media más alta en mobile: 16/11 achataba mucho el producto. 5/4 le da
     ~15% más de alto y la foto ocupa mejor el ancho disponible. */
  .cp-modal__media { aspect-ratio: 5 / 4; }
  .cp-modal__img { padding: 8px; }
  .cp-modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;    /* don't chain the scroll to the page */
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-card { animation: none; opacity: 1; transform: none; }
  .cp-modal,
  .cp-modal__dialog { transition-duration: 1ms; }
}


/* ==========================================================================
   DOOR BREAKDOWN — product items (thumbnail + code + colour circles).
   Replaces the old link chips. Every thumbnail sits in the SAME square box,
   centred and object-fit:contain over the same light background, so a grid of
   differently-shaped product photos reads as one tidy, even set.
   ========================================================================== */
.door-cat__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding-bottom: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}
.door-cat.is-open .door-cat__items { opacity: 1; transform: translateY(0); }

/* Apple-minimalist: no card box — the product floats on the cream section.
   No border, no heavy shadow, no white square. */
.door-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.door-item:hover { transform: translateY(-4px); }
.door-item:focus-visible { outline: 2px solid var(--color-blue-gaab); outline-offset: 3px; }

/* Uniform thumbnail — same fixed box for every product, centred, contained.
   Background = the section cream (#FAFAF7) so it blends with no visible square. */
.door-item__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.door-item__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Product photos ship with a white background baked in. `darken` turns that
     white into the cream backdrop (min per channel) while keeping the product's
     real tones — so it floats on the cream with no white square and no fade. */
  mix-blend-mode: darken;
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.door-item:hover .door-item__img { transform: scale(1.04); }

.door-item__code {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--color-dark-gray);
}

/* Sizes — a quiet sub-line under the code. The tile's flex gap is a uniform
   12px, which reads as a separate row; the negative margin pulls this up so it
   belongs to the code above it. Measures only — finishes live in the popup. */
.door-item__sizes {
  margin-top: -7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-medium-gray);
  text-align: center;
}

.door-item__colors { display: flex; flex-wrap: wrap; gap: 9px; min-height: 14px; align-items: center; justify-content: center; }
.door-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.door-color:hover { transform: scale(1.15); }

/* Measures preview — chips verbatim ('D3(1-1/8")', '36" · 42"') que solo se
   muestran cuando el producto NO tiene finishes (Hooklock/Deadlock). Mismo
   estilo compacto que el ex-`door-item__sizes` para no pesar el tile. */
.door-item__measures {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: center;
  margin-top: -4px;
}
.door-item__measure {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-medium-gray);
}

/* Coming-soon tile — cream placeholder, code + subtle tag, no interaction. */
.door-item--soon { cursor: default; opacity: 0.55; }
.door-item--soon:hover { transform: none; }
.door-item__thumb--empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--color-off-white);
}
.door-item__soon {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Mobile: 3 tiles per row (was 2) so a category needs a third of the scroll.
   Everything inside shrinks to match. `.door-items--roomy` is the density
   toggle's other state — 2 per row, bigger. */
@media (max-width: 640px) {
  /* --- Breathing room (subtle) ---------------------------------------
     The lower half was tight: categories butted up against each other and the
     product images started immediately under the filter row. */
  .door-cats { padding: 22px 0 8px; }
  .door-cat__header { padding-block: 18px; }        /* more air between categories */
  .door-cat__inner { padding-top: 4px; padding-bottom: 20px; }

  .catalog-body { gap: 34px; }                      /* filters ↔ product grid */
  .catalog-results__bar { margin-bottom: 22px; padding-bottom: 16px; }

  .door-cat__items { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .door-cat__items.door-items--roomy { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .door-item { gap: 9px; padding: 10px 6px; }
  .door-item__code { font-size: 0.7rem; letter-spacing: 0.04em; }
  .door-item__sizes { margin-top: -5px; font-size: 10.5px; line-height: 1.25; }
  .door-color { width: 22px; height: 22px; }   /* touch-friendly */
  .door-item__colors { gap: 7px; }

  /* Roomy mode gets the full-size type back. */
  .door-items--roomy .door-item__code { font-size: 0.82rem; }
  .door-items--roomy .door-item__sizes { font-size: 12px; margin-top: -6px; }
}


/* Headlines → --font-display (Archivo); rest stays Inter. Revert via variables.css. */
.catalog-hero__title,
.cp-card__title,
.cp-modal__title {
  font-family: var(--font-display);
  letter-spacing: -0.035em;   /* global headline tracking — tightened */
}


/* ==========================================================================
   RIM EXIT DEVICES — modal enhancements
   Uppercase subtitle, image carousel arrows, Product Specifications block
   (sidebar dl + doc CTAs + series/legend tables). Only active when the
   product carries `gallery` and/or `detail` payloads.
   ========================================================================== */

/* Widen the dialog for the richer layout (specs sidebar + tables need room) */
.cp-modal__dialog:has(#cpModalDetail:not([hidden])) {
  max-width: 1120px;
}

/* Uppercase subtitle under the title (matches the reference ficha). */
.cp-modal__subtitle {
  margin-top: 10px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-blue-gaab);
  line-height: 1.45;
}

/* --- Carousel arrows overlaid on the modal media ------------------------- */
.cp-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark-gray);
  box-shadow: 0 2px 12px rgba(10, 10, 10, 0.16);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.cp-modal__nav:hover {
  background: var(--color-white);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 18px rgba(10, 10, 10, 0.22);
}
.cp-modal__nav--prev { left: 14px; }
.cp-modal__nav--next { right: 14px; }

.cp-modal__counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.62);
  color: var(--color-white);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
}

/* Media area stays blanca también en modo carrusel (pedido del cliente
   04/10/2026: todos los popups quedan parejos sobre blanco). */
.cp-modal__media--carousel {
  background: var(--color-white);
}

/* --------------------------------------------------------------------------
   Product Specifications detail block — premium redesign
   -------------------------------------------------------------------------- */
.cp-detail {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-light);
}
.cp-detail[hidden] { display: none !important; }

.cp-detail__heading {
  margin: 0 0 18px 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* --- Sidebar: Brand / Category / Warranty / L-W-H / Usage / etc. ----------
   Card blanco premium con sombra ultra sutil. Cada row respira: label chico
   en gris, valor en negro con peso 500. Divisor hairline entre rows. */
.cp-detail__sidebar {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03),
              0 8px 24px rgba(10, 10, 10, 0.04);
}
@media (min-width: 620px) {
  .cp-detail__sidebar { grid-template-columns: 1fr 1fr; }
}
.cp-detail__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border-light);
}
.cp-detail__row dt {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cp-detail__row dd {
  margin: 0;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: 1.45;
}
/* Sacar la línea inferior de la última row de cada columna (grid 2-col) */
.cp-detail__sidebar .cp-detail__row:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 619px) {
  .cp-detail__sidebar .cp-detail__row:last-child { border-bottom: 0; }
}
/* Vertical divider entre las dos columnas en desktop */
@media (min-width: 620px) {
  .cp-detail__sidebar .cp-detail__row:nth-child(odd) {
    border-right: 1px solid var(--color-border-light);
  }
}

.cp-detail__desc {
  margin-top: 28px;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text-primary);
  opacity: 0.82;
}

/* --- Doc cards (Spec Sheet / Instructions Manual / Template) --------------
   Fondo negro premium con acento sky en hover, ícono contenido en cajita
   redonda, label a la izquierda + "PDF" chip a la derecha. Se lee como una
   descarga importante, no como un botón secundario. */
.cp-detail__docs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) {
  .cp-detail__docs { grid-template-columns: repeat(2, 1fr); }
}
/* Glass pills — mismo lenguaje que los arrow buttons de "Our Products" en el
   home (fondo blanco semi-transparente + backdrop blur + borde clarito). */
.cp-detail__doc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.06),
              0 1px 2px rgba(10, 10, 10, 0.04);
  color: var(--color-text-primary);
  text-decoration: none;
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.cp-detail__doc:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.10),
              0 2px 4px rgba(10, 10, 10, 0.06);
}
.cp-detail__doc-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(27, 58, 107, 0.08);
  color: var(--color-blue-gaab);
  transition: background var(--duration-fast) var(--ease-out);
}
.cp-detail__doc-icon svg { width: 13px; height: 13px; }
.cp-detail__doc:hover .cp-detail__doc-icon {
  background: rgba(27, 58, 107, 0.14);
}
.cp-detail__doc-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--color-text-primary);
}
.cp-detail__doc-ext {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-text-secondary);
  opacity: 0.6;
  transition: color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.cp-detail__doc:hover .cp-detail__doc-ext {
  color: var(--color-blue-gaab);
  opacity: 1;
  transform: translate(2px, -2px);
}

/* --- Series tables (Series / Door Width / Device Type / Finish / Others) -
   Card blanco enmarcada, header oscuro, filas cebra ultrasutiles con divisor
   hairline. Padding generoso. */
.cp-detail__tables {
  margin-top: 32px;
  display: grid;
  gap: 28px;
}
.cp-detail__table-title {
  margin: 0 0 12px 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* --- Table wrap: horizontal scroll on narrow viewports so the multi-column
   grid never overflows the modal body. The whole wrap is clickable so a
   desktop user can pop the same table into the lightbox without hunting
   for the zoom pill. */
.cp-detail__table-wrap {
  position: relative;
  overflow-x: auto;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

/* Header row: title on the left, zoom pill on the right. Sits ABOVE the
   grid so the pill can never cover a header cell like it used to when it
   floated over the last column. */
.cp-detail__table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
}
.cp-detail__table-header--no-title { justify-content: flex-end; }
.cp-detail__table-header .cp-detail__table-title { margin: 0; }

.cp-detail__table-zoom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(10, 10, 10, 0.72);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: zoom-in;
  transition: background 160ms ease-out;
  flex: 0 0 auto;
  white-space: nowrap;
}
.cp-detail__table-zoom:hover { background: rgba(10, 10, 10, 0.92); }
.cp-detail__table-zoom svg { flex: 0 0 auto; }

.cp-detail__grid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-small);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03),
              0 8px 24px rgba(10, 10, 10, 0.04);
  table-layout: fixed;
}
.cp-detail__grid-table th,
.cp-detail__grid-table td {
  vertical-align: top;
  word-break: break-word;
}

/* Header row (SERIES/DOOR WIDTH/… y CODE/DESCRIPTION en Accessories) —
   pedido de Martu 2026-09-18: pasa del negro al amarillo GAAB con letras
   negras arriba. Aplica a ordering-chart y accessories porque comparten
   selector. La franja azul de summary (segunda fila) NO se toca. */
.cp-detail__grid-table .cp-detail__hdr th {
  background: var(--color-gaab-yellow);
  color: var(--color-black);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: 10px;
  padding: 12px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

/* Blue summary row (G399F | 36 | V | 32D | —) — the second row of the chart. */
.cp-detail__grid-table .cp-detail__summary th {
  background: var(--color-blue-gaab, #1F3A5F);
  color: #FFFFFF;
  font-weight: var(--weight-bold, 600);
  font-size: 12px;
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.02em;
}

/* Definitions row — one per column, each cell stacks its bullets. */
.cp-detail__grid-table .cp-detail__defn td {
  padding: 12px 14px;
  background: var(--color-white);
  color: var(--color-text-primary);
  font-weight: var(--weight-regular, 400);
  border-top: 1px solid var(--color-border-light);
  font-size: 12px;
  line-height: 1.4;
}
.cp-detail__defn-line { padding: 2px 0; }
.cp-detail__defn-line + .cp-detail__defn-line { margin-top: 2px; }
.cp-detail__defn-line--empty { color: var(--color-text-secondary); }

/* Simple multi-row grid (Accessories, code chart lookups). */
.cp-detail__grid-table--rows tbody td {
  padding: 10px 14px;
  background: var(--color-white);
  color: var(--color-text-primary);
  font-weight: var(--weight-regular, 400);
  border-top: 1px solid var(--color-border-light);
  font-size: 12px;
  line-height: 1.4;
}
.cp-detail__grid-table--rows tbody tr:nth-child(even) td {
  background: var(--color-off-white);
}
.cp-detail__grid-table--rows tbody td:first-child {
  font-weight: var(--weight-medium);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* --- Legend (finish codes / doc chips / etc.) ---
   Mismo lenguaje que el sidebar: white card + hairline + accent en el
   label del bloque. */
.cp-detail__legend {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 20px;
  padding: 18px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03),
              0 8px 24px rgba(10, 10, 10, 0.04);
}
@media (min-width: 620px) {
  .cp-detail__legend { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .cp-detail__legend { grid-template-columns: repeat(3, 1fr); }
}
.cp-detail__legend-col ul {
  margin: 6px 0 0 0;
  padding-left: 0;
  list-style: none;
}
.cp-detail__legend-col li {
  position: relative;
  padding: 1px 0 1px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-primary);
  opacity: 0.82;
}
.cp-detail__legend-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gaab-sky);
}
.cp-detail__legend-label {
  margin: 0;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Modal dialog: on wider viewports let the body scroll independently — the
   media stays parked on the left while the specs / tables scroll on the right. */
@media (min-width: 720px) {
  .cp-modal__dialog:has(#cpModalDetail:not([hidden])) {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .cp-modal__dialog:has(#cpModalDetail:not([hidden])) .cp-modal__media {
    position: sticky;
    top: 0;
    align-self: start;
    height: 90vh;
    max-height: 90vh;
  }
  .cp-modal__dialog:has(#cpModalDetail:not([hidden])) .cp-modal__body {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

/* Mobile: stack media above body — the whole dialog scrolls. */
@media (max-width: 719px) {
  .cp-modal__dialog:has(#cpModalDetail:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }
  .cp-modal__dialog:has(#cpModalDetail:not([hidden])) .cp-modal__media {
    aspect-ratio: 4 / 3;
  }
  .cp-modal__dialog:has(#cpModalDetail:not([hidden])) .cp-modal__body {
    overflow: visible;
    max-height: none;
  }
}


/* ==========================================================================
   360° PILL + popup — added when a product has a turntable video (has360:true)
   The pill floats above the counter inside the main modal media area.
   ========================================================================== */

/* Black pill matching the home-page hero CTA — sits just above the counter,
   inside the media area's bottom edge, so it reads as an action tied to the
   image below rather than a page-level banner up top. Same shine-ring anim
   as .hero-cta. */
.cp-modal__360-pill {
  position: absolute;
  left: 50%;
  bottom: 52px;                   /* clears the counter (bottom:14 + ~30px) */
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  line-height: 1;
  border: 0;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.28);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
/* Shine ring — same technique as .hero-cta, kept subtle so it doesn't fight
   with the product photo behind it. */
.cp-modal__360-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--cta-shine-angle, 0deg),
    transparent 0deg,
    transparent 270deg,
    #D6EBF7 320deg,
    #FFFFFF 340deg,
    #D6EBF7 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.45;
  pointer-events: none;
  animation: hero-cta-shine 3.5s linear infinite;
}
.cp-modal__360-pill:hover {
  background: #14181F;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.36);
}
.cp-modal__360-pill:hover::before { opacity: 0.85; }
.cp-modal__360-pill svg { flex-shrink: 0; }
/* Override — the display:flex above beats the browser default of
   `[hidden] { display: none }`. Without this the pill stays laid out on
   every product even when the JS sets hidden=true. */
.cp-modal__360-pill[hidden] { display: none !important; }


/* --- Secondary popup that hosts the turntable iframe -------------------- */
.cp360-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);   /* above the product modal */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
}
.cp360-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.cp360-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cp360-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
  max-height: 92vh;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(10, 10, 10, 0.35);
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
}
.cp360-modal.is-open .cp360-modal__dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.cp360-modal__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-light);
}
.cp360-modal__tag {
  grid-column: 1;
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-blue-gaab);
}
.cp360-modal__title {
  grid-column: 1;
  margin: 4px 0 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.cp360-modal__close {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-light-gray);
  color: var(--color-dark-gray);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.cp360-modal__close:hover {
  background: var(--color-white);
  transform: rotate(90deg);
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.14);
}
.cp360-modal__frame-wrap {
  position: relative;
  flex: 1;
  min-height: 480px;
  background: var(--color-off-white);
}
.cp360-modal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Mobile: popup goes VERTICAL, video edge-to-edge ---------------------
   The desktop popup is horizontal (1040px wide, video below the header).
   On mobile Martu wants the popup ancho == ancho del video, video touching
   the popup borders. So we zero out the outer padding, drop the border
   radius, and let the dialog span the viewport. The video keeps its 1:1
   aspect ratio via the frame-wrap, so it lands square right against the
   left/right edges. The header sits on top, scrubber on the bottom of the
   iframe. */
@media (max-width: 719px) {
  .cp360-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .cp360-modal__dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
  .cp360-modal__header {
    padding: 16px 18px;
  }
  .cp360-modal__frame-wrap {
    /* Antes tenía aspect-ratio 1/1 fijo → cuando el viewport era angosto
       (390vw x 844vh), el cuadrado 390x390 dejaba mucho espacio bajo pero
       el video adentro se renderizaba a resolución nativa y "salía gigante"
       en Chrome mobile. Ahora ocupa todo el espacio restante del dialog
       (flex:1 con min-height:0) y el video object-fit:contain se centra
       y escala para caber siempre. */
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .cp360-modal__frame { object-fit: contain; background: #f6f5f2; }
}

/* Product body: give the right column more breathing room at the top so the
   title has real air above it, per Martu's ask. Old value ≈ 28–44px, bumped. */
.cp-modal__body {
  padding-top: clamp(40px, 5vw, 60px);
}

/* Tighten the finish label spacing now that it sits directly under the title
   / subtitle instead of after the bullets. */
.cp-modal__title + .cp-modal__subtitle + .cp-modal__desc + .cp-modal__finish-label,
.cp-modal__subtitle + .cp-modal__finish-label,
.cp-modal__title + .cp-modal__finish-label {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Table images (Product Specifications / Ordering / Accessories)
   Client publica estas tablas como PNGs en gaablocks.com. Render como cards
   blancas con label uppercase gris + imagen fluida. Click = lightbox.
   -------------------------------------------------------------------------- */
.cp-detail__tableimgs {
  margin-top: 32px;
  display: grid;
  gap: 22px;
}
.cp-detail__tableimgs[hidden] { display: none; }

.cp-detail__tableimg {
  margin: 0;
  padding: 0;
}
.cp-detail__tableimg-label {
  display: block;
  margin: 0 0 10px 2px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cp-detail__tableimg-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  cursor: zoom-in;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03),
              0 8px 24px rgba(10, 10, 10, 0.04);
  transition: box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.cp-detail__tableimg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.04),
              0 14px 32px rgba(10, 10, 10, 0.08);
}
.cp-detail__tableimg-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* "Tap to zoom" chip anclado abajo-derecha, sobre la imagen. En desktop
   funciona igual (cursor:zoom-in ya lo comunica); el chip es principalmente
   para touch — refuerza la affordance de que la imagen se puede agrandar. */
.cp-detail__tableimg-zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(10, 10, 10, 0.86);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Table image lightbox — fullscreen viewer con pinch-zoom nativo (touch)
   y scroll interno (desktop) para navegar imágenes altas.
   -------------------------------------------------------------------------- */
.cp-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
}
.cp-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.cp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cp-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 1200px);
  max-height: 92vh;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cp-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.cp-lightbox__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cp-lightbox__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--color-off-white);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.cp-lightbox__close:hover {
  background: var(--color-light-gray);
}
.cp-lightbox__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* touch-action: pinch-zoom deja que el browser haga zoom nativo con dos
     dedos. combined con overflow:auto tenés zoom + pan sin librerías. */
  touch-action: pinch-zoom;
  padding: 20px;
  background: var(--color-off-white);
}
.cp-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}
.cp-lightbox__img[hidden] { display: none; }

/* HTML table lightbox — same content as the popup table but at larger scale
   so mobile users can actually read every value without pinching a PNG. */
.cp-lightbox__html {
  display: block;
  width: 100%;
  min-width: min-content;
  font-size: 15px;
  color: var(--color-text-primary);
}
.cp-lightbox__html[hidden] { display: none; }
.cp-lightbox__html .cp-detail__grid-table {
  min-width: 720px;
  font-size: 15px;
  box-shadow: none;
  border-radius: 8px;
  table-layout: auto;
}
.cp-lightbox__html .cp-detail__grid-table .cp-detail__hdr th {
  font-size: 12px;
  padding: 14px 16px;
}
.cp-lightbox__html .cp-detail__grid-table .cp-detail__summary th {
  font-size: 16px;
  padding: 14px 16px;
}
.cp-lightbox__html .cp-detail__grid-table .cp-detail__defn td {
  font-size: 15px;
  line-height: 1.55;
  padding: 16px 18px;
}
.cp-lightbox__html .cp-detail__grid-table--rows tbody td {
  font-size: 15px;
  line-height: 1.55;
  padding: 14px 18px;
}


/* --------------------------------------------------------------------------
   Mobile popup overrides — 360° pill compacto en esquina inferior derecha.
   Va al final del archivo a propósito: la regla base de .cp-modal__360-pill
   está más abajo en el orden natural del CSS, así que un @media antes queda
   pisado por la cascade. Este bloque tiene que ganar → última posición.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .cp-modal__360-pill {
    left: auto;
    right: 12px;
    bottom: 12px;
    transform: none;
    padding: 7px 12px;
    font-size: 10px;
    gap: 5px;
    box-shadow: 0 4px 14px rgba(10, 10, 10, 0.32);
  }
  .cp-modal__360-pill svg { width: 12px; height: 12px; }
  .cp-modal__360-pill:hover {
    transform: translateY(-1px);
  }
  /* Close button: en mobile el DIALOG scrollea (no el body), y el X estaba
     con position:absolute dentro del dialog → se iba con el scroll y
     desaparecía. Ahora position:fixed contra el viewport para que quede
     siempre visible en la esquina superior derecha mientras el user
     scrollea el popup. */
  .cp-modal__close {
    position: fixed;
    top: 32px;      /* dentro del padding 20px del modal + 12px adentro del dialog */
    right: 28px;    /* padding 16px + 12px */
    width: 34px;
    height: 34px;
    background: var(--color-white);
    box-shadow: 0 4px 14px rgba(10, 10, 10, 0.22),
                0 0 0 1px rgba(10, 10, 10, 0.06);
    z-index: calc(var(--z-modal) + 1);
  }
  .cp-modal__close svg { width: 16px; height: 16px; }
  /* Subtitle azul más chico y en cadence de label en mobile. */
  .cp-modal__subtitle { font-size: 11px; line-height: 1.5; }
  /* Título del producto en mobile: un pelín más grande que el default, no
     tanto como el 34px inicial que quedaba grandote. */
  .cp-modal__title { font-size: 30px; line-height: 1.1; }

  /* Mobile swipe carousel: quitar flechas y usar scroll-snap sobre el track
     de slides. Cada slide ocupa 100% del viewport del media (aspect-ratio
     ya definido arriba) y snapea al centro. Pinch-inertia nativa.

     Ojo: `.cp-modal__media` tenía aspect-ratio 4/3 pero sin ancla horizontal
     el aspect empujaba el ancho por sobre el dialog (media 429 vs dialog
     358) → la imagen se veía "recortada". Forzamos width al 100% del
     dialog con !important + min-width:0 para que el aspect no expanda. */
  .cp-modal__media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .cp-modal__nav { display: none !important; }
  .cp-modal__img { display: none; }
  .cp-modal__slides {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    background: var(--color-white);
  }
  .cp-modal__slides::-webkit-scrollbar { display: none; }
  .cp-modal__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 20px 16px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
  }
}
/* Desktop: track oculto, la .cp-modal__img principal se usa con flechas. */
@media (min-width: 701px) {
  .cp-modal__slides { display: none; }
}


/* --------------------------------------------------------------------------
   Scroll-reveal — cada bloque del popup fade+slide-up al entrar en vista.
   Wired en JS por IntersectionObserver con root=.cp-modal__body. Los pills
   de docs escalonan con --reveal-i (delay incremental). Respeta
   prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.cp-reveal {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-i, 0) * 70ms),
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
.cp-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}