/* ---- Living Memory Crystal: campaign-only checkout rules (SELL-1576) --------------------------
   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.
   Based on checkout-cmb.css (Christmas Memory Bottle). */

/* Card Extend Rewards ($0, package 3): in every cart, never listed in the checkout summary; the receipt lists it
   like any other order line. Matched by package id, SKU and name, same pattern as the Dumpling Calendar. */
[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, Atlas rule since 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").
   arjuna.css hardcodes a yellow ring from the Dumpling Calendar; override it to brand colours. */
.os-card.next-selected {
  background-color: #f6f1e6 !important;
  border: 3px solid #193025 !important;
}

/* "SAVE X%" pill on the tier cards: deep green on cream instead of white on cream. */
.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: 0.01em;
}

/* Receipt: next-core caps the order-line list at 18rem with its own scrollbar; the receipt lists every line in full. */
[data-next-order-items].cart-items__list {
  max-height: none;
  overflow: visible;
}

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

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

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

/* Mobile checkout: the column gap (next-core .checkout-wrapper, 3rem) reads as a 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;
  }
}

/* Off-brand colours: shipping note, Grand Total and the discount amount in near black;
   the blue "Best Deal" label uses deep green for contrast. */
.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;
}

/* 90-day badge as image: reset the text-tile styles arjuna.css applies to .badge-tile. */
.img-wrapper img.badge-tile {
  background: none;
  padding: 0;
  border-radius: 0;
  display: block;
  width: clamp(90px, 18%, 130px);
}

/* OR divider between the express buttons and the card payment form. */
.ck-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font:
    800 13px / 18px 'Figtree',
    sans-serif;
  color: #222;
  margin: 14px 0;
}
.ck-or i {
  flex: 1;
  height: 1px;
  background: #e5d9c8;
}

/* POD layout fix for long text: a saved design's text line is one long nowrap string; the template
   truncates it inside the personalisation card but lets the flex containers above grow past the page width.
   Zero minimum width on the right-column flex chain keeps the column within bounds. */
.checkout-layout__right,
.checkout-layout__right > .checkout-layout__content,
.checkout-layout__right > .checkout-layout__content > .checkout-layout__content-inner {
  min-width: 0;
}

.ck-tag {
  margin-top: 8px;
  padding-bottom: 10px;
}

.sub-head-text {
  margin-top: 0;
  padding-top: 10px;
}

.heading-box {
  gap: 0;
}

.banner-img-wrapper {
  padding: 0;
}