/* SORA LIFE / Category edit. Three packshots cross an elliptical colour field;
   product facts and controls sit on the page ground. Saved theme values remain
   authoritative. Only transforms and opacity carry the carousel motion. */
.cspot {
  --cspot-h: 240px;
  --cspot-seat-w: 48%;
  --cspot-shot-h: 88%;
  --cspot-side-scale: 0.55;
  --cspot-side-x: 32cqw;
  --cspot-side-op: 0.88;
  --cspot-active-y: 0px;
  --cspot-side-y: -30px;
  --cspot-item-scale: 1;
  --cspot-item-y: 0px;
  --cspot-dur: 520ms;
  --cspot-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cspot-meta-dur: 360ms;
  --cspot-bg: #F1EDE4;
  --cspot-grad: none;
  --cspot-arc-w: 114%;
  --cspot-arc-h: 218px;
  --cspot-arc-curve: 48%;
  --cspot-name-size: 25px;
  --cspot-ink-mute: #232E26;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 6px;
  background: transparent;
}

/* Fixed to the art stage, never the height of a wrapping title. The bottom
   of the colour crosses the PACKSHOTS, leaving every metadata row on ivory. */
.cspot__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cspot__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cspot-arc-w);
  height: var(--cspot-arc-h);
  transform: translateX(-50%);
  border-radius: 0 0 50% 50% / 0 0 var(--cspot-arc-curve) var(--cspot-arc-curve);
  background-color: var(--cspot-bg);
  background-image: var(--cspot-grad);
  pointer-events: none;
}
.cspot__bg--incoming { animation: cspot-field-in var(--cspot-dur) ease-out both; }
@keyframes cspot-field-in { from { opacity: 0; } to { opacity: 1; } }

.cspot__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
  text-align: center;
}
.cspot__eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin: 0;
  color: var(--cspot-ink-mute);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cspot__eyebrow span:first-child { letter-spacing: 0.18em; }
.cspot__eyebrow span:last-child { text-align: right; }
.cspot__stage {
  position: relative;
  width: 100%;
  height: var(--cspot-h);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transform: translate3d(var(--cspot-drag, 0px), 0, 0);
  transition: transform 180ms var(--cspot-ease);
}
.cspot__stage[data-dragging] { transition: none; cursor: grabbing; }
.cspot__stage:focus-visible,
.cspot__shot:focus-visible,
.cspot__cta:focus-visible,
.cspot__arrow:focus-visible,
.cspot__rotation:focus-visible {
  outline: 2px solid var(--slv2-accent-primary, #1E3A2F);
  outline-offset: 4px;
}
.cspot__seat {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cspot-seat-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--cspot-dur) var(--cspot-ease),
    opacity var(--cspot-dur) var(--cspot-ease);
  will-change: transform, opacity;
}
.cspot__seat--active {
  transform: translate3d(-50%, var(--cspot-active-y), 0) scale(1);
  opacity: 1;
  z-index: 2;
}
.cspot__seat--prev {
  transform: translate3d(calc(-50% - var(--cspot-side-x)), var(--cspot-side-y), 0) scale(var(--cspot-side-scale));
  opacity: var(--cspot-side-op);
  z-index: 1;
}
.cspot__seat--next {
  transform: translate3d(calc(-50% + var(--cspot-side-x)), var(--cspot-side-y), 0) scale(var(--cspot-side-scale));
  opacity: var(--cspot-side-op);
  z-index: 1;
}
.cspot__shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--cspot-shot-h);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cspot__shot--link { text-decoration: none; }
.cspot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 9px rgba(24, 32, 26, 0.17));
  transform: translateY(var(--cspot-item-y)) scale(var(--cspot-item-scale));
  transform-origin: center center;
}
.cspot__img--framed { filter: drop-shadow(0 6px 7px rgba(24, 32, 26, 0.1)); }
.cspot__img--empty {
  display: block;
  inset: 0 20%;
  width: auto;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.cspot__sidename {
  position: absolute;
  top: calc(50% + var(--cspot-shot-h) / 2 + 10px);
  width: 128%;
  color: var(--cspot-ink-mute);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cspot__meta {
  position: relative;
  margin: 0 auto;
  max-width: 470px;
  animation: cspot-meta-in var(--cspot-meta-dur) var(--cspot-ease) both;
}
@keyframes cspot-meta-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: none; }
}
.cspot__headline {
  margin: 0 0 5px;
  color: var(--cspot-ink-mute);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.cspot__name {
  margin: 0;
  color: var(--slv2-ink, #16211B);
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--cspot-name-size);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cspot__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 4px;
  margin: 9px 0 0;
  color: var(--cspot-ink-mute);
  font-size: 12px;
  line-height: 1.5;
}
.cspot__facts:empty { display: none; }
.cspot__price { font-weight: 700; font-size: 14px; }
.cspot__form { padding-left: 10px; border-left: 1px solid rgba(24, 32, 26, 0.24); }
.cspot__form:first-child { padding-left: 0; border-left: 0; }
.cspot__rating { display: inline-flex; align-items: center; gap: 3px; }
.cspot__rating svg { color: var(--slv2-accent-primary, #1E3A2F); }
.cspot__reviews { color: var(--cspot-ink-mute); }
.cspot__subline {
  margin: 6px 0 0;
  color: var(--cspot-ink-mute);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cspot__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.cspot__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--slv2-r-ui, 2px);
  background: var(--slv2-cta-primary-bg, #1E3A2F);
  color: var(--slv2-cta-primary-text, #FBF8F1);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.cspot__cta svg { transition: transform 180ms ease-out; }
.cspot__cta:hover svg { transform: translateX(3px); }
.cspot__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(24, 32, 26, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--slv2-ink, #16211B);
  cursor: pointer;
  transition: background-color 180ms ease-out;
}
.cspot__arrow:hover { background-color: rgba(24, 32, 26, 0.06); }
.cspot__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  margin-top: 3px;
  color: var(--cspot-ink-mute);
}
.cspot__hint { font-size: 9px; letter-spacing: 0.035em; }
.cspot__pips { display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 50%; }
.cspot__pip {
  flex: 0 1 5px;
  width: 5px;
  height: 3px;
  border-radius: 2px;
  background: rgba(24, 32, 26, 0.24);
}
.cspot__pip.is-on { flex-basis: 18px; width: 18px; background: var(--slv2-accent-primary, #1E3A2F); }
.cspot__position { font-size: 10px; font-variant-numeric: tabular-nums; }
.cspot__rotation {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: -7px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Container units keep neighbouring seats inside the Admin preview as well
   as the storefront. Breakpoints retain independent art direction. */
@container (min-width: 768px) {
  .cspot__inner, .cspot__backdrop {
    --cspot-h: 344px;
    --cspot-shot-h: 88%;
    --cspot-seat-w: 36%;
    --cspot-side-x: 29cqw;
    --cspot-side-scale: 0.6;
    --cspot-active-y: -12px;
    --cspot-side-y: -40px;
    --cspot-arc-h: 294px;
    --cspot-arc-w: 110%;
    --cspot-arc-curve: 46%;
    --cspot-name-size: 30px;
  }
  .cspot__inner { padding-inline: 32px; }
  .cspot__eyebrow { min-height: 48px; font-size: 10px; }
  .cspot__sidename { width: 110%; font-size: 17px; }
}
@container (min-width: 1100px) {
  .cspot__inner, .cspot__backdrop {
    --cspot-h: 386px;
    --cspot-seat-w: 40%;
    --cspot-shot-h: 88%;
    --cspot-side-scale: 0.57;
    --cspot-side-x: min(17cqw, 225px);
    --cspot-active-y: -12px;
    --cspot-side-y: -30px;
    --cspot-arc-w: 74%;
    --cspot-arc-h: 330px;
    --cspot-arc-curve: 48%;
    --cspot-name-size: 36px;
  }
  .cspot__backdrop { left: 44%; }
  .cspot__bg { width: 120%; }
  .cspot__inner {
    padding-block: 18px 24px;
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 42px;
    text-align: left;
  }
  .cspot__eyebrow { grid-column: 1; grid-row: 1; align-self: end; justify-content: flex-start; gap: 14px; }
  .cspot__meta { grid-column: 1; grid-row: 2; margin: 0; }
  .cspot__stage { grid-column: 2; grid-row: 1 / span 4; }
  .cspot__actions { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 22px; }
  .cspot__nav { grid-column: 1; grid-row: 4; justify-content: flex-start; align-self: start; }
  .cspot__facts { justify-content: flex-start; }
  .cspot__sidename { font-size: 17px; }
  .cspot__hint { display: none; }
}

/* Reduced motion is immediate, including background and text. */
@media (prefers-reduced-motion: reduce) {
  .cspot *, .cspot *::before, .cspot *::after { animation: none !important; transition: none !important; }
}
.cspot--still * { animation: none !important; transition: none !important; }

/* Category-only density; ProductBrowser continues to own all catalogue logic. */
.v2-shop--spotlit .v2-shop__head--tight { padding-top: 10px; padding-bottom: 8px; }
.v2-shop--spotlit .v2-shop__head--tight .v2-shop__title { font-size: 23px; line-height: 1.15; margin: 0; }
.v2-shop--spotlit .v2-shop__head--tight .v2-shop__lede { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
.v2-shop--spotlit .v2-shop__cats { margin-top: 8px; margin-bottom: 0; }
.v2-shop--spotlit .v2-shop__search { margin-top: 8px; }
.v2-shop--spotlit .v2-flt { margin-top: 8px; }
.v2-shop--spotlit .v2-pb { padding-top: 0; }
@media (min-width: 768px) {
  .v2-shop--spotlit .v2-shop__head--tight { padding-top: 16px; }
  .v2-shop--spotlit .v2-shop__head--tight .v2-shop__title { font-size: 28px; }
}
@media (min-width: 1100px) {
  .v2-shop--spotlit .v2-shop__head--tight .v2-shop__title { font-size: 32px; }
}

.v2-shop--spotlit .v2-shop__related { padding-top: 24px; padding-bottom: 28px; }
.v2-shop__related-title { margin: 0 0 12px; font-size: 20px; font-weight: 500; font-family: var(--font-serif, Georgia, serif); }

/* The shared mobile category opening. :has follows the actual activation gate,
   including async settings, empty pools and unavailable products. The global
   header and every layout at 768px and above remain unchanged. */
.cspot__category-nav { display: none; }
@media (max-width: 767px) {
  .v2-shop--spotlit:has(> .cspot--category-page) > .v2-shop__head--tight { display: none; }
  .cspot--category-page { --cspot-arc-h: 236px; }
  .cspot--category-page .cspot__eyebrow { display: none; }
  .cspot__category-nav {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-height: 54px;
    padding-block: 5px;
    color: var(--cspot-mobile-ink, #16211B);
    text-align: left;
  }
  .cspot__category-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    color: inherit;
    text-decoration: none;
  }
  .cspot__category-back:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
  .cspot__category-name {
    color: inherit;
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }
  .cspot__category-label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
  .cspot__bg {
    background-color: var(--cspot-mobile-bg, var(--cspot-bg));
    background-image: var(--cspot-mobile-grad, var(--cspot-grad));
  }
  .cspot__eyebrow { color: var(--cspot-mobile-ink, #16211B); }
  .cspot__sidename { top: calc(50% + var(--cspot-shot-h) / 2 + 60px); }
}