/* ==========================================================================
   Zenshin — combined storefront
   Layer 01: the Zen collection, shown as a full-bleed drag gallery.
   Layer 02: the Anime collection, shown as a swipeable rail.
   These styles sit on top of the existing theme and are fully scoped.
   ========================================================================== */

/* The legacy collection bar, hero and grid are now replaced by the two
   layered sections below. They stay in the DOM (the cart/lightbox logic still
   uses the grid) but are never shown. */
.coll-bar,
.hero,
.grid-wrap,
.sticky-cta {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Shared: section furniture
   -------------------------------------------------------------------------- */
.zc,
.ar {
  position: relative;
  isolation: isolate;
  /* Clip the layer without turning it into a scroll container. `overflow:
     hidden` would make these blocks scroll containers, and on phones the
     browser would then hand a vertical swipe to them (absorbing it) instead of
     scrolling the page — so a finger dragged on the full-bleed Zen shelf could
     not reach the Anime section below. `overflow: clip` clips exactly the same
     way but lets the gesture pass straight through to the page. */
  overflow: hidden;
  overflow: clip;
}

/* The Zen shelf is swipe-driven and full-bleed, so a mostly-vertical swipe at
   the top of the page used to be read by mobile browsers as a pull-to-refresh
   and reload the whole page. Suppress overscroll (both axes) so the browser
   never turns a gallery gesture into a refresh or an edge back/forward swipe.
   Ordinary in-page scrolling is unaffected. */
html,
body {
  overscroll-behavior: none;
}

.zc-head,
.ar-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(34px, 6vw, 72px) clamp(18px, 4vw, 56px) clamp(20px, 3vw, 34px);
}

.zc-head {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* On the Zen layer the heading rides on top of the gallery so the cover
   itself is the hero of the first screen. */
.zc .zc-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 7;
  max-width: none;
  margin: 0;
  gap: 6px;
  padding: clamp(18px, 2.8vw, 36px) clamp(18px, 4.5vw, 60px) clamp(46px, 7vw, 84px);
  background: linear-gradient(to bottom, rgba(5, 9, 7, .86) 0%, rgba(5, 9, 7, .34) 52%, rgba(5, 9, 7, 0) 100%);
  pointer-events: none;
}

.zc .zc-head h2 .jp {
  font-size: clamp(20px, 2.6vw, 32px);
}

.zc .zc-head h2 .lt {
  font-size: clamp(22px, 3.2vw, 42px);
}

.zc .zc-head p {
  font-size: 12.5px;
  max-width: 48ch;
}

.ar-head {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

.kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.kick::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.zc-head h2,
.ar-head h2 {
  margin: 0;
  line-height: .94;
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 22px);
  flex-wrap: wrap;
}

.zc-head h2 .jp,
.ar-head h2 .jp {
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1;
}

.zc-head h2 .lt,
.ar-head h2 .lt {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(30px, 6.6vw, 70px);
}

.zc-head p,
.ar-head p {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.65;
}

/* Noise/grain overlay for atmosphere — non-interactive, section-scoped. */
.zc-grain,
.ar-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   LAYER 01 — ZEN
   ========================================================================== */
.zc {
  --zc-ink: #0a110d;
  --zc-ink-2: #0e1712;
  --zc-paper: #f2eee0;
  --zc-dim: #9fb3a6;
  --zc-ember: #d8613f;
  --zc-jade: #57c295;
  --zc-gold: #dcb46a;
  background-color: #0a110d;
  background-image:
    linear-gradient(180deg, rgba(6, 10, 8, .5) 0%, rgba(6, 10, 8, .22) 38%, rgba(6, 10, 8, .34) 68%, rgba(6, 10, 8, .86) 100%),
    url("/assets/bg-zen.be5b4c8b.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: var(--zc-paper);
}

.zc .kick {
  color: var(--zc-jade);
}

.zc-head h2 .jp {
  color: var(--zc-jade);
}

.zc-head h2 .lt {
  color: var(--zc-paper);
}

.zc-head p {
  color: var(--zc-dim);
}

/* The swipe stage. The track is a native horizontal scroll-snap container —
   the same mechanism the Anime rail uses — so the Zen shelf inherits the
   browser's own momentum and snapping instead of a script-driven transform. */
.zc-stage {
  position: relative;
  z-index: 2;
  /* Same reasoning as `.zc`: clip, don't become a scroll container, so an
     up/down swipe on the shelf scrolls the page down to the Anime section. */
  overflow: hidden;
  overflow: clip;
  min-height: clamp(540px, calc(100svh - 104px), 940px);
  min-height: clamp(540px, calc(100vh - 104px), 940px);
}

.zc-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}

.zc-track::-webkit-scrollbar {
  display: none;
}

.zc-track.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.zc-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  min-height: clamp(540px, calc(100svh - 104px), 940px);
  min-height: clamp(540px, calc(100vh - 104px), 940px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Vignette + fades that sit over the Zen backdrop, giving the artwork depth
   and keeping the heading and information bar legible. */
.zc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(80% 64% at 50% 44%, rgba(0, 0, 0, 0) 0%, rgba(6, 10, 8, .34) 72%, rgba(6, 10, 8, .82) 100%),
    linear-gradient(180deg, rgba(6, 10, 8, .5) 0%, rgba(6, 10, 8, 0) 30%, rgba(6, 10, 8, .82) 100%);
}

.zc-kj {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(-8px, 1vw, 40px);
  transform: translateY(-50%);
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(180px, 32vw, 460px);
  line-height: .8;
  color: rgba(242, 238, 224, .045);
  pointer-events: none;
  user-select: none;
}

.zc-art {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: clamp(84px, 15vh, 160px) clamp(24px, 8vw, 120px) clamp(150px, 22vh, 210px);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.zc-art img {
  width: auto;
  height: clamp(355px, 66vh, 720px);
  max-width: 90vw;
  object-fit: contain;
  border-radius: 26px;
  filter: drop-shadow(0 44px 74px rgba(0, 0, 0, .66)) drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}

.zc-slide:hover .zc-art {
  transform: translateY(-8px) scale(1.012);
}

/* While a cover is being dragged, drop the hover lift so the artwork doesn't
   jump under the finger mid-swipe. */
.zc-track.dragging .zc-slide .zc-art {
  transform: none;
}

/* Hero count + slide furniture */
.zc-count {
  position: absolute;
  z-index: 6;
  top: clamp(16px, 3vw, 30px);
  right: clamp(16px, 3vw, 34px);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: rgba(242, 238, 224, .72);
}

/* Bottom information bar */
.zc-bar {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(20px, 4vw, 46px) clamp(18px, 4.5vw, 60px);
  background: linear-gradient(to top, rgba(4, 8, 6, .95) 4%, rgba(4, 8, 6, .55) 52%, rgba(4, 8, 6, 0));
}

.zc-info {
  min-width: 0;
}

.zc-title {
  margin: 0 0 8px;
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.02;
  color: var(--zc-paper);
}

.zc-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--zc-jade);
}

.zc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--zc-dim);
}

.zc-tags .zt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zc-tags .zt svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--zc-jade);
}

.zc-dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.zc-buy-col {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 2.4vw, 30px);
  flex-shrink: 0;
}

.zc-price {
  text-align: right;
  line-height: 1;
}

.zc-price .now {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  color: var(--zc-gold);
}

.zc-price .was {
  display: inline-block;
  font-size: 14px;
  color: var(--zc-dim);
  text-decoration: line-through;
  margin-top: 4px;
}

.zc-offer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(216, 97, 63, .5);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #f0b9a8;
  background: rgba(216, 97, 63, .12);
}

.zc-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.zc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}

.zc-btn:active {
  transform: scale(.97);
}

.zc-btn.solid {
  background: var(--zc-paper);
  color: #0c1310;
}

.zc-btn.solid:hover {
  background: #fff;
}

.zc-btn.ghost {
  background: rgba(242, 238, 224, .06);
  border-color: rgba(242, 238, 224, .32);
  color: var(--zc-paper);
}

.zc-btn.ghost:hover {
  background: rgba(242, 238, 224, .14);
  border-color: rgba(242, 238, 224, .6);
}

/* Controls */
.zc-arrows {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(10px, 2vw, 26px);
  pointer-events: none;
}

.zc-arrow {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--zc-paper);
  background: rgba(8, 14, 11, .42);
  border: 1px solid rgba(242, 238, 224, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .16s ease, border-color .2s ease;
}

.zc-arrow:hover {
  background: rgba(8, 14, 11, .75);
  border-color: rgba(242, 238, 224, .6);
}

.zc-arrow:active {
  transform: scale(.92);
}

.zc-arrow svg {
  width: 18px;
  height: 18px;
}

/* A tappable "Next cover" control, shown only on small screens where the
   arrows and dots are hidden. It advances the Zen gallery to the next cover. */
.zc-next {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--zc-paper);
  background: rgba(242, 238, 224, .06);
  border: 1px solid rgba(242, 238, 224, .34);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .16s ease;
}

.zc-next:hover {
  background: rgba(242, 238, 224, .14);
  border-color: rgba(242, 238, 224, .6);
}

.zc-next:active {
  transform: scale(.98);
}

.zc-next svg {
  width: 16px;
  height: 16px;
}

/* A floating "swipe right" cue for the Zen shelf. On phones the side arrows
   are hidden, so this run of chevrons rides over the artwork and flows to the
   right, pointing the way to the next cover. It is built in the section's jade
   accent, glows softly, and fades away once the shopper starts navigating. */
.zc-hint {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: clamp(14px, 5vw, 46px);
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 13px 11px;
  border-radius: 999px;
  background: rgba(6, 12, 9, .42);
  border: 1px solid rgba(87, 194, 149, .42);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38), inset 0 0 20px rgba(87, 194, 149, .1);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s ease, transform .5s ease;
}

.zc-hint-track {
  display: flex;
  align-items: center;
  color: var(--zc-jade);
}

.zc-hint-track svg {
  width: 22px;
  height: 22px;
  margin-left: -11px;
  filter: drop-shadow(0 0 6px rgba(87, 194, 149, .6));
  animation: zcHintFlow 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.zc-hint-track svg:first-child {
  margin-left: 0;
}

.zc-hint-track svg:nth-child(2) {
  animation-delay: .18s;
}

.zc-hint-track svg:nth-child(3) {
  animation-delay: .36s;
}

.zc-hint-label {
  font-size: 9px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(159, 179, 166, .95);
}

@keyframes zcHintFlow {
  0%, 100% { opacity: .16; transform: translateX(-5px); }
  48% { opacity: 1; transform: translateX(3px); }
}

/* Retire the cue once the shopper has moved through the shelf. */
.zc-stage.hint-off .zc-hint {
  opacity: 0;
  transform: translateY(-50%) scale(.92);
}

/* Dots / progress */
.zc-dots {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(12px, 2.2vw, 22px);
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  align-items: center;
}

.zc-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(242, 238, 224, .3);
  transition: transform .2s ease, background .2s ease, width .2s ease;
}

.zc-dots button[aria-current="true"] {
  width: 22px;
  border-radius: 999px;
  background: var(--zc-jade);
}

/* ==========================================================================
   LAYER 02 — ANIME
   ========================================================================== */
.ar {
  --ar-ink: #070b18;
  --ar-ink-2: #0b1230;
  --ar-paper: #eaf0ff;
  --ar-dim: #97a6d6;
  --ar-blue: #5b8cff;
  --ar-cyan: #7ee0ff;
  --ar-pink: #ff5d8f;
  background-color: #070b18;
  background-image:
    linear-gradient(180deg, rgba(5, 9, 20, .82) 0%, rgba(5, 9, 20, .5) 30%, rgba(5, 9, 20, .48) 62%, rgba(5, 9, 20, .86) 100%),
    radial-gradient(110% 80% at 12% -6%, rgba(91, 140, 255, .26), transparent 58%),
    radial-gradient(90% 80% at 100% 108%, rgba(255, 93, 143, .18), transparent 60%),
    url("/assets/bg-anime.41f7bbd4.webp");
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  color: var(--ar-paper);
}

.ar .kick {
  color: var(--ar-cyan);
}

.ar-head h2 .jp {
  color: var(--ar-blue);
}

.ar-head h2 .lt {
  color: var(--ar-paper);
}

.ar-head p {
  color: #b8c4e6;
}

/* swipeable rail */
.ar-railwrap {
  position: relative;
  z-index: 2;
}

.ar-rail {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  padding: 6px clamp(18px, 4vw, 56px) clamp(40px, 6vw, 68px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(18px, 4vw, 56px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.ar-rail.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.ar-rail::-webkit-scrollbar {
  display: none;
}

.ar-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(210px, 21vw, 288px);
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(20, 30, 66, .9), rgba(11, 18, 48, .92));
  border: 1px solid rgba(120, 150, 255, .2);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  opacity: 0;
  transform: translateY(22px);
}

.ar-card.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.ar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(120, 150, 255, .5);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(126, 224, 255, .18);
}

.ar-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: radial-gradient(70% 70% at 50% 30%, rgba(91, 140, 255, .28), rgba(7, 11, 24, .9));
}

.ar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.ar-card:hover .ar-media img {
  transform: scale(1.055);
}

.ar-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #dbe6ff;
  background: rgba(8, 12, 28, .68);
  border: 1px solid rgba(150, 175, 255, .28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ar-body {
  padding: 14px 15px 16px;
}

.ar-name {
  margin: 0 0 10px;
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 18px;
  line-height: 1.08;
  color: var(--ar-paper);
  min-height: 2.16em;
}

.ar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ar-price {
  font-family: "Space Mono", monospace;
  font-size: 15px;
  color: var(--ar-cyan);
}

.ar-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 150, 255, .45);
  background: rgba(91, 140, 255, .16);
  color: #eaf0ff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background .2s ease, transform .16s ease;
}

.ar-add:hover {
  background: rgba(91, 140, 255, .32);
}

.ar-add:active {
  transform: scale(.95);
}

.ar-nav {
  position: absolute;
  z-index: 3;
  top: calc(50% - 34px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ar-paper);
  background: rgba(8, 12, 28, .66);
  border: 1px solid rgba(150, 175, 255, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .16s ease, opacity .2s ease;
}

.ar-nav:hover {
  background: rgba(20, 30, 66, .95);
}

.ar-nav:active {
  transform: scale(.92);
}

.ar-nav[disabled] {
  opacity: .28;
  cursor: default;
}

.ar-nav.prev {
  left: clamp(6px, 1.4vw, 18px);
}

.ar-nav.next {
  right: clamp(6px, 1.4vw, 18px);
}

.ar-nav svg {
  width: 18px;
  height: 18px;
}

.ar-swipe {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ar-dim);
  padding: 0 clamp(18px, 4vw, 56px) 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  /* Stack the slide so the cover art and the information bar sit one above the
     other instead of the bar floating over the artwork. The bar is pinned to
     the bottom and the art sits above it, so the two can never overlap. */
  .zc-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .zc-art {
    padding: clamp(120px, 22vh, 210px) clamp(18px, 6vw, 60px) clamp(18px, 4vw, 36px);
  }

  .zc-art img {
    height: auto;
    max-height: clamp(260px, 46vh, 480px);
    width: auto;
    max-width: min(86vw, 470px);
  }

  .zc-bar {
    position: static;
    margin-top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    background: none;
    padding: 0 clamp(18px, 4.5vw, 60px) clamp(18px, 4vw, 30px);
  }

  .zc-buy-col {
    justify-content: space-between;
    align-items: center;
  }

  .zc-price {
    text-align: left;
  }

  .zc-arrows {
    display: none;
  }

  .zc-dots {
    display: none;
  }

  .zc-next {
    display: flex;
  }

  .zc-hint {
    display: flex;
    top: 44%;
  }

  .zc .zc-head {
    padding-bottom: clamp(60px, 16vw, 120px);
  }

  .zc .zc-head p {
    display: none;
  }

  .ar-rail {
    gap: 12px;
    scroll-snap-type: x mandatory;
  }

  .ar-card {
    width: min(74vw, 300px);
  }

  .ar-nav.prev,
  .ar-nav.next {
    display: none;
  }

  .ar-swipe {
    display: flex;
  }
}

@media (max-width: 560px) {
  .zc-art img {
    max-width: min(85vw, 400px);
  }

  .zc-cta {
    width: 100%;
  }

  .zc-btn.solid {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zc-track,
  .zc-art,
  .ar-card,
  .ar-card.in,
  .ar-media img {
    transition: none !important;
  }

  .zc-hint-track svg {
    animation: none !important;
    opacity: .85;
  }

  .ar-card {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Live orders tag (top bar)
   ========================================================================== */
.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.live-bag {
  display: inline-block;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.live-num {
  display: inline-block;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.live-word {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 560px) {
  .live-tag {
    padding: 6px 10px;
    gap: 6px;
    font-size: 11.5px;
  }

  .live-word {
    display: none;
  }
}