/** Shopify CDN: Minification failed

Line 1824:1 Expected "}" to go with "{"

**/
/* Arcline collection product card — Figma node 270:3232.

   Used only from snippets/card-product-collection.liquid, rendered only
   by sections/main-collection-product-grid.liquid. All selectors prefixed
   with .collection-card so they can't affect other card-product usages
   (related products, recently viewed, search, complementary, etc). */

/* The previous "Shipping-Now exclusion" CSS rule that hid preorder /
   backorder cards client-side when `#product-grid[data-shipping-now-active]`
   was set has been removed. It used to fire whenever the URL carried
   `filter.v.availability=1` without an explicit preorder/backorder tag
   filter — which made the "Hide sold-out items" quick toggle silently
   also hide preorder and backorder products, contrary to its label.
   Now only Shopify's server-side `filter.v.availability=1` controls
   what renders: items with `inventory_policy='deny'` and zero inventory
   drop out, while preorder/backorder items (with `continue_selling=true`)
   pass through and stay visible. The `data-shipping-now-active` attribute
   setter in sections/main-collection-banner.liquid was removed alongside
   this rule. */

.collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  isolation: isolate;
  font-family: Poppins, sans-serif;
  color: #1a1a1a;
  /* Establish a container so child typography can scale with the
     card's actual rendered width — works uniformly across grid
     layouts (1/2/3/4-col desktop, 1/2-col mobile) without per-class
     overrides. `inline-size` is the cheaper containment variant
     (width-only) since we don't need block-axis containment. */
  container-type: inline-size;
}

/* Raise the hovered card (and any card whose variant popover is open via
   click/keyboard) above sibling cards so the popover — which paints below
   the media box — isn't clipped by a neighbor's stacking context. */
.collection-card:hover,
.collection-card:focus-within,
.collection-card:has([data-collection-card-atc-wrap][data-open='true']) {
  z-index: 10;
}

/* Lift the parent <li> too. Dawn's `.scroll-trigger.animate--slide-in`
   applies `transform: translateY(...)` on every `.grid__item`, which
   creates an isolated stacking context per item. Bumping z-index on
   the inner `.collection-card` is therefore not enough — z-indexes
   inside the item can't escape its stacking context, so a hovered
   card's popover would still paint *under* later-DOM neighbours.
   Raising the `.grid__item` itself, only when one of its descendants
   is hovered/focused/open, lets the popover overlap adjacent cards
   in any direction. `position: relative` is needed for z-index to
   take effect since `.grid__item` is statically positioned by
   default. */
#product-grid .grid__item:has(.collection-card:hover),
#product-grid .grid__item:has(.collection-card:focus-within),
#product-grid .grid__item:has([data-collection-card-atc-wrap][data-open='true']) {
  position: relative;
  z-index: 10;
}

/* Out-of-stock dim. Applied to the specific children (media link and
   info) rather than .collection-card itself so the badges — which
   include the "OUT OF STOCK" indicator — remain fully opaque. `opacity`
   is a compositing property; opacity:1 on a descendant cannot restore
   full opacity when an ancestor is set to 0.5 (they multiply).

   NOTE: .collection-card__media-arrow is deliberately NOT in this list.
   The arrow's base visibility is opacity:0 (hidden until hover on
   desktop; always visible on mobile); a blanket opacity:0.5 here would
   override that 0 and leak dimmed arrows onto non-hovered OOS cards.
   The OOS dim for arrows is applied separately alongside the hover/
   mobile visibility rules further down, so it only kicks in once the
   arrow is meant to be visible. */
.collection-card--unavailable .collection-card__media-link,
.collection-card--unavailable .collection-card__info,
.collection-card--unavailable .collection-card__collection-badge {
  opacity: 0.5;
}

/* ---------- Media ---------- */

.collection-card__media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.collection-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 256 / 263;
  background-color: #fff;
  z-index: 2;
}

.collection-card__image,
.collection-card__placeholder {
  position: absolute;
  top: 15px;
  right: 0;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: calc(100% - 16px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.collection-card__image.is-active,
.collection-card__placeholder {
  opacity: 1;
}

/* Hover the media → preview the next image. Only applies when there are
   multiple media items (data-collection-card-media attribute is only set
   on the container when card_product.media.size > 1).
   Scoped to (hover: hover) — on touch devices the browser leaves the
   tapped element in a sticky :hover state, which makes the new hover-next
   image flash on top of the freshly-swiped active image right after a
   swipe (the visible glitch). Mobile cycling is driven entirely by the
   `is-active` class via touch swipe; no hover-preview semantics apply. */
@media (hover: hover) {
  [data-collection-card-media]:hover .collection-card__image.is-active {
    opacity: 0;
  }

  [data-collection-card-media]:hover .collection-card__image.is-hover-next {
    opacity: 1;
  }
}

.collection-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection-card__placeholder .placeholder-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

/* ---------- Media arrows (Figma: left/right chevrons at vertical center) */

.collection-card__media-arrow {
  position: absolute;
  top: 50%;
  /* Base transform used as the composed identity the hover state scales
     up. `transform-origin: center` keeps the scale centered on the
     arrow rather than offset by the translateY. */
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 4;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.15s ease;
}

.collection-card__media-arrow svg {
  display: block;
  width: 9px;
  height: 14px;
}

.collection-card__media-arrow--prev {
  left: 4px;
}

.collection-card__media-arrow--prev svg {
  transform: rotate(180deg);
}

.collection-card__media-arrow--next {
  right: 4px;
}

/* Desktop/hover-capable devices: arrows stay hidden — image cycling is
   reserved for touch swipe. Keep keyboard-focus reveal so tab users can
   still operate the controls. */
@media (hover: hover) {
  .collection-card:focus-within .collection-card__media-arrow:focus-visible {
    opacity: 1;
  }

  .collection-card--unavailable:focus-within .collection-card__media-arrow:focus-visible {
    opacity: 0.5;
  }
}

/* Touch devices and mobile viewports: arrows stay hidden too. Image
   cycling on mobile is driven entirely by horizontal swipe (handled in
   the snippet's touchstart/move/end script), so the chevrons would just
   compete with the swipe gesture and the wishlist/ATC buttons for tap
   area. The buttons remain in the DOM for keyboard accessibility. */
@media (hover: none) {
  .collection-card__media-arrow {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .collection-card__media-arrow {
    opacity: 0;
    pointer-events: none;
  }
  #product-grid.grid--2-col-tablet-down svg {
    color: #c75e43 !important;
  }

}

/* Arrow grows slightly on hover/focus — preserves the translateY(-50%)
   vertical centering by composing with scale instead of replacing. */
.collection-card__media-arrow:hover,
.collection-card__media-arrow:focus-visible {
  transform: translateY(-50%) scale(1.2);
}

.collection-card__media-arrow:focus-visible {
  outline: 2px solid rgba(199, 94, 67, 0.45);
  outline-offset: 2px;
}

/* ---------- Slider dots (mobile-only pagination indicator) ----------
   Renders one tiny dot per media item (max 4) at the bottom-center of the
   media box. Desktop uses hover-preview + arrows for cycling and has no
   need for an indicator, so the dots are hidden ≥769px. */

.collection-card__dots {
  display: none;
}

@media screen and (max-width: 768px) {
  .collection-card__dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
    bottom: 20px;
  }

  /* Lift the dot row above the bottom-left collection badge whenever
     the card actually carries one. Pill height is 21px (3px padding +
     15px line-height + 3px padding), so 32px from the media bottom
     keeps the dot's top above the badge's top with ~10px clearance.
     :has() lets us scope to cards that need it — cards without a
     "New"/"Trending"/"New & Trending" pill keep the original 8px
     placement so the dots stay near the bottom edge of the image as
     designed. Browsers without :has() (pre-2023) just render the dots
     in their original position; the badge can overlap there but the
     content beneath is non-interactive (pointer-events: none on dots). */
  /* #product-grid.grid--2-col-tablet-down .collection-card__media:has(.collection-card__collection-badges) .collection-card__dots {
    
    left: 58%;
  } */

  .collection-card__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(17, 17, 17, 0.25);
    transition: background-color 0.15s ease;
  }

  .collection-card__dot.is-active {
    background-color: #c75e43;
  }
}

/* ---------- Badges overlay ----------
   Positions the existing product-badge.liquid output at the top-right of
   the media. Badge styling itself lives in component-product-badge.css;
   we only style the container here. */

.collection-card__badges {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  pointer-events: none;
}

.collection-card__badges .product-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.collection-card__badges .product-badge {
  pointer-events: auto;
  /* Scale the shared product-badge (PREORDER / BACKORDER / SHIPPING NOW
     / N% OFF / OUT OF STOCK) with the card. Font, height, and side
     padding all use cqi so the chip stays proportionate to the
     image whether it's a 4-col (~250px) or 3-col (~335px) card.
     Mobile is handled by the explicit override in the @media block
     further down — its values stay fixed because mobile cards are
     narrow enough that cqi underflows the min anyway. */
  height: clamp(24px, 9cqi, 32px);
  padding: 0 clamp(8px, 3.4cqi, 12px);
  font-size: clamp(10px, 4cqi, 14px);
  line-height: 1;
}

/* Inventory badge ("N LEFT") — stacks below the existing product-badges in
   the flex column, top-right of the media. Colors are supplied per-card
   via inline style from theme settings; this rule owns typography, sizing,
   border, and the 1.5/1.5 hard shadow pattern shared with Figma's other
   bordered badges. */
.collection-card__inventory-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match the product-badge cqi formula above so the stacked column
     (PREORDER + N LEFT) reads as a single visual unit at every card
     width. */
  height: clamp(24px, 9cqi, 32px);
  padding: 0 clamp(8px, 3.4cqi, 12px);
  border: 1px solid transparent;
  font-family: Poppins, sans-serif;
  font-size: clamp(10px, 4cqi, 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.36px;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ---------- Collection-only badge (Figma node 270:3369)
   Combined "New" / "Trending" / "New & Trending" pill at the bottom-left
   of the media. Shown only when the merchant has entered a match tag in
   Theme settings → Badges → Collection Badges AND the product carries
   that tag. The label is selected in card-product-collection.liquid
   (single span, not two adjacent ones), so styling here is one variant. */

.collection-card__collection-badges {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.collection-card__collection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bottom-left "NEW / TRENDING" pill scales with the card so the
     left-anchored badge balances the right-anchored ATC/wishlist
     buttons (which also scale via cqi above). */
  padding: clamp(2px, 1.2cqi, 5px) clamp(9px, 3.65cqi, 13px);
  font-family: Poppins, sans-serif;
  font-size: clamp(10px, 4.3cqi, 15px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0;
  /* Single fill for the combined "New & Trending" pill. The previous
     adjacent-sibling rule giving the second of two badges a flat white
     bg is gone: the snippet now renders one span instead of two, so
     there's no second sibling to disambiguate. */
  background-color: #c75e43;
  color: #fff;
}

/* ---------- Media actions (ATC + wishlist, Figma node 270:3211) ----------
   Flush bottom-right of the media box. Two 38x38 buttons with 10px gap:
   - ATC: filled #c75e43 with white bag icon. Either a <button> (single
     available variant, adds via fetch) or an <a> to the PDP (multi-variant).
   - Wishlist: Swym's st-wishlist-button[data-type="details"], white bg with
     #d3d3d3 half-pixel border and a #c75e43 heart. The `data-type="details"`
     variant is self-contained (we supply the SVG) so we can style it to
     match Figma — unlike `data-type="product-card"` which is injected by
     Swym's script and cannot be restyled.

   NOTE: the wishlist rules intentionally escalate to !important because
   Swym's own CSS in base.css and layout/theme.liquid apply !important to
   this exact selector (shared with the PDP/related-products details-type
   wishlist), and we need to override those sizes on the collection card. */

.collection-card__actions {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.collection-card__actions > * {
  pointer-events: auto;
}

/* Hover-capable devices: hide the actions wrapper by default and reveal
   it while the card is hovered or keyboard-focused. The buttons inside
   (ATC + wishlist) stay in the DOM and remain focusable — opacity is a
   cosmetic change that doesn't strip tab order, so keyboard users can
   still reach them and :focus-within keeps the group visible while a
   button is focused.

   Enter animation: buttons start pushed 16px to the right of their rest
   position (off the right edge of the media box) and slide leftward to
   translateX(0) while fading in. The expo-out curve matches the label
   expansion's feel. Any brief overflow past the media right-edge during
   the slide is covered by the parent card's `z-index: 10` on hover, so
   the buttons paint cleanly above neighboring cards in the grid. */
@media (hover: hover) {
  .collection-card__actions {
    opacity: 0;
    transform: translateX(16px);
  }

  .collection-card:hover .collection-card__actions,
  .collection-card:focus-within .collection-card__actions {
    opacity: 1;
    transform: translateX(0);
  }
}

.collection-card__atc-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.collection-card__atc-btn,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Action buttons scale with the card width — 38px at 4-col-desktop
     baseline, ~44-48px at 3-col, capped at 50px. Keeps the icons
     visually paired with the product image at every layout. The
     `!important` matches the existing pattern; Swym's base.css
     applies `!important` to this exact selector and we have to
     out-specify it. */
  width: clamp(34px, 14cqi, 50px) !important;
  height: clamp(34px, 14cqi, 50px) !important;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.collection-card__atc-btn {
  background-color: #fff;
  color: #c75e43;
  border: 1px solid #c75e43;
  text-decoration: none;
  /* Override the shared-rule width-clamp so the button can expand
     leftward on hover to reveal the label. Idle footprint matches the
     square ATC dimensions (clamp scales with card width); the auto
     width takes over once the label expands. */
  width: auto !important;
  min-width: clamp(34px, 14cqi, 50px) !important;
  padding: 0 11px;
}

.collection-card__atc-btn:hover,
.collection-card__atc-btn:focus-visible {
  background-color: #c75e43;
  color: #fff;
  border-color: #c75e43;
  outline: none;
}

.collection-card__atc-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(199, 94, 67, 0.45);
}

.collection-card__atc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}

.collection-card__atc-icon svg {
  display: block;
  /* Bucket icon scales with the button (clamp(34px, 14cqi, 50px)) so
     the icon-to-button ratio stays constant — ~42% of the button
     size at every container width. 16px at 4-col (button 38px), bumps
     to ~20px at 3-col, caps at 22px on very wide cards. */
  width: clamp(14px, 5.9cqi, 22px);
  height: clamp(22px, 5.9cqi, 22px);
}

/* "Add to cart" label — collapsed to zero width when idle so the button
   stays 38×38 (min-width). On hover / keyboard focus the label animates
   open via max-width + margin + opacity. Transitioning `max-width` rather
   than `width` is the standard pattern for content-driven expansion since
   `width: auto` cannot be interpolated.

   The transition list lives on BOTH states (idle + hover), but each
   direction picks up the transition-*values* from the state it's moving
   TO — a CSS trick that lets us stagger enter vs. leave independently:

   Enter (idle → hover): width opens with an ease-out-quart curve from
   0ms. Opacity waits 140ms so the text only fades in once the button
   has visibly expanded — prevents the label ghosting through a clipping
   edge while the box is still half-open.

   Leave (hover → idle): opacity fades out fast (no delay) so the text
   is already gone by the time the width begins collapsing 60ms later.
   Feels more settled than having both exit simultaneously. */
.collection-card__atc-label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-family: Poppins, sans-serif;
  /* Label scales with the button — same cqi factor as the bucket
     icon so the text-to-icon ratio stays balanced as the card grows.
     12px at 4-col (button 38px), ~14px at 3-col, caps at 15px. */
  font-size: clamp(11px, 4.5cqi, 15px);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  transition:
    max-width 0.55s cubic-bezier(0.19, 1, 0.22, 1) 90ms,
    margin-left 0.55s cubic-bezier(0.19, 1, 0.22, 1) 90ms,
    opacity 0.22s cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.collection-card__atc-btn:hover .collection-card__atc-label,
.collection-card__atc-btn:focus-visible .collection-card__atc-label {
  max-width: 200px;
  margin-left: 8px;
  opacity: 1;
  transition:
    max-width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0ms,
    margin-left 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0ms,
    opacity 0.3s cubic-bezier(0.45, 0, 0.55, 1) 280ms;
}

.collection-card__atc-btn .loading__spinner {
  position: absolute;
  inset: 0;
  width: auto;
  display: none;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.collection-card__atc-btn .loading__spinner .spinner {
  width: 18px;
  height: 18px;
}

.collection-card__atc-btn.loading .collection-card__atc-icon,
.collection-card__atc-btn.loading .collection-card__atc-label {
  opacity: 0;
}

.collection-card__atc-btn.loading .loading__spinner {
  display: flex;
}

/* Wishlist: override Swym's `st-wishlist-button[data-type="details"]` rules
   from base.css (56x56) and the generic theme rules. The !important here
   matches Swym's own usage of !important. */
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn {
  background-color: #fff !important;
  border: 0.5px solid #d3d3d3 !important;
  color: #c75e43 !important;
  /* Match the shared `width: clamp(...)` from the ATC/wishlist combo
     rule above so the button stays square at every container width.
     Hard-coding `flex-basis: 38px` here was overriding the width
     clamp and squashing the wishlist into a fixed 38px slot at 3-col
     where the height was scaling up to ~46px — visible as a tall,
     non-square button. Using `auto` lets the width clamp drive both
     axes equally. */
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease !important;
}

.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn svg {
  display: block;
  /* Heart scales with the wishlist button. Slightly smaller cqi
     factor than the bucket because the heart's viewBox is wider
     (26×22, ratio 1.18) — keeping width:height at the same SVG
     aspect ratio so it doesn't squash. Heights are width × (14/16). */
     width: clamp(20px, 1.5rem, 28px);
     height: clamp(20px, 1.5rem, 28px);
  color: inherit;
}

/* Only the scale animates. Color is deliberately NOT transitioned:
   when Swym toggles the added state it momentarily paints the heart's
   fill/currentColor (#000 black on the fill, white from the :hover
   state on the stroke), and a color transition tweens that → our
   #c75e43 over the duration — the user sees the heart flash black/white
   before settling to red. The `!important` is required to beat Dawn's
   `.st-wishlist-icon { transition: ... color 0.25s !important }` in
   base.css, which otherwise keeps animating the currentColor stroke. */
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn svg,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn .st-wishlist-icon {
  transition: transform 0.25s ease !important;
}

/* The heart path must NEVER animate fill/stroke/color, so the added-state
   red snaps in instantly. */
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn svg path {
  transition: none !important;
}

/* Mirror product-page (.st-wishlist-button[data-type="details"]) hover:
   keep the white background, switch border + heart to accent and bump
   the heart up to 1.1×. */
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:hover,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:focus-visible {
  background-color: #c75e43 !important;
  border-color: #c75e43 !important;
  outline: none !important;
  opacity: 1;
}

.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:hover svg,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:focus-visible svg {
  color: white !important;
  fill: none !important;
  transform: scale(1.1) !important;
}

/* Swym's "added to wishlist" state mirrors the product-page button:
   white background, accent border, filled accent heart. */
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn.st-added,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn[data-added='true'],
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn.st-is-added {
  background-color: #fff !important;
  border-color: #c75e43 !important;
  color: #c75e43 !important;
}

.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn.st-added svg,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn[data-added='true'] svg,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn.st-is-added svg {
  color: #c75e43 !important;
  /* stroke: #c75e43 !important; */
}

.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn.st-added svg path,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn[data-added='true'] svg path,
.collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn.st-is-added svg path {
  fill: #c75e43 !important;
}

/* ---------- Variant-picker popover (Figma node 270:3348) ----------
   Rendered only for multi-variant products, appears below the ATC button
   on hover / focus / click (click is the touch + keyboard path, toggled
   via the data-open attribute by the snippet's JS).

   Anchored right-aligned to the ATC button so it grows inward and never
   overflows the card's right edge. The 10px visual gap between button
   and popover is a painted transparent ::before on the popover — when
   the popover is open (pointer-events: auto), that bridge keeps the
   parent :hover alive while the cursor transits the gap. */

.collection-card__variant-popover {
  /* Anchored to `.collection-card__media` (its parent now), not the
     narrow `.collection-card__atc-wrap` like before. `top: 100%` puts
     it just below the media — overlapping the info area below — and
     `left: 0; right: 0` spans the full card width. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  /* Composite enter/leave: a small upward translate + slight scale-down.
     The expo-out cubic gives the popover a soft "settle" instead of a
     linear slide — more readable at small displacement than ease. */
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.28s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.32s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 10;
}

.collection-card__variant-popover-body {
  display: flex;
  flex-direction: column;
  /* Inner spacing scales with the card so the popover doesn't feel
     cramped at 3-col where the rest of the card grew, and stays
     compact at 4-col where the card is tight. */
  gap: clamp(8px, 3.5cqi, 14px);
  padding: clamp(6px, 2.8cqi, 12px);
  background-color: #fff;
  border: 0.5px solid #d3d3d3;
  box-shadow: 0 0 40px 0 rgba(17, 17, 17, 0.1);
  line-height: normal;
}

.collection-card__variant-popover-label {
  font-family: Poppins, sans-serif;
  /* "Choose Format" header — same scale as the meta line so the
     popover's typographic hierarchy mirrors the card itself. */
  font-size: clamp(11px, 4.4cqi, 15px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.36px;
  color: #111;
  white-space: nowrap;
}

/* Single-column list of variants, one per row. Full popover width so
   each tile can comfortably fit the variant image AND title side by
   side without wrapping. */
.collection-card__variant-swatches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* Per-tile row: image on the left, title to the right. `flex` (vs
   `inline-flex`) makes each tile stretch to the popover's full width.
   Hover/focus styles on the parent rule below still apply since the
   selectors target this class. */
.collection-card__variant-swatch {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Tile gap + padding scale with the card. */
  gap: clamp(6px, 2.8cqi, 12px);
  width: 100%;
  padding: clamp(3px, 1.4cqi, 6px);
  background-color: #fff;
  border: 0.5px solid #d3d3d3;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.collection-card__variant-swatch img {
  display: block;
  /* Variant thumbnail — 40px at 4-col, ~50px at 3-col, capped at 56.
     Square so width and height share the same clamp. */
  width: clamp(36px, 14cqi, 56px);
  height: clamp(36px, 14cqi, 56px);
  object-fit: cover;
  flex-shrink: 0;
}

/* Variant title — acts as the tile caption, sits to the right of the
   image. Allows up to 2 rows of wrap before truncating with ellipsis.
   `min-width: 0` is what allows wrapping/ellipsis to engage on a flex
   child; without it the title's intrinsic width would expand the row
   instead of wrapping. */
.collection-card__variant-swatch-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  font-family: Poppins, sans-serif;
  /* Tile caption matches the card's meta scale — keeps the popover
     consistent with the surrounding card typography. */
  font-size: clamp(11px, 4.4cqi, 15px);
  font-weight: 500;
  line-height: 1.25;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.collection-card__variant-swatch:hover,
.collection-card__variant-swatch:focus-visible {
  border-color: #c75e43;
  outline: none;
  box-shadow: 0 0 0 1px #c75e43;
}

.collection-card__variant-swatch--unavailable,
.collection-card__variant-swatch[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.collection-card__variant-swatch .loading__spinner {
  position: absolute;
  inset: 0;
  width: auto;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  color: #c75e43;
}

.collection-card__variant-swatch .loading__spinner .spinner {
  width: 20px;
  height: 20px;
}

.collection-card__variant-swatch.loading .loading__spinner {
  display: flex;
}

/* ---------- Info block ---------- */

.collection-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  flex: 1 1 auto;
  z-index: 1;
}

/* Typography scales with the card's inline size via `cqi` (1cqi = 1%
   of the container's inline width). The `clamp(min, preferred, max)`
   keeps sizes sensible at extreme widths:
   - 4-col-desktop card (~250px): hits or stays near the min.
   - 3-col-desktop card (~335px): preferred takes over → noticeably
     larger title/meta to balance the bigger image.
   - 2-col / 1-col layouts (≥480px wide): caps at max so things
     don't get cartoonish.
   The cqi factors are tuned so meta sits ~2pt below title at every
   card width (per "label/format same as artist, 1-2pt below title"). */

.collection-card__meta {
  color: #999;
  font-family: Poppins, sans-serif;
  font-size: clamp(10px, 4.4cqi, 15px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Ship-date sits below the price, centered, in the accent color so the
   preorder shipping date reads as a callout under the buy info. */
.collection-card__meta-ship {
  display: flex;
  align-items: center;
  color: #c75e43;
  font-family: Poppins, sans-serif;
  font-size: clamp(10px, 4.4cqi, 15px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: auto;
}

.collection-card__title {
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-family: Poppins, sans-serif;
  /* Title scales 2pt above meta at every container width. Same `cqi`
     factor as meta, with min/max bumped by 2 so the offset holds. */
  font-size: clamp(12px, 5.2cqi, 18px);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.collection-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.collection-card__title-link:hover,
.collection-card__title-link:focus-visible {
  color: #c75e43;
  text-decoration: none;
  outline: none;
}

.collection-card__artist {
  color: #6b6b6b;
  font-family: Poppins, sans-serif;
  /* Same scale as meta — both sit one tier below the title and read
     as supporting metadata. */
  font-size: clamp(10px, 4.4cqi, 15px);
  font-weight: 400;
  line-height: 1.4;
}

/* ---------- Price ----------
   Override Dawn's component-price.css rules for price-item/price-regular
   typography so the collection card matches Figma's Montserrat 16/24 +1px
   spec. Montserrat isn't in the theme's font stack, so we fall back to
   Poppins and finally sans-serif. */

.collection-card__price {
  margin-top: auto;
  color: #393e46;
  font-family: Montserrat, Poppins, sans-serif;
  /* Price scales most aggressively — at 4-col it's the visual anchor
     (~16px), at 3-col it grows to ~21px to hold its weight against
     the larger product image. Min stays at 15 so mobile cards still
     read clearly. */
  font-size: clamp(15px, 6.4cqi, 22px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1px;
}

.collection-card__price .price,
.collection-card__price .price--on-sale,
.collection-card__price .price-item,
.collection-card__price .price__regular,
.collection-card__price .price__sale {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

.collection-card__price .price__sale .price-item--sale,
.collection-card__price .price__sale .price-item--regular {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.collection-card__price .price-item--regular {
  color: inherit;
}

.collection-card__price .price__sale .price-item--regular {
  color: #999;
}

/* Remove Dawn's "unit price" label clutter inside the card — Figma shows
   a single price line only. If this ever needs to be reinstated, delete
   this rule. */
.collection-card__price .price__unit {
  display: none;
}

/* ---------- 4-col-desktop baseline ----------
   The Figma comp is drawn at 4-col-desktop. At that grid the card
   already hits the design-system sizes naturally; the cqi clamps
   above only need to engage when the grid switches to 3/2/1-col
   (or mobile), where the cards become wider and fixed sizes start
   to feel small against the larger product image.

   IMPORTANT: Dawn renders `grid--{N}-col-desktop` on `#product-grid`
   at every viewport — the desktop-suffix is naming convention, not
   a media-query gate. Dawn's own layout rules wrap these classes in
   `@media (min-width: 990px)` (see base.css:1003). We have to do the
   same here, otherwise these "desktop baseline" sizes leak onto
   mobile and override the cqi clamps from the @media block below. */
@media screen and (min-width: 990px) {
  #product-grid.grid--4-col-desktop .collection-card__meta {
    font-size: 10px;
    line-height: 15px;
  }
  #product-grid.grid--4-col-desktop .collection-card__title {
    font-size: 13px;
    line-height: 16.2px;
  }
  #product-grid.grid--4-col-desktop .collection-card__artist {
    font-size: 10.3px;
    line-height: 16.5px;
  }
  #product-grid.grid--4-col-desktop .collection-card__price {
    font-size: 16px;
    line-height: 24px;
  }

  /* Wishlist: pin to a fixed 38×38 idle footprint at 4-col baseline. */
  #product-grid.grid--4-col-desktop .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn {
    width: 38px !important;
    height: 38px !important;
  }
  /* ATC: width MUST stay `auto` so the label slot can open on hover/
     focus (max-width transition on `.collection-card__atc-label`).
     Locking width:38px here would freeze the button at idle and kill
     the expand animation. We only pin the height and the idle
     min-width — the cqi clamp from above is overridden by the ID-
     scoped rule's higher specificity. */
  #product-grid.grid--4-col-desktop .collection-card__atc-btn {
    width: auto !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  #product-grid.grid--4-col-desktop .collection-card__atc-icon svg {
    width: 16px;
    height: 16px;
  }
  #product-grid.grid--4-col-desktop .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn svg {
    width: 16px;
    height: 14px;
  }
  #product-grid.grid--4-col-desktop .collection-card__atc-label {
    font-size: 12px;
  }

  #product-grid.grid--4-col-desktop .collection-card__badges .product-badge {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
  #product-grid.grid--4-col-desktop .collection-card__inventory-badge {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
  #product-grid.grid--4-col-desktop .collection-card__collection-badge {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 16px;
  }

  #product-grid.grid--4-col-desktop .collection-card__variant-popover-body {
    gap: 10px;
    padding: 8px;
  }
  #product-grid.grid--4-col-desktop .collection-card__variant-popover-label {
    font-size: 12px;
    line-height: 12px;
  }
  #product-grid.grid--4-col-desktop .collection-card__variant-swatch {
    gap: 8px;
    padding: 4px;
  }
  #product-grid.grid--4-col-desktop .collection-card__variant-swatch img {
    width: 40px;
    height: 40px;
  }
  #product-grid.grid--4-col-desktop .collection-card__variant-swatch-title {
    font-size: 12px;
  }
}

/* ---------- Mobile overrides (Figma 269:1635, ≤768px) ----------
   Scoped to the collection card only — this CSS is loaded exclusively
   from the collection grid section per CLAUDE.md, so tightening these
   sizes has no reach into card-product usages on the PDP, search,
   related products, recently viewed, or complementary sliders. */

@media screen and (max-width: 768px) {
  /* Info — Figma collapses padding-top to 5px and the outer gap to 5px
     (inner meta/title/artist gap is 4px in Figma; the current single
     flex gap averages both breaks, close enough without restructuring
     markup). */
  .collection-card__info {
    gap: 5px;
    padding-top: 5px;
  }


  /* Title size is now driven by the container query on `.collection-card`
     (`clamp(12px, 5.2cqi, 18px)`). At a 2-col mobile card width
     (~170px) the cqi factor underflows the 12px min and the clamp
     pins to it, matching Figma's mobile spec automatically. No
     explicit override needed here. */

  /* Combined "New & Trending" pill — tighter sizing on mobile. Shares
     the single filled fill from the base rule above. */
  .collection-card__collection-badge {
    padding: 2px 8px;
    font-size: 10px;
  }

  /* Product-badge output (PREORDER / BACKORDER / SHIPPING NOW / N% OFF
     / OUT OF STOCK) inside the card's badge column. The underlying
     component-product-badge.css is shared with other surfaces, so we
     re-type these under .collection-card__badges to avoid bleeding.
     Figma specs: height 22px, padding 10px horizontal, 10px font,
     SemiBold, uppercase, -0.3px letter-spacing, 24.75px line. */
  .collection-card__badges .product-badge {
    height: 22px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 24.75px;
    letter-spacing: -0.3px;
  }

  /* "N LEFT" inventory badge — matches the mobile product-badge sizing
     so the stacked column reads consistently. Colors still come per-card
     from theme settings via inline style. */
  .collection-card__inventory-badge {
    height: 22px;
    padding: 0 10px;
    font-size: 10px;
    line-height: 24.75px;
    letter-spacing: -0.3px;
  }

  /* Tighten the badge-column gap (Figma shows ~6px vertical between
     PREORDER and 5 LEFT vs the 5px default — fine to keep 5px for
     consistency; uncomment if Figma-match becomes critical). */
  /* .collection-card__badges { gap: 6px; } */

  /* ---------- Wishlist relocates to top-left on mobile (Figma 269:1635) ----

     Desktop groups ATC + wishlist flush bottom-right inside
     `.collection-card__actions`. On mobile Figma splits them: ATC stays
     bottom-right, wishlist moves to the top-left corner of the media.

     Rather than restructuring the liquid markup (which keeps desktop
     layout + Swym's wiring intact), we dissolve the actions wrapper on
     mobile with display:contents. Its children then lay out as direct
     descendants of `.collection-card__media` (which is position:relative),
     so absolute positioning on ATC and wishlist resolves against the
     media box instead of the now-static wrapper. */

  .collection-card__actions {
    position: static;
    display: contents;
  }

  /* ATC keeps the bottom-right perch. Targeting direct children of
     actions so we hit either `.collection-card__atc-btn` (single-variant
     path) or `.collection-card__atc-wrap` (multi-variant popover
     wrapper) — whichever the snippet rendered. */
  .collection-card__actions > .collection-card__atc-btn,
  .collection-card__actions > .collection-card__atc-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
  }

  /* Wishlist heart → top-left. Transparent chrome per Figma (no white
     bg / border on mobile). 32×32 touch target around the 20×20 icon.
     !important matches the pattern Swym's base.css uses for the same
     selector — same reasoning CLAUDE.md documents for the desktop rules. */
  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
    background-color: transparent !important;
    border: 0 !important;
    color: #c75e43 !important;
    z-index: 3 !important;
  }

  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn svg {
    width: 21px;
    height: 22px;
    color: #c75e43;
  }

  /* Force the heart stroke to #C75E43 on mobile. Swym's own base.css
     sometimes paints currentColor fallback as #000 via inline attributes
     on the svg path — explicit stroke here wins regardless. */
  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn svg path {
    stroke: #c75e43 !important;
  }

  /* Hover/focus on the transparent mobile variant — no border to flip,
     so the product-page-style 1.1× scale on the heart is the only
     hover affordance. */
  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:hover,
  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:focus-visible {
    border-color: transparent !important;
    background-color: transparent !important;
  }

  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:hover svg,
  .collection-card .st-wishlist-button[data-type="details"].collection-card__wishlist-btn:focus-visible svg {
    color: #c75e43 !important;
    transform: scale(1.1) !important;
  }

  /* Variant tiles on mobile: drop the image (cards are too narrow for
     a 40px swatch + title combo to feel comfortable) and shrink the
     title slightly. The tile becomes a text-only row, like a compact
     selectable list item. */
  .collection-card__variant-swatch img {
    display: none;
  }

  .collection-card__variant-swatch-title {
    font-size: 11px;
  }

  /* ---------- 1-col-tablet-down adjustments ----------
     With one product per row on mobile, the card is ~2× wider than
     the 2-col baseline (~170px → ~340px). The fixed mobile sizes
     above (10px badges, 32×32 wishlist, 22×22 heart) were tuned for
     2-col and look proportionally tiny next to the larger image.
     Re-enable the cqi clamps for these surfaces so they scale up
     to match. The grid class is on `#product-grid`, so `+ ID
     specificity` out-ranks the plain-class overrides above. */

  #product-grid.grid--1-col-tablet-down .collection-card__collection-badge {
    padding: clamp(2px, 1.2cqi, 5px) clamp(9px, 3.65cqi, 13px);
    font-size: clamp(10px, 4.3cqi, 15px);
    line-height: 1.25;
  }

  #product-grid.grid--1-col-tablet-down .collection-card__badges .product-badge {
    height: clamp(24px, 9cqi, 32px);
    padding: 0 clamp(8px, 3.4cqi, 12px);
    font-size: clamp(10px, 4cqi, 14px);
    line-height: 1;
  }

  #product-grid.grid--1-col-tablet-down .collection-card__inventory-badge {
    height: clamp(24px, 9cqi, 32px);
    padding: 0 clamp(8px, 3.4cqi, 12px);
    font-size: clamp(10px, 4cqi, 14px);
  }

  /* 1-product-per-row: undo the mobile split (wishlist top-left,
     transparent chrome) and restore the desktop "actions row" — ATC +
     wishlist sit side-by-side at the bottom-right of the media box,
     wishlist with the white-bg + 0.5px border chrome. Wider cards have
     room for the paired layout, so the top-left transparent heart
     becomes redundant. */
  #product-grid.grid--1-col-tablet-down .collection-card__actions {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    /* Override the desktop `@media (hover: hover)` rule that hides the
       actions row until card hover — at 1-col mobile we want the ATC +
       wishlist visible by default with no hover-to-reveal animation. */
    opacity: 1;
    transform: none;
  }

  /* Re-anchor ATC into the flex flow instead of the absolute slot the
     `.collection-card__actions { display: contents }` mobile rule
     gives it. */
  #product-grid.grid--1-col-tablet-down .collection-card__actions > .collection-card__atc-btn,
  #product-grid.grid--1-col-tablet-down .collection-card__actions > .collection-card__atc-wrap {
    position: static;
    right: auto;
    bottom: auto;
  }

  /* Wishlist restored to desktop chrome: white bg, light border, sits
     inline next to ATC. Sized larger than the 2-col mobile transparent
     version because cards are ~2× wider here. */
  #product-grid.grid--1-col-tablet-down
    .collection-card
    .st-wishlist-button[data-type="details"].collection-card__wishlist-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* Match the ATC button's clamp (`clamp(34px, 14cqi, 50px)` from the
       shared `.collection-card__atc-btn, .collection-card__wishlist-btn`
       rule) so the wishlist square sits flush with the ATC's idle
       footprint at every card width. */
    width: clamp(34px, 14cqi, 50px) !important;
    height: clamp(34px, 14cqi, 50px) !important;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    background-color: #fff !important;
    border: 0.5px solid #d3d3d3 !important;
    color: #c75e43 !important;
  }

  #product-grid.grid--1-col-tablet-down
    .collection-card
    .st-wishlist-button[data-type="details"].collection-card__wishlist-btn
    svg {
    width: clamp(20px, 1.5rem, 28px);
    height: clamp(20px, 1.5rem, 28px);
  }

  /* Re-enable the accent border + bg on hover/focus — the 2-col mobile
     hover rule above zeroes `border-color` and `background-color` to
     transparent (it was tuned for the transparent floating heart at
     top-left). At 1-col we restored the white-bg chrome, so the
     product-page-style hover (white bg, accent border, accent heart)
     needs to win back. Higher specificity (`#id + class` outranks the
     2-col rule's `.collection-card + .st-wishlist-button`) so no
     stronger `!important` is needed beyond the existing one. */
     #product-grid.grid--1-col-tablet-down
     .collection-card
     .st-wishlist-button[data-type="details"]{
      border-width: 1px;
     }
    #product-grid.grid--1-col-tablet-down
    .collection-card
    .st-wishlist-button[data-type="details"].st-is-added {
    background-color: #fff !important;
    border-color: #c75e43 !important;
    color: #c75e43 !important;
    border: 1px solid #c75e43 !important;
  }

  #product-grid.grid--2-col-tablet-down
  .collection-card
  .st-wishlist-button[data-type="details"].st-is-added {
    background-color: transparent !important;
  }

  /* Reset Swym's path stroke override — desktop styling lets
     currentColor drive the heart so hover/active states paint cleanly
     (the explicit stroke:#c75e43 from the 2-col mobile rule would
     fight the hover transition). */
  #product-grid.grid--1-col-tablet-down
    .collection-card
    .st-wishlist-button[data-type="details"].collection-card__wishlist-btn
    svg path {
    stroke: currentColor !important;
  }

  /* Restore the variant tile thumbnail at 1-col mobile (the 2-col
     hide rule above is too aggressive when there's plenty of card
     room). Title sizes back up via the meta-scale clamp. */
  #product-grid.grid--1-col-tablet-down .collection-card__variant-swatch img {
    display: block;
    width: clamp(36px, 11cqi, 48px);
    height: clamp(36px, 11cqi, 48px);
  }

  #product-grid.grid--1-col-tablet-down .collection-card__variant-swatch-title {
    font-size: clamp(11px, 4.4cqi, 15px);
  }

  /* 1-product-per-row gets a slightly taller media box, so nudge the
     slider dots up from 6px to 10px to keep visual breathing room
     above the bottom edge. */
  #product-grid.grid--1-col-tablet-down .collection-card__dots {
    bottom: 10px;
  }

  /* When a New / Trending pill is present at bottom-left, shift the
     dots right so the row clears the pill. Shift amount scales with
     the pill's text length — "New" is shortest, "New & Trending" is
     widest. The `[data-badge-variant]` attribute is stamped onto the
     `.collection-card__collection-badges` wrapper by
     card-product-collection.liquid so CSS can pick the right offset
     without measuring text. */
  #product-grid.grid--1-col-tablet-down
    .collection-card__media:has(.collection-card__collection-badges[data-badge-variant="new"])
    .collection-card__dots {
    left: 45%;
  }

  #product-grid.grid--1-col-tablet-down
    .collection-card__media:has(.collection-card__collection-badges[data-badge-variant="trending"])
    .collection-card__dots {
    left: 48%;
  }

  #product-grid.grid--1-col-tablet-down
    .collection-card__media:has(.collection-card__collection-badges[data-badge-variant="new-trending"])
    .collection-card__dots {
    left: 55%;
  }

  /* #product-grid.grid--2-col-tablet-down
    .collection-card__media:has(.collection-card__collection-badges[data-badge-variant="new"])
    .collection-card__dots {
    left: 50%; 
  }

  #product-grid.grid--2-col-tablet-down
    .collection-card__media:has(.collection-card__collection-badges[data-badge-variant="trending"])
    .collection-card__dots {
    left: 57%;
  }

  #product-grid.grid--2-col-tablet-down
    .collection-card__media:has(.collection-card__collection-badges[data-badge-variant="new-trending"])
    .collection-card__dots {
      left: 45%;
   
  } */
}

.product-badge--mixed {
  --badge-text: #7a5a55;
  --badge-bg: #f0eded;
  --badge-accent: #7a5a55;
}

/* ============================================================
   Variant rail — full-width sweep trigger (multi-variant cards)

   Sits above .collection-card__collection-badges (z-index 3) so the
   New/Trending pill is covered as the bar sweeps left. The rail spans
   the media box, which is what makes `width: 100%` on the button mean
   "the full card width" rather than "as wide as the actions group".
   ============================================================ */
.collection-card__variant-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  /* Reserve the wishlist's slot + the 10px .collection-card__actions gap,
     so the idle trigger lands to the LEFT of the heart instead of exactly
     on top of it. Collapses to 0 during the sweep so the bar still reaches
     the card's right edge. */
  --arc-trigger-size: clamp(34px, 14cqi, 50px);
  padding-right: calc(var(--arc-trigger-size) + 10px);
  transition:
    opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
  .collection-card__variant-rail {
    opacity: 0;
    transform: translateX(16px);
  }

  .collection-card:hover .collection-card__variant-rail,
  .collection-card:focus-within .collection-card__variant-rail {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tap-opened cards keep the rail visible on pointer devices too. On touch the
   rail is already visible (the block above never matches), so this is a no-op
   there. */
.collection-card:has([data-collection-card-atc-wrap][data-open='true']) .collection-card__variant-rail {
  opacity: 1;
  transform: translateX(0);
}

.collection-card__variant-rail .collection-card__atc-wrap {
  pointer-events: auto;
  width: var(--arc-trigger-size);
  transition: width 0.55s cubic-bezier(0.19, 1, 0.22, 1) 90ms;
}

/* position: relative anchors the absolutely-pinned icon below. Padding is
   gone from both states, so nothing can shift the contents mid-sweep. */
.collection-card__variant-rail .collection-card__atc-btn {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start;
  padding: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.collection-card__variant-rail .collection-card__atc-icon {
  flex: 0 0 auto;
  width: calc(var(--arc-trigger-size) - 2px);
}

/* Out-specifies `#product-grid.grid--4-col-desktop .collection-card__atc-btn
   { width: auto !important }` further up this file. Search results have no
   #product-grid, which is why the sweep appears to work there and breaks on
   /collections/*. */
#product-grid .collection-card__variant-rail .collection-card__atc-btn {
  width: 100% !important;
  min-width: 0 !important;
}

/* Idle: collapsed. Leave timing mirrors the single-variant button - text fades
   out first, the box closes 90ms later, so the icon glides back rather than
   snapping. */
.collection-card__variant-rail .collection-card__atc-label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transition:
    max-width 0.55s cubic-bezier(0.19, 1, 0.22, 1) 90ms,
    margin-left 0.55s cubic-bezier(0.19, 1, 0.22, 1) 90ms,
    opacity 0.22s cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

/* The theme's own rule sets margin-left: 8px while the button itself is
   hovered; ours is 10px in every other open state, and that 2px gap showed as
   a jump when the cursor crossed from the button into the panel. Pin it here -
   0,4,0 out-specifies the theme's 0,3,0. */
.collection-card__variant-rail .collection-card__atc-btn:hover .collection-card__atc-label,
.collection-card__variant-rail .collection-card__atc-btn:focus-visible .collection-card__atc-label {
  margin-left: 10px;
}


/* ============================================================
   Stage 2: panel unrolls downward.
   REPLACES the translateY/scale transition on
   .collection-card__variant-popover further up this file.
   ============================================================ */
.collection-card__variant-popover {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.34s cubic-bezier(0.19, 1, 0.22, 1) 0ms,
    opacity 0.18s ease 0ms;
}

/* ============================================================
   Open state, split by input type.

   Hover triggers are pointer-only. On touch, :hover latches after a tap and
   :focus-within stays on the focused button, so the second tap set
   data-open="false" and these selectors immediately re-opened the panel.
   The data-open branch works everywhere; :focus-visible keeps keyboard
   access without ever matching a tap.
   ============================================================ */
@media (hover: hover) {
  .collection-card:has(.collection-card__variant-rail:hover) .collection-card__atc-wrap,
  .collection-card:has(.collection-card__variant-popover:hover) .collection-card__atc-wrap {
    width: 100%;
    transition: width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0ms;
  }

  .collection-card:has(.collection-card__variant-rail:hover) .collection-card__atc-btn,
  .collection-card:has(.collection-card__variant-popover:hover) .collection-card__atc-btn {
  background-color: #c75e43;
  color: #fff;
  border-color: #c75e43;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  }

  .collection-card:has(.collection-card__variant-rail:hover) .collection-card__atc-label,
  .collection-card:has(.collection-card__variant-popover:hover) .collection-card__atc-label {
    max-width: 200px;
    margin-left: 10px;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.45, 0, 0.55, 1) 280ms;
  }

  .collection-card:has(.collection-card__variant-rail:hover) .collection-card__variant-popover,
  .collection-card:has(.collection-card__variant-popover:hover) .collection-card__variant-popover {
    transform: none;
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: auto;
    transition:
      clip-path 0.42s cubic-bezier(0.45, 0, 0.55, 1) 300ms,
      opacity 0.18s ease 300ms;
  }
}

/* Tap toggle and keyboard — every device. */
.collection-card:has([data-collection-card-atc-wrap][data-open='true']) .collection-card__atc-wrap,
.collection-card:has(.collection-card__variant-rail .collection-card__atc-btn:focus-visible) .collection-card__atc-wrap {
  width: 100%;
  transition: width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0ms;
}

.collection-card:has([data-collection-card-atc-wrap][data-open='true']) .collection-card__atc-btn,
.collection-card:has(.collection-card__variant-rail .collection-card__atc-btn:focus-visible) .collection-card__atc-btn {
  background-color: #c75e43;
  color: #fff;
  border-color: #c75e43;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.collection-card:has([data-collection-card-atc-wrap][data-open='true']) .collection-card__atc-label,
.collection-card:has(.collection-card__variant-rail .collection-card__atc-btn:focus-visible) .collection-card__atc-label {
  max-width: 200px;
  margin-left: 10px;
  opacity: 1;
  transition:
    max-width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0ms,
    margin-left 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0ms,
    opacity 0.3s cubic-bezier(0.45, 0, 0.55, 1) 280ms;

.collection-card:has([data-collection-card-atc-wrap][data-open='true']) .collection-card__variant-popover,
.collection-card:has(.collection-card__variant-rail .collection-card__atc-btn:focus-visible) .collection-card__variant-popover {
  transform: none;
  clip-path: inset(0 0 0 0);
  opacity: 1;
  pointer-events: auto;
  transition:
    clip-path 0.42s cubic-bezier(0.45, 0, 0.55, 1) 300ms,
    opacity 0.18s ease 300ms;
}

/* ---------- Panel rows: title + price, status + ETA ---------- */
.collection-card__variant-swatch-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.collection-card__variant-swatch-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.collection-card__variant-swatch-price {
  flex-shrink: 0;
  font-family: Montserrat, Poppins, sans-serif;
  font-size: clamp(11px, 4.4cqi, 15px);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #393e46;
}

.collection-card__variant-swatch-status {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(9px, 3.4cqi, 12px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--arc-status, #393e46);
}

.collection-card__variant-swatch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.collection-card__variant-swatch-status--in-stock    { --arc-status: #2e6644; }
.collection-card__variant-swatch-status--preorder    { --arc-status: #c75e43; }
.collection-card__variant-swatch-status--backorder   { --arc-status: #8d4936; }
.collection-card__variant-swatch-status--coming-soon { --arc-status: #5ba3d4; }
.collection-card__variant-swatch-status--sold-out    { --arc-status: #7a5a55; }

@media (prefers-reduced-motion: reduce) {
  .collection-card__variant-rail,
  .collection-card__variant-rail .collection-card__atc-wrap,
  .collection-card__variant-rail .collection-card__atc-btn,
  .collection-card__variant-rail .collection-card__atc-label,
  .collection-card__variant-popover {
    transition-duration: 0.01ms !important;
  }
}

@media screen and (max-width: 768px) {
  /* At 2-col the theme relocates the wishlist to the media's top-left, so
     the slot the rail reserves beside the trigger is empty - it just pushes
     the button off the right edge. Reclaim it. */
  .collection-card__variant-rail {
    padding-right: 0;
  }

  /* ...except at 1-col, where the theme puts the wishlist back beside the
     trigger in the bottom-right row, so the reservation is still correct. */
  #product-grid.grid--1-col-tablet-down .collection-card__variant-rail {
    padding-right: calc(var(--arc-trigger-size) + 10px);
  }
}

/* ============================================================
   Variant panel: flush rows.
   Image sits on the panel's left border, price on the right; rows are
   separated by a hairline instead of each being its own bordered box.
   The #product-grid overrides above re-add padding/gap at 4-col, so
   these are ID-scoped to out-specify them.
   ============================================================ */
.collection-card__variant-popover-body,
#product-grid .collection-card__variant-popover-body,
#product-grid.grid--4-col-desktop .collection-card__variant-popover-body {
  gap: 0;
  padding: 0;
}

.collection-card__variant-swatches {
  gap: 0;
}

.collection-card__variant-swatch,
#product-grid .collection-card__variant-swatch,
#product-grid.grid--4-col-desktop .collection-card__variant-swatch {
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 0.5px solid #d3d3d3;
}

.collection-card__variant-swatch:last-child {
  border-bottom: 0;
}

/* Thumbnail flush to the left and to both row edges. */
.collection-card__variant-swatch img,
#product-grid .collection-card__variant-swatch img,
#product-grid.grid--4-col-desktop .collection-card__variant-swatch img {
  align-self: center;
  width: clamp(40px, 15cqi, 56px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #fff;
  flex-shrink: 0;
}

/* Text block carries the only inset, so the price clears the right edge. */
.collection-card__variant-swatch-body {
  padding: 8px 10px;
}

/* No thumbnail on 2-col mobile, so the text needs its own left inset. */
@media screen and (max-width: 768px) {
  .collection-card__variant-swatch-body {
    padding-left: 10px;
  }
}

/* Hover reads as a fill rather than a ring - a border would shift the row
   now that the padding is gone. #fcf7f5 is the same blush used by
   .arc-disclaimer on the product page. */
.collection-card__variant-swatch:hover,
.collection-card__variant-swatch:focus-visible {
  background-color: #fcf7f5;
  border-color: #d3d3d3;
  box-shadow: none;
  outline: none;
}

.collection-card__variant-swatch:focus-visible {
  box-shadow: inset 0 0 0 1px #c75e43;
}

/* The wishlist is pinned to a fixed 38px at 4-col desktop
   (#product-grid.grid--4-col-desktop … wishlist-btn), but the rail sizes
   itself from clamp(34px, 14cqi, 50px), which resolves to 34.3px on a
   245px card. That left the trigger 4px narrower than the heart AND the
   reserved slot 4px too small, so the bar clipped the heart's left edge.
   Pin both to the heart's real footprint. */
@media screen and (min-width: 990px) {
  /* The wishlist is pinned to a fixed 38px here, so the trigger matches it.
     Only the variable is set - the wrap's width rule is untouched, so the
     sweep's `width: 100%` still wins. */
  #product-grid.grid--4-col-desktop .collection-card__variant-rail {
    --arc-trigger-size: 38px;
  }

    #product-grid.grid--4-col-desktop .collection-card__atc-btn {
    padding: 0 10px;
  }
}

@media (hover: none) {
  .collection-card__atc-btn:hover .collection-card__atc-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
  }
}