/* Shared final polish for every pack edition. */
:root {
  --content-max: 1440px;
  --content-gutter: max(clamp(1.25rem, 4vw, 5rem), calc((100vw - var(--content-max)) / 2));
  --pack-ease: cubic-bezier(.2, .78, .2, 1);
}

body {
  background: #000;
  cursor: default;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none !important;
  user-select: none !important;
}

:where(input, textarea, select, [contenteditable="true"]) {
  cursor: text;
  -webkit-user-select: text !important;
  user-select: text !important;
}

:where(a, button, summary, label) { cursor: pointer; }

.pack-grain {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  mix-blend-mode: normal !important;
}

body.pack-theme-black::before,
.pack-theme-black .inside::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
::selection { background: rgb(var(--accent, 255, 255, 255)); color: #000; }

:where(a, button, summary):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.pack-header,
.pack-header.is-compact,
body[class*="pack-theme-"] .pack-header {
  top: 0;
  width: min(100%, 1600px);
  height: 68px;
  padding-inline: max(2rem, calc((100% - 1440px) / 2));
  border: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(7, 7, 8, .82) 5%, rgba(7, 7, 8, .96) 18% 82%, rgba(7, 7, 8, .82) 95%, transparent 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.075), 0 22px 55px -48px rgba(0,0,0,.95);
  -webkit-backdrop-filter: blur(24px) saturate(128%);
  backdrop-filter: blur(24px) saturate(128%);
}

body[class*="pack-theme-"] .pack-header.is-compact { height: 54px; }
.pack-header::before,
.pack-header::after { display: none !important; }
.pack-header .pack-logo { gap: .72rem; font-size: 1.24rem; font-weight: 600; }
.pack-header .pack-logo img,
.pack-header.is-compact .pack-logo img { width: 28px; height: 36px; filter: grayscale(1) brightness(1.45) !important; }
.pack-footer .pack-logo img { width: 24px; height: 31px; filter: grayscale(1) brightness(1.45) !important; }
.access-label { font-size: .64rem; letter-spacing: .14em; }
.header-buy { min-height: 40px; align-items: center; padding: 0 1rem; border-radius: 0; background: rgba(255,255,255,.012); letter-spacing: .11em; }
.header-buy:hover { transform: none; }

.pack-footer-links { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; align-items: center; }
.pack-footer-links a { color: inherit; text-decoration: none; }
.pack-footer-links a:hover { color: #fff; }

.pack-hero { min-height: min(100svh, 980px); padding-top: clamp(7.7rem, 10vh, 9rem); padding-bottom: 4rem; }
.pack-hero::before { opacity: .48; }
.pack-hero h1 {
  max-width: 780px;
  font-size: clamp(4.9rem, 8vw, 8.8rem);
  line-height: .87;
  overflow: visible;
  padding: .07em .02em .13em 0;
}
.pack-hero h1 em,
.pack-section h2 em,
.checkout h2 em {
  display: inline-block;
  padding-block: .03em .08em;
}
.pack-lead { color: #a4a6aa; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; }
.pack-button { min-height: 62px; border-radius: 0; letter-spacing: .1em; transition: transform .2s var(--pack-ease), box-shadow .2s ease, background-position .4s ease; }
.pack-button:hover { transform: translateY(-1px); }
.pack-button:active { box-shadow: inset 0 3px 7px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.38); transform: translateY(2px); }
.pack-reveal { filter: blur(2px); transform: translateY(22px); transition: opacity .72s ease, transform .85s var(--pack-ease), filter .72s ease; }
.pack-reveal.is-visible { filter: none; }
.inside-grid article:hover { transform: none; }
.pack-tracks article:hover,
.pack-tracks article.is-playing { transform: none; }
.checkout-light { opacity: .58; }

.pack-preview-hold {
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pack-preview-hold article {
  position: relative;
  display: grid;
  min-height: 250px;
  align-content: center;
  gap: 1rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014) 42%, transparent 78%),
    #030304;
}

.pack-preview-hold article::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--accent, 255, 255, 255), .12), transparent 42%);
  content: "";
  opacity: .42;
  pointer-events: none;
}

.pack-preview-hold span,
.pack-preview-hold strong,
.pack-preview-hold p,
.pack-preview-hold a {
  position: relative;
  z-index: 1;
}

.pack-preview-hold span {
  color: rgb(var(--accent, 255, 255, 255));
  font-family: "DM Mono", monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pack-preview-hold strong {
  max-width: 760px;
  color: #f2f2ef;
  font-size: clamp(2rem, 4.5vw, 4.6rem);
  font-weight: 560;
  letter-spacing: -.06em;
  line-height: .9;
  text-transform: uppercase;
}

.pack-preview-hold p {
  max-width: 560px;
  margin: 0;
  color: #a4a5a6;
  font-size: clamp(.98rem, 1.3vw, 1.18rem);
  line-height: 1.65;
}

.pack-preview-hold .pack-button {
  justify-self: start;
  margin-top: .5rem;
}

/* Preserve the artwork's native ratio at every responsive width. */
.product-stage img.pack-product-shot,
.pack-theme-black .product-stage img.pack-product-shot {
  width: auto !important;
  height: auto !important;
  max-width: 108%;
  max-height: min(70svh, 780px);
  aspect-ratio: auto;
  object-fit: contain;
}

/* Use each pack's original artwork without a synthetic color wash. */
.product-stage img.pack-product-shot,
.pack-theme-black .product-stage img.pack-product-shot {
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, .66));
  transform: none;
  -webkit-mask-image: var(--pack-mask-x), var(--pack-mask-y);
  mask-image: var(--pack-mask-x), var(--pack-mask-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.product-stage::after,
.pack-theme-black .product-stage::after {
  display: none;
}

@media (max-width: 940px) {
  .pack-header,
  .pack-header.is-compact { padding-inline: 1.35rem; }
}

@media (max-width: 620px) {
  .pack-header,
  .pack-header.is-compact,
  body[class*="pack-theme-"] .pack-header {
    top: 0;
    width: 100%;
    height: 64px;
    padding: 0 1rem;
    background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(13,13,15,.97) 15% 85%, rgba(0,0,0,.82));
    box-shadow: 0 1px 0 rgba(255,255,255,.09), 0 18px 40px -30px #000;
  }
  body[class*="pack-theme-"] .pack-header.is-compact { height: 54px; }
  .pack-header .pack-logo { gap: .52rem; font-size: 1.08rem; }
  .pack-header .pack-logo img,
  .pack-header.is-compact .pack-logo img { width: 27px; height: 34px; }
  .header-buy { min-height: 40px; }
  .pack-footer-links { gap: .65rem 1rem; }
  .pack-hero { padding-top: calc(6.9rem + env(safe-area-inset-top)); }
  .pack-hero h1,
  .pack-theme-black .pack-hero h1 {
    max-width: min(100%, calc(100vw - 2rem));
    font-size: clamp(3.05rem, 14.2vw, 4.35rem);
    line-height: .92;
    letter-spacing: -.055em;
    padding: .06em .04em .14em 0;
    word-break: normal;
    overflow-wrap: normal;
  }
  .pack-section h2,
  .section-intro h2,
  .sound-copy h2,
  .fit-copy h2,
  .checkout h2,
  .pack-theme-black .section-intro h2,
  .pack-theme-black .sound-copy h2,
  .pack-theme-black .fit-copy h2,
  .pack-theme-black .checkout h2 {
    max-width: min(100%, calc(100vw - 2rem));
    line-height: .94;
    letter-spacing: -.052em;
    overflow: visible;
    padding: .05em .02em .12em 0;
  }
  .pack-lead { font-size: .92rem; }
  .product-stage { min-height: min(56svh, 480px); }
  .product-stage img.pack-product-shot,
  .pack-theme-black .product-stage img.pack-product-shot {
    width: auto !important;
    max-width: 108%;
    height: min(52svh, 460px) !important;
    max-height: min(52svh, 460px);
  }
  .pack-section { padding-top: 5.2rem; padding-bottom: 5.2rem; }
  .pack-preview-hold article { min-height: 300px; padding: 1.35rem; }
  .pack-preview-hold strong { font-size: clamp(2.05rem, 10vw, 3.45rem); line-height: .94; }
  .pack-preview-hold .pack-button { width: 100%; }
}

@media (max-width: 380px) {
  .pack-hero h1,
  .pack-theme-black .pack-hero h1 { font-size: clamp(2.82rem, 13.7vw, 3.55rem); }
}

/* Last-pass safety for aggressive pack themes: keep luxury tight, never clipped. */
.pack-theme-black .pack-hero h1 {
  max-width: min(100%, 860px);
  line-height: .84;
  padding-block: .09em .16em;
}

.pack-theme-black .section-intro h2,
.pack-theme-black .sound-copy h2,
.pack-theme-black .fit-copy h2,
.pack-theme-black .checkout h2 {
  line-height: .91;
  padding-block: .06em .13em;
  overflow: visible;
}

@media (max-width: 620px) {
  .pack-theme-black .pack-hero h1 {
    max-width: min(100%, calc(100vw - 2rem));
    font-size: clamp(3.05rem, 14.2vw, 4.35rem);
    line-height: .92;
    letter-spacing: -.055em;
    padding: .06em .04em .14em 0;
  }

  .pack-theme-black .section-intro h2,
  .pack-theme-black .sound-copy h2,
  .pack-theme-black .fit-copy h2,
  .pack-theme-black .checkout h2 {
    max-width: min(100%, calc(100vw - 2rem));
    line-height: .94;
    letter-spacing: -.052em;
    padding: .05em .02em .12em 0;
  }

  .pack-theme-black .pack-actions .pack-button,
  .pack-theme-black .checkout-actions .pack-button,
  .pack-theme-black .fit-copy .pack-button {
    flex: 0 0 auto;
    width: 100%;
    min-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-reveal { opacity: 1; filter: none; transform: none; }
  .pack-hero::before,
  .product-glow { animation: none !important; }
}

/* Pack pages stay sharp in structure, with only interactive surfaces softened. */
.pack-button { border-radius: 6px; }
.header-buy { border-radius: 5px; }
.inside-grid article { border-radius: 6px; }
.pack-preview-hold,
.pack-preview-hold article { border-radius: 10px; }