/*
================================================
Space Vanta Theme 1.0
Module: Product Collection / Scene
Version: PRODUCT-COLLECTION-007 (frozen)

One centered module:
  scene rail (Level 2, active scene sits centre-top)
  -> tether -> scene panel (Level 3 tabs + paged products)

Progressive enhancement:
- Without JS every scene / collection / product is visible.
- JS adds .is-enhanced. JS never removes or hides the section.

Depth layers (back to front):
 0 coordinate field   1 ghost index   2 slab frame
 3 product shadow-frames   4 products   5 rail shards

Depth drivers (no hover needed):
 --px / --py   pointer (desktop) or scroll + swipe kick (touch)
================================================
*/

.sv-product-collection {
  --sv-pc-ink: #26323a;
  --sv-pc-muted: #66727a;
  --sv-pc-line: rgba(67, 84, 96, 0.19);
  --sv-pc-plane: rgba(91, 105, 112, 0.15);
  --sv-pc-axis: rgba(91, 105, 112, 0.13);
  --sv-pc-cold: #e8e7e0;
  --sv-pc-accent: #506c80;
  --sv-pc-ease: cubic-bezier(.2, .8, .2, 1);
  --shard-w: clamp(6.8rem, 10vw, 9.6rem);
  --step-k: 1.45;
  --step: calc(var(--shard-w) * var(--step-k));
  --v: 3;
  --px: 0;
  --py: 0;
  --pc-dir: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  color: var(--sv-pc-ink);
  background: linear-gradient(180deg, #f3f1eb 0%, #efede6 100%);
}

/* Layer 0: hero language = axis lines + tilted outline planes (no grid) */
.sv-product-collection__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  height: 26rem;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sv-pc-axis) 22%, var(--sv-pc-axis) 78%, transparent);
  pointer-events: none;
}
.sv-product-collection__panels::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  margin-left: -50vw;
  background: var(--sv-pc-axis);
  pointer-events: none;
}

.sv-product-collection__inner { width: min(1320px, calc(100% - 8vw)); margin: 0 auto; }

/* Header (centered) */
.sv-product-collection__header { text-align: center; }
.sv-product-collection__eyebrow { margin: 0; color: var(--sv-pc-muted); font-size: 0.82rem; letter-spacing: 0.04em; }
.sv-product-collection__title { max-width: 16ch; margin: 0.6rem auto 0; font-size: clamp(2rem, 4.2vw, 3.9rem); font-weight: 450; letter-spacing: -0.055em; line-height: 1.02; }
.sv-product-collection__intro { max-width: 44ch; margin: 1rem auto 0; color: var(--sv-pc-muted); line-height: 1.65; }

.sv-product-collection__stage { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ================= Level 2: rail (active scene centre-top, loops both ways) ================= */
.sv-product-collection__rail { position: relative; overflow: hidden; padding: 3.8rem 0 1.4rem; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.sv-product-collection.is-dragging .sv-product-collection__rail { cursor: grabbing; }
.sv-product-collection__track { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vw, 1.3rem); width: 100%; margin: 0 auto; perspective: 1100px; }
.sv-product-collection.is-enhanced .sv-product-collection__track { display: grid; justify-items: center; align-items: start; flex-wrap: nowrap; gap: 0; }

.sv-product-collection__shard {
  --o: 0;
  --a: 0;
  --s: 1;
  --press: 1;
  position: relative;
  flex: 0 0 auto;
  width: var(--shard-w);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.sv-product-collection__shard:nth-child(4n+2) { margin-top: 1.1rem; }
.sv-product-collection__shard:nth-child(4n+4) { margin-top: 1.9rem; }

.sv-product-collection.is-enhanced .sv-product-collection__shard {
  --s: max(0.56, calc(1.16 - var(--a) * 0.2));
  grid-area: 1 / 1;
  margin-top: 0;
  z-index: calc(40 - var(--a) * 8);
  opacity: calc(max(0.4, 1 - var(--a) * 0.22) * min(1, max(0, calc(var(--v) + 1 - var(--a)))) * var(--vis, 1));
  transform:
    translate3d(calc(var(--o) * var(--step) + var(--px) * (1.2 - var(--a) * 0.25) * 10px), calc(min(var(--a), 2.5) * 1rem - 0.6rem + var(--py) * 6px), calc(40px - var(--a) * 70px))
    rotateY(calc(var(--o) * -12deg))
    scale(calc(var(--s) * var(--press)));
  transition: transform 760ms var(--sv-pc-ease), opacity 500ms ease, visibility 0s;
}
.sv-product-collection.is-enhanced .sv-product-collection__shard.is-far { visibility: hidden; pointer-events: none; transition: transform 760ms var(--sv-pc-ease), opacity 500ms ease, visibility 0s linear 500ms; }
/* real tabs stay focusable even when parked outside the visible slots; focus is shown on the centre slot */
.sv-product-collection.is-enhanced .sv-product-collection__shard.is-far:not([data-scene-clone]) { visibility: visible; }
.sv-product-collection__shard.is-focus { outline: 2px solid var(--sv-pc-accent); outline-offset: 6px; }
.sv-product-collection.is-enhanced .sv-product-collection__shard.is-snap { opacity: 0; transition: none; }
.sv-product-collection.is-enhanced.is-dragging .sv-product-collection__shard { transition: none; }
.sv-product-collection.is-enhanced:not(.is-ready) .sv-product-collection__shard { transition: none; }
.sv-product-collection.is-enhanced .sv-product-collection__shard:active { --press: 0.94; }

.sv-product-collection__shard-index { position: absolute; top: -1.2rem; left: 0; font-size: 0.7rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--sv-pc-muted); transition: color 300ms ease, transform 500ms var(--sv-pc-ease); }
.sv-product-collection__shard-index::before { content: attr(data-index); }
.sv-product-collection__shard.is-center .sv-product-collection__shard-index { color: var(--sv-pc-accent); transform: translateX(0.4rem); }

.sv-product-collection__shard-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff, var(--sv-pc-cold));
  --cut: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
  clip-path: var(--cut);
  transition: clip-path 760ms var(--sv-pc-ease);
}
.sv-product-collection__shard:nth-child(4n+2) .sv-product-collection__shard-media { --cut: polygon(0 7%, 100% 0, 100% 93%, 0 100%); }
.sv-product-collection__shard:nth-child(4n+3) .sv-product-collection__shard-media { --cut: polygon(0 0, 100% 0, 100% 91%, 0 100%); }
.sv-product-collection__shard:nth-child(4n+4) .sv-product-collection__shard-media { --cut: polygon(0 8%, 100% 0, 100% 100%, 0 92%); }
.sv-product-collection__shard.is-center .sv-product-collection__shard-media { clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%); }
.sv-product-collection__shard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(106deg, transparent 49.6%, rgba(255, 255, 255, 0.9) 50%, transparent 50.4%);
  opacity: 0.7;
  transform: translateX(-30%);
  transition: transform 900ms var(--sv-pc-ease), opacity 500ms ease;
}
.sv-product-collection__shard.is-center .sv-product-collection__shard-media::after { transform: translateX(30%); opacity: 0; }
.sv-product-collection__shard.is-tap .sv-product-collection__shard-media::after { animation: sv-pc-flash 620ms var(--sv-pc-ease); }
@keyframes sv-pc-flash { from { transform: translateX(-60%); opacity: 1; } to { transform: translateX(60%); opacity: 0; } }

.sv-product-collection__shard-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.62; transform: scale(1.1); pointer-events: none; -webkit-user-drag: none; transition: filter 500ms ease, opacity 500ms ease, transform 900ms var(--sv-pc-ease); }
.sv-product-collection__shard.is-center .sv-product-collection__shard-media img { filter: none; opacity: 1; transform: scale(1.03); }

.sv-product-collection__shard-copy { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.75rem; }
.sv-product-collection__shard-title { align-self: flex-start; padding-bottom: 0.2rem; font-size: 0.86rem; letter-spacing: -0.005em; line-height: 1.3; color: var(--sv-pc-muted); background: linear-gradient(var(--sv-pc-accent), var(--sv-pc-accent)) 0 100% / 0 1px no-repeat; transition: background-size 600ms var(--sv-pc-ease), color 300ms ease; }
.sv-product-collection__shard.is-center .sv-product-collection__shard-title { color: var(--sv-pc-ink); background-size: 100% 1px; }
.sv-product-collection__shard-summary { display: none; }

/* outline shards: fill empty slots so the rail is symmetrical (progressively larger toward the centre) */
.sv-product-collection__ghost-shard { display: none; }
.sv-product-collection.is-enhanced .sv-product-collection__ghost-shard {
  --s: max(0.56, calc(1.16 - var(--a) * 0.2));
  display: block;
  grid-area: 1 / 1;
  width: var(--shard-w);
  aspect-ratio: 3 / 4;
  z-index: 1;
  pointer-events: none;
  opacity: max(0.16, calc(0.7 - var(--a) * 0.16));
  transform:
    translate3d(calc(var(--o) * var(--step) + var(--px) * (1.2 - var(--a) * 0.25) * 10px), calc(min(var(--a), 2.5) * 1rem - 0.6rem + var(--py) * 6px), calc(40px - var(--a) * 70px))
    rotateY(calc(var(--o) * -12deg))
    scale(var(--s));
  transition: transform 760ms var(--sv-pc-ease), opacity 500ms ease;
}
.sv-product-collection.is-enhanced .sv-product-collection__ghost-shard.is-far { opacity: 0; }
.sv-product-collection.is-enhanced.is-dragging .sv-product-collection__ghost-shard { transition: none; }
.sv-product-collection.is-enhanced:not(.is-ready) .sv-product-collection__ghost-shard { transition: none; }
.sv-product-collection__ghost-shard svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sv-product-collection__ghost-shard polygon { fill: rgba(255, 255, 255, 0.28); stroke: rgba(80, 108, 128, 0.36); stroke-width: 1; }

/* ================= Level 3: panel (same module, below the active shard) ================= */
.sv-product-collection__panels { position: relative; perspective: 1600px; }
.sv-product-collection__panel { position: relative; transform-origin: 50% 0; display: block; margin-top: 0; padding-top: 3.2rem; text-align: center; }
.sv-product-collection:not(.is-enhanced) .sv-product-collection__panel + .sv-product-collection__panel { margin-top: 4rem; }
.sv-product-collection.is-enhanced .sv-product-collection__panel:not(.is-active) { display: none; }

/* tether: links the active shard to its module */
.sv-product-collection__panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 2.6rem;
  background: var(--sv-pc-accent);
  transform-origin: top;
  transform: translate3d(calc(var(--px) * 12px), 0, 0);
}
.sv-product-collection__panel::after { content: ""; position: absolute; left: 50%; top: 2.6rem; width: 7px; height: 7px; margin-left: -3px; background: var(--sv-pc-accent); transform: translate3d(calc(var(--px) * 12px), 0, 0); }

/* Layer 1: ghost index */
.sv-product-collection__ghost {
  position: absolute;
  z-index: 0;
  top: 2.4rem;
  left: 50%;
  margin-left: -0.5em;
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(80, 108, 128, 0.22);
  pointer-events: none;
  user-select: none;
  transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -16px), 0);
  transition: transform 800ms var(--sv-pc-ease);
}
.sv-product-collection__ghost::before { content: attr(data-index); }

.sv-product-collection__panel-head,
.sv-product-collection__collections { position: relative; z-index: 1; }
.sv-product-collection__panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sv-product-collection__panel-head { max-width: 40rem; margin: 0 auto; }
.sv-product-collection__panel-description { max-width: 38ch; margin: 0 auto; color: var(--sv-pc-muted); line-height: 1.65; }

/* Level 3 tabs + sliding indicator */
.sv-product-collection__collection-tabs { position: relative; display: none; justify-content: flex-start; gap: 0 clamp(1.1rem, 3vw, 2.2rem); width: max-content; max-width: 100%; margin: 1.4rem auto 0; overflow-x: auto; scrollbar-width: none; }
.sv-product-collection__collection-tabs::-webkit-scrollbar { display: none; }
.sv-product-collection.is-enhanced .sv-product-collection__collection-tabs { display: flex; }
.sv-product-collection__collection-tabs[hidden] { display: none !important; }
.sv-product-collection__collection-tab { flex: 0 0 auto; min-height: 44px; margin: 0; padding: 0.55rem 0.1rem; border: 0; border-bottom: 1px solid var(--sv-pc-line); background: none; color: var(--sv-pc-muted); font: inherit; font-size: 0.95rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 300ms ease, transform 300ms var(--sv-pc-ease); }
.sv-product-collection__collection-tab:active { transform: translateY(2px) scale(0.97); }
.sv-product-collection__collection-tab[aria-selected="true"] { color: var(--sv-pc-ink); }
.sv-product-collection__collection-tabs:not([data-indicator="on"]) .sv-product-collection__collection-tab[aria-selected="true"] { border-bottom-color: var(--sv-pc-accent); }
.sv-product-collection__indicator { position: absolute; left: 0; bottom: 0; width: var(--ind-w, 0px); height: 2px; background: var(--sv-pc-accent); opacity: 0; transform: translate3d(var(--ind-x, 0px), 0, 0); transition: transform 640ms var(--sv-pc-ease), width 640ms var(--sv-pc-ease), opacity 300ms ease; pointer-events: none; }
.sv-product-collection__indicator::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 6px; height: 6px; background: var(--sv-pc-accent); }
.sv-product-collection__collection-tabs[data-indicator="on"] .sv-product-collection__indicator { opacity: 1; }

/* Layer 2: tilted outline planes (same language as the hero) */
.sv-product-collection__collections { width: min(1120px, 100%); margin: 2.4rem auto 0; padding: 0.5rem 0 0.25rem; touch-action: pan-y; }
.sv-product-collection__collections::before,
.sv-product-collection__collections::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid var(--sv-pc-plane);
  pointer-events: none;
  transition: transform 800ms var(--sv-pc-ease);
}
.sv-product-collection__collections::before {
  inset: -2.4rem 2% -1.4rem -5%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06));
  transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0) rotate(-2.4deg);
}
.sv-product-collection__collections::after {
  inset: -0.6rem -6% -2.6rem 14%;
  transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0) rotate(2deg);
}
.sv-product-collection.is-enhanced .sv-product-collection__collection:not(.is-active) { display: none; }
.sv-product-collection:not(.is-enhanced) .sv-product-collection__collection + .sv-product-collection__collection { margin-top: 3rem; }
.sv-product-collection__collection { position: relative; }

/* Layers 3-4: products.
   Flex + centre: incomplete rows centre themselves.
   data-count (cards on this page) and data-pos (slot on this page) are set by scene.js,
   so one, two, three... products each get their own spatial arrangement. */
.sv-product-collection__grid { --gap: 2rem; --cols: 3; --card-max: 100rem; position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem var(--gap); padding: 1rem 0 3.4rem; text-align: left; }
.sv-product-collection__grid > .sv-product-collection__product-card {
  --d: 1;
  position: relative;
  isolation: isolate;
  flex: 0 0 min(var(--card-max), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)));
  max-width: min(var(--card-max), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)));
  min-width: 0;
}
.sv-product-collection__grid > .sv-product-collection__product-card.is-off { display: none; }

.sv-product-collection__grid[data-count="1"] { --cols: 1; --card-max: 25rem; }
.sv-product-collection__grid[data-count="2"] { --cols: 2; --card-max: 22rem; --gap: 3.4rem; }
.sv-product-collection__grid[data-count="4"] { --cols: 2; --card-max: 21rem; --gap: 3rem; }

/* slots: default (3 / 5 / 6 products) */
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="0"],
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="3"] { --d: 0.7; transform: none; z-index: auto; }
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="1"],
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="4"] { --d: 1.5; transform: translateY(2.9rem); z-index: 2; }
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="2"],
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="5"] { --d: 1.05; transform: translateY(1.1rem); z-index: auto; }
/* one product: a single piece, centred, closest plane */
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="1"] > [data-pos="0"] { --d: 1.4; transform: none; }
/* two products: one high, one low, overlapping planes */
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="2"] > [data-pos="0"] { --d: 0.8; transform: translateY(-0.6rem); }
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="2"] > [data-pos="1"] { --d: 1.6; transform: translateY(3rem); }
/* four products: 2 x 2, columns offset */
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="4"] > [data-pos="0"],
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="4"] > [data-pos="2"] { --d: 0.8; transform: none; }
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="4"] > [data-pos="1"],
.sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="4"] > [data-pos="3"] { --d: 1.5; transform: translateY(2.6rem); }

.sv-product-collection.is-enhanced .sv-product-collection__grid > .sv-product-collection__product-card { translate: calc(var(--px) * var(--d) * 12px) calc(var(--py) * var(--d) * 9px); transition: translate 800ms var(--sv-pc-ease); }

/* second plane: behind the photo only (same width as photo / title / button column) */
.sv-product-collection__grid > .sv-product-collection__product-card .sv-product-collection__product-link { position: relative; display: block; }
.sv-product-collection__grid > .sv-product-collection__product-card .sv-product-collection__product-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.8rem;
  right: -0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  border: 1px solid var(--sv-pc-plane);
  pointer-events: none;
  transform: translate3d(calc(var(--px) * var(--d) * 5px), calc(var(--py) * var(--d) * 4px), 0);
  transition: transform 800ms var(--sv-pc-ease);
}
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="1"] .sv-product-collection__product-link::before,
.sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="4"] .sv-product-collection__product-link::before { top: -1.2rem; right: -1.2rem; bottom: 1.2rem; left: 1.2rem; }
.sv-product-collection__grid[data-count="1"] .sv-product-collection__product-link::before,
.sv-product-collection__grid[data-count="2"] .sv-product-collection__product-link::before { top: -1.5rem; right: -1.5rem; bottom: 1.5rem; left: 1.5rem; }

/* photo fills its frame: photo, title and button share one width */
.sv-product-collection__product-image-frame { background: var(--sv-pc-cold); }
.sv-product-collection__product-image img { object-fit: cover; object-position: 50% 45%; }

/* sparse pages: a tilted plane and a diagonal axis fill the empty space */
.sv-product-collection__grid[data-count="1"]::before,
.sv-product-collection__grid[data-count="2"]::before,
.sv-product-collection__grid[data-count="3"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3% 10% 1% 10%;
  border: 1px solid var(--sv-pc-plane);
  pointer-events: none;
  transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 8px), 0) rotate(-3.2deg);
  transition: transform 800ms var(--sv-pc-ease);
}
.sv-product-collection__grid[data-count="1"]::after,
.sv-product-collection__grid[data-count="2"]::after,
.sv-product-collection__grid[data-count="3"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 29.8%, var(--sv-pc-axis) 30%, transparent 30.2%), linear-gradient(112deg, transparent 71.8%, var(--sv-pc-axis) 72%, transparent 72.2%);
}

.sv-product-collection__empty { display: none; margin: 0; padding: 3rem 0; color: var(--sv-pc-muted); }
.sv-product-collection__collection.is-empty .sv-product-collection__empty { display: block; }
.sv-product-collection__collection.is-empty .sv-product-collection__view-all { display: none; }

/* Pager */
.sv-product-collection__pager { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 0.4rem; }
.sv-product-collection__pager[hidden] { display: none; }
.sv-product-collection__pager-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid var(--sv-pc-line); background: rgba(255, 255, 255, 0.5); color: var(--sv-pc-ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 300ms var(--sv-pc-ease), border-color 300ms ease, opacity 300ms ease; }
.sv-product-collection__pager-button:active { transform: scale(0.92); border-color: var(--sv-pc-accent); }
.sv-product-collection__pager-button:disabled { opacity: 0.35; cursor: default; }
.sv-product-collection__pager-count { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.8rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--sv-pc-muted); }
.sv-product-collection__pager-line { width: 2.2rem; height: 1px; background: var(--sv-pc-line); transform: rotate(-24deg); }

.sv-product-collection__view-all { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 44px; margin-top: 1.2rem; border-bottom: 1px solid rgba(80, 108, 128, 0.5); color: var(--sv-pc-accent); font-size: 0.9rem; text-decoration: none; }
.sv-product-collection__collection { text-align: center; }
.sv-product-collection__collection .sv-product-collection__grid { text-align: left; }

/* Focus */
.sv-product-collection__shard:focus-visible,
.sv-product-collection__collection-tab:focus-visible,
.sv-product-collection__pager-button:focus-visible,
.sv-product-collection__view-all:focus-visible { outline: 2px solid var(--sv-pc-accent); outline-offset: 4px; }

/* ================= Motion: answers a person's action ================= */

/* ---- Level 2: scene change = the whole module folds on a hinge ---- */
.sv-product-collection__panel.is-leaving { animation: sv-pc-fold-out 280ms cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes sv-pc-fold-out { to { opacity: 0; transform: translate3d(calc(var(--pc-dir) * -3rem), 0, -150px) rotateY(calc(var(--pc-dir) * 34deg)) scale(0.92); } }
.sv-product-collection__panel.is-entering { animation: sv-pc-fold-in 920ms var(--sv-pc-ease) both; }
@keyframes sv-pc-fold-in { from { opacity: 0; transform: translate3d(calc(var(--pc-dir) * 3rem), 0, -170px) rotateY(calc(var(--pc-dir) * -36deg)) scale(0.92); } to { opacity: 1; transform: none; } }
.sv-product-collection__panel.is-entering::before { animation: sv-pc-tether 760ms var(--sv-pc-ease) both; }
@keyframes sv-pc-tether { from { transform: scaleY(0); } }
.sv-product-collection__panel.is-entering .sv-product-collection__ghost { animation: sv-pc-ghost-in 1200ms var(--sv-pc-ease) both; }
@keyframes sv-pc-ghost-in { from { opacity: 0; translate: calc(var(--pc-dir) * 6rem) 0; } }
.sv-product-collection__panel.is-entering .sv-product-collection__panel-description,
.sv-product-collection__panel.is-entering .sv-product-collection__collection-tabs { animation: sv-pc-rise 640ms var(--sv-pc-ease) both; animation-delay: 140ms; }
.sv-product-collection__panel.is-entering .sv-product-collection__collection-tabs { animation-delay: 220ms; }
@keyframes sv-pc-rise { from { opacity: 0; transform: translate3d(0, 1.1rem, 0); } }

/* ---- Level 3: collection change = products fold into the centre, the next set opens from it ---- */
.sv-product-collection__collection.is-leaving .sv-product-collection__product-card { animation: sv-pc-radial-out 240ms cubic-bezier(.5, 0, .8, .4) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes sv-pc-radial-out { to { opacity: 0; translate: calc(var(--tx, 0px) * 0.55) calc(var(--ty, 0px) * 0.55); scale: 0.76; } }
.sv-product-collection__collection.is-entering .sv-product-collection__product-card { animation: sv-pc-radial-in 800ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sv-pc-radial-in { from { opacity: 0; translate: var(--tx, 0px) var(--ty, 0px); scale: 0.6; } }

/* page turn (horizontal wave across columns) */
.sv-product-collection__product-card.is-page-leave { animation: sv-pc-card-out 240ms ease-in both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes sv-pc-card-out { to { opacity: 0; translate: calc(var(--pc-dir-x, 1) * -2rem) -0.6rem; scale: 0.95; } }
.sv-product-collection__product-card.is-page-enter { animation: sv-pc-card-in-x 720ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 85ms); }
@keyframes sv-pc-card-in-x { from { opacity: 0; translate: calc(var(--pc-dir-x, 1) * 3rem) 1rem; scale: 0.94; } }

/* image unmask (all entrances) */
.sv-product-collection__collection.is-entering .sv-product-collection__product-image,
.sv-product-collection__product-card.is-page-enter .sv-product-collection__product-image { animation: sv-pc-unmask 900ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
.sv-product-collection__collection.is-entering .sv-product-collection__product-image img,
.sv-product-collection__product-card.is-page-enter .sv-product-collection__product-image img { animation: sv-pc-settle 1200ms var(--sv-pc-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
@keyframes sv-pc-unmask { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sv-pc-settle { from { scale: 1.16; } }

@media (hover: hover) and (pointer: fine) {
  .sv-product-collection__shard:hover .sv-product-collection__shard-media img { opacity: 0.92; }
  .sv-product-collection__shard:hover:not(.is-center) .sv-product-collection__shard-media::after { transform: translateX(10%); }
  .sv-product-collection__collection-tab:hover { color: var(--sv-pc-ink); }
  .sv-product-collection__pager-button:hover:not(:disabled) { border-color: var(--sv-pc-accent); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-product-collection *,
  .sv-product-collection *::before,
  .sv-product-collection *::after { animation: none !important; transition: none !important; }
  .sv-product-collection { --px: 0 !important; --py: 0 !important; }
}

/* ================= Tablet / Mobile ================= */
@media (max-width: 1023px) {
  .sv-product-collection__grid { --gap: 1.5rem; gap: 2rem var(--gap); }
}
@media (max-width: 767px) {
  .sv-product-collection { padding: 3.25rem 0 3.5rem; }
  .sv-product-collection__inner { width: calc(100% - 2rem); }
  .sv-product-collection { --shard-w: clamp(6.4rem, 29vw, 8rem); --step-k: 1.32; }
  .sv-product-collection__panel { padding-top: 3rem; }
  .sv-product-collection__ghost { font-size: 7.5rem; }
  .sv-product-collection__collections::before { inset: -1.4rem -0.4rem -0.8rem -0.8rem; }
  .sv-product-collection__collections::after { inset: -0.4rem -1rem -1.6rem 6%; }
  .sv-product-collection__grid { --gap: 0.9rem; --cols: 2; gap: 1.8rem var(--gap); padding-bottom: 2.6rem; }
  .sv-product-collection__grid[data-count="1"] { --cols: 1; --card-max: 17rem; }
  .sv-product-collection__grid[data-count="2"],
  .sv-product-collection__grid[data-count="4"] { --cols: 2; --card-max: 100rem; --gap: 0.9rem; }
  .sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos] { --d: 0.8; transform: none; z-index: auto; }
  .sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="1"],
  .sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="3"],
  .sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="5"] { --d: 1.5; transform: translateY(1.5rem); z-index: 2; }
  .sv-product-collection.is-enhanced .sv-product-collection__grid[data-count="1"] > [data-pos="0"] { --d: 1.3; transform: none; }
  .sv-product-collection__grid > .sv-product-collection__product-card .sv-product-collection__product-link::before,
  .sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="1"] .sv-product-collection__product-link::before,
  .sv-product-collection.is-enhanced .sv-product-collection__grid > [data-pos="4"] .sv-product-collection__product-link::before,
  .sv-product-collection__grid[data-count="1"] .sv-product-collection__product-link::before,
  .sv-product-collection__grid[data-count="2"] .sv-product-collection__product-link::before { top: -0.5rem; right: -0.5rem; bottom: 0.5rem; left: 0.5rem; }
}