/* ===========================================================================
   Arjuna family component layer (Adsbranded Arjuna template family).
   Load order on checkout / upsell / receipt:
     css/next-core.css  ->  css/brand-theme.css  ->  css/arjuna.css
   brand-theme.css carries the campaign palette (:root tokens only, including the --pod--*
   family tokens). This file deliberately sets NO palette tokens, so the campaign
   palette always wins; it only adds the Arjuna components next-core does not ship
   (bundle-card selected state, price shape, hero media, benefit grid, review rail,
   delivery block, inline promo display) plus the type tokens.
   =========================================================================== */

/* ---- 1. Type + family-local tokens (no palette here) ------------------ */
:root {
  --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-secondary: "Roboto", var(--font-primary);
  --font-accent: "Poppins", var(--font-primary);

  --_text---font-family--primary: var(--font-primary);
  --_text---font-family--heading: var(--font-primary);
  --_text---font-family--secondary: var(--font-secondary);

  --arjuna--strike: #d32b33;        /* diagonal compare-price strike */
}

/* The base resets the font-family tokens to the system stack inside its
   ≤991px media query (next-core.css:7629), so re-assert the bridge here. The
   --font-* tokens themselves live at :root (no media query), so this just re-points. */
@media screen and (max-width: 991px) {
  :root {
    --_text---font-family--primary: var(--font-primary);
    --_text---font-family--heading: var(--font-primary);
    --_text---font-family--secondary: var(--font-secondary);
  }
}

/* Apply the named families directly (Olympus body/headings don't all read the vars, and the
   SDK sheet loads last). All reference the --font-* tokens — no literal family names here. */
body { font-family: var(--font-primary); }
h1, h2, h3, h4, h5, h6,
.display-xl, .display-lg, .display-md, .display-sm, .display-xs, .display-2xs {
  font-family: var(--font-primary);
}
.checkout__form-container,
.os-card,
.os-card__label,
.os-card__label-2,
.limos_review-box,
.star_text-wrapper-row { font-family: var(--font-secondary); }

/* ---- 2. Bundle card — Arjuna selected state + badge theming ----------- */
/* Selected: warm lime fill + thick black border (the signature). Keyed on .next-selected
   ONLY — NOT .next-in-cart. In swap mode the SDK leaves .next-in-cart on the previously
   selected card (it never clears it), so styling .next-in-cart leaves the old card lit and
   TWO cards look selected after a swap (the same single-select trap as the radio's old
   data-selected hook, issue #3). .next-selected is the class the SDK actually swaps.
   browser-verified: clicking 2x now moves the lime fill off 1x cleanly. */
.os-card.next-selected {
  z-index: 1;
  /* Campaign re-skin of the Arjuna lime/black default: brand primary-lighter fill + primary-dark ring
     (literal values mirror brand-theme.css; var() did not resolve here in the SDK cascade). */
  background-color: #fdfaea !important;
  border: 3px solid #d0ae03 !important;
  box-shadow: 0 4px 4px 0 #14250333;
}
/* Neutralize any SDK in-cart tint on the NON-selected card the SDK left .next-in-cart on,
   so only the .next-selected card carries the Arjuna highlight. */
.os-card.next-in-cart:not(.next-selected) {
  background-color: #fff !important;
  border-color: #ededed !important;
}
/* Adsbranded price shape = per-unit "/ea" (current) + DIAGONAL compare strike + visible savings.
   This is the family DEFAULT, baked here so it applies without per-card markup classes (the cards
   ship plain .os--compare / .os-card__total-compare). The compare rows are gated by the SDK's
   hasDiscount token, so a full-price (no-discount) campaign is the natural opt-DOWN: with no
   discount the strike + savings simply don't render and only the current /ea + total show. */
.os-card__price.os--current { font-weight: 700; }
.os-card__price.os--compare,
.os-card__price.os--compare-diagonal { color: #000; font-weight: 400; }
.os-card__price.os--compare,
.os-card__total-compare { position: relative; display: inline-block; }
/* Only the diagonal ::after strike; drop next-core's straight line-through. */
.os-card__total-compare { text-decoration: none; }
.os-card__pricing .os-card__total-compare,
.os-card__pricing .os-card__price { font-size: 18px; }
.os-card__pricing { grid-column-gap: .5rem; grid-row-gap: .5rem; }
.os-card__title { font-size: 18px; }
/* No brand fill behind the product thumbnail */
.os-card__image-slot { background-color: transparent; }
/* Same width for every thumbnail: the wider 2x/3x images scale down instead of cropping. */
.os-card__image-slot .image { object-fit: contain; }
/* Card label above the price ("Most Popular" / "Best Deal"), set per bundle via price_label. */
.os-card__price-label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.os-card__price-label--green { color: var(--pod--color--label-green); }
.os-card__price-label--blue { color: var(--pod--color--label-blue); }
.os-card__price.os--compare::after,
.os-card__total-compare::after {
  content: ""; position: absolute; left: 0; top: 50%; right: 0;
  border-top: 1px solid var(--arjuna--strike);
  transform: rotate(-10deg); transform-origin: center; pointer-events: none;
}
.os-card__shipping { font-weight: 700; color: var(--brand--color--danger); }

/* Per-card label pill colors (Most Popular / Best Deal) */
.os-card__label-2.os-card__label--pill-primary .os-card__label-text-2 { color: var(--pod--color--label-green); }
.os-card__label-2.os-card__label--pill-secondary .os-card__label-text-2 { color: var(--pod--color--label-blue); }

/* Diagonal red strike */
.diagonal-strike,
.os--compare-diagonal { position: relative; display: inline-block; }
.diagonal-strike::after,
.os--compare-diagonal::after {
  content: ""; position: absolute; left: 0; top: 50%; right: 0;
  border-top: 1px solid var(--arjuna--strike);
  transform: rotate(-10deg); transform-origin: center;
}

/* Radio: Olympus shape (ring, white gap, filled centre when selected) in --pod--color--select */
.radio-style-1 {
  display: inline-block; width: 16px; height: 16px;
  border: 1px solid #e5e7eb; border-radius: 50%; background: #fff;
  position: relative; box-sizing: border-box; transition: all .2s ease; flex: none;
}
.radio-inner { position: absolute; width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Selected radio follows ONLY the SDK's single-select .next-selected class, so it swaps
   correctly (issue #3). !important beats the SDK's own .next-selected .radio-style-1 rule in
   campaign-cart.css, which is injected from the CDN AFTER this layer (same pattern as the
   .next-selected card fill above). Do NOT reintroduce a static data-selected hook — the SDK
   never clears it, leaving the initial card's radio permanently lit. */
.next-selected .radio-style-1 { border: 3px solid #fff !important; background: var(--pod--color--select) !important; box-shadow: 0 0 0 2px var(--pod--color--select) !important; }
/* The black fill IS the centre dot; suppress the SDK's own inner dot. */
.next-selected .radio-style-1 .radio-inner { width: 0 !important; height: 0 !important; }

/* ---- 3. Hero media — video-as-image + badge overlays ------------------ */
/* */
.banner-img-wrapper { background-color: #fff; border-radius: 8px; padding: 16px 0 25px; }
/* both the image-default and video modes share the centered, badge-anchoring wrapper */
.banner-img-wrapper > .img-wrapper,
.banner-img-wrapper > .img-wrapper.video { position: relative; display: flex; justify-content: center; align-items: center; }
.banner-img-wrapper > .img-wrapper > video { width: 100%; height: 485px; object-fit: cover; }
.img-wrapper .banner-img { width: 100%; height: 485px; object-fit: contain; }
.img-wrapper .img-poster { width: 286px; height: auto; }
.img-wrapper .badge-img { position: absolute; right: 14px; bottom: 20px; }
.img-wrapper .badge-img-2 { position: absolute; right: 14px; bottom: 128px; width: 65px; }
.img-wrapper .badge-img-3 { position: absolute; top: 26px; right: 0; }
/* Text badge tile (hero-media text badges): solid colour, rounded, top left of the hero image. */
.img-wrapper .badge-tile { position: absolute; top: 4%; left: 3%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(118px, 24%, 150px); padding: 12px 8px 14px; border-radius: 6px; background: var(--pod--color--badge, #a3282b); color: var(--pod--color--badge-foreground, #fff); text-align: center; font-family: var(--font-primary, inherit); line-height: 1; box-sizing: border-box; }
.badge-tile__big { font-size: clamp(30px, 4.2vw, 44px); font-weight: 900; letter-spacing: -0.02em; }
.badge-tile__unit { font-size: clamp(18px, 2.5vw, 26px); font-weight: 900; letter-spacing: -0.01em; margin-top: 1px; }
.badge-tile__label { font-size: clamp(11px, 1.45vw, 15px); font-weight: 700; line-height: 1.1; margin-top: 6px; }

@media screen and (max-width: 500px) {
  .img-wrapper { height: 340px; }
  /* video mode keeps the narrow poster offset; image mode stays full-width + centered */
  .img-wrapper.video { justify-content: flex-start; margin-left: 30px; }
  .banner-img-wrapper > .img-wrapper.video,
  .banner-img-wrapper > .img-wrapper > video { margin-left: 0; height: 340px; }
  .img-wrapper .img-poster { width: auto; height: 340px; }
  .img-wrapper .banner-img { height: 340px; }
  .img-wrapper .badge-img-3 { top: 0; }
  .banner-img-wrapper { border-radius: 0; }
}

/* ---- 4. Benefit icon grid (4-up)  */
.icons-grids-2 { display: flex; text-align: center; gap: 16px; }
.icons-grids-2-item {
  flex: 1; border: 1px solid #bdbdbd; padding: 15px 9px; border-radius: 4px;
  font-family: var(--font-primary); font-weight: 700;
  font-size: 14px; line-height: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 12px;
}
.icons-grids-2-item img { width: 32px; height: 32px; object-fit: contain; }
@media screen and (max-width: 540px) {
  .icons-grids-2 { flex-wrap: wrap; }
  .icons-grids-2-item { min-width: calc(50% - 16px); }
}

/* ---- 5. Left social-proof rail --------------------------------------- */

/* Desktop: the whole left column sticks while the form scrolls. next-core puts sticky on
   .checkout-layout__content-inner, but its parent is only as tall as the content, so that never
   engaged. ponytail: plain top sticky. The column is taller than the viewport, so it only pins for
   the height difference to the form; use a JS bottom-anchored sticky if it needs to pin all the way. */
@media screen and (min-width: 992px) {
  .checkout-layout__content { position: sticky; top: 2rem; }
}

.sub-hero { display: flex; flex-flow: column; gap: 1.5rem; }
.benefit_section { display: flex; flex-flow: column; gap: 1rem; padding-top: 1rem; }
.checkout-features__column { display: flex; flex-flow: column; gap: 1rem; }

.limos_review-box-wrapper { flex: 1; display: flex; flex-direction: column; }
.limos_review-box {
  background-color: #fff; border: 1px solid #ededed; border-radius: 8px;
  display: flex; flex-flow: column; align-items: flex-start; width: 100%;
  padding: 1rem .75rem 1.5rem;
}
.limos_review-box-wrapper > img { width: 100%; height: auto; border-radius: 8px 8px 0 0; display: block; }
.limos_review-box-wrapper > img + .limos_review-box { border-radius: 0 0 8px 8px; border-top: 0; }

.star_text-img-wrapper { display: flex; justify-content: center; align-items: center; }
.star_text-wrapper { display: flex; flex-flow: column; align-items: flex-start; gap: 8px; font-weight: 700; }
.star_text-wrapper-row { display: flex; flex-flow: row; align-items: center; gap: 8px; font-size: 1rem; }
.star_wrapper { display: flex; align-items: center; gap: 1.2px; }
.star_img { display: flex; flex: none; width: 13px; height: 13px; object-fit: cover; }
.margin-8 { margin-top: 8px; }
.margin-8 .text-sm { font-size: 1rem; }

.customer_name-wrapper { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 14px; line-height: 1.2; }
.customer_text-name { color: #000; font-weight: 700; }
.black-line { background-color: #000; border-radius: 4px; min-width: 2.6px; height: 16px; }
.icon-review__wrapper { display: flex; align-items: center; gap: 5px; }
.icon_size-16 { flex: none; width: 16px; height: 16px; }

/* ---- 6. UGC video block  */
.video-title { box-sizing: border-box; text-align: center; font-weight: 700; margin: 32px 0; padding: 0; font-size: 27px; line-height: 1.3; }
.video-cont__out { border-radius: 20px; overflow: hidden; }
.video-cont__out__video,
.video-cont video { width: 100%; height: auto; display: block; }

/* ---- 7. Order summary — delivery estimate + scarcity ----------------- */

.popular-item-resume { font-family: var(--font-accent); font-size: 16px; line-height: 1.4; margin-top: 9px; }
.red-bold { color: #d32b33; font-weight: 600; }
.summary-total__coin { font-weight: 700; margin-right: .25rem; }

/* ---- 7b. Inline promo-code display ----------------------------------- */
/* Base .promo-wrapper / .coupon-form / .coupon-button / .coupon-tags ship in next-core;
   this adds the Adsbranded label + suggested-code chip opinion. */
.promo-display { display: flex; flex-flow: column; gap: .625rem; margin-bottom: 1rem; }
.promo-display .promo-wrapper { flex-flow: row wrap; align-items: center; gap: .5rem; }
.promo-display__label { font-weight: 700; font-size: .9rem; }
.promo-display__code {
  display: inline-flex; align-items: center; gap: .375rem;
  border: 1px dashed var(--brand--color--primary); border-radius: 6px;
  padding: .25rem .5rem; font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  background: var(--brand--color--primary-light);
}
.promo-display__code-icon { display: inline-flex; width: 14px; height: 14px; }

/* ---- 8. Responsive social-proof slot --------------------------------- */
/* Desktop: left rail shows. Mobile: re-emit below the form (single source,
   toggled by .hide-tablet-* utilities from next-core.css). */
@media screen and (min-width: 992px) { .mobile-footer-content { display: none; } }

/* ---- 9. CRO-variance slots ------------------------------------------- */
/* Optional, frontmatter-driven surfaces CRO iterations add (rating-stars.html,
   trust-bar.html press strip). Trust seals + guarantee reuse existing classes. */
.rating-row { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .5rem; flex-wrap: wrap; }
.rating-row__stars { display: inline-flex; align-items: center; gap: 1.2px; }
.rating-row__text { font-size: .875rem; color: var(--brand--color--text-secondary, #313131); }
.rating-row__text strong { color: #000; }

.press-bar { width: 100%; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #ededed; text-align: center; }
.press-bar__heading { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand--color--text-muted, #969696); margin-bottom: .5rem; }
.press-bar__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.press-bar__logo { height: 22px; width: auto; object-fit: contain; opacity: .65; filter: grayscale(1); }

/* Savings badge: next-core paints it primary-on-primary-light, which vanishes on a light/bright
   primary. Use the brand foreground for contrast. */
.os-card__title-badge.pb--bestseller { color: var(--brand--color--primary-foreground, #0a0a0a); }
.os-card__save-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.os-card__extra-off { color: var(--pod--color--positive); font-weight: 700; font-size: 14px; }
.os-card__shipping-label { color: #000; font-weight: 500; font-size: 14px; }
/* SDK puts next-free-shipping on [data-next-cart-summary] when shipping is $0 ({shipping} renders "Free"). */
.next-free-shipping .os-cart-summary-row--shipping .order-totals__value { font-weight: 700; text-transform: uppercase; }

/* Upsell contrast: white-on-primary text (announcement bar, upsell header) and primary-coloured
   labels follow --brand--color--primary-foreground, so light and dark primaries both read. */
.announcement__block, .announcement__block *,
.upsell-header, .upsell-header * { color: var(--brand--color--primary-foreground, #0a0a0a) !important; }
.cc-upsell-bundle-tier-card__badge, .cc-upsell-bundle-tier-card__badge * { color: var(--brand--color--primary-foreground, #0a0a0a) !important; }
.color-primary { color: var(--pod--color--positive) !important; } /* same colour as the checkout savings label */
.cc-upsell-bundle-tier-card__badge { background-color: var(--brand--color--primary); }
/* Upsell announcement bar: banner green with black text on every POD funnel (AdsBranded POD rule, Tez 2026-10-15),
   not the brand primary that next-core gives it. */
.announcement__block { background-color: var(--pod--color--banner, #acf4a1); }
.announcement__block, .announcement__block * { color: var(--pod--color--banner-foreground, #0a0a0a) !important; }

/* Keep the brand lockup's aspect ratio in the checkout, upsell and receipt headers. */
.brand-logo, .brand-logo img, img.brand-logo { height: auto !important; object-fit: contain; }

/* Shipping insurance: opt-out switch card below the CTA (see _includes/bump-insurance-toggle.html).
   .is-on is set by the include's inline script and js/insurance-toggle.js; the benefits table opens when OFF. */
.ins { background: #fff; border: 1px solid #ededed; border-radius: 16px; padding: 18px 20px; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ins-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ins-t { min-width: 0; }
.ins-h { margin: 0; font-weight: 700; font-size: 16px; color: #1a1814; }
.ins-h b { font-weight: 800; }
.ins-s { margin: 4px 0 0; font-size: 14px; color: #4a5568; }
.ins-sw { position: relative; flex: 0 0 auto; width: 62px; height: 30px; border: 0; padding: 0; border-radius: 999px; cursor: pointer; background: var(--pod--color--switch-off); transition: background .2s ease; }
.ins-sw:focus-visible { outline: 2px solid var(--pod--color--switch-on); outline-offset: 3px; }
.ins-sw .ins-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s ease; }
.ins-sw .ins-lab { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; transition: left .2s ease, right .2s ease; }
.ins.is-on .ins-sw { background: var(--pod--color--switch-on); }
.ins.is-on .ins-sw .ins-knob { left: 35px; }
.ins.is-on .ins-sw .ins-lab { right: auto; left: 10px; }
.ins-body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .35s ease, opacity .3s ease; }
.ins-body__inner { min-height: 0; overflow: hidden; }
.ins.is-on .ins-body { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ins-body, .ins-sw, .ins-sw .ins-knob { transition: none; } }
.ins-tbl { width: 100%; border-collapse: collapse; margin-top: 14px; }
.ins-tbl th { font-size: 12px; font-weight: 800; color: #1a1814; text-align: center; text-transform: uppercase; padding: 9px 8px; background: #f7f5ef; line-height: 1.2; width: 27%; }
.ins-tbl th:first-child { text-align: left; width: 46%; }
.ins-tbl td { font-size: 13px; padding: 11px 8px; border-top: 1px solid #ededed; color: #1a1814; line-height: 1.25; text-align: center; }
.ins-tbl td:first-child { text-align: left; }
.ins-y { color: var(--pod--color--success) !important; font-weight: 800; font-size: 16px; }
.ins-n { color: var(--pod--color--danger) !important; font-weight: 800; }

/* "and more..." after the card logos (desktop only via .hide-tablet-down) */
.payment-method__more { font-size: 12px; white-space: nowrap; }

/* Payment method radio: same look as the bundle card .radio-style-1 */
.payment-method__input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 16px; height: 16px; box-sizing: border-box;
  border: 1px solid #e5e7eb; border-radius: 50%; background: #fff;
  cursor: pointer; transition: all .2s ease;
}
.payment-method__input:checked { border: 3px solid #fff; background: var(--pod--color--select); box-shadow: 0 0 0 2px var(--pod--color--select); }
.payment-method__input:focus-visible { outline: 2px solid var(--pod--color--select); outline-offset: 3px; }
.payment-method__title { margin-bottom: 0; margin-left: 8px; font-weight: 600; }
.payment-method.next-selected { background-color: #EFEFEF; }

/* Checkout CTA */
.submit-button {
  background: var(--pod--color--cta);
  border: 1px solid var(--pod--color--cta-border);
  box-shadow: 0px 4px 8px 0px #A0A99670;
  color: var(--pod--color--cta-foreground);
  min-height: 3rem;
}

/* Card-flags strip at its natural 460px width (next-core caps it at 90% / 350px).
   max-width: 100% only keeps it from overflowing on narrow phones. */
.credit-card__flags { display: block; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }

/* Cart summary promo row */
.cart-promo__row {
  background: var(--pod--color--banner); color: var(--pod--color--banner-foreground); font-weight: 700; font-size: 14px; line-height: 1;
  text-align: right; padding: 10px 12px;
}
.cart-promo__check { font-weight: 700; }
@media screen and (max-width: 767px) { .cart-promo__row { font-size: 15px; } }

/* "100% Encrypted & Secure Checkout" strip: neutral grey, not the brand colour */
.encrypted-banner { background-color: #eee; }

/* Mobile/tablet numbered progress bar.
   Active step: black circle, white digit. js/checkout-progress-spy.js sets .is-active on scroll. */
.checkout-progress--numbered {
  height: auto; padding: 0;
  position: sticky; top: 0; z-index: 50;   /* stays on top while scrolling */
  background-color: #fff; border-bottom: 1px solid #EDEDED;
}
.checkout-progress--numbered .progress-wrapper { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.checkout-progress--numbered .step { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.checkout-progress--numbered .step-circle {
  width: 26px; height: 26px; border-radius: 50%; background: #D2D2D2; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background-color .2s ease;
}
.checkout-progress--numbered .step-label { font-size: 12px; color: #9E9E9E; white-space: nowrap; transition: color .2s ease; }
.checkout-progress--numbered .line { flex: 1 1 auto; height: 1px; background: #D2D2D2; margin-top: 13px; min-width: 24px; }
.checkout-progress--numbered .step.is-active .step-circle { background: #000; color: #fff; }
.checkout-progress--numbered .step.is-active .step-label { color: #111; font-weight: 600; }
/* done: section scrolled past, the number becomes a white tick */
.checkout-progress--numbered .step.is-done .step-circle { background: #000; font-size: 0; }
.checkout-progress--numbered .step.is-done .step-circle::after { content: "\2713"; font-size: 14px; color: #fff; }

/* Mobile side padding (next-core: 2.5rem, 1.25rem up to 991px) */
@media screen and (max-width: 767px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .order-summary { padding-top: 0; padding-bottom: 0; }
  .trust-badge--text { font-size: 12px; }
  .upsell-header-bar__step-label { font-size: 11px; white-space: nowrap; }
  .upsell-header-bar__stepper { gap: 6px; }             /* next-core: .875rem; logo + steps must fit one row at 360px */
  .upsell-header-bar__logo img { max-width: 100px; height: auto; }
  .upsell-offer__qty-btn, .next-bundle-qty__btn { width: 3rem; height: 3rem; }
  .upsell-header-bar__inner, .upsell-header-bar__wrapper { flex-direction: row; gap: 8px; padding-top: .75rem; padding-bottom: .7rem; }
  .prices-text-wrapper { grid-column-gap: 10px; grid-row-gap: 10px; justify-content: center; align-items: center; margin-bottom: 30px; display: flex; }
}

/* Footer text and links in black */
.footer_section,
.footer_section .text-xs,
.footer_section .footer_legal-link { color: #000; }

/* Upsell quantity stepper: soft brand fill with dark -/+ */
.next-bundle-qty__btn { background-color: var(--pod--color--soft); border-color: var(--pod--color--soft-border); color: #0a0a0a; font-weight: 700; }

/* Swiper thumbnails in full colour (next-core greys out the inactive ones) */
[data-component="swiper"][data-variant="sw1"] [swiper="slider-thumbs"] .swiper-slide { filter: none; }

/* Upsell accept button: same look as the checkout CTA (.submit-button above) */
[data-next-upsell-action="add"].button {
  background: var(--pod--color--cta);
  border: 1px solid var(--pod--color--cta-border);
  box-shadow: 0px 4px 8px 0px #A0A99670;
  color: var(--pod--color--cta-foreground);
  font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  letter-spacing: normal;
  min-height: 3rem;
  height: auto;
  padding: 1rem;
}
[data-next-upsell-action="add"].button .button_content div { font-size: 20px; font-weight: 700; line-height: 26px; }

/* Upsell offer box: soft brand fill */
.upsell-container { background-color: var(--pod--color--soft); }

/* ---- Shipping address section (_includes/shipping-details-form.html) ----
   Opens short; City / State / ZIP (and the optional address line 2) show once the shopper types into the
   section. Every field is open from page load (2026-10-16). Labels float into the field border. */
.ship-form .form-section__title-wrapper { margin-bottom: 18px; }
.ship-form .form-section__title { margin-bottom: 4px; }
.ship-form__sub { margin: 0; font-size: 17px; line-height: 1.4; }
.ship-form .form-grid { gap: 18px; }
.ship-form .input-flds { min-height: 56px; padding-left: 16px; font-size: 17px; border-color: #c9c9c9; border-radius: 6px; }
.ship-form .select-field { padding-top: 0; padding-bottom: 0; }
.ship-form .label-checkout--floating { left: 12px; top: 0; font-size: 13px; line-height: 1; color: #1a1814; }
.ship-form .label-checkout--floating.has-value { transform: translate(0, -.55em); }
.ship-form .ship-form__more { display: grid; gap: 18px; }
/* The SDK hides [data-next-component="location"] with an inline display:none until an address is typed; the
   AdsBranded POD rule keeps City / State / ZIP open from page load, so the stylesheet wins with !important. */
.ship-form .ship-form__loc-wrap { display: block !important; }
.ship-form .ship-form__loc { display: grid; grid-template-columns: 1.15fr 1.1fr 1fr; gap: 1rem; }
.ship-form .ship-form__loc .form-group { width: auto; min-width: 0; }
@media (max-width: 479px) {
  .ship-form .ship-form__loc { grid-template-columns: 1fr 1fr; }
  .ship-form .ship-form__loc .form-group:first-child { grid-column: 1 / -1; }
}

/* ---- Payment: express buttons in a bordered box, then OR, then the method radios ---- */
.pod-xbar .exp-checkout { margin: 0; }
.pod-xbar .express-checkout__buttons { padding: 22px; border: 1px solid var(--brand--color--border, #d9d9d9); border-radius: 8px; background: #fff; }
.pay-or { margin: 14px 0 18px; }
.pay-or .divider-section__text-v2 { font-weight: 700; }
.payment-methods .payment-method { border-radius: 0; }
.payment-methods .payment-method.next-selected { border: 1px solid #1a1814; }
.ship-form .select-field, .payment-methods .select-field { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; padding-right: 40px; }
/* next-core.css gives .cart-items__scroll-hint display:flex after its own .hide rule, so the hidden hint
   showed over the first summary line. Keep it hidden unless the markup drops .hide. */
.cart-items__scroll-hint.hide { display: none; }

/* Shipping and tax line in the order summary (AdsBranded checkout spec, 2026-10-09): replaces the
   Shipping and Tax rows. Darker theme colour, extra space above it, a rule under it. */
.cart-ship-note {
  margin: 24px 0 0; padding-bottom: 14px; border-bottom: 1px solid #ededed;
  color: var(--brand--color--primary-dark, #111827); font-size: 16px; font-weight: 500; line-height: 1.4;
}
@media screen and (max-width: 767px) { .cart-ship-note { font-size: 15px; } }

/* ---- Product heading (AdsBranded POD order, 2026-10-16) ------------------
   Eyebrow (the same on every POD checkout) -> h1 -> stars and reviews -> one sentence. The eyebrow is red: each
   brand sets its own red in --pod--color--eyebrow (Tez, 2026-10-16). */
.heading-box .pod-eyebrow { margin: 0 0 6px; color: var(--pod--color--eyebrow, #c62828); font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.heading-box h1 { margin-bottom: 8px; }
.heading-box .rating-row { margin-bottom: 4px; }
/* The one sentence: 13px, regular weight (Tez, 2026-10-16), close under the stars. */
.heading-box .pod-sentence { margin: 2px 0 0; font-size: 13px; font-weight: 400; line-height: 1.5; }
@media screen and (max-width: 767px) {
  .heading-box .pod-eyebrow { font-size: 14px; }
}
/* The mobile heading is centred; keep the stars on the same axis when the row wraps. */
.show-tablet .heading-box .rating-row { justify-content: center; }

/* ---- Order summary typography (AdsBranded POD, Tez 2026-10-16) ------------------
   Line: "1x" bold, product name regular, price paid only (no struck original price in the markup).
   "Shipping and tax..." 12px. "Today you saved" 16px bold. "Discount:" and "Grand Total:" 16px regular, their amounts
   16px bold, the discount amount always red. The Grand Total sits right under the discount row, its label starting
   under "Discount:" (Tez, 2026-10-16). */
.summary-wrapper .cart-item__title { font-weight: 400; }
.summary-wrapper .cart-item__qty { font-weight: 700; }
/* Centred between the promo row and its rule: the summary's 16px flex gap above, 16px padding below (Tez, 2026-10-16). */
.summary-wrapper .cart-ship-note { margin: 0; padding-bottom: 16px; font-size: 12px; font-weight: 400; letter-spacing: -0.5px; }
.summary-wrapper .order-totals__line { align-items: center; }
.summary-wrapper .order-totals__label--saved { font-size: 16px; font-weight: 700; }
.summary-wrapper .accordion__right .order-totals__label,
.summary-wrapper .accordion__right .order-totals__value { font-size: 16px; font-weight: 400; }
.summary-wrapper .accordion__right .order-totals__value,
.summary-wrapper .order-totals__value--total { font-weight: 700; }
.summary-wrapper .order-totals__value.cc-disc { color: #e44613; }
/* "Grand Total:" starts under "Discount:" and both amounts share the right edge (Tez, 2026-10-16): the totals block is
   a 3-column grid (label | Discount: / Grand Total: | amount) and the row wrappers step aside with display: contents.
   The discount row only joins the grid while the SDK says there are discounts (next-has-discounts); otherwise
   next-core's display: none keeps it out. */
.summary-wrapper .order-totals { display: grid; grid-template-columns: 1fr auto auto; column-gap: 6px; row-gap: 6px; align-items: center; }
.summary-wrapper .order-totals > .cart-ship-note { grid-column: 1 / -1; margin-bottom: 6px; }
.summary-wrapper .order-totals .cc-charged-in { grid-column: 1 / -1; }
.summary-wrapper.next-has-discounts .os-cart-summary-row--discount { display: contents; }
.summary-wrapper .os-cart-summary-row--discount .order-totals__line,
.summary-wrapper .accordion__right,
.summary-wrapper .order-totals__section.cc-total,
.summary-wrapper .order-totals__line--total { display: contents; }
.summary-wrapper .order-totals__label-group { grid-column: 1; }
.summary-wrapper .accordion__right .order-totals__label,
.summary-wrapper .order-totals__label--total { grid-column: 2; }
.summary-wrapper .accordion__right .order-totals__value,
.summary-wrapper .order-totals__value-group { grid-column: 3; justify-self: end; }
.summary-wrapper .order-totals__line.order-totals__line--total,
.summary-wrapper .order-totals__label--total { font-size: 16px; font-weight: 400; }
.summary-wrapper .order-totals__value--total { font-size: 16px; }

/* Complete Purchase label: 18px (Tez, 2026-10-16). */
.submit-button .submit-button__main-text { font-size: 18px; }