/* ---- Snapshot Ornament: campaign-only upsell rules (SELL-1567) ------------------------------------
   Loaded after upsell-stepper.css, before brand.css. Colour roles stay in brand.css. Sizes and spacing follow
   Jolly's upsell design (shared/css/upsell.css, delivery of 2026-10-06): desktop here is 992px and up, tablet
   641-991px, phone 640px and under. QA re-check of 2026-10-14, items 2 to 6. */

/* ---- Red band and offer card ------------------------------------------------------------------- */
/* The card sits below the band, as in the design (no overlap); the band carries the design's padding instead of
   next-core's 5rem foot that the overlapping box needed. */
.upsell-header { padding: 60px 40px; }
.upsell-header__inner { padding: 0; gap: 12px; }
.upsell-header__title { font-size: 44px; line-height: 1.18; }
.upsell-header__offer { font-family: var(--font-headline); font-weight: 600; font-size: 28px; line-height: 1.25; letter-spacing: .01em; }
.upsell-header__suboffer { font-size: 20px; font-weight: 500; line-height: 1.35; }
.us-section { margin-top: 0; padding: 60px 0; }

/* Card title and the price figures in the heading serif, at the design's sizes; the accept button at 20px. */
.us-title { font-size: 40px; font-weight: 600; line-height: 1.15; }
.us-price__lab { font-size: 16px; }
.us-price__was { font-family: var(--font-headline); font-weight: 600; font-size: 28px; color: #5a4f47; }
.us-price__now { font-family: var(--font-headline); font-weight: 600; font-size: 40px; line-height: 1.1; }
.us-price__sub, .us-price__save { font-size: 14px; }
.us-cta { font-size: 20px; line-height: 1.5; padding: 20px 24px; gap: 20px; }

/* The "Added to the order you just placed" box with a red border. The "#N" chip stays brand red: Tez's POD colour
   rule of 2026-10-15 (brand.css --pod--color--personalize, read by upsell-stepper.css) beats the design's cream chip. */
.us-reassure { border-color: #a22d2b; border-radius: 16px; }

@media (max-width: 991px) {
  .upsell-header { padding: 48px 32px; }
  .upsell-header__inner { gap: 10px; }
  .upsell-header__title { font-size: 36px; }
  .upsell-header__offer { font-size: 26px; }
  .us-section { padding: 48px 0; }
  .us-title { font-size: 32px; }
  .us-price__was { font-size: 26px; }
  .us-price__now { font-size: 32px; }
  .us-cta { font-size: 20px; padding: 16px 24px; }
  /* The photo keeps the design's height instead of growing square with the card width. */
  .us-media__img img { aspect-ratio: auto; height: 380px; border-radius: 12px; }
}
@media (max-width: 640px) {
  .upsell-header { padding: 40px 24px; }
  .upsell-header__inner { gap: 8px; }
  .upsell-header__title { font-size: 32px; }
  .upsell-header__offer { font-size: 24px; }
  .upsell-header__suboffer { font-size: 18px; }
  .us-section { padding: 36px 0 40px; }
  .us-title { font-size: 28px; }
  .us-price__was { font-size: 24px; }
  .us-price__now { font-size: 28px; }
  .us-cta { font-size: 18px; padding: 12px 24px; gap: 12px; }
  .us-media__img img { height: 300px; border-radius: 8px; }
  .us-reassure { border-radius: 8px; }
  /* Header bar: the logo centred with the steps under it (arjuna.css forces a row below 768px). */
  .upsell-header-bar__wrapper { flex-direction: column; justify-content: center; gap: 8px; }
  .upsell-header-bar__logo img { width: 91px; max-width: 91px; }
}

/* ---- Upsells 2 and 3 on the stepper layout without personalisation (upsell-stepper-plain-offer.html), funnel QA
   2026-10-14 #7 ---------------------------------------------------------------------------------- */
/* "(60% off)" beside the page-price label, filled by the SDK. */
.us-price__pct { font-weight: 600; color: var(--pod--color--saving); white-space: nowrap; }
/* Struck checkout shipping under the full price; "free shipping" under the page price. */
.us-price__sub s { text-decoration-color: var(--pod--color--danger); }
.us-price__sub--free { color: var(--pod--color--saving); }
/* A packshot that must not be cropped to the panel (the calendar's). */
.us-media__img--contain img { object-fit: contain; }