/* Collection artwork shared with the current homepage's Magic Mess universe. */
body {
  --page: #6924d4;
  --ink: #fff;
  --muted: #e5d7fa;
  --accent: #c1f600;
  --accent-ink: #101010;
  --line: #ffffff45;
  --surface: #581fb4;
  --hero: #6924d4;
  --hero-ink: #fff;
  --tab-surface: #211138b8;
  --texture: none;
  color-scheme: dark;
}
body[data-collection=classic] {
  --page: #fbf4df;
  --ink: #201a11;
  --muted: #65583b;
  --accent: #c1f600;
  --accent-ink: #101010;
  --line: #cbbc98;
  --surface: #f0e5c8;
  --hero: #f4e4bd;
  --hero-ink: #101010;
  --tab-surface: #fffaf0ed;
  --texture: none;
  color-scheme: light;
}
body[data-collection=cats] {
  --page: #382061;
  --ink: #fff;
  --muted: #e2d2f5;
  --accent: #c1f600;
  --accent-ink: #101010;
  --line: #8263a6;
  --surface: #4c2f77;
  --hero: #7852b9;
  --texture: none;
}
body[data-collection=limited] {
  --page: #090d1c;
  --ink: #fff;
  --muted: #c4c5df;
  --accent: #c1f600;
  --accent-ink: #101010;
  --line: #414560;
  --surface: #191d34;
  --hero: #090d1c;
  --texture: none;
}
body[data-collection=collabs] {
  --page: #24150f;
  --ink: #fff;
  --muted: #e6cbbb;
  --accent: #c1f600;
  --accent-ink: #101010;
  --line: #78503b;
  --surface: #38241c;
  --hero: #24150f;
  --texture: none;
  color-scheme: dark;
}
body[data-collection=classic] .wordmark span,
body[data-collection=classic] .products-heading h2 span { color: #6924d4; }
body[data-collection=classic] :focus-visible { outline-color: #6924d4; }

.site-header { transition: background-color .45s, color .45s; }
.catalog-hero { min-height: 760px; padding-top: 30px; padding-bottom: 24px; color: var(--hero-ink); }
.catalog-hero:before, .catalog-hero:after { content: none; }
.collection-backdrops { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 70% 90%, #944cf3, #6020c6 75%); pointer-events: none; }
.collection-backdrop { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .5s ease; }
.collection-backdrop[data-scene=classic] { background-image: url('assets/background10.655caefbb4.webp'); background-position: center top; }
.collection-backdrop[data-scene=cats] { background-image: url('assets/background8.3e7e74ba42.webp'); }
.collection-backdrop[data-scene=cats]:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#231038b3 0,#231038b3 320px,transparent 500px); }
.collection-backdrop[data-scene=limited] { background-image: url('assets/background9.3c3a08fd78.webp'); background-position: center top; }
.collection-backdrop[data-scene=collabs] { background-image: url('assets/background6.65a3858003.webp'); }
body[data-collection=classic] [data-scene=classic],
body[data-collection=cats] [data-scene=cats],
body[data-collection=limited] [data-scene=limited],
body[data-collection=collabs] [data-scene=collabs] { opacity: 1; }
.hero-topline { position: relative; z-index: 2; }
.hero-topline-caption { color: inherit; }
.catalog-hero .eyebrow, .hero-topline-caption, .hero-copy { text-shadow: 0 2px 12px #1c103b99; }
body[data-collection=classic] .catalog-hero .eyebrow,
body[data-collection=classic] .hero-topline-caption,
body[data-collection=classic] .hero-copy { text-shadow: none; }
.collection-tabs { gap: 8px; margin-top: 24px; }
.collection-tabs button { border-color: #ffffff55; background: var(--tab-surface); color: var(--hero-ink); padding: 13px 23px; backdrop-filter: blur(10px); }
.collection-tabs button[aria-pressed=true] { background: #c1f600; border-color: #c1f600; color: #101010; }
body[data-collection=classic] .collection-tabs button { border-color: #201a1138; }
.hero-copy { margin-top: 30px; }
.hero-copy h1 { font-size: clamp(34px,4.8vw,72px); line-height: 1.2; }
.hero-copy p { color: inherit; font-family: Anonymous, monospace; font-size: 20px; max-width: 580px; min-height: 58px; margin-top: 14px; }
.hero-scene { z-index: 2; height: 350px; margin: 22px auto 0; max-width: 1120px; }
.hero-cans { width: 80%; max-width: 900px; gap: clamp(8px,2vw,26px); padding: 12px 0 20px; align-items: end; }
.hero-can, .hero-can:nth-child(n) { --tilt: 0deg; flex: 1; min-width: 0; width: 0; height: 100%; transform: none; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 7px #0004); }
.scene-orbit { bottom: 0; }
.scene-star, .scene-note { display: none; }
.scene-character { z-index: 1; bottom: 0; height: auto; max-height: none; max-width: none; opacity: 0; transform: translateY(100%); transition: transform .65s cubic-bezier(.22,.7,.25,1), opacity .4s; }
.character-cat { left: auto; right: 30%; width: min(34%,510px); }
.character-duck { right: 17%; width: min(30%,460px); }
body[data-collection=cats] .character-cat { transform: translateY(0); }
body[data-collection=collabs] .character-duck { transform: translateY(0); }
.hero-bottomline { margin-top: 16px; }
.explore-link, .collection-pagination { background: var(--tab-surface); padding: 9px 14px; border-radius: 30px; backdrop-filter: blur(10px); }
.collection-pagination { padding: 5px 6px 5px 18px; }
.collection-pagination>span { color: inherit; }
.collection-pagination button { background: #c1f600; color: #101010; border-color: #c1f600; }
.collection-pagination button:hover { background: #fff; color: #101010; }
.catalog-products, .catalog-cta, .product-art, .site-footer { transition: background-color .45s, border-color .45s; }
.product-art { border-radius: 28px; }
@keyframes universe-copy-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-copy.is-entering { animation: universe-copy-enter .4s both; }
@media(min-width:1700px) {
  .catalog-hero { min-height: 840px; }
  .hero-scene { height: 410px; max-width: 1280px; }
  .hero-cans { max-width: 1000px; }
}
@media(max-width:1100px) {
  .catalog-hero { min-height: 710px; }
  .hero-copy h1 { font-size: clamp(32px,4.8vw,53px); }
  .hero-scene { height: 310px; }
}
@media(max-width:760px) {
  .catalog-hero { min-height: 0; padding-top: 25px; padding-bottom: 20px; }
  .collection-tabs { margin-top: 20px; }
  .collection-tabs button { padding: 11px 17px; }
  .hero-copy { margin-top: 20px; }
  .hero-copy h1 { font-size: clamp(24px,5.4vw,40px); }
  .hero-copy p { font-size: 18px; min-height: 78px; max-width: 460px; }
  .hero-scene { height: clamp(230px,57vw,340px); margin: 20px auto 0; max-width: 560px; }
  .hero-cans { width: 100%; max-width: 500px; gap: 10px; padding-bottom: 14px; }
  .character-cat { width: 56%; right: 23%; }
  .character-duck { width: 50%; right: 8%; }
  .hero-bottomline { margin-top: 16px; gap: 8px; }
  .explore-link { padding: 10px 12px; gap: 12px; }
  .collection-pagination { padding-left: 12px; gap: 7px; }
  .collection-pagination button { width: 38px; height: 38px; }
  .product-art { border-radius: 20px; }
}
@media(max-width:430px) {
  .hero-scene { height: 230px; }
  .hero-cans { gap: 7px; }
  .hero-copy p { min-height: 104px; }
}
@media(max-width:350px) {
  .collection-tabs { margin-inline: -16px; padding-inline: 16px; }
  .hero-copy h1 { font-size: 23px; }
  .hero-copy p { font-size: 17px; }
  .hero-scene { height: 210px; }
  .hero-bottomline { gap: 6px; }
  .explore-link { font-size: 11px; gap: 7px; padding-inline: 10px; }
  .collection-pagination { gap: 5px; }
  .collection-pagination>span { margin-right: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .collection-backdrop, .scene-character { transition: none; }
  .hero-copy.is-entering { animation: none; }
}

/* Landscape artwork; portrait artwork above remains in use on phones. */
@media(min-width:761px){
.collection-backdrop[data-scene=classic]{background-image:url('assets/widebackground1.df402f00e2.webp');background-position:center center}



}



/* Limited collection uses the illustrated scene without hero product cans. */
body[data-collection=limited] .hero-cans,body[data-collection=limited] .scene-orbit{display:none}




/* Art-directed full-bleed scene. Only the active collection and matching aspect ratio request an image. */
.collection-backdrop[data-scene=limited]{background-image:none}
body[data-collection=limited]{--limited-art:url('assets/widebackground6.56164ac0d0.webp')}
body[data-collection=limited] .collection-backdrops{background:#090d1c}
body[data-collection=limited] .collection-backdrop[data-scene=limited]{background-image:var(--limited-art);background-size:cover;background-position:center bottom;background-repeat:no-repeat}
body[data-collection=limited] .catalog-hero{display:flex;flex-direction:column;min-height:max(690px,calc(100svh - 88px))}
body[data-collection=limited] .hero-scene{flex:1;width:100%;min-height:180px;height:auto;margin:18px auto 0;background:none}
body[data-collection=limited] .hero-copy p{min-height:0}
body[data-collection=limited] .hero-bottomline{margin-top:20px}
@media(max-aspect-ratio:4/3){body[data-collection=limited]{--limited-art:url('assets/widebackground6x1600x1600.fd2081022b.webp')}}
@media(max-width:600px) and (max-aspect-ratio:1/1){body[data-collection=limited]{--limited-art:url('assets/widebackground6x1080x1600.a9626146a1.webp')}}
@media(max-width:760px){body[data-collection=limited] .catalog-hero{min-height:max(570px,calc(100svh - 132px))}body[data-collection=limited] .hero-scene{min-height:180px}body[data-collection=limited] .hero-bottomline{margin-top:16px}}
@media(max-height:500px) and (min-aspect-ratio:4/3){body[data-collection=limited] .catalog-hero{min-height:650px}}


/* Side navigation leaves the illustrated characters unobstructed. */
.collection-side{position:absolute;top:52%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:42px;height:60px;padding:0;border:1px solid #ffffff50;border-radius:16px;background:#100a24a6;color:#fff;backdrop-filter:blur(8px);transition:background .2s,border-color .2s;touch-action:manipulation}
.collection-side-prev{left:14px}.collection-side-next{right:14px}
.collection-side svg{stroke-width:2;pointer-events:none}
@media(hover:hover){.collection-side:hover{background:#100a24e6;border-color:#ffffffb3}}
.collection-side:focus-visible{outline:2px solid #c1f600;outline-offset:3px}
body[data-collection=classic] .collection-side{background:#fffcf0c9;color:#211336;border-color:#21133640}
@media(max-width:760px){.collection-side{top:52%;width:36px;height:52px;border-radius:13px}.collection-side-prev{left:5px}.collection-side-next{right:5px}.collection-side:before{content:'';position:absolute;inset:-4px}}

/* Responsive collaboration artwork, with unobstructed illustrated characters. */
.collection-backdrop[data-scene=collabs]{background-image:none}
body[data-collection=collabs]{--collabs-art:url('assets/widebackground4.f48d5be9af.webp')}
body[data-collection=collabs] .collection-backdrops{background:#24150f}
body[data-collection=collabs] .collection-backdrop[data-scene=collabs]{background-image:var(--collabs-art);background-size:cover;background-position:center bottom;background-repeat:no-repeat}
body[data-collection=collabs] .hero-cans,body[data-collection=collabs] .scene-orbit{display:none}
body[data-collection=collabs] .catalog-hero{display:flex;flex-direction:column;min-height:max(690px,calc(100svh - 88px))}
body[data-collection=collabs] .hero-scene{flex:1;width:100%;min-height:180px;height:auto;margin:18px auto 0;background:none}
body[data-collection=collabs] .hero-copy p{min-height:0}
@media(max-aspect-ratio:4/3){body[data-collection=collabs]{--collabs-art:url('assets/widebackground4x1600x1600.7510d37368.webp')}}
@media(max-width:600px) and (max-aspect-ratio:1/1){body[data-collection=collabs]{--collabs-art:url('assets/widebackground4x1080x1600.53b11f39a3.webp')}}
@media(max-width:760px){body[data-collection=collabs] .catalog-hero{min-height:max(570px,calc(100svh - 132px))}}
@media(max-height:500px) and (min-aspect-ratio:4/3){body[data-collection=collabs] .catalog-hero{min-height:650px}}

/* Responsive cats artwork; product cans remain in the catalogue grid. */
.collection-backdrop[data-scene=cats]{background-image:none}
body[data-collection=cats]{--cats-art:url('assets/widebackground2.8d410d51f6.webp')}
body[data-collection=cats] .collection-backdrops{background:#382061}
body[data-collection=cats] .collection-backdrop[data-scene=cats]{background-image:var(--cats-art);background-size:cover;background-position:center bottom;background-repeat:no-repeat}
body[data-collection=cats] .hero-cans,body[data-collection=cats] .scene-orbit{display:none}
body[data-collection=cats] .catalog-hero{display:flex;flex-direction:column;min-height:max(690px,calc(100svh - 88px))}
body[data-collection=cats] .hero-scene{flex:1;width:100%;min-height:180px;height:auto;margin:18px auto 0;background:none}
body[data-collection=cats] .hero-copy p{min-height:0}
@media(max-aspect-ratio:4/3){body[data-collection=cats]{--cats-art:url('assets/widebackground2x1600x1600.262847e995.webp')}}
@media(max-width:600px) and (max-aspect-ratio:1/1){body[data-collection=cats]{--cats-art:url('assets/widebackground2x1080x1600.fefada988c.webp')}}
@media(max-width:760px){body[data-collection=cats] .catalog-hero{min-height:max(570px,calc(100svh - 132px))}}
@media(max-height:500px) and (min-aspect-ratio:4/3){body[data-collection=cats] .catalog-hero{min-height:650px}}

/* White new-release collection. */
body[data-collection=new]{--page:#fff;--ink:#211336;--muted:#62586f;--accent:#6924d4;--accent-ink:#fff;--line:#d9d1e5;--surface:#f4f0f8;--hero:#fff;--hero-ink:#211336;--tab-surface:#f2edf7;color-scheme:light}
body[data-collection=new] .collection-backdrops{background:#fff}
body[data-collection=new] .catalog-hero .eyebrow,body[data-collection=new] .hero-topline-caption,body[data-collection=new] .hero-copy{text-shadow:none}
body[data-collection=new] .collection-tabs button{border-color:#d9d1e5}
body[data-collection=new] .collection-tabs button[aria-pressed=true]{border-color:#c1f600}
body[data-collection=new] .collection-side{background:#fffdeff0;color:#211336;border-color:#21133635}
/* Same compact wordmark/navigation sizing and scroll behaviour as the partners header. */
.site-header.header{position:fixed;z-index:100;top:0;left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:30px;height:auto;min-height:48px;padding:0 max(28px,calc((100% - 1240px)/2));background:#6d2bd5;color:#fff;border-bottom:1px solid #ffffff30;transform:translateY(-100%);visibility:hidden;pointer-events:none;transition:transform .3s ease,visibility .3s}
.site-header.header.is-visible{transform:translateY(0);visibility:visible;pointer-events:auto}
.site-header.header .wordmark{font:800 20px/1.2 var(--heading);letter-spacing:-.045em;white-space:nowrap;text-align:center;color:#fff}
.site-header.header .wordmark span{color:#c1f600;margin-left:0}
.site-header.header nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 26px;min-width:0}
.site-header.header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:0;padding:10px 0;font:600 10px/1.5 var(--heading);text-transform:uppercase;text-align:center;white-space:nowrap;border-bottom:2px solid transparent;color:#fff;transition:color .2s,border-color .2s}
.site-header.header nav .header-cta,.site-header.header nav a[aria-current]{border-bottom-color:#c1f600}
.site-header.header nav a:hover{color:#c1f600;border-bottom-color:#c1f600}
.site-header.header :focus-visible{outline-color:#c1f600}
.site-header.header ~ main{padding-top:var(--header-height,48px)}
body[data-collection=limited] .catalog-hero,body[data-collection=collabs] .catalog-hero,body[data-collection=cats] .catalog-hero{min-height:max(690px,calc(100svh - var(--header-height,48px)))}
@media(max-width:1100px){.site-header.header nav{gap:4px 16px}.site-header.header nav a{font-size:9px}}
@media(max-width:760px){.site-header.header{flex-wrap:wrap;padding:8px 22px 6px;gap:2px}.site-header.header .wordmark{font-size:18px}.site-header.header nav{order:initial;width:100%;gap:4px 20px}.site-header.header nav a{min-height:32px;padding:8px 0}.site-header.header ~ main{padding-top:var(--header-height,112px)}body[data-collection=limited] .catalog-hero,body[data-collection=collabs] .catalog-hero,body[data-collection=cats] .catalog-hero{min-height:max(570px,calc(100svh - var(--header-height,112px)))}}
@media(max-height:500px) and (min-aspect-ratio:4/3){body[data-collection=limited] .catalog-hero,body[data-collection=collabs] .catalog-hero,body[data-collection=cats] .catalog-hero{min-height:650px}}
@media(prefers-reduced-motion:reduce){.site-header.header{transition:none}}

/* Collection-aware header, aligned with the main site navigation. */
body{--catalog-header-accent:var(--accent)}
body[data-collection=classic]{--catalog-header-accent:#6924d4}
.site-header.header{justify-content:flex-start;padding-inline:max(22px,6.5vw);background:var(--page);color:var(--ink);border-bottom-color:var(--line);transition:transform .3s ease,visibility .3s,background-color .35s,color .35s,border-color .35s}
.site-header.header .wordmark,.site-header.header nav a{color:var(--ink);text-align:left}
.site-header.header .wordmark span{color:var(--catalog-header-accent)}
.site-header.header nav{justify-content:flex-start;text-align:left}
.site-header.header nav a[aria-current]{border-bottom-color:var(--catalog-header-accent)}
.site-header.header nav a:hover{color:var(--catalog-header-accent);border-bottom-color:var(--catalog-header-accent)}
.site-header.header nav .header-cta,.site-header.header nav .header-cta:hover{border-bottom-color:transparent;text-decoration:none}
.site-header.header :focus-visible{outline-color:var(--catalog-header-accent)}
@media(min-width:1440px){.site-header.header{min-height:3.333333vw;gap:2.083333vw}.site-header.header .wordmark{font-size:1.388889vw}.site-header.header nav{gap:.277778vw 1.805556vw}.site-header.header nav a{font-size:.694444vw;padding-block:.694444vw}}
@media(max-width:760px){.site-header.header{justify-content:flex-start;padding-inline:22px}.site-header.header .wordmark{font-size:18px;text-align:left}.site-header.header nav{justify-content:flex-start;gap:4px 14px}}
@media(max-width:420px){.site-header.header nav a{font-size:8px}.site-header.header nav{gap:2px 13px}}
@media(prefers-reduced-motion:reduce){.site-header.header{transition:none}}

/* Illustrated collection scenes already include the product cans. */
body[data-collection]{--catalog-scene-ratio:1344/752}
body[data-collection=new]{--catalog-scene-ratio:1376/768}
body[data-collection=new]{--catalog-scene-ratio:1920/935;--catalog-scene:url('assets/catalog-scene-new.1010269a5b.webp')}
body[data-collection=classic]{--catalog-scene-ratio:1920/935;--catalog-scene:url('assets/catalog-scene-classic.f0f9c17f22.webp')}
body[data-collection=cats]{--catalog-scene-ratio:1920/935;--catalog-scene:url('assets/catalog-scene-cats.632194f4f9.webp')}
body[data-collection=limited]{--catalog-scene-ratio:1920/935;--catalog-scene:url('assets/catalog-scene-limited-wide.dd747408c1.webp')}
body[data-collection=collabs]{--catalog-scene-ratio:1920/935;--catalog-scene:url('assets/catalog-scene-collabs.9a9f64fd3d.webp')}
body[data-collection] .collection-backdrops .collection-backdrop{background-image:none}
body[data-collection=new] .collection-backdrops .collection-backdrop[data-scene=new],
body[data-collection=classic] .collection-backdrops .collection-backdrop[data-scene=classic],
body[data-collection=cats] .collection-backdrops .collection-backdrop[data-scene=cats],
body[data-collection=limited] .collection-backdrops .collection-backdrop[data-scene=limited],
body[data-collection=collabs] .collection-backdrops .collection-backdrop[data-scene=collabs]{background-image:var(--catalog-scene);background-size:contain;background-position:center top;opacity:1}
.collection-backdrop[data-scene=cats]:after{content:none}
body[data-collection] .catalog-hero{position:relative;display:flex;flex-direction:column;min-height:0;aspect-ratio:var(--catalog-scene-ratio);color:#fff}
.catalog-hero .collection-backdrops::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#120c22df 0%,#120c2266 31%,transparent 58%)}
body[data-collection] .catalog-hero .hero-cans,body[data-collection] .catalog-hero .scene-orbit{display:none}
body[data-collection] .catalog-hero .hero-copy{z-index:2;text-shadow:0 1px 8px #000}
body[data-collection] .catalog-hero .hero-copy p{min-height:0}
body[data-collection] .catalog-hero .hero-scene{flex:1;width:100%;height:auto;min-height:0}
@media(max-width:760px), (max-aspect-ratio:1/1){
  body[data-collection] .catalog-hero{min-height:0;aspect-ratio:auto;background:var(--page);color:var(--ink)}
  body[data-collection=new] .collection-backdrops .collection-backdrop[data-scene=new],
body[data-collection=classic] .collection-backdrops .collection-backdrop[data-scene=classic],
body[data-collection=cats] .collection-backdrops .collection-backdrop[data-scene=cats],
body[data-collection=limited] .collection-backdrops .collection-backdrop[data-scene=limited],
body[data-collection=collabs] .collection-backdrops .collection-backdrop[data-scene=collabs]{background-image:none}
  .catalog-hero .collection-backdrops{display:none}
  body[data-collection] .catalog-hero .hero-copy{text-shadow:none}
  body[data-collection] .catalog-hero .hero-scene{flex:none;min-height:0;aspect-ratio:var(--catalog-scene-ratio);max-width:none;margin:20px auto 0;background:var(--catalog-scene) center top/contain no-repeat}
  .catalog-hero .collection-side{top:auto;bottom:24px;transform:none}
}




.catalog-hero .collection-tabs{margin-top:0}
.catalog-hero .hero-topline{justify-content:flex-end}
@media(min-width:1100px){
  .catalog-hero .hero-topline{position:absolute;top:42px;right:clamp(20px,5.5vw,106px)}
}








@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
  body[data-collection=cats] {
    --catalog-scene-ratio: 1600/1200;
    --catalog-scene: url('assets/catalog-scene-cats-square.15e44697ad.webp');
  }
}



@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
  body[data-collection=new] {
    --catalog-scene-ratio: 1600/1200;
    --catalog-scene: url('assets/catalog-scene-new-square.938990dd15.webp');
  }
}

@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
  body[data-collection=limited] {
    --catalog-scene-ratio: 1600/1200;
    --catalog-scene: url('assets/catalog-scene-limited-square.c68f90ba14.webp');
  }
  body[data-collection=collabs] {
    --catalog-scene-ratio: 1600/1200;
    --catalog-scene: url('assets/catalog-scene-collabs-square.7a98a5e618.webp');
  }
}

@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
  body[data-collection=classic] {
    --catalog-scene-ratio: 1600/1200;
    --catalog-scene: url('assets/catalog-scene-classic-square.a82a2f790b.webp');
  }
}

@media (max-width: 760px) and (aspect-ratio < 4/5) {
  body[data-collection=classic] {
    --catalog-scene-ratio: 864/1280;
    --catalog-scene: url('assets/catalog-scene-classic-phone.c95a51b4a0.webp');
  }
}

@media (max-width: 760px) and (aspect-ratio < 4/5) {
  body[data-collection=new] {
    --catalog-scene-ratio: 1080/1600;
    --catalog-scene: url('assets/catalog-scene-new-phone.484bcc57e0.webp');
    --phone-art-height: calc(100vw * 1600 / 1080);
  }
  body[data-collection=cats] {
    --catalog-scene-ratio: 1080/1600;
    --catalog-scene: url('assets/catalog-scene-cats-phone.78f2a59333.webp');
    --phone-art-height: calc(100vw * 1600 / 1080);
  }
  body[data-collection=limited] {
    --catalog-scene-ratio: 1080/1600;
    --catalog-scene: url('assets/catalog-scene-limited-phone.6c6bc8123d.webp');
    --phone-art-height: calc(100vw * 1600 / 1080);
  }

  body[data-collection=collabs] {
    --catalog-scene-ratio: 1080/1600;
    --catalog-scene: url('assets/catalog-scene-collabs-phone.91c8479fca.webp');
    --phone-art-height: calc(100vw * 1600 / 1080);
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero {
    --hero-ink: #fff;
    --tab-surface: #211138d9;
    min-height: calc(100svh - var(--header-height, 72px));
    color: var(--hero-ink);
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero .collection-backdrops {
    display: block;
    overflow: hidden;
    background: #35261e;
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero .collection-backdrops::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: var(--catalog-scene) center top / cover no-repeat;
    filter: blur(24px) brightness(.68);
  }
  body[data-collection=new] .collection-backdrops .collection-backdrop[data-scene=new],
  body[data-collection=classic] .collection-backdrops .collection-backdrop[data-scene=classic],
  body[data-collection=cats] .collection-backdrops .collection-backdrop[data-scene=cats],
  body[data-collection=limited] .collection-backdrops .collection-backdrop[data-scene=limited],
  body[data-collection=collabs] .collection-backdrops .collection-backdrop[data-scene=collabs] {
    background-image: var(--catalog-scene);
    background-size: contain;
    background-position: center bottom;
    /* Fade the top edge into the backdrop when the viewport is taller than the artwork. */
    --art-top: max(0px, calc(100% - var(--phone-art-height, 100vw * 1280 / 864)));
    mask-image: linear-gradient(to bottom, transparent var(--art-top), #000 calc(var(--art-top) + 60px));
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero .collection-backdrops::after {
    background: linear-gradient(180deg, #10091bd9 0%, #10091b70 30%, transparent 55%);
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero .hero-scene {
    flex: 1;
    aspect-ratio: auto;
    min-height: 120px;
    background: none;
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero .hero-copy {
    text-shadow: 0 1px 8px #000;
  }
  body:is([data-collection=new], [data-collection=classic], [data-collection=cats], [data-collection=limited], [data-collection=collabs]) .catalog-hero .collection-side {
    top: 52%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* Transparent product tile backgrounds. */
.catalog-products .product-art { background: transparent; }