/** Shopify CDN: Minification failed

Line 2641:0 Unexpected "<"

**/


/* ===== extracted style block 1 ===== */
/* ── RESET & TOKENS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #1a1a1a;
  --bg-card:  #222;
  --bg-deep:  #141414;
  --surface:  #2a2a2a;
  --orange:   #E8841C;
  --orange-lt:#F5A03A;
  --green:    #5BB85A;
  --white:    #F2EEE8;
  --muted:    #A09898;
  --dim:      #666;
  --border:   rgba(255,255,255,0.07);
  --border-o: rgba(232,132,28,0.35);
  --gold:     #C89B3C;
  --radius:   6px;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  background: rgba(20,20,20,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.35rem; color: var(--white);
  text-decoration: none; letter-spacing: 0.03em;
}
.nav-brand em { color: var(--orange); font-style: normal; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--orange); }
.nav-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--orange); color: #111;
  padding: 0.5rem 1.25rem; border-radius: var(--radius);
  text-decoration: none; transition: background .2s;
}
.nav-cta:hover { background: var(--orange-lt); }

/* ── SHARED UTILITIES ── */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }
.hr { border: none; border-top: 1px solid var(--border); }
.eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 0.5rem;
}
.section-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900; text-transform: uppercase;
  color: var(--white); line-height: 1;
  margin-bottom: 0.75rem;
}
.section-head em { color: var(--orange); font-style: normal; }
.section-body {
  font-size: 0.95rem; color: var(--muted);
  line-height: 1.7; max-width: 560px;
}
.btn-primary {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--orange); color: #111;
  padding: 0.8rem 1.8rem; border-radius: var(--radius);
  text-decoration: none; border: none; cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--orange-lt); transform: translateY(-1px); }
.btn-outline {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: transparent; color: var(--white);
  padding: 0.75rem 1.6rem; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.2);
  text-decoration: none; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange); }
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ── HERO ── */
.hero {
  min-height: 100vh; padding-top: 56px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--bg-deep);
}

/* ── ULTIMATE EDITION PRODUCT SECTION ── */
.ultimate-section {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.ultimate-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
/* LEFT — atmospheric art panel */
.ult-left {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #0e0820 0%, #1c1040 45%, #0a0618 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 3.5rem;
}
.ult-left::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 65% 35%, rgba(75,47,160,0.4) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 20% 80%, rgba(232,132,28,0.12) 0%, transparent 50%);
}
.ult-bg-glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 18rem; color: rgba(232,132,28,0.04);
  pointer-events: none; user-select: none;
}
.ult-text { position: relative; z-index: 1; }
.ult-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 0.4rem;
}
.ult-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(3.2rem, 5.5vw, 5rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 0.88; color: var(--white);
  margin-bottom: 1.2rem;
}
.ult-headline em { color: var(--orange); font-style: normal; display: block; }
.ult-includes {
  list-style: none; margin-bottom: 1.8rem;
}
.ult-includes li {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(242,238,232,0.8);
  display: flex; align-items: center; gap: 0.6rem;
  line-height: 1.7;
}
.ult-includes li::before {
  content: '';
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--orange);
  flex-shrink: 0;
}
.ult-wm {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 0.95rem; color: rgba(242,238,232,0.3);
}
/* RIGHT — product panel */
.ult-right {
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  padding: 3rem 2.8rem;
  display: flex; flex-direction: column; justify-content: center;
}
.ult-price-row {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.ult-price-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.ult-price-was {
  font-size: 0.95rem; color: var(--dim);
  text-decoration: line-through;
}
.ult-price-now {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 900;
  color: var(--green); line-height: 1;
}
.ult-bestseller {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold);
  padding: 0.2rem 0.6rem; border-radius: 4px;
}
.ult-discount-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green); color: #111;
  padding: 0.22rem 0.68rem; border-radius: 4px;
  align-self: center; white-space: nowrap;
}
.stars-line {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.stars { color: var(--orange); font-size: 0.95rem; }
.stars-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem; font-weight: 700;
}
.stars-ct { font-size: 0.82rem; color: var(--muted); }
.ult-product-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  line-height: 1.25; margin-bottom: 0.8rem;
}
.ult-product-desc {
  font-size: 0.88rem; color: var(--muted);
  line-height: 1.7; margin-bottom: 1.8rem;
}
.add-btn {
  width: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--orange); color: #111;
  border: none; border-radius: var(--radius);
  padding: 1rem; cursor: pointer;
  transition: background .2s;
}
.add-btn:hover { background: var(--orange-lt); }

/* ── WHY TERROR TAROT ── */
.why-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-deep);
}

.why-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('image_0064_623a82f2ad93.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.96;
  filter: brightness(0.94) contrast(1.04) saturate(1.12);
}

.why-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.40) 42%, rgba(0,0,0,0.50) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.04) 45%, rgba(0,0,0,0.24) 100%);
}

.why-section .wrap {
  position: relative;
  z-index: 2;
}

@media (max-width: 1000px) {
  .why-section::before {
    background-image: url('image_0065_b9acfc96823f.webp');
    background-size: cover;
    background-position: center top;
  }

  .why-section::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.25) 42%, rgba(0,0,0,0.32) 20%),
      linear-gradient(to bottom, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.03) 45%, rgba(0,0,0,0.19) 100%);
  }

}
.why-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.why-cards { display: flex; flex-direction: column; gap: 1px; }
.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  margin-bottom: 0.75rem;
  position: relative; overflow: hidden;
  transition: border-color .25s;
}
.why-card:hover { border-color: var(--border-o); }
.why-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--orange);
  opacity: 0; transition: opacity .25s;
}
.why-card:hover::before { opacity: 1; }
.why-card-icon {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.6rem; color: var(--orange);
  margin-bottom: 0.6rem; display: block;
}
.why-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--white); margin-bottom: 0.4rem;
}
.why-card p {
  font-size: 0.88rem; color: var(--muted);
  line-height: 1.65; font-style: italic;
}


/* Embedded image cards for the Why Terror Tarot section */
.why-card.why-card-artwork,
.why-card.why-card-horror,
.why-card.why-card-craftsmanship {
  isolation: isolate;
  min-height: 185px;
  background: var(--bg-card);
}

.why-card.why-card-artwork .why-card-bg-img,
.why-card.why-card-horror .why-card-bg-img,
.why-card.why-card-craftsmanship .why-card-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.94;
  filter: brightness(0.96) contrast(1.08) saturate(1.12);
  z-index: 0;
  pointer-events: none;
}

.why-card.why-card-artwork::after,
.why-card.why-card-horror::after,
.why-card.why-card-craftsmanship::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(34,34,34,0.94) 0%,
    rgba(34,34,34,0.82) 28%,
    rgba(34,34,34,0.50) 52%,
    rgba(34,34,34,0.10) 100%
  );
}

.why-card.why-card-artwork::before,
.why-card.why-card-horror::before,
.why-card.why-card-craftsmanship::before {
  z-index: 4;
}

.why-card.why-card-artwork .why-card-icon,
.why-card.why-card-artwork h3,
.why-card.why-card-artwork p,
.why-card.why-card-horror .why-card-icon,
.why-card.why-card-horror h3,
.why-card.why-card-horror p,
.why-card.why-card-craftsmanship .why-card-icon,
.why-card.why-card-craftsmanship h3,
.why-card.why-card-craftsmanship p {
  position: relative;
  z-index: 3;
}

/* ── TAPESTRIES ── */
.tapestry-section {
  padding: 6rem 0;
  background:
    linear-gradient(rgba(8, 8, 12, 0.48), rgba(8, 8, 12, 0.60)),
    url('image_0066_ad0645307552.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
  .tapestry-section {
    background:
      linear-gradient(rgba(8, 8, 12, 0.42), rgba(8, 8, 12, 0.52)),
      url('image_0067_6dbd7e8dea62.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

.tapestry-top {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  gap: 2rem; margin-bottom: 2.5rem;
}
.tapestry-top-text .section-body { max-width: 400px; }
.tap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1rem;
}
.tap-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tap-card:hover {
  border-color: var(--border-o);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.24);
}
.tap-img {
  aspect-ratio: 1 / 1;
  background: #0f0f0f;
  overflow: hidden;
  position: relative;
}
.tap-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .24s ease, transform .35s ease;
}
.tap-card:hover .tap-photo { transform: scale(1.015); }
.tap-card.is-fading .tap-photo {
  opacity: 0;
}
.tap-body { padding: 0.78rem 0.9rem 0.95rem; }
.tap-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name toggle"
    "price label";
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.32rem;
}
.tap-name {
  grid-area: name;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
  margin: 0;
}
.tap-edition-toggle {
  grid-area: toggle;
  justify-self: center;
  position: relative;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(201,155,60,0.45);
  border-radius: 999px;
  background: #171717;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.tap-edition-toggle:hover {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,132,28,0.12);
  transform: translateY(-1px);
}
.tap-edition-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform .24s ease, background .2s ease;
}
.tap-card.is-shadow .tap-edition-toggle {
  background: var(--orange);
  border-color: var(--orange);
}
.tap-card.is-shadow .tap-edition-toggle::after {
  transform: translateX(26px);
  background: #111;
}
.tap-toggle-label {
  grid-area: label;
  justify-self: center;
  min-width: 64px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.tap-card.is-shadow .tap-toggle-label {
  color: var(--orange);
}
.tap-price {
  grid-area: price;
  align-self: center;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1;
}
.tap-price .from { font-size: 0.7rem; color: var(--dim); }

/* Second row: 3 cards */
.tap-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 2rem;
}

/* ── WALLPAPER ── */
.wall-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  background: linear-gradient(155deg, var(--bg-deep) 0%, var(--bg) 42%, var(--bg-card) 72%, var(--bg-deep) 100%);
}
.wall-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 46%, var(--orange) 0%, transparent 32%),
    radial-gradient(ellipse at 74% 24%, var(--bg-card) 0%, transparent 34%),
    linear-gradient(90deg, var(--bg-deep) 0%, transparent 36%, transparent 64%, var(--bg-deep) 100%);
  opacity: 0.16;
}
@media (min-width: 1001px) {
  .wall-section {
    background: linear-gradient(115deg, var(--bg-deep) 0%, var(--bg) 34%, var(--bg-card) 62%, var(--bg-deep) 100%);
  }
  .wall-section::before {
    background:
      radial-gradient(ellipse at 22% 52%, var(--orange) 0%, transparent 30%),
      radial-gradient(ellipse at 68% 30%, var(--gold) 0%, transparent 26%),
      linear-gradient(90deg, var(--bg-deep) 0%, transparent 30%, transparent 70%, var(--bg-deep) 100%);
    opacity: 0.12;
  }
}
.wall-section .wall-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.wall-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pill {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 50px; padding: 0.28rem 0.75rem;
  color: var(--muted); background: rgba(255,255,255,0.04);
}
.wp-carousel {
  position: relative;
  width: min(100%, 240px);
  margin: 0 auto;
  text-align: center;
}
.wp-phone {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 9 / 19;
  margin: 0 auto;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  background: var(--bg-deep);
  border: 2px solid var(--border);
  border-radius: 32px;
  box-shadow: 0 22px 80px rgba(0,0,0,0.7);
}
.wp-phone.is-dragging { cursor: grabbing; }
.wp-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 7;
  width: 60px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50px;
  background: var(--bg-card);
}
.wp-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  height: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 7px 15px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  pointer-events: none;
}
.wp-status-icons {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--white);
}
.wp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.wp-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-signal { width: 12px; height: 8px; }
.wp-wifi { width: 12px; height: 8px; }
.wp-battery {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 17px;
  height: 8px;
  padding: 1px;
  color: var(--white);
  border: 1px solid currentColor;
  border-radius: 2.5px;
}
.wp-battery::after {
  content: '';
  position: absolute;
  top: 2px;
  right: -3px;
  width: 1.5px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
}
.wp-battery-fill {
  display: block;
  width: 53%;
  height: 100%;
  border-radius: 1.3px;
  background: currentColor;
}
.wp-lock-time {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  z-index: 4;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3.55rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.55);
  pointer-events: none;
}
.wp-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.wp-track.no-transition { transition: none; }
.wp-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wp-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.wp-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color .2s, color .2s, background .2s, opacity .2s;
}
.wp-arrow:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}
.wp-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}
.wp-prev { left: -54px; }
.wp-next { right: -54px; }
.wp-card-name {
  display: block;
  max-width: 100%;
  margin-top: 0.9rem;
  overflow: hidden;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--white);
  line-height: 1.2;
}
.wp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.55rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wp-progress {
  width: 100%;
  height: 3px;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 50px;
  background: var(--surface);
}
.wp-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to right, var(--orange), var(--orange-lt));
  transition: width .25s ease;
}
.wp-tip {
  margin-top: 0.55rem;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--dim);
  line-height: 1.4;
}
@media (max-width: 1000px) {
  .wall-section .wall-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .wp-prev { left: -20px; }
  .wp-next { right: -20px; }
}
@media (max-width: 480px) {
  .wp-carousel { width: min(100%, 210px); }
  .wp-arrow {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  .wp-prev { left: -16px; }
  .wp-next { right: -16px; }
  .wp-lock-time {
    top: 39px;
    font-size: 3rem;
  }
  .wp-card-name { font-size: 0.82rem; }
  .wp-meta { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tap-photo,
  .tap-edition-toggle,
  .tap-edition-toggle::after {
    transition: none;
  }
}


/* ── REVIEWS ── */
.reviews-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}
.reviews-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  background-image:
    radial-gradient(1px 1px at 40px 35px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 100px 90px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 180px 30px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 240px 140px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 320px 55px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 400px 110px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 470px 25px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 550px 90px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 630px 50px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 60px 200px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 150px 175px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 280px 215px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 380px 180px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 460px 220px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 580px 195px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 640px 230px, rgba(255,255,255,0.4), transparent);
  background-size: 520px 200px;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at center, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.34) 36%, rgba(0,0,0,0.72) 70%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 62% at center, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.34) 36%, rgba(0,0,0,0.72) 70%, #000 100%);
}
.reviews-section > .wrap {
  position: relative;
  z-index: 2;
}
.reviews-header { text-align: center; margin-bottom: 3rem; }
.reviews-header h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900; text-transform: uppercase;
  color: var(--white); margin-bottom: 0.3rem;
}
.reviews-header p { font-size: 0.9rem; color: var(--muted); max-width: 480px; margin: 0 auto; }
.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-bottom: 2rem;
}
.rev-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 1.5rem;
  transition: border-color .25s;
}
.rev-card:hover { border-color: var(--border-o); }
.rev-stars { color: var(--orange); font-size: 0.85rem; margin-bottom: 0.7rem; }
.rev-text {
  font-size: 0.87rem; font-style: italic;
  color: var(--muted); line-height: 1.7;
  margin-bottom: 1rem;
}
.rev-author {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.reviews-footer {
  text-align: center; font-size: 0.88rem; color: var(--muted);
}
.reviews-footer a { color: var(--orange); text-decoration: none; }
.reviews-footer a:hover { text-decoration: underline; }

/* ── FINAL CTA ── */
.final-section {
  padding: 8rem 0;
  text-align: center;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0e0820 0%, #1b1038 50%, #0a0618 100%);
  border-top: 1px solid var(--border);
}
.final-section::before {
  content: 'TERROR TAROT';
  position: absolute;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: rgba(232,132,28,0.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
}
.final-section .wrap { position: relative; z-index: 1; }
.final-badge {
  display: inline-block; margin-bottom: 1.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold);
  padding: 0.3rem 0.85rem; border-radius: 4px;
}
.final-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 1; color: var(--white);
  margin-bottom: 0.6rem;
}
.final-title em { color: var(--orange); font-style: normal; display: block; }
.final-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--dim); margin-bottom: 0.4rem;
}
.final-price s { color: var(--dim); }
.final-price .now { color: var(--green); margin-left: 0.5rem; font-size: 1.4rem; }
.final-sub { font-size: 0.9rem; color: var(--muted); font-style: italic; margin-bottom: 2.5rem; }
.final-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.final-bg-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.final-bg-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 16, 0.42) 0%, rgba(8, 6, 16, 0.20) 24%, rgba(8, 6, 16, 0.20) 76%, rgba(8, 6, 16, 0.44) 100%),
    linear-gradient(90deg, rgba(7, 5, 14, 0.54) 0%, rgba(7, 5, 14, 0.14) 18%, rgba(7, 5, 14, 0.14) 82%, rgba(7, 5, 14, 0.54) 100%);
}
.final-bg-track {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1vw, 16px);
  width: max-content;
  height: 100%;
  padding: 0 clamp(10px, 1vw, 16px);
  animation: finalBgScroll 180s linear infinite;
  opacity: 0.42;
}
.final-bg-item {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 14px 35px rgba(0,0,0,0.34);
}
.final-bg-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
}
@keyframes finalBgScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 900px) {
  .final-bg-track { opacity: 0.32; animation-duration: 260s; }
  .final-bg-item { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .final-bg-track { animation: none; }
}

/* ── FOOTER ── */
footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 1.8rem 2.5rem;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-brand {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.15rem; color: var(--white);
  text-decoration: none;
}
.footer-brand em { color: var(--orange); font-style: normal; }
.footer-links { display: flex; gap: 1.8rem; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--orange); }
.footer-copy { font-size: 0.75rem; color: var(--dim); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  nav { padding: 0 1.5rem; }
  .nav-links { display: none; }
  .ultimate-inner { grid-template-columns: 1fr; }
  .ult-left { min-height: 360px; }
  .ult-right { border-left: none; border-top: 1px solid var(--border); }
  .why-inner { grid-template-columns: 1fr; gap: 2rem; }
  .tap-grid { grid-template-columns: 1fr 1fr; }
  .tap-grid-3 { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .wall-inner { grid-template-columns: 1fr; text-align: center; }
  .wall-inner .wall-pills { justify-content: center; }
  footer { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}
@media (max-width: 600px) {
  .tap-grid { grid-template-columns: 1fr; }
  .tapestry-top { flex-direction: column; align-items: flex-start; }
}

/* ── SPLIT HERO ── */
.hero {
  min-height: 100vh;
  padding-top: 56px;
  display: block;
  position: relative;
  overflow: hidden;
}
/* split-hero grid defined in hover section below */

/* PANELS */
.split-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 3.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
}

/* Shared photo — each side uses background-position to show its half */
.split-bg {
  position: absolute; inset: 0;
  background-image: url('image_0063_79e745fa9ee6.webp');
  background-size: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.split-bg-left  { background-position: left center; }
.split-bg-right { background-position: right center; }

/* Dark overlays */
.split-overlay {
  position: absolute; inset: 0;
  transition: opacity 0.4s ease;
}
.split-overlay-left {
  background: linear-gradient(
    to top,
    rgba(8,6,14,0.90) 0%,
    rgba(8,6,14,0.50) 40%,
    rgba(8,6,14,0.30) 100%
  );
}
.split-overlay-right {
  background: linear-gradient(
    to top,
    rgba(8,6,14,0.90) 0%,
    rgba(8,6,14,0.50) 40%,
    rgba(8,6,14,0.30) 100%
  );
}

/* Hover: zoom photo, lighten overlay */
.split-panel:hover .split-bg { transform: scale(1.04); }
.split-panel:hover .split-overlay { opacity: 0.6; }


/* CENTER COLUMN */
.split-center {
  background: rgba(8,6,14,0.97);
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 10;
  transition: width 0.5s ease;
}
.split-center-inner { text-align: center; padding: 1rem 0.5rem; }
.split-question {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.1em; line-height: 1.15;
  color: var(--white); margin-bottom: 1.2rem;
}
.split-divider-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--orange), transparent);
  margin: 0 auto 1rem;
}

/* hover handled via JS class toggle */

/* Responsive */
@media (max-width: 700px) {
  .split-hero { grid-template-columns: 1fr; grid-template-rows: 1fr 80px 1fr; min-height: calc(100vh - 56px); }
  .split-center { border-left: none; border-right: none; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .split-bg-right { background-position: center center; }
}


/* ── SPLIT HERO REVEAL ON HOVER ── */

/* Default: 3-column split */
.split-hero {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  min-height: calc(100vh - 56px);
  transition: grid-template-columns 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When left is hovered: left expands, center+right compress */
.split-hero.hover-left {
  grid-template-columns: 1.6fr 100px 0.4fr;
}
/* When right is hovered: right expands, center+left compress */
.split-hero.hover-right {
  grid-template-columns: 0.4fr 100px 1.6fr;
}


/* Hide the photo bg on the active (hovered) panel */
.split-hero.hover-left .split-left .split-bg,
.split-hero.hover-right .split-right .split-bg {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Active panel gets a dark gradient background */
.split-hero.hover-left .split-left,
.split-hero.hover-right .split-right {
  background: linear-gradient(135deg, #0e0820 0%, #1a1040 50%, #0a0618 100%);
}


/* Center: shrink text when compressed */
.split-hero.hover-left .split-center,
.split-hero.hover-right .split-center {
  overflow: hidden;
}
.split-hero.hover-left .split-center .split-center-inner,
.split-hero.hover-right .split-center .split-center-inner {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Inactive panel: darken overlay */
.split-hero.hover-left .split-right .split-overlay,
.split-hero.hover-right .split-left .split-overlay {
  opacity: 1;
  background: rgba(8,6,14,0.75);
}


/* ══ SLIDE-OUT PANELS ══════════════════════════════════════════════════ */
.slide-out {
  position: absolute;
  top: 0; bottom: 0;
  /* covers 82% — leaves only a Shadow Edition sliver on right */
  width: 82%;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.52s cubic-bezier(0.4,0,0.2,1),
              opacity  0.38s ease;
}

/* Original Edition: slides in from LEFT, covers ~82% */
.slide-out-left {
  left: 0;
  transform: translateX(-100%);
  overflow: hidden;
  background-image: url('image_0068_43f4c9f0e08a.webp');
  background-size: cover;
  background-position: center top;
  box-shadow: 12px 0 60px rgba(0,0,0,0.8);
}

/* Shadow: anchored to LEFT edge, slides in from left (placeholder bg) */
.slide-out-right {
  right: 0;
  transform: translateX(100%);
  background: #000;
  /* Shadow edition PNG will go here — same structure mirrored */
  box-shadow: -12px 0 60px rgba(0,0,0,0.7);
}

/* Active states — triggered by JS class on .split-hero */
.split-hero.hover-left  .slide-out-left  {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.split-hero.hover-right .slide-out-right {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* Clickable overlay that fills the whole panel */
.slide-out-link {
  position: absolute;
  inset: 0;
  display: block;
}

/* Slightly dim the photo panel that's being "covered" */
.split-hero.hover-left  .split-left  .split-overlay,
.split-hero.hover-right .split-right .split-overlay {
  background: rgba(8,6,14,0.25);
}
/* Darken the opposite photo panel */
.split-hero.hover-left  .split-right .split-overlay,
.split-hero.hover-right .split-left  .split-overlay {
  background: rgba(8,6,14,0.65);
  transition: background 0.4s ease;
}
/* Fade down the center text when a panel is open */
.split-hero.hover-left  .split-center .split-center-inner,
.split-hero.hover-right .split-center .split-center-inner {
  opacity: 0.2;
  transition: opacity 0.3s ease;
}









/* ── SLIDE-OUT LEFT PANEL (clean rebuild) ── */
.slide-out-left {
  left: 0;
  transform: translateX(-100%);
  overflow: hidden;
  background-image: url('image_0068_43f4c9f0e08a.webp');
  background-size: cover;
  background-position: left top;
  box-shadow: 12px 0 60px rgba(0,0,0,0.8);
}

/* The #110a27 overlay sits ONLY over the right ~42% dark zone of the PNG
   AND only from 52% down — so the baked-in PNG text (upper half) shows through */
.so-overlay {
  position: absolute;
  left: 58%;           /* aligns with where the dark zone starts in the PNG */
  right: 0;
  top: 48%;            /* starts below the PNG title text */
  bottom: 0;
  background: #110a27;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 2.5rem 2rem 2rem;
  gap: 1rem;
}

/* Card stack */
.so-cards {
  position: relative;
  width: 160px;
  height: 185px;
  flex-shrink: 0;
}
.so-card {
  position: absolute;
  width: 118px; height: 168px;
  border-radius: 8px;
  border: 1.5px solid rgba(201,155,60,0.4);
  background: linear-gradient(160deg, #1c1430 0%, #120e20 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.85);
}
.so-c1 { bottom:0; left:0;    transform: rotate(-9deg);  z-index:1; }
.so-c2 { bottom:0; left:9px;  transform: rotate(-2deg);  z-index:2; }
.so-c3 { bottom:0; left:18px; transform: rotate(5deg);   z-index:3; }


.so-roman  { font-family:'Barlow Condensed',sans-serif; font-size:0.55rem; font-weight:700; letter-spacing:0.2em; color:rgba(201,155,60,0.6); }
.so-glyph  { font-family:'UnifrakturMaguntia',cursive; font-size:2.4rem; color:rgba(232,132,28,0.5); line-height:1; }
.so-cname  { font-family:'Barlow Condensed',sans-serif; font-size:0.48rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(242,238,232,0.5); }
.so-edition-label {
  font-family:'Barlow Condensed',sans-serif; font-size:0.65rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--orange);
}
.so-cta {
  display: inline-block;
  font-family:'Barlow Condensed',sans-serif; font-size:0.82rem; font-weight:800;
  letter-spacing:0.1em; text-transform:uppercase;
  background:var(--orange); color:#111;
  padding:0.72rem 1.4rem; border-radius:4px;
  text-decoration:none; transition:background .2s;
}
.so-cta:hover { background:var(--orange-lt); }

/* Fix photo crop: the .hero section has padding-top:56px which offsets
   absolute children. Override so slide panels sit flush to section top */
.split-hero { margin-top: -56px; padding-top: 56px; }



/* ── FINAL HERO SLIDE-OUT FIX ──────────────────────────────────────
   Keeps the absolute slide panel inside the padded hero area, scales
   the baked-in Original Edition artwork by height so the top is never
   hidden under the fixed 56px nav, and restricts #110a27 to the lower
   right dark zone only. */
.hero {
  min-height: 100vh;
  padding-top: 56px;
  overflow: hidden;
}

.split-hero {
  position: relative;
  isolation: isolate;
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: calc(100vh - 56px);
  min-height: calc(100vh - 56px);
  overflow: hidden;
}

.slide-out {
  top: 0 !important;
  bottom: auto !important;
  height: 100%;
}

.slide-out-left {
  width: 82vw;
  max-width: 82vw;
  background-size: auto 100% !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-color: #000;
}

.split-hero.hover-left .slide-out-left {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

.split-hero.hover-left .split-right .split-overlay {
  opacity: 1;
  background: rgba(8, 6, 14, 0.65) !important;
}

.so-overlay {
  --slide-dark-start: clamp(58%, calc((100vh - 56px) * 1.0312), 68%);
  position: absolute;
  left: var(--slide-dark-start) !important;
  right: 0 !important;
  top: 43% !important;
  bottom: 0 !important;
  background: #110a27 !important;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: clamp(1rem, 2.2vw, 2.75rem) clamp(1rem, 2.6vw, 3.25rem) !important;
  gap: clamp(0.7rem, 1.2vh, 1rem);
  overflow: hidden;
  z-index: 2;
}

.so-overlay > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.32s ease 0.22s, transform 0.32s ease 0.22s;
}

.split-hero.hover-left .so-overlay > * {
  opacity: 1;
  transform: none;
}

.so-cards {
  width: clamp(135px, 11vw, 170px);
  height: clamp(160px, 21vh, 190px);
  margin: 0 auto 0.15rem;
}

.so-card {
  width: clamp(95px, 8vw, 122px);
  height: clamp(138px, 19vh, 172px);
}

.so-edition-label {
  margin-top: 0.1rem;
}

.so-cta {
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

@media (max-width: 900px) {
  .slide-out-left { width: 88vw; max-width: 88vw; }
  .so-overlay {
    --slide-dark-start: 56%;
    top: 46% !important;
    padding: 1rem !important;
  }
  .so-cta { font-size: 0.72rem; padding: 0.65rem 1rem; }
}



/* ── FINAL CORRECTION: #110a27 belongs BEHIND the slide-out artwork ──
   The Hero Image PNG contains transparent areas around/under the baked-in
   title treatment. This makes #110a27 the slide panel's base background,
   then places the PNG artwork above it. The CTA/card container is only a
   positioning layer now, not a colored overlay. */
.slide-out-left {
  background-color: #110a27 !important;
  background-image: url('image_0069_1e4d032e7b69.webp') !important;
  background-size: auto 100% !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
}

.so-overlay {
  background: transparent !important;
}


/* ── FINAL ALIGNMENT TWEAK: keep cards + CTA directly beneath the baked-in title ── */
.split-hero.hover-left .slide-out-left .so-overlay {
  left: 61.5% !important;
  width: 21.5% !important;
  right: auto !important;
  top: 40.5% !important;
  bottom: 7% !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center;
  padding: clamp(0.15rem, 0.7vh, 0.5rem) 0 0 !important;
  gap: 0.6rem;
}

.split-hero.hover-left .slide-out-left .so-cards {
  width: clamp(130px, 10.5vw, 160px);
  height: clamp(160px, 20vh, 188px);
  margin: 0 auto 0.35rem;
}

.split-hero.hover-left .slide-out-left .so-edition-label {
  margin: -0.05rem 0 0.35rem;
}

.split-hero.hover-left .slide-out-left .so-cta {
  align-self: center;
}

@media (max-width: 1200px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 60.5% !important;
    width: 23.5% !important;
    top: 41.5% !important;
  }
}

@media (max-width: 900px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 56.5% !important;
    width: 29% !important;
    top: 45.5% !important;
    bottom: 6% !important;
  }
}



/* ── FINAL CENTERING: cards + CTA centered under the baked-in PNG title ──
   The slide-out artwork is 1600x900 and is rendered at auto 100% height.
   This places the interactive stack under the visual center of the baked-in
   ORIGINAL EDITION title instead of centering it inside the whole dark zone. */
.split-hero.hover-left .slide-out-left .so-overlay {
  --so-title-center-x: calc((100vh - 56px) * 1.217);
  --so-column-width: clamp(210px, 17vw, 260px);
  left: calc(var(--so-title-center-x) - (var(--so-column-width) / 2)) !important;
  width: var(--so-column-width) !important;
  right: auto !important;
  top: 40.5% !important;
  bottom: 7% !important;
  background: transparent !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: clamp(0.15rem, 0.7vh, 0.5rem) 0 0 !important;
  gap: 0.6rem !important;
}

.split-hero.hover-left .slide-out-left .so-cards,
.split-hero.hover-left .slide-out-left .so-edition-label,
.split-hero.hover-left .slide-out-left .so-cta {
  align-self: center !important;
}

.split-hero.hover-left .slide-out-left .so-cards {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    --so-title-center-x: calc((100vh - 56px) * 1.217);
    --so-column-width: clamp(180px, 26vw, 230px);
    top: 45.5% !important;
    bottom: 6% !important;
  }
}



/* ── TRUE CENTERING OVERRIDE: center the stack under the baked-in PNG title block ──
   The title block in the 1600x900 slide art centers around x≈1128px.
   Because the art is rendered at auto 100% height, its screen x-position is:
   (hero visible height / 900) * 1128 = visible height * 1.253.
*/
.split-hero.hover-left .slide-out-left .so-overlay {
  --so-title-center-x: calc((100vh - 56px) * 1.253) !important;
  --so-column-width: clamp(220px, 18vw, 280px) !important;
  left: calc(var(--so-title-center-x) - (var(--so-column-width) / 2)) !important;
  width: var(--so-column-width) !important;
  right: auto !important;
  align-items: center !important;
  text-align: center !important;
}

.split-hero.hover-left .slide-out-left .so-cards,
.split-hero.hover-left .slide-out-left .so-edition-label,
.split-hero.hover-left .slide-out-left .so-cta {
  align-self: center !important;
}

.split-hero.hover-left .slide-out-left .so-cards {
  /* The fanned cards are visually heavier on the right because each card is offset.
     This small nudge centers the visible fan under the title, not just the wrapper box. */
  transform: translateX(-8px) !important;
}

@media (max-width: 1200px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    --so-title-center-x: calc((100vh - 56px) * 1.253) !important;
    --so-column-width: clamp(210px, 20vw, 270px) !important;
  }
}

@media (max-width: 900px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    --so-title-center-x: calc((100vh - 56px) * 1.253) !important;
    --so-column-width: clamp(185px, 28vw, 240px) !important;
  }
}



/* ── CARD SIZE OVERRIDE: slightly larger animated card fan, re-centered under the PNG title ── */
.split-hero.hover-left .slide-out-left .so-overlay {
  --so-column-width: clamp(248px, 20.8vw, 320px) !important;
  left: calc(var(--so-title-center-x) - (var(--so-column-width) / 2)) !important;
  gap: 0.56rem !important;
}

.split-hero.hover-left .slide-out-left .so-cards {
  width: clamp(188px, 15.2vw, 240px) !important;
  height: clamp(214px, 27vh, 266px) !important;
  margin: -0.08rem auto 0.24rem !important;
  transform: translateX(-4px) !important;
}

.split-hero.hover-left .slide-out-left .so-card {
  width: clamp(138px, 11vw, 176px) !important;
  height: clamp(196px, 25vh, 246px) !important;
  border-radius: 10px;
}

.split-hero.hover-left .slide-out-left .so-c1 { left: 0 !important; }
.split-hero.hover-left .slide-out-left .so-c2 { left: 16px !important; }
.split-hero.hover-left .slide-out-left .so-c3 { left: 32px !important; }

@media (max-width: 1200px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    --so-column-width: clamp(238px, 22.5vw, 308px) !important;
  }
  .split-hero.hover-left .slide-out-left .so-cards {
    width: clamp(178px, 16.8vw, 228px) !important;
    height: clamp(202px, 26vh, 252px) !important;
    transform: translateX(-3px) !important;
  }
  .split-hero.hover-left .slide-out-left .so-card {
    width: clamp(130px, 12.5vw, 164px) !important;
    height: clamp(186px, 24vh, 232px) !important;
  }
}

@media (max-width: 900px) {
  .split-hero.hover-left .slide-out-left .so-overlay {
    --so-column-width: clamp(212px, 33vw, 278px) !important;
  }
  .split-hero.hover-left .slide-out-left .so-cards {
    width: clamp(158px, 25.5vw, 208px) !important;
    height: clamp(182px, 29vh, 232px) !important;
    transform: translateX(-2px) !important;
  }
  .split-hero.hover-left .slide-out-left .so-card {
    width: clamp(116px, 19vw, 150px) !important;
    height: clamp(166px, 27vh, 212px) !important;
  }
}


/* ── SLIDE-OUT WIDTH FIX: trim further so the slide ends closer to the PNG title text ──
   The slide-out no longer stretches as far across the screen on desktop,
   so the dark zone ends closer to the card/CTA stack while the Shadow
   Edition panel remains visible behind it. */
@media (min-width: 901px) {
  .split-hero.hover-left .slide-out-left,
  .slide-out-left {
    width: 66vw !important;
    max-width: 66vw !important;
  }
}

@media (min-width: 1200px) {
  .split-hero.hover-left .slide-out-left,
  .slide-out-left {
    width: 68vw !important;
    max-width: 68vw !important;
  }
}

@media (min-width: 1600px) {
  .split-hero.hover-left .slide-out-left,
  .slide-out-left {
    width: 67vw !important;
    max-width: 67vw !important;
  }
}


/* ── REPAIR: keep the PNG from being clipped, remove the odd blue strip, and enlarge chooser ──
   This restores enough slide width for the baked-in title/cards/CTA to show,
   then pins the chooser column immediately after the slide edge. */
@media (min-width: 901px) {
  .split-hero.hover-left {
    grid-template-columns: 66.5vw 155px 1fr !important;
  }

  .split-hero.hover-left .slide-out-left,
  .slide-out-left {
    width: 66.5vw !important;
    max-width: 66.5vw !important;
    box-shadow: 10px 0 32px rgba(0,0,0,0.72) !important;
  }

  .split-hero.hover-left .split-center {
    background: #05040a !important;
    overflow: hidden !important;
  }

  .split-hero.hover-left .split-center .split-center-inner {
    opacity: 1 !important;
    padding: 0.95rem 0.65rem !important;
  }

  .split-hero.hover-left .split-center .split-question {
    font-size: clamp(1.12rem, 1.45vw, 1.42rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 0.9rem !important;
  }

  .split-hero.hover-left .split-center .split-divider-line {
    height: 72px !important;
    margin: 0 auto 0.85rem !important;
  }

  .split-hero.hover-left .split-center .split-center-sub {
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
    color: rgba(242,238,232,0.42) !important;
  }
}

@media (min-width: 1200px) {
  .split-hero.hover-left {
    grid-template-columns: 66vw 165px 1fr !important;
  }

  .split-hero.hover-left .slide-out-left,
  .slide-out-left {
    width: 66vw !important;
    max-width: 66vw !important;
  }
}

@media (min-width: 1600px) {
  .split-hero.hover-left {
    grid-template-columns: 65.5vw 175px 1fr !important;
  }

  .split-hero.hover-left .slide-out-left,
  .slide-out-left {
    width: 65.5vw !important;
    max-width: 65.5vw !important;
  }
}



/* ── FINAL POLISH: restore chooser text to original sizing and nudge card fan right ── */
@media (min-width: 901px) {
  .split-hero.hover-left .split-center .split-center-inner {
    padding: 1rem 0.5rem !important;
  }

  .split-hero.hover-left .split-center .split-question {
    font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1.2rem !important;
  }

  .split-hero.hover-left .split-center .split-divider-line {
    height: 60px !important;
    margin: 0 auto 1rem !important;
  }

  .split-hero.hover-left .split-center .split-center-sub {
    font-size: 0.6rem !important;
    line-height: 1.6 !important;
  }

  .split-hero.hover-left .slide-out-left .so-cards {
    transform: translateX(6px) !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .split-hero.hover-left .slide-out-left .so-cards {
    transform: translateX(5px) !important;
  }
}

@media (max-width: 900px) {
  .split-hero.hover-left .slide-out-left .so-cards {
    transform: translateX(3px) !important;
  }
}



/* ── SMOOTH ANIMATION POLISH: make the chooser column transition smoothly again ── */
@media (min-width: 901px) {
  .split-center {
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.42s ease !important;
  }

  .split-center-inner,
  .split-question,
  .split-divider-line,
  .split-center-sub {
    will-change: opacity, transform;
  }

  .split-center-inner {
    transition: opacity 0.42s ease,
                transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: translateX(0);
  }

  .split-question {
    transition: opacity 0.42s ease,
                transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                font-size 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                line-height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                margin-bottom 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .split-divider-line {
    transition: opacity 0.42s ease,
                transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                margin 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .split-center-sub {
    transition: opacity 0.42s ease,
                transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                font-size 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                line-height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.35s ease !important;
  }

  .split-hero.hover-left .split-center .split-center-inner {
    opacity: 0.96 !important;
    transform: translateX(0) !important;
  }

  .split-hero.hover-left .split-center .split-question,
  .split-hero.hover-left .split-center .split-divider-line,
  .split-hero.hover-left .split-center .split-center-sub {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}


/* ── LOGO DISPLAY FIX: prevent the embedded raster logo from being inverted into a white block ── */
.nav-brand img,
.footer-logo img {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* ── SHADOW EDITION SLIDE-OUT PNG ──
   Uses the uploaded Shadow Edition PNG as the right-side hover slide-out.
   background-size: 100% 100% keeps the full baked-in graphic visible instead
   of cropping the title area or card photo. */
.slide-out-right {
  background-color: #000 !important;
  background-image: url('image_0070_434e86677bf8.webp') !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 82vw !important;
  max-width: 82vw !important;
  box-shadow: -12px 0 60px rgba(0,0,0,0.78) !important;
}

@media (max-width: 900px) {
  .slide-out-right {
    width: 88vw !important;
    max-width: 88vw !important;
  }
}



/* ── SHADOW SLIDE-OUT: trimmed width + floating cards + CTA ───────────────── */
.split-hero.hover-right {
  grid-template-columns: 0.18fr 155px 1fr !important;
}

.slide-out-link {
  z-index: 1;
}

.slide-out-right {
  width: 66.5vw !important;
  max-width: 66.5vw !important;
  overflow: hidden !important;
}

.split-hero.hover-right .slide-out-right {
  opacity: 1 !important;
}

.shadow-overlay {
  position: absolute;
  z-index: 2;
  left: clamp(34px, 6vw, 110px);
  width: clamp(248px, 21vw, 320px);
  top: 42.5%;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.56rem;
  background: transparent;
  pointer-events: none;
}

.shadow-cards {
  position: relative;
  width: clamp(188px, 15.2vw, 240px);
  height: clamp(214px, 27vh, 266px);
  margin: -0.08rem auto 0.24rem;
  transform: translateX(-4px);
}

.shadow-card {
  position: absolute;
  bottom: 0;
  width: clamp(138px, 11vw, 176px);
  height: clamp(196px, 25vh, 246px);
  border-radius: 10px;
  border: 1.5px solid rgba(220,220,220,0.28);
  background: linear-gradient(160deg, rgba(18,18,24,0.98) 0%, rgba(8,8,12,0.98) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.82);
}

.shadow-c1 { left: 0;   transform: rotate(-9deg); z-index: 1; }
.shadow-c2 { left: 16px; transform: rotate(-2deg); z-index: 2; }
.shadow-c3 { left: 32px; transform: rotate(5deg);  z-index: 3; }


.shadow-roman {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(201,155,60,0.72);
}

.shadow-glyph {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(244,244,244,0.7);
}

.shadow-cname {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,238,232,0.68);
}

.shadow-edition-label {
  align-self: center;
  margin: -0.05rem 0 0.35rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.shadow-cta {
  align-self: center;
  pointer-events: auto;
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--orange);
  color: #111;
  padding: 0.72rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease;
}

.shadow-cta:hover {
  background: var(--orange-lt);
}

@media (max-width: 1200px) {
  .slide-out-right {
    width: 69vw !important;
    max-width: 69vw !important;
  }
  .split-hero.hover-right {
    grid-template-columns: 0.16fr 138px 1fr !important;
  }
  .shadow-overlay {
    width: clamp(238px, 22.5vw, 308px);
    left: clamp(28px, 5vw, 88px);
  }
  .shadow-cards {
    width: clamp(178px, 16.8vw, 228px);
    height: clamp(202px, 26vh, 252px);
    transform: translateX(-3px);
  }
  .shadow-card {
    width: clamp(130px, 12.5vw, 164px);
    height: clamp(186px, 24vh, 232px);
  }
}

@media (max-width: 900px) {
  .slide-out-right {
    width: 86vw !important;
    max-width: 86vw !important;
  }
  .split-hero.hover-right {
    grid-template-columns: 0.08fr 102px 1fr !important;
  }
  .shadow-overlay {
    left: clamp(18px, 4vw, 40px);
    width: clamp(212px, 33vw, 278px);
    top: 45.5%;
    bottom: 6%;
  }
  .shadow-cards {
    width: clamp(158px, 25.5vw, 208px);
    height: clamp(182px, 29vh, 232px);
    transform: translateX(-2px);
  }
}


/* ── SHADOW SLIDE-OUT ASPECT RATIO FIX ─────────────────────────────
   Do not stretch the Shadow slide-out artwork. Render it by height so
   the uploaded 16:9 PNG keeps its natural proportions, then trim via the
   panel width instead of squashing the image. */
.slide-out-right {
  background-size: auto 100% !important;
  background-position: right top !important;
  background-repeat: no-repeat !important;
}



/* ── BOTH SLIDE-OUTS FINAL REPAIR: no stretched photos, enough width to avoid clipping ──
   Keep both 1600x900 PNGs at their natural aspect ratio. The slide panels trim
   the artwork by container width only; the artwork itself is never squeezed. */
@media (min-width: 901px) {
  .split-hero {
    --fixed-slide-width: 74vw;
    --fixed-chooser-width: 155px;
  }

  .split-hero.hover-left {
    grid-template-columns: var(--fixed-slide-width) var(--fixed-chooser-width) minmax(0, 1fr) !important;
  }

  .split-hero.hover-right {
    grid-template-columns: minmax(0, 1fr) var(--fixed-chooser-width) var(--fixed-slide-width) !important;
  }

  .slide-out-left,
  .split-hero.hover-left .slide-out-left {
    left: 0 !important;
    right: auto !important;
    width: var(--fixed-slide-width) !important;
    max-width: var(--fixed-slide-width) !important;
    height: 100% !important;
    background-size: auto 100% !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    transform: translateX(-100%);
    overflow: hidden !important;
    box-shadow: 10px 0 32px rgba(0,0,0,0.72) !important;
  }

  .slide-out-right,
  .split-hero.hover-right .slide-out-right {
    right: 0 !important;
    left: auto !important;
    width: var(--fixed-slide-width) !important;
    max-width: var(--fixed-slide-width) !important;
    height: 100% !important;
    background-size: auto 100% !important;
    background-position: right top !important;
    background-repeat: no-repeat !important;
    transform: translateX(100%);
    overflow: hidden !important;
    box-shadow: -10px 0 32px rgba(0,0,0,0.72) !important;
  }

  .split-hero.hover-left .slide-out-left {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  .split-hero.hover-right .slide-out-right {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  .split-hero.hover-left .split-center,
  .split-hero.hover-right .split-center {
    background: rgba(8,6,14,0.97) !important;
    overflow: hidden !important;
  }

  .split-hero.hover-left .split-center .split-center-inner,
  .split-hero.hover-right .split-center .split-center-inner {
    padding: 1rem 0.5rem !important;
  }

  .split-hero.hover-left .split-center .split-question,
  .split-hero.hover-right .split-center .split-question {
    font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1.2rem !important;
  }

  .split-hero.hover-left .split-center .split-divider-line,
  .split-hero.hover-right .split-center .split-divider-line {
    height: 60px !important;
    margin: 0 auto 1rem !important;
  }

  .split-hero.hover-left .split-center .split-center-sub,
  .split-hero.hover-right .split-center .split-center-sub {
    font-size: 0.6rem !important;
    line-height: 1.6 !important;
    color: var(--dim) !important;
  }

  .split-hero.hover-left .split-right .split-overlay,
  .split-hero.hover-right .split-left .split-overlay {
    opacity: 1 !important;
    background: rgba(8,6,14,0.65) !important;
  }
}

@media (min-width: 1200px) {
  .split-hero {
    --fixed-slide-width: 73.5vw;
    --fixed-chooser-width: 165px;
  }
}

@media (min-width: 1600px) {
  .split-hero {
    --fixed-slide-width: 73vw;
    --fixed-chooser-width: 175px;
  }
}

/* Keep the Original Edition card/CTA stack tied to the title block after the width repair. */
.split-hero.hover-left .slide-out-left .so-overlay {
  --so-title-center-x: calc((100vh - 56px) * 1.253) !important;
  --so-column-width: clamp(248px, 20.8vw, 320px) !important;
  left: calc(var(--so-title-center-x) - (var(--so-column-width) / 2)) !important;
  right: auto !important;
  width: var(--so-column-width) !important;
  top: 40.5% !important;
  bottom: 7% !important;
  background: transparent !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: clamp(0.15rem, 0.7vh, 0.5rem) 0 0 !important;
  gap: 0.56rem !important;
}

.split-hero.hover-left .slide-out-left .so-cards {
  transform: translateX(6px) !important;
}

/* Keep the Shadow Edition card/CTA stack under the Shadow title block. */
.split-hero.hover-right .slide-out-right .shadow-overlay {
  left: clamp(30px, 5.5vw, 92px) !important;
  width: clamp(248px, 20.8vw, 320px) !important;
  top: 42.5% !important;
  bottom: 7% !important;
  background: transparent !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: clamp(0.15rem, 0.7vh, 0.5rem) 0 0 !important;
  gap: 0.56rem !important;
}

.split-hero.hover-right .slide-out-right .shadow-cards {
  transform: translateX(4px) !important;
}

@media (max-width: 900px) {
  .slide-out-left,
  .slide-out-right {
    width: 86vw !important;
    max-width: 86vw !important;
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
  }

  .slide-out-left { background-position: left top !important; }
  .slide-out-right { background-position: right top !important; }
}



/* ── Shadow stack centering tweak: center the card fan under the baked-in Shadow title ── */
.split-hero.hover-right .slide-out-right .shadow-overlay {
  left: clamp(58px, 7.3vw, 126px) !important;
  width: clamp(248px, 20.8vw, 320px) !important;
}

.split-hero.hover-right .slide-out-right .shadow-cards {
  transform: translateX(10px) !important;
}

@media (max-width: 1200px) {
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: clamp(44px, 6vw, 98px) !important;
  }
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: translateX(8px) !important;
  }
}

@media (max-width: 900px) {
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: clamp(24px, 4.8vw, 54px) !important;
  }
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: translateX(4px) !important;
  }
}



/* ── Shadow true-centering override: shift the stack right so it sits under the baked-in Shadow title ── */
.split-hero.hover-right .slide-out-right .shadow-overlay {
  left: clamp(88px, 9vw, 152px) !important;
  width: clamp(248px, 20.8vw, 320px) !important;
}

.split-hero.hover-right .slide-out-right .shadow-cards {
  transform: translateX(14px) !important;
}

@media (max-width: 1200px) {
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: clamp(64px, 7.5vw, 118px) !important;
  }
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: translateX(10px) !important;
  }
}

@media (max-width: 900px) {
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: clamp(28px, 5.5vw, 62px) !important;
  }
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: translateX(5px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT (≤700px) — matches design reference screenshot
   Hero stacks vertically:
     Original PNG (always visible, full-width)
     Chooser band (horizontal: question | tagline)
     Shadow PNG (always visible, full-width)
   CTAs overlay on the dark-zone corner of each PNG.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── NAV: hide links, keep logo + Ultimate CTA only ── */
  .nav-links { display: none !important; }
  nav {
    padding: 0 1rem !important;
    height: 56px !important;
  }
  .nav-cta {
    font-size: 0.7rem !important;
    padding: 0.55rem 1rem !important;
    letter-spacing: 0.1em !important;
  }
  .nav-brand { font-size: 1.15rem !important; }
  .nav-brand img { max-height: 36px !important; }

  /* ── HERO container: collapse to natural height ── */
  .hero {
    min-height: 0 !important;
    padding-top: 56px !important;
    margin: 0 !important;
    display: block !important;
  }

  /* ── SPLIT-HERO: vertical flex stack (slide-left / center / slide-right) ── */
  .split-hero {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
  }

  /* Hide the underlying photo-only panels — the slide-out PNGs already
     contain the photo + title typography baked in */
  .split-left,
  .split-right {
    display: none !important;
  }

  /* ── SLIDE-OUT PANELS: always visible, full-width, 16:9 ── */
  .slide-out,
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right,
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: all !important;
    overflow: hidden !important;
    box-shadow: none !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  .slide-out-left  { order: 1 !important; }
  .slide-out-right { order: 3 !important; }

  /* Hide floating card placeholders + small edition labels — the
     PNG art already includes the card-stack imagery and big title */
  .so-cards,
  .shadow-cards,
  .so-edition-label,
  .shadow-edition-label {
    display: none !important;
  }

  /* ── CTA OVERLAY POSITIONS ── */
  /* Original Edition: dark zone is on the RIGHT of the PNG */
  .so-overlay {
    position: absolute !important;
    inset: auto !important;
    left: auto !important;
    right: 4% !important;
    top: auto !important;
    bottom: 7% !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: all !important;
    z-index: 5 !important;
    display: block !important;
    /* nuke desktop CSS-var-driven positioning */
    --so-title-center-x: unset !important;
    --so-column-width: unset !important;
    --slide-dark-start: unset !important;
  }
  /* Shadow Edition: dark zone is on the LEFT of the PNG */
  .shadow-overlay {
    position: absolute !important;
    inset: auto !important;
    left: 4% !important;
    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: all !important;
    z-index: 5 !important;
    display: block !important;
  }

  /* CTA button styling — orange pill, compact for mobile */
  .so-cta,
  .shadow-cta {
    display: inline-block !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    background: var(--orange) !important;
    color: #111 !important;
    padding: 0.55rem 0.9rem !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6) !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: all !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* ── CHOOSER BAND (between the two editions) ── */
  .split-center {
    position: relative !important;
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
    background: #0a0710 !important;
    padding: 1.15rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .split-center-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
  .split-center .split-divider-line {
    display: none !important;
  }
  .split-center .split-question {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    flex: 0 1 auto !important;
    opacity: 1 !important;
  }
  .split-center .split-center-sub {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    flex: 0 1 auto !important;
    opacity: 1 !important;
  }
  /* Override hover-driven fade on chooser text */
  .split-hero.hover-left  .split-center,
  .split-hero.hover-right .split-center {
    background: #0a0710 !important;
  }
  .split-hero.hover-left  .split-center .split-center-inner,
  .split-hero.hover-right .split-center .split-center-inner,
  .split-hero.hover-left  .split-center .split-question,
  .split-hero.hover-right .split-center .split-question,
  .split-hero.hover-left  .split-center .split-center-sub,
  .split-hero.hover-right .split-center .split-center-sub {
    opacity: 1 !important;
  }
}

/* Tighten down further on very narrow phones */
@media (max-width: 380px) {
  .split-center .split-question  { font-size: 0.82rem !important; }
  .split-center .split-center-sub { font-size: 0.68rem !important; }
  .so-cta, .shadow-cta {
    font-size: 0.56rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  .nav-cta {
    font-size: 0.62rem !important;
    padding: 0.5rem 0.8rem !important;
  }
}


/* ===== Ultimate Edition photo update v125 ===== */
.ultimate-section .ult-left {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}
.ultimate-section .ult-left::before {
  display: none !important;
  background: none !important;
}
.ultimate-section .ult-left .ult-bg-glyph,
.ultimate-section .ult-left .ult-text {
  display: none !important;
}
.ultimate-section .ult-photo-full {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 1000px) {
  .ultimate-section .ult-left {
    min-height: 0 !important;
  }
}


<style id="ggg-no-warp-object-fit-hero-fix">
/* ──────────────────────────────────────────────────────────────
   NO-WARP HOMEPAGE HERO FIX
   Uses real <img> layers with object-fit instead of stretching PNGs
   as flexible CSS backgrounds. This preserves the artwork ratio.
   ────────────────────────────────────────────────────────────── */

.hero,
.split-hero,
.split-left,
.split-right,
.slide-out-left,
.slide-out-right {
  background-color: #000 !important;
}

/* Hide the old background layers that were being stretched. */
.split-bg,
.split-bg-left,
.split-bg-right {
  display: none !important;
  background-image: none !important;
}

/* The new Not Chosen and slide-out artwork layers. */
.ggg-not-chosen-img,
.ggg-slide-art-img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.ggg-not-chosen-img { z-index: 0 !important; }
.ggg-slide-art-img { z-index: 1 !important; }

.split-left .ggg-not-chosen-img,
.slide-out-left .ggg-slide-art-img {
  object-position: left center !important;
}

.split-right .ggg-not-chosen-img,
.slide-out-right .ggg-slide-art-img {
  object-position: right center !important;
}

/* Remove the old dimming overlays that sat over the stretched backgrounds. */
.split-overlay,
.split-overlay-left,
.split-overlay-right,
.split-hero.hover-left .split-left .split-overlay,
.split-hero.hover-left .split-right .split-overlay,
.split-hero.hover-right .split-left .split-overlay,
.split-hero.hover-right .split-right .split-overlay {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Use the uploaded slide-out images as the finished artwork. */
.slide-out-left,
.slide-out-right,
.split-hero .slide-out-left,
.split-hero .slide-out-right {
  background-image: none !important;
  background-size: auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.so-overlay,
.shadow-overlay {
  display: none !important;
}

.slide-out-link {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 8 !important;
}

@media (min-width: 701px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #000 !important;
  }

  .hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding-top: 56px !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .split-hero {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 11.25vw, 190px) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100vh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .split-hero.hover-left,
  .split-hero.hover-right {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 11.25vw, 190px) minmax(0, 1fr) !important;
  }

  .split-left,
  .split-right {
    display: block !important;
    position: relative !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 1 !important;
  }

  .split-left  { grid-column: 1 !important; }
  .split-right { grid-column: 3 !important; }

  .split-center {
    grid-column: 2 !important;
    position: relative !important;
    z-index: 12 !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .slide-out,
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: min(82vw, calc((100vh - 56px) * 1.4505)) !important;
    max-width: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 40 !important;
    transition: transform 0.52s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease !important;
  }

  .slide-out-left,
  .split-hero .slide-out-left {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }

  .slide-out-right,
  .split-hero .slide-out-right {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }

  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  .split-hero.hover-left .slide-out-right,
  .split-hero.hover-right .slide-out-left {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 700px) {
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right {
    background-image: none !important;
  }

  .ggg-not-chosen-img,
  .ggg-slide-art-img {
    object-fit: cover !important;
  }
}


/* ===== extracted style block 2 ===== */
/* ──────────────────────────────────────────────────────────────
   SLIDE-OUT NO-CROP FIX
   The slide-out JPGs are finished artwork, so they should be
   contained inside their panels instead of cropped by object-fit: cover.
   This preserves the full top and bottom of each slide-out image.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 701px) {
  .slide-out,
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right {
    background-color: #000 !important;
    overflow: hidden !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .slide-out-left .ggg-slide-art-img {
    object-position: left center !important;
  }

  .slide-out-right .ggg-slide-art-img {
    object-position: right center !important;
  }
}

@media (max-width: 700px) {
  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img {
    object-fit: contain !important;
    object-position: center center !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}


/* ===== extracted style block 3 ===== */
@media (max-width: 700px) {
  /* Let the slide-out JPGs define their natural height on mobile so they
     fill the full width without side gutters. */
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right,
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: unset !important;
    object-position: center top !important;
  }

  .slide-out-left .ggg-slide-art-img {
    object-position: left top !important;
  }

  .slide-out-right .ggg-slide-art-img {
    object-position: right top !important;
  }
}


/* ===== extracted style block 4 ===== */
@media (min-width: 901px) {
  #splitHero .ggg-not-chosen-img {
    filter: brightness(0.76) saturate(0.90) contrast(1.03) !important;
  }
}


/* ===== extracted style block 5 ===== */
#ult-right-panel { position: relative !important; overflow: hidden !important; }
.ult-grid-label { font-family: 'Barlow Condensed', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 .55rem; }
.ult-item-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: .9rem; }
.ult-item-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .12s; display: flex; flex-direction: column; will-change: transform; }
.ult-item-card:hover { border-color: var(--border-o); transform: translateY(-2px); }
@keyframes ultCardLift { 0% { transform: scale(1) rotateY(0) translateY(0); } 30% { transform: scale(1.1) rotateY(25deg) translateY(-5px); } 65% { transform: scale(1.05) rotateY(110deg) translateY(-2px); } 100% { transform: scale(.9) rotateY(180deg) translateY(0); opacity: 0; } }
.ult-item-card.flipping { animation: ultCardLift .38s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
.ult-item-thumb { width: 100%; aspect-ratio: 1/1; background: var(--surface); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); font-size: 1.35rem; overflow: hidden; }
.ult-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ult-item-info { padding: 5px 6px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ult-item-name { font-family: 'Barlow Condensed', sans-serif; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--white); line-height: 1.3; }
.ult-item-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 3px; }
.ult-item-val { font-size: .6rem; color: var(--dim); text-decoration: line-through; }
.ult-item-incl { font-family: 'Barlow Condensed', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.ult-detail-panel { position: absolute; inset: 0; background: var(--bg-card); z-index: 10; display: flex; flex-direction: column; transform: translateY(103%); transition: transform .42s cubic-bezier(.22,1,.36,1); overflow: hidden; }
.ult-detail-panel.open { transform: translateY(0); }
.ult-detail-top { padding: .9rem 1.1rem 0; display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.ult-back-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--border); border-radius: 50px; padding: .35rem .8rem; color: var(--muted); cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: border-color .15s, color .15s; }
.ult-back-btn:hover { border-color: var(--border-o); color: var(--orange); }
.ult-detail-header-name { font-family: 'Barlow Condensed', sans-serif; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--white); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ult-carousel-outer { position: relative; flex-shrink: 0; margin: .6rem 1.1rem 0; border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--border); user-select: none; }
.ult-carousel-track { display: flex; transition: transform .32s cubic-bezier(.25,.46,.45,.94); }
.ult-carousel-slide { min-width: 100%; aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.ult-c-arr { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(14,14,18,.78); border: 1px solid var(--border); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; color: var(--muted); font-size: 16px; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.ult-c-arr:hover { background: rgba(232,132,28,.2); color: var(--white); border-color: var(--border-o); }
.ult-c-arr-l { left: 7px; } .ult-c-arr-r { right: 7px; }
.ult-c-dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.ult-c-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.2); cursor: pointer; transition: background .2s; }
.ult-c-dot.active { background: var(--orange); }
.ult-detail-body { padding: .65rem 1.1rem .4rem; flex: 1; overflow: hidden; }
.ult-d-cat { font-family: 'Barlow Condensed', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: .2rem; }
.ult-d-name { font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--white); margin-bottom: .4rem; line-height: 1.2; }
.ult-d-desc { font-size: .8rem; font-style: italic; color: var(--muted); line-height: 1.55; margin-bottom: .55rem; }
.ult-d-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: .5rem; }


/* ===== extracted style block 6 ===== */
.ult-mini-grid-wrap {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ult-mini-grid-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 0.45rem;
}
.ult-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.ult-mini-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.25rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 0.2rem;
  cursor: pointer; text-align: center;
  transition: border-color .15s;
}
.ult-mini-cell:hover { border-color: var(--border-o); }
.ult-mini-cell.active {
  border-color: var(--orange);
  background: rgba(232,132,28,0.06);
}
.ult-mini-thumb {
  width: 100%; aspect-ratio: 1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.ult-mini-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.46rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); line-height: 1.2;
}


/* ===== extracted style block 7 ===== */
/* ── Detail body: flex column + scrollable ── */
.ult-detail-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0.4rem !important;
}
.ult-d-cat,
.ult-d-name,
.ult-d-desc,
.ult-d-footer { flex-shrink: 0 !important; }

/* ── Mini grid wrap: grow to fill remaining space ── */
.ult-mini-grid-wrap {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: 0.4rem !important;
  padding-top: 0.4rem !important;
  border-top: 1px solid var(--border) !important;
  overflow: visible !important;
}
.ult-mini-grid-label {
  flex-shrink: 0 !important;
  margin-bottom: 0.4rem !important;
}

/* ── Grid: 3 equal rows, fill wrap ── */
.ult-mini-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  gap: 0.3rem !important;
  align-content: stretch !important;
}

/* ── Cell: centered, fills its grid area ── */
.ult-mini-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.18rem !important;
  padding: 0.25rem 0.2rem !important;
  overflow: hidden !important;
}

/* ── Thumb: truly square using both width+height ── */
.ult-mini-thumb {
  width:  clamp(28px, 4.5vw, 52px) !important;
  height: clamp(28px, 4.5vw, 52px) !important;
  min-width:  clamp(28px, 4.5vw, 52px) !important;
  min-height: clamp(28px, 4.5vw, 52px) !important;
  max-width:  clamp(28px, 4.5vw, 52px) !important;
  max-height: clamp(28px, 4.5vw, 52px) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(0.7rem, 1.4vw, 1.1rem) !important;
  flex-shrink: 0 !important;
}

/* ── Name label ── */
.ult-mini-name {
  flex-shrink: 0 !important;
  font-size: clamp(0.38rem, 0.6vw, 0.46rem) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  width: 100% !important;
}

/* ── Desktop: slightly larger thumbs ── */
@media (min-width: 1001px) {
  .ult-mini-thumb {
    width:  clamp(36px, 3vw, 56px) !important;
    height: clamp(36px, 3vw, 56px) !important;
    min-width:  clamp(36px, 3vw, 56px) !important;
    min-height: clamp(36px, 3vw, 56px) !important;
    max-width:  clamp(36px, 3vw, 56px) !important;
    max-height: clamp(36px, 3vw, 56px) !important;
    font-size: clamp(0.9rem, 1.6vw, 1.3rem) !important;
  }
  .ult-mini-name {
    font-size: clamp(0.42rem, 0.45vw, 0.52rem) !important;
  }
}


/* ===== extracted style block 8 ===== */
@media (min-width: 1001px) {
  /* Stack price row over rating+bestseller, both left-aligned */
  .ultimate-section .ult-meta-left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
  }
  /* Override the right-justify rule that targets stars-line globally */
  .ultimate-section .ult-meta-left .stars-line {
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    gap: 0.6rem !important;
  }
}


/* ===== extracted style block 9 ===== */
@media (min-width: 1001px) {
  /* Disable flex-grow so aspect-ratio actually controls height. */
  .ultimate-section .ult-item-thumb {
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
  }
  /* Square thumb + info text is taller than the old 1fr row, so let
     rows size to content. The right panel's max-height (set via JS)
     and overflow:hidden remain the safety net. */
  .ultimate-section .ult-item-grid {
    grid-template-rows: repeat(3, auto) !important;
    align-content: start !important;
    gap: 5px !important;
  }
}


/* ===== extracted style block 10 ===== */
/* Featured split hero constellation background */
#splitHero.split-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #050508 !important;
  isolation: isolate !important;
}

#splitHero.split-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.88;
  background-image:
    radial-gradient(1px 1px at 37px 28px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1px 1px at 118px 79px, rgba(255,255,255,0.60), transparent),
    radial-gradient(1.6px 1.6px at 182px 41px, rgba(255,255,255,0.96), transparent),
    radial-gradient(1px 1px at 243px 136px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 319px 64px, rgba(255,255,255,0.74), transparent),
    radial-gradient(1.4px 1.4px at 406px 112px, rgba(255,255,255,0.86), transparent),
    radial-gradient(1px 1px at 472px 32px, rgba(255,255,255,0.54), transparent),
    radial-gradient(1px 1px at 551px 92px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 624px 55px, rgba(255,255,255,0.62), transparent),
    radial-gradient(1.5px 1.5px at 72px 211px, rgba(255,255,255,0.90), transparent),
    radial-gradient(1px 1px at 148px 176px, rgba(255,255,255,0.62), transparent),
    radial-gradient(1.4px 1.4px at 286px 226px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 381px 188px, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 457px 239px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 578px 201px, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 646px 247px, rgba(255,255,255,0.52), transparent),
    radial-gradient(1px 1px at 84px 121px, rgba(255,255,255,0.56), transparent),
    radial-gradient(1.3px 1.3px at 227px 94px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1px 1px at 341px 24px, rgba(255,255,255,0.62), transparent),
    radial-gradient(1px 1px at 518px 162px, rgba(255,255,255,0.58), transparent);
  background-size: 613px 287px;
  background-repeat: repeat;
}

#splitHero.split-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.58;
  background-image:
    radial-gradient(1px 1px at 29px 19px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.8px 1.8px at 143px 63px, rgba(255,255,255,0.86), transparent),
    radial-gradient(1px 1px at 267px 31px, rgba(255,255,255,0.54), transparent),
    radial-gradient(1px 1px at 358px 127px, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.4px 1.4px at 449px 94px, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px at 574px 152px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1.7px 1.7px at 701px 44px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 811px 117px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 95px 241px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1.5px 1.5px at 213px 307px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1px 1px at 386px 266px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.4px 1.4px at 528px 231px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 672px 298px, rgba(255,255,255,0.52), transparent),
    radial-gradient(1px 1px at 844px 219px, rgba(255,255,255,0.50), transparent);
  background-size: 947px 421px;
  background-position: 137px 83px;
  background-repeat: repeat;
}

/* Make sure content sits above the star layer without overriding
   the mobile slide-out image positioning rules. */
#splitHero > .split-panel {
  position: relative !important;
  z-index: 2 !important;
}

#splitHero .ggg-not-chosen-img,
#splitHero .ggg-slide-art-img {
  z-index: 2 !important;
}

#splitHero > .split-center {
  position: relative !important;
  z-index: 12 !important;
}

#splitHero .split-center-inner,
#splitHero .split-question,
#splitHero .split-band-side,
#splitHero .split-divider-line {
  position: relative !important;
  z-index: 2 !important;
}

#splitHero > .slide-out {
  z-index: 40 !important;
}

/* Mobile fix: keep the slide-out artwork in normal document flow so
   the Original and Shadow panels retain their natural height. */
@media (max-width: 700px) {
  #splitHero.split-hero {
    overflow: hidden !important;
  }

  #splitHero .slide-out-left .ggg-slide-art-img,
  #splitHero .slide-out-right .ggg-slide-art-img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: unset !important;
    object-position: center top !important;
    z-index: 2 !important;
  }

  #splitHero .slide-out-left .ggg-slide-art-img {
    object-position: left top !important;
  }

  #splitHero .slide-out-right .ggg-slide-art-img {
    object-position: right top !important;
  }
}


/* ===== extracted style block 11 ===== */
/* Restore the proximity edge glow above the featured starfield/deck art.
   The original glow still existed, but the newer starfield layer raised the deck PNGs,
   so this lifts only the glow pseudo-elements back above them. */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  #splitHero.ggg-atmosphere-ready .split-left::before,
  #splitHero.ggg-atmosphere-ready .split-right::before {
    z-index: 6 !important;
  }

  #splitHero .ggg-atmos-particle {
    z-index: 7 !important;
  }
}


/* ===== extracted style block 12 ===== */
/* ──────────────────────────────────────────────────────────────
   PNG-ONLY HOVER TRIGGER FIX
   The old desktop hover listened to the entire left/right panel, which
   meant the slide-out opened over the black dead zones. On desktop, the
   panels no longer receive pointer events. A script below samples the
   visible Not Chosen PNG pixels and only opens a slide-out when the
   cursor is actually over non-black artwork.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 701px) {
  .split-left,
  .split-right {
    pointer-events: none !important;
  }

  .ggg-not-chosen-img {
    pointer-events: none !important;
  }

  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right {
    pointer-events: none !important;
  }

  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    pointer-events: auto !important;
  }

  .split-hero.hover-left .slide-out-left .slide-out-link,
  .split-hero.hover-right .slide-out-right .slide-out-link {
    pointer-events: auto !important;
  }
}


/* ===== extracted style block 13 ===== */
/* ──────────────────────────────────────────────────────────────
   CLEAN SLATE: HOVER SYSTEM DISABLED
   Removes all desktop slide-out hover behavior so the hero can be
   rebuilt from scratch without old hover-left / hover-right signals.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 701px) {
  .split-hero,
  .split-left,
  .split-right,
  .split-center,
  .ggg-not-chosen-img {
    pointer-events: auto !important;
  }

  .split-hero,
  .split-hero.hover-left,
  .split-hero.hover-right {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 11.25vw, 190px) minmax(0, 1fr) !important;
  }

  .slide-out,
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right,
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right,
  .split-hero.hover-left .slide-out-right,
  .split-hero.hover-right .slide-out-left {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
  }

  .slide-out-left,
  .split-hero .slide-out-left,
  .split-hero.hover-left .slide-out-left {
    transform: translateX(-100%) !important;
  }

  .slide-out-right,
  .split-hero .slide-out-right,
  .split-hero.hover-right .slide-out-right {
    transform: translateX(100%) !important;
  }

  .split-hero.hover-left .split-center,
  .split-hero.hover-right .split-center,
  .split-hero.hover-left .split-center .split-center-inner,
  .split-hero.hover-right .split-center .split-center-inner,
  .split-hero.hover-left .split-center .split-question,
  .split-hero.hover-right .split-center .split-question,
  .split-hero.hover-left .split-center .split-center-sub,
  .split-hero.hover-right .split-center .split-center-sub,
  .split-hero.hover-left .split-center .split-divider-line,
  .split-hero.hover-right .split-center .split-divider-line {
    opacity: 1 !important;
  }

  .split-panel:hover .split-bg,
  .split-panel:hover .split-content,
  .split-panel:hover .split-cta {
    transform: none !important;
  }

  .split-panel:hover .split-overlay {
    opacity: 1 !important;
  }
}


/* ===== extracted style block 14 ===== */
/* ──────────────────────────────────────────────────────────────
   REBUILT DESKTOP SLIDE-OUT SYSTEM
   Trigger only from the hand-picked oval activation areas shown in the
   reference image. The black center/dead areas no longer trigger anything.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 701px) {
  .split-hero {
    --ggg-left-activate-x: 24%;
    --ggg-left-activate-y: 45%;
    --ggg-left-activate-rx: 22%;
    --ggg-left-activate-ry: 22%;
    --ggg-left-activate-offset-x: -40px;
    --ggg-left-activate-offset-y: 60px;

    --ggg-right-activate-x: 66%;
    --ggg-right-activate-y: 43%;
    --ggg-right-activate-rx: 22%;
    --ggg-right-activate-ry: 22%;
    --ggg-right-activate-offset-x: 120px;
    --ggg-right-activate-offset-y: 60px;
  }

  .slide-out,
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right,
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right,
  .split-hero.hover-left .slide-out-right,
  .split-hero.hover-right .slide-out-left {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: min(82vw, calc((100vh - 56px) * 1.4505)) !important;
    max-width: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    z-index: 40 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.52s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease !important;
    box-shadow: none !important;
    background: #000 !important;
  }

  .slide-out-left,
  .split-hero .slide-out-left {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }

  .slide-out-right,
  .split-hero .slide-out-right {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }

  .split-hero.hover-left .slide-out-left {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .split-hero.hover-right .slide-out-right {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .split-hero.hover-left .slide-out-right,
  .split-hero.hover-right .slide-out-left {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .split-hero.hover-left .slide-out-left .slide-out-link,
  .split-hero.hover-right .slide-out-right .slide-out-link {
    pointer-events: auto !important;
    z-index: 9 !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  .slide-out-left .ggg-slide-art-img { object-position: left center !important; }
  .slide-out-right .ggg-slide-art-img { object-position: right center !important; }

  .split-hero.hover-left .split-center,
  .split-hero.hover-right .split-center,
  .split-hero.hover-left .split-center .split-center-inner,
  .split-hero.hover-right .split-center .split-center-inner,
  .split-hero.hover-left .split-center .split-question,
  .split-hero.hover-right .split-center .split-question,
  .split-hero.hover-left .split-center .split-center-sub,
  .split-hero.hover-right .split-center .split-center-sub,
  .split-hero.hover-left .split-center .split-divider-line,
  .split-hero.hover-right .split-center .split-divider-line {
    opacity: 1 !important;
  }
}


/* ===== extracted style block 15 ===== */
@media (min-width: 701px) {
  /* Restore the floating cards and CTA on the finished slide-out art. */
  .so-overlay,
  .shadow-overlay {
    display: flex !important;
    position: absolute !important;
    z-index: 12 !important;
    background: transparent !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.22s ease, transform 0.32s ease !important;
    text-align: left !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Hide the extra edition label so the layout is just cards + CTA under the title art. */
  .so-edition-label,
  .shadow-edition-label {
    display: none !important;
  }

  /* Left slide-out (Original Edition): right-side title block, so place cards/CTA below it. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 67.2% !important;
    top: 35.5% !important;
    width: 25.5% !important;
    bottom: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.7rem !important;
    padding: 0 !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    width: 172px !important;
    height: 188px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .slide-out-left .so-card {
    width: 118px !important;
    height: 168px !important;
  }

  .slide-out-left .so-c1 { left: 0 !important; }
  .slide-out-left .so-c2 { left: 14px !important; }
  .slide-out-left .so-c3 { left: 28px !important; }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    pointer-events: auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 15 !important;
  }

  /* Right slide-out (Shadow Edition): left-side title block, so place cards/CTA below it. */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 2.2% !important;
    top: 38.5% !important;
    width: 24.5% !important;
    bottom: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.7rem !important;
    padding: 0 !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: 172px !important;
    height: 188px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .slide-out-right .shadow-card {
    width: 118px !important;
    height: 168px !important;
  }

  .slide-out-right .shadow-c1 { left: 0 !important; }
  .slide-out-right .shadow-c2 { left: 14px !important; }
  .slide-out-right .shadow-c3 { left: 28px !important; }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    pointer-events: auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 15 !important;
  }
}


/* ===== extracted style block 16 ===== */
@media (min-width: 701px) {
  .split-hero.hover-left .slide-out-left .so-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    pointer-events: auto !important;
    z-index: 20 !important;
  }

  .split-hero.hover-left .slide-out-left .so-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    pointer-events: none !important;
  }

  .split-hero.hover-left .slide-out-left .so-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    pointer-events: auto !important;
    z-index: 25 !important;
  }
}


/* ===== extracted style block 17 ===== */
@media (min-width: 701px) {
  /* Keep the active slide-out itself interactive so moving across the image
     does not drop the hover state. */
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    pointer-events: auto !important;
  }

  /* Make the whole visible slide-out panel, image, cards, and CTA part of
     the same persistence zone. */
  .split-hero.hover-left .slide-out-left *,
  .split-hero.hover-right .slide-out-right * {
    pointer-events: auto !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img {
    pointer-events: none !important;
  }

  .slide-out-left .so-overlay,
  .slide-out-right .shadow-overlay {
    pointer-events: auto !important;
  }

  .slide-out-left .so-cards,
  .slide-out-right .shadow-cards {
    pointer-events: none !important;
  }

  .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .slide-out-left .slide-out-link,
  .slide-out-right .slide-out-link {
    pointer-events: auto !important;
  }
}


/* ===== extracted style block 18 ===== */
@media (min-width: 701px) {
  /* Center the Original Edition floating cards and CTA directly under the title block. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 65.5% !important;
    top: 35.2% !important;
    width: 28.5% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 0.75rem !important;
    padding: 0 !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    margin: 0 auto !important;
    transform: none !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    align-self: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}


/* ===== extracted style block 19 ===== */
@media (min-width: 701px) {
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    pointer-events: auto !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay,
  .split-hero.hover-left .slide-out-left .so-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta,
  .split-hero.hover-left .slide-out-left .slide-out-link,
  .split-hero.hover-right .slide-out-right .slide-out-link {
    pointer-events: auto !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img,
  .slide-out-left .so-cards,
  .slide-out-right .shadow-cards {
    pointer-events: none !important;
  }
}


/* ===== extracted style block 20 ===== */
@media (min-width: 701px) {
  /* Precisely center the Original Edition cards + CTA under the baked-in title block. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 79.8% !important;
    top: 35.8% !important;
    width: auto !important;
    min-width: 190px !important;
    bottom: auto !important;
    padding: 0 !important;
    gap: 0.85rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    width: 168px !important;
    height: 188px !important;
    margin: 0 auto !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    align-self: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}


/* ===== extracted style block 21 ===== */
@media (min-width: 701px) {
  /* Shift the Original Edition cards + CTA farther right so the whole stack is centered
     directly beneath the baked-in title block on the slide-out art. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 85.8% !important;
    top: 34.9% !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 0.8rem !important;
    padding: 0 !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    width: 168px !important;
    height: 188px !important;
    margin: 0 auto !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    align-self: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}


/* ===== extracted style block 22 ===== */
@media (min-width: 701px) {
  /* Move the Original Edition floating cards + CTA downward to sit beneath the title block,
     matching the requested placement in the screenshot. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 85.8% !important;
    top: 44.8% !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 0.8rem !important;
    padding: 0 !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    width: 168px !important;
    height: 188px !important;
    margin: 0 auto !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    align-self: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}


/* ===== extracted style block 23 ===== */
@media (min-width: 701px) {
  /*
    Crop bug fix:
    An older .so-overlay rule had overflow:hidden. Once the Original Edition
    overlay was moved downward and rightward, the floating card stack was being
    clipped at the overlay boundary. Keep the overlay positioned where requested,
    but allow the card stack to render outside its internal box.
  */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    left: 85.2% !important;
    top: 44.8% !important;
    padding: 0 !important;
  }

  .slide-out-left .so-overlay > *,
  .split-hero.hover-left .slide-out-left .so-overlay > *,
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    overflow: visible !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    position: relative !important;
    width: 210px !important;
    height: 218px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .slide-out-left .so-card {
    width: 128px !important;
    height: 178px !important;
    transform-origin: center center !important;
  }

  .slide-out-left .so-c1 { left: 26px !important; bottom: 18px !important; }
  .slide-out-left .so-c2 { left: 40px !important; bottom: 18px !important; }
  .slide-out-left .so-c3 { left: 54px !important; bottom: 18px !important; }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    align-self: center !important;
    margin: -0.2rem auto 0 !important;
    white-space: nowrap !important;
  }
}


/* ===== extracted style block 24 ===== */
@media (min-width: 701px) {
  /* Slightly enlarge the Original Edition floating cards and CTA. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    width: 228px !important;
    height: 236px !important;
    margin: 0 auto !important;
  }

  .slide-out-left .so-card {
    width: 138px !important;
    height: 190px !important;
  }

  .slide-out-left .so-c1 { left: 28px !important; bottom: 20px !important; }
  .slide-out-left .so-c2 { left: 44px !important; bottom: 20px !important; }
  .slide-out-left .so-c3 { left: 60px !important; bottom: 20px !important; }

  .slide-out-left .so-roman { font-size: 0.60rem !important; }
  .slide-out-left .so-glyph { font-size: 2.7rem !important; }
  .slide-out-left .so-cname { font-size: 0.52rem !important; }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    font-size: 0.92rem !important;
    padding: 0.86rem 1.62rem !important;
    border-radius: 5px !important;
    letter-spacing: 0.10em !important;
    margin: -0.1rem auto 0 !important;
  }
}


/* ===== extracted style block 25 ===== */
@media (min-width: 701px) {
  /*
    Recenter the Original Edition floating cards and CTA as one unified block
    under the baked-in ORIGINAL EDITION title text. The previous enlargement
    made the group feel slightly off-center, so this recenters the whole stack
    on the title column rather than letting the wider overlay drift.
  */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 84.6% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    transform: translateX(-50%) translateY(10px) !important;
    overflow: visible !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    width: 228px !important;
    height: 236px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}


/* ===== extracted style block 26 ===== */
@media (min-width: 701px) {
  /* Shift Original Edition floating cards + CTA slightly right so the stack
     centers under the baked-in title text. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    left: 86.4% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    align-items: center !important;
    text-align: center !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }
}


/* ===== extracted style block 27 ===== */
@media (min-width: 701px) {
  /*
    Make the Shadow Edition floating cards and CTA match the Original Edition
    sizing, and center the whole group beneath the baked-in SHADOW EDITION
    title block.
  */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 18.2% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    bottom: auto !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: visible !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    position: relative !important;
    width: 228px !important;
    height: 236px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .slide-out-right .shadow-card {
    width: 138px !important;
    height: 190px !important;
    transform-origin: center center !important;
  }

  .slide-out-right .shadow-c1 { left: 28px !important; bottom: 20px !important; }
  .slide-out-right .shadow-c2 { left: 44px !important; bottom: 20px !important; }
  .slide-out-right .shadow-c3 { left: 60px !important; bottom: 20px !important; }

  .slide-out-right .shadow-roman { font-size: 0.60rem !important; }
  .slide-out-right .shadow-glyph { font-size: 2.7rem !important; }
  .slide-out-right .shadow-cname { font-size: 0.52rem !important; }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    pointer-events: auto !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -0.1rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 15 !important;
    font-size: 0.92rem !important;
    padding: 0.86rem 1.62rem !important;
    border-radius: 5px !important;
    letter-spacing: 0.10em !important;
  }
}


/* ===== extracted style block 28 ===== */
@media (min-width: 701px) {
  /*
    Recenter the Shadow Edition floating cards + CTA under the baked-in
    SHADOW EDITION title text. The previous placement was too far to the right.
  */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 14.2% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    bottom: auto !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: visible !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: center !important;
  }
}


/* ===== extracted style block 29 ===== */
@media (min-width: 701px) {
  /* Shadow Edition card fan now uses identical clamp() sizing to the Original Edition
     (.so-cards / .so-card) so both stacks are the same physical size at every viewport. */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 16.9% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    overflow: visible !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Container: identical to .so-cards */
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    position: relative !important;
    width: clamp(188px, 15.2vw, 240px) !important;
    height: clamp(214px, 27vh, 266px) !important;
    margin: -0.08rem auto 0.24rem !important;
    overflow: visible !important;
    transform: translateX(-4px) !important;
  }

  /* Individual card: identical to .so-card */
  .slide-out-right .shadow-card {
    width: clamp(138px, 11vw, 176px) !important;
    height: clamp(196px, 25vh, 246px) !important;
    transform-origin: center center !important;
  }

  /* Fan offsets: identical to .so-c1/2/3 */
  .slide-out-right .shadow-c1 { left: 0 !important;    bottom: 0 !important; }
  .slide-out-right .shadow-c2 { left: 16px !important; bottom: 0 !important; }
  .slide-out-right .shadow-c3 { left: 32px !important; bottom: 0 !important; }

  .slide-out-right .shadow-roman { font-size: 0.60rem !important; }
  .slide-out-right .shadow-glyph { font-size: 2.7rem !important; }
  .slide-out-right .shadow-cname { font-size: 0.52rem !important; }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -0.1rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.92rem !important;
    padding: 0.86rem 1.62rem !important;
    border-radius: 5px !important;
    letter-spacing: 0.10em !important;
  }
}


/* ===== extracted style block 30 ===== */
@media (min-width: 701px) {
  /* From the uploaded working file: Shadow Edition card fan uses the same
     clamp() sizing model as the card stack that was visually correct. */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 16.9% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    overflow: visible !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    position: relative !important;
    width: clamp(188px, 15.2vw, 240px) !important;
    height: clamp(214px, 27vh, 266px) !important;
    margin: -0.08rem auto 0.24rem !important;
    overflow: visible !important;
    transform: translateX(-4px) !important;
  }

  .slide-out-right .shadow-card {
    width: clamp(138px, 11vw, 176px) !important;
    height: clamp(196px, 25vh, 246px) !important;
    transform-origin: center center !important;
  }

  .slide-out-right .shadow-c1 { left: 0 !important;    bottom: 0 !important; }
  .slide-out-right .shadow-c2 { left: 16px !important; bottom: 0 !important; }
  .slide-out-right .shadow-c3 { left: 32px !important; bottom: 0 !important; }

  .slide-out-right .shadow-roman { font-size: 0.60rem !important; }
  .slide-out-right .shadow-glyph { font-size: 2.7rem !important; }
  .slide-out-right .shadow-cname { font-size: 0.52rem !important; }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -0.1rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.92rem !important;
    padding: 0.86rem 1.62rem !important;
    border-radius: 5px !important;
    letter-spacing: 0.10em !important;
  }
}


/* ===== extracted style block 31 ===== */
@media (min-width: 701px) {
  /*
    Final Shadow Edition placement:
    Keep Claude's correct floating-card sizing, but shift the entire overlay
    left so the card fan and CTA center directly beneath the baked-in
    SHADOW EDITION title text.
  */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 14.4% !important;
    top: 44.8% !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    overflow: visible !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: center !important;
  }
}


/* ===== extracted style block 32 ===== */
@media (min-width: 701px) {
  /*
    Move the Shadow Edition floating card stack and CTA upward so its vertical
    placement matches the Original Edition side more closely.
  */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    top: 40.8% !important;
  }
}


/* ===== extracted style block 33 ===== */
@media (min-width: 701px) {
  /*
    Shift the Shadow Edition floating cards + CTA slightly to the right
    so the composition feels more symmetrical against the Original side.
  */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 15.2% !important;
  }
}


/* ===== extracted style block 34 ===== */
@media (min-width: 701px) {
  /*
    Lower the Shadow Edition CTA by 20px so it lines up with the Original Edition CTA.
  */
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-top: calc(-0.1rem + 20px) !important;
  }
}


/* ===== extracted style block 35 ===== */
@media (min-width: 701px) {
  /*
    Shift the Shadow Edition CTA 20px to the left.
  */
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    position: relative !important;
    left: -20px !important;
  }
}


/* ===== extracted style block 36 ===== */
@media (min-width: 701px) {
  /*
    Stable hover/persistence fix:
    The previous debug showed both slide panels could be pointer-events:none
    after the hover class dropped. The rebuilt controller below does not rely
    on the browser's target element alone; it checks the geometric slide,
    overlay, cards, and CTA zones directly.
  */
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    pointer-events: auto !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .slide-out-link,
  .split-hero.hover-right .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .slide-out-link {
    pointer-events: auto !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img,
  .slide-out-left .so-cards,
  .slide-out-right .shadow-cards {
    pointer-events: none !important;
  }
}


/* ===== extracted style block 37 ===== */
@media (min-width: 701px) {
  /*
    Sticky slide-out persistence:
    The slide-out should not close just because the browser briefly targets
    the not-chosen image, card layer, CTA layer, or emits a pointerleave while
    the cursor is still geometrically inside the active slide-out coverage.
  */
  .split-hero.hover-left .slide-out-left,
  .split-hero.hover-right .slide-out-right {
    pointer-events: auto !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .slide-out-link,
  .split-hero.hover-right .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .slide-out-link {
    pointer-events: auto !important;
  }

  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img,
  .slide-out-left .so-cards,
  .slide-out-right .shadow-cards {
    pointer-events: none !important;
  }
}


/* ===== extracted style block 38 ===== */
@media (max-width: 700px) {
  /* Bring back the floating card stacks and compact CTA blocks on mobile.
     Keep them centered under the baked-in title text within each dark column. */
  .so-overlay,
  .shadow-overlay {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 0 !important;
    width: 31% !important;
    max-width: 31% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: 8 !important;
    pointer-events: all !important;
  }

  .so-overlay {
    right: 3.2% !important;
    left: auto !important;
    top: 42.5% !important;
    bottom: auto !important;
    transform: none !important;
  }

  .shadow-overlay {
    left: 3.2% !important;
    right: auto !important;
    top: 42.5% !important;
    bottom: auto !important;
    transform: none !important;
  }

  .so-cards,
  .shadow-cards {
    display: block !important;
    position: relative !important;
    width: clamp(86px, 24vw, 112px) !important;
    height: clamp(96px, 28vw, 130px) !important;
    margin: 0 auto 0.24rem !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .so-card,
  .shadow-card {
    position: absolute !important;
    bottom: 0 !important;
    width: clamp(64px, 18vw, 84px) !important;
    height: clamp(92px, 23vw, 118px) !important;
    border-radius: 7px !important;
    gap: 0.18rem !important;
  }

  .so-c1,
  .shadow-c1 { left: 0 !important; }
  .so-c2,
  .shadow-c2 { left: 9px !important; }
  .so-c3,
  .shadow-c3 { left: 18px !important; }

  .so-roman,
  .shadow-roman {
    font-size: 0.34rem !important;
    letter-spacing: 0.15em !important;
  }

  .so-glyph,
  .shadow-glyph {
    font-size: 1.35rem !important;
  }

  .so-cname,
  .shadow-cname {
    font-size: 0.28rem !important;
    letter-spacing: 0.12em !important;
  }

  .so-edition-label,
  .shadow-edition-label {
    display: block !important;
    align-self: center !important;
    margin: 0 0 0.38rem !important;
    font-size: 0.34rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--orange) !important;
    opacity: 0.95 !important;
  }

  .so-cta,
  .shadow-cta {
    display: inline-block !important;
    align-self: center !important;
    position: static !important;
    margin: 0 auto !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    padding: 0.6rem 0.95rem !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.55) !important;
    pointer-events: all !important;
  }
}

@media (max-width: 420px) {
  .so-overlay,
  .shadow-overlay {
    width: 32.5% !important;
    max-width: 32.5% !important;
    top: 43% !important;
  }

  .so-cards,
  .shadow-cards {
    width: clamp(82px, 25vw, 104px) !important;
    height: clamp(92px, 28vw, 122px) !important;
    margin-bottom: 0.2rem !important;
  }

  .so-card,
  .shadow-card {
    width: clamp(60px, 18vw, 78px) !important;
    height: clamp(88px, 23vw, 112px) !important;
  }

  .so-c2,
  .shadow-c2 { left: 8px !important; }
  .so-c3,
  .shadow-c3 { left: 16px !important; }

  .so-edition-label,
  .shadow-edition-label {
    margin-bottom: 0.34rem !important;
    font-size: 0.32rem !important;
  }

  .so-cta,
  .shadow-cta {
    font-size: 0.54rem !important;
    padding: 0.56rem 0.88rem !important;
  }
}


/* ===== extracted style block 39 ===== */
@media (max-width: 700px) {
  /* Original Edition mobile fix: the card stack was still inheriting
     hidden child-state styles from desktop hover logic. Force it visible. */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    right: 2.8% !important;
    left: auto !important;
    top: 42.2% !important;
    width: 31% !important;
    max-width: 31% !important;
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .slide-out-left .so-overlay > *,
  .split-hero.hover-left .slide-out-left .so-overlay > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 auto 0.28rem !important;
    overflow: visible !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin: 0 auto !important;
    align-self: center !important;
  }

  /* Shadow Edition mobile fix:
     move the whole column slightly left so the CTA aligns with the title,
     and move the cards upward so they sit more centered between the title and CTA. */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 1.2% !important;
    right: auto !important;
    top: 40.2% !important;
    width: 32% !important;
    max-width: 32% !important;
    align-items: flex-start !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    margin: 0 0 0.34rem 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .slide-out-right .shadow-edition-label,
  .split-hero.hover-right .slide-out-right .shadow-edition-label {
    align-self: flex-start !important;
    margin: 0 0 0.38rem 0.02rem !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    align-self: flex-start !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    right: 2.6% !important;
    top: 42.3% !important;
    width: 32.2% !important;
    max-width: 32.2% !important;
  }

  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 0.8% !important;
    top: 39.8% !important;
    width: 33% !important;
    max-width: 33% !important;
  }
}


/* ===== extracted style block 40 ===== */
@media (max-width: 700px) {
  /*
    Mobile only: push both CTA buttons farther down inside their respective
    hero images. The vertical spacing scales with screen width, so larger
    mobile screens get a larger downward shift.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin: clamp(34px, 10vw, 72px) auto 0 !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin: clamp(34px, 10vw, 72px) 0 0 !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin-top: clamp(32px, 10vw, 52px) !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-top: clamp(32px, 10vw, 52px) !important;
  }
}


/* ===== extracted style block 41 ===== */
@media (max-width: 700px) {
  /*
    Reduced the prior CTA downward movement by 2/3,
    leaving only about 1/3 of the previous added spacing.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin: clamp(11px, 3.3vw, 24px) auto 0 !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin: clamp(11px, 3.3vw, 24px) 0 0 !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin-top: clamp(10px, 3.3vw, 17px) !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-top: clamp(10px, 3.3vw, 17px) !important;
  }
}


/* ===== extracted style block 42 ===== */
@media (max-width: 700px) {
  /*
    Mobile only:
    Scale the floating card stacks and CTA buttons more proportionally
    as mobile viewport width increases.
  */

  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    width: clamp(124px, 33vw, 178px) !important;
    max-width: clamp(124px, 33vw, 178px) !important;
  }

  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    width: clamp(124px, 33vw, 178px) !important;
    max-width: clamp(124px, 33vw, 178px) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: clamp(96px, 28vw, 142px) !important;
    height: clamp(110px, 32vw, 162px) !important;
    margin-bottom: clamp(0.22rem, 1.1vw, 0.48rem) !important;
  }

  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    width: clamp(70px, 21vw, 104px) !important;
    height: clamp(100px, 30vw, 148px) !important;
    border-radius: clamp(6px, 1.5vw, 9px) !important;
  }

  .slide-out-left .so-c1,
  .slide-out-right .shadow-c1 {
    left: 0 !important;
  }

  .slide-out-left .so-c2,
  .slide-out-right .shadow-c2 {
    left: clamp(9px, 2.7vw, 15px) !important;
  }

  .slide-out-left .so-c3,
  .slide-out-right .shadow-c3 {
    left: clamp(18px, 5.4vw, 30px) !important;
  }

  .slide-out-left .so-roman,
  .slide-out-right .shadow-roman {
    font-size: clamp(0.34rem, 1.15vw, 0.48rem) !important;
  }

  .slide-out-left .so-glyph,
  .slide-out-right .shadow-glyph {
    font-size: clamp(1.35rem, 4.6vw, 2.05rem) !important;
  }

  .slide-out-left .so-cname,
  .slide-out-right .shadow-cname {
    font-size: clamp(0.28rem, 0.95vw, 0.40rem) !important;
  }

  .slide-out-left .so-edition-label,
  .split-hero.hover-left .slide-out-left .so-edition-label,
  .slide-out-right .shadow-edition-label,
  .split-hero.hover-right .slide-out-right .shadow-edition-label {
    font-size: clamp(0.32rem, 1.05vw, 0.45rem) !important;
    margin-bottom: clamp(0.28rem, 1.2vw, 0.52rem) !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: clamp(0.54rem, 1.75vw, 0.76rem) !important;
    padding:
      clamp(0.56rem, 1.55vw, 0.78rem)
      clamp(0.88rem, 2.8vw, 1.35rem) !important;
    border-radius: clamp(4px, 1vw, 6px) !important;
    letter-spacing: clamp(0.08em, 0.28vw, 0.11em) !important;
  }
}

@media (max-width: 420px) {
  /*
    Keep very narrow phones from getting too large, while still allowing
    proportional growth above the smallest viewport widths.
  */

  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay,
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    width: clamp(112px, 32vw, 138px) !important;
    max-width: clamp(112px, 32vw, 138px) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: clamp(86px, 27vw, 112px) !important;
    height: clamp(98px, 31vw, 130px) !important;
  }

  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    width: clamp(62px, 20vw, 82px) !important;
    height: clamp(90px, 29vw, 118px) !important;
  }

  .slide-out-left .so-c2,
  .slide-out-right .shadow-c2 {
    left: clamp(8px, 2.5vw, 11px) !important;
  }

  .slide-out-left .so-c3,
  .slide-out-right .shadow-c3 {
    left: clamp(16px, 5vw, 22px) !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: clamp(0.52rem, 1.65vw, 0.62rem) !important;
    padding:
      clamp(0.54rem, 1.45vw, 0.66rem)
      clamp(0.82rem, 2.45vw, 1.05rem) !important;
  }
}


/* ===== extracted style block 43 ===== */
@media (max-width: 700px) {
  /*
    Mobile only:
    Keep the CTA buttons inside their slide-out image panels. The overlay now
    has a bottom boundary, and the CTA is pushed to that boundary with
    margin-top:auto instead of being allowed to flow below the image.
  */

  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right {
    overflow: hidden !important;
  }

  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    right: 2.6% !important;
    left: auto !important;
    top: 39.5% !important;
    bottom: 5.5% !important;
    height: auto !important;
    width: clamp(124px, 33vw, 178px) !important;
    max-width: clamp(124px, 33vw, 178px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 1.0% !important;
    right: auto !important;
    top: 39.0% !important;
    bottom: 5.5% !important;
    height: auto !important;
    width: clamp(124px, 33vw, 178px) !important;
    max-width: clamp(124px, 33vw, 178px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .slide-out-left .so-overlay > *,
  .split-hero.hover-left .slide-out-left .so-overlay > *,
  .slide-out-right .shadow-overlay > *,
  .split-hero.hover-right .slide-out-right .shadow-overlay > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    flex: 0 0 auto !important;
    margin-bottom: clamp(0.18rem, 0.8vw, 0.36rem) !important;
  }

  .slide-out-left .so-edition-label,
  .split-hero.hover-left .slide-out-left .so-edition-label,
  .slide-out-right .shadow-edition-label,
  .split-hero.hover-right .slide-out-right .shadow-edition-label {
    flex: 0 0 auto !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin: auto auto 0 !important;
    align-self: center !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin: auto 0 0 !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    right: 2.4% !important;
    top: 38.8% !important;
    bottom: 4.8% !important;
    width: clamp(112px, 32vw, 138px) !important;
    max-width: clamp(112px, 32vw, 138px) !important;
  }

  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: 0.8% !important;
    top: 38.2% !important;
    bottom: 4.8% !important;
    width: clamp(112px, 32vw, 138px) !important;
    max-width: clamp(112px, 32vw, 138px) !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: clamp(0.48rem, 1.45vw, 0.58rem) !important;
    padding:
      clamp(0.48rem, 1.3vw, 0.60rem)
      clamp(0.68rem, 2.0vw, 0.92rem) !important;
  }
}

@media (max-width: 360px) {
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: clamp(76px, 25vw, 94px) !important;
    height: clamp(86px, 29vw, 110px) !important;
  }

  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    width: clamp(54px, 18vw, 68px) !important;
    height: clamp(78px, 26vw, 98px) !important;
  }

  .slide-out-left .so-c2,
  .slide-out-right .shadow-c2 { left: 7px !important; }

  .slide-out-left .so-c3,
  .slide-out-right .shadow-c3 { left: 14px !important; }
}


/* ===== extracted style block 44 ===== */
@media (max-width: 700px) {
  /*
    Ensure CTA text always fits inside the button bounds on mobile.
    Use fully box-sized buttons, responsive typography/padding, and a safe
    wrap fallback on very small screens.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(0.48rem, 1.35vw, 0.62rem) clamp(0.70rem, 2.1vw, 1.00rem) !important;
    font-size: clamp(0.46rem, 1.35vw, 0.62rem) !important;
    line-height: 1.08 !important;
    letter-spacing: clamp(0.01em, 0.05vw, 0.06em) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 520px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    padding: clamp(0.44rem, 1.25vw, 0.56rem) clamp(0.60rem, 1.9vw, 0.84rem) !important;
    font-size: clamp(0.42rem, 1.25vw, 0.56rem) !important;
    letter-spacing: clamp(0.005em, 0.03vw, 0.04em) !important;
  }
}

@media (max-width: 390px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    padding: 0.40rem 0.54rem !important;
    font-size: 0.40rem !important;
    letter-spacing: 0 !important;
    max-width: 98% !important;
  }
}

@media (max-width: 330px) {
  /* Last-resort safety for extremely narrow screens */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    white-space: normal !important;
    word-break: keep-all !important;
    padding: 0.36rem 0.48rem !important;
    line-height: 1.02 !important;
  }
}


/* ===== extracted style block 45 ===== */
@media (max-width: 700px) {
  /*
    Rebalance mobile scaling:
    - CTA buttons were shrinking too aggressively.
    - Floating card stacks should scale more noticeably between small and large phones.
    This block intentionally overrides earlier mobile sizing rules.
  */

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: clamp(84px, 22.5vw, 128px) !important;
    height: clamp(102px, 27vw, 152px) !important;
    margin-bottom: clamp(0.20rem, 0.65vw, 0.42rem) !important;
  }

  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    width: clamp(62px, 16.8vw, 94px) !important;
    height: clamp(92px, 24.8vw, 136px) !important;
    border-radius: clamp(6px, 1.1vw, 8px) !important;
  }

  .slide-out-left .so-c2,
  .slide-out-right .shadow-c2 {
    left: clamp(8px, 2.2vw, 13px) !important;
  }

  .slide-out-left .so-c3,
  .slide-out-right .shadow-c3 {
    left: clamp(16px, 4.4vw, 26px) !important;
  }

  .slide-out-left .so-roman,
  .slide-out-right .shadow-roman {
    font-size: clamp(0.32rem, 0.70vw, 0.42rem) !important;
  }

  .slide-out-left .so-glyph,
  .slide-out-right .shadow-glyph {
    font-size: clamp(1.18rem, 3.8vw, 1.82rem) !important;
  }

  .slide-out-left .so-cname,
  .slide-out-right .shadow-cname {
    font-size: clamp(0.26rem, 0.60vw, 0.36rem) !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: clamp(0.52rem, 1.48vw, 0.66rem) !important;
    line-height: 1.05 !important;
    padding: clamp(0.50rem, 1.10vw, 0.64rem) clamp(0.78rem, 1.95vw, 1.10rem) !important;
    letter-spacing: clamp(0.00em, 0.03vw, 0.04em) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: clamp(78px, 24vw, 104px) !important;
    height: clamp(96px, 29vw, 124px) !important;
  }

  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    width: clamp(58px, 18vw, 78px) !important;
    height: clamp(86px, 26vw, 112px) !important;
  }

  .slide-out-left .so-c2,
  .slide-out-right .shadow-c2 {
    left: clamp(7px, 2.0vw, 10px) !important;
  }

  .slide-out-left .so-c3,
  .slide-out-right .shadow-c3 {
    left: clamp(14px, 4.0vw, 20px) !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: clamp(0.50rem, 1.35vw, 0.58rem) !important;
    padding: clamp(0.46rem, 1.05vw, 0.54rem) clamp(0.72rem, 1.75vw, 0.92rem) !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 360px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: 0.48rem !important;
    padding: 0.44rem 0.66rem !important;
  }
}


/* ===== extracted style block 46 ===== */
@media (max-width: 700px) {
  /*
    Mobile only:
    The floating card stacks were sitting too far left relative to the title
    blocks in both slide-out image zones. Nudge each stack to the right so the
    cards sit more centered underneath the slide-out text.
  */
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    transform: translateX(clamp(10px, 2.2vw, 18px)) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: translateX(clamp(12px, 2.8vw, 22px)) !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    transform: translateX(clamp(8px, 2.0vw, 14px)) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: translateX(clamp(10px, 2.5vw, 18px)) !important;
  }
}


/* ===== extracted style block 47 ===== */
@media (min-width: 481px) and (max-width: 700px) {
  /*
    Larger mobile screens only:
    - make the CTA buttons a bit larger
    - lift them slightly upward within the slide-out image zones
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: clamp(0.60rem, 1.45vw, 0.74rem) !important;
    line-height: 1.06 !important;
    padding: clamp(0.58rem, 1.15vw, 0.72rem) clamp(0.92rem, 2.25vw, 1.24rem) !important;
    letter-spacing: clamp(0.01em, 0.04vw, 0.05em) !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin-top: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(10px, 2.0vw, 18px) !important;
    margin-left: auto !important;
    align-self: center !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-top: auto !important;
    margin-right: 0 !important;
    margin-bottom: clamp(10px, 2.0vw, 18px) !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
  }
}


/* ===== extracted style block 48 ===== */
@media (max-width: 700px) {
  /*
    Keep smaller mobile screens at the previous CTA placement,
    but progressively lift the CTAs as screen width grows.
    0px extra lift up to ~500px wide, then smoothly scale to 16px by ~700px.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    --ggg-mobile-cta-lift: clamp(0px, calc((100vw - 500px) * 0.08), 16px);
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    margin-top: auto !important;
    margin-right: auto !important;
    margin-bottom: var(--ggg-mobile-cta-lift) !important;
    margin-left: auto !important;
    align-self: center !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-top: auto !important;
    margin-right: 0 !important;
    margin-bottom: var(--ggg-mobile-cta-lift) !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
  }
}


/* ===== extracted style block 49 ===== */
@media (max-width: 420px) {
  /*
    Smaller mobile phones only:
    the Original Edition floating cards drift too far left under the title.
    Keep large-phone placement intact and add a stronger rightward recentering
    only on smaller screens.
  */
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(clamp(16px, 4.6vw, 24px)) !important;
  }
}

@media (max-width: 360px) {
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    transform: translateX(clamp(18px, 5.2vw, 26px)) !important;
  }
}


/* ===== extracted style block 50 ===== */
/* Right-align the Original Edition floating cards and CTA button */
.slide-out-left .so-overlay,
.split-hero.hover-left .slide-out-left .so-overlay {
  align-items: flex-end !important;
}

.slide-out-left .so-cards,
.split-hero.hover-left .slide-out-left .so-cards {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: none !important;
}

.slide-out-left .so-cta,
.split-hero.hover-left .slide-out-left .so-cta {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: none !important;
}


/* ===== extracted style block 51 ===== */
@media (max-width: 700px) {
  /* Keep the small edition labels clearly visible below the floating cards */
  .slide-out-left .so-edition-label,
  .split-hero.hover-left .slide-out-left .so-edition-label {
    display: block !important;
    position: relative !important;
    z-index: 6 !important;
    align-self: flex-end !important;
    width: clamp(78px, 24vw, 128px) !important;
    margin-top: clamp(0.36rem, 1.25vw, 0.78rem) !important;
    margin-right: 0 !important;
    margin-bottom: clamp(0.34rem, 1.15vw, 0.72rem) !important;
    margin-left: auto !important;
    text-align: center !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  .slide-out-right .shadow-edition-label,
  .split-hero.hover-right .slide-out-right .shadow-edition-label {
    display: block !important;
    position: relative !important;
    z-index: 6 !important;
    align-self: flex-start !important;
    width: clamp(78px, 24vw, 128px) !important;
    margin-top: clamp(0.36rem, 1.25vw, 0.78rem) !important;
    margin-right: auto !important;
    margin-bottom: clamp(0.34rem, 1.15vw, 0.72rem) !important;
    margin-left: 0 !important;
    text-align: center !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-edition-label,
  .split-hero.hover-left .slide-out-left .so-edition-label,
  .slide-out-right .shadow-edition-label,
  .split-hero.hover-right .slide-out-right .shadow-edition-label {
    width: clamp(74px, 25vw, 104px) !important;
    margin-top: clamp(0.42rem, 1.45vw, 0.82rem) !important;
    font-size: clamp(0.30rem, 0.95vw, 0.42rem) !important;
  }
}


/* ===== extracted style block 52 ===== */
@media (min-width: 421px) and (max-width: 700px) {
  /*
    Mobile only:
    Keep smaller-screen CTA sizing unchanged, then scale the CTA buttons up
    smoothly as the mobile screen grows, reaching about 30% larger on the
    largest mobile widths.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;

    font-size: clamp(0.50rem, calc(0.275rem + 0.857vw), 0.65rem) !important;
    line-height: 1.06 !important;

    padding:
      clamp(0.46rem, calc(0.25375rem + 0.786vw), 0.598rem)
      clamp(0.72rem, calc(0.396rem + 1.234vw), 0.936rem) !important;

    letter-spacing: clamp(0em, 0.035vw, 0.035em) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (min-width: 560px) and (max-width: 700px) {
  /*
    Let larger mobile screens feel slightly more premium without affecting
    smaller screens.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    border-radius: 5px !important;
  }
}


/* ===== extracted style block 53 ===== */
/*
  Correct the accidental CTA shrink.
  Keep smaller mobile screens unchanged.
  Only larger mobile screens (481px-700px) scale up,
  reaching about 30% larger than the prior larger-mobile CTA size.
*/
@media (min-width: 481px) and (max-width: 700px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;

    /* Start from the existing larger-mobile size and grow upward. */
    font-size: clamp(0.60rem, calc(0.03rem + 1.95vw), 0.82rem) !important;
    line-height: 1.06 !important;

    padding:
      clamp(0.58rem, calc(0.05rem + 1.85vw), 0.80rem)
      clamp(0.92rem, calc(0.10rem + 3.00vw), 1.40rem) !important;

    letter-spacing: clamp(0.01em, 0.04vw, 0.05em) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (min-width: 560px) and (max-width: 700px) {
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    /* Give the biggest mobile sizes the full premium feel. */
    font-size: clamp(0.72rem, calc(0.22rem + 1.85vw), 0.86rem) !important;
    padding:
      clamp(0.70rem, calc(0.18rem + 1.90vw), 0.83rem)
      clamp(1.12rem, calc(0.32rem + 3.20vw), 1.43rem) !important;
  }
}


/* ===== extracted style block 54 ===== */
@media (max-width: 480px) {
  /*
    Smaller mobile screens only:
    nudge both CTA buttons slightly lower inside their slide-out zones
    without affecting the larger-mobile placement.
  */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    transform: translateY(6px) !important;
  }
}


/* ===== extracted style block 55 ===== */
/* Static floating card stack art and positioning.
   All card animations and click/tap rotation behavior have been removed.
   Card art is no longer cropped; cards use 12:7 L:W, so CSS W:H = 7:11.5.
*/
.so-cards,
.shadow-cards {
  pointer-events: none !important;
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
}

.so-card,
.shadow-card {
  aspect-ratio: 7 / 11.5 !important;
  height: auto !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
}

/* Desktop card proportions */
@media (min-width: 701px) {
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width: 228px !important;
    height: 250px !important;
    overflow: visible !important;
  }

  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    width: 138px !important;
    aspect-ratio: 7 / 11.5 !important;
    height: auto !important;
  }
}

/* Mobile card proportions */
@media (max-width: 700px) {
  .slide-out-left .so-card,
  .slide-out-right .shadow-card {
    aspect-ratio: 7 / 11.5 !important;
    height: auto !important;
  }
}

/* Replace placeholder glyph/text with real art images. */
.ggg-stack-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: inherit !important;
  background: #080812 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 5 !important;
}

/* Hide the placeholder roman/glyph/name once image art is present. */
.so-card:has(.ggg-stack-art) > span,
.shadow-card:has(.ggg-stack-art) > span {
  opacity: 0 !important;
}

/* Fallback for browsers without :has support: JS adds .ggg-has-art */
.ggg-has-art > span {
  opacity: 0 !important;
}

/* Static resting positions for both stacks. */
.so-cards .so-c1,
.shadow-cards .shadow-c1 {
  transform: translate3d(-13%, 3%, -36px) rotateZ(-10deg) scale(0.94);
  z-index: 1 !important;
  filter: brightness(0.72);
}

.so-cards .so-c2,
.shadow-cards .shadow-c2 {
  transform: translate3d(-3%, 1%, -16px) rotateZ(-3deg) scale(0.975);
  z-index: 2 !important;
  filter: brightness(0.86);
}

.so-cards .so-c3,
.shadow-cards .shadow-c3 {
  transform: translate3d(8%, -1%, 0) rotateZ(5deg) scale(1);
  z-index: 3 !important;
  filter: brightness(1);
}

/* Card animations removed intentionally.
   The card stacks are now static so a new animation system can be built from scratch. */


/* ===== extracted style block 56 ===== */
/* Final card aspect-ratio adjustment: 7:11.5 W:H.
   This makes the rotating card faces slightly less tall and reduces
   the black letterboxing at the top and bottom of the card art. */
.so-card,
.shadow-card {
  aspect-ratio: 7 / 11.5 !important;
  height: auto !important;
}

.ggg-stack-art {
  object-fit: contain !important;
  object-position: center center !important;
}


/* ===== extracted style block 57 ===== */
/* Fix Original/Shadow rotating stack art cropping on desktop.
   Use the real uploaded card ratio (898x1488) so the card container matches
   the source art exactly and remove the visible top/bottom black edging. */
.so-card,
.shadow-card {
  aspect-ratio: 898 / 1488 !important;
  height: auto !important;
}

.ggg-stack-art {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}


/* ===== extracted style block 58 ===== */
@media (min-width: 701px) {
  /*
    Fix desktop Original Edition rotating-card crop:
    Several older, more-specific rules still set the front/back cards to fixed
    heights. This override targets the actual Original Edition card elements
    with higher specificity so the real 898x1488 card ratio wins.
  */

  .slide-out-left .so-card,
  .slide-out-left .so-card.so-c1,
  .slide-out-left .so-card.so-c2,
  .slide-out-left .so-card.so-c3,
  .split-hero.hover-left .slide-out-left .so-card,
  .split-hero.hover-left .slide-out-left .so-card.so-c1,
  .split-hero.hover-left .slide-out-left .so-card.so-c2,
  .split-hero.hover-left .slide-out-left .so-card.so-c3 {
    aspect-ratio: 898 / 1488 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    overflow: visible !important;
  }

  .slide-out-left .so-card .ggg-stack-art,
  .split-hero.hover-left .slide-out-left .so-card .ggg-stack-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }
}


/* ===== extracted style block 59 ===== */
@media (min-width: 701px) {
  /*
    The Original Edition rotating cards were visually larger than the Shadow Edition
    cards on desktop after the uncropped-ratio fix. Scale only the Original
    floating card stack down so it visually matches the Shadow stack while
    keeping the card art uncropped.
  */
  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    transform: scale(0.78) !important;
    transform-origin: center top !important;
    margin-bottom: -34px !important;
  }

  .slide-out-left .so-card .ggg-stack-art,
  .split-hero.hover-left .slide-out-left .so-card .ggg-stack-art {
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }
}


/* ===== extracted style block 60 ===== */
@media (min-width: 701px) {
  /* Final desktop Shadow placement: mirror the Original Edition placement so the
     floating cards sit in the same relative position inside the dark title zone. */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    top: 40.8% !important;
    left: auto !important;
    right: calc((100vh - 56px) * 1.253 - (255px / 2)) !important;
    bottom: auto !important;
    padding: 0 !important;
    gap: 0.78rem !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: visible !important;
    transform: none !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: center !important;
    left: 0 !important;
    transform: none !important;
  }
}


/* ===== extracted style block 61 ===== */
@media (max-width: 700px) {
  /*
    Mobile only:
    Move the floating card stack, edition label, and CTA button down together
    slightly within each slide-out image zone.
  */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay,
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateY(clamp(5px, 1.4vw, 10px)) !important;
  }
}

@media (max-width: 420px) {
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay,
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateY(clamp(4px, 1.6vw, 7px)) !important;
  }
}


/* ===== extracted style block 62 ===== */
/*
  Ultimate Edition photo fix:
  The showcase image was being used as a background with cover sizing, which
  cropped the bottom of the graphic. This makes the photo render at its full
  16:9 shape so the bottom is visible.
*/
.ultimate-section .ultimate-inner {
  min-height: 0 !important;
  align-items: start !important;
}

.ultimate-section .ult-left {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #000 !important;
}

/* Keep the right purchase panel readable without forcing the image panel taller. */
.ultimate-section .ult-right {
  min-height: 0 !important;
  align-self: stretch !important;
}

@media (max-width: 1000px) {
  .ultimate-section .ult-left {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    background-size: contain !important;
  }
}


/* ===== extracted style block 63 ===== */
/* Updated chooser band copy and layout */
.split-center .split-center-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 1rem !important;
}

.split-center .split-band-side {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
}

/* Desktop: keep a three-part band layout */
@media (min-width: 1001px) {
  .split-center .split-band-side {
    font-size: 1rem !important;
  }
  .split-center .split-band-left {
    text-align: left !important;
  }
  .split-center .split-question {
    text-align: center !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
  }
  .split-center .split-band-right {
    text-align: right !important;
  }
}

/* Mobile: centered one-line question, left and right side captions */
@media (max-width: 1000px) {
  .split-center {
    padding: 1rem 1rem !important;
  }
  .split-center .split-center-inner {
    grid-template-columns: 1fr auto 1fr !important;
    display: grid !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  .split-center .split-band-side {
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
  }
  .split-center .split-band-left {
    text-align: left !important;
    justify-self: start !important;
  }
  .split-center .split-question {
    font-size: 0.95rem !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  .split-center .split-band-right {
    text-align: right !important;
    justify-self: end !important;
  }
}

@media (max-width: 480px) {
  .split-center .split-band-side {
    font-size: 0.72rem !important;
  }
  .split-center .split-question {
    font-size: 0.88rem !important;
  }
}

@media (max-width: 380px) {
  .split-center .split-band-side {
    font-size: 0.66rem !important;
  }
  .split-center .split-question {
    font-size: 0.8rem !important;
  }
}

/* Make sure hover states do not fade the new side labels */
.split-hero.hover-left .split-center .split-band-side,
.split-hero.hover-right .split-center .split-band-side {
  opacity: 1 !important;
}


/* ===== extracted style block 64 ===== */
/*
  Restore the desktop chooser layout to the original narrow center-column behavior.
  Mobile keeps the newer left / center / right horizontal banner layout.
*/
@media (min-width: 701px) {
  .split-center {
    position: relative !important;
    z-index: 10 !important;
    background: rgba(8,6,14,0.97) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
  }

  .split-center .split-center-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 1rem 0.5rem !important;
    gap: 0 !important;
  }

  .split-center .split-question {
    order: 1 !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    line-height: 1.15 !important;
    color: var(--white) !important;
    margin: 0 0 1.2rem !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
  }

  .split-center .split-divider-line {
    order: 2 !important;
    display: block !important;
    width: 1px !important;
    height: 60px !important;
    background: linear-gradient(to bottom, transparent, var(--orange), transparent) !important;
    margin: 0 auto 1rem !important;
  }

  .split-center .split-band-side {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--dim) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
  }

  .split-center .split-band-left {
    order: 3 !important;
  }

  .split-center .split-band-right {
    order: 4 !important;
  }

  .split-center .split-band-left::after {
    content: "" !important;
  }

  .split-hero.hover-left .split-center,
  .split-hero.hover-right .split-center {
    background: rgba(8,6,14,0.97) !important;
    overflow: hidden !important;
  }

  .split-hero.hover-left .split-center .split-center-inner,
  .split-hero.hover-right .split-center .split-center-inner,
  .split-hero.hover-left .split-center .split-question,
  .split-hero.hover-right .split-center .split-question,
  .split-hero.hover-left .split-center .split-band-side,
  .split-hero.hover-right .split-center .split-band-side,
  .split-hero.hover-left .split-center .split-divider-line,
  .split-hero.hover-right .split-center .split-divider-line {
    opacity: 1 !important;
  }
}


/* ===== extracted style block 65 ===== */
@media (min-width: 901px) {
  /*
    Desktop only:
    Keep the slide-out mechanics unchanged. Move only the vertical chooser
    banner so it sits directly beside the active slide-out image.
  */
  .split-center {
    z-index: 75 !important;
    transition: transform 0.52s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: transform !important;
    pointer-events: none !important;
  }

  .split-center .split-center-inner {
    pointer-events: auto !important;
  }
}


/* ===== extracted style block 66 ===== */
@media (min-width: 901px) {
  /*
    Desktop only:
    Keep the brighten/darken behavior, but remove all debug overlays.
    The larger brighten range remains in effect.
  */
  #splitHero {
    --ggg-left-not-brightness: 0.45;
    --ggg-right-not-brightness: 0.45;
    --ggg-left-not-saturation: 0.90;
    --ggg-right-not-saturation: 0.90;
  }

  #splitHero .split-left .ggg-not-chosen-img {
    filter: brightness(var(--ggg-left-not-brightness)) saturate(var(--ggg-left-not-saturation)) contrast(1.03) !important;
    transition: none !important;
  }

  #splitHero .split-right .ggg-not-chosen-img {
    filter: brightness(var(--ggg-right-not-brightness)) saturate(var(--ggg-right-not-saturation)) contrast(1.03) !important;
    transition: none !important;
  }

  #splitHero.hover-left .split-left .ggg-not-chosen-img {
    filter: brightness(1.08) saturate(1.14) contrast(1.06) !important;
  }

  #splitHero.hover-left .split-right .ggg-not-chosen-img {
    filter: brightness(0.18) saturate(0.68) contrast(0.95) !important;
  }

  #splitHero.hover-right .split-right .ggg-not-chosen-img {
    filter: brightness(1.08) saturate(1.14) contrast(1.06) !important;
  }

  #splitHero.hover-right .split-left .ggg-not-chosen-img {
    filter: brightness(0.18) saturate(0.68) contrast(0.95) !important;
  }
}


/* ===== extracted style block 67 ===== */
/* ──────────────────────────────────────────────────────────────
   ATMOSPHERIC SPLIT HERO ENHANCEMENTS — NO CUSTOM CURSOR
   - Desktop hover/fine-pointer only
   - Extends the existing #splitHero / #splitLeft / #splitRight system
   - Custom cursor remains reverted; native cursor remains unchanged
   - Particles run only while the split hero is in view
   - Brightness is position-driven by cursor proximity instead of binary classes
   ────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  #splitHero.ggg-atmosphere-ready {
    position: relative !important;
    overflow: hidden !important;
  }

  #splitHero.ggg-atmosphere-ready .split-left,
  #splitHero.ggg-atmosphere-ready .split-right {
    position: relative !important;
    overflow: hidden !important;
    --proximity: 0;
  }

  #splitHero.ggg-atmosphere-ready .ggg-not-chosen-img {
    filter: brightness(0.45) saturate(0.90) contrast(1.03) !important;
    transition: none !important;
  }

  #splitHero.ggg-atmosphere-ready .split-left::before,
  #splitHero.ggg-atmosphere-ready .split-right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    pointer-events: none;
    opacity: var(--proximity);
    transition: opacity 0.15s linear;
    z-index: 2;
  }

  #splitHero.ggg-atmosphere-ready .split-left::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 140, 50, 0.35), transparent 70%);
  }

  #splitHero.ggg-atmosphere-ready .split-right::before {
    right: 0;
    background: linear-gradient(to left, rgba(200, 215, 255, 0.30), transparent 70%);
  }

  .ggg-atmos-particle {
    position: absolute !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    will-change: transform, opacity !important;
    z-index: 4 !important;
  }

  .ggg-atmos-particle.ggg-ember {
    background: #ffa040 !important;
    box-shadow: 0 0 8px #ff7020, 0 0 14px rgba(255,80,0,0.6) !important;
  }

  .ggg-atmos-particle.ggg-ash {
    background: rgba(235,242,255,0.92) !important;
    box-shadow: 0 0 6px rgba(210,226,255,0.56) !important;
  }
}


/* ===== extracted style block 68 ===== */
/*
  Ultimate Edition desktop layout:
  - Photo uses a real image, not a cropped CSS background.
  - All image pixels remain visible.
  - No artificial black side/top/bottom margins are added.
  - Image and right module share the same desktop row height.
*/
@media (min-width: 1001px) {
  .ultimate-section {
    width: 100% !important;
    overflow: hidden !important;
  }

  .ultimate-section .ultimate-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  .ultimate-section .ult-left {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  .ultimate-section .ult-photo-full {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .ultimate-section .ult-right {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100% !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    padding: clamp(2rem, 2.6vw, 3rem) clamp(1.35rem, 2vw, 2.35rem) !important;
  }

  .ultimate-section .ult-price-row {
    flex-wrap: wrap !important;
    row-gap: 0.35rem !important;
  }

  .ultimate-section .ult-product-title {
    font-size: clamp(1rem, 1.08vw, 1.1rem) !important;
  }

}


/* ===== extracted style block 69 ===== */
/*
  True no-crop fix:
  The Ultimate image is 2048×1521, not 16:9. Previous rules forced the left
  panel to 16:9, which clipped the top and bottom. This lets the real image
  ratio determine the row height, then stretches the right module to match it.
*/
.ultimate-section .ult-left,
.ultimate-section .ult-left.reveal {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  display: block !important;
}

.ultimate-section .ult-left::before,
.ultimate-section .ult-bg-glyph,
.ultimate-section .ult-text {
  display: none !important;
}

.ultimate-section .ult-photo-full {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: unset !important;
  object-position: initial !important;
}

@media (min-width: 1001px) {
  .ultimate-section .ultimate-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  .ultimate-section .ult-left,
  .ultimate-section .ult-left.reveal {
    align-self: start !important;
    width: 100% !important;
  }

  .ultimate-section .ult-right {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 1000px) {
  .ultimate-section .ultimate-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ultimate-section .ult-left,
  .ultimate-section .ult-left.reveal {
    width: 100% !important;
  }
}


/* ===== extracted style block 70 ===== */
/*
  ============================================================
  FIX: narrow/tall desktop viewport — black bars + off-screen
  cards/CTA (most visible at 726×927).

  Three targeted patches, zero changes to copy/images/layout:

  Patch 1 — Black bars
    The 2048×1412 slide-out art is "contained" inside panels.
    At portrait-like viewports (height > width) the art
    letterboxes with large black gutters above and below.
    Switching to cover fills the panel without stretching.

  Patch 2 — Cards/CTA clipping
    .slide-out-left/right had overflow:hidden, clipping cards
    that nudge a few px past the panel edge.
    Setting panels to overflow:visible lets the content breathe;
    the .split-hero (still overflow:hidden) is the real clip wall.

  Patch 3 — Shadow Edition off-screen position
    The previous rule: right:calc((100vh-56px)*1.253 - 127.5px)
    At 726×927 that evaluates to right:963px on a 596px panel,
    placing the overlay ~367px off the left edge of the panel.
    Replace with a stable panel-relative value that matches the
    existing 1080p look and stays on-screen at any width.
  ============================================================
*/

/* ── Patch 1: No black bars at portrait-like desktop ratios ── */
/* Applies when viewport aspect < 1.45 (the artwork's own ratio) */
@media (min-width: 701px) and (max-aspect-ratio: 145/100) {
  .slide-out-left .ggg-slide-art-img,
  .slide-out-right .ggg-slide-art-img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ── Patch 2: Let cards/CTA overflow the slide panel boundary ── */
/* .split-hero keeps overflow:hidden — it remains the clip wall.  */
@media (min-width: 701px) {
  .slide-out-left,
  .slide-out-right,
  .split-hero .slide-out-left,
  .split-hero .slide-out-right {
    overflow: visible !important;
  }

  .so-overlay,
  .shadow-overlay,
  .so-cards,
  .shadow-cards {
    overflow: visible !important;
  }
}

/* ── Patch 3: Shadow overlay — stable panel-% left positioning ── */
/* clamp(4px, 5%, 80px) matches the existing 1080p visual exactly */
/* (formula gives ≈75px at 1485px panel; 5%×1485 = 74.25px ✓).   */
/* At 726×927 panel=596px: 5%×596=30px vs old calc=-367px.        */
@media (min-width: 701px) {
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left: clamp(4px, 5%, 80px) !important;
    right: auto !important;
  }
}


/* ===== extracted style block 71 ===== */
@media (min-width: 701px) {
  /*
    FIX: Original Edition cards visibly shrink the instant hover ends.

    ROOT CAUSE:
    A "CARD SIZE OVERRIDE" block (~lines 1529/1549/1563) contains hover-only
    rules that make .so-card WIDER during hover:

      .split-hero.hover-left .slide-out-left .so-card {
        width: clamp(116px, 19vw, 150px) !important;   ← ~146px at 768px viewport
      }

    These selectors have specificity (0,3,0). The ggg-card-stack-static-art-css
    baseline sets width:138px !important but only with spec (0,2,0), so it loses
    to the hover-only rule DURING hover. In non-hover state no competing rule
    exists, so the baseline 138px wins. Result:
      hover   → ~146px card width (hover-only rule wins)
      no-hover → 138px card width  (baseline)
      delta   → ~8px instant jump = visible shrink on mouse-off

    With scale(0.78) on the container this is even more obvious in visual space.
    Card height is auto via aspect-ratio so it shrinks proportionally too.

    FIX: A later rule with the SAME specificity (0,3,0) locks .so-card back to
    138px during hover, matching non-hover. Later cascade position wins.
  */
  .split-hero.hover-left .slide-out-left .so-card {
    width: 138px !important;
  }
}


/* ===== extracted style block 72 ===== */
@media (min-width: 701px) {
  /*
    BUG FIX: Original Edition card stack visibly changes size the instant
    hover ends (reported as "shrink right after mouse moves off").

    ROOT CAUSE — instantaneous 28 px left-position jump on every card:

      Hover state:
        line 1535 (spec 0,4,0, no media): .split-hero.hover-left .slide-out-left .so-c1/2/3
          left: 0 / 16px / 32px

      Non-hover state:
        line 4056 (spec 0,2,0, min-width:701px): .slide-out-left .so-c1/2/3
          left: 28px / 44px / 60px  |  bottom: 20px

    The hover-only (0,4,0) rules beat the both-state (0,2,0) rules while the
    slide is open. The instant hover-left is removed, all three cards snap
    28 px to the right with no transition — creating a visible layout jolt
    that reads as a size change (the fan appears to suddenly spread wider /
    extend further into view).

    The existing ggg-original-card-width-consistency-fix (above) already
    locked card WIDTH to 138px in both states; this block does the same
    for the card LEFT/BOTTOM positions.

    FIX: a rule with the same specificity (0,4,0) but later cascade position
    locks the hover left/bottom to match the non-hover values exactly.
    No visual change while hovering; no jump on exit.
  */
  .split-hero.hover-left .slide-out-left .so-c1 {
    left: 28px !important;
    bottom: 20px !important;
  }
  .split-hero.hover-left .slide-out-left .so-c2 {
    left: 44px !important;
    bottom: 20px !important;
  }
  .split-hero.hover-left .slide-out-left .so-c3 {
    left: 60px !important;
    bottom: 20px !important;
  }
}


/* ===== extracted style block 73 ===== */
@media (min-width: 701px) {
  /*
    FIX: Shadow Edition floating card stack is larger than Original Edition.

    ROOT CAUSE:
    ggg-original-desktop-card-size-match-shadow applies scale(0.78) to
    .so-cards (Original) to shrink the stack. ggg-final-shadow-desktop-
    placement-match-original sets transform:none on .shadow-cards, leaving
    Shadow at full (1.0) scale — visibly larger than Original.

    FIX: Apply the same scale(0.78) / transform-origin / margin-bottom to
    .shadow-cards so both stacks render identically.
    This comes after ggg-final-shadow-desktop-placement-match-original
    (which forced transform:none) so it wins in the cascade.
  */
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    transform: scale(0.78) !important;
    transform-origin: center top !important;
    margin-bottom: -34px !important;
  }
}


/* ===== extracted style block 74 ===== */
/*
  FIX: Original Edition fans LEFT, Shadow Edition fans RIGHT.

  Applies everywhere (desktop + all mobile breakpoints).

  3D transforms — no media query (overrides ggg-card-stack-static-art-css):
    Original so-c1/2/3 → negate X and rotateZ  → front card (c3) leftmost
    Shadow shadow-c1/2/3 → restore original values → front card (c3) rightmost

  Base left positions:
    Desktop (≥701px):
      Original: c1=60px  c2=44px  c3=28px  (reversed from previous 28/44/60)
      Shadow:   c1=28px  c2=44px  c3=60px  (reverted from mirror-fix)
    Mobile ≤700px: so-c1=clamp(18,5.4vw,30)  so-c2=clamp(9,2.7vw,15)  so-c3=0
    Mobile ≤420px: so-c1=clamp(16,5vw,22)    so-c2=clamp(8,2.5vw,11)  so-c3=0
    Mobile ≤360px: so-c1=14px               so-c2=7px                so-c3=0
    (Shadow mobile left values are already correct: c1=0 < c2 < c3)

  Hover-lock (≥701px) updated to match new desktop non-hover positions.
*/

/* ── 3D fan transforms: all viewports ── */
.so-cards .so-c1 {
  transform: translate3d(13%, 3%, -36px) rotateZ(10deg) scale(0.94);
}
.so-cards .so-c2 {
  transform: translate3d(3%, 1%, -16px) rotateZ(3deg) scale(0.975);
}
.so-cards .so-c3 {
  transform: translate3d(-8%, -1%, 0) rotateZ(-5deg) scale(1);
}
.shadow-cards .shadow-c1 {
  transform: translate3d(-13%, 3%, -36px) rotateZ(-10deg) scale(0.94);
}
.shadow-cards .shadow-c2 {
  transform: translate3d(-3%, 1%, -16px) rotateZ(-3deg) scale(0.975);
}
.shadow-cards .shadow-c3 {
  transform: translate3d(8%, -1%, 0) rotateZ(5deg) scale(1);
}

/* ── Desktop base positions ── */
@media (min-width: 701px) {
  .slide-out-left .so-c1  { left: 60px !important; bottom: 20px !important; }
  .slide-out-left .so-c2  { left: 44px !important; bottom: 20px !important; }
  .slide-out-left .so-c3  { left: 28px !important; bottom: 20px !important; }
  .slide-out-right .shadow-c1 { left: 28px !important; bottom: 20px !important; }
  .slide-out-right .shadow-c2 { left: 44px !important; bottom: 20px !important; }
  .slide-out-right .shadow-c3 { left: 60px !important; bottom: 20px !important; }
}

/* ── Desktop hover-lock: prevent jump on hover exit (spec 0,4,0) ── */
@media (min-width: 701px) {
  .split-hero.hover-left .slide-out-left .so-c1 { left: 60px !important; bottom: 20px !important; }
  .split-hero.hover-left .slide-out-left .so-c2 { left: 44px !important; bottom: 20px !important; }
  .split-hero.hover-left .slide-out-left .so-c3 { left: 28px !important; bottom: 20px !important; }
}

/* ── Mobile ≤700px: reverse so-c only (shadow already correct) ── */
@media (max-width: 700px) {
  .slide-out-left .so-c1 { left: clamp(18px, 5.4vw, 30px) !important; }
  .slide-out-left .so-c2 { left: clamp(9px, 2.7vw, 15px)  !important; }
  .slide-out-left .so-c3 { left: 0 !important; }
}

/* ── Mobile ≤420px ── */
@media (max-width: 420px) {
  .slide-out-left .so-c1 { left: clamp(16px, 5vw, 22px)   !important; }
  .slide-out-left .so-c2 { left: clamp(8px, 2.5vw, 11px)  !important; }
  .slide-out-left .so-c3 { left: 0 !important; }
}

/* ── Mobile ≤360px ── */
@media (max-width: 360px) {
  .slide-out-left .so-c1 { left: 14px !important; }
  .slide-out-left .so-c2 { left: 7px  !important; }
  .slide-out-left .so-c3 { left: 0    !important; }
}


/* ===== extracted style block 75 ===== */
@media (min-width: 701px) {
  /*
    FIX: Shadow Edition overlay and CTA are lower than Original Edition.

    Root cause:
      ggg-final-shadow-desktop-placement-match-original locked top: 40.8%
      while Original sits at top: 44.8% — a 4% vertical gap.
      It also set transform: none, killing the open/close translateY animation.
      ggg-shadow-cta-lowered-20px and ggg-shadow-cta-shift-left-20px were
      compensating hacks that are no longer needed.

    Fix:
      1. Match shadow overlay top to Original (44.8%).
      2. Restore translateY(10px)/translateY(0) animation.
      3. Zero out the stale CTA margin-top and left adjustments.
  */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    top: 44.8% !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Cancel the old compensating CTA hacks */
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    margin-top: 0 !important;
    position: static !important;
    left: auto !important;
  }
}


/* ===== extracted style block 76 ===== */
@media (min-width: 701px) {
  /*
    FIX: Floating card stacks too small at full-screen desktop.

    At ~1870×967 (fullscreen) cards are now 75% larger.
    clamp() scales proportionally with viewport width:
      min (≤1070px):    228×250px container, 138px card  (current)
      max (≥1870px):    399×437px container, 241px card  (+75%)

    vw coefficients @ 1870px reference:
      container width  399 / 1870 = 21.3vw
      container height 437 / 1870 = 23.4vw
      card width       241 / 1870 = 12.9vw
      margin-bottom   -60 / 1870 = -3.2vw
      fan positions scaled at same ×1.75 ratio
  */

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards,
  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    width:         clamp(228px, 21.3vw, 399px) !important;
    height:        clamp(250px, 23.4vw, 437px) !important;
    margin-bottom: clamp(-90px, -4.8vw, -51px) !important;
  }

  .slide-out-left .so-card,
  .split-hero.hover-left .slide-out-left .so-card,
  .slide-out-right .shadow-card,
  .split-hero.hover-right .slide-out-right .shadow-card {
    width: clamp(138px, 12.9vw, 241px) !important;
  }

  /* Original fans LEFT: c1=right, c3=left */
  .slide-out-left .so-c1 { left: clamp(60px, 5.62vw, 105px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
  .slide-out-left .so-c2 { left: clamp(44px, 4.12vw,  77px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
  .slide-out-left .so-c3 { left: clamp(28px, 2.62vw,  49px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }

  /* Hover-lock: same values, spec 0,4,0 */
  .split-hero.hover-left .slide-out-left .so-c1 { left: clamp(60px, 5.62vw, 105px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
  .split-hero.hover-left .slide-out-left .so-c2 { left: clamp(44px, 4.12vw,  77px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
  .split-hero.hover-left .slide-out-left .so-c3 { left: clamp(28px, 2.62vw,  49px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }

  /* Shadow fans RIGHT: c1=left, c3=right */
  .slide-out-right .shadow-c1 { left: clamp(28px, 2.62vw,  49px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
  .slide-out-right .shadow-c2 { left: clamp(44px, 4.12vw,  77px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
  .slide-out-right .shadow-c3 { left: clamp(60px, 5.62vw, 105px) !important; bottom: clamp(20px, 1.87vw, 35px) !important; }
}


/* ===== extracted style block 77 ===== */
@media (min-width: 701px) {
  /*
    FIX: CTA button cropped at panel edge.

    Approach: anchor each overlay to the panel's "text edge" directly.
      Original → right:0  (right edge = panel right = where art text ends)
      Shadow   → left:0   (left edge  = panel left  = where art text ends)
    No translateX needed. Open/close animation: translateY(10px → 0) only.

    Overlay width: clamp(360px, 26.5vw, 495px).
      26.5vw × 1870px = 495px, wide enough for the longest CTA text
      ("SHOP THE ORIGINAL EDITION →") at current font size without overflow.
      Both editions get identical width → card centering is symmetric:
        Original center = panel_right  − width/2
        Shadow center   = panel_left   + width/2   ← perfect mirror ✓

    CTA: width:100%; box-sizing:border-box; white-space:normal so text
    wraps within the button rather than overflowing.
  */

  /* ── Original Edition overlay ── */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay {
    right:     0% !important;
    left:      auto !important;
    width:     clamp(360px, 26.5vw, 495px) !important;
    min-width: clamp(360px, 26.5vw, 495px) !important;
    max-width: clamp(360px, 26.5vw, 495px) !important;
    align-items: center !important;
    transform: translateY(10px) !important;
  }

  .split-hero.hover-left .slide-out-left .so-overlay {
    transform: translateY(0) !important;
  }

  .slide-out-left .so-cards,
  .split-hero.hover-left .slide-out-left .so-cards {
    align-self: flex-end !important;
    margin-left:  auto !important;
    margin-right: -22px !important;
  }

  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta {
    width: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
    align-self: flex-end !important;
    margin-left:  auto !important;
    margin-right: 3% !important;
  }

  /* ── Shadow Edition overlay ── */
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    left:      0% !important;
    right:     auto !important;
    width:     clamp(360px, 26.5vw, 495px) !important;
    min-width: clamp(360px, 26.5vw, 495px) !important;
    max-width: clamp(360px, 26.5vw, 495px) !important;
    align-items: center !important;
    transform: translateY(10px) !important;
  }

  .split-hero.hover-right .slide-out-right .shadow-overlay {
    transform: translateY(0) !important;
  }

  .slide-out-right .shadow-cards,
  .split-hero.hover-right .slide-out-right .shadow-cards {
    align-self: flex-start !important;
    margin-left:  -22px !important;
    margin-right: auto !important;
  }

  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    width: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
    align-self: flex-start !important;
    margin-left:  3% !important;
    margin-right: auto !important;
  }
}


/* ===== extracted style block 78 ===== */
@media (min-width: 701px) {
  /* CTA buttons 69% larger than base (×1.3 × 1.3 = ×1.69). Only font-size and padding — no positioning. */
  .slide-out-left .so-cta,
  .split-hero.hover-left .slide-out-left .so-cta,
  .slide-out-right .shadow-cta,
  .split-hero.hover-right .slide-out-right .shadow-cta {
    font-size: 1.386rem !important;    /* 0.82rem × 1.3 × 1.3 */
    padding: 1.217rem 2.366rem !important; /* 0.72rem×1.69  1.4rem×1.69 */
  }
}


/* ===== extracted style block 79 ===== */
@media (min-width: 701px) {
  /*
    FIX: Visible gap on the inner edge of each slide-out panel.

    The slide-out panels are positioned relative to .split-hero (full viewport).
    On hover, the left grid column = calc(80% - 80px) ≈ 1416px at fullscreen,
    but the slide-out is constrained to min(82vw, art-aspect × vh) ≈ 1321px —
    leaving a ~95px strip where the .split-left/.split-right grid item background
    shows through.

    Fix: set the exposed grid item to #000 when its slide-out is open.
    The art edges are near-black so the fill is seamless.
  */
  .split-hero.hover-left  .split-left  { background: #000 !important; }
  .split-hero.hover-right .split-right { background: #000 !important; }
}


/* ===== extracted style block 80 ===== */
@media (min-width: 701px) {
  /*
    Vertical gaps — both editions desktop.
    Gap 1 (title art → cards): overlay top.
    Gap 2 (cards → CTA): overlay gap.
  */
  .slide-out-left .so-overlay,
  .split-hero.hover-left .slide-out-left .so-overlay,
  .slide-out-right .shadow-overlay,
  .split-hero.hover-right .slide-out-right .shadow-overlay {
    top: 40% !important;
    gap: 0.08rem !important;
  }
}


/* ===== extracted style block 81 ===== */
/* Base: visible, centered, applies everywhere */
  .so-edition-label,
  .shadow-edition-label {
    display: block !important;
    text-align: center !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(0.6rem, 1vw, 0.8rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.5) !important;
    margin-top: -1rem !important;
    margin-bottom: 0.8rem !important;
    padding: 0 !important;
    pointer-events: none !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: clamp(100px, 55vw, 220px) !important;
  }

  /* Desktop only: match card edge alignment */
  @media (min-width: 701px) {
    .slide-out-left .so-edition-label,
    .split-hero.hover-left .slide-out-left .so-edition-label {
      align-self: flex-end !important;
      margin-left: auto !important;
      margin-right: -22px !important;
      width: clamp(228px, 21.3vw, 399px) !important;
    }

    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      align-self: flex-start !important;
      margin-left: -22px !important;
      margin-right: auto !important;
      width: clamp(228px, 21.3vw, 399px) !important;
    }
  }

  /* Mobile: common fixes for both labels — width MUST match cards width.
     ACTUAL winning cards width rules:
       ≤700 (>420): line 5459 → clamp(84, 22.5vw, 128)
       ≤420: line 5521 → clamp(78, 24vw, 104)
     Match label width to these so label box aligns geometrically with cards. */
  @media (max-width: 700px) {
    .slide-out-left .so-edition-label,
    .split-hero.hover-left .slide-out-left .so-edition-label,
    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      width: clamp(84px, 22.5vw, 128px) !important;
      text-align: center !important;
      white-space: normal !important;
      margin-bottom: 0.5rem !important;
      margin-top: 0 !important;
    }

    /* Original: cards centered in overlay → label centered too. Original cards
       have transform translateX(clamp(10px, 2.2vw, 18px)) at line 5573.
       Keep Original label transform as before since user said it looks good. */
    .slide-out-left .so-edition-label,
    .split-hero.hover-left .slide-out-left .so-edition-label {
      align-self: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      transform: translateX(clamp(18px, 3.8vw, 26px)) !important;
    }

    /* Shadow: cards left-aligned. Match cards transform exactly so label box
       geometrically aligns with cards container box. Shadow cards transform
       at line 5578: clamp(12px, 2.8vw, 22px). */
    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      align-self: flex-start !important;
      margin-left: 0 !important;
      margin-right: auto !important;
      transform: translateX(clamp(12px, 2.8vw, 22px)) !important;
    }
  }

  /* Very small mobile (≤420px): both width and cards transform reduce. */
  @media (max-width: 420px) {
    .slide-out-left .so-edition-label,
    .split-hero.hover-left .slide-out-left .so-edition-label,
    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      width: clamp(78px, 24vw, 104px) !important;
    }
    .slide-out-left .so-edition-label,
    .split-hero.hover-left .slide-out-left .so-edition-label {
      transform: translateX(clamp(15px, 3.7vw, 20px)) !important;
    }
    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      transform: translateX(clamp(10px, 2.5vw, 18px)) !important;
    }
  }


/* ===== extracted style block 82 ===== */
/*
    Fix: on smaller mobile screens, the CTA buttons sit too close to (or past)
    the photo's bottom edge AND look too thin/short.

    Root cause discovered via debug overlay:
      1. At ≤500vw, the existing rule (line ~5634) sets CTA margin-bottom = 0,
         and margin-top: auto pins CTA to overlay bottom which sits ~11px from
         photo bottom — so only ~4-5px clearance.
      2. Earlier attempt with margin-bottom: 22.5px solved placement but caused
         flex-shrink to compress the CTA to H≈15px (very thin).

    Fix: smaller margin-bottom for clearance + larger vertical padding/font for
    chunkier buttons. Layout fits because added padding height roughly equals
    reduced margin-bottom, keeping CTA at the same vertical position with
    clearance unchanged but the button itself much taller.
  */
  @media (max-width: 700px) {
    .slide-out-left .so-cta,
    .split-hero.hover-left .slide-out-left .so-cta,
    .slide-out-right .shadow-cta,
    .split-hero.hover-right .slide-out-right .shadow-cta {
      margin-top: auto !important;
      /* Margin-bottom scales with viewport for more clearance on bigger mobiles */
      margin-bottom: clamp(6px, 1.8vw, 16px) !important;
      /* Padding/font scale more aggressively so buttons grow with viewport.
         Min ensures small mobile keeps the look user approved (CTA H ~20). */
      padding-top: clamp(0.62rem, 2.0vw, 1.0rem) !important;
      padding-bottom: clamp(0.62rem, 2.0vw, 1.0rem) !important;
      font-size: clamp(0.60rem, 1.8vw, 0.92rem) !important;
      line-height: 1.1 !important;
    }
  }

  /* Smaller mobile (≤500vw): shift CTA up to halve the auto gap from label,
     and scale up ~15% with edition-specific transform-origin so the button
     grows in the requested direction:
       - Original: anchored top-right → grows down and left
       - Shadow:   anchored top-left → grows down and right
     Scale is combined with translateY in a single transform property. */
  @media (max-width: 500px) {
    .slide-out-left .so-cta,
    .split-hero.hover-left .slide-out-left .so-cta {
      transform: translateY(clamp(-3px, -0.7vw, -2px)) scale(1.15) !important;
      transform-origin: top right !important;
    }
    .slide-out-right .shadow-cta,
    .split-hero.hover-right .slide-out-right .shadow-cta {
      transform: translateY(clamp(-3px, -0.7vw, -2px)) scale(1.15) !important;
      transform-origin: top left !important;
    }
  }


/* ===== extracted style block 83 ===== */
/*
    User request: at LARGER mobile viewports, make the floating cards bigger.
    Keep small mobile (≤500vw) unchanged. Maintain card-top to overlay-top gap.

    The existing card/container size clamps at line 5459/5466 cap at maxes that
    are reached around 560-570vw. Above that, cards stop growing even though
    the photo keeps getting bigger. Bump the MAX values:
      - card width:      94 → 122  (+30%)
      - card height:    136 → 175  (+29%)
      - container w:    128 → 156
      - container h:    152 → 191

    Smaller viewports (where the vw-scale value is below the new max) are
    completely unaffected — they keep using the same vw-scale value. The
    container_h - card_h offset stays at ~16px so card-top stays at same
    position relative to overlay top.
  */
  @media (max-width: 700px) {
    .slide-out-left .so-cards,
    .split-hero.hover-left .slide-out-left .so-cards,
    .slide-out-right .shadow-cards,
    .split-hero.hover-right .slide-out-right .shadow-cards {
      width: clamp(84px, 22.5vw, 156px) !important;
      height: clamp(102px, 27vw, 191px) !important;
    }

    .slide-out-left .so-card,
    .slide-out-right .shadow-card {
      width: clamp(62px, 16.8vw, 122px) !important;
      height: clamp(92px, 24.8vw, 175px) !important;
    }
  }


/* ===== extracted style block 84 ===== */
/*
    Final implementation of card size + position adjustments.

    SMALLER MOBILE (≤500vw): cards 10% bigger, growing symmetrically
      Cards container W: clamp(84,22.5vw,128) → clamp(92,24.8vw,128) [+8 to +12px]
      Cards container H: clamp(102,27vw,152) → clamp(112,29.7vw,152)
      Card W: scaled accordingly
      Card H: scaled accordingly

      For Shadow (left-aligned on mobile), apply negative margin-left equal to
      half the width growth so the bigger container grows symmetrically around
      its current visual center instead of extending only to the right.
      Same negative margin applied to the Shadow label so it stays aligned.
      Original is align-self:center, so growth is symmetric automatically.

    LARGER MOBILE (501-700vw): overlay top 40% → 39% (cards move up ~5px to
    sit just slightly above current position toward baked-in text).
  */

  /* Smaller mobile: bigger cards container */
  @media (max-width: 500px) {
    .slide-out-left .so-cards,
    .split-hero.hover-left .slide-out-left .so-cards,
    .slide-out-right .shadow-cards,
    .split-hero.hover-right .slide-out-right .shadow-cards {
      width: clamp(92px, 24.8vw, 128px) !important;
      height: clamp(112px, 29.7vw, 152px) !important;
    }

    /* Bigger individual cards */
    .slide-out-left .so-card,
    .slide-out-right .shadow-card {
      width: clamp(68px, 18.5vw, 94px) !important;
      height: clamp(101px, 27.3vw, 138px) !important;
    }

    /* Shadow grows symmetrically: shift left by half the width increase */
    .slide-out-right .shadow-cards,
    .split-hero.hover-right .slide-out-right .shadow-cards {
      margin-left: calc((clamp(84px, 22.5vw, 128px) - clamp(92px, 24.8vw, 128px)) / 2) !important;
    }

    /* Match label widths to new container width */
    .slide-out-left .so-edition-label,
    .split-hero.hover-left .slide-out-left .so-edition-label,
    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      width: clamp(92px, 24.8vw, 128px) !important;
    }

    /* Shadow label gets the same negative margin so it stays aligned with cards */
    .slide-out-right .shadow-edition-label,
    .split-hero.hover-right .slide-out-right .shadow-edition-label {
      margin-left: calc((clamp(84px, 22.5vw, 128px) - clamp(92px, 24.8vw, 128px)) / 2) !important;
    }
  }

  /* Smaller mobile: overlay top 40% → 37.5% */
  @media (max-width: 500px) {
    .slide-out-left .so-overlay,
    .split-hero.hover-left .slide-out-left .so-overlay,
    .slide-out-right .shadow-overlay,
    .split-hero.hover-right .slide-out-right .shadow-overlay {
      top: 37.5% !important;
    }
  }

  /* Larger mobile: overlay top 40% → 38% */
  @media (min-width: 501px) and (max-width: 700px) {
    .slide-out-left .so-overlay,
    .split-hero.hover-left .slide-out-left .so-overlay,
    .slide-out-right .shadow-overlay,
    .split-hero.hover-right .slide-out-right .shadow-overlay {
      top: 38% !important;
    }
  }


/* ===== extracted style block 85 ===== */
/*
    Match desktop's 7/11.5 card aspect ratio on mobile.

    Desktop (≥701px) uses width:138px + aspect-ratio:7/11.5 + height:auto
    → cards are properly tall (138 × 226.7) and the art shows uncropped.

    Mobile rules at lines 4836, 5126, 7597 set explicit height clamps that
    override the aspect-ratio behavior, making cards 0.67-0.70 ratio (too
    wide/short) and cropping the art differently than desktop.

    This block forces aspect-ratio:7/11.5 + height:auto across all mobile
    breakpoints, with higher source-order priority so it wins the cascade.
  */
  @media (max-width: 700px) {
    .slide-out-left .so-card,
    .split-hero.hover-left .slide-out-left .so-card,
    .slide-out-right .shadow-card,
    .split-hero.hover-right .slide-out-right .shadow-card,
    .so-card,
    .shadow-card {
      aspect-ratio: 7 / 11.5 !important;
      height: auto !important;
    }
  }


/* ===== extracted style block 86 ===== */
/*
    Final card animations:
    1. Idle float — each card gently bobs up/down at a different period/amplitude
       so the stack feels alive and the cards never sync up.
    2. Click rotation — front card arcs out, passes behind via translateZ(-70px),
       and lands as the new back card.

    Resting transforms (translate3d % values) are already set in
    `ggg-card-fan-direction-fix` (line 7082); these animations preserve those
    same values at frame 0/100 so the static look is unchanged.
  */

  /* Re-enable pointer events on stacks for clicks (was disabled in
     ggg-card-stack-static-art-css at line 5889) */
  .so-cards,
  .shadow-cards {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* ───────────────── IDLE FLOAT ───────────────── */
  /*
    Snap fix: these use 0s delay + both fill-mode. The previous positive
    delays still allowed a visible handoff gap after JS swapped the card
    role classes. Different durations keep the cards from feeling perfectly
    synchronized without reintroducing a delayed start state.
  */
  .so-c1 { animation: soFloat1 3s ease-in-out 0s infinite both !important; }
  .so-c2 { animation: soFloat2 3.5s ease-in-out 0s infinite both !important; }
  .so-c3 { animation: soFloat3 2.8s ease-in-out 0s infinite both !important; }
  .shadow-c1 { animation: shadowFloat1 3s ease-in-out 0s infinite both !important; }
  .shadow-c2 { animation: shadowFloat2 3.5s ease-in-out 0s infinite both !important; }
  .shadow-c3 { animation: shadowFloat3 2.8s ease-in-out 0s infinite both !important; }

  /* Original (mirrored — front fans LEFT) */
  @keyframes soFloat1 {
    0%, 100% { transform: translate3d(13%, 3%, -36px) rotateZ(10deg) scale(0.94); filter: brightness(0.72); }
    50%      { transform: translate3d(13%, calc(3% - 7px), -36px) rotateZ(10deg) scale(0.94); filter: brightness(0.72); }
  }
  @keyframes soFloat2 {
    0%, 100% { transform: translate3d(3%, 1%, -16px) rotateZ(3deg) scale(0.975); filter: brightness(0.86); }
    50%      { transform: translate3d(3%, calc(1% - 5px), -16px) rotateZ(3deg) scale(0.975); filter: brightness(0.86); }
  }
  @keyframes soFloat3 {
    0%, 100% { transform: translate3d(-8%, -1%, 0) rotateZ(-5deg) scale(1); filter: brightness(1); }
    50%      { transform: translate3d(-8%, calc(-1% - 9px), 0) rotateZ(-5deg) scale(1); filter: brightness(1); }
  }

  /* Shadow (front fans RIGHT) */
  @keyframes shadowFloat1 {
    0%, 100% { transform: translate3d(-13%, 3%, -36px) rotateZ(-10deg) scale(0.94); filter: brightness(0.72); }
    50%      { transform: translate3d(-13%, calc(3% - 7px), -36px) rotateZ(-10deg) scale(0.94); filter: brightness(0.72); }
  }
  @keyframes shadowFloat2 {
    0%, 100% { transform: translate3d(-3%, 1%, -16px) rotateZ(-3deg) scale(0.975); filter: brightness(0.86); }
    50%      { transform: translate3d(-3%, calc(1% - 5px), -16px) rotateZ(-3deg) scale(0.975); filter: brightness(0.86); }
  }
  @keyframes shadowFloat3 {
    0%, 100% { transform: translate3d(8%, -1%, 0) rotateZ(5deg) scale(1); filter: brightness(1); }
    50%      { transform: translate3d(8%, calc(-1% - 9px), 0) rotateZ(5deg) scale(1); filter: brightness(1); }
  }

  /* ───────────────── CLICK ROTATION ───────────────── */
  /* During rotation, the rotation animations override the float (later in
     source + !important wins). After 640ms the JS removes the rotation
     classes and the float resumes. */

  .ggg-card-behind { z-index: 0 !important; }

  .so-card.ggg-card-send-back.ggg-card-behind,
  .shadow-card.ggg-card-send-back.ggg-card-behind {
    z-index: 0 !important;
  }

  /* Shadow rotation (front arcs RIGHT) */
  .shadow-card.ggg-card-send-back {
    animation: gggCardToBack 620ms ease-in-out both !important;
    z-index: 9 !important;
  }
  .shadow-card.ggg-card-reveal-front {
    animation: gggCardToFront 620ms ease-in-out both !important;
    z-index: 8 !important;
  }
  .shadow-card.ggg-card-mid-shift {
    animation: gggCardToMiddle 620ms ease-in-out both !important;
    z-index: 4 !important;
  }

  @keyframes gggDeckShift {
    0%   { transform: translate(0, 0); }
    45%  { transform: translate(-50px, -8px); }
    100% { transform: translate(0, 0); }
  }
  @keyframes gggCardToBack {
    0%   { transform: translate3d(8%, -1%, 0) rotateZ(5deg) scale(1); filter: brightness(1); }
    36%  { transform: translate3d(165%, -20%, 18px) rotateZ(22deg) scale(1.04); filter: brightness(1.12); }
    64%  { transform: translate3d(-24%, -10%, -70px) rotateZ(-13deg) scale(0.87); filter: brightness(0.62); }
    100% { transform: translate3d(-13%, 3%, -36px) rotateZ(-10deg) scale(0.94); filter: brightness(0.72); }
  }
  @keyframes gggCardToFront {
    0%   { transform: translate3d(-3%, 1%, -16px) rotateZ(-3deg) scale(0.975); filter: brightness(0.86); }
    100% { transform: translate3d(8%, -1%, 0) rotateZ(5deg) scale(1); filter: brightness(1); }
  }
  @keyframes gggCardToMiddle {
    0%   { transform: translate3d(-13%, 3%, -36px) rotateZ(-10deg) scale(0.94); filter: brightness(0.72); }
    100% { transform: translate3d(-3%, 1%, -16px) rotateZ(-3deg) scale(0.975); filter: brightness(0.86); }
  }

  /* Original rotation (front arcs LEFT — mirrored) */

  .so-card.ggg-card-send-back {
    animation: soCardToBack 620ms ease-in-out both !important;
    z-index: 9 !important;
  }
  .so-card.ggg-card-reveal-front {
    animation: soCardToFront 620ms ease-in-out both !important;
    z-index: 8 !important;
  }
  .so-card.ggg-card-mid-shift {
    animation: soCardToMiddle 620ms ease-in-out both !important;
    z-index: 4 !important;
  }

  @keyframes soDeckShift {
    0%   { transform: translate(0, 0); }
    45%  { transform: translate(50px, -8px); }
    100% { transform: translate(0, 0); }
  }
  @keyframes soCardToBack {
    0%   { transform: translate3d(-8%, -1%, 0) rotateZ(-5deg) scale(1); filter: brightness(1); }
    36%  { transform: translate3d(-165%, -20%, 18px) rotateZ(-22deg) scale(1.04); filter: brightness(1.12); }
    64%  { transform: translate3d(24%, -10%, -70px) rotateZ(13deg) scale(0.87); filter: brightness(0.62); }
    100% { transform: translate3d(13%, 3%, -36px) rotateZ(10deg) scale(0.94); filter: brightness(0.72); }
  }
  @keyframes soCardToFront {
    0%   { transform: translate3d(3%, 1%, -16px) rotateZ(3deg) scale(0.975); filter: brightness(0.86); }
    100% { transform: translate3d(-8%, -1%, 0) rotateZ(-5deg) scale(1); filter: brightness(1); }
  }
  @keyframes soCardToMiddle {
    0%   { transform: translate3d(13%, 3%, -36px) rotateZ(10deg) scale(0.94); filter: brightness(0.72); }
    100% { transform: translate3d(3%, 1%, -16px) rotateZ(3deg) scale(0.975); filter: brightness(0.86); }
  }

  /* Focus ring for keyboard users */
  .so-cards:focus-visible,
  .shadow-cards:focus-visible {
    outline: 2px solid var(--orange, #E8841C) !important;
    outline-offset: 6px !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .so-c1, .so-c2, .so-c3,
    .shadow-c1, .shadow-c2, .shadow-c3,
    .ggg-card-send-back,
    .ggg-card-reveal-front,
    .ggg-card-mid-shift {
      animation: none !important;
    }
  }


/* ===== extracted style block 87 ===== */
/*
  Endpoint alignment fix:
  The physical card slots stay fixed while only their contents rotate.
  These keyframes use --ggg-end-x and --ggg-end-y, set by JS at click time,
  to compensate for the different left/bottom positions of c1/c2/c3 so each
  moving slot lands on the exact screen position of the slot that receives
  its content.
*/

/* Original rotation endpoint alignment */
@keyframes soCardToBack {
  0%   { transform: translate3d(-8%, -1%, 0) rotateZ(-5deg) scale(1); filter: brightness(1); }
  36%  { transform: translate3d(-165%, -20%, 18px) rotateZ(-22deg) scale(1.04); filter: brightness(1.12); }
  64%  { transform: translate3d(24%, -10%, -70px) rotateZ(13deg) scale(0.87); filter: brightness(0.62); }
  100% { transform: translate3d(calc(13% + var(--ggg-end-x, 0px)), calc(3% + var(--ggg-end-y, 0px)), -36px) rotateZ(10deg) scale(0.94); filter: brightness(0.72); }
}

@keyframes soCardToFront {
  0%   { transform: translate3d(3%, 1%, -16px) rotateZ(3deg) scale(0.975); filter: brightness(0.86); }
  100% { transform: translate3d(calc(-8% + var(--ggg-end-x, 0px)), calc(-1% + var(--ggg-end-y, 0px)), 0) rotateZ(-5deg) scale(1); filter: brightness(1); }
}

@keyframes soCardToMiddle {
  0%   { transform: translate3d(13%, 3%, -36px) rotateZ(10deg) scale(0.94); filter: brightness(0.72); }
  100% { transform: translate3d(calc(3% + var(--ggg-end-x, 0px)), calc(1% + var(--ggg-end-y, 0px)), -16px) rotateZ(3deg) scale(0.975); filter: brightness(0.86); }
}

/* Shadow rotation endpoint alignment */
@keyframes gggCardToBack {
  0%   { transform: translate3d(8%, -1%, 0) rotateZ(5deg) scale(1); filter: brightness(1); }
  36%  { transform: translate3d(165%, -20%, 18px) rotateZ(22deg) scale(1.04); filter: brightness(1.12); }
  64%  { transform: translate3d(-24%, -10%, -70px) rotateZ(-13deg) scale(0.87); filter: brightness(0.62); }
  100% { transform: translate3d(calc(-13% + var(--ggg-end-x, 0px)), calc(3% + var(--ggg-end-y, 0px)), -36px) rotateZ(-10deg) scale(0.94); filter: brightness(0.72); }
}

@keyframes gggCardToFront {
  0%   { transform: translate3d(-3%, 1%, -16px) rotateZ(-3deg) scale(0.975); filter: brightness(0.86); }
  100% { transform: translate3d(calc(8% + var(--ggg-end-x, 0px)), calc(-1% + var(--ggg-end-y, 0px)), 0) rotateZ(5deg) scale(1); filter: brightness(1); }
}

@keyframes gggCardToMiddle {
  0%   { transform: translate3d(-13%, 3%, -36px) rotateZ(-10deg) scale(0.94); filter: brightness(0.72); }
  100% { transform: translate3d(calc(-3% + var(--ggg-end-x, 0px)), calc(1% + var(--ggg-end-y, 0px)), -16px) rotateZ(-3deg) scale(0.975); filter: brightness(0.86); }
}


/* ===== extracted style block 88 ===== */
.so-cards,
.shadow-cards {
  position: relative !important;
  z-index: 10 !important;
}


/* ===== extracted style block 89 ===== */
@media (max-width: 700px) {
  .so-overlay,
  .shadow-overlay,
  .so-cards,
  .shadow-cards,
  .so-card,
  .shadow-card,
  .so-cta,
  .shadow-cta {
    pointer-events: auto !important;
  }
}


/* ===== extracted style block 90 ===== */
/* Make individual cards receive clicks so they bubble up to
   the .so-cards click handler that triggers rotation.
   The .so-cards container itself can stay pointer-events:none —
   events from pointer-enabled children DO bubble through it. */
.slide-out-left .so-card,
.slide-out-right .shadow-card {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* ===== extracted style block 91 ===== */
/* The slide-out-link has no href and serves no navigation purpose.
   Disable its pointer events so clicks reach the cards and CTA beneath it. */
.slide-out-link {
  pointer-events: none !important;
}


/* ===== extracted style block 92 ===== */
@media (max-width: 280px) {
  .so-overlay,
  .shadow-overlay {
    top: 35% !important;
    bottom: 4% !important;
    width: 36% !important;
    max-width: 36% !important;
  }

  .so-cards,
  .shadow-cards {
    width: clamp(52px, 20vw, 68px) !important;
    height: auto !important;
    margin-bottom: 0.15rem !important;
    flex: 0 0 auto !important;
  }

  .so-card,
  .shadow-card {
    width: clamp(38px, 14.5vw, 50px) !important;
    aspect-ratio: 7 / 11.5 !important;
    height: auto !important;
  }

  .so-c2, .shadow-c2 { left: 5px !important; }
  .so-c3, .shadow-c3 { left: 10px !important; }

  .so-edition-label,
  .shadow-edition-label {
    font-size: 0.28rem !important;
    margin-bottom: 0.2rem !important;
    width: 100% !important;
  }

  .so-cta,
  .shadow-cta {
    font-size: 0.38rem !important;
    padding: 0.38rem 0.48rem !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.1 !important;
    margin-bottom: clamp(4px, 1.5vw, 8px) !important;
  }
}


/* ===== extracted style block 93 ===== */
.cant-decide-bar {
  width: 100% !important;
  background: #0a0710 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1.15rem 1.25rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.cant-decide-bar::before,
.cant-decide-bar::after {
  content: '' !important;
  display: block !important;
}
.cant-decide-text {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  color: #F2EEE8 !important;
  text-align: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 2 !important;
}
.cant-decide-text em {
  font-style: normal !important;
  color: #C89B3C !important;
}
@media (min-width: 701px) {
  .cant-decide-bar {
    background: rgba(8, 6, 14, 0.97) !important;
    padding: 1rem 0.5rem !important;
  }
  .cant-decide-text {
    font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 480px) {
  .cant-decide-text { font-size: 0.88rem !important; }
}
@media (max-width: 380px) {
  .cant-decide-text { font-size: 0.8rem !important; }
}


/* ===== extracted style block 94 ===== */
@media (max-width: 700px) {
  .so-edition-label,
  .shadow-edition-label,
  .so-cta,
  .shadow-cta {
    position: relative !important;
    z-index: 20 !important;
  }
}


/* ===== extracted style block 95 ===== */
@media (max-width: 700px) {
  /* ── Nuclear background reset on overlays ──
     Every selector that could ever set a background on these overlays,
     overridden with max specificity so nothing dark bleeds through */
  .so-overlay,
  .shadow-overlay,
  .slide-out-left .so-overlay,
  .slide-out-right .shadow-overlay,
  .split-hero .slide-out-left .so-overlay,
  .split-hero .slide-out-right .shadow-overlay {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
  }
 
  /* ── Drastically reduce card box-shadows on mobile ──
     The current shadow is 0 10px 30px rgba(0,0,0,0.82) — enormous
     relative to the small card size and darkens the entire label/CTA zone */
  .so-card,
  .shadow-card {
    box-shadow: 0 3px 8px rgba(0,0,0,0.45) !important;
  }
 
  /* ── Isolate card stacking context ── */
  .so-cards,
  .shadow-cards {
    isolation: isolate !important;
  }
 
  /* ── Make label text clearly readable ── */
  .so-edition-label,
  .shadow-edition-label {
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95) !important;
    position: relative !important;
    z-index: 20 !important;
  }
}


/* ===== extracted style block 96 ===== */
@media (min-width: 1001px) {

  /* ── Breathing room ── */
  .ultimate-section .ult-right {
    padding-top: clamp(1.8rem, 2.4vw, 3rem) !important;
    align-self: start !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Hook line ── */
  .ultimate-section .ult-hook-row {
    margin-bottom: 0.6rem !important;
  }
  .ultimate-section .ult-hook {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1.4rem, 1.8vw, 2.1rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.0 !important;
    color: var(--white) !important;
    margin: 0 !important;
  }
  .ultimate-section .ult-hook em {
    color: var(--orange) !important;
    font-style: normal !important;
  }

  /* ── Price + rating row ── */
  .ultimate-section .ult-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.75rem !important;
    gap: 1rem !important;
  }
  .ultimate-section .ult-meta-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
  }
  .ultimate-section .ult-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
  }
  .ultimate-section .ult-price-now {
    font-size: 1.75rem !important;
    line-height: 1 !important;
  }
  .ultimate-section .ult-price-was { font-size: 0.82rem !important; }
  .ultimate-section .ult-bestseller {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.6rem !important;
  }
  .ultimate-section .stars-line {
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
  }
  .ultimate-section .stars { font-size: 1rem !important; }
  .ultimate-section .stars-val {
    font-size: 1rem !important;
    font-weight: 800 !important;
  }
  .ultimate-section .stars-ct { font-size: 0.78rem !important; }

  /* ── Grid label ── */
  .ultimate-section .ult-grid-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.25rem !important;
  }

  /* ── Layout ── */
  .ultimate-section .ultimate-inner { align-items: start !important; }
  .ultimate-section .ult-left,
  .ultimate-section .ult-left.reveal { align-self: start !important; }
  #ult-right-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #ult-grid-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  .ultimate-section .ult-item-grid {
    flex: 1 !important;
    min-height: 0 !important;
    grid-template-rows: repeat(3, auto) !important;
    align-content: space-between !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
  }

  /* ── Cards ── */
  .ultimate-section .ult-item-card {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .ultimate-section .ult-item-thumb {
    width: var(--ult-thumb-size, 60px) !important;
    min-width: var(--ult-thumb-size, 60px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    border-bottom: none !important;
    border-right: 1px solid var(--border) !important;
    font-size: clamp(0.85rem, 1.4vw, 1.35rem) !important;
    flex-shrink: 0 !important;
  }
  .ultimate-section .ult-item-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 4px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  .ultimate-section .ult-item-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(0.52rem, 0.57vw, 0.67rem) !important;
    line-height: 1.2 !important;
  }
  .ultimate-section .ult-item-meta { margin-top: 0 !important; }
  .ultimate-section .ult-item-val,
  .ultimate-section .ult-item-incl {
    font-size: clamp(0.48rem, 0.52vw, 0.60rem) !important;
  }

  /* ── CTA button ── */
  .ultimate-section .add-btn {
    flex-shrink: 0 !important;
    margin-top: 0.35rem !important;
    padding: 1.02rem !important;
    font-size: 1.32rem !important;
  }
}


/* ===== extracted style block 97 ===== */
@media (min-width: 1001px) {
  /* Vertical card: thumb on top, text below */
  .ultimate-section .ult-item-card {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Thumbnail: full width, NO aspect ratio — fills remaining height after text */
  .ultimate-section .ult-item-thumb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: clamp(0.85rem, 1.4vw, 1.35rem) !important;
  }

  /* Text panel: takes only what it needs, pinned to bottom */
  .ultimate-section .ult-item-info {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 6px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  /* Allow item name to wrap to 2 lines */
  .ultimate-section .ult-item-name {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .ultimate-section .ult-item-meta {
    margin-top: 2px !important;
  }
}


@media (min-width: 1001px) {
  /* Restore vertical layout: thumbnail on top, text below */
  .ultimate-section .ult-item-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Thumbnail: full width, square aspect ratio */
  .ultimate-section .ult-item-thumb {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }

  /* Text panel: below the thumbnail, fills remaining space */
  .ultimate-section .ult-item-info {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 3px !important;
  }

  /* Item name wraps to 2 lines instead of getting cut off */
  .ultimate-section .ult-item-name {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }

  /* Meta row pinned to bottom of text panel */
  .ultimate-section .ult-item-meta {
    margin-top: auto !important;
  }
}


/* ===== extracted style block 98 ===== */
@media (min-width: 1001px) {
  /*
    Two-column detail panel:
    Left 56%  → carousel (square) + category/name/desc/footer stacked
    Right 44% → mini grid filling full height beside the left column
  */

  /* Panel: CSS grid instead of flex column */
  .ult-detail-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
    grid-template-rows: auto auto auto auto auto 1fr !important;
    overflow: hidden !important;
  }
  /*
    Row 1 = top bar (full width)
    Row 2 = square carousel  |  mini grid starts
    Row 3 = d-cat            |  mini grid continues
    Row 4 = d-name           |  mini grid continues
    Row 5 = d-desc           |  mini grid continues
    Row 6 = d-footer (1fr)   |  mini grid ends
  */

  /* Row 1: top bar spans full width */
  .ult-detail-top {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* Row 2, col 1: square carousel */
  .ult-carousel-outer {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0.6rem 0 0 1.1rem !important;
    align-self: start !important;
    /* Override old flex-shrink */
    flex-shrink: unset !important;
  }

  /* Square slides — 1:1 aspect ratio */
  .ult-carousel-slide {
    aspect-ratio: 1 / 1 !important;
    min-width: 100% !important;
  }

  /*
    Remove the detail body from the grid flow —
    its children now participate directly in the panel grid
  */
  .ult-detail-body {
    display: contents !important;
  }

  /* Rows 3-6, col 1: text elements */
  #ult-d-cat {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 0.55rem 0.8rem 0 1.1rem !important;
    align-self: end !important;
  }
  #ult-d-name {
    grid-column: 1 !important;
    grid-row: 4 !important;
    padding: 0.05rem 0.8rem 0.25rem 1.1rem !important;
  }
  #ult-d-desc {
    grid-column: 1 !important;
    grid-row: 5 !important;
    padding: 0 0.8rem 0 1.1rem !important;
    overflow-y: auto !important;
    align-self: start !important;
    max-height: 4.5rem !important; /* cap long descriptions */
  }
  .ult-d-footer {
    grid-column: 1 !important;
    grid-row: 6 !important;
    padding: 0.55rem 0.8rem 0.8rem 1.1rem !important;
    border-top: 1px solid var(--border) !important;
    align-self: end !important;
    margin: 0 !important;
  }

  /* Rows 2–end, col 2: mini grid — full height right column */
  .ult-mini-grid-wrap {
    grid-column: 2 !important;
    grid-row: 2 / -1 !important;
    border-top: none !important;
    border-left: 1px solid var(--border) !important;
    margin: 0 !important;
    padding: 0.7rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ult-mini-grid-label {
    flex-shrink: 0 !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 0.5rem !important;
  }

  /* Mini grid: 3×3, 3 equal rows filling all height */
  .ult-mini-grid {
    flex: 1 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(4, auto) !important;
    align-content: space-between !important;
    gap: 0.3rem !important;
    align-content: stretch !important;
  }

  /* Cell: centered content, fills its row */
  .ult-mini-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.22rem !important;
    padding: 0.3rem 0.2rem !important;
    overflow: hidden !important;
  }

  /* Square thumb — explicit equal width + height */
  .ult-mini-thumb {
    width:      clamp(30px, 3.0vw, 54px) !important;
    height:     clamp(30px, 3.0vw, 54px) !important;
    min-width:  clamp(30px, 3.0vw, 54px) !important;
    min-height: clamp(30px, 3.0vw, 54px) !important;
    max-width:  clamp(30px, 3.0vw, 54px) !important;
    max-height: clamp(30px, 3.0vw, 54px) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.85rem, 1.5vw, 1.2rem) !important;
  }

  .ult-mini-name {
    font-size: clamp(0.38rem, 0.42vw, 0.50rem) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
}

/* ── Mobile: keep flex column, mini grid fills bottom space ── */
@media (max-width: 1000px) {
  .ult-detail-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .ult-d-cat, .ult-d-name, .ult-d-desc, .ult-d-footer { flex-shrink: 0 !important; }

  .ult-mini-grid-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 140px !important;
    overflow: hidden !important;
    margin-top: 0.4rem !important;
    padding-top: 0.4rem !important;
    border-top: 1px solid var(--border) !important;
  }
  .ult-mini-grid {
    flex: 1 !important;
    min-height: 0 !important;
    grid-template-rows: repeat(4, 1fr) !important;
    align-content: stretch !important;
    gap: 0.25rem !important;
  }
  .ult-mini-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    overflow: hidden !important;
  }
  .ult-mini-thumb {
    width:      clamp(28px, 4.5vw, 46px) !important;
    height:     clamp(28px, 4.5vw, 46px) !important;
    min-width:  clamp(28px, 4.5vw, 46px) !important;
    min-height: clamp(28px, 4.5vw, 46px) !important;
    max-width:  clamp(28px, 4.5vw, 46px) !important;
    max-height: clamp(28px, 4.5vw, 46px) !important;
    font-size: clamp(0.7rem, 1.4vw, 1.0rem) !important;
    flex-shrink: 0 !important;
  }
  .ult-mini-name {
    font-size: clamp(0.36rem, 0.9vw, 0.44rem) !important;
    line-height: 1.15 !important;
  }
  .ult-carousel-slide {
    aspect-ratio: 1 / 1 !important;
  }
  .ult-discount-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green); color: #111;
  padding: 0.22rem 0.68rem; border-radius: 4px;
  align-self: center; white-space: nowrap;
}
}


/* ===== extracted style block 99 ===== */
@media (min-width: 1001px) {
  /* Rows size to content — square thumb + text label both fit */
  .ultimate-section .ult-item-grid {
    grid-template-rows: repeat(3, auto) !important;
    align-content: start !important;
  }

  /* Card: column stack, height determined by content */
  .ultimate-section .ult-item-card {
    flex-direction: column !important;
    height: auto !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Thumb: square, fixed by aspect-ratio, does NOT grow or shrink */
  .ultimate-section .ult-item-thumb {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Info: natural text height, always rendered below the thumb */
  .ultimate-section .ult-item-info {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 5px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  /* Ensure name and meta stay visible */
  .ultimate-section .ult-item-name {
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  .ultimate-section .ult-item-meta {
    margin-top: auto !important;
  }
}


/* ===== extracted style block 100 ===== */
@media (max-width: 1000px) {
  /* Only while the selected-item detail overlay is open, give the module
     enough height for the two-column detail layout. The closed main menu
     keeps the existing compact dashboard height and styling. */
  html body .ultimate-section #ult-right-panel.ult-mobile-detail-open,
  html body #ult-right-panel.ult-right.ult-mobile-detail-open {
    height: clamp(390px, 68vh, 560px) !important;
    min-height: clamp(390px, 68vh, 560px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Detail overlay: top bar full width, image left, text right, bottom rail. */
  html body .ultimate-section #ult-detail-panel.ult-detail-panel,
  html body #ult-detail-panel.ult-detail-panel {
    position: absolute !important;
    inset: 0 !important;
    z-index: 30 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #1c1c1c !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.42) !important;

    display: grid !important;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
    column-gap: clamp(0.55rem, 2.2vw, 0.9rem) !important;
    row-gap: 0 !important;
  }

  html body .ultimate-section #ult-detail-panel.ult-detail-panel.open,
  html body #ult-detail-panel.ult-detail-panel.open {
    transform: translateY(0) !important;
  }

  /* Top row: back button + selected item title. */
  html body .ultimate-section #ult-detail-panel .ult-detail-top,
  html body #ult-detail-panel .ult-detail-top {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.45rem, 2vw, 0.75rem) !important;
    min-height: 0 !important;
    padding: clamp(0.52rem, 2.2vw, 0.78rem) clamp(0.62rem, 2.8vw, 1rem) clamp(0.36rem, 1.6vw, 0.55rem) !important;
    border-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-back-btn,
  html body #ult-detail-panel .ult-back-btn {
    flex: 0 0 auto !important;
    padding: clamp(0.3rem, 1.25vw, 0.42rem) clamp(0.65rem, 2.7vw, 0.95rem) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(14,14,14,0.45) !important;
    color: var(--muted) !important;
    font-size: clamp(0.58rem, 2.25vw, 0.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-detail-header-name,
  html body #ult-detail-panel .ult-detail-header-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: var(--white) !important;
    font-size: clamp(0.72rem, 3vw, 1rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.065em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Let the individual detail children participate in the parent grid so
     the thumbnail rail can span the entire bottom. */
  html body .ultimate-section #ult-detail-panel .ult-detail-body,
  html body #ult-detail-panel .ult-detail-body {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Product images: smaller, left-positioned, and vertically aligned with
     the text block instead of dominating the whole overlay. */
  html body .ultimate-section #ult-detail-panel .ult-carousel-outer,
  html body #ult-detail-panel .ult-carousel-outer {
    grid-column: 1 !important;
    grid-row: 2 / 6 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 0 clamp(0.42rem, 1.7vw, 0.65rem) clamp(0.62rem, 2.8vw, 1rem) !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    background: #171020 !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2) !important;
    user-select: none !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-carousel-track,
  html body #ult-detail-panel .ult-carousel-track {
    height: 100% !important;
    min-height: 0 !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-carousel-slide,
  html body #ult-detail-panel .ult-carousel-slide {
    min-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-carousel-slide > span:first-child,
  html body #ult-detail-panel .ult-carousel-slide > span:first-child {
    font-size: clamp(1.45rem, 8vw, 2.7rem) !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-carousel-slide > span:last-child,
  html body #ult-detail-panel .ult-carousel-slide > span:last-child {
    font-size: clamp(0.42rem, 1.65vw, 0.58rem) !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-c-arr,
  html body #ult-detail-panel .ult-c-arr {
    width: clamp(23px, 6.2vw, 30px) !important;
    height: clamp(23px, 6.2vw, 30px) !important;
    font-size: clamp(14px, 4.2vw, 18px) !important;
    background: rgba(12,12,14,0.76) !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-c-arr-l,
  html body #ult-detail-panel .ult-c-arr-l { left: clamp(5px, 1.8vw, 8px) !important; }
  html body .ultimate-section #ult-detail-panel .ult-c-arr-r,
  html body #ult-detail-panel .ult-c-arr-r { right: clamp(5px, 1.8vw, 8px) !important; }

  html body .ultimate-section #ult-detail-panel .ult-c-dots,
  html body #ult-detail-panel .ult-c-dots {
    bottom: clamp(4px, 1.4vw, 7px) !important;
  }

  /* Product details on the right. */
  html body .ultimate-section #ult-detail-panel .ult-d-cat,
  html body #ult-detail-panel .ult-d-cat {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 clamp(0.62rem, 2.8vw, 1rem) clamp(0.18rem, 0.9vw, 0.28rem) 0 !important;
    color: var(--orange) !important;
    font-size: clamp(0.52rem, 2.15vw, 0.7rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.18em !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-name,
  html body #ult-detail-panel .ult-d-name {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    margin: 0 clamp(0.62rem, 2.8vw, 1rem) clamp(0.34rem, 1.25vw, 0.5rem) 0 !important;
    color: var(--white) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.18rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-desc,
  html body #ult-detail-panel .ult-d-desc {
    grid-column: 2 !important;
    grid-row: 4 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 clamp(0.62rem, 2.8vw, 1rem) clamp(0.45rem, 1.55vw, 0.65rem) 0 !important;
    color: var(--muted) !important;
    font-size: clamp(0.66rem, 2.75vw, 0.88rem) !important;
    font-style: italic !important;
    line-height: 1.45 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-footer,
  html body #ult-detail-panel .ult-d-footer {
    grid-column: 2 !important;
    grid-row: 5 !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 clamp(0.62rem, 2.8vw, 1rem) clamp(0.42rem, 1.7vw, 0.65rem) 0 !important;
    padding: clamp(0.42rem, 1.5vw, 0.58rem) 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(0.45rem, 2vw, 0.75rem) !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-footer p,
  html body #ult-detail-panel .ult-d-footer p {
    line-height: 1.05 !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-footer p:first-child,
  html body #ult-detail-panel .ult-d-footer p:first-child {
    font-size: clamp(0.48rem, 1.95vw, 0.62rem) !important;
  }

  html body .ultimate-section #ult-detail-panel #ult-d-price,
  html body #ult-detail-panel #ult-d-price {
    font-size: clamp(0.66rem, 2.65vw, 0.88rem) !important;
    white-space: nowrap !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-footer > div:last-child p:first-child,
  html body #ult-detail-panel .ult-d-footer > div:last-child p:first-child {
    font-size: clamp(0.48rem, 1.95vw, 0.62rem) !important;
    white-space: nowrap !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-footer > div:last-child p:last-child,
  html body #ult-detail-panel .ult-d-footer > div:last-child p:last-child {
    font-size: clamp(0.68rem, 2.85vw, 0.94rem) !important;
    white-space: nowrap !important;
  }

  /* Bottom all-items rail: full-width, horizontal, and always visible. */
  html body .ultimate-section #ult-detail-panel .ult-mini-grid-wrap,
  html body #ult-detail-panel .ult-mini-grid-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 clamp(0.62rem, 2.8vw, 1rem) clamp(0.52rem, 2.1vw, 0.85rem) !important;
    padding: clamp(0.46rem, 1.65vw, 0.62rem) 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.09) !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-grid-label,
  html body #ult-detail-panel .ult-mini-grid-label {
    display: block !important;
    margin: 0 0 clamp(0.36rem, 1.35vw, 0.52rem) !important;
    color: var(--dim) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(0.52rem, 2.1vw, 0.68rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-grid,
  html body #ult-detail-panel .ult-mini-grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: clamp(0.4rem, 1.55vw, 0.62rem) !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    margin: 0 calc(clamp(0.62rem, 2.8vw, 1rem) * -1) !important;
    padding: 0 clamp(0.62rem, 2.8vw, 1rem) 0.1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-left: clamp(0.62rem, 2.8vw, 1rem) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 34px), rgba(0,0,0,0.14) 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 34px), rgba(0,0,0,0.14) 100%) !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-grid::-webkit-scrollbar,
  html body #ult-detail-panel .ult-mini-grid::-webkit-scrollbar {
    display: none !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-cell,
  html body #ult-detail-panel .ult-mini-cell {
    flex: 0 0 clamp(44px, 12.5vw, 58px) !important;
    width: clamp(44px, 12.5vw, 58px) !important;
    min-width: clamp(44px, 12.5vw, 58px) !important;
    max-width: clamp(44px, 12.5vw, 58px) !important;
    height: clamp(44px, 12.5vw, 58px) !important;
    min-height: clamp(44px, 12.5vw, 58px) !important;
    max-height: clamp(44px, 12.5vw, 58px) !important;
    padding: 2px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(12,12,12,0.7) !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    display: block !important;
    cursor: pointer !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-cell.active,
  html body #ult-detail-panel .ult-mini-cell.active {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 1px rgba(232,132,28,0.22) !important;
    background: rgba(232,132,28,0.08) !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-thumb,
  html body #ult-detail-panel .ult-mini-thumb {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.82rem, 3.9vw, 1.22rem) !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-mini-name,
  html body #ult-detail-panel .ult-mini-name {
    display: none !important;
  }
}

@media (max-width: 430px) {
  html body .ultimate-section #ult-right-panel.ult-mobile-detail-open,
  html body #ult-right-panel.ult-right.ult-mobile-detail-open {
    height: clamp(370px, 66vh, 510px) !important;
    min-height: clamp(370px, 66vh, 510px) !important;
  }

  html body .ultimate-section #ult-detail-panel.ult-detail-panel,
  html body #ult-detail-panel.ult-detail-panel {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
    column-gap: 0.48rem !important;
  }

  html body .ultimate-section #ult-detail-panel .ult-d-desc,
  html body #ult-detail-panel .ult-d-desc {
    -webkit-line-clamp: 4 !important;
  }
}


/* ===== extracted style block 101 ===== */
@media (max-width: 1000px) {
  /* Let the right-side detail stack use the square-image row cleanly without
     clipping the description or the included value. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack {
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  /* Full description: no ellipsis, no webkit line clamp, no hidden overflow. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body .ultimate-section #ult-detail-panel.open .ult-d-desc,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-desc {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    max-height: none !important;
    margin: 0 !important;
    font-size: clamp(0.58rem, 2.35vw, 0.78rem) !important;
    line-height: 1.34 !important;
  }

  /* Mobile footer becomes a compact vertical value stack:
     RETAIL VALUE / crossed-out price / INCLUDED. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-footer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-footer,
  html body .ultimate-section #ult-detail-panel.open .ult-d-footer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: clamp(0.42rem, 1.4vw, 0.58rem) 0 0 !important;
    padding: clamp(0.34rem, 1.15vw, 0.48rem) 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    overflow: visible !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-footer > div,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer > div {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-footer p,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer p {
    line-height: 1.05 !important;
    text-align: left !important;
  }

  /* Keep RETAIL VALUE, but make it compact. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-footer > div:first-child p:first-child,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer > div:first-child p:first-child {
    display: block !important;
    margin: 0 0 0.08rem !important;
    font-size: clamp(0.44rem, 1.65vw, 0.56rem) !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

  html body .ultimate-section #ult-detail-panel.open #ult-d-price,
  html body #ult-detail-panel.ult-detail-panel.open #ult-d-price {
    display: block !important;
    margin: 0 !important;
    font-size: clamp(0.58rem, 2.15vw, 0.76rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  /* Remove only the mobile "IN THIS BUNDLE" label. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-footer > div:last-child p:first-child,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer > div:last-child p:first-child {
    display: none !important;
  }

  /* Place INCLUDED below the crossed-out price, aligned left. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-footer > div:last-child p:last-child,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer > div:last-child p:last-child {
    display: block !important;
    margin: 0.12rem 0 0 !important;
    color: var(--green) !important;
    font-size: clamp(0.66rem, 2.45vw, 0.86rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
}

@media (max-width: 430px) {
  /* Extra breathing room on narrow phones while preserving the 66/34 split
     and the bottom rail position. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-cat,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-cat {
    font-size: clamp(0.46rem, 2vw, 0.58rem) !important;
    line-height: 1.02 !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-name,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-name {
    font-size: clamp(0.68rem, 3.15vw, 0.96rem) !important;
    line-height: 1.03 !important;
    margin-bottom: clamp(0.24rem, 1vw, 0.38rem) !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body .ultimate-section #ult-detail-panel.open .ult-d-desc,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-desc {
    font-size: clamp(0.54rem, 2.25vw, 0.7rem) !important;
    line-height: 1.3 !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-footer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-footer,
  html body .ultimate-section #ult-detail-panel.open .ult-d-footer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-footer {
    margin-top: clamp(0.3rem, 1.15vw, 0.45rem) !important;
    padding-top: clamp(0.28rem, 1vw, 0.4rem) !important;
  }
}


/* ===== extracted style block 102 ===== */
/* When wrappers exist on desktop, they should not affect the original layout. */
html body .ultimate-section .ult-mobile-rail-nav-wrap {
  display: contents;
}
html body .ultimate-section .ult-rail-arrow {
  display: none;
}

@media (max-width: 1000px) {
  html body .ultimate-section .ult-mobile-rail-nav-wrap {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Main menu rail wrapper takes over the same side bleed that the rail
     previously owned, so the visual position of the icons stays the same. */
  html body .ultimate-section .ult-main-rail-nav-wrap {
    margin: 0 calc(clamp(0.68rem, 3vw, 1rem) * -1) 0 !important;
  }

  html body .ultimate-section .ult-main-rail-nav-wrap #ult-item-grid,
  html body .ultimate-section #ult-item-grid.ult-rail-has-arrows {
    margin: 0 !important;
    padding-left: clamp(0.68rem, 3vw, 1rem) !important;
    padding-right: clamp(0.68rem, 3vw, 1rem) !important;
  }

  /* Detail menu rail wrapper mirrors the existing bottom rail bleed. */
  html body .ultimate-section .ult-detail-rail-nav-wrap {
    margin: 0 calc(clamp(0.62rem, 2.8vw, 1rem) * -1) !important;
  }

  html body .ultimate-section .ult-detail-rail-nav-wrap #ult-mini-grid,
  html body .ultimate-section #ult-mini-grid.ult-rail-has-arrows {
    margin: 0 !important;
    padding-left: clamp(0.62rem, 2.8vw, 1rem) !important;
    padding-right: clamp(0.62rem, 2.8vw, 1rem) !important;
  }

  html body .ultimate-section .ult-rail-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 12 !important;
    width: clamp(26px, 7vw, 34px) !important;
    height: clamp(26px, 7vw, 34px) !important;
    min-width: clamp(26px, 7vw, 34px) !important;
    min-height: clamp(26px, 7vw, 34px) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    background: rgba(7,7,9,0.82) !important;
    color: var(--white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1.15rem, 4.8vw, 1.55rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.45) !important;
    transform: translateY(-50%) !important;
    transition: opacity .16s ease, background .16s ease, border-color .16s ease, transform .16s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body .ultimate-section .ult-rail-arrow:active {
    transform: translateY(-50%) scale(0.94) !important;
    background: rgba(232,132,28,0.86) !important;
    color: #111 !important;
  }

  html body .ultimate-section .ult-rail-arrow-left {
    left: clamp(4px, 1.2vw, 8px) !important;
  }

  html body .ultimate-section .ult-rail-arrow-right {
    right: clamp(4px, 1.2vw, 8px) !important;
  }

  html body .ultimate-section .ult-rail-arrow.is-disabled {
    opacity: 0.22 !important;
    pointer-events: none !important;
  }

  html body .ultimate-section .ult-rail-arrow:not(.is-disabled) {
    opacity: 0.94 !important;
  }

  /* Keep arrows aligned with the icon row, not the label above it. */
  html body .ultimate-section .ult-main-rail-nav-wrap .ult-rail-arrow {
    top: 50% !important;
  }

  html body .ultimate-section .ult-detail-rail-nav-wrap .ult-rail-arrow {
    top: 50% !important;
  }
}


/* ===== extracted style block 103 ===== */
@media (min-width: 1001px) {

  /* Let the right panel grow to fit content — no clipping */
  html body #ult-right-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Grid-view: do not stretch grid; just contain it */
  html body #ult-grid-view {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  /* Grid: three auto rows packed at the top, gap 5px */
  html body #ult-item-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: max-content max-content max-content !important;
    align-content: start !important;
    flex: 0 1 auto !important;
    gap: 5px !important;
    min-height: 0 !important;
    margin-bottom: 0.4rem !important;
  }

  /* Card: vertical column, height = content */
  html body #ult-item-grid > .ult-item-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Thumb: full-width square, locked size */
  html body #ult-item-grid > .ult-item-card > .ult-item-thumb {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.9rem, 1.4vw, 1.35rem) !important;
  }

  /* Info: natural text height, ALWAYS rendered, below the thumb */
  html body #ult-item-grid > .ult-item-card > .ult-item-info {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 5px 6px 6px !important;
    gap: 3px !important;
    justify-content: flex-start !important;
  }

  html body #ult-item-grid .ult-item-name {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
    font-size: clamp(0.55rem, 0.6vw, 0.7rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--white) !important;
  }

  html body #ult-item-grid .ult-item-meta {
    display: flex !important;
    margin-top: auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
  }

  html body #ult-item-grid .ult-item-val {
    font-size: clamp(0.48rem, 0.52vw, 0.6rem) !important;
    color: var(--dim) !important;
    text-decoration: line-through !important;
  }

  html body #ult-item-grid .ult-item-incl {
    font-size: clamp(0.48rem, 0.52vw, 0.6rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--green) !important;
  }

  /* Make sure the SHOP button shows below the grid */
  html body #ult-grid-view > .add-btn {
    flex: 0 0 auto !important;
    margin-top: 0.6rem !important;
  }
}


/* ===== extracted style block 104 ===== */
@media (min-width: 1001px) {
  html body .ultimate-section .ultimate-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
    align-items: start !important;
    min-height: 0 !important;
  }

  html body .ultimate-section .ult-left,
  html body .ultimate-section .ult-left.reveal {
    align-self: start !important;
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #000 !important;
  }

  html body .ultimate-section .ult-left::before,
  html body .ultimate-section .ult-left::after {
    display: none !important;
    content: none !important;
  }

  html body .ultimate-section .ult-left > .ult-photo-full,
  html body .ultimate-section .ult-photo-full {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  html body .ultimate-section #ult-right-panel,
  html body #ult-right-panel.ult-right {
    align-self: start !important;
    box-sizing: border-box !important;
    height: var(--ggg-ult-photo-h, auto) !important;
    max-height: var(--ggg-ult-photo-h, none) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: clamp(1.15rem, 1.9vw, 2.15rem) clamp(1.15rem, 2.1vw, 2.35rem) !important;
  }

  html body .ultimate-section #ult-grid-view,
  html body #ult-grid-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body .ultimate-section .ult-hook-row,
  html body .ultimate-section .ult-meta-row,
  html body .ultimate-section .ult-grid-label,
  html body .ultimate-section #ult-grid-view > .add-btn {
    flex: 0 0 auto !important;
  }

  html body .ultimate-section .ult-hook-row {
    margin-bottom: clamp(0.35rem, 0.7vw, 0.6rem) !important;
  }

  html body .ultimate-section .ult-hook {
    font-size: clamp(1.15rem, 1.55vw, 1.75rem) !important;
    line-height: 0.96 !important;
  }

  html body .ultimate-section .ult-meta-row {
    margin-bottom: clamp(0.45rem, 0.85vw, 0.7rem) !important;
    gap: clamp(0.45rem, 0.9vw, 0.85rem) !important;
  }

  html body .ultimate-section .ult-price-now {
    font-size: clamp(1.35rem, 1.55vw, 1.75rem) !important;
  }

  html body .ultimate-section .stars-line {
    gap: 0.35rem !important;
  }

  html body .ultimate-section .ult-grid-label {
    margin-bottom: clamp(0.25rem, 0.55vw, 0.45rem) !important;
  }

  html body .ultimate-section #ult-item-grid,
  html body #ult-item-grid.ult-item-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: clamp(3px, 0.45vw, 5px) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card,
  html body #ult-item-grid > .ult-item-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card > .ult-item-thumb,
  html body #ult-item-grid > .ult-item-card > .ult-item-thumb {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.72rem, 1.1vw, 1.2rem) !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card > .ult-item-thumb img,
  html body #ult-item-grid > .ult-item-card > .ult-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card > .ult-item-info,
  html body #ult-item-grid > .ult-item-card > .ult-item-info {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 5px 5px !important;
    gap: 2px !important;
    justify-content: flex-start !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-name,
  html body #ult-item-grid .ult-item-name {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.12 !important;
    font-size: clamp(0.48rem, 0.54vw, 0.64rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.035em !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-meta,
  html body #ult-item-grid .ult-item-meta {
    display: flex !important;
    margin-top: 1px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-val,
  html body #ult-item-grid .ult-item-val,
  html body .ultimate-section #ult-item-grid .ult-item-incl,
  html body #ult-item-grid .ult-item-incl {
    font-size: clamp(0.43rem, 0.48vw, 0.56rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html body .ultimate-section #ult-grid-view > .add-btn,
  html body #ult-grid-view > .add-btn {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-top: clamp(0.35rem, 0.75vw, 0.65rem) !important;
    padding: clamp(0.68rem, 0.9vw, 0.95rem) !important;
    font-size: clamp(0.92rem, 1.15vw, 1.18rem) !important;
  }

  html body .ultimate-section #ult-detail-panel,
  html body #ult-detail-panel.ult-detail-panel {
    max-height: 100% !important;
  }
}

@media (max-width: 1000px) {
  html body .ultimate-section #ult-right-panel,
  html body #ult-right-panel.ult-right {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ===== extracted style block 105 ===== */
@media (max-width: 1000px) {
  html body .ultimate-section {
    background: var(--bg-deep) !important;
    overflow: hidden !important;
  }

  html body .ultimate-section .ultimate-inner {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* Photo: full-width, uncropped, quick to scan. */
  html body .ultimate-section .ult-left,
  html body .ultimate-section .ult-left.reveal {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  html body .ultimate-section .ult-left::before,
  html body .ultimate-section .ult-left::after,
  html body .ultimate-section .ult-bg-glyph,
  html body .ultimate-section .ult-text {
    display: none !important;
    content: none !important;
  }

  html body .ultimate-section .ult-left > .ult-photo-full,
  html body .ultimate-section .ult-photo-full {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: clamp(210px, 39vh, 330px) !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 auto !important;
    background: #000 !important;
  }

  /* Right module becomes a compact offer dashboard. */
  html body .ultimate-section #ult-right-panel,
  html body #ult-right-panel.ult-right {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: clamp(0.68rem, 2.5vw, 0.95rem) clamp(0.68rem, 3vw, 1rem) clamp(0.82rem, 3vw, 1.1rem) !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    background: linear-gradient(180deg, rgba(34,34,34,0.98) 0%, rgba(24,24,24,1) 100%) !important;
  }

  html body .ultimate-section #ult-grid-view,
  html body #ult-grid-view {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Hook line: premium headline, less vertical space. */
  html body .ultimate-section .ult-hook-row {
    margin: 0 0 clamp(0.35rem, 1.4vw, 0.5rem) !important;
  }

  html body .ultimate-section .ult-hook {
    margin: 0 !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(1.02rem, 4.9vw, 1.42rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.045em !important;
    line-height: 0.95 !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
  }

  html body .ultimate-section .ult-hook em {
    color: var(--orange) !important;
    font-style: normal !important;
  }

  /* Price and social proof: compact two-line bundle summary. */
  html body .ultimate-section .ult-meta-row {
    display: block !important;
    margin: 0 0 clamp(0.42rem, 1.5vw, 0.58rem) !important;
  }

  html body .ultimate-section .ult-meta-left {
    display: block !important;
  }

  html body .ultimate-section .ult-price-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.34rem 0.44rem !important;
    margin: 0 0 0.18rem !important;
  }

  html body .ultimate-section .ult-price-label {
    font-size: clamp(0.58rem, 2.3vw, 0.7rem) !important;
    letter-spacing: 0.12em !important;
    color: var(--muted) !important;
  }

  html body .ultimate-section .ult-price-was {
    font-size: clamp(0.76rem, 3vw, 0.92rem) !important;
    line-height: 1 !important;
  }

  html body .ultimate-section .ult-price-now {
    font-size: clamp(1.5rem, 6.6vw, 2.05rem) !important;
    line-height: 0.95 !important;
  }

  html body .ultimate-section .ult-discount-badge {
    font-size: clamp(0.58rem, 2.35vw, 0.72rem) !important;
    line-height: 1 !important;
    padding: 0.22rem 0.52rem !important;
    border-radius: 4px !important;
  }

  html body .ultimate-section .stars-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.22rem 0.38rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  html body .ultimate-section .stars {
    font-size: clamp(0.78rem, 3vw, 0.95rem) !important;
    letter-spacing: 0.02em !important;
  }

  html body .ultimate-section .stars-val {
    font-size: clamp(0.78rem, 3vw, 0.94rem) !important;
    font-weight: 800 !important;
  }

  html body .ultimate-section .stars-ct {
    font-size: clamp(0.68rem, 2.7vw, 0.82rem) !important;
  }

  html body .ultimate-section .ult-bestseller {
    font-size: clamp(0.54rem, 2.1vw, 0.64rem) !important;
    line-height: 1 !important;
    padding: 0.16rem 0.42rem !important;
  }

  /* Rail label: tells the user this section swipes horizontally. */
  html body .ultimate-section .ult-grid-label {
    position: relative !important;
    margin: clamp(0.52rem, 1.9vw, 0.7rem) 0 clamp(0.28rem, 1.15vw, 0.42rem) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(0.58rem, 2.4vw, 0.72rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.15 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Horizontal included-items rail. */
  html body .ultimate-section #ult-item-grid,
  html body #ult-item-grid.ult-item-grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    gap: clamp(7px, 2vw, 10px) !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 calc(clamp(0.68rem, 3vw, 1rem) * -1) 0 !important;
    padding: 0 clamp(0.68rem, 3vw, 1rem) 0.22rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-left: clamp(0.68rem, 3vw, 1rem) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 34px), rgba(0,0,0,0.15) 100%) !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 34px), rgba(0,0,0,0.15) 100%) !important;
  }

  html body .ultimate-section #ult-item-grid::-webkit-scrollbar,
  html body #ult-item-grid.ult-item-grid::-webkit-scrollbar {
    display: none !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card,
  html body #ult-item-grid > .ult-item-card {
    display: flex !important;
    flex: 0 0 clamp(88px, 25.5vw, 112px) !important;
    width: clamp(88px, 25.5vw, 112px) !important;
    min-width: clamp(88px, 25.5vw, 112px) !important;
    max-width: clamp(88px, 25.5vw, 112px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    background: rgba(17,17,17,0.72) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card:active,
  html body #ult-item-grid > .ult-item-card:active {
    transform: translateY(1px) !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card > .ult-item-thumb,
  html body #ult-item-grid > .ult-item-card > .ult-item-thumb {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: clamp(1rem, 5vw, 1.45rem) !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card > .ult-item-thumb img,
  html body #ult-item-grid > .ult-item-card > .ult-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card > .ult-item-info,
  html body #ult-item-grid > .ult-item-card > .ult-item-info {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: clamp(48px, 13vw, 58px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 5px 6px 6px !important;
    gap: 2px !important;
    justify-content: flex-start !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-name,
  html body #ult-item-grid .ult-item-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    min-height: 2.15em !important;
    line-height: 1.08 !important;
    font-size: clamp(0.54rem, 2.45vw, 0.66rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-meta,
  html body #ult-item-grid .ult-item-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin-top: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-val,
  html body #ult-item-grid .ult-item-val {
    display: block !important;
    font-size: clamp(0.52rem, 2.25vw, 0.62rem) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    color: var(--dim) !important;
    text-decoration: line-through !important;
  }

  html body .ultimate-section #ult-item-grid .ult-item-incl,
  html body #ult-item-grid .ult-item-incl {
    display: block !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(0.54rem, 2.35vw, 0.66rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.095em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    color: var(--green) !important;
  }

  html body .ultimate-section #ult-grid-view > .add-btn,
  html body #ult-grid-view > .add-btn {
    display: block !important;
    width: 100% !important;
    margin: clamp(0.58rem, 2vw, 0.8rem) 0 0 !important;
    padding: clamp(0.76rem, 3.1vw, 0.98rem) 0.85rem !important;
    border-radius: 7px !important;
    font-size: clamp(0.92rem, 4.1vw, 1.18rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.105em !important;
    box-shadow: 0 10px 24px rgba(232,132,28,0.18) !important;
  }

  html body .ultimate-section #ult-grid-view > .add-btn::after,
  html body #ult-grid-view > .add-btn::after {
    content: ' →';
  }
}

@media (max-width: 380px) {
  html body .ultimate-section .ult-left > .ult-photo-full,
  html body .ultimate-section .ult-photo-full {
    max-height: 245px !important;
  }

  html body .ultimate-section #ult-item-grid > .ult-item-card,
  html body #ult-item-grid > .ult-item-card {
    flex-basis: 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  html body .ultimate-section .ult-grid-label {
    letter-spacing: 0.09em !important;
  }
}


/* ===== extracted style block 106 ===== */
@media (max-width: 1000px) {
  html body .ultimate-section #ult-detail-panel.open .ult-carousel-outer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-outer {
    grid-column: 1 !important;
    grid-row: 2 / 6 !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 clamp(0.42rem, 1.7vw, 0.65rem) clamp(0.62rem, 2.8vw, 1rem) !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-carousel-track,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-track,
  html body .ultimate-section #ult-detail-panel.open .ult-carousel-slide,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-slide {
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 430px) {
  html body .ultimate-section #ult-detail-panel.open .ult-carousel-outer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-outer {
    margin-left: clamp(0.62rem, 2.8vw, 1rem) !important;
  }
}


/* ===== extracted style block 107 ===== */
@media (max-width: 1000px) {
  /* Only when a selected item is open, let the module shrink/grow to the
     actual detail content instead of holding the previous fixed vh height. */
  html body .ultimate-section #ult-right-panel.ult-mobile-detail-open,
  html body #ult-right-panel.ult-right.ult-mobile-detail-open {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* The closed dashboard should not reserve space while the detail view is open. */
  html body .ultimate-section #ult-right-panel.ult-mobile-detail-open #ult-grid-view,
  html body #ult-right-panel.ult-mobile-detail-open #ult-grid-view {
    display: none !important;
  }

  /* Make the open detail view participate in normal flow so the parent module
     can naturally collapse upward and remove the empty middle gap. */
  html body .ultimate-section #ult-detail-panel.ult-detail-panel.open,
  html body #ult-detail-panel.ult-detail-panel.open {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
    align-content: start !important;

    display: grid !important;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: clamp(0.55rem, 2.2vw, 0.9rem) !important;
    row-gap: 0 !important;
  }

  /* Preserve the existing top bar. */
  html body .ultimate-section #ult-detail-panel.open .ult-detail-top,
  html body #ult-detail-panel.ult-detail-panel.open .ult-detail-top {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* The square carousel now owns only the left side of the content row. */
  html body .ultimate-section #ult-detail-panel.open .ult-carousel-outer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-outer {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 0 clamp(0.62rem, 2.8vw, 1rem) !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-carousel-track,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-track,
  html body .ultimate-section #ult-detail-panel.open .ult-carousel-slide,
  html body #ult-detail-panel.ult-detail-panel.open .ult-carousel-slide {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* The script below wraps category, name, description, and value into this
     stack. That removes the grid's old flexible spacer row entirely. */
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 clamp(0.62rem, 2.8vw, 1rem) 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-cat,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-cat,
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-name,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-name,
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-footer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-footer {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: stretch !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-cat,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-cat {
    margin: 0 0 clamp(0.16rem, 0.65vw, 0.25rem) !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-name,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-name {
    margin: 0 0 clamp(0.34rem, 1.25vw, 0.5rem) !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-desc,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-desc {
    margin: 0 !important;
    flex: 0 1 auto !important;
  }

  html body .ultimate-section #ult-detail-panel.open .ult-d-info-stack .ult-d-footer,
  html body #ult-detail-panel.ult-detail-panel.open .ult-d-info-stack .ult-d-footer {
    margin: clamp(0.55rem, 1.8vw, 0.75rem) 0 0 !important;
    flex: 0 0 auto !important;
  }

  /* Bottom rail moves directly under whichever is taller: the square image
     or the right-side details stack. */
  html body .ultimate-section #ult-detail-panel.open .ult-mini-grid-wrap,
  html body #ult-detail-panel.ult-detail-panel.open .ult-mini-grid-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin: clamp(0.52rem, 2.1vw, 0.78rem) clamp(0.62rem, 2.8vw, 1rem) clamp(0.52rem, 2.1vw, 0.85rem) !important;
    padding: clamp(0.46rem, 1.65vw, 0.62rem) 0 0 !important;
  }
}

@media (max-width: 430px) {
  html body .ultimate-section #ult-detail-panel.ult-detail-panel.open,
  html body #ult-detail-panel.ult-detail-panel.open {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
    column-gap: 0.48rem !important;
  }
}


/* ===== extracted style block 108 ===== */
@media (max-width: 1000px) {
  html body .ultimate-section #ult-detail-panel.ult-detail-panel.open,
  html body #ult-detail-panel.ult-detail-panel.open {
    grid-template-columns: minmax(0, 66%) minmax(0, 34%) !important;
  }
}

@media (max-width: 430px) {
  html body .ultimate-section #ult-detail-panel.ult-detail-panel.open,
  html body #ult-detail-panel.ult-detail-panel.open {
    grid-template-columns: minmax(0, 66%) minmax(0, 34%) !important;
  }
}


/* ===== extracted style block 109 ===== */
/* Main right-side Ultimate Edition product module */
html body .ultimate-section #ult-right-panel,
html body #ult-right-panel.ult-right {
  position: relative !important;
  overflow: hidden !important;
  background: #1f1d28 !important;
  isolation: isolate;
}

/* Slide-up detail module background */
html body .ultimate-section #ult-detail-panel.ult-detail-panel,
html body #ult-detail-panel.ult-detail-panel {
  position: absolute !important;
  overflow: hidden !important;
  background: #1f1d28 !important;
  isolation: isolate;
  z-index: 20 !important;
}

html body .ultimate-section #ult-right-panel::before,
html body #ult-right-panel.ult-right::before,
html body .ultimate-section #ult-detail-panel.ult-detail-panel::before,
html body #ult-detail-panel.ult-detail-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.72;
  background-image:
    radial-gradient(1px 1px at 21px 27px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1px 1px at 79px 93px, rgba(255,255,255,0.58), transparent),
    radial-gradient(1.6px 1.6px at 138px 54px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 203px 124px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1px 1px at 258px 36px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.4px 1.4px at 323px 106px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1px 1px at 382px 73px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 447px 146px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 519px 44px, rgba(255,255,255,0.60), transparent),
    radial-gradient(1.5px 1.5px at 591px 116px, rgba(255,255,255,0.90), transparent),
    radial-gradient(1px 1px at 53px 181px, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 168px 224px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.4px 1.4px at 281px 252px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 398px 202px, rgba(255,255,255,0.60), transparent),
    radial-gradient(1px 1px at 503px 282px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 602px 233px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 116px 146px, rgba(255,255,255,0.54), transparent),
    radial-gradient(1.3px 1.3px at 242px 178px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 355px 37px, rgba(255,255,255,0.58), transparent),
    radial-gradient(1px 1px at 541px 189px, rgba(255,255,255,0.56), transparent);
  background-size: 527px 251px;
  background-repeat: repeat;
}

html body .ultimate-section #ult-right-panel::after,
html body #ult-right-panel.ult-right::after,
html body .ultimate-section #ult-detail-panel.ult-detail-panel::after,
html body #ult-detail-panel.ult-detail-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.38;
  background-image:
    radial-gradient(1px 1px at 31px 42px, rgba(255,255,255,0.46), transparent),
    radial-gradient(1.8px 1.8px at 152px 81px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 277px 26px, rgba(255,255,255,0.52), transparent),
    radial-gradient(1px 1px at 369px 139px, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.5px 1.5px at 463px 97px, rgba(255,255,255,0.72), transparent),
    radial-gradient(1px 1px at 587px 161px, rgba(255,255,255,0.50), transparent),
    radial-gradient(1.7px 1.7px at 715px 47px, rgba(255,255,255,0.80), transparent),
    radial-gradient(1px 1px at 822px 126px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1px 1px at 92px 244px, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.5px 1.5px at 229px 315px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1px 1px at 411px 272px, rgba(255,255,255,0.46), transparent),
    radial-gradient(1.4px 1.4px at 552px 236px, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px at 687px 301px, rgba(255,255,255,0.52), transparent),
    radial-gradient(1px 1px at 841px 224px, rgba(255,255,255,0.48), transparent);
  background-size: 863px 389px;
  background-position: 103px 67px;
  background-repeat: repeat;
}

html body .ultimate-section #ult-grid-view,
html body #ult-grid-view {
  position: relative !important;
  z-index: 2 !important;
}

html body .ultimate-section #ult-detail-panel > *,
html body #ult-detail-panel.ult-detail-panel > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ===== extracted style block 110 ===== */
/* Center the top menu against the full viewport, not between the logo and CTA. */
@media (min-width: 901px) {
  html body nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: stretch !important;
    column-gap: 1.5rem !important;
  }

  html body nav .nav-brand {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  html body nav .nav-links {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body nav .nav-cta {
    grid-column: 3 !important;
    justify-self: end !important;
  }
}


/* Remove old fixed-header spacer below the custom homepage nav */
#ggg-terror-homepage .hero {
  padding-top: 0 !important;
}

#ggg-terror-homepage .split-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: calc(100vh - 56px) !important;
  min-height: calc(100vh - 56px) !important;
}

/* TEMP FIX: remove black spacer below custom homepage nav */
html body .shopify-section .hero,
html body .hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

html body .shopify-section .split-hero,
html body .split-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: calc(100vh - 56px) !important;
  min-height: calc(100vh - 56px) !important;
}

#splitHero .ggg-not-chosen-img {
  filter: none !important;
}

/* Chrome performance fix: stop animating large image filters */
#splitHero .ggg-not-chosen-img,
#splitHero.hover-left .split-left .ggg-not-chosen-img,
#splitHero.hover-left .split-right .ggg-not-chosen-img,
#splitHero.hover-right .split-left .ggg-not-chosen-img,
#splitHero.hover-right .split-right .ggg-not-chosen-img {
  filter: none !important;
  transition: none !important;
}

/* Use an opacity overlay instead of brightness/saturation filters */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  #splitHero.ggg-atmosphere-ready .split-left::after,
  #splitHero.ggg-atmosphere-ready .split-right::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: #000;
    opacity: var(--ggg-panel-dim, 0.52);
    transition: opacity 0.08s linear;
  }

  /* Keep the edge glow and particles above the dim layer */
  #splitHero.ggg-atmosphere-ready .split-left::before,
  #splitHero.ggg-atmosphere-ready .split-right::before {
    z-index: 6 !important;
  }

  #splitHero .ggg-atmos-particle {
    z-index: 7 !important;
  }
}

/* Chrome-safe brightness replacement: use opacity overlays, not image filters */
#splitHero .ggg-not-chosen-img {
  filter: none !important;
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  #splitHero .split-left,
  #splitHero .split-right {
    position: relative !important;
    overflow: hidden !important;
  }

  #splitHero .ggg-panel-dim-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: #000;
    opacity: 0.52;
    transition: opacity 0.06s linear;
    will-change: opacity;
  }

  /* Keep edge glow and particles above the dimming layer */
  #splitHero.ggg-atmosphere-ready .split-left::before,
  #splitHero.ggg-atmosphere-ready .split-right::before {
    z-index: 6 !important;
  }

  #splitHero .ggg-atmos-particle {
    z-index: 7 !important;
  }
}

/* ===== Chrome-safe split-hero brightness fix =====
   Use one brightness system only: a black opacity overlay controlled by
   --ggg-panel-dim on .split-left / .split-right. This avoids animating
   CSS filter on the large hero images, which caused poor Chrome framerates. */
#splitHero .ggg-not-chosen-img {
  filter: none !important;
  transition: none !important;
}

#splitHero .ggg-panel-dim-layer {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  #splitHero.ggg-atmosphere-ready .split-left,
  #splitHero.ggg-atmosphere-ready .split-right {
    --ggg-panel-dim: 0.52;
    position: relative !important;
    overflow: hidden !important;
  }

  #splitHero.ggg-atmosphere-ready .split-left::after,
  #splitHero.ggg-atmosphere-ready .split-right::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: #000;
    opacity: var(--ggg-panel-dim, 0.52);
    transition: opacity 0.06s linear;
    will-change: opacity;
  }

  #splitHero.ggg-atmosphere-ready .split-left::before,
  #splitHero.ggg-atmosphere-ready .split-right::before {
    z-index: 6 !important;
  }

  #splitHero .ggg-atmos-particle {
    z-index: 7 !important;
  }
}


/* Chrome-safe brightness layer: real DOM overlay, not ::after */
#splitHero .ggg-not-chosen-img {
  filter: none !important;
  transition: none !important;
}

#splitHero .split-left,
#splitHero .split-right {
  position: relative !important;
  overflow: hidden !important;
}

#splitHero .ggg-panel-dim-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background: #000 !important;
  opacity: 0.52;
  transition: none !important;
  will-change: opacity;
  transform: translateZ(0);
}

/* Keep the existing edge glow and particles above the dim layer */
#splitHero.ggg-atmosphere-ready .split-left::before,
#splitHero.ggg-atmosphere-ready .split-right::before {
  z-index: 6 !important;
}

#splitHero .ggg-atmos-particle {
  z-index: 7 !important;
}

/* Final override: stop old filter-based brightness from darkening the base images */
html body #splitHero .split-left .ggg-not-chosen-img,
html body #splitHero .split-right .ggg-not-chosen-img,
html body #splitHero.ggg-atmosphere-ready .split-left .ggg-not-chosen-img,
html body #splitHero.ggg-atmosphere-ready .split-right .ggg-not-chosen-img,
html body #splitHero.hover-left .split-left .ggg-not-chosen-img,
html body #splitHero.hover-left .split-right .ggg-not-chosen-img,
html body #splitHero.hover-right .split-left .ggg-not-chosen-img,
html body #splitHero.hover-right .split-right .ggg-not-chosen-img {
  filter: none !important;
  transition: none !important;
}

/* Final fixed-nav correction:
   Make the custom homepage nav part of the page flow so it no longer covers/crops the hero. */
html body #ggg-terror-homepage nav,
html body nav:has(.nav-brand):has(.nav-links):has(.nav-cta) {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 56px !important;
  z-index: 300 !important;
}

/* Since nav now occupies its own 56px, the hero no longer needs top padding. */
html body .hero {
  padding-top: 0 !important;
  height: calc(100vh - 56px) !important;
  min-height: calc(100vh - 56px) !important;
  overflow: hidden !important;
}

/* The split hero should fill the remaining viewport below the nav. */
html body #splitHero.split-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: calc(100vh - 56px) !important;
  min-height: calc(100vh - 56px) !important;
}

/* Keep the visible artwork anchored from the top. */
html body #splitHero .split-left .ggg-not-chosen-img {
  object-position: left top !important;
}

html body #splitHero .split-right .ggg-not-chosen-img {
  object-position: right top !important;
}

/* Disable featured-section starfield on mobile so it does not show below the slide-out panels */
@media (max-width: 700px) {
  #splitHero.split-hero::before,
  #splitHero.split-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

/* Mobile featured hero: remove leftover desktop viewport height so no black rectangle appears */
@media (max-width: 700px) {
  html body .hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body #splitHero.split-hero {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    overflow: visible !important;
  }

  html body #splitHero .split-panel {
    height: auto !important;
    min-height: 0 !important;
  }

  html body #splitHero .slide-out {
    height: auto !important;
    min-height: 0 !important;
  }

  html body #splitHero.split-hero::before,
  html body #splitHero.split-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}


/* Under 500px: make Original and Shadow overlay edge spacing symmetrical */
@media (max-width: 499px) {
  #splitHero .slide-out-left .so-overlay,
  #splitHero.hover-left .slide-out-left .so-overlay {
    right: 10px !important;
    left: auto !important;
  }

  #splitHero .slide-out-right .shadow-overlay,
  #splitHero.hover-right .slide-out-right .shadow-overlay {
    left: 10px !important;
    right: auto !important;
  }
}

/* Under 500px: nudge Shadow floating card stack 5px to the right */
@media (max-width: 499px) {
  #splitHero .slide-out-right .shadow-overlay .shadow-cards,
  #splitHero.hover-right .slide-out-right .shadow-overlay .shadow-cards {
    position: relative !important;
    left: -7px !important;
  }
}