/** Shopify CDN: Minification failed

Line 15:20 Unexpected "*"

**/
/* ===== Bean & Bean DS v1.0 — Wave 2 surface-adoption layer (dsv2.css) =====
   Loaded after theme.css and dsv1.css. dsv1.css is the FROZEN primitives
   contract (.bb-*) as shipped 2026-06-12 — never edit it; this file applies
   those patterns to theme trunk surfaces.

   Conventions:
   - Each W2 block below is delimited, self-contained and order-independent.
     Packages append blocks; never modify another package's block.
   - Tokens only (--bb-*, --fg-*, --bg-*, --font-*, --shadow-*, --space-*,
     --dur-*/--ease-*, --weight-*, --tracking-*). No raw color values.
   - High-traffic surfaces are gated behind per-surface body classes
     (.ds-w2-*) emitted by theme.liquid from the "Design System — Wave 2"
     theme settings. All flags default OFF, so merging is a visual no-op
     until Chinedum flips a surface on in the theme editor (DS-05 pattern).
     Ungated blocks are marked UNGATED and take effect on merge.
   - The minified theme.css / theme.js are never edited. JS workarounds
     live in assets/custom.js (none required by Wave 2 so far). */

/* === W2-01 — UNGATED brand-correctness fixes ============================
   (a) Theme .btn focus ring → .bb-btn purple halo (Wave 1 carry-over).
   (b) Hero headline weight rule (decision memo 1): hero headlines are
       always Sofia Pro Black, regardless of the richtext heading level
       used to size them. */

/* (a) Replace the browser-default blue focus ring on theme buttons with
   the dsv1 .bb-btn halo. The 1px purple-500 ring carries the >= 3:1
   non-text contrast on the light token backgrounds (#FBFBFE / #F1F2F8
   via --bb-paper / --bb-cream); the purple-100 glow provides the brand
   read on dark and brand-purple surfaces. Matches dsv1 .bb-btn exactly. */
.btn:focus-visible,
.btn--quick:focus-visible,
.shopify-payment-button__button--unbranded:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bb-purple-100), 0 0 0 1px var(--bb-purple-500);
}

/* box-shadow is stripped in Windows High Contrast / forced-colors mode;
   a transparent outline is re-drawn by the system there, so keyboard
   users never lose the indicator. */
@media (forced-colors: active) {
  .btn:focus-visible,
  .btn--quick:focus-visible,
  .shopify-payment-button__button--unbranded:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

/* (b) Hero headline weight — decision memo 1 (force Black 900).
   The slideshow title is a richtext field; picking "Heading 2/3" to get
   a smaller size also changes the wrapper tag, so dsv1's h2/h3 -> 700
   rule wins over the intended 900. Weight must not be a side effect of
   the size control. The wrapper always carries .slide__heading whatever
   tag the richtext produces; descendant selectors cover the stray-tag
   DOM variant (mixed tags unify under a <div> wrapper). */
.slide__heading,
.slide__heading h1, .slide__heading h2, .slide__heading h3,
.slide__heading h4, .slide__heading h5, .slide__heading h6 {
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}

/* === W2-02 — newsletter + theme forms adopt .bb-field (GATED: ds-w2-forms)
   Surfaces: newsletter signup (footer block, newsletter section, popup),
   contact form, header search field. Visual contract mirrors dsv1
   .bb-field: paper fill, hairline border, pill radius, purple focus halo.
   Font-size is deliberately NOT set (theme keeps its 16px+ input sizing,
   which prevents iOS focus zoom). Colors work on dark footers because the
   field surface is always paper. */
.ds-w2-forms .input-group__field,
.ds-w2-forms .search-form__input,
.ds-w2-forms .input--full {
  color: var(--fg-1);
  background: var(--bb-paper);
  border: 1px solid var(--bb-line-2);
  border-radius: var(--bb-radius-pill);
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.ds-w2-forms .input-group__field::placeholder,
.ds-w2-forms .search-form__input::placeholder,
.ds-w2-forms .input--full::placeholder {
  color: var(--fg-3);
}
.ds-w2-forms .input-group__field:focus,
.ds-w2-forms .search-form__input:focus,
.ds-w2-forms .input--full:focus {
  outline: none;
  border-color: var(--bb-purple-500);
  box-shadow: 0 0 0 3px var(--bb-purple-100);
}

/* Multi-line fields keep a soft rectangle — pill radius distorts
   textareas (contact form message field). */
.ds-w2-forms textarea.input--full {
  border-radius: var(--bb-radius-md);
}

/* Newsletter inline arrow submit (icon-only variant): subtle nudge on
   hover + the dsv1 halo on keyboard focus. */
.ds-w2-forms .input-group__btn--icon {
  transition: transform var(--dur-base) var(--ease-out);
}
.ds-w2-forms .input-group__btn--icon:hover {
  transform: translateX(2px);
}
.ds-w2-forms .input-group__btn:focus-visible {
  outline: none;
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 0 0 3px var(--bb-purple-100), 0 0 0 1px var(--bb-purple-500);
}

@media (prefers-reduced-motion: reduce) {
  .ds-w2-forms .input-group__btn--icon:hover {
    transform: none;
  }
}
@media (forced-colors: active) {
  .ds-w2-forms .input-group__field:focus,
  .ds-w2-forms .search-form__input:focus,
  .ds-w2-forms .input--full:focus,
  .ds-w2-forms .input-group__btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

/* === W2-03 — footer (GATED: ds-w2-footer) ================================
   Footer background / text / border colors stay admin-driven (section
   settings; currently legacy purple #664fff + white — recommended flip to
   brand purple is an admin action, see package notes). This block
   restyles type and interaction only, with background-agnostic
   treatments (currentColor, underlines, opacity) so it is correct both
   before and after the color flip. */

/* Column titles become the DS eyebrow voice (Inter caps), replacing the
   display-face h5 — column labels are wayfinding, not display copy. */
.ds-w2-footer .footer-title,
.ds-w2-footer .footer-title__button {
  font-family: var(--font-body);
  font-size: var(--bb-text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* Links: underline-on-hover reads on any footer background; the theme's
   alpha-fade hover stays as a secondary cue. */
.ds-w2-footer .footer-link:hover,
.ds-w2-footer .footer-copyright a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keyboard focus: currentColor ring is visible on any admin-chosen
   background (white-on-purple today, ink-on-cream if flipped later). */
.ds-w2-footer .footer-link:focus-visible,
.ds-w2-footer .footer-title__button:focus-visible,
.ds-w2-footer .footer-copyright a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: var(--bb-radius-xs);
}

/* Copyright line in the mono accent voice (approved subheading accent). */
.ds-w2-footer .footer-copyright {
  font-family: var(--font-mono);
  font-size: var(--bb-text-2xs);
  letter-spacing: 0.02em;
}

/* === W2-04 — product cards + collection grid (GATED: ds-w2-cards) =======
   The media wrapper becomes a .bb-card surface (paper, hairline,
   radius-lg, shadow lift on hover); info typography aligns to the DS
   card spec. Grid layout, AOS attributes, quick-buy DOM and swatch
   behavior are untouched. */
.ds-w2-cards .product-grid-item__image {
  background: var(--bb-paper);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.ds-w2-cards .product-grid-item:hover .product-grid-item__image,
.ds-w2-cards .product-grid-item:focus-within .product-grid-item__image {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card title: DS UI voice (Inter semibold). NOTE: this is the one
   intentionally visible type change in Wave 2 — card titles currently
   inherit the Sofia Pro heading stack. Single rule; delete if Jiyoon
   prefers display-face titles on cards (open question in the morning
   report). */
.ds-w2-cards .product-grid-item__title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}

.ds-w2-cards .product-grid-item__price {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Tagline / cutline: supporting size (color is set inline by the theme
   from the cutline_color setting, so it is intentionally not overridden
   here). */
.ds-w2-cards .product-cutline {
  font-size: var(--bb-text-sm);
}

/* Badges become DS pills; badge colors stay admin-driven. */
.ds-w2-cards .product__badge__item {
  font-family: var(--font-body);
  font-size: var(--bb-text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border-radius: var(--bb-radius-pill);
  padding: 4px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-w2-cards .product-grid-item:hover .product-grid-item__image,
  .ds-w2-cards .product-grid-item:focus-within .product-grid-item__image {
    transform: none;
  }
}

/* === W2-05 — cart drawer (GATED: ds-w2-cart) =============================
   Drawer surface goes paper with the DS elevation; free-shipping meter,
   line items, note fields and the checkout CTA adopt token styling.
   Drawer open/close mechanics, focus trap (Phase 1) and cart JS are
   untouched. (.cart-drawer__close already has the Wave 1 purple outline
   in theme.css — not re-declared here.) */
.ds-w2-cart .cart-drawer {
  background-color: var(--bb-paper);
  box-shadow: var(--shadow-lg);
}

/* Item count beside the title: mono accent voice. */
.ds-w2-cart .cart-drawer__item-qty {
  font-family: var(--font-mono);
  font-size: var(--bb-text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

/* Free-shipping progress meter: brand fill on soft-purple track.
   `color` styles the bar in Firefox fallback; vendor pseudo-elements
   cover WebKit and Gecko explicitly. */
.ds-w2-cart .cart__message__progress {
  color: var(--bb-purple-500);
  background-color: var(--bb-purple-50);
  border-radius: var(--bb-radius-pill);
}
.ds-w2-cart .cart__message__progress::-webkit-progress-bar {
  background-color: var(--bb-purple-50);
  border-radius: var(--bb-radius-pill);
}
.ds-w2-cart .cart__message__progress::-webkit-progress-value {
  background-color: var(--bb-purple-500);
  border-radius: var(--bb-radius-pill);
}
.ds-w2-cart .cart__message__progress::-moz-progress-bar {
  background-color: var(--bb-purple-500);
  border-radius: var(--bb-radius-pill);
}
.ds-w2-cart .cart__message.is-success {
  color: var(--bb-success);
}

/* Line items */
.ds-w2-cart .cart__item__title a {
  color: var(--fg-1);
}
.ds-w2-cart .cart__item__price {
  font-variant-numeric: tabular-nums;
}
.ds-w2-cart .cart__item__selected-options,
.ds-w2-cart .cart__item__selling-plan {
  color: var(--fg-3);
}
.ds-w2-cart .cart__item__remove:hover {
  color: var(--bb-danger);
}
.ds-w2-cart .cart__item__quantity-minus:focus-visible,
.ds-w2-cart .cart__item__quantity-plus:focus-visible,
.ds-w2-cart .cart__item__quantity-field:focus-visible,
.ds-w2-cart .cart__item__remove:focus-visible {
  outline: 2px solid var(--bb-purple-500);
  outline-offset: 2px;
  border-radius: var(--bb-radius-xs);
}

/* Cart note / gift note fields: .bb-field treatment, soft rectangle. */
.ds-w2-cart .cart__field {
  color: var(--fg-1);
  background: var(--bb-paper);
  border: 1px solid var(--bb-line-2);
  border-radius: var(--bb-radius-md);
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.ds-w2-cart .cart__field:focus {
  outline: none;
  border-color: var(--bb-purple-500);
  box-shadow: 0 0 0 3px var(--bb-purple-100);
}

/* Checkout CTA: dsv1 .bb-btn--primary hover behavior (lift + brand
   shadow). Color/size stay admin-driven (already brand purple). */
.ds-w2-cart .cart__checkout {
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.ds-w2-cart .cart__checkout:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}

@media (prefers-reduced-motion: reduce) {
  .ds-w2-cart .cart__checkout:hover {
    transform: none;
  }
}
@media (forced-colors: active) {
  .ds-w2-cart .cart__field:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

/* === W2-06 — header & navigation (GATED: ds-w2-header) ===================
   Live header is solid (non-transparent, non-sticky, dark text on token
   background, "line" hover effect). This block brands the hover/active
   line and cart indicator, and gives keyboard focus a background-proof
   double ring (white core + purple) so nothing regresses if transparent
   headers over imagery are ever re-enabled. The "Sale" highlight item
   keeps its own --highlight color (theme rule is !important). */

/* Hover / active line under nav links → brand purple, slightly thicker,
   pill-capped. Covers top-level links, icon links and mega-menu child
   links (the three theme variants of the line effect). */
.ds-w2-header .navlink--toplevel > .navtext::before,
.ds-w2-header .navlink--toplevel > .navtext::after,
.ds-w2-header .navlink--icon .navtext::before,
.ds-w2-header .navlink--icon .navtext::after,
.ds-w2-header .grandparent .navlink--child > .navtext::before,
.ds-w2-header .grandparent .navlink--child > .navtext::after {
  background: var(--bb-purple-500);
  height: 2px;
  border-radius: var(--bb-radius-pill);
}

/* Keyboard focus: double ring reads on light header, dark imagery and
   brand surfaces alike. */
.ds-w2-header .navlink:focus-visible,
.ds-w2-header .mobile-menu__button:focus-visible,
.ds-w2-header .logo__image-link:focus-visible,
.ds-w2-header .logo__text-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bb-white), 0 0 0 4px var(--bb-purple-500);
  border-radius: var(--bb-radius-xs);
}

/* Cart "has items" indicator: pinned to the brand token (was --accent,
   same value post-DS-05 — pinning prevents drift if the admin accent
   ever changes). */
.ds-w2-header .cart-indicator {
  fill: var(--bb-purple-500);
}

/* Sticky/scrolled state (dormant while sticky_header is off): soft DS
   elevation instead of a hard edge. Both selectors cover the scroll
   class living on <html> or <body>. */
.has-scrolled .ds-w2-header .site-header,
.ds-w2-header.has-scrolled .site-header {
  box-shadow: var(--shadow-sm);
}

@media (forced-colors: active) {
  .ds-w2-header .navlink:focus-visible,
  .ds-w2-header .mobile-menu__button:focus-visible,
  .ds-w2-header .logo__image-link:focus-visible,
  .ds-w2-header .logo__text-link:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

/* === W2-07 — PDP buy box (GATED: ds-w2-buybox) ===========================
   Price, variant pickers (radio boxes + popout selects), quantity and
   the add-to-cart CTA adopt token styling. Cart/variant JS, form markup
   and the Recharge subscription widget (app block, themed in its own
   admin settings) are untouched. */

/* Price: tabular numerals; sale treatments in the DS berry accent.
   --bb-berry on --bb-paper is 5.6:1 (AA). */
.ds-w2-buybox .product__price {
  font-variant-numeric: tabular-nums;
}
.ds-w2-buybox .product__price--sale {
  color: var(--bb-berry);
}
.ds-w2-buybox .product__price--compare {
  color: var(--fg-4);
}
.ds-w2-buybox .product__price--off {
  font-family: var(--font-mono);
  font-size: var(--bb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--bb-berry);
}

/* Variant boxes (radio-style pickers): paper pills, purple selected
   state. Selected text purple-700 on purple-50 is 8.3:1 (AA). */
.ds-w2-buybox .radio__fieldset .radio__label {
  background-color: var(--bb-paper);
  border-color: var(--bb-line-2);
  border-radius: var(--bb-radius-pill);
  transition: color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border var(--dur-base) var(--ease-out);
}
.ds-w2-buybox .radio__fieldset .radio__label:hover {
  border-color: var(--bb-purple-300);
}
.ds-w2-buybox .radio__fieldset .radio__input:checked ~ .radio__label {
  background-color: var(--bb-purple-50);
  border-color: var(--bb-purple-500);
  color: var(--bb-purple-700);
}
/* Image-option tiles and the stacked "coffee-radio" rows keep a soft
   rectangle — pill radius clips imagery / reads wrong on full-width rows. */
.ds-w2-buybox .radio__fieldset--variant-option-image .radio__label,
.ds-w2-buybox .coffee-radio .radio__label {
  border-radius: var(--bb-radius-md);
}

/* Dropdown selectors (popout) */
.ds-w2-buybox .select-popout__toggle {
  color: var(--fg-1);
  background: var(--bb-paper);
  border: 1px solid var(--bb-line-2);
  border-radius: var(--bb-radius-pill);
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.ds-w2-buybox .select-popout__toggle:focus-visible,
.ds-w2-buybox .select-popout__toggle[aria-expanded="true"] {
  outline: none;
  border-color: var(--bb-purple-500);
  box-shadow: 0 0 0 3px var(--bb-purple-100);
}
.ds-w2-buybox .select-popout__list {
  background: var(--bb-paper);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-md);
  box-shadow: var(--shadow-md);
}
.ds-w2-buybox .select-popout__option:hover,
.ds-w2-buybox .select-popout__option:focus-visible {
  background: var(--bb-purple-50);
}
.ds-w2-buybox .select-popout__item--current .select-popout__option {
  color: var(--bb-purple-700);
}

/* Quantity stepper */
.ds-w2-buybox .quantity__btn:focus-visible,
.ds-w2-buybox .quantity__input:focus-visible {
  outline: 2px solid var(--bb-purple-500);
  outline-offset: -2px;
}

/* Add to cart: dsv1 .bb-btn--primary hover (lift + brand shadow) and
   disabled (cream-2 / ink-4) states. Base color/size stay admin-driven. */
.ds-w2-buybox .product__submit__add {
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.ds-w2-buybox .product__submit__add:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}
.ds-w2-buybox .product__submit__add[disabled] {
  background: var(--bb-cream-2);
  color: var(--bb-ink-4);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .ds-w2-buybox .product__submit__add:hover:not([disabled]) {
    transform: none;
  }
}
@media (forced-colors: active) {
  .ds-w2-buybox .select-popout__toggle:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

/* === W2-07b — PDP price-off badge surface (GATED: ds-w2-buybox) ==========
   The "Subscription • Save 10%" / "Sale • Save X" pill next to the PDP
   price. The theme fills it from JS (updateSaleTextSubscription) whenever
   a selling plan is active — the new Recharge widget selects a plan via
   the form's selling_plan input, so this badge now appears on every
   subscribe-selected PDP view.

   Its surface comes from --saving-bg / --saving-text → the admin
   "Saving badge" colors (settings_data: legacy #d02e2e red). W2-07 set
   the badge TEXT to berry but left that red background, which would ship
   berry-on-red once the flag flips. Resolve the surface here: brand
   purple pill, matching the Recharge widget's own "Save up to 10%"
   badge. White on purple-500 is 5.6:1 (AA at the badge's 12px size,
   same pairing as the ATC button). Cascade note: this block is later in
   the file than W2-07 at equal specificity, so its color declaration
   intentionally wins over W2-07's berry. */
.ds-w2-buybox .product__price--off {
  background-color: var(--bg-brand);
  color: var(--fg-on-brand);
}
/* The bullet separator inherits a 0.5 opacity from theme.css — too dim
   on the solid purple surface. */
.ds-w2-buybox .product__price--off em {
  opacity: 0.7;
}