/* ---- Christmas Memory Bottle: campaign-only checkout rules (SELL-1501) ---------------------------
   Loaded after arjuna.css and 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: next-core paints it primary-foreground on primary-light, which with the
   brand tokens is white on cream. Deep green on cream instead (BRAND.md: savings labels deep green). */
.os-card__title-badge.pb--bestseller { color: #193025; }

/* Upsell header band: the title is a div, not a heading, so brand.css does not give it the headline face. */
.upsell-header__title { font-family: var(--font-headline, "Fraunces", Georgia, serif); font-weight: 600; letter-spacing: .01em; }

/* ---- 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, Grand Total and the discount amount in near black; the gold "Best Deal"
   label did not pass contrast on white, so both tier labels use deep green. */
.cart-ship-note { color: #1a1814; }
.order-totals__line--total, .order-totals__label--total, .order-totals__value--total { color: #1a1814; }
.order-totals__value.ts-lg.tw-600.cc-disc, .os-cart-summary-row--discount .order-totals__value { color: #1a1814; }
.os-card__price-label--blue { color: #193025; }

/* #1 Upsell gallery: reserve the square main slide and the thumb row before Swiper and the SDK run, so nothing
   shifts when they do (the slide wrap already has aspect-ratio 1/1 in next-core; the thumbs did not). */
.upsell-offer__image-column [swiper="slider-main"] { aspect-ratio: 1 / 1; width: 100%; }
.upsell-offer__image-column .swiper-thumbs-arrow { min-height: 72px; }
.upsell-offer__image-column .upsell-offer__image { aspect-ratio: 1 / 1; object-fit: cover; }

/* 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;
}