/* ---- Snapshot Ornament: campaign-only checkout rules (SELL-1566) ---------------------------------
   Loaded after arjuna.css and personalize.css, before brand.css. Everything the brand layer covers stays in brand.css;
   this file holds the Claus' Keepsakes decisions that are not colour roles. */

/* Card Extend Rewards ($0, package 3): in every cart, never listed in the checkout summary; the receipt lists it
   like any other order line (as on the Dumpling Calendar), so the rule is scoped to the checkout summary.
   Matched by package id, SKU and name, as on the Dumpling Calendar, where the id rule alone was not enough. */
[data-next-cart-summary] .cart-item[data-package-id="3"],
[data-next-cart-summary] .cart-item[data-sku="LIQUID_MEMBERSHIP_PREMIUM"],
[data-next-cart-summary] .cart-item[data-item-name="Card Extend Rewards"] { display: none !important; }

/* Footer: brand deep green with cream text, as Tereza asked for on the Dumpling Calendar (2026-10-09). */
.footer_section { background-color: #193025; margin-top: 80px; padding-top: 32px; padding-bottom: 32px; }
.footer_section,
.footer_section .text-xs,
.footer_section .footer_legal-link { color: #e9dec6; }
.footer_section .footer_legal-link:hover { color: #fff; }

/* Selected package: brand deep green ring on a light cream fill (brand/BRAND.md role "Selected package").
   The template's arjuna.css hardcodes a yellow ring (#d0ae03 on #fdfaea, literal values from the Dumpling
   Calendar re-skin) instead of reading --pod--color--select, so the token in brand.css does not reach it. */
.os-card.next-selected {
  background-color: #f6f1e6 !important;
  border: 3px solid #193025 !important;
}

/* "SAVE X%" pill on the tier cards: the promo strip's green #acf4a1 with black text, as on the Always Near checkout
   (Tereza, 2026-10-30; it was deep green on cream, BRAND.md savings labels). */
.os-card__title-badge.pb--bestseller { background-color: #acf4a1; color: #000; }
/* Rating and review stars green #00b67a on the checkout, as on the Always Near checkout (Tereza, 2026-10-30; they
   were brand gold). brand.css loads last and colours .star_img from --brand--color--rating-star on :root, so the
   token is set on body, which every star inherits from. This file also loads on the upsells and receipt, so the rule
   is scoped to the checkout's page type. */
html:has(meta[name="next-page-type"][content="checkout"]) body { --brand--color--rating-star: #00b67a; }

/* Step 2 cards: a saved design's text line ("Name or text (optional): ...; Special requirements (optional): ...")
   is one long nowrap string. The card truncates it, but every flex container from the right column down sizes to
   its content, so without a zero minimum the whole form column grows past the page edge once a design with a note
   is saved. */
.checkout-layout__right,
.checkout-layout__right .checkout-layout__content,
.checkout-layout__right .checkout-layout__content-inner,
.checkout-layout__right .checkout-form,
.checkout-layout__right .form-sections,
.pod-steps,
.pod-personalize,
.c1-pz,
.oc { min-width: 0; max-width: 100%; }

/* Summary: "Shipping and tax will be settled upon checkout confirmation" in brand near black, as the Atlas asks
   ("the theme's darker colour") and as the Christmas Memory Bottle checkout has it since its QA of 2026-10-12.
   next-core paints it in the primary colour, which with the brand tokens is red. SELL-1566 QA, 2026-10-14. */
.cart-ship-note { color: #1a1814; }

/* ---- QA 2026-10-14 (funnel report) ---------------------------------------------------------------- */
/* #5 Selected Credit Card box: keep its bottom border and round it like the 8px frame it sits in
   (the Memory Bottle checkout has the same rule since its QA of 2026-10-12). */
.payment-methods .payment-method.next-selected { border: 1px solid #1a1814 !important; border-radius: 8px; }
.payment-methods .payment-method.next-selected .payment-method__form { border-radius: 0 0 8px 8px; }
/* #10 Colours outside the palette: "Best Deal" (gold on white failed contrast) in deep green like "Most Popular".
   The discount amount is the template red #e44613 since the POD summary rules of 2026-10-16 (arjuna.css). */
.os-card__price-label--blue { color: #193025; }

/* ---- QA re-check 2026-10-14 (Jolly checkout design, shared/css/checkout-v3.css) ------------------- */
/* 8 Phone heading: the stars on one line and the rating text under them, both centred like the title. */
@media (max-width: 640px) {
  .show-tablet .heading-box .rating-row { flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
}
/* 9 Tablet (641-991px): the desktop header text and the Checkout > Bonus Deals > Summary bar, which the design keeps
   down to 641px; the numbered phone bar only under that. !important: the SDK's campaign-cart.css repeats next-core's
   rules and loads from the CDN after every page sheet. */
@media (min-width: 641px) and (max-width: 991px) {
  .mg-text.hide-tablet { display: block !important; }
  .mg-image { width: 60px; height: 60px; }
  .checkout-progress.hide-tablet-down { display: flex !important; }
  .checkout-progress--numbered { display: none !important; }
}
/* 10 Hero: the photo fills a rounded box (600:525 as the design, 358:340 on a phone) instead of sitting contained in
   a 485px-high white box. */
.banner-img-wrapper { padding: 0; border-radius: 8px; overflow: hidden; }
.img-wrapper .banner-img { height: auto; aspect-ratio: 600 / 525; object-fit: cover; }
@media (max-width: 767px) {
  .img-wrapper { height: auto; }
  .img-wrapper .banner-img { height: auto; aspect-ratio: 358 / 340; }
  .banner-img-wrapper { border-radius: 8px; }
}
/* 12 Unselected tier cards: a visible grey radio ring (design: 20px, #d0d0d0). The stars before "Most Popular" and
   "Best Deal" are brand gold in _includes/pod-bundle-selector.html. */
.radio-style-1 { width: 20px !important; height: 20px !important; border-color: #c9c9c9 !important; }
/* 13 30px before "Step 2" and before "Shipping address" at every width (design: 16px gap + 14px heading margin).
   .pod-steps is a plain wrapper around the two steps, so the form's own gap never reached them. */
.pod-steps { display: flex; flex-direction: column; gap: 30px; }
.pod-personalize { margin-top: 0; }
.form-sections { grid-row-gap: 30px; }
/* 14 Personalisation cards: the price in the heading serif. */
.oc-meta b { font: 600 18px/1.2 var(--font-headline); color: #1a1814; }
/* 16 "Your Photo on the Tree, Every Year" in Fraunces, 28px (26px on a phone). */
.video-title { font-family: var(--font-headline); font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: .01em; }
/* 17 Product title 34px/700, step headings 20px/700 (brand.css sets h1 700 and the display scale 600, so the title
   rule carries the element). The Grand Total follows the POD summary rules in arjuna.css (2026-10-16). */
h1.display-md { font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -.3px; }
.form-section__title { font-size: 20px; line-height: 28px; font-weight: 700; }
@media (max-width: 640px) {
  h1.display-md { font-size: 24px; line-height: 28px; }
  .form-section__title { font-size: 18px; }
  .video-title { font-size: 26px; line-height: 34px; }
}
/* 18 Apple Pay and Google Pay marks after the card logos under the trust seals (trust-bar.html extra_marks). */
.trust-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.trust-pay .credit-card__flags { width: auto; max-width: min(100%, 300px); margin: 0; }
.trust-pay__mark { display: block; height: 22px; width: auto; }

/* ---- QA re-check, round 2 (2026-10-15) ------------------------------------------------------------ */
/* 1 The tier cards keep their 1/2/3-ornament image on tablet and phone (design: 84px, 56px on a phone); next-core
   hides .os-card__image-slot.hide-tablet below 992px and the SDK's campaign-cart.css repeats it, hence !important. */
@media (max-width: 991px) {
  .os-card__image-slot.hide-tablet { display: block !important; }
}
@media (max-width: 640px) {
  .os-card__image-slot { width: 56px; height: 56px; }
}

/* Client QC of 2026-10-20 (SELL-1566, CLS 0.26 phone / 0.29 desktop): the fixes from the Smart Christmas Tree Lights
   checkout (css/checkout-lights.css, same promo-banner.js and promo-timer.js). Both custom elements draw themselves only
   when their deferred scripts run, so until then the page jumps by the strip's height and the form by the timer's.
   Heights measured on this checkout at 320 to 1920px; ?banner=n and ?timer=n still hide them (display:none wins). */
promo-banner:not(:defined), promo-timer:not(:defined) { display: block; }
promo-banner:not(:defined) { min-height: 103.4px; }
promo-timer:not(:defined) { min-height: 66px; }
@media (max-width: 768px) { promo-timer:not(:defined) { min-height: 59.4px; } }
@media (max-width: 767px) { promo-banner:not(:defined) { min-height: 163.8px; } }
@media (max-width: 360px) {
  promo-banner:not(:defined) { min-height: 154.2px; }
  promo-timer:not(:defined) { min-height: 56.8px; }
}

/* next-core's loading shimmer over [data-next-await] animates `left`, which Chrome counts as a layout shift on every
   frame while the tier prices load. The same sweep as a transform (band 55% wide: -100% to 100% / 55% = 181.8%). */
html:not(.next-display-ready) [data-next-await]::after {
  left: 0;
  transform: translateX(-100%);
  animation-name: ck-await-shimmer-sweep;
}
@keyframes ck-await-shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(181.8%); }
}