.cb-addon {
  --addon-forest: #2c4a2c;
  --addon-cream: #f1f0eb;
  --addon-body: #4a6b49;
  --addon-rule: #d3d2ca;
  --addon-muted: #6b7a63;
  --addon-surface: #fff;
  display: grid;
  grid-template-columns: minmax(320px, 32%) minmax(0, 1fr);
  align-items: start;
  max-width: 1600px;
  margin-inline: auto;
  background: transparent;
  color: var(--addon-body);
  font-family: Inter, sans-serif;
  scroll-margin-top: 100px;
}

.cb-addon *, .cb-addon *::before, .cb-addon *::after { box-sizing: border-box; }
.cb-addon p, .cb-addon h2, .cb-addon h3, .cb-addon dl, .cb-addon dd { margin: 0; }
.cb-addon__intro { padding: 56px 48px 56px 56px; position: sticky; top: 96px; }
.cb-addon__tag, .cb-addon__eyebrow, .cb-addon__price-chip, .cb-addon__card-number,
.cb-addon__details dt, .cb-addon__cta { font-family: 'IBM Plex Mono', monospace; }
.cb-addon__tag { display: inline-block; margin-bottom: 22px; padding: 6px 12px; background: var(--addon-forest); color: var(--addon-cream); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.cb-addon .cb-addon__eyebrow { margin-bottom: 14px; font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.cb-addon h2, .cb-addon h3 { color: var(--addon-forest); font-family: Poppins, sans-serif; font-weight: 600; text-transform: none; letter-spacing: normal; }
.cb-addon h2 { margin-bottom: 24px; font-size: 44px; line-height: 1.15; }
.cb-addon .cb-addon__description { margin-bottom: 20px; font-size: 16px; line-height: 1.7; }
.cb-addon .cb-addon__description:last-of-type { margin-bottom: 32px; }
.cb-addon .cb-addon__price-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 18px; border: 1px solid var(--addon-forest); color: var(--addon-forest); font-size: 12px; line-height: 1.7; letter-spacing: .05em; text-transform: uppercase; }
.cb-addon .cb-addon__price-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; width: 100%; padding-block: 16px; background: var(--addon-forest); color: var(--addon-cream); text-decoration: none; cursor: pointer; }
.cb-addon .cb-addon__price-cta:hover { background: var(--addon-body); }
.cb-addon .cb-addon__price-cta strong { color: inherit; font-size: 20px; line-height: 1.3; }
.cb-addon__price-caption { grid-column: 1; font-size: 11px; }
.cb-addon__price-arrow { grid-column: 2; grid-row: 1 / 3; font-size: 24px; line-height: 1; }
.cb-addon__carousel { min-width: 0; padding: 56px 56px 40px 0; }
.cb-addon__viewport { border: 1px solid var(--addon-rule); background: var(--addon-surface); }
.cb-addon__slide { display: flex; min-width: 0; flex-direction: column; background: var(--addon-surface); }
.cb-addon__slide + .cb-addon__slide { border-top: 1px solid var(--addon-rule); }
/* Landscape photos keep their 3:2 shape; the portrait photo on the details
   card stands beside the text on wide screens instead of being cropped to a strip. */
.cb-addon__photo { display: block; width: 100%; height: auto; max-height: 520px; aspect-ratio: 3 / 2; flex: 0 0 auto; object-fit: cover; }
.cb-addon__photo--street { object-position: center 45%; }
.cb-addon__photo--group { object-position: center 50%; }
.cb-addon__photo--fans { aspect-ratio: 4 / 5; max-height: 460px; object-position: center 35%; }
.cb-addon__slide--details { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.cb-addon__slide--details .cb-addon__photo--fans { height: 100%; max-height: none; aspect-ratio: auto; min-height: 100%; }
.cb-addon__slide--details .cb-addon__content { min-width: 0; }
.cb-addon__content { flex: 1; padding: 32px 40px 36px; font-size: 15px; line-height: 1.7; }
.cb-addon__content > p + p { margin-top: 18px; }
.cb-addon .cb-addon__card-number { margin-bottom: 12px; font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.cb-addon h3 { margin-bottom: 14px; font-size: 26px; line-height: 1.3; }
.cb-addon strong { color: var(--addon-forest); font-weight: 700; }
.cb-addon__slide--included .cb-addon__content { display: flex; flex-direction: column; padding: 32px 40px 36px; }
.cb-addon__inclusions { display: grid; gap: 14px; padding: 0; margin: 0 0 22px; list-style: none; }
.cb-addon__inclusions li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.cb-addon__tick { display: flex; flex: 0 0 20px; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--addon-forest); color: var(--addon-cream); font-size: 12px; }
.cb-addon .cb-addon__note { color: var(--addon-muted); font-size: 13px; line-height: 1.6; }
.cb-addon .cb-addon__exclusions { margin-top: auto; border-top: 1px solid var(--addon-rule); padding-top: 16px; }
.cb-addon .cb-addon__details { margin: 16px 0 14px; border-bottom: 1px solid var(--addon-rule); }
.cb-addon__details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--addon-rule); }
.cb-addon__details dt { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.cb-addon__details dd { color: var(--addon-forest); font-weight: 600; text-align: right; }
.cb-addon__price-unit { font-size: 12px; font-weight: 400; white-space: nowrap; }
.cb-addon__cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 14px; padding: 16px 24px; border: 1px solid var(--addon-forest); background: var(--addon-forest); color: var(--addon-cream); font-size: 13px; line-height: 1.6; letter-spacing: .05em; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.cb-addon__cta:hover { background: var(--addon-body); color: var(--addon-cream); }
.cb-addon__cta:disabled { cursor: not-allowed; opacity: .6; }
.cb-addon__existing { display: inline-block; margin-bottom: 18px; color: var(--addon-forest); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.cb-addon__faq > div { padding: 16px 0; border-top: 1px solid var(--addon-rule); }
.cb-addon__faq > div:last-child { border-bottom: 1px solid var(--addon-rule); }
.cb-addon__faq dt { margin-bottom: 6px; color: var(--addon-forest); font-size: 15px; font-weight: 600; }
.cb-addon__faq dd { font-size: 14px; line-height: 1.6; }
/* Controls sit above the card so the arrows are in view with the active slide. */
.cb-addon__controls { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-bottom: 14px; }
.cb-addon [hidden] { display: none !important; }
.cb-addon__dots, .cb-addon__arrows { display: flex; align-items: center; }
.cb-addon__arrows { gap: 10px; }
.cb-addon__dot { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cb-addon__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--addon-rule); }
.cb-addon__dot[aria-disabled="true"]::after { background: var(--addon-forest); }
.cb-addon__arrow { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--addon-forest); background: var(--addon-surface); color: var(--addon-forest); font-family: Inter, sans-serif; font-size: 20px; cursor: pointer; }
.cb-addon__arrow:hover { background: var(--addon-forest); color: var(--addon-cream); }
.cb-addon :is(button, a):focus-visible { outline: 2px solid var(--addon-forest); outline-offset: 4px; }
.cb-addon-selection { padding: 12px 16px; border-left: 3px solid #2c4a2c; background: #f1f0eb; color: #2c4a2c; font-size: 14px; line-height: 1.6; }
.cb-addon__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Without JavaScript the four cards stay in the document flow. With it, the
   viewport is exactly as tall as the active card (set by the script), so the
   section never carries blank space or an inner scrollbar. */
.cb-addon__carousel.is-ready .cb-addon__viewport { overflow: hidden; overflow: clip; transition: height .35s ease; }
.cb-addon__carousel.is-ready .cb-addon__track { display: flex; align-items: flex-start; transition: transform .5s ease; }
.cb-addon__carousel.is-ready .cb-addon__slide { flex: 0 0 100%; width: 100%; border-top: 0; }


@media (max-width: 1100px) {
  .cb-addon__intro { padding: 48px 32px; }
  .cb-addon__carousel { padding: 48px 32px 32px 0; }
  .cb-addon h2 { font-size: 38px; }
  .cb-addon__content, .cb-addon__slide--included .cb-addon__content { padding: 28px; }
}

@media (max-width: 767px) {
  .cb-addon { grid-template-columns: minmax(0, 1fr); }
  .cb-addon__intro { position: static; padding: 48px 24px 28px; }
  .cb-addon h2 { max-width: 16ch; font-size: 36px; }
  .cb-addon__carousel { padding: 0 24px 48px; }
  .cb-addon__controls { justify-content: space-between; }
  .cb-addon__photo { max-height: 300px; }
  .cb-addon__slide--details { display: flex; }
  .cb-addon__slide--details .cb-addon__photo--fans { height: auto; max-height: 420px; aspect-ratio: 4 / 5; min-height: 0; }
  .cb-addon__content, .cb-addon__slide--included .cb-addon__content { padding: 24px 22px 28px; }
  .cb-addon h3 { font-size: 24px; }
  .cb-addon__details > div { gap: 16px; }
  .cb-addon__cta { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-addon__carousel.is-ready .cb-addon__track, .cb-addon__carousel.is-ready .cb-addon__viewport { transition: none; }
}