/* ============================================
   OLIABO PRODUCT HEADER — Gallery + Sticky Buy Box
   ============================================ */

.oeh__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 960px) {
  .oeh__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
  }
}

/* ─────────────────────────────────────────────
   LEFT: GALLERY
   ───────────────────────────────────────────── */

.oeh__gallery {
  min-width: 0;
}

/* Mobile: horizontal snap-scroll of all images; hide ticker */
@media (max-width: 959px) {
  .oeh__gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--space-sm);
    margin-inline: calc(-1 * var(--space-lg));
    padding-inline: var(--space-lg);
  }

  .oeh__gallery::-webkit-scrollbar { display: none; }

  /* Flatten rows — children become direct grid items of .oeh__gallery */
  .oeh__gallery-row { display: contents; }

  .oeh__img-frame { scroll-snap-align: start; }

  .oeh__ticker { display: none; }
}

/* Desktop: stacked 2-col rows with ticker between */
@media (min-width: 960px) {
  .oeh__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .oeh__gallery-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

.oeh__img-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-bg-card-secondary);
}

.oeh__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oeh__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e2d6 0%, #d4ccbb 40%, #c9bfaa 100%);
}

/* Ticker strip beneath feature image */
.oeh__ticker {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--clr-bg-card-secondary);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.oeh__ticker-track {
  display: flex;
  gap: var(--space-xl);
  white-space: nowrap;
  animation: oeh-ticker 40s linear infinite;
  width: max-content;
}

.oeh__ticker:hover .oeh__ticker-track { animation-play-state: paused; }

.oeh__ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.oeh__ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-brand-accent);
  flex-shrink: 0;
}

.oeh__ticker-accent {
  color: var(--clr-brand-alt);
  opacity: 0.8;
}

@keyframes oeh-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .oeh__ticker-track { animation: none; }
}

/* "More images" horizontal scroller (desktop only — mobile uses the unified gallery scroller above) */
@media (min-width: 960px) {
  .oeh__more {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .oeh__more-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-md)) / 2);
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 86%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 86%, transparent 100%);
  }

  .oeh__more-track::-webkit-scrollbar { display: none; }

  .oeh__more-frame { scroll-snap-align: start; }

  /* Default video frame — sits in a single image slot, same 4/5
     ratio as an image. Used for portrait videos. */
  .oeh__more-frame--video {
    background: #000;
  }

  /* Landscape videos (set via JS on metadata load) take the full
     carousel width — same space two image frames would occupy.
     Drop the inherited 4/5 aspect-ratio so the frame stretches to
     the grid row height (which is set by the adjacent image
     frames) — guarantees an exact height match regardless of gap. */
  .oeh__more-frame--video.oeh__more-frame--landscape {
    grid-column: span 2;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
  }

  .oeh__more-frame--video .oeh__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Centered play button overlay — visible until the user clicks. */
  .oeh__more-frame--video .oeh__video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: rgba(253, 252, 250, 0.92);
    color: var(--clr-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  .oeh__more-frame--video .oeh__video-play:hover {
    transform: scale(1.06);
    background: var(--clr-white, #fff);
  }

  .oeh__more-frame--video .oeh__video-play:focus-visible {
    outline: 2px solid var(--clr-brand-accent);
    outline-offset: 4px;
  }

  .oeh__more-frame--video .oeh__video-play-icon {
    display: inline-flex;
    /* Optical alignment — the play triangle's visual center
       sits slightly right of the geometric center. */
    transform: translateX(2px);
  }

  /* Hidden once playback starts. */
  .oeh__more-frame--video.is-playing .oeh__video-play {
    opacity: 0;
    pointer-events: none;
  }

  .oeh__more-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
  }

  .oeh__more-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--clr-border-dark);
    border-radius: var(--radius-md);
    background: var(--clr-white);
    color: var(--clr-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .oeh__more-btn:hover {
    background: rgba(60, 66, 46, 0.05);
    border-color: var(--clr-primary);
  }

  .oeh__more-btn:focus-visible {
    outline: 2px solid var(--clr-brand-accent);
    outline-offset: 2px;
  }
}

/* Mobile: collapse "more" wrapper so its frames flow into the unified gallery scroller */
@media (max-width: 959px) {
  .oeh__more,
  .oeh__more-track {
    display: contents;
  }
  .oeh__more-controls { display: none; }
}

/* ─────────────────────────────────────────────
   RIGHT: BUY BOX
   ───────────────────────────────────────────── */

.oeh__buybox {
  min-width: 0;
}

.oeh__buybox-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 960px) {
  .oeh__buybox-inner {
    position: sticky;
    top: calc(80px + var(--space-md));
  }
}

/* 1 — Header */
.oeh__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.oeh__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.oeh__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.018em;
  text-transform: uppercase;
  color: var(--clr-primary);
  overflow-wrap: break-word;
}

.oeh__subtitle {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  color: var(--clr-primary);
}

/* 2 — Rating */
.oeh__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.oeh__stars {
  color: var(--clr-brand-accent);
  font-size: 14px;
  letter-spacing: 2px;
}

.oeh__rating-count {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--clr-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.oeh__rating-count:hover { border-color: currentColor; }

/* 3 — Short Description (from product resource) */
.oeh__short-description {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-primary);
}

.oeh__short-description p { margin: 0 0 var(--space-sm); }
.oeh__short-description p:last-child { margin-bottom: 0; }
.oeh__short-description strong,
.oeh__short-description b { font-weight: 600; color: var(--clr-primary); }
.oeh__short-description em,
.oeh__short-description i { font-style: italic; }

/* Variant select */
.oeh__variant-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.oeh__variant-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.75;
}

.oeh__variant-select {
  width: 100%;
  padding: 12px var(--space-md);
  background: var(--clr-white);
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--clr-primary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%233c422e' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.oeh__variant-select:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 2px;
}

/* 4 — Purchase options */
.oeh__purchase {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.oeh__purchase-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.75;
}

.oeh__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--clr-white);
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.oeh__option:hover { border-color: var(--clr-border-dark); }

.oeh__option.is-selected {
  border: 2px solid var(--clr-primary);
  padding: calc(var(--space-md) - 1px);
  background: rgba(60, 66, 46, 0.02);
}

.oeh__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.oeh__option-badge {
  position: absolute;
  top: -10px;
  left: var(--space-md);
  padding: 3px 10px;
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oeh__option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.oeh__option-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.oeh__option-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-primary);
  white-space: nowrap;
}

.oeh__option-price sup {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 2px;
}

.oeh__option-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oeh__option-detail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  font-weight: 400;
  color: var(--clr-text-secondary);
}

.oeh__option-detail svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* 5 — ATC row */
.oeh__atc-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

/* Full-width ATC row — used by enrollments (no qty stepper). The
   button alone takes the row, so it reads as a single decisive CTA. */
.oeh__atc-row--full .oeh__atc-btn {
  flex: 1;
  width: 100%;
}

.oeh__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-md);
  background: var(--clr-white);
  overflow: hidden;
  flex-shrink: 0;
}

.oeh__qty-btn {
  width: 40px;
  height: 100%;
  min-height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.oeh__qty-btn:hover { background: rgba(60, 66, 46, 0.05); }
.oeh__qty-btn:focus-visible { outline: 2px solid var(--clr-brand-accent); outline-offset: -2px; }

.oeh__qty-input {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--clr-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.oeh__qty-input::-webkit-outer-spin-button,
.oeh__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.oeh__atc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px var(--space-xl);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.oeh__atc-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.oeh__atc-btn:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

.oeh__atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 6 — Trust row (horizontal, pipe-separated, full ATC width, centered) */
.oeh__trust {
  list-style: none;
  margin: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--clr-border-light);
  border-bottom: 1px solid var(--clr-border-light);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  text-align: center;
}

.oeh__trust-item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--clr-primary);
  white-space: nowrap;
}

.oeh__trust-item:not(:last-child)::after {
  content: '|';
  margin-left: var(--space-md);
  color: var(--clr-primary);
  opacity: 0.35;
  font-weight: 300;
}

@media (min-width: 600px) {
  .oeh__trust-item { font-size: 13px; }
}

/* 7 — Description (long, with rich-text formatting preserved) */
.oeh__description {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-text-secondary);
}

.oeh__description p { margin: 0 0 var(--space-sm); }
.oeh__description p:last-child { margin-bottom: 0; }
.oeh__description strong,
.oeh__description b {
  font-weight: 600;
  color: var(--clr-primary);
}
.oeh__description em,
.oeh__description i {
  font-style: italic;
}
.oeh__description a {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.oeh__description ul,
.oeh__description ol {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-lg);
}
.oeh__description li { margin-bottom: 4px; }

/* 8 — Benefits list */
.oeh__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.oeh__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--clr-primary);
}

.oeh__benefit-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(60, 66, 46, 0.08);
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* 9 — Accordions */
.oeh__accordions {
  display: flex;
  flex-direction: column;
}

.oeh__accordion {
  border-top: 1px solid var(--clr-border-light);
}

.oeh__accordion:last-child {
  border-bottom: 1px solid var(--clr-border-light);
}

.oeh__accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.oeh__accordion-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.oeh__accordion[aria-expanded="true"] .oeh__accordion-icon {
  transform: rotate(45deg);
}

.oeh__accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.oeh__accordion[aria-expanded="true"] .oeh__accordion-content {
  grid-template-rows: 1fr;
}

.oeh__accordion-inner {
  overflow: hidden;
}

.oeh__accordion-body {
  padding: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-text-secondary);
}

.oeh__accordion-body p { margin: 0 0 var(--space-sm); }
.oeh__accordion-body p:last-child { margin-bottom: 0; }
.oeh__accordion-body ul { margin: 0 0 var(--space-sm); padding-left: var(--space-md); }
.oeh__accordion-body li { margin-bottom: 4px; }
.oeh__accordion-body strong,
.oeh__accordion-body b {
  font-weight: 600;
  color: var(--clr-primary);
}
.oeh__accordion-body em,
.oeh__accordion-body i {
  font-style: italic;
}

/* ─────────────────────────────────────────────
   STICKY MOBILE ATC BAR
   ───────────────────────────────────────────── */

.oeh__sticky-atc {
  display: none;
}

@media (max-width: 959px) {
  .oeh__sticky-atc {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--clr-white);
    border-top: 1px solid var(--clr-border-light);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  }
}

.oeh__sticky-atc-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 560px;
  margin: 0 auto;
}

.oeh__sticky-atc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oeh__sticky-atc-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oeh__sticky-atc-price {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--clr-text-secondary);
}

.oeh__sticky-atc-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--space-lg);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.oeh__sticky-atc-btn:hover { opacity: 0.9; }
.oeh__sticky-atc-btn:focus-visible { outline: 2px solid var(--clr-brand-accent); outline-offset: 2px; }

/* Always reserve bottom space on mobile so content isn't obscured by the sticky bar */
@media (max-width: 959px) {
  .oeh { padding-bottom: 76px; }
}

/* ─────────────────────────────────────────────
   UNAVAILABLE STATE — out of stock / inactive /
   not available in country. Purchase options
   remain visible (so shoppers can see the
   subscribe offer) but are visually muted and
   non-interactive. ATC button is disabled.
   ───────────────────────────────────────────── */

.oeh__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: 6px 12px;
  background: rgba(60, 66, 46, 0.06);
  border: 1px solid rgba(60, 66, 46, 0.18);
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.oeh--unavailable .oeh__option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.4);
}

.oeh--unavailable .oeh__option.is-disabled,
.oeh--unavailable .oeh__option.is-disabled * {
  pointer-events: none;
}

.oeh__limited-stock {
  margin: var(--space-sm) 0 0;
  font-size: 13px;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}

/* Disabled qty stepper */
.oeh__qty-btn:disabled,
.oeh__qty-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Disabled sticky ATC (mobile) — match main ATC disabled treatment */
.oeh__sticky-atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   BUNDLE PANEL
   Shown above purchase options. Two parts:
    - Included items: read-only compact rows.
    - Customizable groups: interactive rows with
      either a radio dot (max=1) or a +/− stepper
      (max>1). Progress pill tracks min selections.
   Styling stays in the Mediterranean editorial
   palette per the design guide.
   ============================================ */

.oeh__bundle {
  margin: var(--space-md) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--clr-border-light);
}

.oeh__bundle-title {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.65;
}

.oeh__bundle-included {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Included rows — read-only, soft olive-tinted box. Mirrors
   .eph__included-row from enrollment-packs-hero. */
.oeh__bundle-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  background: rgba(60, 66, 46, 0.04);
  border-radius: var(--radius-md);
}

.oeh__bundle-img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(60, 66, 46, 0.06);
  display: grid;
  place-items: center;
}

.oeh__bundle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product name — single-line with ellipsis fallback so it never
   wraps to two rows; takes full available width of the row. */
.oeh__bundle-name {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--clr-text-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Included-row quantity ("×1", "×4") — nudged left so it aligns
   roughly with the qty number inside the customizable rows' steppers
   below. Margin matches the right-half of a stepper (button + half
   the qty cell). */
.oeh__bundle-qty {
  font-size: 15px;
  color: var(--clr-text-secondary);
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-right: 52px;
}

/* ── Customizable groups ─────────────────────── */
.oeh__bundle-group {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) 0 0;
  border-top: 1px dashed var(--clr-border-light);
}

.oeh__bundle-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}

.oeh__bundle-group-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.3;
}

/* Progress indicator — always a pill (matches .eph__custom-group-progress).
   Sits soft-gray on a tinted bg by default; flips to white-on-primary
   when the group's required selections are met. */
.oeh__bundle-group-progress {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(60, 66, 46, 0.06);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.oeh__bundle-group-progress.is-complete {
  color: var(--clr-text-inverse);
  background: var(--clr-primary);
}

.oeh__bundle-group-desc {
  margin: 0 0 var(--space-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--clr-text-secondary);
}

.oeh__bundle-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Option row — each product gets its own boxed card with a light
   border. Hover and selected states bump the border, matching
   .eph__option-row from enrollment-packs-hero.
   Two grid layouts because max=1 and max>1 groups render different
   children (radio toggle vs stepper). CSS grid auto-places left-to-right,
   so we have to give each layout the right column count or the name
   gets stuffed into the image column and ellipses prematurely. */
.oeh__bundle-option {
  display: grid;
  /* Default (max>1 / stepper groups): image | name | stepper */
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px;
  background: var(--clr-white, #fff);
  border: 1.5px solid rgba(60, 66, 46, 0.14);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Radio groups (max=1): toggle | image | name. No stepper column,
   so the name's 1fr cell can expand all the way to the right edge. */
[data-oeh-group][data-oeh-group-max="1"] .oeh__bundle-option {
  grid-template-columns: auto 60px minmax(0, 1fr);
}

.oeh__bundle-option:hover:not(.is-out-of-stock) {
  border-color: rgba(60, 66, 46, 0.45);
}

.oeh__bundle-option.is-selected {
  border-color: var(--clr-primary);
  background: rgba(60, 66, 46, 0.04);
}

.oeh__bundle-option.is-out-of-stock {
  opacity: 0.45;
  cursor: not-allowed;
}

.oeh__bundle-oos {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* Radio dot toggle (max=1 groups) */
.oeh__bundle-toggle {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(60, 66, 46, 0.30);
  border-radius: 50%;
  background: var(--clr-white, #fff);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.oeh__bundle-toggle:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 2px;
}

.oeh__bundle-toggle-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--clr-primary);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.oeh__bundle-option.is-selected .oeh__bundle-toggle {
  border-color: var(--clr-primary);
}

.oeh__bundle-option.is-selected .oeh__bundle-toggle-dot {
  transform: scale(1);
}

/* +/− stepper (max>1 groups) — grouped into one box with internal
   buttons, matching .eph__option-stepper. `justify-self: end` is
   the key fix: grid items default to `stretch`, which was making
   the stepper span the whole right-side cell even though the cell
   is `auto`-sized. `end` forces the stepper to size to content and
   sit flush at the right edge of its cell. */
.oeh__bundle-stepper {
  flex-shrink: 0;
  justify-self: end;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(60, 66, 46, 0.20);
  border-radius: var(--radius-md);
  background: var(--clr-white, #fff);
  overflow: hidden;
}

.oeh__bundle-step-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--clr-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background-color 0.15s ease;
}

.oeh__bundle-step-btn:hover:not(:disabled) {
  background: rgba(60, 66, 46, 0.05);
}

.oeh__bundle-step-btn:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: -2px;
}

.oeh__bundle-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.oeh__bundle-step-qty {
  min-width: 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* visually-hidden helper for screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Disabled ATC (validation-gated) */
.oeh__atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   RECURRING-ITEM ROW
   `subscription_products` (the items that ship monthly after
   enrollment) render in the same list as bundle includes. For now
   they look identical to other rows — the `.oeh__bundle-row--recurring`
   class is kept as a styling hook for future visual differentiation.
   ============================================ */