/* Brand faces, served from this repo (assets/fonts/). Not Google Fonts. */
@font-face{font-family:'Untitled Sans';src:url('../fonts/untitled-sans-web-light.woff2') format('woff2'),url('../fonts/untitled-sans-web-light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Untitled Sans';src:url('../fonts/untitled-sans-web-regular.woff2') format('woff2'),url('../fonts/untitled-sans-web-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Untitled Sans';src:url('../fonts/untitled-sans-web-medium.woff2') format('woff2'),url('../fonts/untitled-sans-web-medium.woff') format('woff');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'GT Super Display';src:url('../fonts/GT-Super-Display-Regular.woff2') format('woff2'),url('../fonts/GT-Super-Display-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}

/* DOUXDS brand skin for the Campaign Cart templates.
   Values are documented in ai-workspace/brands/douxds/identity/web-tokens.md
   and were read off the brand's own funnel CSS, not chosen here. */

:root {
  /* --- brand palette --- */
  --douxds--forest:       #062B14;
  --douxds--forest-press: #041B0D;
  --douxds--moss:         #3F6E66;
  --douxds--cream:        #F2F6EA;
  --douxds--sage:         #C7CFAD;
  --douxds--sage-press:   #B6BF9A;
  --douxds--gold:         #E8AC21;
  --douxds--gold-light:   #FCDC6D;
  --douxds--gold-grad:    linear-gradient(90deg, #E8AC21 30.49%, #FCDC6D 77.05%);
  --douxds--slate:        #646C6A;
  --douxds--amber:        #FFA300;

  /* --- map onto the template's tokens --- */
  --brand--color--primary:              var(--douxds--forest);
  --brand--color--primary-dark:         var(--douxds--forest-press);
  --brand--color--primary-light:        #DCE4D2;
  --brand--color--primary-lighter:      #F7F9F2;
  --brand--color--primary-foreground:   var(--douxds--cream);
  --brand--color--cta-primary:          var(--douxds--sage);
  --brand--color--accent:               var(--douxds--gold);
  --brand--color--accent-foreground:    var(--douxds--forest);
  --brand--color--foreground:           var(--douxds--forest);
  --brand--color--surface:              #F7F9F2;
  --brand--color--complementary-1:      #FBFCF7;
  --brand--color--border:               #D6DCCB;
  --brand--color--secondary:            var(--douxds--slate);
  --brand--color--secondary-light:      #7C8482;
  --brand--color--tertiary:             var(--douxds--slate);
  --brand--color--tertiary-light:       #9AA19F;
  --brand--color--text-primary:         var(--douxds--forest);
  --brand--color--text-secondary:       var(--douxds--slate);
  --brand--color--text-muted:           #8E9691;
  --brand--color--rating-star:          var(--douxds--amber);
  --brand--color--pill-primary:         var(--douxds--forest);
  --brand--color--pill-primary-surface: #DCE4D2;
  --brand--color--pill-secondary:       #8A6A12;
  --brand--color--pill-secondary-surface: #F6E9C4;

  /* the brand sets type in Untitled Sans, served from this repo */
  --font-family--primary: "Untitled Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- brand shape: buttons are square and carry a hairline --- */
.button,
button.button,
a.button,
[data-next-action] {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
}

/* primary call to action: sage ground, forest type, black hairline */
.button:not(.button--secondary):not(.button--decline):not([disabled]),
[data-next-action="add-to-cart"],
[data-next-upsell-action="add"] {
  background: var(--douxds--sage);
  color: var(--douxds--forest);
  border: 1px solid #000;
}
.button:not(.button--secondary):not(.button--decline):not([disabled]):hover,
[data-next-action="add-to-cart"]:hover,
[data-next-upsell-action="add"]:hover {
  background: var(--douxds--sage-press);
  color: var(--douxds--forest);
}

/* the gold highlight is a gradient, never a flat fill */
.os-card__title-badge,
.pb--bestseller,
[data-next-bundle-display="hasDiscount"] .os-card__title-badge {
  background: var(--douxds--gold-grad);
  color: var(--douxds--forest);
  border-radius: 5px;
  font-weight: 700;
}

/* the selected bundle card reads in brand green, not template blue */
.os-card.is-selected,
.os-card[data-next-selected="true"],
[data-next-bundle-card].is-selected {
  border-color: var(--douxds--forest);
  box-shadow: 0 0 0 2px var(--douxds--forest);
}

/* header / footer bands take the brand ground */
.checkout-header,
.upsell-header-bar,
.receipt-header {
  background: var(--douxds--forest);
  color: var(--douxds--cream);
}
.checkout-header a,
.upsell-header-bar a,
.checkout-header .text-sm,
.upsell-header-bar .text-sm { color: var(--douxds--cream); }

/* the offer banner on upsell pages sits ON the forest ground, so its type is cream */
.upsell-header { background: var(--douxds--forest); }
.upsell-header__title { color: var(--douxds--cream); }
.upsell-header__offer { color: var(--douxds--cream); font-weight: 700; }
.upsell-header__suboffer { color: var(--douxds--cream); opacity: .92; }
/* the price inside the offer line takes the gold */
.upsell-header__offer [data-next-display*="price"],
.upsell-header__offer strong { color: var(--douxds--gold-light); }

/* trust line and guarantee sit in brand green, not grey-blue */
.os-guarantee, .checkout-trust, .upsell-ships-info__text { color: var(--douxds--slate); }

/* set the brand face across the checkout templates */
body, .checkout__form-container, .os-card, .button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.display-lg, .display-md, .display-sm,
.heading, .text-size-regular, .os-card__title, .upsell-header__title, .upsell-header__offer,
[class*="text-size-"], [class*="display-"] {
  font-family: "Untitled Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- the order button. The template ships it white-on-blue; on the brand's
       sage ground white text is unreadable, so force forest type. --- */
.submit-button,
button.submit-button,
[data-action="submit"] {
  background: var(--douxds--sage) !important;
  color: var(--douxds--forest) !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
}
.submit-button:hover,
button.submit-button:hover,
[data-action="submit"]:hover {
  background: var(--douxds--sage-press) !important;
  color: var(--douxds--forest) !important;
}
.submit-button *, [data-action="submit"] * { color: inherit !important; }

/* the upsell accept buttons take the same treatment */
[data-next-upsell-action="add"],
a.button[data-next-upsell-action="add"] {
  background: var(--douxds--sage) !important;
  color: var(--douxds--forest) !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
}
[data-next-upsell-action="add"] * { color: inherit !important; }

/* --- order summary: the template draws compare prices with a red diagonal
       slash, which reads as an error. Quiet line-through instead. --- */
.diagonal-strike,
.line-compare,
.cart-price.diagonal-strike {
  background-image: none !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px;
  color: var(--douxds--slate) !important;
  opacity: .65;
}
/* give the summary room to breathe */
.cart-item__wrapper { padding-block: 10px; }
.cart-item__title { line-height: 1.35; }
.cart-item__pricing { text-align: right; display: grid; gap: 2px; align-content: start; }
.checkout__line-item__final-price { font-weight: 700; color: var(--douxds--forest); }
.order-totals__line { padding-block: 6px; }

/* --- Gallery thumbnails ------------------------------------------------
   The template greys out every thumbnail except the active one. On this
   product the gold and emerald set IS the appeal, so show them in colour
   and mark the active one with the brand green instead. --- */
[data-component="swiper"] [swiper="slider-thumbs"] .swiper-slide {
  filter: none !important;
  opacity: .62;
  transition: opacity .25s ease, box-shadow .25s ease;
}
[data-component="swiper"] [swiper="slider-thumbs"] .swiper-slide:hover { opacity: .85; }
[data-component="swiper"] [swiper="slider-thumbs"] .swiper-slide.swiper-slide-thumb-active {
  filter: none !important;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--douxds--forest);
}

/* --- Page headers ------------------------------------------------------
   Checkout and every offer page wear the brand ground, with the white
   wordmark and white supporting text on it. --- */
.checkout-header,
.upsell-header-bar,
.receipt-header,
.upsell-header,
.header-bar {
  background: var(--douxds--forest) !important;
}
/* the receipt's brand block is an inline logo holder, not a band: no fill, dark mark */
.checkout__header-brand { background: transparent !important; padding: 4px 0 2px; }

.checkout-header *,
.upsell-header-bar *,
.receipt-header *,
.header-bar * {
  color: var(--douxds--cream) !important;
  border-color: rgba(242,246,234,.28) !important;
}
.checkout-header a,
.upsell-header-bar a,
.receipt-header a,
.header-bar a { color: var(--douxds--cream) !important; text-decoration-color: rgba(242,246,234,.5); }
/* the wordmark ships black; invert it on the dark ground */
/* invert the wordmark ONLY where it sits on the forest ground */
.checkout-header img.brand-logo,
.upsell-header-bar img.brand-logo,
.receipt-header img.brand-logo,
.header-bar img.brand-logo {
  filter: brightness(0) invert(1);
}

/* pills and chips: cream type on the brand ground, never dark-on-dark */
.pill, .tag-pill, .chip-pill, [class*="pill-"] {
  color: var(--douxds--cream) !important;
  border-color: rgba(242,246,234,.35) !important;
}


/* --- Subscription fine print: one quiet line under the accept button --- */
.subscription-fineprint {
  max-width: 34rem;
  margin: 9px auto 0;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--douxds--slate);
  opacity: .92;
}

/* --- Decline is a button, not a link --- */
.button--decline,
a.button--decline {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: 12px auto 0;
  padding: 13px 18px;
  background: transparent;
  color: var(--douxds--slate) !important;
  border: 1px solid var(--douxds--slate);
  border-radius: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
.button--decline:hover, a.button--decline:hover {
  background: rgba(100,108,106,.09);
  color: var(--douxds--forest) !important;
  border-color: var(--douxds--forest);
}
.button--decline * { color: inherit !important; }

/* --- Bundle cards: five numbers and three labels was too much on a phone --- */
.os-card__pricing { display: grid; gap: 1px; justify-items: end; }
.os-card__price-container { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; }
.os-card__price.os--compare { font-size: .82em; opacity: .55; }
.os-card__price.os--current { font-weight: 700; }
/* total on one line: label, struck, current */
.os-card__total-container { display: flex; align-items: baseline; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
.os-card__total-label { font-size: .8em; opacity: .62; }
.os-card__total-compare { font-size: .8em; opacity: .5; }
.os-card__total-current { font-size: .92em; font-weight: 600; }
/* the saving badge carries the message; the shipping line goes quiet */
.os-card__subtitle-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-card__subtitle-text { font-size: 12.5px; opacity: .72; }
.os-card__title { line-height: 1.25; }

@media (max-width: 600px) {
  .os-card__content { gap: 10px; }
  .os-card__title { font-size: 15.5px; }
  .os-card__price.os--current { font-size: 17px; }
  .os-card__total-container { font-size: 13px; }
  .os-card__image-slot { flex: 0 0 54px; }
  .os-card__label-2 { font-size: 10.5px; padding: 3px 7px; }
}

/* --- Tier badges sat half outside the card and clipped their own text --- */
.os-card { position: relative; overflow: visible; }
.os-card__label-slot { pointer-events: none; }
.os-card__label-2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 4px 10px 3px;
  border-radius: 3px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .03em;
}
/* the two states read as a pair: quiet for the default, gold for the deal */
.os-card__label--pill-primary { background: var(--douxds--sage); color: var(--douxds--forest); }
.os-card__label--pill-secondary { background: var(--douxds--gold-grad); color: var(--douxds--forest); }
.os-card__label-2 .card-icons { flex: 0 0 auto; width: 12px; height: 12px; }
.os-card__label-2 .card-icons svg path { fill: currentColor; }

/* the label's inner text carries the template's white; force it to inherit */
.os-card__label-2 .os-card__label-text-2,
.os-card__label-2 > div { color: inherit !important; }
.os-card__label--pill-primary,
.os-card__label--pill-primary .os-card__label-text-2 { color: var(--douxds--forest) !important; }
.os-card__label--pill-secondary,
.os-card__label--pill-secondary .os-card__label-text-2 { color: var(--douxds--forest) !important; }

.cc-decline-wrapper { background: transparent !important; padding: 0 16px 22px; }
.button--decline .cc-decline-icon, .button--decline svg { opacity: .6; }

/* --- Upsell tier cards -------------------------------------------------
   These tiers are separate packages, so the SDK has no compare price to
   work from: it renders the same figure twice and a "0% off" badge. Hide
   both; the tier's own label and hint carry the value message. --- */
.cc-upsell-bundle-tier-card [data-next-bundle-display="originalPrice"],
.cc-upsell-bundle-tier-card [data-next-bundle-display="discountPercentage"],
[data-next-bundle-card] [data-next-bundle-display="originalPrice"],
[data-next-bundle-card] [data-next-bundle-display="discountPercentage"] {
  display: none !important;
}
.cc-upsell-bundle-tier-card__label { font-weight: 700; color: var(--douxds--forest); }
.cc-upsell-bundle-tier-card__hint  { font-size: 13px; color: var(--douxds--slate); }

/* ======================================================================
   Offer page layout — the template stacked four benefits into narrow
   columns that broke one or two words per line, and printed a price
   panel that struck through the number it was showing.
   ====================================================================== */

/* Benefits: a real list. One tick per line, full measure, never columns. */
.hero_bullet-features-box-inner {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 9px !important;
  width: 100%;
}
.hero_bullet-features-box-inner > .w-embed,
.hero_bullet-features-box-inner > svg,
.hero_bullet-features-box-inner > .bullet-features-icon { display: none; }
.bullet-features-text-box {
  position: relative;
  padding-left: 26px;
  max-width: 46rem;
}
.bullet-features-text-box::before {
  content: "";
  position: absolute; left: 2px; top: .42em;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--douxds--forest);
  background:
    linear-gradient(45deg, transparent 46%, var(--douxds--forest) 46%, var(--douxds--forest) 60%, transparent 60%) no-repeat 3px 5px / 5px 5px,
    linear-gradient(-45deg, transparent 46%, var(--douxds--forest) 46%, var(--douxds--forest) 60%, transparent 60%) no-repeat 5px 3px / 7px 7px;
}
.bullet-features-text-box > div {
  font-size: 15px !important;
  line-height: 1.4;
  font-weight: 500;
}
@media (min-width: 760px) {
  .hero_bullet-features-box-inner { grid-template-columns: 1fr 1fr; gap: 10px 22px !important; }
}

/* The price panel, rebuilt */
.du-price {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: var(--douxds--cream);
  border: 1px solid var(--douxds--sage);
  border-radius: 3px;
  text-align: center;
}
.du-price__row { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.du-price__label { font-size: 14px; color: var(--douxds--slate); }
.du-price__value { font: 700 34px/1 "Untitled Sans", Arial, sans-serif; color: var(--douxds--forest); }
.du-tier__save {
  display: inline-block; margin-top: 6px; padding: 3px 9px 2px;
  background: var(--douxds--gold-grad); color: var(--douxds--forest);
  border-radius: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
.du-price__ship { margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--douxds--slate); }

/* Tier cards: give the choice some hierarchy */
.cc-upsell-bundle-tier-card {
  padding: 13px 15px !important;
  border: 1px solid var(--rule, #D6DCCB) !important;
  border-radius: 3px;
  transition: border-color .15s ease, background .15s ease;
}
.cc-upsell-bundle-tier-card.next-selected,
[data-next-selected="true"].cc-upsell-bundle-tier-card {
  border-color: var(--douxds--forest) !important;
  border-width: 2px !important;
  background: var(--douxds--cream);
}
.cc-upsell-bundle-tier-card__label { font-size: 16px; }
.cc-upsell-bundle-tier-card__hint { margin-top: 2px; }

/* Payment badges: eight fixed-width icons in a nowrap flex row need 424px and
   get 366 on a phone, so the row hung off both edges and the page scrolled
   sideways. Wrap, and let the icons shrink a little on the narrowest screens. */
.du-payment-row { row-gap: 6px; }
@media (max-width: 420px) {
  .du-payment-row svg { width: 34px; height: 22px; }
}

/* next-core paints .checkout-header__inner white under 991px only — which is
   why the checkout header looked right on desktop and showed a white slab
   with invisible cream text on a phone. The band is the brand ground at every
   width, so the inner wrapper never carries a fill of its own. */
.checkout-header .checkout-header__inner,
.checkout-header .checkout-header__inner--center,
.upsell-header-bar .checkout-header__inner,
.receipt-header .checkout-header__inner {
  background-color: transparent !important;
}