/** Shopify CDN: Minification failed

Line 296:32 Unexpected "("
Line 297:109 Unterminated string token

**/
/* ==========================================================================
   SE2 · global product card (Lane 10, 2026-09-09; conformed to the 2026-09-11
   handoff, Figma 572:12 "product-card")
   Loaded from layout/theme.liquid after se2-ethereal.css. Tokens only
   (snippets/theme-styles-variables.liquid, .design/tokens.json). One anatomy on
   every surface that renders snippets/product-card.liquid — homepage bestsellers,
   PLP grid, PDP cross-sells and Build a Kit all inherit this file:

     media container           warm-wash field, radius 16 · badge pill top-left ·
                               44px quick-add "[+]" bottom-right, radius 12 (the one look for every
                               quick-add on the site, keyed on [data-se2-qa])
     tags row                  up to 3 pills, one line, gap 4, overflow clipped
     name                      17/600/26 charcoal
     inspiration               14/400/20 espresso ("Inspired by …"), truncated, hidden when empty
     price                     17/600/26 charcoal; "From $X" when variants differ;
                               compare-at struck in tertiary only when present
     reviews                   Opinew list stars or Horizon reviews.rating; hidden when empty

   Vertical rhythm is the Figma auto-layout: 10px between the card's groups
   (--se2-card-gap), 2px inside the details group (--se2-card-detail-gap). The
   flex gap stays 0 so each row can own its own margin and still collapse when empty.

   The page ground is ivory (--se2-ground #F7F4EF) as of 2026-09-11: nothing in the
   card body paints a field, so the card sits directly on the page. The only
   #FFFFFF left here is text ink on a dark fill (--se2-ink-white).

   Card-scoped properties with a fallback are the tokens the bundle does not
   have yet (recorded in lane10 decisions-for-ricardo.md): --se2-radius-chip.
   ========================================================================== */

.se2-card {
  --se2-card-radius: var(--se2-radius-card, 16px);
  --se2-card-media-ratio: 4 / 5;
  --se2-card-inset: var(--se2-space-8, 8px); /* 572:12 / 627:53: quick-add sits 8px from the media corner at every width */
  --se2-card-gap: 10px;
  --se2-card-detail-gap: 2px;
  --se2-radius-chip: var(--se2-radius-chip-token, 6px);
  /* The private --se2-card-tag-radius alias that used to sit here is gone. 572:12's 4px tag corner is now the
     real token --se2-radius-tag in theme-styles-variables.liquid, which the pill reads directly. */
}

/* content column: the rows below the media are emitted by the card snippet and
   ordered here; the native product-title / price blocks stay for the editor but
   are hidden once the card has resolved its own rows */
.se2-card .se2-card__content.product-grid__card {
  position: relative;
  align-items: stretch;
  gap: 0;
  color: var(--se2-ink);
  text-align: left;
}

.se2-card--resolved .se2-card__content > a.contents > .text-block,
.se2-card--resolved .se2-card__content > product-price {
  display: none;
}

/* ---------- media field ---------- */
.se2-card .card-gallery.card-gallery {
  order: -2;
  position: relative;
  overflow: hidden;
  background: var(--se2-warm-wash);
  border-radius: var(--se2-card-radius);
}

.se2-card .card-gallery .product-media-container,
.se2-card .card-gallery .card-gallery__placeholder,
.se2-card .card-gallery .product-card-gallery__title-placeholder,
.se2-card .card-gallery > svg {
  aspect-ratio: var(--se2-card-media-ratio);
  border-radius: var(--se2-card-radius);
}

.se2-card .card-gallery .product-media-container {
  --product-media-fit: cover;
}

/* ---------- badge pill (manual scent.badge, or Sold out from availability) ---------- */
.se2-card .card-gallery .product-badges {
  position: absolute;
  z-index: var(--layer-flat, 1);
  inset: var(--se2-card-inset) auto auto var(--se2-card-inset);
}

.se2-card .product-badges__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--se2-radius-chip);
  font-family: var(--font-body--family);
  font-size: var(--se2-type-micro);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
}

.se2-card .product-badges__badge.se2-badge--manual {
  background: var(--se2-ink-primary);
  color: var(--se2-ink-white);
}

.se2-card .product-badges__badge.se2-badge--sold-out {
  background: var(--se2-sand);
  color: var(--se2-ink-primary);
}

/* ---------- quick add: the one "[+]" (572:12 quick-add) ----------
   snippets/quick-add.liquid rendered with se2_card marks its wrapper data-se2-qa, and every rule below keys on
   that, not on the card: the same look reaches the product card, the fragrance PDP's set row, the cart drawer
   rows and the featured-product block (decision 2026-09-17, one "[+]" on every card). A 44px square on the
   warm wash at the control radius, SE2/Glyph in ink/primary, no shadow, 8px in from the corner of whatever
   overlay it sits in. A context only positions the overlay (or sets the button static, as the drawer rows do). */
.se2-card .card-gallery .quick-add {
  position: absolute;
  inset: 0;
  z-index: var(--layer-raised, 2);
  pointer-events: none;
}

.se2-card .quick-add__product-form-component,
.se2-card .quick-add__product-form-component .shopify-product-form {
  height: 100%;
}

.quick-add[data-se2-qa] button.quick-add__button {
  position: absolute;
  inset: auto var(--se2-qa-inset, var(--se2-space-8, 8px)) var(--se2-qa-inset, var(--se2-space-8, 8px)) auto;
  display: var(--quick-add-mobile-display, flex);
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--se2-size-touch-target, 44px);
  height: var(--se2-size-touch-target, 44px);
  min-width: var(--se2-size-touch-target, 44px);
  min-height: var(--se2-size-touch-target, 44px);
  max-inline-size: none;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--se2-radius-control, 12px);
  background: var(--se2-warm-wash);
  color: var(--se2-ink-primary);
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: all;
  scale: 1;
}

/* Horizon hides the button until a <product-card> is hovered and widens it on hover; the badge is drawn at rest
   everywhere and keeps its box */
@media screen and (min-width: 750px) {
  .quick-add[data-se2-qa] button.quick-add__button {
    display: var(--quick-add-display, flex);
    opacity: 1;
  }
}

.quick-add[data-se2-qa] button.quick-add__button:is(:hover, :focus-visible) {
  width: var(--se2-size-touch-target, 44px);
  padding: 0;
}

.quick-add[data-se2-qa] button.quick-add__button:hover {
  background: var(--se2-ink-primary);
  color: var(--se2-ink-white);
  scale: 1.04;
}

.quick-add[data-se2-qa] button.quick-add__button:active {
  scale: 0.98;
}

.quick-add[data-se2-qa] button.quick-add__button:focus-visible {
  outline: 2px solid var(--se2-ink-primary);
  outline-offset: 2px;
}

.quick-add[data-se2-qa] button.quick-add__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-add[data-se2-qa] .quick-add__button > .add-to-cart-icon {
  display: none;
}

/* the glyph is the text "[+]" (decision 2026-09-15) inside a span that carries Horizon's .button
   class, so every button style is reset here and the span is set on SE2/Glyph 17/20/500 */
.quick-add[data-se2-qa] .quick-add__button > .button.is-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-family: var(--se2-font-family);
  font-size: var(--se2-text-glyph);
  line-height: var(--se2-text-glyph-lh);
  font-weight: var(--se2-text-glyph-weight);
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
}

.quick-add[data-se2-qa] .quick-add__button[data-added='true'] {
  color: transparent;
}

.quick-add[data-se2-qa] .quick-add__button[data-added='true'] .add-to-cart__added {
  color: var(--se2-ink-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .quick-add[data-se2-qa] button.quick-add__button {
    transition: background-color 160ms ease, color 160ms ease, scale 160ms ease;
  }
}

/* blocks/_featured-product-gallery.liquid: the same overlay as the card gallery */
.featured-product-section .card-gallery .quick-add {
  position: absolute;
  inset: 0;
  z-index: var(--layer-raised, 2);
  pointer-events: none;
}

/* ---------- tags row ---------- */
.se2-card__tags {
  order: -1;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--se2-tag-gap);
  width: 100%;
  margin: var(--se2-card-gap) 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
}

/* The scent pill is its own role on the scale (--se2-text-scent-tag, 11/14/600/+0.5) and its own geometry tokens
   (tag/padding-*, radius/tag). It used to rebuild SE2/Tag by hand out of the micro role with a weight override and
   a literal 0.5px, while the tag tokens sat unused — so a token change could not reach the pill and the kit's copy
   had drifted to a 6px gap. Height follows the line box: 3 + 14 + 3 = 20px (decision 2026-09-15, was 22). */
/* `flex: 0 0 auto` kept the pill at its natural width, so on a narrow card a long product type was sliced
   off mid-word with the pill's own rounded edge cut away — "FREESTAND" with a square right edge, which reads
   as a rendering fault rather than a truncation (2026-09-18). It may shrink and ellipsise instead. */
.se2-card__tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--se2-tag-padding-y) var(--se2-tag-padding-x);
  border-radius: var(--se2-radius-tag);
  font-family: var(--font-body--family);
  font-size: var(--se2-text-scent-tag);
  line-height: var(--se2-text-scent-tag-lh);
  font-weight: var(--se2-text-scent-tag-weight);
  letter-spacing: var(--se2-text-scent-tag-ls);
  text-transform: uppercase;
}

/* Scent-specific fill and ink. Kept at zero specificity (:where) so a surface can still
   restyle a pill without an !important; the family rules sit after the default rule, so
   with equal specificity source order gives them the win.
   The nine approved families are the only ones with a token pair. Anything off-list — the
   PLP frame's "Spicy", a top note, a diffuser positioning label — matches no attribute
   selector and keeps --se2-tag-default-*, so an unknown scent renders styled, never bare. */
   This file is loaded globally (layout/theme.liquid), so the family rules are written against the data attribute
   alone and now serve every scent pill on the site — the product card, the kit builder's oil cards and the
   fragrance PDP chips (decision 2026-09-15). The per-component default below is the only part that stays
   class-bound, because a pill with no family must still be styled rather than bare. */
:where(.se2-card__tag, .se2-kit__tag, .se2-fpdp3__chip) {
  background: var(--se2-tag-default-bg);
  color: var(--se2-tag-default-ink);
}

:where([data-se2-scent='woody']) {
  background: var(--se2-tag-woody-bg);
  color: var(--se2-tag-woody-ink);
}
:where([data-se2-scent='amber']) {
  background: var(--se2-tag-amber-bg);
  color: var(--se2-tag-amber-ink);
}
:where([data-se2-scent='citrus']) {
  background: var(--se2-tag-citrus-bg);
  color: var(--se2-tag-citrus-ink);
}
:where([data-se2-scent='floral']) {
  background: var(--se2-tag-floral-bg);
  color: var(--se2-tag-floral-ink);
}
:where([data-se2-scent='fresh']) {
  background: var(--se2-tag-fresh-bg);
  color: var(--se2-tag-fresh-ink);
}
:where([data-se2-scent='fruity']) {
  background: var(--se2-tag-fruity-bg);
  color: var(--se2-tag-fruity-ink);
}
:where([data-se2-scent='gourmand']) {
  background: var(--se2-tag-gourmand-bg);
  color: var(--se2-tag-gourmand-ink);
}
:where([data-se2-scent='marine']) {
  background: var(--se2-tag-marine-bg);
  color: var(--se2-tag-marine-ink);
}
:where([data-se2-scent='aromatic']) {
  background: var(--se2-tag-aromatic-bg);
  color: var(--se2-tag-aromatic-ink);
}

/* ---------- details group: name / inspiration / price, 2px apart ---------- */
/* the group's own 10px offset lands on the name, so the spacing is identical whether or
   not the tags row rendered */
.se2-card__name {
  order: 1;
  width: 100%;
  margin: var(--se2-card-gap) 0 0;
  font-family: var(--font-body--family);
  font-size: var(--se2-text-body-bold);
  line-height: var(--se2-text-body-bold-lh);
  font-weight: var(--se2-text-body-bold-weight);
  color: var(--se2-ink-primary);
  letter-spacing: normal;
  text-transform: none;
  /* 572:24 / 627:61: the name was one truncated line so rows stay level whatever the title length. One line
     is too few on a narrow card: four products truncated to "SCENTPRO Min…" / "SCENTPRO Plu…" and could not
     be told apart (2026-09-18). Two lines, with the height reserved so rows still line up. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(var(--se2-text-body-bold-lh) * 2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.se2-card__name-link {
  color: inherit;
  text-decoration: none;
}

.se2-card__name-link:hover {
  color: var(--se2-ink-secondary);
}

.se2-card__inspired {
  order: 2;
  width: 100%;
  margin: var(--se2-card-detail-gap) 0 0;
  font-family: var(--font-body--family);
  /* SE2/Caption 12/16 (decision 2026-09-15): the line is supporting metadata under the product name and read too
     heavy against it at meta 14/20, most of all on a 171px mobile card. */
  font-size: var(--se2-text-caption);
  line-height: var(--se2-text-caption-lh);
  font-weight: var(--se2-text-caption-weight);
  color: var(--se2-ink-secondary);
  /* 572:12 truncates rather than wrapping: a 171px mobile card must stay the same height
     whatever the inspiration string is */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- price ---------- */
.se2-card__price {
  order: 3;
  width: 100%;
  margin: var(--se2-card-detail-gap) 0 0;
  font-family: var(--font-body--family);
  font-size: var(--se2-text-body-bold);
  line-height: var(--se2-text-body-bold-lh);
  font-weight: var(--se2-text-body-bold-weight);
  color: var(--se2-ink-primary);
}

.se2-card__compare {
  margin-inline-start: 6px;
  font-size: var(--se2-text-meta);
  font-weight: var(--se2-text-meta-weight);
  color: var(--se2-ink-tertiary);
}

/* reviews row removed 2026-09-15 (decision S03-M-G-007): the card ends at the price, as in 572:12.
   The 10px / 2px rhythm and the 8px control inset are the same at every width. */

/* ---- card carousel indicator (2026-09-18) ----
   The PDP gallery's progress segments at card scale. Each dot button carries `animation-timeline: --slide-N`
   (the slide's own view timeline, published by snippets/slideshow-styles), so the fill follows the swipe
   rather than a class a script toggles. Browsers without scroll-driven animation fill the selected segment. */
@keyframes se2-card-progress {
  0% {
    transform: scaleX(0);
  }

  50% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

.card-gallery slideshow-controls.se2-cardbar {
  mix-blend-mode: normal;
  justify-content: flex-start;
  pointer-events: none;
}

/* The quick-add [+] sits bottom-right over the same image. With five or six photos the last segments ran
   under it and could not be seen or tapped, so the row stops short of the button (2026-09-18). */
.card-gallery .se2-cardbar .slideshow-controls__dots {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3px;
  padding: 8px 56px 10px 10px;
  margin: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* The painted rail is an 18x2px dash, but the dash is not the target — a thumb aiming at it hit the card
   link behind and opened the product instead (2026-09-18). The padding grows the hit box vertically and the
   negative margin cancels it, so the bar sits exactly where it was drawn. */
.card-gallery .se2-cardbar .slideshow-controls__dots button {
  --size: 2px;
  position: relative;
  box-sizing: content-box;
  width: 18px;
  height: 10px;
  padding-block: 17px;
  margin-block: -17px;
  margin-inline: 0;
  border-radius: 0;
  pointer-events: auto;
}

.card-gallery .se2-cardbar .slideshow-controls__dots button::after {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgb(91 80 72 / 0.28);
  box-shadow: none;
}

.card-gallery .se2-cardbar .slideshow-controls__dots button::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: var(--se2-ink, #5c5048);
  translate: 0 -50%;
  transform: scaleX(0);
  transform-origin: left center;
}

@supports (animation-timeline: view()) {
  .card-gallery .se2-cardbar .slideshow-controls__dots button::before {
    animation: se2-card-progress linear both;
    animation-timeline: inherit;
  }
}

@supports not (animation-timeline: view()) {
  .card-gallery .se2-cardbar .slideshow-controls__dots button::before {
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .card-gallery .se2-cardbar .slideshow-controls__dots button[aria-selected='true']::before {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-gallery .se2-cardbar .slideshow-controls__dots button::before {
    animation: none;
    transition: none;
  }

  .card-gallery .se2-cardbar .slideshow-controls__dots button[aria-selected='true']::before {
    transform: scaleX(1);
  }
}