/* Extended Warranty Clickbump Styles */
.checkout-bumps {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
  margin-bottom: 1rem;
}

.upsell-limos {
  border-radius: var(--radius--cards, 8px);
  border: 1px solid #bbb;
  position: relative;
  overflow: hidden;
}

.upsell__header-left {
  background-color: var(--brand--color--surface, #fafcff);
  cursor: pointer;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .75rem;
  display: flex;
}

.upsell__header-left.next-active {
  background-color: var(--brand--color--primary-light, #e0ebff);
}

.upsell__header-content {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  align-items: center;
  display: flex;
  position: relative;
}

.upsell-checkbox {
  background-color: #fff;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

.upsell-checkbox.cc-limos {
  width: 1.625rem;
  height: 1.625rem;
}

.checkbox__icon {
  color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: none;
}

.upsell__title {
  font-weight: 700;
}

.upsell__title.cc-limos {
  font-size: 1.125rem;
}

.upsell__body {
  padding: 1rem;
}

.upsell__body.cc-limos {
  background-color: #fff;
}

.upsell__content-limos {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.upsell-content__wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  text-align: left;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}

.upsell-content__price {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  align-items: center;
  font-size: 1.375rem;
  font-weight: 700;
  display: flex;
}

.upsell-content__price-reg {
  font-weight: 400;
  text-decoration: line-through;
  color: #888;
}

.upsell-content__price-sale {
  color: #000;
}

.upsell__image {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  object-fit: contain;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.upsell__image.cc-bump-limos {
  width: 135px;
  min-width: 135px;
  max-width: 135px;
  height: 135px;
  min-height: 135px;
  max-height: 135px;
}

/* List styles for warranty features */
.list-container.cc-2xs {
  font-size: 0.875rem;
}

.list.w-list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.list_icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #0b975f;
}

.list_icon.cc-custom {
  color: #0b975f;
}

/* Responsive styles */
@media screen and (max-width: 767px) {
  .upsell-content__price {
    font-size: 1.25rem;
  }
  
  .upsell__image.cc-bump-limos {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
  }
  
  .upsell-limos {
    border-radius: .25rem;
  }
}

/* --- Page-wide background: white body + warm-blush nav, matches PDP palette.
       PDP vars: --paper=#fbf3f1, --paper-2=#f3e0dd (nav), --wire-3=#f2e2e7 (nav border),
       --ink=#2E1F25 (text). Body stays #fff to mirror the PDP's body bg. --- */
html,
body,
.page-wrapper,
.main-wrapper {
  background-color: #fff;
}

/* --- checkout header / progress --- */
.checkout__header-top {
  background-color: #f3e0dd;         /* PDP --paper-2 */
  border-bottom: 1px solid #f2e2e7;  /* PDP --wire-3 */
  color: #2E1F25;                    /* PDP --ink */
  height: 67px;
  min-height: 67px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}

.checkout__header-top {
  flex-direction: row !important;
  justify-content: center;
}

.checkout__header-top > .container,
.checkout__header-top .container.cc-medium {
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.checkout__header-top .checkout__header-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  /* next-staging-core.css line 18820 forces white background at mobile widths;
     override so the light-blue page color shows through edge-to-edge */
  background-color: transparent !important;
}

.brand-wordmark {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #2E1F25;   /* PDP --ink */
  display: flex;
  align-items: center;
}

.checkout__header-top .mg-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #2E1F25;   /* PDP --ink */
}

.checkout__header-top .questions-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  padding-left: 1rem;
  border-left: 1px solid #dac3cb;   /* PDP --wire, warmer divider */
  color: #2E1F25;                   /* PDP --ink */
}

.checkout__header-top .link-tel {
  color: inherit;
  text-decoration: underline;
}

.encrypted-banner {
  background-color: #000 !important;
  color: #fff !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center;
  overflow: hidden;
}

.encrypted-banner > .container,
.encrypted-banner .container.cc-small {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.encrypted-banner .scarcity-banner__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0;
  margin: 0;
  height: 100%;
}

.encrypted-banner .security-banner__text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}

.encrypted-banner .security-banner__icon {
  color: #fff;
}

/* MBG badge (red circular) */
.mg-image.mbg-badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* Progress section — 3-step horizontal flow: Checkout → Bonus Deals → Receipt */
.progress-section {
  background-color: #ffffff;
  padding: 1rem 0;
}

.progress-section .progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}

.progress-section .step {
  flex: 0 0 auto;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
}

.progress-section .step.active {
  font-weight: 700;
  color: #0f172a;
}

.progress-section .step-arrow {
  flex: 1 1 auto;
  height: 12px;
  min-width: 60px;
  max-width: 160px;
  color: #cbd5e1;
  display: block;
}

.progress-section .step-arrow--active {
  color: #0f172a;
}

@media (max-width: 767px) {
  .brand-wordmark {
    font-size: 1.25rem;
  }
  .mg-image.mbg-badge {
    width: 40px;
    height: 40px;
  }
  .progress-section {
    padding: 0.875rem 0;
  }
  .progress-section .progress-container {
    max-width: 100%;
    padding: 0 12px;
    gap: 0.625rem;
  }
  .progress-section .step {
    font-size: 0.8125rem;
  }
  .progress-section .step-arrow {
    min-width: 24px;
    max-width: 60px;
  }
  .encrypted-banner .security-banner__text {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   Checkout layout: showcase (left) | form + cart stacked (right)
   ========================================================================== */
.checkout-wrapper.new-size {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.checkout-wrapper.new-size > .checkout-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.checkout-wrapper.new-size > .checkout-col--left {
  flex: 0 0 420px;
  width: 420px;
}

.checkout-wrapper.new-size > .checkout-col--right {
  flex: 1 1 auto;
  min-width: 0;
}

.checkout-showcase-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.checkout-reviews-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.checkout-wrapper.new-size .checkout-left {
  width: 100%;
  min-width: 0;
}

.checkout-wrapper.new-size .checkout-right {
  width: 100%;
  flex: none;
  min-width: 0;
}

.checkout-wrapper.new-size .checkout-right__content {
  position: static;
  top: auto;
}

@media (max-width: 991px) {
  .checkout-wrapper.new-size {
    flex-direction: column;
    align-items: stretch;
    /* Tight stack on mobile. The first gap (hero → image) is what the
       user was calling out — keep it small so the image sits right under
       the five-star rating row. */
    gap: 0.5rem;
  }
  /* Flatten columns so children become direct flex items of the wrapper,
     letting `order` reposition them: hero → showcase → form → reviews → cart */
  .checkout-wrapper.new-size > .checkout-col {
    display: contents;
  }
  .checkout-wrapper.new-size .product-hero          { order: 1; width: 100%; }
  .checkout-wrapper.new-size .checkout-showcase-col { order: 2; width: 100%; flex: 0 0 auto; }
  .checkout-wrapper.new-size .checkout-left         { order: 3; width: 100%; flex: 0 0 auto; }
  .checkout-wrapper.new-size .checkout-reviews-col  { order: 4; width: 100%; flex: 0 0 auto; }
  .checkout-wrapper.new-size .checkout-right        { order: 5; width: 100%; flex: 0 0 auto; }
}

/* --- Tighter overall vertical rhythm ------------------------------------
   Override the 29next base spacing on the form sections and the outer
   section-checkout wrapper so the whole page reads slightly tighter.
   Originals (from next-staging-core.css):
     .section-checkout  padding: 2rem 0 4rem
     .form-sections     grid-row-gap: 2rem (desktop), 1rem (mobile)
     .form-section      grid-row-gap: 1rem
------------------------------------------------------------------------ */
.section-checkout {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

.section-checkout .form-sections {
  grid-row-gap: 1.25rem;
}

.section-checkout .form-section {
  grid-row-gap: 0.75rem;
}

@media (max-width: 767px) {
  .section-checkout {
    padding-top: 0.75rem;
    padding-bottom: 2rem;
  }
  .section-checkout .form-sections {
    grid-row-gap: 0.875rem;
  }
  .section-checkout .form-section {
    grid-row-gap: 0.625rem;
  }
}

/* --- Product showcase card --- */
.product-showcase-card {
  background-color: #fafcff;
  border-radius: 24px;
  padding: 1.25rem;
  border: 1px solid #e3ecf3;
}

/* Full-width drug-facts image override — no container, no borders */
.product-showcase-card.ns-showcase {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  overflow: visible;
}

.product-showcase__image-wrap.ns-showcase__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  padding: 0;
  margin: 0;
  display: block;
}

.ns-showcase__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  object-fit: contain;
}

.product-showcase__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.product-showcase__image-placeholder {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    #f1f5f9,
    #f1f5f9 12px,
    #e8eef4 12px,
    #e8eef4 24px
  );
}

.product-showcase__image-placeholder::after {
  content: "Product Image";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 90 Day guarantee badge (top right) */
.product-badge-guarantee {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: #1a2a6c;
  color: #fff;
  padding: 0.75rem 1rem 0.875rem;
  border-radius: 12px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(26, 42, 108, 0.25);
}

.product-badge-guarantee__num {
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.product-badge-guarantee__unit {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.product-badge-guarantee__sub {
  font-size: 0.625rem;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 0.375rem;
  line-height: 1.2;
}

/* Price drop badge (bottom right) */
.product-badge-pricedrop {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background-color: #0f172a;
  color: #fff;
  padding: 0.75rem 0.875rem;
  border-radius: 6px;
  text-align: center;
  line-height: 1;
  transform: rotate(-6deg);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3);
}

.product-badge-pricedrop__top {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.product-badge-pricedrop__big {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 2px 0;
}

.product-badge-pricedrop__bottom {
  background-color: #facc15;
  color: #0f172a;
  font-weight: 900;
  padding: 0.25rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  line-height: 1.1;
}

.product-badge-pricedrop__num {
  font-size: 1.125rem;
}

.product-badge-pricedrop__pct {
  font-size: 0.75rem;
  vertical-align: super;
}

/* --- Feature icons row --- */
.product-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0 0.25rem;
}

.product-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.product-feature__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #e3ecf3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
}

.product-feature__icon svg {
  width: 18px;
  height: 18px;
}

.product-feature__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

/* --- TrustPilot-style review card --- */
.review-card {
  background-color: #fff;
  border: 1px solid #e3ecf3;
  border-radius: 12px;
  padding: 0.875rem 1.125rem 1rem;
}

.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.trustpilot-stars {
  display: flex;
  gap: 2px;
}

.trustpilot-star {
  width: 22px;
  height: 22px;
  background-color: #00B67A;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.review-card__date {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 400;
  white-space: nowrap;
}

.review-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.review-card__body {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #334155;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.review-card__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #e2e8f0;
  display: block;
}

.review-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-card__author-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: #00B67A;
  font-weight: 600;
  line-height: 1.2;
}

.verified-check {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

@media (max-width: 767px) {
  .product-showcase-card {
    padding: 1rem;
    border-radius: 20px;
  }
  .product-showcase-card.ns-showcase {
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0;
    /* Bleed to viewport edges — escape all parent padding/containers */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
  .product-showcase-card.ns-showcase .ns-showcase__image {
    width: 100vw;
    max-width: 100vw;
  }
  /* Also kill the showcase column's padding/gap so the image sits flush */
  .checkout-wrapper.new-size .checkout-showcase-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .product-badge-guarantee {
    padding: 0.625rem 0.75rem;
  }
  .product-badge-guarantee__num {
    font-size: 1.5rem;
  }
  .product-badge-pricedrop {
    padding: 0.625rem 0.75rem;
  }
  .product-badge-pricedrop__big {
    font-size: 1.25rem;
  }
  .product-features {
    display: none !important;
  }
  .review-card {
    padding: 0.875rem 1rem 1rem;
  }
}

/* ==========================================================================
   Bundle selector cards (Select Your Bundle)
   Note: selectors prefixed with `html` to beat 29next's skeleton-state rule
   `html:not(.next-display-ready) [data-next-await]` which forces transparent
   border-color during SDK load.
   ========================================================================== */
.os-cards__vertical.os--gap-m {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

html .os-card.bundle-card {
  position: relative;
  background-color: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  overflow: visible !important;
  box-shadow: none !important;
}

html .os-card.bundle-card:hover {
  border-color: #cbd5e1 !important;
}

html .os-card.bundle-card.next-selected {
  border: 2px solid #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.os-card.bundle-card .os-card__wrapper {
  padding: 1.125rem 1.25rem;
}

/* Cards that carry a Most Popular / Best Deal badge get extra top padding
   so the badge sits inside the card without colliding with the compare-
   price strike-through in the top-right corner. */
.os-card.bundle-card:has(.bundle-badge) .os-card__wrapper {
  padding-top: 1.75rem;
}

.os-card.bundle-card .os-card__content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.os-card.bundle-card .os-card__image-slot {
  display: none !important;
}

/* Radio button — absolute positioning for the inner dot guarantees perfect centering
   regardless of flex quirks, box-sizing, or border-width math. */
.os-card.bundle-card .bundle-radio {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  box-sizing: border-box;
  padding: 0;
  transition: border-color 0.15s ease;
}

.os-card.bundle-card.next-selected .bundle-radio {
  border-color: #0f172a;
}

.os-card.bundle-card .bundle-radio .radio-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 50%;
  background: #0f172a;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.os-card.bundle-card.next-selected .bundle-radio .radio-inner {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Main (title + subtitle) */
.os-card.bundle-card .os-card__main-slot {
  flex: 1 1 auto;
  min-width: 0;
}

.os-card.bundle-card .os-card__title-wrapper {
  display: block;
  margin-bottom: 0.1875rem;
}

.os-card.bundle-card .os-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  /* Reserve one line of vertical space so the empty title doesn't cause a
     layout shift before the 29next SDK populates package.name. */
  min-height: 1.25em;
}

.os-card.bundle-card .os-card__title-badge {
  display: none !important;
}

.os-card.bundle-card .os-card__subtitle-wrapper {
  display: block;
}

.os-card.bundle-card .os-card__subtitle-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #e11d2e;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* Pricing */
.os-card.bundle-card .os-card__secondary-slot {
  flex: 0 0 auto;
  margin-left: auto;
}

.os-card.bundle-card .os-card__price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.os-card.bundle-card .os-card__price.os--compare {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
  line-height: 1.2;
}

.os-card.bundle-card .os-card__price.os--current {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

/* Badges (top-right label) — sit INSIDE the card, just below the top
   border, not floating on the border line. No white background patch. */
.os-card.bundle-card .os-card__label-slot {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.875rem !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none;
  pointer-events: none;
  background: transparent;
  padding: 0;
  line-height: 1;
  display: inline-flex !important;
  z-index: 2;
}

.bundle-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0;
}

/* Star icon stays orange regardless of the surrounding text color.
   Overrides the SVG's fill="currentColor" presentation attribute. */
.bundle-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: #f97316;
}
.bundle-badge svg path {
  fill: #f97316;
}

.bundle-badge--popular {
  color: #14b8a6; /* teal-500 — green-teal for Most Popular */
}

.bundle-badge--best {
  color: #0891b2; /* cyan-600 — blue-teal for Best Deal */
}

.bundle-badge--full {
  color: #059669; /* emerald-600 — deep green for Full Treatment (3-pack) */
}

@media (max-width: 767px) {
  .os-card.bundle-card .os-card__wrapper {
    padding: 1rem 1rem;
  }
  .os-card.bundle-card:has(.bundle-badge) .os-card__wrapper {
    padding-top: 1.625rem;
  }
  .os-card.bundle-card .os-card__content {
    gap: 0.75rem;
  }
  .os-card.bundle-card .os-card__title {
    font-size: 1rem;
  }
  .os-card.bundle-card .os-card__subtitle-text {
    font-size: 0.8125rem;
  }
  .os-card.bundle-card .os-card__price.os--compare {
    font-size: 0.875rem;
  }
  .os-card.bundle-card .os-card__price.os--current {
    font-size: 1.0625rem;
  }
  .os-card.bundle-card .os-card__label-slot {
    top: 0.4375rem;
    right: 0.75rem;
  }
  .bundle-badge {
    font-size: 0.75rem;
  }
}

/* ============================================================
   Product hero — desktop: top of form column; mobile: above image
   ============================================================ */
.product-hero {
  padding: 0;
  margin: 0;
}

.product-hero__eyebrow {
  color: #e11d2e;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}

.product-hero__title {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.product-hero__rating {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.product-hero__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.product-hero__stars svg {
  width: 20px;
  height: 20px;
}

.product-hero__rating-text {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}

.product-hero__subtitle {
  font-size: 1rem;
  color: #475569;
  margin: 0;
  line-height: 1.4;
}

/* Subtitle relocated beneath the hero image (inside .checkout-showcase-col)
   Negative margin-top pulls it closer to the bottom of the hero image
   so it reads as a caption for the image instead of floating below it. */
.ns-hero-subtitle {
  display: block;
  margin: -0.5rem 0 0;
  text-align: center;
  font-size: 1rem;
  color: #475569;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .product-hero {
    /* Was: padding 0 0 1rem + margin-bottom 1rem = 32px of empty space
       between the rating row and the top of the hero image.
       Collapsed so the image sits right under the five stars (CRO). */
    padding: 0;
    margin-bottom: 0;
    text-align: center;
  }
  .product-hero__eyebrow {
    font-size: 0.8125rem;
    text-align: center;
  }
  .product-hero__title {
    font-size: 1.625rem;
    text-align: center;
  }
  .product-hero__rating {
    justify-content: center;
  }
  .product-hero__stars svg {
    width: 18px;
    height: 18px;
  }
  .product-hero__rating-text {
    font-size: 0.875rem;
  }
  .product-hero__subtitle {
    font-size: 0.9375rem;
    text-align: center;
  }
  /* Keep the relocated subtitle readable inside the edge-to-edge showcase column.
     Negative margin-top hugs the subtitle up against the bottom of the hero image. */
  .ns-hero-subtitle {
    font-size: 0.9375rem;
    padding: 0 1rem;
    margin-top: -0.375rem;
    margin-bottom: 0.25rem;
  }
}

/* ============================================================
   Shipping / Contact — unified redesign
   ============================================================ */
.ns-ship-section {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: block;
}

.ns-ship-header {
  margin-bottom: 0.875rem;
}

.ns-ship-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.ns-ship-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

/* Tighter gaps than the base .form-grid */
.ns-ship-form .form-grid,
.ns-ship-form .ns-ship-grid {
  gap: 0.75rem;
}

.ns-ship-form .form-grid__row {
  gap: 0.75rem;
  flex-direction: row;
  flex-flow: row nowrap;
  flex-wrap: nowrap;
}

.ns-ship-form .form-group {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.ns-field {
  position: relative;
  width: 100%;
}

/* Hide the legacy floating labels inside our new fields */
.ns-ship-form .label-checkout,
.ns-field > .label-checkout {
  display: none;
}

/* Base input styling */
.ns-ship-form .input-flds.ns-input,
.input-flds.ns-input {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  height: 3.25rem;
  padding: 0 1rem;
  font-size: 1rem;
  color: #0f172a;
  font-weight: 500;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  width: 100%;
  line-height: 1.2;
}

.ns-ship-form .input-flds.ns-input::placeholder,
.input-flds.ns-input::placeholder {
  color: #94a3b8;
  opacity: 1;
  font-weight: 400;
}

.ns-ship-form .input-flds.ns-input:hover,
.input-flds.ns-input:hover {
  border-color: #cbd5e1;
  background-color: #ffffff;
}

.ns-ship-form .input-flds.ns-input:focus,
.input-flds.ns-input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

/* Country field — taller, with always-visible floating label on top */
.ns-field--country .select-form-wrapper {
  position: relative;
  width: 100%;
}

.ns-field--country .input-flds.ns-select,
.ns-field--country .input-flds.select-field {
  height: 3.75rem;
  padding: 1.375rem 2.75rem 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1.2;
}

.ns-field--country .input-flds.ns-select:hover,
.ns-field--country .input-flds.select-field:hover {
  border-color: #cbd5e1;
}

.ns-field--country .input-flds.ns-select:focus,
.ns-field--country .input-flds.select-field:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.ns-field--country .ns-field__label-top {
  position: absolute;
  top: 0.55rem;
  left: 1rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 400;
  color: #64748b;
  pointer-events: none;
  opacity: 1 !important;
  transform: none !important;
  background: transparent;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  line-height: 1;
}

.ns-field--country .caret-down {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none;
  background: transparent;
  pointer-events: none;
  color: #64748b;
}

.ns-field--country .caret-down .select-arrow {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smaller inline state select inside the expanded row */
.ns-field--select .select-form-wrapper {
  position: relative;
  width: 100%;
}

.ns-field--select .input-flds.ns-select,
.ns-field--select .input-flds.select-field {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  height: 3.25rem;
  padding: 0 2.5rem 0 1rem;
  font-size: 1rem;
  color: #0f172a;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
}

.ns-field--select .input-flds.ns-select:focus,
.ns-field--select .input-flds.select-field:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.ns-field--select .caret-down {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none;
  background: transparent;
  pointer-events: none;
  color: #64748b;
}

.ns-field--select .caret-down .select-arrow {
  width: 14px;
  height: 14px;
}

/* Address field with right-aligned search icon */
.ns-field--address {
  position: relative;
}

.ns-field--address .ns-input--with-icon-right {
  padding-right: 2.75rem;
}

.ns-field--address .ns-field__icon--right {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #94a3b8;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ns-field--address .ns-field__icon--right svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hidden marketing checkbox (keeps it checked for 29next submission) */
.ns-hidden-marketing {
  display: none !important;
  visibility: hidden;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  left: -9999px;
}

/* Expanded fields: hidden until address is entered */
.ns-ship-expand {
  display: none;
}

.ns-ship-form--expanded .ns-ship-expand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: ns-ship-expand-in 0.25s ease-out;
}

@keyframes ns-ship-expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Neutralize the base .form-section gap when used inside our new design */
.ns-ship-section.form-section {
  gap: 0;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .ns-ship-section {
    padding: 0;
    border-radius: 0;
  }
  .ns-ship-title {
    font-size: 1.1875rem;
  }
  .ns-ship-subtitle {
    font-size: 0.8125rem;
  }
  .ns-ship-form .input-flds.ns-input,
  .input-flds.ns-input {
    height: 3rem;
    font-size: 0.9375rem;
  }
  .ns-field--country .input-flds.ns-select,
  .ns-field--country .input-flds.select-field {
    height: 3.5rem;
    padding-top: 1.25rem;
    padding-bottom: 0.375rem;
    font-size: 0.9375rem;
  }
  .ns-field--country .ns-field__label-top {
    top: 0.5rem;
    font-size: 0.6875rem;
  }
  .ns-field--select .input-flds.ns-select,
  .ns-field--select .input-flds.select-field {
    height: 3rem;
    font-size: 0.9375rem;
  }
  .ns-ship-form .form-grid__row {
    gap: 0.625rem;
  }
  .ns-ship-form .form-grid,
  .ns-ship-form .ns-ship-grid {
    gap: 0.625rem;
  }
  /* Stack city on its own line, let state+zip share the line below */
  .ns-ship-form .form-grid__row[data-os-component="location"] {
    flex-wrap: wrap;
  }
  .ns-ship-form .form-grid__row[data-os-component="location"] > .form-group:nth-child(1) {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .ns-ship-form .form-grid__row[data-os-component="location"] > .form-group:nth-child(2),
  .ns-ship-form .form-grid__row[data-os-component="location"] > .form-group:nth-child(3) {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* =========================================================
   HERZ P1 Protection Bump — reference-design redesign
   Overrides the legacy .upsell-limos / .upsell__* rules
   ========================================================= */

/* Outer container: give the intro copy spacing from the card */
.checkout-bumps.ns-bump {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* External heading + subheading that sit ABOVE the card */
.ns-bump__intro {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
}

.ns-bump__heading {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

.ns-bump__subheading {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #475569;
  font-weight: 400;
}

.ns-bump__subheading strong {
  color: #0f172a;
  font-weight: 700;
}

/* The card itself — override legacy .upsell-limos */
.ns-bump .upsell-limos.ns-bump__card,
.ns-bump .ns-bump__card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Card head row — override legacy .upsell__header-left.next-active blue bg */
.ns-bump .upsell__header-left.ns-bump__head,
.ns-bump .upsell__header-left.next-active.ns-bump__head {
  background-color: #ffffff !important;
  padding: 1rem 1rem 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}

.ns-bump .ns-bump__head-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
}

/* Chevron arrow */
.ns-bump__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #475569;
  flex: none;
  transition: transform 0.2s ease;
}

.ns-bump .upsell__header-left.next-active .ns-bump__arrow {
  transform: rotate(90deg);
  color: #0f172a;
}

/* Checkbox — keep the 29next component but restyle */
.ns-bump .upsell-checkbox.ns-bump__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background-color: #ffffff;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ns-bump .upsell__header-left.next-active .upsell-checkbox.ns-bump__checkbox {
  background-color: #0f172a;
  border-color: #0f172a;
}

.ns-bump .upsell__header-left.next-active .upsell-checkbox.ns-bump__checkbox .checkbox__icon {
  color: #ffffff;
  width: 0.875rem;
  height: 0.875rem;
}

/* Card title */
.ns-bump .upsell__title.ns-bump__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}

/* Prices — inline next to the title */
.ns-bump__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  flex: none;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1;
}

.ns-bump .ns-bump__price-reg {
  display: inline;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
}

.ns-bump__price-reg-suffix {
  display: inline;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
  margin-right: 0.25rem;
}

.ns-bump .ns-bump__price-sale {
  display: inline;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}

.ns-bump__price-sale-suffix {
  display: inline;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0f172a;
}

/* Card body */
.ns-bump .upsell__body.ns-bump__body {
  background-color: #ffffff;
  padding: 0.875rem 1rem 1rem 1rem;
}

/* Bullet list with round bullets */
.ns-bump__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ns-bump__list-item {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #334155;
  font-weight: 500;
}

.ns-bump__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #475569;
}

/* =========================================================
   90 Day Money-Back Guarantee — centered badge + copy
   ========================================================= */
.guarantee-section.ns-guarantee {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem;
  /* Negative margins pull this section into the flex `gap` of the
     parent `.form-sections` (1.25rem desktop / 0.875rem mobile) so the
     90-day badge hugs the clickbump above and the Payment section below.
     Previous margin was 1rem 0 1.25rem 0 which stacked on top of the
     parent gap for ~56px of vertical air. */
  margin: -0.75rem 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.ns-guarantee__badge.image-10 {
  width: 64px;
  min-width: 64px;
  height: auto;
  margin: 0;
  flex: none;
}

.ns-guarantee__text.text-xs {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #475569;
  flex: 1 1 auto;
}

.ns-guarantee__text.text-xs strong {
  color: #0f172a;
  font-weight: 700;
}

/* Mobile tuning */
@media (max-width: 767px) {
  .ns-bump__heading {
    font-size: 1rem;
  }
  .ns-bump__subheading {
    font-size: 0.875rem;
  }
  .ns-bump .upsell__header-left.ns-bump__head,
  .ns-bump .upsell__header-left.next-active.ns-bump__head {
    padding: 0.875rem 0.875rem 0.75rem 0.875rem;
  }
  .ns-bump .ns-bump__head-row {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .ns-bump .upsell__title.ns-bump__title {
    font-size: 0.9375rem;
    flex: 1 1 auto;
  }
  .ns-bump__price {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .ns-bump .upsell__body.ns-bump__body {
    padding: 0.75rem 0.875rem 0.875rem 0.875rem;
  }
  .ns-bump__list-item {
    font-size: 0.875rem;
  }
  .ns-guarantee__badge.image-10 {
    width: 56px;
    min-width: 56px;
  }
  .ns-guarantee__text.text-xs {
    font-size: 0.75rem;
  }
  .guarantee-section.ns-guarantee {
    /* Mobile `.form-sections` gap is 0.875rem (14px), so -0.5rem collapses
       it to ~6px which is tight without touching adjacent content. */
    margin: -0.5rem 0;
  }
}

/* ==========================================================================
   Payment — Credit Card container background
   Overrides .payment-method.next-selected { background: var(--brand--color--surface) }
   from next-staging-core.css:5474 so the selected credit-card panel reads as
   a warm cream instead of the default near-white.
   ========================================================================== */
.payment-method[data-next-payment-method="credit"],
.payment-method[data-next-payment-method="credit"].next-selected {
  background-color: #eee3d4;
}

/* ==========================================================================
   Your Cart — table-style redesign (mockup match)
   Overrides legacy .order-summary / .cart-item / .order-totals rules
   ========================================================================== */

/* Hide the legacy cart heading + product preview that sat above the table */
.cart-box .cart-heading,
.cart-box [data-os-cart="swap-display"] {
  display: none !important;
}

/* Paint the cart container white. Core sets .cart-box with a border + padding
   but no background, which lets the page bg show through. Explicit white makes
   the interior clean even if the page bg ever shifts. */
.cart-box {
  background-color: #ffffff;
}

/* Un-hide the cart on mobile/tablet (legacy .hide-tablet sets display:none) */
.cart-box.hide-tablet {
  display: block !important;
}

/* Hide the legacy blue-shield "90-Day Money Back Guarantee" block that sat
   below the cart on desktop — we already show the correct red-badge version
   above the Payment section in the left column */
.guarantee-checkout__v2 {
  display: none !important;
}

.order-summary.ns-cart {
  /* Flat / no-container styling — per design request, Cart Total has no outer box */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 1rem 0;
  box-shadow: none;
}

.ns-cart .order-summary__content,
.ns-cart .ns-cart__content {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: block;
}

/* Kill legacy order-summary extras that don't belong in the new design */
.ns-cart .cart-items__scroll-hint,
.ns-cart .os--badge.ns-cart__savings-badge,
.ns-cart .coupon-tags,
.ns-cart .order-totals__label-group .badge,
.ns-cart .accordion__right .info-icons,
.ns-cart .summary-total__coin {
  display: none !important;
}

/* Table wrapper — kill grid/flex from legacy rules */
.ns-cart .cart-items.ns-cart__table,
.ns-cart__table {
  display: block !important;
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  max-height: none;
}

.ns-cart__list {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

/* Generic row — two columns: label | value */
.ns-cart .ns-cart__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid #e2e8f0;
  margin: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.ns-cart .ns-cart__row:last-child {
  border-bottom: 0;
}

.ns-cart .ns-cart__cell {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  margin: 0;
  min-width: 0;
}

.ns-cart .ns-cart__cell--label {
  flex: 1 1 auto;
  text-align: left;
  color: #0f172a;
}

.ns-cart .ns-cart__cell--value {
  flex: 0 0 auto;
  text-align: right;
  color: #0f172a;
  white-space: nowrap;
}

/* Header row — "Item" | "Amount" */
.ns-cart .cart-summary__line.pb--header.ns-cart__row--head {
  display: flex !important;
  padding: 0.75rem 0 0.875rem 0;
  border-bottom: 1px solid #e2e8f0;
  background: transparent !important;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0;
}

.ns-cart .cart-summary__line.pb--header .cart-summary__line-item {
  padding: 0;
  background: transparent;
  border: 0;
  flex: 0 0 auto;
}

.ns-cart .cart-summary__line.pb--header .cart-summary__line-item:first-child {
  flex: 1 1 auto;
  text-align: left;
}

.ns-cart .cart-summary__line.pb--header .cart-summary__line-item:last-child {
  text-align: right;
}

/* Cart-item rows — override legacy flex layout */
.ns-cart .cart-item.ns-cart__row--item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0;
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
}

.ns-cart .cart-item.ns-cart__row--item .cart-item__wrapper,
.ns-cart .cart-item.ns-cart__row--item .cart-item__details,
.ns-cart .cart-item.ns-cart__row--item .cart-item__content,
.ns-cart .cart-item.ns-cart__row--item .cart-item__description,
.ns-cart .cart-item.ns-cart__row--item .cart-item__header,
.ns-cart .cart-item.ns-cart__row--item .cart-item__pricing {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  flex: 0 0 auto;
}

.ns-cart .cart-item.ns-cart__row--item .cart-item__wrapper.ns-cart__cell--label {
  flex: 1 1 auto;
  min-width: 0;
}

.ns-cart .cart-item.ns-cart__row--item .cart-item__pricing.ns-cart__cell--value {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  display: inline-block;
}

.ns-cart .ns-cart__item-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.ns-cart .ns-cart__item-compare {
  display: none !important;
}

.ns-cart .ns-cart__item-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}

.ns-cart .ns-cart__each {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
  margin-left: 0.125rem;
}

/* Totals section */
.ns-cart .order-totals.ns-cart__totals {
  background: transparent;
  padding: 0;
  margin: 0;
  display: block;
  border: 0;
}

/* Each totals row (Shipping, Today you saved, Grand Total) */
.ns-cart .order-totals__section.ns-cart__row--total {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  margin: 0;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
}

.ns-cart .ns-cart__row--total .ns-cart__total-label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #0f172a;
  flex: 1 1 auto;
  text-align: left;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

.ns-cart .ns-cart__row--total .ns-cart__total-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #0f172a;
  flex: 0 0 auto;
  text-align: right;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  white-space: nowrap;
}

/* "Today you saved" row — left label bold, Discount: label dark, amount orange */
.ns-cart .ns-cart__row--savings .ns-cart__total-label {
  font-weight: 700;
}

.ns-cart .ns-cart__discount-label {
  font-weight: 400;
  color: #0f172a;
}

.ns-cart .ns-cart__discount-amount {
  font-weight: 700;
  color: #ef4444;
}

/* Grand Total row — no left label, value right-aligned with "Grand Total:" prefix */
.ns-cart .order-totals__section.cc-total.ns-cart__row--grand {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem 0 0.25rem 0;
  margin: 0;
  background: transparent !important;
  border: 0;
  border-bottom: 0;
}

.ns-cart .ns-cart__row--grand .ns-cart__cell--label {
  display: none;
}

.ns-cart .ns-cart__grand-total {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  flex: 0 0 auto;
  text-align: right;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  white-space: nowrap;
}

.ns-cart .ns-cart__grand-total-label {
  font-weight: 700;
  color: #0f172a;
}

.ns-cart .ns-cart__grand-total-amount {
  font-weight: 700;
  color: #0f172a;
}

/* Mobile tuning */
@media (max-width: 767px) {
  .ns-cart .order-summary__content,
  .ns-cart .ns-cart__content {
    padding: 0;
  }
  .ns-cart .cart-summary__line.pb--header.ns-cart__row--head {
    font-size: 0.875rem;
  }
  .ns-cart .ns-cart__item-name,
  .ns-cart .ns-cart__item-price,
  .ns-cart .ns-cart__row--total .ns-cart__total-label,
  .ns-cart .ns-cart__row--total .ns-cart__total-value {
    font-size: 0.875rem;
  }
  .ns-cart .ns-cart__each {
    font-size: 0.75rem;
  }
  .ns-cart .ns-cart__grand-total {
    font-size: 1rem;
  }
  .ns-cart .ns-cart__row,
  .ns-cart .cart-item.ns-cart__row--item,
  .ns-cart .order-totals__section.ns-cart__row--total {
    padding: 0.75rem 0;
  }

  /* Express Checkout — 3 buttons on a single row on mobile */
  .express-checkout__buttons {
    flex-flow: row nowrap !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    grid-column-gap: 0.5rem !important;
    grid-row-gap: 0.5rem !important;
    align-items: stretch;
  }
  .express-checkout__buttons .payment-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0.5rem;
  }
  .express-checkout__buttons .payment-btn .paypal-btn,
  .express-checkout__buttons .payment-btn .payment-btn__logo {
    max-width: 100%;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .express-checkout__buttons .payment-btn .paypal-btn svg,
  .express-checkout__buttons .payment-btn .payment-btn__logo svg {
    max-width: 100%;
    height: 100%;
    width: auto;
  }
}

/* ============================================================
   Promo Code Bar — black left pill + green right timer
   ============================================================ */
.scarcity-banner.ns-promo-bar {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
  border: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  margin: 0 0 1rem;
}

/* LEFT — black pill with white code + PROMO APPLIED */
.ns-promo-bar .scarcity-banner__left.ns-promo-bar__left {
  background-color: #000 !important;
  color: #ffffff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  gap: 0.1875rem;
  flex: 0 0 auto;
  min-width: 150px;
  line-height: 1.1;
}

.ns-promo-bar .scarcity-banner__left .promo-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.ns-promo-bar .ns-promo-bar__check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex: 0 0 auto;
}

.ns-promo-bar .ns-promo-bar__check svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ns-promo-bar .scarcity_title.ns-promo-bar__code {
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1;
}

.ns-promo-bar .scarcity_subtitle.ns-promo-bar__applied {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1;
  margin: 0;
}

/* RIGHT — light green bar with timer message */
.ns-promo-bar .scarcity-banner__right.ns-promo-bar__right {
  background-color: #9BEB8F !important;
  color: #0f172a !important;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  min-width: 0;
}

.ns-promo-bar .scarcity-sale.ns-promo-bar__sale {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #0f172a;
  line-height: 1.3;
  text-align: center;
}

.ns-promo-bar .scarcity-counter.ns-promo-bar__counter {
  color: #ef4444 !important;
  font-weight: 800;
}

@media (max-width: 767px) {
  .scarcity-banner.ns-promo-bar {
    min-height: 58px;
    margin-bottom: 0.75rem;
  }
  .ns-promo-bar .scarcity-banner__left.ns-promo-bar__left {
    min-width: 118px;
    padding: 0.5rem 0.75rem;
    gap: 0.125rem;
  }
  .ns-promo-bar .scarcity_title.ns-promo-bar__code {
    font-size: 0.875rem;
  }
  .ns-promo-bar .scarcity_subtitle.ns-promo-bar__applied {
    font-size: 0.625rem;
  }
  .ns-promo-bar .ns-promo-bar__check {
    width: 15px;
    height: 15px;
  }
  .ns-promo-bar .scarcity-banner__right.ns-promo-bar__right {
    padding: 0.5rem 0.75rem;
  }
  .ns-promo-bar .scarcity-sale.ns-promo-bar__sale {
    font-size: 0.8125rem;
  }
}

/* ============================================================
   Express Checkout — fieldset-style border with floating title
   Uses the page background (#fff) as the container fill and the
   same color for the floating title's background so it "breaks"
   the border visually without revealing a mismatched patch.
   ============================================================ */
.exp-checkout {
  position: relative;
  border: 1px solid #dac3cb;   /* PDP --wire, warmer than slate */
  border-radius: 12px;
  padding: 1.75rem 1.25rem 1.25rem;
  margin-top: 1.25rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.exp-checkout .express-checkout__title {
  position: absolute;
  top: -0.6875rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 0.75rem;
  background-color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2E1F25;   /* PDP --ink */
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  z-index: 1;
}

@media (max-width: 767px) {
  .exp-checkout {
    padding: 1.5rem 0.875rem 1rem;
    margin-top: 1rem;
    border-radius: 10px;
  }
  .exp-checkout .express-checkout__title {
    font-size: 0.875rem;
    top: -0.625rem;
  }
}

/* ==================================================================
   Mobile: hide product hero + showcase image
   Lands users directly on package selector without scrolling past
   the product title, star rating, and bundle shot.
   ================================================================== */
@media (max-width: 767px) {
  .product-hero,
  .checkout-showcase-col {
    display: none !important;
  }
}

/* ==================================================================
   Pre-selection Summary Bar (PDP → Checkout handoff)
   Shown only when ?pkg=2|3|4 URL param pre-selects a bundle.
   Replaces the "Choose Your Package" title + bundle selector with
   a compact "Your Selection" summary + Change button.
   ================================================================== */
.selection-summary {
  display: none;
  margin: 0 0 1rem;
  padding: 1rem 1.125rem;
  background: #fbf3f1;            /* PDP --paper */
  border: 1px solid #dac3cb;      /* PDP --wire */
  border-radius: 12px;
}
body.has-preselection .selection-summary { display: block; }
body.has-preselection .form-section--first > .form-section__title,
body.has-preselection .form-section--first > .os-option { display: none !important; }

.selection-summary__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a3a5c;                 /* PDP --callout */
  margin-bottom: 0.375rem;
}
.selection-summary__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.selection-summary__text { flex: 1; min-width: 0; }
.selection-summary__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #2E1F25;                 /* PDP --ink */
  line-height: 1.2;
}
.selection-summary__meta {
  font-size: 0.8125rem;
  color: #4A3340;                 /* PDP --ink-2 */
  margin-top: 0.1875rem;
}
.selection-summary__change {
  flex-shrink: 0;
  background: transparent;
  color: #8a3a5c;                 /* PDP --callout */
  border: 1px solid #8a3a5c;
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.selection-summary__change:hover,
.selection-summary__change:focus {
  background: #8a3a5c;            /* PDP --callout */
  color: #fff;
  outline: none;
}

/* ================================================================
   Checkout a11y + CRO hardening (2026-05-17, David directive)
   1. iOS Safari auto-zooms the page when an <input> with computed
      font-size <16px is focused and never zooms back — the page
      lurches mid-checkout on mobile (highest-traffic device).
      Force >=16px on every text control at mobile widths. The
      base .ns-input is 1rem but a reduced Webflow root font-size
      makes that compute <16px on phones; explicit 16px is
      cascade-proof.
   2. White text on the brand CTA orange
      (--brand--color--cta-primary #ff9900) is ~2.2:1 contrast —
      the lowest-contrast text on the page sits on the single most
      important button (fails WCAG AA 4.5:1; hard to read for 50+
      eyes / bright sun / dimmed screens → fewer clicks). Dark ink
      on the SAME orange = ~7.8:1, brand colour 100% unchanged,
      and is the proven Amazon-pattern higher-converting CTA.
      Only the label colour changes; identity preserved.
   ================================================================ */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .input-flds,
  .ns-input {
    font-size: 16px !important;
  }
}

.submit-button,
.submit-button__main-text,
.submit-button__subtext {
  color: #1a1a1a !important;
}