.pack-boutique {
  --ice: #deedcc;
  --ink: #101613;
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vh, 32px);
  overflow: hidden;
  padding: clamp(34px, 5vh, 66px) max(16px, env(safe-area-inset-right)) clamp(62px, 8vh, 96px);
  text-align: center;
  color: #f1f3ec;
  background:
    radial-gradient(ellipse at 49% 45%, #35413b 0%, #1b2321 35%, transparent 64%),
    linear-gradient(152deg, #101515, #0b1011 65%, #161916);
}
.pack-boutique::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .095;
  background: linear-gradient(90deg, #121619 3%, transparent 45%, #141819 94%), url('assets/sound/filmine-cinematic-sound-effects.webp') center 42% / cover;
  filter: blur(9px) saturate(.55);
  pointer-events: none;
}
.boutique-heading {display: grid; gap: 13px; justify-items: center}
.boutique-wordmark {font: 570 11px/1.3 Geist, sans-serif; letter-spacing: .38em; text-indent: .38em; text-transform: uppercase; color: #d3ddd1}
.boutique-heading h2 {margin: 0; font: 470 clamp(43px, 5.4vw, 76px)/1 Geist, sans-serif; letter-spacing: -.077em; text-wrap: balance}
.boutique-heading h2 em {font: italic 400 1.02em/.98 Georgia, serif; margin-inline-start: .055em; letter-spacing: -.065em; color: var(--ice); white-space: nowrap}
.boutique-specs {font: 480 13px/1.4 Geist, sans-serif; color: #c7d0c7}
.boutique-specs span {display: inline-block; color: #929d90; margin-inline: .65em}
.boutique-purchase {display: grid; gap: 10px; justify-items: center}
.boutique-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 23px; min-height: 52px; border: 1px solid #f1fae0c2; border-radius: 999px;
  color: #182119; font: 620 15px/1.2 Geist, sans-serif; letter-spacing: -.025em;
  background: radial-gradient(90% 100% at 25% 0%,#fafff1cc,transparent 70%),linear-gradient(145deg,#d7e7c8,#c0d6b9 52%,#dce8c9);
  box-shadow: inset 0 1px 2px #fff, inset 0 -2px 4px #728f7a69,0 6px 28px #0a120a68;
  transition: transform .25s ease, box-shadow .25s ease;
}
.boutique-buy strong {font-weight: 530; padding-left: 14px; border-left: 1px solid #354e3940}
.boutique-download {font: 490 12px/1.3 Geist,sans-serif; padding: 7px; color: #c7d2c7; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #9cac9c70}
.pack-art {
  width: min(100%, 720px);
  height: clamp(332px, 48svh, 488px);
  margin: 0;
  overflow: hidden;
  border: 1px solid #dce7da48;
  border-radius: 23px;
  background: #202922;
  box-shadow: 0 16px 46px #03080659;
}
.pack-art img {display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50.5%}
.pack-audition {width:min(100%,450px); display:grid; justify-items:center; gap:9px}
.pack-audition h3 {margin:0; font:510 clamp(22px,2.2vw,30px)/1.12 Geist,sans-serif; letter-spacing:-.055em}
.sound-picker {display:flex; flex-wrap:wrap; justify-content:center; gap:3px}
.sound-picker button {
  padding:4px 10px; min-height:31px; border:1px solid transparent; border-radius:100px;
  color:#c3cfc3; background:transparent; font:500 12px/1.3 Geist,sans-serif;
}
.sound-picker button:hover {color:white}
.sound-picker button[aria-pressed="true"] {background:linear-gradient(155deg,#d9ead420,#63826a24); border-color:#dfedda56; color:#f4f9ec}
.pack-audition audio {max-width:100%}
.micro-player {
  width:min(85%,298px); min-height:42px; display:grid; grid-template-columns:33px minmax(0,1fr) auto;
  align-items:center; gap:9px; padding:2px 12px 2px 4px; border:1px solid #e5f2de75; border-radius:100px;
  background:radial-gradient(at 20% 0%,#e4f8e727,transparent 60%),linear-gradient(155deg,#5d736651,#31473b40 57%,#91ac8b30);
  -webkit-backdrop-filter:blur(17px) saturate(145%); backdrop-filter:blur(17px) saturate(145%);
  box-shadow:inset 0 1px 1px #fafde56b,inset 0 -1px 1px #c9e1cf27,0 4px 14px #030d0738;
}
.micro-player[hidden],.sound-picker[hidden],.pack-audition audio:not([controls]) {display:none}
.micro-play {width:33px;height:33px;display:grid;place-content:center;padding:0;border:1px solid #f0ffe245;border-radius:50%;background:linear-gradient(165deg,#edf7d832,#9bb29d13);color:#f7ffed}
.micro-play span {width:10px;height:12px;margin-left:2px;background:currentColor;clip-path:polygon(4% 0,100% 50%,4% 100%)}
.micro-player[data-playing="true"] .micro-play span {clip-path:none;margin:0;background:linear-gradient(to right,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.micro-seek {display:block;position:relative;height:34px;min-width:0;border-radius:4px}
.micro-seek canvas {display:block;width:100%;height:100%;pointer-events:none}
.micro-seek input {width:100%;height:100%;inset:0;position:absolute;opacity:0;margin:0;cursor:pointer}
.micro-seek:focus-within {outline:2px solid var(--ice);outline-offset:2px}
.micro-time {font:500 10px/1 var(--mono);font-variant-numeric:tabular-nums;color:#e1ebdc}
.pack-film {
  width:min(100%,420px);
  border-block:1px solid #cadccc36;
  text-align:left;
  scroll-margin-top:24px;
}
.pack-film summary {
  list-style:none; display:grid; grid-template-columns:40px 1fr 32px; gap:14px;
  align-items:center; padding:12px 9px; cursor:pointer;
}
.pack-film summary::-webkit-details-marker {display:none}
.pack-film summary:focus-visible {outline:2px solid var(--ice);outline-offset:4px}
.pack-film summary img {width:40px;height:47px;object-fit:cover;object-position:50% 35%;border-radius:8px}
.pack-film-name {display:grid; gap:2px}
.pack-film-name strong {font:550 17px/1.2 Geist,sans-serif;letter-spacing:-.045em}
.pack-film-name small {font:450 12px/1.4 Geist,sans-serif;color:#bbc7ba}
.film-trigger {width:29px;height:29px;display:grid;place-content:center;border-radius:50%;border:1px solid #d9e7d240;background:#dae7d20b}
.film-trigger::after {content:"";width:7px;height:7px;border-right:1.5px solid #dae7d6;border-bottom:1.5px solid #dae7d6;transform:translateY(-1px) rotate(45deg)}
.pack-film[open] .film-trigger::after {transform:translateY(2px) rotate(225deg)}
.pack-film-body {display:grid;justify-items:center;gap:12px;padding:3px 0 17px}
.pack-film-body video {width:auto;height:clamp(200px,35svh,320px);max-width:100%;display:block;object-fit:contain;border-radius:12px;background:#090e0c}
.pack-playback-status:empty {display:none}
.pack-playback-status {font:500 13px/1.5 Geist,sans-serif}
@media (max-width:620px) {
  .boutique-heading h2 {font-size:clamp(43px,10vw,61px)}
  .boutique-heading h2 em {display:block;margin-inline-start:0}
  .pack-art {height:clamp(338px, 49svh, 445px);border-radius:18px}
  .sound-picker {gap:0}
  .sound-picker button {padding-inline:8px}
}
@media (hover:hover) {.boutique-buy:hover {transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce) {.boutique-buy {transition:none}}

/* Shared light and rim on the interactive glass surfaces. */
.pack-boutique :is(.sound-picker button,.micro-player,.pack-film,.boutique-buy,.boutique-creator) {
  --light: 30%;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}
.pack-audition {width:min(100%,500px);gap:12px}
.pack-audition h3 {font-size:clamp(26px,2.5vw,36px);font-weight:475}
.pack-audition h3 em {color:#e0ecd3;font:italic 400 1.04em Georgia,serif;letter-spacing:-.055em}
.sound-picker {position:relative;isolation:isolate;gap:5px;padding:4px;border-radius:26px;max-width:100%}
.sound-picker button {
  z-index:1; position:relative;min-height:35px;padding:5px 13px;border:1px solid #b5cdc34d;
  color:#d9e3dc;
  background:radial-gradient(ellipse 82% 130% at var(--light) -38%,#f7fff57a,transparent 78%),
    linear-gradient(155deg,#bad1bf1f,#111e1a5c 63%,#a9baa326);
  box-shadow:inset 0 1px 1px #fffff46b,inset 0 -2px 4px #b2cac724,0 3px 8px #03090657;
  transition:color .2s,border-color .23s,background-color .25s,transform .3s cubic-bezier(.2,.8,.2,1.2);
}
.sound-picker button[aria-pressed="true"] {
  color:#142119;border-color:#efffdabf;
  background:radial-gradient(ellipse 80% 90% at var(--light) 0%,#fffff5d9,transparent 84%),linear-gradient(155deg,#d7ecd3,#adcdb6 65%,#e0ecd3);
  box-shadow:inset 0 1px 2px #fff, inset 0 -2px 4px #6c977e70,0 3px 11px #152e215e;
}
.sound-picker .liquid-drop {
  position:absolute;z-index:0;left:0;top:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(150deg,#fcffeaac,#c0dfc16e 55%,#8ea799a1);
  box-shadow:inset 0 1px 2px #fff9,0 0 5px #c5dfc441;
}
.micro-player {
  background:radial-gradient(ellipse 92% 115% at var(--light) -30%,#edfff488,transparent 76%),linear-gradient(145deg,#baceba3d,#25393078 54%,#94b4a345);
  box-shadow:inset 0 1px 2px #fffff9b3,inset 0 -1px 2px #d6ebd557,0 5px 14px #01080370;
}
.pack-film {
  position:relative;width:min(100%,422px); border:1px solid #c3d8cb66;border-radius:32px;
  background:radial-gradient(ellipse 76% 115px at var(--light) -35px,#e7ffec4f,transparent 80%),linear-gradient(145deg,#72877b3b,#2b40364f 62%,#72857c42);
  box-shadow:inset 0 1px 1px #fffff78a,inset 0 -1px 2px #c5d5c536,0 8px 24px #0005;
}
.pack-film summary {padding:10px 17px 10px 12px;border-radius:inherit}
.pack-film summary img {border-radius:22px;box-shadow:0 1px 3px #0006}
.pack-film .film-trigger {background:linear-gradient(145deg,#e7ffe533,#627f6c33);box-shadow:inset 0 1px 2px #efffe45e}
.film-trigger::after {transition:transform .34s cubic-bezier(.2,.9,.26,1.2)}
.pack-film[open] {border-radius:28px}
.pack-film-body {overflow:hidden}
.boutique-purchase {gap:12px;width:min(100%,370px)}
.boutique-buy, .boutique-creator {position:relative;isolation:isolate;width:100%;overflow:hidden}
.boutique-buy {
  min-height:65px;border-radius:44px;font-size:18px;gap:16px;
  background:radial-gradient(ellipse 65% 150% at var(--light) -40%,#fffff1fa,transparent 80%),linear-gradient(154deg,#e5f6cd,#b3d6b6 56%,#e4f1cc);
  box-shadow:inset 0 2px 2px #fffff8, inset 0 -3px 6px #64836b70,0 5px 22px #132719a3;
}
.boutique-creator {
  border:1px solid #e2cdfe80;border-radius:32px; min-height:59px;cursor:default;
  display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;align-items:center;
  column-gap:20px;row-gap:2px;padding:8px 16px;opacity:1;color:#f3eaff;
  background:radial-gradient(ellipse 66% 125% at var(--light) -30%,#f5dcff68,transparent 82%),linear-gradient(155deg,#7863907a,#4c365981 57%,#80618383);
  box-shadow:inset 0 1px 2px #fff3ffad,inset 0 -2px 4px #cfb1e736,0 5px 17px #0c071a4d;
}
.boutique-creator span {font:590 16px/1.1 Geist,sans-serif;letter-spacing:-.035em;text-align:left}
.boutique-creator small {grid-column:1;font:450 11px/1.3 Geist,sans-serif;color:#eee1f3}
.boutique-creator i {grid-column:2;grid-row:1/3;font:520 11px/1.2 Geist,sans-serif;color:#f5e9fb;padding-left:16px;border-left:1px solid #d9bed564}
.boutique-buy::after,.boutique-creator::after {
  content:"";pointer-events:none;position:absolute;inset:1px 12% auto;height:35%;border-top:1px solid #fffff978;border-radius:50%;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .sound-picker button:hover {transform:translateY(-2px) scale(1.055)}
  .boutique-buy:hover {transform:translateY(-3px) scale(1.025)}
}
@media(max-width:500px){
  .sound-picker{gap:3px;padding-inline:0}
  .sound-picker button{padding-inline:9px;min-height:34px}
  .boutique-buy{font-size:16px}
}
@media(max-width:360px){
  .sound-picker{gap:3px 5px;max-width:270px}
  .sound-picker button{padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){
  .sound-picker button,.film-trigger::after,.boutique-buy {transition:none}
  .sound-picker .liquid-drop{display:none}
}