/* Supply titles use the prototype's emphasis without changing legacy titles.
   Full translated phrases may wrap on small cards and in RTL layouts. */
#order .bundle-card__supply-title {
  margin: 6px 0 3px;
  max-inline-size: 100%;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  #order .bundle-card__supply-title {
    margin: 5px 0 2px;
    font-size: 19px;
    letter-spacing: -0.2px;
  }
}
[dir="rtl"] #order .bundle-card__supply-title {
  letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
   Subscribe & save — same card language as the Shipping Insurance row above
   (white surface, 1px accent border, --radius corners) reusing this page's own
   .toggle-switch component. The 15% rate itself lives in
   bundle-content-renderer.js and is applied to whatever price the bundle config
   supplies, so nothing here depends on hard-coded amounts.
   --------------------------------------------------------------------------- */
#subscribe-section {
  display: block;
}

.subscription {
  width: min(600px, 100%);
  margin: 15px auto 0;
}

/* ---------------------------------------------------------------------------
   _sellingPlanDefaultStatus === 0: the prototype's "Subscribe first" layout.
   The card spans the bundle grid above the cards, the six benefits stay in one
   row, the switch uses the prototype geometry (51 x 31, plain knob) and the
   card tints green while subscribed.
   --------------------------------------------------------------------------- */
#subscribe-section.subscription-host--top .subscription {
  width: min(1200px, 100%);
  margin: 0 auto 26px;
}

#subscribe-section.subscription-host--top .subscription-option {
  min-height: 76px;
  padding: 12px 22px;
  gap: 18px;
}

#subscribe-section.subscription-host--top .subscription-option {
  cursor: pointer;
}

#subscribe-section.subscription-host--top .subscription-option:has(input:checked) {
  border-color: var(--purple);
  background: var(--t-checked-bg);
}

#subscribe-section.subscription-host--top .subscription-heading strong {
  font-size: 20px;
}

#subscribe-section.subscription-host--top .subscription-details {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 14px 8px 0;
  color: #52665c;
}

#subscribe-section.subscription-host--top .subscription-recommendation {
  margin-top: 10px;
  color: #68796f;
}

#subscribe-section.subscription-host--top .toggle__track {
  width: 51px;
  height: 31px;
}

#subscribe-section.subscription-host--top .toggle__knob {
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
}

#subscribe-section.subscription-host--top .toggle-switch input:checked + .toggle__track .toggle__knob {
  left: 22px;
}

#subscribe-section.subscription-host--top .toggle__knob svg {
  display: none;
}

@media (min-width: 768px) and (max-width: 1099px) {
  #subscribe-section.subscription-host--top .subscription-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #subscribe-section.subscription-host--top .subscription {
    width: 100%;
    margin: 0 auto 24px;
  }

  #subscribe-section.subscription-host--top .subscription-option {
    padding: 14px;
    gap: 12px;
    min-height: 76px;
  }

  #subscribe-section.subscription-host--top .subscription-heading {
    gap: 5px 8px;
  }

  #subscribe-section.subscription-host--top .subscription-heading strong {
    font-size: 16px;
  }

  #subscribe-section.subscription-host--top .subscription-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    margin: 12px 4px 0;
  }

  #subscribe-section.subscription-host--top .subscription-recommendation {
    font-size: 11px;
    margin: 10px 0 0;
  }

}

.subscription-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 76px;
  padding: 20px;
  border: 1px solid var(--purple-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left; 
  -webkit-tap-highlight-color: transparent;
}

.subscription-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
  line-height: 1.4;
}

.subscription-heading strong {
  font-size: 18px;
  font-weight: 600;
}

.subscription-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.subscription-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 14px 4px 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.subscription-benefit {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  overflow-wrap: break-word;
}

.subscription-benefit svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--t-main);
}

.subscription-recommendation {
  margin: 8px 6px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 767px) {
  .subscription {
    width: min(560px, 100%);
    margin-top: 15px;
  }

  .subscription-option {
    padding: 15px;
    gap: 12px;
  }

  .subscription-heading strong {
    font-size: 15px;
  }

  .subscription-badge {
    padding: 4px 8px;
    font-size: 11px;
  }

  .subscription-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    margin-top: 12px;
    font-size: 12px;
  }

  .subscription-recommendation {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Keep the Shipping Insurance row the same size as the Subscribe & save card:
   one 76px row, with the price inline next to the switch instead of stacked
   above it (same treatment the prototype uses for its two cards).
   Above 875px the icon keeps its own column; below that the page already hides
   the icon and lays the price/switch out in a row, so only the height changes.
   --------------------------------------------------------------------------- */
@media (min-width: 876px) {
  .insurance {
    min-height: 76px;
    padding: 12px 20px;
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }

  .insurance__right {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

@media (max-width: 875px) {
  .insurance {
    min-height: 76px;
  }
}

/* ---------------------------------------------------------------------------
   Subscribe-first keeps the last pack behind a "Need More?" disclosure; the
   native details/summary expands it and the renderer opens its scratch cover.
   --------------------------------------------------------------------------- */
.more-offers {
  width: min(1200px, 100%);
  margin: 22px auto 24px;
}

.more-offers__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  margin: 0 auto;
  padding: 11px 22px;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  font-size: 14px;
  line-height: 1.5;
}

.more-offers__button::-webkit-details-marker { display: none; }
.more-offers__button::marker { content: ""; }
.more-offers__button:focus-visible { outline: 3px solid rgb(var(--t-main-rgb) / .4); outline-offset: 4px; }
.more-offers__chevron { width: 20px; height: 20px; flex: none; }
.more-offers[open] > .more-offers__button { display: none; }
.more-offers__content { width: min(360px, 100%); margin: 0 auto; }
.more-offers .bundle-card { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .more-offers__button:hover { background: var(--t-subtle-bg); border-color: var(--purple); }
}

@media (max-width: 767px) {
  .more-offers { margin: 18px auto 22px; }
  .more-offers__button { width: 100%; padding: 12px 18px; }
  .more-offers__content { width: 100%; }
}
/* ---------------------------------------------------------------------------
   The pack inside the subscribe-first "Need More?" block wears the prototype's
   static emerald finish (dark green card, champagne border, gold ORDER button).
   The id-qualified selectors also beat the silver/gold gift themes the card
   inherits from the bundle configuration.
   --------------------------------------------------------------------------- */
#order .bundle-card-emerald {
  border: 1px solid var(--emerald-border);
  background: radial-gradient(ellipse at 100% 0%, var(--emerald-glow) 0%, transparent 52%), linear-gradient(145deg, var(--emerald-from) 0%, var(--emerald-mid) 62%, var(--emerald-to) 100%);
  box-shadow: 0 12px 28px #123f2924, inset 0 0 0 5px #d8c99414;
}

#order .bundle-card-emerald .bundle-card__badge {
  background: var(--emerald-accent);
  color: #234737;
  gap: 6px;
}

#order .bundle-card-emerald .bundle-card__badge::before {
  content: "\25C7";
  font-size: 18px;
  line-height: 1;
}

#order .bundle-card-emerald .bundle-card__title,
#order .bundle-card-emerald .bundle-card__price {
  color: #fff;
}

#order .bundle-card-emerald .rating,
#order .bundle-card-emerald .rating span,
#order .bundle-card-emerald .bundle-card__shipping {
  color: #d5e8dd;
}

#order .bundle-card-emerald .bundle-card__compare {
  color: #c8d8cd;
}

#order .bundle-card-emerald .bundle-card__offer {
  background: #ffffff12;
  border: 1px solid #c4dcb32e;
  color: #f3e7bf;
}

#order .bundle-card-emerald .bundle-card__gift,
#order .bundle-card-emerald .bundle-card__gift p strong {
  color: #f3e7bf;
}

#order .bundle-card-emerald .bundle-card__button {
  background: var(--emerald-accent);
  color: var(--emerald-accent-ink);
  border: 1px solid var(--emerald-accent);
  box-shadow: 0 4px 14px #0002;
}

#order .bundle-card-emerald .bundle-card__button:hover,
#order .bundle-card-emerald .bundle-card__button:focus-visible {
  background: #fff1c8;
  box-shadow: 0 4px 18px #0003;
}


@media (max-width: 767px) {
  #order .bundle-card-emerald .bundle-card__badge {
    background: transparent;
    color: var(--emerald-accent);
  }
}

/* ---------------------------------------------------------------------------
   Subscribe-first price block (the prototype's "subscribe top" variant).
   Every card gains a fixed-height slot under the price that prints how much the
   plan takes off that very bundle ("Extra $10.45 off") while it is switched on;
   the page attribute also turns the price green and lights the soft halo the
   prototype uses. The bottom-switch layout renders none of this, and the fixed
   slot height keeps toggling from shifting the card or the scratch canvas.
   --------------------------------------------------------------------------- */
.subscription-saving-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; padding-top: 3px; }
.subscription-saving { display: inline-block; padding: 3px 7px; border-radius: 6px; background: var(--t-saving-bg); color: var(--purple-dark); font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.subscription-saving[hidden] { display: none; }
.bundle-card-golden .subscription-saving { background: #fff4cf; color: #60440b; }

.bundle-page[data-subscribed="true"] .bundle-card:not(.bundle-card-golden) .bundle-card__price { color: var(--purple-dark); }
.bundle-card__price-row { position: relative; isolation: isolate; }
.bundle-card__price-row::before { content: ""; position: absolute; inset: -5px -8px; border-radius: 10px; background: var(--t-price-bg); opacity: 0; z-index: -1; transition: opacity 260ms cubic-bezier(.23,1,.32,1); pointer-events: none; }
.bundle-page[data-subscribed="true"] .bundle-card__price-row::before { opacity: 1; }
.bundle-card-golden .bundle-card__price-row::before { background: var(--t-btn-hover); }
#order .bundle-card-emerald .bundle-card__price-row::before { background: #ffffff10; }
#order .bundle-card-emerald .subscription-saving { background: var(--t-saving-bg); color: var(--emerald-accent-ink); }

@media (max-width: 767px) {
  /* Keep the price halo clear of ORDER in both subscription states. */
  .bundle-card__aside { row-gap: 16px; }
  .bundle-card__price-row { flex-shrink: 0; }
  .subscription-saving-slot { align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .bundle-card__price-row::before { transition: none; }
}

/* ---------------------------------------------------------------------------
   Auto Ship & Save — the prototype's "subscribe first" variant (C and D) and the
   free-gift rail that goes with it. Every colour in this block is a theme token
   (:root above), so re-skinning a store means changing --purple and the three
   tints instead of editing these rules.
   --------------------------------------------------------------------------- */
.subscription-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.monthly-gifts-module { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 18px; margin-top: 18px; padding: 16px 20px; border: 1px solid var(--t-border); border-radius: 16px; background: var(--t-module-bg); color: var(--text-heading); font-family: inherit; }
.monthly-gifts-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.monthly-gifts-copy > strong { font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; }
[data-gift-stock] { color: var(--t-main); }
.gift-live { display: flex; align-items: center; gap: 8px; color: var(--t-muted); font-size: 16px; line-height: 1.25; }
.gift-live strong { color: var(--t-main); font-weight: 600; }
.gift-live-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--t-main); box-shadow: 0 0 0 2px rgb(var(--t-main-rgb) / .16); }
.gifts-link { display: inline-flex; align-items: center; min-height: 28px; font-size: 16px; line-height: 1.25; color: var(--text-heading); text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }
.gifts-link:focus-visible { outline: 2px solid var(--t-main); outline-offset: 3px; }
.gift-access { display: flex; align-items: center; gap: 4px; min-height: 22px; margin: 0; font-size: 11px; line-height: 1.2; color: var(--t-muted); }
.gift-access svg { flex: none; width: 12px; height: 12px; }
.gift-access[data-included="true"] { color: var(--t-btn-hover); }
.gift-access[data-included="true"] svg { display: none; }

.gift-marquee { min-width: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.gift-marquee-track { display: flex; width: max-content; animation: gift-strip 24s linear infinite; will-change: transform; }
.gift-marquee-group { display: flex; flex: none; }
.gift-preview-item { display: block; flex: none; width: 100px; padding: 5px 8px; }
.gift-image-slot { display: block; position: relative; }
.gift-preview-item .gift-image-slot { width: 84px; height: 84px; }
.gift-image-slot img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 3px #0004) drop-shadow(0 0 6px #0002); }
@keyframes gift-strip { to { transform: translateX(-50%); } }

.gift-stock-pulse, .gift-live-pulse { display: inline-block; transform-origin: center; animation: gift-text-heartbeat 2.8s cubic-bezier(.23,1,.32,1) infinite; }
.gift-live-dot { animation: gift-dot-heartbeat 2.8s cubic-bezier(.23,1,.32,1) infinite; }
.gift-live-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--t-main); border-radius: 50%; opacity: 0; pointer-events: none; animation: gift-dot-ring 2.8s cubic-bezier(.23,1,.32,1) infinite; }
@keyframes gift-text-heartbeat { 0%, 12%, 28%, 100% { transform: scale(1); } 6% { transform: scale(1.045); } 20% { transform: scale(1.025); } }
@keyframes gift-dot-heartbeat { 0%, 12%, 28%, 100% { transform: scale(1); } 6% { transform: scale(1.2); } 20% { transform: scale(1.1); } }
@keyframes gift-dot-ring { 0% { transform: scale(.85); opacity: 0; } 6% { opacity: .45; } 32%, 100% { transform: scale(1.65); opacity: 0; } }
.monthly-gifts-module[data-paused="true"] :is(.gift-stock-pulse, .gift-live-pulse),
.monthly-gifts-module[data-paused="true"] .gift-live-dot,
.monthly-gifts-module[data-paused="true"] .gift-live-dot::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .gift-marquee-track { animation: none; transform: none; will-change: auto; }
  .gift-stock-pulse, .gift-live-pulse, .gift-live-dot, .gift-live-dot::after { animation: none; transform: none; }
}

.monthly-gifts-dialog { box-sizing: border-box; width: min(980px, calc(100% - 40px)); max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: auto; padding: 32px; border: 1px solid var(--t-border); border-radius: 20px; background: var(--t-subtle-bg); color: var(--text-heading); font-family: var(--font); overflow: auto; overscroll-behavior: contain; }
.monthly-gifts-dialog * { box-sizing: border-box; }
.monthly-gifts-dialog::backdrop { background: #03211980; }
.gifts-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gifts-dialog-header h2 { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; }
.gifts-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -14px -14px 0 0; padding: 10px; border: 0; border-radius: 50%; background: var(--t-subtle-bg); color: var(--t-btn-hover); cursor: pointer; }
.gifts-close svg { width: 24px; height: 24px; }
#monthly-gifts-description { margin: 18px 0; font-size: 17px; line-height: 1.5; color: #65776f; }
.monthly-gift-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gift-month { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--t-border); border-radius: 18px; background: var(--t-subtle-bg); }
.gift-month-art { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 112px; padding: 10px; border-right: 1px solid var(--t-border); background: radial-gradient(ellipse at center, #fff 28%, var(--t-subtle-bg) 100%); }
.gift-month-art img { width: 100%; height: 92px; object-fit: contain; }
.gift-month-copy { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 14px; }
.gift-month-label { font-size: 13px; line-height: 1.2; color: var(--t-main); }
.gift-month strong { font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.gift-first-perks { margin: 0; padding-left: 12px; color: #426858; font-size: 12px; line-height: 1.45; list-style: disc; }
.gift-first-perks li + li { margin-top: 2px; }
.gift-first-perks li::marker { color: var(--t-main); }
.gift-terms { margin: 24px 0 0; font-size: 14px; line-height: 1.5; color: #6a7d72; }
.monthly-gifts-dialog :focus-visible { outline: 2px solid var(--t-main); outline-offset: 3px; }

/* "Free gift included" badge under the price of every bundle (C and D). */
.subscription-gift { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; background: transparent; color: var(--purple-dark); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.subscription-gift[hidden] { display: none; }
.subscription-gift img { display: block; flex: none; width: 28px; height: 28px; object-fit: contain; }
.bundle-card-golden .subscription-gift { color: #fff; }
#order .bundle-card-emerald .subscription-gift { color: #f3e7bf; }
[data-gift-shoppers] { font-variant-numeric: tabular-nums; }

/* The fireworks layer; the particles themselves are positioned by script. */
.subscription-confetti { z-index: 40; }

@media (max-width: 767px) {
  .monthly-gifts-module { grid-template-columns: minmax(0, 1fr) 90px; gap: 4px; margin-top: 14px; padding: 12px; border-radius: 14px; }
  .monthly-gifts-copy { gap: 4px; }
  .monthly-gifts-copy > strong { font-size: 13px; letter-spacing: -0.3px; }
  .gift-live { gap: 5px; font-size: 11px; }
  .gift-live-dot { width: 7px; height: 7px; }
  .gifts-link { min-height: 28px; font-size: 12px; }
  .gift-access { font-size: 9px; }
  .gift-preview-item { width: 70px; padding: 4px; }
  .gift-preview-item .gift-image-slot { width: 62px; height: 70px; }
  .monthly-gifts-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 22px 16px; border-radius: 18px; }
  .gifts-dialog-header h2 { font-size: 25px; letter-spacing: -0.8px; }
  .gifts-close { margin: -16px -12px 0 -4px; }
  #monthly-gifts-description { margin: 16px 0 12px; font-size: 14px; }
  .monthly-gift-rail { gap: 10px; }
  .gift-month { grid-template-columns: 46% minmax(0, 1fr); border-radius: 14px; }
  .gift-month-art { min-height: 100px; padding: 5px; }
  .gift-month-art img { height: 76px; }
  .gift-month-copy { gap: 6px; padding: 8px; }
  .gift-month-label { font-size: 10px; }
  .gift-month strong { font-size: 13px; }
  .gift-first-perks { padding-left: 10px; font-size: 9px; line-height: 1.4; }
  .gift-terms { margin-top: 20px; font-size: 12px; }
  .subscription-gift { gap: 5px; font-size: 10px; }
  .subscription-gift img { width: 24px; height: 24px; }
}
@media (max-width: 360px) { .monthly-gifts-module { grid-template-columns: minmax(0, 1fr) 70px; } }

/* Latest prototype: two centered benefits, wrapping naturally in every language. */
#subscribe-section .subscription-details {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 12px;
}

#subscribe-section .subscription-benefit {
  max-width: 100%;
}

#subscribe-section .subscription-benefit span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Shared theme tokens, including the dialog mounted outside #order. */
#order, .monthly-gifts-dialog {
  --purple: var(--t-main); --purple-dark: var(--t-btn-hover); --purple-border: var(--t-border);
  --t-checked-bg: var(--t-subtle-bg); --text-heading: #1f2937;
  /* Both templates supply the core --t-* palette. Extended 2step tokens are optional.
     Keep every dark gradient stop dark enough for light offer text in all themes. */
  --emerald-border: var(--t-border);
  --emerald-glow: color-mix(in srgb, var(--t-main) 45%, #000);
  --emerald-from: var(--t-dark-bg, color-mix(in srgb, var(--t-main) 20%, #000));
  --emerald-mid: color-mix(in srgb, var(--t-main) 40%, #000);
  --emerald-to: var(--emerald-from);
  --emerald-accent: #f3e7bf;
  --emerald-accent-ink: var(--emerald-from);
  --t-saving-bg: var(--t-subtle-bg);
  --t-price-bg: rgb(var(--t-main-rgb) / 0.08);
  --t-module-bg: var(--t-subtle-bg);
}
#subscribe-section[hidden], .subscription-saving[hidden], .subscription-gift[hidden] { display: none !important; }
.monthly-gifts-dialog { --font: inherit; }
.gift-marquee-track:hover { animation-play-state: running; }
[dir="rtl"] .gift-marquee { direction: ltr; }
.subscription-option { text-align: start; }
.more-offers[open] > .more-offers__button { display: flex; margin-bottom: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .bundle-card__price-row { margin-bottom: 8px; } .bundle-card__purchase { margin-top: 8px; } .subscription-gift { white-space: normal; } }