/* ---- Smart Christmas Tree Lights: campaign-only rules (SELL-1636) ---------------------------------
   Started 2026-10-19 as a copy of the Christmas Memory Bottle's checkout-cmb.css (SELL-1501 and its QA of
   2026-10-12), which carries the same Claus' Keepsakes decisions. Loaded after arjuna.css (and upsell-stepper.css on
   the upsells) and before brand.css. Everything the brand layer covers stays in brand.css; this file holds the
   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; }

/* ---- QA 2026-10-12 (SELL-1501, 1502, 1503, 1505) --------------------------------------------- */

/* #2 Receipt: next-core caps the order-line list at 18rem with its own scrollbar (next-core.css:3520); the
   receipt lists every line in full. The checkout summary keeps the cap. */
[data-next-order-items].cart-items__list { max-height: none; overflow: visible; }

/* #6 Rating stars in brand gold (the star SVGs use currentColor). */
.star_img, .rating-row__stars .star_img { color: var(--brand--color--rating-star, #b38952); }

/* #10 Selected Credit Card box: keep its bottom border and round it like the 8px frame it sits in. */
.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; }

/* #11 Mobile receipt: the "Order Summary" heading sat under the toggle bar. */
@media screen and (max-width: 767px) {
  .order-summary-mobile [data-next-accordion-panel] .order-summary { padding-top: 20px; }
}

/* #12 Mobile checkout: the column gap (next-core .checkout-wrapper, 3rem) read as a 73px hole between the hero
   image and the timer bar once the left rail is hidden. */
@media screen and (max-width: 767px) {
  .checkout-wrapper { grid-row-gap: 20px; row-gap: 20px; }
}

/* #14 Off-brand colours: shipping note and Grand Total in near black; the gold "Best Deal" label did not pass
   contrast on white, so both tier labels use deep green. The discount amount stays the template red (#e44613,
   adsbranded-templates#36). The upsell header title's face and weight come from brand.css. */
.cart-ship-note { color: #1a1814; }
.order-totals__line--total, .order-totals__label--total, .order-totals__value--total { color: #1a1814; }
.os-card__price-label--blue { color: #193025; }

/* Sizes tuned by Nemanja on the checkout (2026-10-21): the red 30-DAY tile on the hero a step smaller (arjuna.css caps
   at 44 / 26 / 15px), the tier card titles ("1 Set", "2 Sets", "3 Sets") a step larger (arjuna.css 18px). */
.badge-tile__big { font-size: clamp(30px, 4.2vw, 36px); }
.badge-tile__unit { font-size: clamp(18px, 2.5vw, 22px); }
.badge-tile__label { font-size: clamp(11px, 1.45vw, 13px); }
.os-card__title { font-size: 20px; }

/* "30-Day Money-Back Guarantee" beside the badge in the header stays on tablets and phones too (Nemanja, 2026-10-21);
   next-core hides .mg-text.hide-tablet under 992px. !important: the SDK's campaign-cart.css repeats that rule and
   loads from the CDN after every page sheet (as on the Snapshot checkout). */
.mg-text.hide-tablet { display: block !important; line-height: 1.25; }
/* 12px on phones (Nemanja, 2026-10-21); next-core sets 14px under 768px, 16px above. */
@media (max-width: 767px) { .mg-text.hide-tablet { font-size: 12px; } }

/* Checkout form column at full width on desktop (Marko's QA, SELL-1638, 2026-10-21): the current template wraps the form
   in .checkout__form-container, which next-core caps at 528px inside the 552px right column, so "Your order is reserved
   for: 9:59. Stay on this page." broke onto 2 lines at 1440 and 1280px. The Bottle checkout (the clone URL) has no such
   wrapper and runs 552px with the line on one row. Under 992px next-core already sets max-width: 100%. */
@media screen and (min-width: 992px) { .checkout-layout__form > .checkout__form-container { max-width: none; } }

/* Upsell hero band (all 4 upsells): less red under the headline on desktop, 4rem instead of next-core's 5rem (Nemanja,
   2026-10-21). Under 992px next-core's own 6rem rule still applies. */
@media screen and (min-width: 992px) { .upsell-header { padding-bottom: var(--spacing--4); } }

/* Promo strip and timer pill on the checkout in the AdsBranded SOP green (#acf4a1, black text) instead of the brand
   deep green (Tez, SELL-1501 comment of 2026-10-14, with the arjuna-pod template render as the reference). Set on the
   two custom elements themselves, so only the checkout banners change; brand.css keeps the brand kit roles for the
   upsells and the receipt. Custom properties inherit into the shadow DOM, where promo-banner.js / promo-timer.js read them. */
promo-banner, promo-timer {
  --pod--color--banner: #acf4a1;
  --pod--color--banner-foreground: #0a0a0a;
  --pod--color--promo-code: #acf4a1;
}

/* Both custom elements draw themselves only when their deferred scripts run, so until then they are empty and the
   whole page jumps down by the strip's height, and the form by the timer's (Lighthouse CLS 0.25 on a phone, 0.19 on
   desktop, 2026-10-20). Their heights are held here until they are defined; measured on this checkout at 320 to 1920px,
   breakpoints from promo-banner.js (767 / 360px) and promo-timer.js (768 / 360px). ?banner=n and ?timer=n still hide
   them: both set display:none, which wins over a min-height. */
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; }
}

/* The loading shimmer over [data-next-await] blocks (next-core.css, next-await-shimmer-sweep) slides its ::after by
   animating `left`, and Chrome counts every frame of that as a layout shift: 0.19 CLS on a desktop checkout while the
   tier prices load on a slow connection (2026-10-20). The same sweep as a transform: the 55%-wide band starts one
   band-width left of the box (-100%) and ends at its right edge (100% / 55% = 181.8% of the band). Shared template
   file left alone; worth fixing in next-core upstream. */
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%); }
}

/* Plain (non-personalised) stepper upsells 1 to 3 (_includes/upsell-stepper-plain-offer.html, from the Snapshot
   Ornament funnel, where these two rules live in upsell-snapshot.css): the "(70% off)" note beside the page price,
   the struck checkout shipping, "+ free shipping", and a packshot that must not be cropped square. */
.us-price__pct { font-weight: 600; color: var(--pod--color--saving); white-space: nowrap; }
.us-price__sub s { text-decoration-color: var(--pod--color--danger); }
.us-price__sub--free { color: var(--pod--color--saving); }
.us-media__img--contain img { object-fit: contain; }

/* Hero video (2026-11-05). arjuna.css crops a hero video to the column (object-fit: cover, 485px / 340px high), which
   cut the portrait 1106x1270 video's sides; show it whole at the photo's height instead. The card takes the video's own
   cream (#fffcf8) so the bands either side of it do not show. */
.banner-img-wrapper:has(> .img-wrapper.video) { background-color: #fffcf8; }
.banner-img-wrapper > .img-wrapper > video { object-fit: contain; background: #fffcf8; }
/* The video names the light mode on screen in its top left, where the 30-DAY tile sits on the other POD checkouts;
   on this checkout the tile moves to the top right, beside the star, so it does not cover the mode names. */
.img-wrapper.video .badge-tile { left: auto; right: 3%; }