/* =====================================================
   NEORA BRAND PARTNER ENROLLMENT CONFIGURATOR
   Full-width split-screen layout with collapsible sections
===================================================== */

/* =====================================================
   COMBINED STICKY FOOTER (QV Progress + Order Summary)
===================================================== */
.enrollment-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 2147483647;
  margin-top: auto;
  /* Break out of parent padding to be full width */
  margin-left: calc(-1 * var(--enroll-spacing-lg));
  margin-right: calc(-1 * var(--enroll-spacing-lg));
  width: calc(100% + (2 * var(--enroll-spacing-lg)));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* 2026-09-29: the max z-index above keeps the bar over the Chatbase bubble at the bottom of the
   screen, but it also painted the bar over the site nav when the end of the configurator scrolled
   up into the nav zone. The section script adds .is-under-nav while the bar is in that zone, which
   drops it just below the nav (.site-header 200 / .navbar-top-bars 201). */
.enrollment-sticky-footer.is-under-nav { z-index: 199; }

#icChatButton { opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 1023px) {
  .enrollment-sticky-footer {
    margin-left: calc(-1 * var(--enroll-spacing));
    margin-right: calc(-1 * var(--enroll-spacing));
    width: calc(100% + (2 * var(--enroll-spacing)));
  }
}

@media (min-width: 1024px) {
  .enrollment-sticky-footer {
    margin-left: -48px;
    margin-right: -48px;
    width: calc(100% + 96px);
  }
}

/* CSS Custom Properties - Using Theme Colors */
.enrollment-configurator {
  --enroll-spacing: 24px;
  --enroll-spacing-lg: 32px;
  --enroll-radius: 12px;
  --enroll-radius-lg: 16px;

  /* Colors from theme variables */
  --enroll-primary: var(--clr-primary, #1c0f8a);
  --enroll-primary-hover: var(--clr-primary-hover, #2917cc);
  --enroll-accent: var(--clr-secondary, #4c2eff);
  --enroll-success: var(--clr-success, #18a558);
  --enroll-warning: var(--clr-warning, #f59e0b);
  --enroll-border: var(--clr-border-light, #f0e8e2);
  --enroll-border-hover: var(--clr-border-dark, #dad0c9);
  --enroll-bg-light: var(--clr-neutral-light, #faf3ec);
  --enroll-bg-hero: linear-gradient(
    135deg,
    var(--clr-neutral-lighter, #fdf9f5) 0%,
    var(--clr-neutral-light, #faf3ec) 100%
  );
  --enroll-text-primary: var(--clr-text-primary, #1a1716);
  --enroll-text-secondary: var(--clr-text-secondary, #3b302a);
  --enroll-text-muted: var(--clr-text-muted, #7a7067);
  --enroll-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --enroll-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --enroll-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --enroll-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  background: var(--clr-bg-page, #fff);
  min-height: 100vh;
  font-family: var(--font-body, "Poppins", sans-serif);
}

/* =====================================================
   FULL-WIDTH SPLIT SCREEN LAYOUT
===================================================== */
/* Desktop split-screen: align both columns to the top so the right panel
   can stay anchored while the hero scrolls with the page. align-items
   default (stretch) would have forced both columns to the same height. */
.enrollment-split-screen {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/* Flex-proportional split: hero gets 1 share, panel gets 2 shares.
   flex-basis: 0 keeps the ratio exact at any viewport so we don't
   need tier-specific grid overrides. min-width: 0 on the panel is
   required so its overflowing content doesn't push the row. */
.enrollment-hero {
  flex: 1 1 0;
}

.enrollment-panel {
  flex: 2 1 0;
  min-width: 0;
}

@media (max-width: 1023px) {
  .enrollment-split-screen {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =====================================================
   LEFT COLUMN: HERO
   Default = 100vh tall. Grows naturally if its content (selling-point
   blocks, etc.) is taller. Flows in the page scroll — the right panel
   is sticky/scrollable, so the two columns scroll independently.
===================================================== */
.enrollment-hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start; /* top-align hero content */
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

/* Tablet & mobile: hero sizes to its content. The viewport-based min-heights
   we used previously created two opposite problems — empty space below the
   blocks on tablet (when content < 50vh), and clipping of the carousel
   arrows on mobile (when content > 40vh). Letting the hero match its
   natural content height fixes both.

   Also override the desktop `flex: 1 1 0` (which uses flex-basis: 0 to
   distribute the row split). In a column-direction parent that has no
   definite height, basis-0 leaves the item with no intrinsic size to grow
   from, so the column collapses entirely. Switching to `0 0 auto` lets
   each column size to its content along the main (now vertical) axis. */
@media (max-width: 1023px) {
  .enrollment-hero {
    flex: 0 0 auto;
    min-height: auto;
  }
}

/* Gradient Overlay — Liquid inlines `background` on this element per the
   section's strength + direction + black-point controls. The fallback here
   matches the new "down" default (dark top → transparent bottom). */
.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.85) 0%,
    transparent 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1023px) {
  .hero-content {
    padding: 32px 24px;
  }
}

@media (max-width: 767px) {
  .hero-content {
    padding: 24px 20px;
  }
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.preview-item img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--enroll-shadow-md);
  background: #fff;
}

.preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--enroll-text-secondary);
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 4px;
}

@media (max-width: 1023px) {
  .floating-previews {
    display: none;
  }
}

/* Hero Text - Left Aligned, White on Dark */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.hero-title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 24px;
  }
}

.hero-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* Value Props - White on Dark */
.value-props {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.value-prop {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.value-prop svg {
  flex-shrink: 0;
  color: #fff;
  opacity: 0.9;
}

/* Selling Point Blocks (left column) — badge + header + body, stacked.
   On tablet/mobile the track flips to a horizontal swipe carousel; see
   the (max-width: 1023px) overrides below. */
.hero-selling-points-wrap {
  margin-top: 16px;
}

.hero-selling-points {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Arrow nav is desktop-hidden — the column layout doesn't need it. */
.hero-selling-points-nav {
  display: none;
}

.hero-selling-point {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-selling-point__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1716;
  text-shadow: none;
  line-height: 1.2;
  /* background-color, opacity, border-radius are inlined per-block */
}

.hero-selling-point__badge i {
  font-size: 13px;
  line-height: 1;
}

.hero-selling-point__header {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero-selling-point__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
}

@media (max-width: 1023px) {
  /* Horizontal swipe carousel — fixed 270px cards. Native overflow-x
     handles touch swipe; the arrow buttons below the track scroll one
     card at a time on click. */
  .hero-selling-points {
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .hero-selling-points::-webkit-scrollbar {
    display: none;
  }

  .hero-selling-point {
    flex: 0 0 270px;
    width: 270px;
    scroll-snap-align: start;
  }

  .hero-selling-point__header {
    font-size: 20px;
  }

  .hero-selling-point__body {
    font-size: 13px;
  }

  .hero-selling-points-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }

  .hero-selling-points-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .hero-selling-points-arrow:hover {
    background: rgba(255, 255, 255, 0.28);
  }

  .hero-selling-points-arrow:active {
    transform: scale(0.94);
  }

  .hero-selling-points-arrow[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }
}

/* =====================================================
   RIGHT COLUMN: SCROLLABLE PANEL
   Desktop: sticky at the top of the viewport with its own internal
   scroll so it moves independently from the hero (which scrolls with
   the page). Mobile: regular block flow in the stacked column.
===================================================== */
.enrollment-panel {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--enroll-spacing-lg);
  padding-bottom: 0; /* No bottom padding - sticky bar goes to edge */
  background: #fff;
}

@media (max-width: 1023px) {
  .enrollment-panel {
    position: relative;
    top: auto;
    align-self: auto;
    flex: 0 0 auto; /* same fix: avoid the basis-0 collapse from desktop */
    height: auto;
    max-height: none;
    overflow-y: visible;
    min-height: auto;
    padding: var(--enroll-spacing);
    padding-bottom: 0;
  }
}

/* Old Starter Kit Section styles removed - replaced with QV Progress Bar */

/* =====================================================
   CONFIG STEPS (Numbered with Dividers)
===================================================== */
.config-step {
  padding-top: var(--enroll-spacing-lg);
  padding-bottom: var(--enroll-spacing-lg);
  border-bottom: 1px solid var(--enroll-border);
}

.config-step:first-of-type {
  padding-top: 0;
}

.config-step:last-of-type {
  border-bottom: none;
  padding-bottom: var(--enroll-spacing);
}

/* Step Header with Number */
.step-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--enroll-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 2px;
}

.step-header-text {
  flex: 1;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--enroll-text-primary);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.step-description {
  font-size: 15px;
  color: var(--enroll-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Step title + inline info button row (replaces the title's own bottom margin
   so the description spacing is unchanged). */
.step-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.step-title-row .step-title {
  margin-bottom: 0;
}

/* Info popover next to the title — revealed on hover/focus (CSS) and on
   click/tap (JS toggles .is-open). */
.step-info {
  position: relative;
  display: inline-flex;
}

.step-info-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 320px;
  max-width: min(320px, 80vw);
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: var(--enroll-radius);
  box-shadow: var(--enroll-shadow-lg);
  font-size: 13px;
  line-height: 1.5;
  color: var(--enroll-text-secondary);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.step-info:hover .step-info-popover,
.step-info:focus-within .step-info-popover,
.step-info.is-open .step-info-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.step-info-popover p {
  margin: 0 0 8px;
}

.step-info-popover p:last-child {
  margin-bottom: 0;
}

.step-info-popover ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.step-info-popover li {
  margin-bottom: 4px;
}

.step-info-popover a {
  color: var(--enroll-text-primary); /* Y44: gold link on #fff popover was 2.04:1, now 9.32:1 */
  text-decoration: underline;
}

/* Transparent bridge across the 8px gap so moving the cursor from the button
   down to the popover doesn't drop the :hover and flicker it closed. */
.step-info-popover::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}

/* On phones the 320px popover would overflow; pin it as a bottom sheet that
   always fits. Hover doesn't exist on touch — the JS .is-open toggle drives it. */
@media (max-width: 767px) {
  .step-info-popover {
    position: fixed;
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    transform: translateY(8px);
  }

  .step-info:hover .step-info-popover,
  .step-info:focus-within .step-info-popover,
  .step-info.is-open .step-info-popover {
    transform: translateY(0);
  }

  /* The sticky checkout bar sits above everything and covered the bottom sheet, so its
     links couldn't be tapped. Step it aside while a step-info sheet is open. */
  .enrollment-configurator:has(.step-info.is-open) .enrollment-sticky-footer {
    visibility: hidden;
  }
}

/* Inline View Pack Contents Link */
.view-pack-contents-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 0;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.view-pack-contents-link:hover {
  color: var(--enroll-primary-hover);
}

.view-pack-contents-link svg {
  transition: transform 0.2s ease;
}

.view-pack-contents-link.expanded svg {
  transform: rotate(180deg);
}

/* Step Content */
.step-content {
  padding-left: 48px; /* Align with text after step number */
}

@media (max-width: 767px) {
  .step-header {
    gap: 12px;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .step-content {
    padding-left: 0;
  }
}

/* =====================================================
   ADDON CARDS (Checkbox Style)
===================================================== */
.addon-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: var(--enroll-radius);
  transition: all 0.2s ease;
}

.addon-card:hover {
  border-color: var(--enroll-border-hover);
}

.addon-card.selected {
  border-color: var(--enroll-accent);
  background: #f8faff;
}

.addon-checkbox-wrapper {
  flex-shrink: 0;
  padding-top: 2px;
}

.addon-checkbox {
  display: none;
}

.addon-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--enroll-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addon-checkbox:checked + .addon-checkbox-label {
  background: var(--enroll-accent);
  border-color: var(--enroll-accent);
}

.addon-checkbox:checked + .addon-checkbox-label::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
    center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
    center/contain no-repeat;
}

.addon-content {
  flex: 1;
  min-width: 0;
}

.addon-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.addon-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0;
}

.addon-pricing {
  text-align: right;
  flex-shrink: 0;
}

.addon-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary);
}

.addon-price-note {
  display: block;
  font-size: 13px;
  color: var(--enroll-text-muted);
}

.addon-divider {
  height: 1px;
  background: var(--enroll-border);
  margin-bottom: 12px;
}

.addon-features {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addon-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--enroll-text-secondary);
}

.addon-features li svg {
  flex-shrink: 0;
  color: #9ca3af;
}

.addon-card.selected .addon-features li svg {
  color: var(--enroll-accent);
}

.addon-learn-more {
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-accent);
  text-decoration: none;
}

.addon-learn-more:hover {
  text-decoration: underline;
}

/* =====================================================
   SMARTSHOP PRODUCT BROWSER
===================================================== */

/* Category Tabs */
.smartshop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.smartshop-tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  border-color: var(--enroll-border-hover);
  color: var(--enroll-text-primary);
}

.tab-btn.active {
  background: var(--enroll-primary);
  border-color: var(--enroll-primary);
  color: #fff;
}

/* Search Bar */
.smartshop-search {
  position: relative;
  margin-bottom: 20px;
}

.smartshop-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--enroll-text-muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 12px 14px 12px 44px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: var(--enroll-radius);
  font-size: 15px;
  color: var(--enroll-text-primary);
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--enroll-accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.search-input::placeholder {
  color: var(--enroll-text-muted);
}

/* Product Grid */
.smartshop-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .smartshop-products-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Product Grid - horizontal scroller matching OG yoli design.
   Cards lay out in a single row and scroll horizontally instead of
   wrapping, so the step content stays short even with many products. */
.addons-products-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;
  gap: 16px;
  padding: 4px 2px 12px 2px;
  margin-bottom: 0;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--enroll-border-hover) transparent;
}

.addons-products-grid::-webkit-scrollbar {
  height: 8px;
}

.addons-products-grid::-webkit-scrollbar-track {
  background: transparent;
}

.addons-products-grid::-webkit-scrollbar-thumb {
  background: var(--enroll-border);
  border-radius: 4px;
}

.addons-products-grid::-webkit-scrollbar-thumb:hover {
  background: var(--enroll-border-hover);
}

/* Product Card - vertical card with image on top, info below.
   HTML order is info -> media, so column-reverse puts the image
   on top and the info block below. Fixed width + flex-shrink: 0
   keeps each card its own slot in the scrolling row. */
.addon-product-card {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  flex-shrink: 0;
  gap: 0;
  width: 220px;
  padding: 0;
  background: var(--clr-bg-surface, #fff);
  border: 1px solid var(--enroll-border);
  border-radius: var(--enroll-radius-lg);
  transition: all 0.2s ease;
  min-height: auto;
  overflow: hidden;
  scroll-snap-align: start;
}

.addon-product-card:hover {
  border-color: var(--enroll-border-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.addon-product-card.selected {
  border-color: var(--enroll-primary);
  box-shadow: 0 0 0 1px var(--enroll-primary);
}

.addon-product-card.hidden {
  display: none;
}

/* Add-on not orderable in the current country. initStandaloneProducts() tags
   the card and disables the add button when no variant_country matches the
   fluid_country cookie. */
.addon-product-card.addon-unavailable {
  opacity: 0.6;
}

.addon-product-card.addon-unavailable:hover {
  border-color: var(--enroll-border);
  box-shadow: none;
}

.addon-product-card.addon-unavailable .addon-product-image img {
  filter: grayscale(1);
}

.addon-product-card.addon-unavailable .addon-product-price {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--enroll-text-muted);
}

.addon-product-card.addon-unavailable .qty-add-btn {
  cursor: not-allowed;
  opacity: 0.5;
}

.addon-product-card.addon-unavailable .qty-add-btn:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Product Info - sits below image in the vertical scroller card. */
.addon-product-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  padding: 12px 14px 14px;
  min-width: 0;
}

/* Title + optional variant picker share a fixed-height region so every add-on
   card is the same height whether or not it has a picker. The region fits one
   title line plus the select; with no select the title may use up to two lines
   (clamped). Keeps the images aligned across the scroller row, with no gap
   above the image. */
.addon-product-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}

.addon-product-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* With a variant picker present, the title collapses to a single line
   (ellipsis) so the picker fits within the same fixed height. */
.addon-product-head--has-select .addon-product-name {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.addon-product-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary);
}

.price-period {
  font-weight: 400;
  color: var(--enroll-text-muted);
}

/* Variant picker on multi-variant add-on product cards. */
.addon-variant-select {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--enroll-text-primary);
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: 200px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.addon-variant-select:hover {
  border-color: var(--enroll-border-hover);
}

.addon-variant-select:focus {
  outline: none;
  border-color: var(--enroll-primary);
  box-shadow: 0 0 0 1px var(--enroll-primary);
}

/* Product Media - sits at top of the vertical card, full width. */
.addon-product-media {
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

.addon-product-image {
  width: 100%;
  height: 180px;
  border-radius: 0;
  overflow: hidden;
  background: var(--enroll-bg-light);
}

.addon-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.addon-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--enroll-text-muted);
  background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
}

/* Qty Controls - overlay on the image's bottom-right corner. */
.qty-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
}

.qty-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.15s ease;
}

.qty-add-btn svg {
  color: var(--enroll-primary);
}

.qty-add-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Qty Stepper */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--enroll-primary);
  border-radius: 20px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.qty-minus-btn,
.qty-plus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.qty-minus-btn svg,
.qty-plus-btn svg {
  color: #fff;
}

.qty-minus-btn:hover,
.qty-plus-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.qty-value {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* Mobile adjustments for horizontal scroller cards. */
@media (max-width: 767px) {
  .addon-product-card {
    width: 180px;
  }

  .addon-product-image {
    height: 140px;
  }

  .addon-product-name {
    font-size: 16px;
  }

  .addon-product-price {
    font-size: 16px;
  }
}

/* Savings Badge - overlay on the image's top-left corner so it doesn't
   shift the info block's layout on cards that have it. */
.product-savings-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-block;
  background: var(--enroll-text-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

/* Pricing Row */
.product-pricing {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 0;
}

.addon-product-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary);
}

/* Savings Info - green subscription savings line below the price */
.product-savings-info {
  font-size: 13px;
  font-weight: 500;
  color: var(--enroll-success);
  margin: 0;
}

.price-period {
  font-size: 12px;
  font-weight: 400;
  color: var(--enroll-text-muted);
}

/* Show More Button */
.smartshop-show-more {
  text-align: center;
  margin-bottom: 24px;
}

.show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: none;
  border: 1px solid var(--enroll-border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.show-more-btn:hover {
  background: var(--enroll-bg-light);
  border-color: var(--enroll-border-hover);
}

/* Help Section */
.help-section {
  margin-top: 24px;
}

.help-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: none;
  border: 1px solid var(--enroll-border);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  color: var(--enroll-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-trigger:hover {
  background: var(--enroll-bg-light);
  border-color: var(--enroll-border-hover);
}

.help-trigger svg {
  transition: transform 0.2s ease;
}

/* Legacy section styles (keeping for backwards compatibility) */
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0;
}

.section-savings {
  padding: 4px 10px;
  background: #dcfce7;
  color: var(--enroll-success);
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
}

.section-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary);
}

.section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--enroll-text-secondary);
  font-size: 14px;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

/* Info Tooltip Button */
.info-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--enroll-text-muted);
  transition: color var(--enroll-transition);
  padding: 0;
}

.info-tooltip:hover {
  color: var(--enroll-accent);
}

.info-tooltip.inline {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Section Content */
.section-content {
  padding: var(--enroll-spacing);
}

.section-content.always-open {
  display: block;
}

.section-content.collapsible-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--enroll-spacing);
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
}

.section-content.collapsible-content.open {
  padding: var(--enroll-spacing);
}

.section-intro {
  font-size: 14px;
  color: var(--enroll-text-secondary);
  margin: 0 0 var(--enroll-spacing) 0;
  line-height: 1.6;
}

/* =====================================================
   STARTER KIT CARD
===================================================== */
.starter-kit-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--enroll-success);
  border-radius: var(--enroll-radius);
  position: relative;
}

.starter-kit-card.selected {
  background: #f0fdf4;
}

.kit-image {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--enroll-bg-light);
}

.kit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kit-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--enroll-text-muted);
}

.kit-details {
  flex: 1;
  min-width: 0;
}

.kit-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0 0 6px 0;
}

.kit-description {
  font-size: 14px;
  color: var(--enroll-text-secondary);
  margin: 0 0 12px 0;
}

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

.kit-includes li {
  font-size: 13px;
  color: var(--enroll-text-secondary);
  padding-left: 20px;
  position: relative;
}

.kit-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--enroll-success);
  font-weight: 600;
}

.kit-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  color: var(--enroll-success);
}

@media (max-width: 767px) {
  .starter-kit-card {
    flex-direction: column;
    text-align: center;
  }

  .kit-image {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }

  .kit-includes {
    align-items: center;
  }

  .kit-includes li {
    padding-left: 0;
  }

  .kit-includes li::before {
    position: static;
    margin-right: 6px;
  }
}

/* =====================================================
   PACK CARDS - Nectar Style
===================================================== */
.pack-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 767px) {
  .pack-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Card Wrapper - Contains badge + card */
.pack-card-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pack-card-wrapper.has-badge {
  margin-top: 0;
}

/* Most Popular Badge - Above card */
.pack-popular-badge {
  background: var(--enroll-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Pack Card */
.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--clr-bg-surface, #fff);
  border: 1px solid var(--enroll-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pack-card-wrapper.has-badge .pack-card {
  border-radius: 0 0 12px 12px;
  border-top: none;
}

.pack-card:hover {
  border-color: var(--enroll-primary);
}

/* Selected State - Brand light background */
.pack-card.selected {
  background: var(--clr-brand-light, #eae7fa);
  border-color: var(--enroll-primary);
  border-width: 2px;
}

.pack-card-wrapper.has-badge .pack-card.selected {
  border-top: none;
}

/* Card Header - Name + Radio */
.pack-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pack-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0;
  line-height: 1.3;
}

/* Custom Radio Button */
.pack-radio-wrapper {
  position: relative;
  flex-shrink: 0;
}

.pack-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pack-radio-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--enroll-border-hover);
  border-radius: 50%;
  background: var(--clr-bg-surface, #fff);
  transition: all 0.2s ease;
}

.pack-radio-custom::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.2s ease;
}

.pack-radio:checked + .pack-radio-custom {
  border-color: var(--enroll-primary);
}

.pack-radio:checked + .pack-radio-custom::after {
  background: var(--enroll-primary);
}

/* Pack Image */
.pack-image {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.pack-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pack-image-placeholder {
  width: 140px;
  height: 100px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.path-card-description {
  padding: 14px 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--enroll-text-secondary, #3b302a);
}

@media (max-width: 1023px) {
  .path-card-description {
    padding: 12px 14px 14px;
    font-size: 13px;
  }
}

/* Pack Features */
.pack-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pack-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pack-features li .feature-check {
  flex-shrink: 0;
  color: #059669;
  margin-top: 0;
}

/* Legacy elements - hidden */
.pack-header,
.pack-subtitle,
.pack-divider,
.pack-pricing,
.pack-price,
.pack-qv,
.pack-discount-badge,
.pack-best-value-badge {
  display: none;
}

/* =====================================================
   LAUNCH PACK CARDS - Warm Yoli Brand Design
===================================================== */
.path-cards-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Tablet keeps the 3-up grid; phone collapses to a single column so each
   path card has room to breathe. */
@media (max-width: 1023px) {
  .path-cards-grid-new {
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .path-cards-grid-new {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Launch Pack Card - Warm, organic styling */
.launch-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid var(--enroll-border, #f0e8e2);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.launch-pack-card:hover {
  border-color: var(--enroll-border-hover, #dad0c9);
  box-shadow: 0 8px 32px rgba(122, 112, 103, 0.12);
  transform: translateY(-4px);
}

.launch-pack-card.selected {
  border-color: var(--enroll-text-primary, #1a1716);
  background: linear-gradient(145deg, #fffcf8 0%, #fff8f2 100%);
  box-shadow: 0 8px 32px rgba(122, 112, 103, 0.15);
}

/* Featured Card - subtle highlight */
.launch-pack-card.featured {
  background: #ffffff;
}

/* Most Popular Badge - Warm brand styling */
.launch-pack-badge {
  display: block;
  background: var(--enroll-text-secondary, #3b302a);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  padding: 12px 16px;
}

/* Card Content Wrapper */
.launch-pack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 12px 16px;
}

.launch-pack-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Radio Button - Elegant circular design */
.launch-pack-radio {
  position: relative;
  flex-shrink: 0;
}

.launch-pack-radio .pack-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.launch-radio-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--enroll-border-hover, #dad0c9);
  border-radius: 50%;
  background: #fff;
  transition: all 0.25s ease;
}

.launch-radio-custom::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.25s ease;
}

.launch-pack-card:hover .launch-radio-custom {
  border-color: var(--enroll-text-muted, #7a7067);
}

.launch-pack-card.selected .launch-radio-custom {
  border-color: var(--enroll-text-primary, #1a1716);
}

.launch-pack-card.selected .launch-radio-custom::after {
  background: var(--enroll-text-primary, #1a1716);
}

/* Pack Image - Flush with card edges */
.launch-pack-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  padding: 16px;
  background: linear-gradient(
    145deg,
    var(--enroll-bg-light, #faf3ec) 0%,
    #fdf9f5 100%
  );
  margin: 0;
  border-radius: 0;
}

.launch-pack-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Build Your Own Visual */
.launch-pack-image.build-own-visual {
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(
    145deg,
    var(--enroll-bg-light, #faf3ec) 0%,
    #fdf9f5 100%
  );
  height: 180px;
}

.build-own-icon {
  color: var(--enroll-text-muted, #7a7067);
}

.build-own-icon svg {
  width: 52px;
  height: 52px;
}

.build-own-text {
  font-size: 14px;
  color: var(--enroll-text-muted, #7a7067);
  margin: 0;
  text-align: center;
  max-width: 160px;
  line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 1023px) {
  .launch-pack-header {
    padding: 14px 14px 10px 14px;
  }

  .launch-pack-name {
    font-size: 16px;
  }

  .launch-pack-image {
    height: 160px;
    padding: 16px;
  }

  .launch-pack-badge {
    padding: 8px 12px;
    font-size: 10px;
  }
}

/* =====================================================
   LEGACY PATH CARDS (keeping for backwards compatibility)
===================================================== */
.path-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1023px) {
  .path-cards-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.path-card-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.path-featured-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7c6a4e 0%, #5d4e37 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(93, 78, 55, 0.3);
  z-index: 10;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: 2px solid transparent;
  height: 100%;
}

.path-card.selected {
  border-color: var(--enroll-primary);
}

.path-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.path-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--enroll-text-primary);
  margin: 0;
  line-height: 1.3;
}

.path-select-btn {
  display: none;
}

/* Hidden Radio Input */
.pack-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Pack Details Content */
.pack-details-content {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--enroll-border);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pack-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 767px) {
  .pack-details-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.pack-detail-column h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--enroll-text-primary);
  margin: 0 0 8px 0;
}

.pack-detail-intro {
  font-size: 13px;
  color: var(--enroll-text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.detail-category {
  margin-bottom: 16px;
}

.detail-category:last-child {
  margin-bottom: 0;
}

.detail-category h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--enroll-accent);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.detail-category ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-category ul li {
  font-size: 13px;
  color: var(--enroll-text-secondary);
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}

.detail-category ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--enroll-text-muted);
}

/* =====================================================
   SUBSCRIPTION SECTION
===================================================== */
.subscription-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--enroll-spacing);
}

.benefit-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.benefit-item svg {
  flex-shrink: 0;
  color: var(--enroll-accent);
  margin-top: 2px;
}

.benefit-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.benefit-item strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--enroll-text-primary);
}

.benefit-item span {
  font-size: 13px;
  color: var(--enroll-text-secondary);
}

/* Subscription Toggle */
.subscription-toggle-wrapper {
  margin-bottom: var(--enroll-spacing);
}

.subscription-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--enroll-bg-light);
  border: 2px solid var(--enroll-border);
  border-radius: var(--enroll-radius);
  cursor: pointer;
  transition: all var(--enroll-transition);
}

.subscription-toggle:has(input:checked) {
  border-color: var(--enroll-accent);
  background: #f0f7ff;
}

.subscription-toggle input {
  display: none;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 28px;
  background: #d1d5db;
  border-radius: 100px;
  flex-shrink: 0;
  transition: background var(--enroll-transition);
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--enroll-shadow-sm);
  transition: transform var(--enroll-transition);
}

.subscription-toggle input:checked + .toggle-switch {
  background: var(--enroll-accent);
}

.subscription-toggle input:checked + .toggle-switch::after {
  transform: translateX(20px);
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-label strong {
  font-size: 15px;
  color: var(--enroll-text-primary);
}

.toggle-sublabel {
  font-size: 13px;
  color: var(--enroll-text-secondary);
}

/* Subscription Products */
.subscription-products {
  padding: var(--enroll-spacing);
  background: var(--enroll-bg-light);
  border-radius: var(--enroll-radius);
}

.subscription-frequency {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.subscription-frequency label {
  font-size: 14px;
  color: var(--enroll-text-secondary);
}

.subscription-frequency select {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--enroll-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.subscription-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--enroll-text-secondary);
  margin: 0 0 16px 0;
}

.subscription-note svg {
  color: var(--enroll-accent);
}

.subscription-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subscription-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--enroll-transition);
}

.subscription-item:hover {
  border-color: var(--enroll-border-hover);
}

.subscription-item:has(input:checked) {
  border-color: var(--enroll-accent);
  background: #f0f7ff;
}

.item-select input {
  display: none;
}

.item-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--enroll-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--enroll-transition);
}

.subscription-item:has(input:checked) .item-checkbox {
  border-color: var(--enroll-accent);
  background: var(--enroll-accent);
}

.subscription-item:has(input:checked) .item-checkbox::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.item-image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--enroll-bg-light);
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-text-primary);
  margin: 0 0 2px 0;
}

.item-price {
  font-size: 13px;
  color: var(--enroll-text-secondary);
}

.subscription-placeholder {
  text-align: center;
  padding: 20px;
}

.subscription-placeholder p {
  font-size: 14px;
  color: var(--enroll-text-secondary);
  margin: 0 0 12px 0;
}

.browse-subscription-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-accent);
  text-decoration: none;
}

.browse-subscription-link:hover {
  text-decoration: underline;
}

/* Panel Spacer - No longer needed, summary bar is inside panel */
.panel-spacer {
  display: none;
}

/* =====================================================
   ADD-ONS SECTION (One-Time Purchases)
===================================================== */

.addons-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
  border: 1px solid rgba(0, 102, 255, 0.15);
  border-radius: var(--enroll-radius);
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--enroll-text-secondary);
}

/* Cart-visibility callout: its own card below the billing one, set apart by a
   lighter gray fill so it stands out and isn't mistaken for a duplicate of the
   blue banner above it. */
.addons-info-banner--highlight {
  background: color-mix(in srgb, var(--enroll-text-muted, #7a7067) 8%, #fff);
  border: 1px solid var(--enroll-border, #f0e8e2);
}

.addons-info-banner svg,
.addons-info-banner i {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--enroll-accent);
}

.addons-info-banner strong {
  color: var(--enroll-text-primary); /* Y44: gold on the light-blue banner was ~1.8:1 */
}

/* Add-ons Tabs - Horizontal scrolling like SmartShop */
.addons-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.addons-tabs::-webkit-scrollbar {
  display: none;
}

/* Add-ons Search Bar */
.addons-search {
  position: relative;
  margin-bottom: 20px;
}

.addons-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--enroll-text-muted);
  pointer-events: none;
}

/* Add-on Product Grid + Card styles are defined alongside the card
   component near the top of this file (horizontal scroller layout,
   matching OG yoli). See .addons-products-grid and .addon-product-card. */

/* =====================================================
   ORDER SUMMARY BAR (Inside Combined Sticky Footer)
===================================================== */
.order-summary-bar {
  background: #fff;
}

.summary-container {
  max-width: 100%;
  padding: 16px var(--enroll-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1023px) {
  .summary-container {
    padding: 16px var(--enroll-spacing);
  }
}

/* Horizontal layout on wider right panels */
@media (min-width: 1024px) {
  .summary-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px var(--enroll-spacing-lg);
  }

  .summary-left {
    flex: 1;
  }

  .summary-right {
    flex-shrink: 0;
    width: auto;
    min-width: 200px;
  }

  .summary-breakdown {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.summary-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-breakdown {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--enroll-border);
}

.summary-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-label {
  font-size: 12px;
  color: var(--enroll-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-amounts {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.summary-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--enroll-text-primary);
}

.summary-frequency {
  font-size: 14px;
  color: var(--enroll-text-secondary);
}

.summary-divider {
  width: 1px;
  height: 36px;
  background: var(--enroll-border);
}

@media (max-width: 767px) {
  .summary-divider {
    display: none;
  }
}

.summary-items {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--enroll-text-secondary);
}

.view-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--enroll-text-primary); /* Y44: #49473E on white 9.32:1 (gold was 2.04:1) */
  cursor: pointer;
}

.view-details-btn:hover {
  text-decoration: underline;
}

.view-details-btn svg {
  transition: transform var(--enroll-transition);
}

.summary-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: #eea81a;
  color: #1a1716;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--enroll-transition);
}

.checkout-btn:hover:not(:disabled) {
  background: #d4960f;
  transform: translateY(-1px);
  box-shadow: var(--enroll-shadow-md);
}

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

.checkout-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.checkout-btn-text svg {
  flex-shrink: 0;
}

.checkout-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.checkout-btn-loading .spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  .checkout-btn {
    width: 100%;
    padding: 18px;
  }
}

.checkout-note {
  font-size: 12px;
  color: var(--enroll-text-muted);
  margin: 0;
  text-align: center;
}

/* Order Details Panel */
.order-details-panel {
  border-top: 1px solid var(--enroll-border);
  background: var(--enroll-bg-light);
}

.details-container {
  max-width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  padding: 16px var(--enroll-spacing-lg);
}

@media (max-width: 1023px) {
  .details-container {
    padding: 16px var(--enroll-spacing);
  }
}

@media (min-width: 1024px) {
  .details-container {
    padding: 20px var(--enroll-spacing-lg);
  }
}

.details-container h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0 0 16px 0;
}

.details-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--enroll-border);
}

.details-section:last-of-type {
  border-bottom: none;
}

.details-section h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--enroll-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 10px 0;
}

.details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.details-list li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--enroll-text-primary);
}

.details-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--enroll-border);
}

.details-note {
  font-size: 12px;
  color: var(--enroll-text-muted);
  margin: 8px 0 0 0;
}

.details-total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary);
  padding-top: 16px;
  border-top: 2px solid var(--enroll-border);
  margin-bottom: 12px;
}

.details-disclaimer {
  font-size: 12px;
  color: var(--enroll-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* =====================================================
   TOOLTIP POPOVERS
===================================================== */
.tooltip-popover {
  position: fixed;
  z-index: 2000;
  width: 280px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: var(--enroll-radius);
  box-shadow: var(--enroll-shadow-lg);
}

.tooltip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--enroll-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip-close:hover {
  color: var(--enroll-text-primary);
}

.tooltip-popover h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--enroll-text-primary);
  margin: 0 0 8px 0;
}

.tooltip-popover p {
  font-size: 13px;
  color: var(--enroll-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* =====================================================
   ANIMATIONS
===================================================== */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.config-section {
  animation: slideUp 0.4s ease forwards;
}

.config-section:nth-child(1) {
  animation-delay: 0s;
}
.config-section:nth-child(2) {
  animation-delay: 0.1s;
}
.config-section:nth-child(3) {
  animation-delay: 0.2s;
}

/* Selection feedback */
.bundle-card,
.subscription-item {
  transform-origin: center;
}

.bundle-card.selected,
.subscription-item:has(input:checked) {
  animation: selectBounce 0.25s ease;
}

@keyframes selectBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
===================================================== */
/* Laptop range: tighten the whole layout so the three-card grids in
   Step 1 don't feel cramped. Column split narrows the hero so the
   right panel gains ~40px; panel padding drops 72 -> 48 to give the
   cards more horizontal content space; grid gaps, card padding, and
   typography all step down in lockstep — mirrors OG yoli. */
@media (min-width: 1024px) and (max-width: 1535px) {
  /* Laptop: widen the hero share so the panel doesn't dominate.
     flex-grow: 2 on hero + 3 on panel → 40% / 60% split. */
  .enrollment-hero {
    flex-grow: 2;
  }

  .enrollment-panel {
    flex-grow: 3;
  }

  .enrollment-hero {
    padding: 32px 24px;
  }

  .hero-content {
    padding: 48px 24px;
  }

  .enrollment-panel {
    padding: var(--enroll-spacing-lg) 48px var(--enroll-spacing-lg)
      var(--enroll-spacing-lg);
    padding-bottom: 0;
  }

  .enrollment-sticky-footer {
    margin-left: calc(-1 * var(--enroll-spacing-lg));
    margin-right: -48px;
    width: calc(100% + var(--enroll-spacing-lg) + 48px);
  }

  .path-cards-grid-new,
  .subchoice-cards-grid {
    gap: 16px;
  }

  .addons-products-grid {
    gap: 14px;
  }

  .step-title {
    font-size: 22px;
  }

  .step-description {
    font-size: 16px;
  }

  .tab-btn {
    font-size: 15px;
  }

  .launch-pack-card {
    border-radius: 12px;
  }

  .launch-pack-header {
    padding: 14px 14px 10px 14px;
  }

  .launch-pack-name {
    font-size: 20px;
  }

  .launch-pack-image {
    height: 156px;
    padding: 14px;
  }

  .subchoice-card {
    padding: 18px 14px;
    border-radius: 14px;
  }

  .subchoice-title {
    font-size: 22px;
  }

  .subchoice-description {
    font-size: 15px;
  }

  .subchoice-name {
    font-size: 19px;
  }

  .subchoice-price {
    font-size: 23px;
  }

  .subchoice-qv {
    font-size: 12px;
  }

  .subchoice-product-count {
    font-size: 13px;
  }

  .subchoice-items li,
  .subchoice-items .item-qty {
    font-size: 14px;
  }

  .flavor-badge {
    font-size: 12px;
  }

  .addon-product-name {
    font-size: 16px;
  }

  .addon-product-price {
    font-size: 17px;
  }

  .product-savings-info {
    font-size: 13px;
  }

  .price-period {
    font-size: 13px;
  }
}

@media (min-width: 1536px) {
  /* Large-desktop: nudge hero share up slightly (37/63) so the panel
     doesn't grow unboundedly at wide displays. */
  .enrollment-hero {
    flex-grow: 37;
    padding: 48px 48px 48px 80px;
  }

  .enrollment-panel {
    flex-grow: 63;
    padding: 48px 80px;
    padding-bottom: 0;
  }

  .hero-content {
    max-width: 640px;
  }

  /* Break sticky footer out of the panel's 80px side padding so the
     summary bar spans the full panel width (matches panel's horizontal
     inset at this tier). */
  .enrollment-sticky-footer {
    margin-left: -80px;
    margin-right: -80px;
    width: calc(100% + 160px);
  }

  /* Keep the summary content aligned to the panel's 80px inset even
     though the footer background spans full width — content sits in
     the same column as the step content above. */
  .summary-container,
  .details-container {
    padding: 20px 80px;
  }
}

/* Print styles */
@media print {
  .order-summary-bar,
  .tooltip-popover {
    display: none !important;
  }

  .enrollment-hero {
    position: static;
    height: auto;
  }

  .enrollment-split-screen {
    display: block;
  }

  .section-content.collapsible-content {
    max-height: none !important;
    padding: var(--enroll-spacing) !important;
  }
}

/* =====================================================
   PATH SUB-CHOICE PANELS - Warm Yoli Brand Styling
   ===================================================== */
.path-subchoice-panel {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(
    145deg,
    var(--enroll-bg-light, #faf3ec) 0%,
    #fdf9f5 100%
  );
  border: none;
  border-radius: 20px;
  animation: slideDown 0.3s ease;
  box-shadow: 0 4px 24px rgba(122, 112, 103, 0.08);
}

@media (max-width: 767px) {
  .path-subchoice-panel {
    padding: 20px 16px;
    margin-top: 20px;
    border-radius: 16px;
  }
}

.subchoice-header {
  text-align: center;
  margin-bottom: 20px;
}

/* Row layout variant - heading left, description right */
.subchoice-header.subchoice-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 16px;
}

.subchoice-header-row .subchoice-title {
  margin: 0;
}

.subchoice-header-row .subchoice-description {
  margin: 0;
  text-align: right;
}

@media (max-width: 767px) {
  .subchoice-header.subchoice-header-row {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  .subchoice-header-row .subchoice-description {
    text-align: center;
  }
}

.subchoice-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0 0 6px 0;
  font-family: var(--font-primary, inherit);
  letter-spacing: -0.02em;
}

/* The header is now rich text (enrollment_packs_header), which wraps its
   content in <p>/heading tags. Strip their default margins and let them
   inherit the title's type so the spacing matches the old hardcoded label. */
.subchoice-title > * {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

@media (max-width: 767px) {
  .subchoice-title {
    font-size: 18px;
  }
}

.subchoice-description {
  font-size: 14px;
  color: var(--enroll-text-muted, #7a7067);
  margin: 0;
  line-height: 1.5;
}

/* Sub-choice Cards Grid — 3-up on desktop & tablet; phones get the
   single-column vertical stack. */
.subchoice-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Cards size to their own content (not stretched to the row's tallest) so
     expanding one card doesn't grow its row-mates. Equal collapsed heights are
     enforced via a measured min-height in JS instead. */
  align-items: start;
}

@media (max-width: 1023px) {
  .subchoice-cards-grid {
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .subchoice-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Sub-choice Card - Warm, organic feel */
.subchoice-card {
  position: relative;
  background: #ffffff;
  border: 2px solid var(--enroll-border, #f0e8e2);
  border-radius: 16px;
  padding: 20px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.subchoice-card:hover {
  border-color: var(--enroll-border-hover, #dad0c9);
  box-shadow: 0 8px 32px rgba(122, 112, 103, 0.12);
  transform: translateY(-4px);
}

.subchoice-card.selected {
  border-color: var(--enroll-text-primary, #1a1716);
  background: linear-gradient(145deg, #fffcf8 0%, #fff8f2 100%);
  box-shadow: 0 8px 32px rgba(122, 112, 103, 0.15);
}

/* Pack not offered in the active country — mirrors .addon-unavailable. */
.subchoice-card.subchoice-unavailable {
  opacity: 0.6;
  cursor: not-allowed;
}

.subchoice-card.subchoice-unavailable:hover {
  border-color: var(--enroll-border, #f0e8e2);
  box-shadow: none;
  transform: none;
}

.subchoice-card.subchoice-unavailable .subchoice-image img {
  filter: grayscale(1);
}

.subchoice-card.subchoice-unavailable .subchoice-price {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--enroll-text-muted, #80766d);
}

.subchoice-card.subchoice-unavailable .subchoice-radio,
.subchoice-card.subchoice-unavailable .subchoice-radio-custom {
  cursor: not-allowed;
}

/* Sub-choice Badge - Warm brand styling */
.subchoice-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--enroll-text-secondary, #3b302a);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(59, 48, 42, 0.2);
}

.subchoice-badge.best-value {
  background: linear-gradient(135deg, #5d7a5d 0%, #6b8e6b 100%);
  box-shadow: 0 2px 8px rgba(93, 122, 93, 0.3);
}

/* Sub-choice Card Header */
.subchoice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.subchoice-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  .subchoice-name {
    font-size: 16px;
  }
}

/* Sub-choice Radio - Elegant circular design */
.subchoice-radio-wrapper {
  flex-shrink: 0;
}

.subchoice-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subchoice-radio-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--enroll-border-hover, #dad0c9);
  border-radius: 50%;
  background: #fff;
  transition: all 0.25s ease;
}

.subchoice-radio-custom::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.25s ease;
}

.subchoice-card:hover .subchoice-radio-custom {
  border-color: var(--enroll-text-muted, #7a7067);
}

.subchoice-radio:checked + .subchoice-radio-custom {
  border-color: var(--enroll-text-primary, #1a1716);
}

.subchoice-radio:checked + .subchoice-radio-custom::after {
  background: var(--enroll-text-primary, #1a1716);
}

/* Sub-choice Pack Image */
.subchoice-pack-image {
  margin: 8px 0 12px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--enroll-bg-light, #faf3ec) 0%,
    #fdf9f5 100%
  );
}

.subchoice-pack-image img {
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  display: block;
}

/* Sub-choice Price Row */
.subchoice-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.subchoice-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  letter-spacing: -0.02em;
  line-height: 1;
}

@media (max-width: 767px) {
  .subchoice-price {
    font-size: 24px;
  }
}

.subchoice-qv {
  font-size: 11px;
  font-weight: 600;
  color: #5d7a5d;
  background: rgba(93, 122, 93, 0.1);
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

/* Product Count Indicator */
.subchoice-product-count {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--enroll-text-muted, #7a7067);
  margin-top: -6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--enroll-border, #f0e8e2);
}

.subchoice-product-count strong {
  font-weight: 600;
  color: var(--enroll-text-secondary, #3b302a);
}

/* Sub-choice Items List */
.subchoice-items {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.subchoice-items.compact {
  gap: 5px;
  margin-bottom: 12px;
}

.subchoice-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--enroll-text-secondary, #3b302a);
  line-height: 1.3;
}

.subchoice-items .item-qty {
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  min-width: 26px;
  font-size: 13px;
}

/* Fixed Items Section (Transformation packs) */
.subchoice-fixed-items {
  margin-bottom: 12px;
}

.subchoice-fixed-items h6 {
  font-size: 10px;
  font-weight: 600;
  color: var(--enroll-text-muted, #7a7067);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px 0;
}

/* Flavor Summary Badges - Warm accent styling */
.subchoice-flavor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.flavor-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--enroll-text-secondary, #3b302a);
  background: var(--enroll-bg-light, #faf3ec);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--enroll-border, #f0e8e2);
}

/* Sub-choice Select Button - Hidden (using radio for selection) */
.subchoice-select-btn {
  display: none;
}

/* =====================================================
   FLAVOR CONFIGURATION PANEL - Compact Warm Styling
   ===================================================== */
.flavor-config-panel {
  margin-top: 20px;
  padding: 20px;
  background: #ffffff;
  border: 2px solid var(--enroll-text-primary, #1a1716);
  border-radius: 16px;
  animation: slideDown 0.3s ease;
  box-shadow: 0 4px 20px rgba(122, 112, 103, 0.08);
}

@media (max-width: 767px) {
  .flavor-config-panel {
    padding: 16px;
    margin-top: 16px;
  }
}

.flavor-config-header {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--enroll-border, #f0e8e2);
}

/* Row layout variant - title left, subtitle right */
.flavor-config-header.flavor-config-header-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 16px;
  flex-wrap: nowrap;
}

.flavor-config-header-row .flavor-config-title {
  margin: 0;
  flex-shrink: 0;
}

.flavor-config-header-row .flavor-config-subtitle {
  margin: 0;
  text-align: right;
  flex-shrink: 1;
}

@media (max-width: 767px) {
  .flavor-config-header.flavor-config-header-row {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }

  .flavor-config-header-row .flavor-config-subtitle {
    text-align: center;
  }
}

.flavor-config-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.flavor-config-subtitle {
  font-size: 13px;
  color: var(--enroll-text-muted, #7a7067);
  margin: 0;
  line-height: 1.4;
}

.flavor-config-subtitle span {
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
}

/* Flavor Sections */
.flavor-config-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flavor-section {
  padding: 14px;
  background: linear-gradient(
    145deg,
    var(--enroll-bg-light, #faf3ec) 0%,
    #fdf9f5 100%
  );
  border-radius: 12px;
}

@media (max-width: 767px) {
  .flavor-section {
    padding: 12px;
  }
}

.flavor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.flavor-section-header h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
}

.flavor-section-note {
  font-size: 12px;
  color: var(--enroll-text-muted, #7a7067);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.flavor-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--enroll-text-muted, #7a7067);
  background: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--enroll-border, #f0e8e2);
}

.flavor-counter.complete {
  background: #5d7a5d;
  color: #fff;
  border-color: #5d7a5d;
}

/* Flavor Options Grid - 2 columns max for readability */
.flavor-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.flavor-options-grid.energy-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .flavor-options-grid,
  .flavor-options-grid.energy-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Flavor Option - Compact styling */
.flavor-option {
  position: relative;
  cursor: pointer;
}

.flavor-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flavor-option-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--enroll-border, #f0e8e2);
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 56px;
}

.flavor-option:hover .flavor-option-inner {
  border-color: var(--enroll-border-hover, #dad0c9);
  background: #fdfcfb;
}

.flavor-option input:checked + .flavor-option-inner,
.flavor-option.selected .flavor-option-inner {
  border-color: var(--enroll-text-primary, #1a1716);
  background: #fdfaf6;
}

.flavor-option.disabled .flavor-option-inner,
.flavor-option.is-unavailable .flavor-option-inner {
  opacity: 0.4;
  cursor: not-allowed;
}

.flavor-option.hidden { display: none; }

/* Flavor Customize Wrapper (white box with border) */
.flavor-customize-wrapper {
  margin-top: 24px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid var(--enroll-border, #f0e8e2);
  border-radius: 12px;
}

.flavor-customize-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.flavor-customize-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
}

.flavor-customize-subtitle {
  font-size: 13px;
  color: var(--enroll-text-muted, #9ca3af);
  margin: 0;
  line-height: 1.4;
}

/* Flavor Group Sections (inside the white wrapper) */
.flavor-group-section {
  padding: 16px;
  background: var(--enroll-bg-light, #faf3ec);
  border-radius: 8px;
  margin-bottom: 12px;
}

.flavor-group-section:last-child {
  margin-bottom: 0;
}

.flavor-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.flavor-group-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
}

.flavor-group-desc {
  font-size: 12px;
  color: var(--enroll-text-muted, #9ca3af);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* Flavor Swatch (fallback) */
.flavor-swatch {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--enroll-border, #f0e8e2);
}

/* Flavor Image (from Fluid) */
.flavor-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--enroll-bg-light, #faf3ec);
}

/* Flavor Content Wrapper */
.flavor-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Flavor Name - wraps to fit container */
.flavor-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--enroll-text-primary, #1a1716);
  line-height: 1.3;
  min-width: 0;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Caffeine Free Tag */
.flavor-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  color: #5d7a5d;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Flavor Qty Controls - Add button transforms to stepper */
.flavor-qty-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

/* Add Button - circular white button with + icon (shown when qty = 0) */
.flavor-qty-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
}

.flavor-qty-add-btn svg {
  width: 14px;
  height: 14px;
  color: var(--enroll-primary, #49473d);
  stroke: var(--enroll-primary, #49473d);
  stroke-width: 2.5;
}

.flavor-qty-add-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.flavor-qty-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Hide add button when stepper is active */
.flavor-qty-controls.active .flavor-qty-add-btn {
  display: none;
}

/* Qty Stepper - dark pill with minus/qty/plus (hidden by default, shown when qty > 0) */
.flavor-qty-stepper {
  display: none;
  align-items: center;
  gap: 0;
  background: var(--enroll-primary, #49473d);
  border-radius: 50px;
  padding: 2px 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Show stepper when controls are active */
.flavor-qty-controls.active .flavor-qty-stepper {
  display: flex;
}

.flavor-qty-minus-btn,
.flavor-qty-plus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.flavor-qty-minus-btn svg,
.flavor-qty-plus-btn svg {
  width: 12px;
  height: 12px;
  color: #fff;
  stroke: #fff;
}

.flavor-qty-minus-btn:hover,
.flavor-qty-plus-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.flavor-qty-minus-btn:disabled,
.flavor-qty-plus-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.flavor-qty-value {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* Flavor Config Actions - Hidden by default */
.flavor-config-actions {
  display: none;
}

/* Flavor items in order details */
.details-list li.flavor-item {
  font-size: 12px;
  color: var(--enroll-text-muted);
}

.details-list li.flavor-item .flavor-detail {
  color: var(--enroll-text-secondary);
}

/* Animation for panel appearance */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Launch pack price row */
.launch-pack-price-row {
  padding: 8px 12px 0;
  text-align: center;
}

.launch-pack-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--enroll-text, #1e293b);
}

/* =====================================================
   SELECTION PILL (count badge next to step title)
===================================================== */
.selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--enroll-bg-light, #f8fafc);
  border: 1px solid var(--enroll-border, #e2e8f0);
  color: var(--enroll-text-secondary, #64748b);
  vertical-align: middle;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.selection-pill.pill-complete {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

.selection-pill.pill-over {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.pill-current {
  font-weight: 700;
}

.flavor-group-section .selection-pill {
  background: #fff;
}

/* =====================================================
   BUNDLE GROUP GRID (JS-rendered product grid)
   Matches OG .smartshop-products-grid / .smartshop-product-card
===================================================== */
.bundle-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .bundle-group-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* =====================================================
   GROUP SEARCH BAR (per bundle group step)
   Matches OG .smartshop-search / .addons-search
===================================================== */
.group-search {
  position: relative;
  margin-bottom: 20px;
}

.group-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--enroll-text-muted);
  pointer-events: none;
}

.group-search .search-input {
  width: 100%;
  padding: 12px 14px 12px 44px;
  background: #fff;
  border: 1px solid var(--enroll-border);
  border-radius: var(--enroll-radius, 8px);
  font-size: 15px;
  color: var(--enroll-text-primary);
  transition: all 0.2s ease;
}

.group-search .search-input:focus {
  outline: none;
  border-color: var(--enroll-accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.group-search .search-input::placeholder {
  color: var(--enroll-text-muted);
}

/* =====================================================
   SUBCHOICE INCLUDED ITEMS LIST
===================================================== */
.subchoice-included-list {
  margin-top: 0;
  padding-top: 0;
}

.subchoice-flavor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--enroll-border, #f0e8e2);
}

.flavor-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--enroll-text-secondary, #3b302a);
  background: var(--enroll-bg-light, #faf3ec);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--enroll-border, #f0e8e2);
}

.included-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--enroll-text-muted, #94a3b8);
  margin-bottom: 6px;
}

.included-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.included-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--enroll-text-secondary, #64748b);
  line-height: 1.3;
}

.included-qty {
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  min-width: 24px;
}

.included-name {
  flex: 1;
}

/* =====================================================
   BUNDLE GROUP STEPS CONTAINER (JS-rendered)
===================================================== */
[id^="bundle-group-steps-"] {
  margin: 0;
}

/* Ensure the first dynamic config-step has a top border to separate from Step 1 */
[id^="bundle-group-steps-"] .config-step:first-of-type {
  padding-top: var(--enroll-spacing-lg);
  border-top: 1px solid var(--enroll-border);
}

/* Last dynamic step should not have bottom border (sticky footer follows) */
[id^="bundle-group-steps-"] .config-step:last-of-type {
  border-bottom: none;
}

/* =====================================================
   EMPTY STATE / ERROR MESSAGES
===================================================== */
.no-products-message {
  font-size: 14px;
  color: var(--enroll-text-secondary, #64748b);
  text-align: center;
  padding: 32px 16px;
}

.checkout-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 8px var(--enroll-spacing-lg, 24px);
  white-space: pre-line;
}

/* =====================================================
   GROUP BADGES (Customizable / Included)
===================================================== */
.step-group-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 8px;
}

.badge--customizable {
  background: #ede9fe;
  color: #5b21b6;
}

.badge--included {
  background: #d1fae5;
  color: #065f46;
}

/* =====================================================
   GROUP PRICE & RANGE DISPLAY
===================================================== */
.step-group-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.step-group-range {
  display: inline-block;
}

/* =====================================================
   SELECTION RULE TEXT
===================================================== */
.step-group-rule {
  font-size: 13px;
  font-weight: 500;
  color: var(--enroll-text-muted, #7a7067);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* =====================================================
   INCLUDED GROUP ITEMS (read-only list rows)
===================================================== */
.enroll-included-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}


/* =====================================================
   UPGRADE BADGE (dynamic pricing "+$X.XX")
===================================================== */
.product-upgrade-badge {
  display: inline-block;
}

/* =====================================================
   UNAVAILABLE ITEMS
===================================================== */

/* =====================================================
   DISABLED GROUPS (mutual exclusivity)
===================================================== */
.config-step.is-disabled-group,
.flavor-group-section.is-disabled-group {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}

.config-step.is-disabled-group::after,
.flavor-group-section.is-disabled-group::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--enroll-radius, 12px);
  pointer-events: none;
}

/* =====================================================
   DYNAMIC BUNDLE V2 — Subchoice card layout
===================================================== */
/* Strip the panel chrome so "Choose Your Pack" + the subchoice cards align
   with the path-cards-grid above. Same for "Customize Your Flavors". */
.path-subchoice-panel {
  background: none;
  box-shadow: none;
  border: none;
  padding: 24px 0;
  border-radius: 0;
}

.flavor-customize-wrapper {
  background: none;
  border: none;
  padding: 24px 0;
  margin-top: 0;
}

@media (max-width: 767px) {
  .path-subchoice-panel {
    padding: 20px 0;
    margin-top: 20px;
  }

  .flavor-customize-wrapper {
    padding: 20px 0;
  }
}

/* Card is a flex column so the price can pin to the bottom regardless of
   which summary sections render. */
.subchoice-card {
  display: flex;
  flex-direction: column;
  /* No hover transform / shadow — everything is shown at rest. */
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.subchoice-card:hover {
  /* Match resting border so we don't get a "jumpy" feel on selection. */
  border-color: var(--enroll-border, #f0e8e2);
  box-shadow: none;
  transform: none;
}

.subchoice-card.selected {
  /* Keep the existing selected styling but kill the lift shadow. */
  box-shadow: none;
}

/* === Featured image === */
.subchoice-image {
  position: relative;
  margin: 12px 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--enroll-bg-light, #faf3ec) 0%,
    #fdf9f5 100%
  );
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.subchoice-image-placeholder {
  color: var(--enroll-text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* === Summary sections ("You Choose" / "Always Included") === */
.subchoice-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}

.subchoice-summary-section[hidden] {
  display: none;
}

.subchoice-summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subchoice-summary-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--enroll-text-muted, #7a7067);
}

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

/* Top-align the qty prefix so when product names wrap, the "2x" stays at the
   top alongside the first line instead of centering in the middle. */
.subchoice-summary-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--enroll-text-secondary, #3b302a);
  line-height: 1.35;
}

.subchoice-summary-line .subchoice-list-qty {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  min-width: 28px;
  /* Match the line-box of the first line of the name so the "2x" sits on
     that baseline regardless of how many lines the name wraps to. */
  line-height: 1.35;
}

.subchoice-summary-line .subchoice-list-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Collapsible "Always Included" — count + toggle keeps cards even height;
   the itemized list expands on click. */
/* The collapsed row reuses .subchoice-summary-line for its flex layout and the
   qty/name column styling (so the count aligns with the "You Choose" lines);
   these rules just reset the button chrome and vertically center it. */
.subchoice-included-toggle {
  width: 100%;
  /* Top-align so when "(view more)" wraps to a second line the count and caret
     stay on the "Always Included" line rather than centering across both. */
  align-items: flex-start;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.subchoice-included-chevron {
  flex-shrink: 0;
  color: var(--enroll-text-muted, #7a7067);
  transition: transform 0.2s ease;
}

.subchoice-summary-included.is-expanded .subchoice-included-chevron {
  transform: rotate(180deg);
}

/* "Always Included" wears the same header style as the "You Choose" label so it
   reads as a heading and stands out from the product lines; the "(view more)"
   hint sits inline beside it, muted. */
.subchoice-included-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.subchoice-included-viewmore {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--enroll-text-muted, #7a7067);
}

/* Indent the expanded product list so it reads as nested under the
   "Always Included" toggle — aligned under its label, past the count column
   (qty min-width 28px + 8px gap). */
.subchoice-included-list {
  padding-left: 36px;
}

/* Price stays anchored at the bottom of the card */
.subchoice-card .subchoice-price-row {
  margin-top: auto;
  padding-top: 16px;
  margin-bottom: 0;
}

/* =====================================================
   STEP 3 — UPSELL CARD
   A more prominent, feature-card style than the Step 2 add-on rows.
===================================================== */
.upsell-card {
  display: grid;
  /* Image column is locked to a 218×180 max; row height matches the image so
     the body can flex top-to-bottom and align the CTA with the image base. */
  grid-template-columns: 218px 1fr;
  grid-template-rows: 180px;
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  border-radius: 18px;
  border: 2px solid var(--enroll-border, #f0e8e2);
  background: linear-gradient(
    145deg,
    #fffcf8 0%,
    var(--enroll-bg-light, #faf3ec) 100%
  );
  box-shadow: 0 4px 24px rgba(122, 112, 103, 0.08);
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .upsell-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 18px;
    gap: 16px;
  }
}

.upsell-card.is-added {
  border-color: var(--enroll-text-primary, #1a1716);
  background: linear-gradient(145deg, #fffcf8 0%, #fff8f2 100%);
  box-shadow: 0 8px 32px rgba(122, 112, 103, 0.14);
}

.upsell-card-media {
  width: 218px;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .upsell-card-media {
    width: 100%;
    max-width: 218px;
    margin: 0 auto;
  }
}

.upsell-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.upsell-card-media .addon-image-placeholder {
  color: var(--enroll-text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.upsell-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

@media (max-width: 767px) {
  .upsell-card-body {
    /* On phone the row is auto, so we don't need to flex-stretch the body. */
    height: auto;
  }
}

.upsell-card-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .upsell-card-name {
    font-size: 19px;
  }
}

.upsell-card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--enroll-text-secondary, #3b302a);
}

.upsell-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  /* Push self + the actions row below it to the bottom of the body so the
     Add-to-Cart button bottom-aligns with the bottom of the image. */
  margin-top: auto;
}

@media (max-width: 767px) {
  .upsell-card-price-row {
    /* No fixed body height on mobile, so nothing to push against. */
    margin-top: 0;
  }
}

.upsell-card-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  letter-spacing: -0.02em;
  line-height: 1;
}

.upsell-card-price .price-period {
  font-size: 14px;
  font-weight: 500;
  color: var(--enroll-text-muted, #7a7067);
  margin-left: 2px;
}

.upsell-card-savings {
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.upsell-card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.upsell-add-btn {
  flex: 1 1 auto;
  min-width: 140px;
  appearance: none;
  background: var(--enroll-text-primary, #1a1716);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.upsell-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 23, 22, 0.18);
}

.upsell-card.is-added .upsell-add-btn {
  background: #5d7a5d;
  cursor: default;
}

.upsell-card.is-added .upsell-add-btn:hover {
  transform: none;
  box-shadow: none;
}

.upsell-added-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.upsell-remove-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--enroll-text-muted, #7a7067);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 4px;
}

.upsell-remove-btn:hover {
  color: var(--enroll-text-primary, #1a1716);
}


/* ══════════════════════════════════════════════════
   STEP 2 BUNDLE ADD-ONS
   Customize button on the card + full-width configurator panel below the
   scroller. The groups inside the panel reuse the .flavor-* / .bundle-group-grid
   / .selection-pill styles shared with the enrollment configurator.
   ══════════════════════════════════════════════════ */
.addon-bundle-customize-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--enroll-primary, #1c0f8a);
  background: #fff;
  border: 1px solid var(--enroll-primary, #1c0f8a);
  border-radius: 200px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.addon-bundle-customize-btn:hover {
  background: var(--enroll-primary, #1c0f8a);
  color: #fff;
}
.addon-product-card--open .addon-bundle-customize-btn svg {
  transform: rotate(180deg);
}
.addon-bundle-customize-btn svg {
  transition: transform 0.2s ease;
}
.addon-product-card--open {
  border-color: var(--enroll-primary, #1c0f8a);
  box-shadow: 0 0 0 1px var(--enroll-primary, #1c0f8a);
}
.addon-bundle-added .addon-bundle-customize-btn {
  background: var(--enroll-primary, #1c0f8a);
  color: #fff;
}

/* Full-width configurator panel */
.addon-bundle-panel {
  width: 100%;
  margin-top: 16px;
}
.addon-bundle-config {
  border: 1px solid var(--enroll-border, #e5e0da);
  border-radius: var(--enroll-radius-lg, 14px);
  background: var(--enroll-bg-light, #faf7f3);
  padding: 20px;
}
.addon-bundle-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.addon-bundle-config-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
}
.addon-bundle-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--enroll-text-primary, #1a1716);
  cursor: pointer;
  flex-shrink: 0;
}
.addon-bundle-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Included ("what's included") list */
.addon-bundle-included {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--enroll-border, #e5e0da);
  border-radius: var(--enroll-radius-md, 10px);
}
.addon-bundle-included-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--enroll-text-muted, #7a7067);
  margin-bottom: 6px;
}
.addon-bundle-included-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--enroll-text-primary, #1a1716);
}
.addon-bundle-included-list li {
  margin: 2px 0;
}

/* Footer: price + status + actions */
.addon-bundle-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--enroll-border, #e5e0da);
}
.addon-bundle-footer-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
}
.addon-bundle-status {
  font-size: 13px;
  color: #b42318;
}
.addon-bundle-add-btn {
  margin-left: auto;
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--enroll-primary, #1c0f8a);
  border: none;
  border-radius: 200px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.addon-bundle-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.addon-bundle-remove-btn {
  padding: 11px 16px;
  font: inherit;
  font-weight: 500;
  color: var(--enroll-text-muted, #7a7067);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════
   CUSTOMIZATION MODAL (enrollment packs + bundle add-ons)
   ══════════════════════════════════════════════════ */
html.dbv2-modal-open { overflow: hidden; }

.dbv2-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dbv2-modal[hidden] { display: none; }
.dbv2-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 20, 0.55);
  backdrop-filter: blur(2px);
}
.dbv2-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-surface, #fff);
  border-radius: var(--enroll-radius-lg, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.dbv2-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--enroll-text-primary, #1a1716);
  cursor: pointer;
}
.dbv2-modal-close:hover { background: rgba(0, 0, 0, 0.1); }
.dbv2-modal-body {
  padding: 24px 22px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dbv2-modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--enroll-border, #e5e0da);
  background: var(--clr-bg-surface, #fff);
}
.dbv2-modal-done {
  padding: 11px 26px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--enroll-primary, #1c0f8a);
  border: none;
  border-radius: 200px;
  cursor: pointer;
}
.dbv2-modal-done:hover { opacity: 0.92; }

/* Inside the modal the config is the content — drop its standalone card chrome. */
.dbv2-modal-body .addon-bundle-config {
  border: none;
  background: transparent;
  padding: 0;
}

/* Bundle add-on card: the Customize control sits in the + button's slot, so
   its styling is inherited from .qty-add-btn. Added = checkmark; invalid =
   red outline (customer exited with incomplete required selections). */
.addon-bundle-added .qty-add-btn.addon-bundle-open-btn {
  background: var(--enroll-primary, #1c0f8a);
  color: #fff;
}
.addon-product-card.addon-bundle-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px #dc2626;
}
.subchoice-card.enroll-pack-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

/* Keep each amount whole ("CAD $367.99" never splits across lines); when a card is too
   narrow for price + struck compare, the compare wraps underneath as a unit. */
.product-pricing,
.subchoice-price-row { flex-wrap: wrap; row-gap: 2px; }
.addon-product-price,
.addon-product-price-compare,
.subchoice-price,
.subchoice-price-compare { white-space: nowrap; }