/* ==========================================================================
   Collection (listing) page refresh
   --------------------------------------------------------------------------
   Everything is scoped under .collection-v2 so the shared component styles in
   front.css (product cards, page hero) keep working untouched everywhere else
   they are used — notably Views/Product/_ProductRelated.cshtml, which renders
   the same _ProductCard partial.

   Token names mirror home.css (--h-*) so the two pages stay in step; they are
   deliberately re-declared here rather than shared so neither file can break
   the other.
   ========================================================================== */

.collection-v2 {
  --c-ink: #1A1528;
  --c-plum: var(--brand-primary);
  --c-plum-deep: #5B1670;
  --c-indigo: var(--brand-primary-dark);
  --c-gold: var(--brand-accent);
  --c-gold-light: var(--brand-accent-light);
  --c-line: rgba(138, 38, 164, 0.12);
  --c-line-soft: rgba(138, 38, 164, 0.07);
  --c-radius: 14px;
  --c-radius-lg: 22px;
  --c-shadow-rest: 0 1px 2px rgba(26, 21, 40, 0.04), 0 8px 24px -12px rgba(26, 21, 40, 0.14);
  --c-shadow-lift: 0 2px 4px rgba(26, 21, 40, 0.05), 0 26px 48px -18px rgba(72, 67, 159, 0.34);
  --c-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.collection-v2 .page-hero {
  /* The rings are pulled in below, so the tile is wiped back over a narrower band than the
     shared hero uses - otherwise the pattern would fade out well before it meets a ring.
     The clear bands are exactly what each ring shows - 20rem - 8rem, both sides - so the
     tile is already gone where a ring starts instead of the two patterns stacking up in
     the same corner. */
  --hero-tile-clear-start: min(12rem, 17%);
  --hero-tile-clear-end: min(12rem, 17%);
  --hero-tile-fade-start: calc(var(--hero-tile-clear-start) + 3rem);
  --hero-tile-fade-end: calc(var(--hero-tile-clear-end) + 3rem);
  /* Shorter now that the lead paragraph is gone and the stats sit beside the
     title - the products should be what greets you on load. */
  padding: clamp(1rem, 2vw, 1.45rem) 0 clamp(1rem, 2vw, 1.4rem);
}

/* The shared mandala rings are scaled for the taller hero on other pages; at
   this height they would swamp the copy, so they are pulled in proportionally.
   Both stay the same size as each other, as they do on the shared hero. */
.collection-v2 .page-hero::before,
.collection-v2 .page-hero::after {
  width: 20rem;
  margin-top: -10rem;
}

.collection-v2 .page-hero::before { right: -8rem; }
.collection-v2 .page-hero::after { left: -8rem; }

/* front.css shrinks the rings on phones, but those rules are plain `.page-hero::before`
   selectors - the `.collection-v2` prefix above outranks them at every width, so without
   this block the hero keeps its 20rem ring on a ~390px viewport and the two rings and the
   tile all pile into the same space. Anything added to the rules above needs a phone
   counterpart here; it will not fall back to the shared one. */
@media (max-width: 767.98px) {
  .collection-v2 .page-hero {
    /* Clear bands track the shrunk rings below: 12rem - 5.5rem, both sides. */
    --hero-tile-clear-start: min(6.5rem, 17%);
    --hero-tile-clear-end: min(6.5rem, 17%);
    --hero-tile-fade-start: calc(var(--hero-tile-clear-start) + 2rem);
    --hero-tile-fade-end: calc(var(--hero-tile-clear-end) + 2rem);
  }

  .collection-v2 .page-hero::before,
  .collection-v2 .page-hero::after {
    width: 12rem;
    margin-top: -6rem;
  }

  .collection-v2 .page-hero::before { right: -5.5rem; }
  .collection-v2 .page-hero::after { left: -5.5rem; }
}

/* --------------------------------------------------------------------------
   Hero motifs
   --------------------------------------------------------------------------
   A mandala is the house ornament, but it reads as a chakra behind a listing of
   prayer beads or cut sapphires. Each branch of the catalogue swaps the three
   --hero-motif-* layers declared on .page-hero in front.css; the gradients, ring
   geometry and animations above are untouched, so a motif is only ever the three
   images - a tile and two counter-rotating rings.

   The class comes from WebHelpers/CollectionHeroMotif.cs, which maps the
   category slug to the modifier - keep the two in step when adding a motif.
   -------------------------------------------------------------------------- */

/* Rudraksha: grooved mukhi beads, ringed by the smaller seeds they are strung
   with. */
.collection-v2 .page-hero.hero-motif-rudraksha {
  --hero-motif-tile: url("../images/site/hero-rudraksha.svg");
  --hero-motif-ring-outer: url("../images/site/rudraksha-outer.svg");
  --hero-motif-ring-inner: url("../images/site/rudraksha-inner.svg");
}

/* Gemstones: brilliant cuts seen face-on - girdle, crown facets and table -
   with four-point glints filling the gaps. */
.collection-v2 .page-hero.hero-motif-gemstone {
  --hero-motif-tile: url("../images/site/hero-gemstone.svg");
  --hero-motif-ring-outer: url("../images/site/gemstone-outer.svg");
  --hero-motif-ring-inner: url("../images/site/gemstone-inner.svg");
}

/* Bracelets: strung wrist circlets, graduated beads alternating with spacers. */
.collection-v2 .page-hero.hero-motif-bracelet {
  --hero-motif-tile: url("../images/site/hero-bracelet.svg");
  --hero-motif-ring-outer: url("../images/site/bracelet-outer.svg");
  --hero-motif-ring-inner: url("../images/site/bracelet-inner.svg");
}

/* Mala & Yantras: a japa mala - bead-loop lattice behind two turning strands of
   beads, each with its guru bead and tassel. */
.collection-v2 .page-hero.hero-motif-mala {
  --hero-motif-tile: url("../images/site/hero-mala.svg");
  --hero-motif-ring-outer: url("../images/site/mala-outer.svg");
  --hero-motif-ring-inner: url("../images/site/mala-inner.svg");
}

/* No branch in play - Jewelry, a search, the unfiltered listing. The mandala
   stays, but only as a small chakra tile: the two large rings are what make the
   banner read as a statement about a category, and there is no category here to
   make it about. The tile keeps its own size at every width (this outranks the
   phone rules in front.css and above, so it does not fall back to either). */
.collection-v2 .page-hero.hero-motif-chakra {
  /* No rings for the tile to run into, so there is nothing to clear a band for and it
     reaches further in than it does on a category hero - but the wipe stays wide enough
     to leave the title and the stat chips on flat colour, which is where the hero's
     measured contrast came from. */
  --hero-tile-clear-start: 0px;
  --hero-tile-clear-end: 0px;
  --hero-tile-fade-start: min(9rem, 20%);
  --hero-tile-fade-end: min(9rem, 20%);
  background-size: auto, auto, 190px 190px;
}

.collection-v2 .page-hero.hero-motif-chakra::before,
.collection-v2 .page-hero.hero-motif-chakra::after {
  display: none;
}

/* Gold hairline along the bottom edge, matching the home hero. It is a real
   element rather than a pseudo because .page-hero already spends both of its
   pseudo-elements on the rotating mandala rings. */
.collection-v2 .collection-hero-rule {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--c-gold) 22%, var(--c-gold-light) 50%, var(--c-gold) 78%, transparent);
  opacity: 0.75;
  pointer-events: none;
}

.collection-v2 .collection-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin-bottom: 0.35rem;
}

.collection-v2 .collection-eyebrow::before,
.collection-v2 .collection-eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-light));
}

.collection-v2 .collection-eyebrow::after {
  background: linear-gradient(90deg, var(--c-gold-light), transparent);
}

.collection-v2 .page-hero h1 {
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 0.35rem;
}

.collection-v2 .page-hero-lead {
  font-size: clamp(0.85rem, 1vw, 0.94rem);
  line-height: 1.55;
  max-width: 46rem;
}

.collection-v2 .page-hero .breadcrumb-trail {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem !important;
}

.collection-v2 .page-hero .breadcrumb-trail a:hover {
  color: #fff;
}

/* Small stat chips under the hero copy */
/* Title and stats share one row so the banner is a band rather than a stack.
   Wraps back to stacked on narrow screens. */
.collection-v2 .hero-band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  text-align: left;
}

.collection-v2 .hero-band-main {
  min-width: 0;
}

.collection-v2 .hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.collection-v2 .hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  backdrop-filter: blur(6px);
}

.collection-v2 .hero-stat svg {
  width: 13px;
  height: 13px;
  color: var(--c-gold-light);
  flex-shrink: 0;
}

.collection-v2 .hero-stat strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Category rail
   -------------------------------------------------------------------------- */
.collection-v2 .category-rail-wrap {
  background: var(--brand-surface);
  border-bottom: 1px solid var(--c-line-soft);
  position: relative;
}

/* The rail scrolls sideways, so whichever end is cut off has to read as "there is
   more this way" rather than as a clipped pill. JS marks which ends are still
   scrollable; both fades stay off when every pill already fits. */
.collection-v2 .category-rail-wrap::before,
.collection-v2 .category-rail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--c-ease);
  z-index: 2;
}

.collection-v2 .category-rail-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--brand-surface) 35%, rgba(255, 255, 255, 0));
}

.collection-v2 .category-rail-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--brand-surface) 35%, rgba(255, 255, 255, 0));
}

.collection-v2 .category-rail-wrap[data-overflow~="start"]::before,
.collection-v2 .category-rail-wrap[data-overflow~="end"]::after {
  opacity: 1;
}

.collection-v2 .category-rail {
  display: flex;
  gap: 0.5rem;
  padding: 0.9rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* A pill scrolled into view lands clear of the fades rather than under them. */
  scroll-padding-inline: 2.5rem;
}

.collection-v2 .category-rail::-webkit-scrollbar {
  display: none;
}

/* On a phone the container gutter would clip the last pill a finger's width in
   from the screen edge, which looks broken instead of scrollable. Hand the gutter
   to the rail so the cut lands on the screen edge itself. */
@media (max-width: 767.98px) {
  .collection-v2 .category-rail-wrap > .container {
    padding-inline: 0;
  }

  .collection-v2 .category-rail {
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 2rem);
  }
}

.collection-v2 .category-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-fg);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--brand-surface);
  transition: color 200ms var(--c-ease), border-color 200ms var(--c-ease),
              background-color 200ms var(--c-ease), transform 200ms var(--c-ease);
}

.collection-v2 .category-pill:hover {
  color: var(--c-plum);
  border-color: rgba(138, 38, 164, 0.35);
  background: rgba(138, 38, 164, 0.05);
  transform: translateY(-1px);
}

.collection-v2 .category-pill.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--c-plum), var(--c-indigo));
  box-shadow: 0 8px 18px -10px rgba(72, 67, 159, 0.8);
}

.collection-v2 .category-pill svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Filter toolbar
   -------------------------------------------------------------------------- */
.collection-v2 .filter-bar {
  background: var(--brand-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-rest);
  padding: 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* thin plum→gold accent along the top of the toolbar */
.collection-v2 .filter-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-plum), var(--c-gold));
}

@media (min-width: 992px) {
  /* The dock sticks, not the toolbar. Its page-coloured band is what stops a
     product row from appearing sliced in half by the toolbar's bottom edge -
     cards disappear into the gutter a beat before they reach it. */
  .collection-v2 .filter-dock {
    position: sticky;
    top: 64px; /* + the 12px gutter below = the 76px that clears the site header */
    z-index: 5;
    background: var(--brand-bg);
    padding-block: 0.75rem;
    margin-top: -0.75rem;
    /* Widen the band past the grid's negative row gutters so cards cannot show
       through at the edges; the inline padding keeps the toolbar's own width. */
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
  }

  /* Lifted while docked, so it reads as floating over the grid rather than
     sitting in it. */
  .collection-v2 .filter-dock .filter-bar {
    box-shadow: 0 1px 2px rgba(26, 21, 40, 0.05), 0 14px 30px -14px rgba(26, 21, 40, 0.3);
  }
}

/* --------------------------------------------------------------------------
   Collapsible toolbar
   The dock is sticky, so on a laptop the toolbar holds ~150px of the viewport
   for the whole scroll. Folding it hands that back to the grid while the head
   keeps the count, the toggle, and a tally of what is still filtering.
   -------------------------------------------------------------------------- */
.collection-v2 .filter-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  /* Margin rather than padding on the body below: a grid item stretched to a
     0fr track still renders its own padding, so the gap would survive the
     collapse and leave a dead strip under the head. */
  margin-bottom: 0.9rem;
  transition: margin-bottom 260ms var(--c-ease);
}

.collection-v2 .filter-bar.is-collapsed .filter-bar-head {
  margin-bottom: 0;
}

.collection-v2 .filter-bar-head .result-count {
  min-height: 0;
}

.collection-v2 .filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-fg);
  transition: color 200ms var(--c-ease), border-color 200ms var(--c-ease),
              background-color 200ms var(--c-ease);
}

.collection-v2 .filter-toggle:hover {
  color: var(--c-plum);
  border-color: rgba(138, 38, 164, 0.35);
  background-color: rgba(138, 38, 164, 0.04);
}

.collection-v2 .filter-toggle svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.collection-v2 .filter-toggle-caret {
  transition: transform 260ms var(--c-ease);
}

.collection-v2 .filter-bar.is-collapsed .filter-toggle-caret {
  transform: rotate(-90deg);
}

/* The chips live inside the panel, so collapsed this badge is the only thing
   saying a filter is on. */
.collection-v2 .filter-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--c-plum), var(--c-indigo));
  color: #fff;
  font-size: 0.66rem;
  letter-spacing: 0;
}

/* 1fr → 0fr animates where max-height cannot: the panel is as tall as the
   filters need, and a guessed max-height either clips them or spends the first
   half of the ease on empty space. */
.collection-v2 .filter-bar-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 260ms var(--c-ease);
}

.collection-v2 .filter-bar.is-collapsed .filter-bar-body {
  grid-template-rows: 0fr;
}

.collection-v2 .filter-bar-body-inner {
  min-height: 0;
  overflow: hidden;
  visibility: visible;
}

/* Clipped is not the same as gone - without this the selects and slider stay in
   the tab order behind a folded panel. Held until the ease finishes so the
   content does not blink out at the start of the collapse. */
.collection-v2 .filter-bar.is-collapsed .filter-bar-body-inner {
  visibility: hidden;
  transition: visibility 0s linear 260ms;
}

@media (prefers-reduced-motion: reduce) {
  .collection-v2 .filter-bar-head,
  .collection-v2 .filter-bar-body,
  .collection-v2 .filter-bar.is-collapsed .filter-bar-body-inner,
  .collection-v2 .filter-toggle-caret {
    transition: none;
  }
}

.collection-v2 .filter-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-bottom: 0.35rem;
}

.collection-v2 .filter-bar .form-select {
  border-radius: 999px;
  border-color: var(--c-line);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.55rem 2.25rem 0.55rem 1rem;
  color: var(--brand-fg);
  background-color: #fff;
  transition: border-color 200ms var(--c-ease), box-shadow 200ms var(--c-ease);
}

.collection-v2 .filter-bar .form-select:hover {
  border-color: rgba(138, 38, 164, 0.32);
}

/* a select that is actively narrowing the list reads as "on" */
.collection-v2 .filter-bar .form-select.is-set {
  border-color: rgba(138, 38, 164, 0.45);
  background-color: rgba(138, 38, 164, 0.05);
  color: var(--c-plum);
  font-weight: 600;
}

/* Rare badge. Gold rather than the plum used by Lab Certified, so the two read as
   different kinds of claim - one is a certification, this one is scarcity.
   Placement is handled by .product-badge-row in front.css. */
.collection-v2 .product-card .product-rare-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a2606;
  background: linear-gradient(120deg, var(--c-gold-light), var(--c-gold));
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  box-shadow: 0 2px 8px rgba(26, 21, 40, 0.22);
}

.collection-v2 .product-scarcity {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #b3261e;
}

/* --------------------------------------------------------------------------
   Compare
   -------------------------------------------------------------------------- */

/* Bottom-left of the media tile, mirroring the wishlist heart bottom-right. */
.collection-v2 .product-card .product-media .product-compare-btn {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c5470;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(26, 21, 40, 0.25);
  transition: color 200ms var(--c-ease), border-color 200ms var(--c-ease), background-color 200ms var(--c-ease);
}

.collection-v2 .product-card .product-media .product-compare-btn svg {
  width: 13px;
  height: 13px;
}

/* Hover only where there is a real pointer: on touch the state latches after a tap
   and stays on until something else is tapped. Excluding .is-active as well, because
   plum-on-plum is an empty pill - the hover selector outweighs .is-active on colour. */
@media (hover: hover) {
  .collection-v2 .product-card .product-compare-btn:hover:not(:disabled):not(.is-active) {
    color: var(--c-plum);
    border-color: rgba(138, 38, 164, 0.4);
  }
}

.collection-v2 .product-card .product-compare-btn.is-active {
  color: #fff;
  background: var(--c-plum);
  border-color: var(--c-plum);
}

.collection-v2 .product-card .product-compare-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Selection tray. Fixed so the choice survives scrolling the grid. */
.compare-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid var(--brand-border, rgba(138, 38, 164, 0.14));
  box-shadow: 0 -8px 24px -12px rgba(26, 21, 40, 0.35);
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.compare-tray.is-open {
  transform: translateY(0);
}

/* Keeps the last row of cards clear of the tray. */
body.has-compare-tray {
  padding-bottom: 6.5rem;
}

.compare-tray-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
}

.compare-tray-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.compare-tray-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 15rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(138, 38, 164, 0.05);
  border: 1px solid rgba(138, 38, 164, 0.14);
  border-radius: 999px;
  padding: 0.25rem 2rem 0.25rem 0.3rem;
}

.compare-tray-item img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.compare-tray-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-tray-remove {
  position: absolute;
  right: 0.35rem;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: #5c5470;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.compare-tray-remove:hover {
  color: #e0245e;
  background: rgba(224, 36, 94, 0.1);
}

.compare-tray-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.compare-tray-count {
  font-size: 0.78rem;
  color: var(--brand-muted);
  white-space: nowrap;
}

.compare-tray-clear {
  border: 1px solid var(--c-line);
  background: none;
  color: #5c5470;
  border-radius: 999px;
}

/* Disabled until there are two things to compare - one product is not a comparison. */
.compare-tray-actions [aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* On a phone the named pills wrap to one row each, so four picks eat a third of the
   viewport. Collapse to a single scrolling strip of thumbnails instead. */
@media (max-width: 767.98px) {
  .compare-tray-inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  }

  .compare-tray-list {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .compare-tray-list::-webkit-scrollbar {
    display: none;
  }

  .compare-tray-item {
    flex: 0 0 auto;
    max-width: none;
    padding: 0;
    border-radius: 50%;
  }

  /* Hidden to the eye, kept for screen readers - the remove button is the only
     other place the product name appears. */
  .compare-tray-item span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .compare-tray-item img {
    width: 38px;
    height: 38px;
  }

  .compare-tray-remove {
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
    color: #fff;
    background: #5c5470;
    box-shadow: 0 0 0 2px #fff;
  }

  .compare-tray-actions {
    flex: 0 0 auto;
    gap: 0.4rem;
  }

  .compare-tray-actions .btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
  }

  body.has-compare-tray {
    padding-bottom: 4.5rem;
  }
}

/* First thing to drop when the strip and the buttons start fighting for width. */
@media (max-width: 420px) {
  .compare-tray-count {
    display: none;
  }
}

/* Comparison table */
.collection-v2 .compare-scroll {
  overflow-x: auto;
  background: var(--brand-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-rest);
}

.collection-v2 .compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.collection-v2 .compare-table th,
.collection-v2 .compare-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 0.86rem;
}

.collection-v2 .compare-rowhead {
  width: 11rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-muted);
  background: rgba(138, 38, 164, 0.03);
  position: sticky;
  left: 0;
}

.collection-v2 .compare-col {
  min-width: 12rem;
  vertical-align: top;
}

.collection-v2 .compare-card-link {
  display: block;
  text-decoration: none;
  color: var(--brand-fg);
}

.collection-v2 .compare-card-link img {
  width: 100%;
  max-width: 8rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--c-radius);
  background: rgba(138, 38, 164, 0.04);
  margin-bottom: 0.4rem;
}

.collection-v2 .compare-name {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}

.collection-v2 .compare-remove {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-muted);
}

.collection-v2 .compare-remove:hover {
  color: #e0245e;
}

/* The differing rows are the answer to "which of these should I buy". */
.collection-v2 .compare-table tr.is-different td {
  background: rgba(184, 114, 26, 0.06);
  font-weight: 600;
  color: var(--brand-fg);
}

.collection-v2 .compare-hint {
  font-size: 0.82rem;
  color: var(--brand-muted);
  margin: 0;
}

/* Zodiac picker, bracelet category only. Deliberately a compact chip row rather
   than the home page's 12 tiles - it sits above the filter bar and must not push
   the products down the way the old hero did. */
.collection-v2 .zodiac-strip {
  background: var(--brand-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-rest);
  padding: 0.9rem 1.15rem 1rem;
}

.collection-v2 .zodiac-strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.7rem;
}

.collection-v2 .zodiac-strip-eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.collection-v2 .zodiac-strip-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.1rem 0 0;
  color: var(--brand-fg);
}

.collection-v2 .zodiac-strip-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-plum);
  text-decoration: none;
  border: 1px solid rgba(138, 38, 164, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  transition: background-color 200ms var(--c-ease), color 200ms var(--c-ease);
}

.collection-v2 .zodiac-strip-link:hover {
  background: rgba(138, 38, 164, 0.08);
}

.collection-v2 .zodiac-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.collection-v2 .zodiac-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-fg);
  text-decoration: none;
  background: rgba(138, 38, 164, 0.05);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  transition: background-color 200ms var(--c-ease), border-color 200ms var(--c-ease), color 200ms var(--c-ease);
}

.collection-v2 .zodiac-chip:hover {
  color: var(--c-plum);
  border-color: rgba(138, 38, 164, 0.4);
  background: rgba(138, 38, 164, 0.1);
}

.collection-v2 .zodiac-chip-glyph {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--c-plum);
}

/* Dual-thumb price slider. Two range inputs stacked on one rail: the inputs
   themselves are transparent and click-through, only their thumbs take pointer
   events, so both remain independently draggable and keyboard reachable. */
/* Readout + track add up to the ~42px of the dropdowns and the toggle beside it,
   so every control in the bar shares one centreline. */
.collection-v2 .price-range {
  padding: 0 0.15rem;
}

.collection-v2 .price-range-readout {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand-fg);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-v2 .price-range.is-set .price-range-readout {
  color: var(--c-plum);
}

.collection-v2 .price-range-track {
  position: relative;
  height: 21px;
}

.collection-v2 .price-range-rail,
.collection-v2 .price-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}

.collection-v2 .price-range-rail {
  left: 0;
  right: 0;
  background: rgba(138, 38, 164, 0.16);
}

.collection-v2 .price-range-fill {
  background: linear-gradient(90deg, var(--c-plum), var(--c-gold));
}

.collection-v2 .price-range input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.collection-v2 .price-range input[type="range"]:focus {
  outline: none;
}

.collection-v2 .price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-plum);
  box-shadow: 0 1px 4px rgba(26, 21, 40, 0.3);
  cursor: grab;
}

.collection-v2 .price-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-plum);
  box-shadow: 0 1px 4px rgba(26, 21, 40, 0.3);
  cursor: grab;
}

.collection-v2 .price-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--c-plum);
  outline-offset: 2px;
}

.collection-v2 .price-range input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--c-plum);
  outline-offset: 2px;
}

/* Bigger grab target where there is no cursor to aim with. */
@media (max-width: 767.98px) {
  .collection-v2 .price-range-track {
    height: 30px;
  }

  .collection-v2 .price-range input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  .collection-v2 .price-range input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

/* Segmented two-state filter, matching the auth modal's Sign In / Create Account
   pill. The radios stay in the DOM for keyboard and screen-reader support; the
   labels are what actually get painted. */
.collection-v2 .filter-segment {
  display: flex;
  gap: 0.2rem;
  padding: 0.22rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background-color: var(--brand-bg, #faf7fb);
  transition: border-color 200ms var(--c-ease), background-color 200ms var(--c-ease);
}

.collection-v2 .filter-segment input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.collection-v2 .filter-segment label {
  flex: 1;
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-muted);
  cursor: pointer;
  transition: background-color 200ms var(--c-ease), color 200ms var(--c-ease), box-shadow 200ms var(--c-ease);
}

.collection-v2 .filter-segment label:hover {
  color: var(--c-plum);
}

.collection-v2 .filter-segment input[type="radio"]:checked + label {
  color: var(--c-plum);
  background-color: #fff;
  box-shadow: var(--brand-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.08));
}

/* Keyboard focus has to be visible even though the input itself is hidden. */
.collection-v2 .filter-segment input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--c-plum);
  outline-offset: 2px;
}

/* Mirrors .form-select.is-set - the whole control reads as "on" when it is
   actively narrowing the list. */
.collection-v2 .filter-segment.is-set {
  border-color: rgba(138, 38, 164, 0.45);
  background-color: rgba(138, 38, 164, 0.08);
}

/* The count is a single 21px line while the controls beside it are ~41px, and the
   row bottom-aligns everything - so the text sat on the controls' baseline and
   its centre landed 10px low. Giving it the same height band and centring inside
   it puts it on the controls' centreline. */
.collection-v2 .result-count {
  display: flex;
  align-items: center;
  min-height: 41px;
  font-size: 0.86rem;
  color: var(--brand-muted);
  margin: 0;
}

@media (min-width: 992px) {
  .collection-v2 .result-count {
    justify-content: flex-end;
  }
}

.collection-v2 .result-count strong {
  color: var(--brand-fg);
  font-weight: 700;
}

/* Active filter chips */
.collection-v2 .active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--c-line);
}

.collection-v2 .active-filters-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-right: 0.15rem;
}

.collection-v2 .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-plum);
  text-decoration: none;
  background: rgba(138, 38, 164, 0.07);
  border: 1px solid rgba(138, 38, 164, 0.2);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  transition: background-color 180ms var(--c-ease), border-color 180ms var(--c-ease), color 180ms var(--c-ease);
}

.collection-v2 .filter-chip:hover,
.collection-v2 .filter-chip:focus-visible {
  color: #fff;
  background: var(--c-plum);
  border-color: var(--c-plum);
}

.collection-v2 .filter-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.collection-v2 .filter-chip:hover svg {
  opacity: 1;
}

.collection-v2 .filter-chip-clear {
  color: var(--brand-muted);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.collection-v2 .filter-chip-clear:hover,
.collection-v2 .filter-chip-clear:focus-visible {
  color: var(--c-plum);
  background: transparent;
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Tag rail

   Sits between the toolbar and the grid, and is deliberately quieter than the
   category rail above it: tags are a shortcut, not the primary navigation, so
   they read as gold-tinted text until one is picked.
   -------------------------------------------------------------------------- */
.collection-v2 .tag-rail-wrap {
  display: block;
}

/* The whole heading is the hit target: the label alone is small, uppercase and
   easy to miss as something clickable. */
.collection-v2 .tag-rail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-muted);
  cursor: pointer;
  transition: color 200ms var(--c-ease);
}

.collection-v2 .tag-rail-toggle:hover,
.collection-v2 .tag-rail-toggle:focus-visible {
  color: var(--c-plum);
}

.collection-v2 .tag-rail-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

/* Folded away, the pills are out of sight - this tally is what says how much is
   behind the caret and stops the rail reading as an empty heading. */
.collection-v2 .tag-rail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(138, 38, 164, 0.1);
  color: var(--c-plum);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
}

.collection-v2 .tag-rail-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 260ms var(--c-ease);
}

.collection-v2 .tag-rail-wrap.is-collapsed .tag-rail-caret {
  transform: rotate(-90deg);
}

/* 1fr -> 0fr for the same reason as the filter panel: the rail is as tall as the
   tags need, and a guessed max-height either clips the last row or wastes half
   the ease on empty space. */
.collection-v2 .tag-rail-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 260ms var(--c-ease);
}

.collection-v2 .tag-rail-wrap.is-collapsed .tag-rail-body {
  grid-template-rows: 0fr;
}

.collection-v2 .tag-rail-body-inner {
  min-height: 0;
  overflow: hidden;
}

/* Clipped is not gone - without this the tag links stay tabbable behind a folded
   rail. Held until the ease finishes so they do not blink out on the way down. */
.collection-v2 .tag-rail-wrap.is-collapsed .tag-rail-body-inner {
  visibility: hidden;
  transition: visibility 0s linear 260ms;
}

@media (prefers-reduced-motion: reduce) {
  .collection-v2 .tag-rail-body,
  .collection-v2 .tag-rail-wrap.is-collapsed .tag-rail-body-inner,
  .collection-v2 .tag-rail-caret {
    transition: none;
  }
}

.collection-v2 .tag-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  /* Padding, not margin: it belongs to the clipped inner so it collapses away
     with the pills instead of leaving a dead strip under the heading. */
  padding: 0.55rem 0 0;
  list-style: none;
}

.collection-v2 .tag-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-fg);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--brand-surface);
  transition: color 180ms var(--c-ease), border-color 180ms var(--c-ease),
              background-color 180ms var(--c-ease);
}

.collection-v2 .tag-pill:hover,
.collection-v2 .tag-pill:focus-visible {
  color: var(--c-plum);
  border-color: rgba(138, 38, 164, 0.35);
  background: rgba(138, 38, 164, 0.05);
}

.collection-v2 .tag-pill.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--c-plum);
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */
.collection-v2 .product-grid > [class*="col-"] {
  display: flex;
}

.collection-v2 .product-grid > [class*="col-"] > .product-card {
  width: 100%;
}

/* Cards ease in on load, staggered left-to-right. Purely decorative — the
   grid renders identically with motion disabled (see the reduce block). */
.collection-v2 .product-grid > [class*="col-"] {
  animation: collectionCardIn 520ms var(--c-ease) both;
  animation-delay: calc(var(--card-index, 0) * 45ms);
}

@keyframes collectionCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.collection-v2 .product-card {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius);
  background: var(--brand-surface);
  box-shadow: var(--c-shadow-rest);
  transition: transform 320ms var(--c-ease), box-shadow 320ms var(--c-ease), border-color 320ms var(--c-ease);
}

.collection-v2 .product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(138, 38, 164, 0.28);
  box-shadow: var(--c-shadow-lift);
}

.collection-v2 .product-card .product-media {
  background:
    radial-gradient(90% 80% at 50% 20%, rgba(255, 255, 255, 0.9), transparent 70%),
    linear-gradient(160deg, rgba(138, 38, 164, 0.06), rgba(184, 114, 26, 0.06));
  /* A square tile made the card 554px tall, so image, name and price could not
     be read together in one screen. 5:4 takes ~60px out without going landscape,
     which would cut the vertical malas badly. */
  aspect-ratio: 5 / 4;
  padding: 0.55rem;
  border-radius: calc(var(--c-radius) - 1px) calc(var(--c-radius) - 1px) 0 0;
}

.collection-v2 .product-card .product-media img {
  border-radius: calc(var(--c-radius) - 6px);
}

.collection-v2 .product-card:hover .product-media img {
  transform: scale(1.045);
}

.collection-v2 .product-card.is-oos .product-media img {
  filter: grayscale(0.55);
  opacity: 0.8;
}

/* Badges */
.collection-v2 .product-card .discount-ribbon,
.collection-v2 .product-card .product-badge {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(26, 21, 40, 0.18);
}

.collection-v2 .product-card .product-badge {
  background: linear-gradient(120deg, var(--c-gold), var(--c-gold-light));
}

/* The card is roomier here than on the PDP rail, so the row sits further in. */
.collection-v2 .product-card .product-badge-row {
  top: 1rem;
  left: 1rem;
  right: 1rem;
}

.collection-v2 .product-wishlist-btn {
  bottom: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-color: var(--c-line);
  box-shadow: 0 4px 12px -4px rgba(26, 21, 40, 0.25);
  transition: color 200ms var(--c-ease), border-color 200ms var(--c-ease), transform 200ms var(--c-ease);
}

.collection-v2 .product-wishlist-btn:hover {
  transform: scale(1.1);
}

/* Body */
.collection-v2 .product-body {
  padding: 0.8rem 0.95rem 0.95rem;
  gap: 0.3rem;
}

/* Side by side rather than stacked - two full-width buttons cost 77px of card
   height on their own, which is most of what pushed the price below the fold.
   auto-flow:column keeps a lone button (out of stock) full width.

   Only from 768px up: below that the grid is two-up, and at ~180px of card width
   "Add to Cart" gets clipped mid-word. Phones keep the stacked buttons. */
@media (min-width: 768px) {
  .collection-v2 .product-actions {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem !important;
  }

  .collection-v2 .product-actions .btn {
    padding-inline: 0.5rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

.collection-v2 .product-origin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.collection-v2 .product-origin svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.collection-v2 .product-name {
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-v2 .product-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.collection-v2 .product-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.collection-v2 .product-price {
  font-size: 1.14rem;
  letter-spacing: -0.01em;
}

.collection-v2 .product-save {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-success);
}

.collection-v2 .product-actions {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.collection-v2 .product-actions .btn {
  border-radius: 999px;
  padding-block: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.collection-v2 .collection-empty {
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  background: var(--brand-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-rest);
}

.collection-v2 .collection-empty-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-plum);
  background: linear-gradient(150deg, rgba(138, 38, 164, 0.1), rgba(184, 114, 26, 0.1));
  box-shadow: inset 0 0 0 1px rgba(138, 38, 164, 0.16);
}

.collection-v2 .collection-empty-icon svg {
  width: 32px;
  height: 32px;
}

.collection-v2 .collection-empty h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.collection-v2 .collection-empty p {
  color: var(--brand-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Assurance strip
   -------------------------------------------------------------------------- */
.collection-v2 .assurance-strip {
  background: var(--brand-surface);
  border-top: 1px solid var(--c-line-soft);
}

.collection-v2 .assurance-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
}

.collection-v2 .assurance-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-gold);
  background: linear-gradient(150deg, rgba(184, 114, 26, 0.14), rgba(138, 38, 164, 0.08));
  box-shadow: inset 0 0 0 1px rgba(184, 114, 26, 0.18);
}

.collection-v2 .assurance-icon svg {
  width: 20px;
  height: 20px;
}

.collection-v2 .assurance-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}

.collection-v2 .assurance-copy {
  font-size: 0.8rem;
  color: var(--brand-muted);
  margin: 0;
}

@media (min-width: 992px) {
  .collection-v2 .assurance-strip .col-lg-3 + .col-lg-3 .assurance-item {
    border-left: 1px solid var(--c-line-soft);
    padding-left: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .collection-v2 .product-grid > [class*="col-"] {
    animation: none;
  }

  .collection-v2 .product-card,
  .collection-v2 .product-card .product-media img,
  .collection-v2 .category-pill,
  .collection-v2 .product-wishlist-btn {
    transition: none;
  }

  .collection-v2 .product-card:hover {
    transform: none;
  }

  .collection-v2 .product-card:hover .product-media img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Scroll loader
   Shown while the next page of cards is on its way in.
   -------------------------------------------------------------------------- */
.collection-v2 .product-scroll-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.75rem 1rem .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-plum);
}

.collection-v2 .product-scroll-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-gold);
  animation: collection-scroll-spin .7s linear infinite;
}

@keyframes collection-scroll-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-v2 .product-scroll-spinner {
    animation: none;
  }
}