:root {
  --gold: #a87424;
  --ink: #241b24;
  --muted: #756a70;
  --panel: #fffdf9;
  --pack-color: #9b6b2f;
}

html {
  scrollbar-color: #b77a2f #260711;
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  border-left: 1px solid #d7a64c2e;
  background: linear-gradient(180deg, #260711, #4a0d1d 48%, #1b040a);
  box-shadow: inset 2px 0 5px #09010466;
}

html::-webkit-scrollbar-thumb {
  min-height: 72px;
  border: 2px solid #2b0711;
  border-radius: 999px;
  background: linear-gradient(180deg, #e5be67, #a86924 54%, #714116);
  box-shadow:
    inset 0 1px #fff4bcaa,
    0 0 10px #e5b95f33;
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f2d27f, #c48731 54%, #84501c);
}

html::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

html::-webkit-scrollbar-corner {
  background: #1b040a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: #310914;
  font: 14px/1.42 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }

.shop-sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 17% 8%, #b9445d 0, transparent 31%),
    radial-gradient(circle at 82% 18%, #7c1d35 0, transparent 36%),
    linear-gradient(142deg, #280610 0%, #5c1026 46%, #350713 76%, #19040a 100%);
}

.shop-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 16%, color-mix(in srgb, var(--pack-color) 22%, transparent), transparent 38%),
    linear-gradient(115deg, #ef9baf1c 0 38%, transparent 76%);
  transition: background .5s ease;
}

.shop-header {
  width: min(1420px, calc(100% - 40px));
  min-height: 58px;
  margin: 10px auto 8px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #b88b3f45;
  border-radius: 14px;
  background: linear-gradient(120deg, #fffaf5ee, #f6e7e6eb);
  box-shadow: 0 18px 50px #18040b66;
  backdrop-filter: blur(18px);
}

.shop-header .brand {
  justify-self: start;
}

.shop-header .availability {
  justify-self: end;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #edcd7366;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 24px #593f232b;
}

.brand strong {
  font: 700 clamp(1.05rem, 1.65vw, 1.45rem) Georgia, serif;
  letter-spacing: -.025em;
}

.header-model-news {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid #a63b5855;
  border-radius: 999px;
  color: #64162c;
  background: #fff8f2c9;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .015em;
  box-shadow: inset 0 1px #fff, 0 8px 22px #70162b14;
}

.pixel-owl {
  width: 28px;
  height: 26px;
  position: relative;
  flex: 0 0 auto;
  display: block;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  animation: pixel-owl-hop 2.8s steps(1, end) infinite;
}

.pixel-owl__body {
  width: 20px;
  height: 19px;
  position: absolute;
  left: 4px;
  top: 4px;
  display: block;
  border: 3px solid #42111f;
  border-radius: 4px 4px 7px 7px;
  background: #c86b63;
  box-shadow: inset 0 -5px #9c3448;
}

.pixel-owl__ear {
  width: 6px;
  height: 7px;
  position: absolute;
  top: 0;
  z-index: 1;
  background: #42111f;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.pixel-owl__ear--left { left: 4px; }
.pixel-owl__ear--right { right: 4px; }

.pixel-owl__eye {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 4px;
  border: 1px solid #fff2c2;
  border-radius: 1px;
  background: #201019;
  animation: pixel-owl-blink 3.4s steps(1, end) infinite;
}

.pixel-owl__eye--left { left: 2px; }
.pixel-owl__eye--right { right: 2px; }

.pixel-owl__beak {
  width: 5px;
  height: 4px;
  position: absolute;
  left: 5px;
  top: 10px;
  background: #f1bd4e;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.pixel-owl__wing {
  width: 7px;
  height: 10px;
  position: absolute;
  top: 9px;
  background: #7d263c;
  border-radius: 2px;
  animation: pixel-owl-wing 1.4s steps(2, end) infinite;
}

.pixel-owl__wing--left { left: 0; transform-origin: right center; }
.pixel-owl__wing--right { right: 0; transform-origin: left center; animation-direction: reverse; }

@keyframes pixel-owl-hop {
  0%, 78%, 100% { transform: translateY(0) rotate(0); }
  82% { transform: translateY(-3px) rotate(-2deg); }
  88% { transform: translateY(0) rotate(2deg); }
  94% { transform: translateY(-1px) rotate(0); }
}

@keyframes pixel-owl-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 97% { transform: scaleY(.2); }
}

@keyframes pixel-owl-wing {
  0%, 78%, 100% { transform: rotate(0); }
  84%, 92% { transform: rotate(-18deg); }
}

.availability {
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #d7b85b70;
  border-radius: 11px;
  color: #4b3527;
  background: linear-gradient(145deg, #fff8e6, #f1e4ca);
  font-size: clamp(.72rem, 1vw, .86rem);
  font-weight: 850;
}

.availability small,
.eyebrow {
  color: var(--gold);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}

main {
  width: min(1420px, calc(100% - 40px));
  margin: auto;
  padding: 0 0 26px;
}

.shop-hero {
  min-height: 112px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, .4fr);
  align-items: center;
  gap: 20px;
  padding: 17px 22px;
  border: 1px solid #ddb95950;
  border-radius: 16px;
  background: #fffdf9ee;
  box-shadow: 0 24px 65px #7958341a;
}

.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  inset: 8px 235px 8px auto;
  width: min(28vw, 300px);
  background: url('/shop/brand-logo.png?v=20260827-compact') center / contain no-repeat;
  opacity: .16;
}

.shop-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #fffdf9fa 0 48%, #fffdf9e3 70%, color-mix(in srgb, var(--pack-color) 11%, #fffdf9) 100%);
}

.shop-hero h1,
.pack-copy h2 {
  margin: .18rem 0;
  font-family: Georgia, serif;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}

.shop-hero h1 { font-size: clamp(1.65rem, 3vw, 2.7rem); }

.shop-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 5px 0 0;
  color: #6c6165;
  font-size: .84rem;
  line-height: 1.4;
}

.shop-hero aside {
  padding: 10px 13px;
  display: grid;
  gap: 3px;
  border: 1px solid #edd17a66;
  border-radius: 11px;
  background: #fffaf0e8;
}

.shop-hero aside span,
.shop-hero aside small { color: var(--muted); }
.shop-hero aside strong { color: #453122; font-size: .95rem; }

.transparency-notice {
  margin: 14px 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
  border: 1px solid #d8bd7045;
  border-radius: 12px;
  background: #fffdf9e8;
}
.transparency-notice p { margin: 0; color: #675a60; font-size: .7rem; line-height: 1.45; }
.transparency-notice p + p { padding-left: clamp(20px, 3vw, 42px); border-left: 1px solid #d8bd7055; }
.transparency-notice strong { color: #4f252f; }

.pack-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0;
}

.pack-tabs button {
  appearance: none;
  min-width: 0;
  min-height: 50px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid #d8bd7047;
  border-radius: 11px;
  color: var(--ink);
  background: linear-gradient(145deg, #fffdfa, #f5ede5);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.pack-tabs button::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -60px;
  bottom: -85px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pack-color) 34%, transparent);
  filter: blur(7px);
}

.pack-tabs button:hover,
.pack-tabs button.is-active {
  transform: translateY(-2px);
  border-color: #efd27c;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pack-color) 15%, #fffdf9), #fffaf3);
  box-shadow: 0 12px 28px #7f5e351c, inset 0 0 0 1px #b88b3f20;
}

.pack-tab-icon {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #e9c96b55;
  border-radius: 10px;
  color: var(--gold);
  background: linear-gradient(145deg, #fff5dc, #ead6b8);
  box-shadow: inset 0 1px #fff2;
}

.pack-tab-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pack-tab--bestiaire .pack-tab-icon svg,
.pack-tab--heritage .pack-tab-icon svg { fill: currentColor; stroke: none; }

.pack-tab-copy { min-width: 0; display: grid; gap: 3px; }
.pack-tab-copy strong { font-size: .82rem; }
.pack-tab-copy small { font-size: .68rem; }
.pack-tab-copy small { overflow: hidden; color: #776b70; text-overflow: ellipsis; white-space: nowrap; }

.pack-tab-price {
  min-width: 54px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #f0cf7066;
  border-radius: 999px;
  color: #493224;
  background: #fffaf0;
  box-shadow: inset 0 1px #fff1;
}

.pack-tab-price strong { font: 700 .95rem Georgia, serif; }
.pack-tab-price small { font-size: .7rem; }
.pack-tab-price small { color: var(--gold); font-weight: 850; }

.catalog-tabs {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin: 9px 0;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid #d8bd7045;
  border-radius: 12px;
  background: #fffdf9e8;
  box-shadow: 0 12px 28px #79583414;
  scrollbar-width: none;
}

.catalog-tabs::-webkit-scrollbar { display: none; }

.catalog-tabs button {
  min-width: 0;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #675b61;
  background: #f5eee7;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.catalog-tabs button:first-child {
  color: #fffaf1;
  background: linear-gradient(145deg, #684c2e, #3c2a25);
}

.catalog-tabs button span { margin-right: 6px; color: var(--gold); }

.catalog-tabs button:hover,
.catalog-tabs button.is-active {
  border-color: #e8c96f66;
  color: #24171b;
  background: linear-gradient(145deg, #ffe7a0, #cfa344);
}

.catalog-tabs button:first-child.is-active { color: #24170f; }

.catalog-view[hidden] { display: none !important; }

.packs-view { display: grid; gap: 0; }

.pack-visual-disclosure {
  width: fit-content;
  max-width: calc(100% - 16px);
  margin: 2px 8px 9px auto;
  padding: 7px 12px;
  border: 1px solid #e7bd7766;
  border-radius: 999px;
  color: #fff8ec;
  background: linear-gradient(135deg, #65172e, #3e0b1c);
  box-shadow: 0 9px 22px #31091438, inset 0 1px #ffffff20;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .01em;
}

.pack-stage {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr);
  overflow: hidden;
  border: 1px solid #d8bd7045;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 28px 80px #79583420;
}

.pack-visual {
  min-height: 560px;
  position: relative;
  margin: 0;
  padding: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f8f1e8, #fffdf9);
}

.pack-visual img {
  width: min(100%, 500px);
  max-height: 590px;
  display: block;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 55px #5b3f2926;
}

.wand-view,
.familiar-view {
  overflow: hidden;
  border: 1px solid #b88b3f4d;
  border-radius: 18px;
  background: #3e1e29;
  box-shadow: 0 28px 80px #79583420;
}

.model-stage {
  min-height: 560px;
  position: relative;
  overflow: hidden;
  padding-top: 10px;
  background:
    radial-gradient(circle at 50% 38%, #8e3549 0, #641a31 34%, #3a0c1d 68%, #18050c 100%);
}

.model-update-notice {
  width: auto;
  position: relative;
  z-index: 2;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 12px;
  padding: 10px 22px;
  border: 2px solid #f2c85f;
  border-radius: 999px;
  color: #fff5d1;
  background: linear-gradient(135deg, #4b0d1d 0%, #701b31 52%, #3a0917 100%);
  box-shadow: 0 0 0 3px #5c122777, 0 10px 24px #17020866, inset 0 1px 0 #fff2ba33;
  font-size: clamp(.9rem, 1.35vw, 1.08rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  backdrop-filter: blur(8px);
}

.model-update-notice span {
  color: #ffd976;
  filter: drop-shadow(0 0 6px #f3bd4b99);
}
.model-update-notice strong {
  margin-left: 7px;
  color: #fff0b7;
  white-space: nowrap;
}

model-viewer {
  display: block;
  width: 100%;
  height: 452px;
  overflow: hidden;
  background: transparent !important;
  --poster-color: transparent;
  cursor: grab;
  touch-action: none;
  transition: opacity .16s ease;
}

model-viewer:active { cursor: grabbing; }

model-viewer::part(default-progress-bar),
model-viewer::part(default-progress-mask) {
  display: none;
}

model-viewer.is-loading { opacity: .62; }

.viewer-status {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  padding: 8px 12px;
  border: 1px solid #b88b3f55;
  border-radius: 999px;
  color: #5c4c4a;
  background: #fffdf9e8;
  box-shadow: 0 12px 30px #7958341c;
  font-size: .72rem;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.viewer-status.is-visible {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.viewer-status.is-error {
  max-width: min(340px, calc(100% - 40px));
  border-color: #b85a5070;
  color: #7b2f2b;
  background: #fff2efef;
  text-align: center;
}

.viewer-help {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid #bfa46355;
  border-radius: 999px;
  color: #5f5257;
  background: #fffdf2e8;
  font-size: .67rem;
  white-space: nowrap;
}

.viewer-help span { color: var(--gold); }

.wand-reset {
  display: block;
  margin: 0 auto 10px;
  position: relative;
  border: 1px solid #d9b66b88;
  border-radius: 999px;
  padding: 7px 14px;
  color: #fff2d0;
  background: #421225;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
}
.wand-reset:hover { background: #68213b; }
.wand-reset:focus-visible { outline: 2px solid #f2c85f; outline-offset: 3px; }
.wand-viewport { position: relative; isolation: isolate; overflow: hidden; }
.wand-viewport model-viewer { position: relative; z-index: 1; }
.wand-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wand-particles-back { z-index: 0; }
.wand-particles-front { z-index: 2; }
.wand-view-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 8px 10px; }
.wand-view-actions .wand-reset { margin: 0; }
.wand-view-actions [hidden] { display: none; }
#wand-effects-toggle[aria-pressed="true"] { color: #ffe3a2; border-color: #f2c85f; background: #693325; }
.wand-view .viewer-help { bottom: 55px; max-width: calc(100% - 24px); width: max-content; white-space: normal; text-align: center; }

.wand-browser,
.familiar-browser {
  position: relative;
  z-index: 3;
  inset: auto;
  padding: 0 16px;
}

.wand-selector,
.familiar-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 6px;
  padding: 2px;
}

.wand-selector button,
.familiar-selector button {
  min-width: 0;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d6b76466;
  border-radius: 999px;
  color: #54484d;
  background: #fffdf9;
  cursor: pointer;
  font-size: .68rem;
  user-select: none;
}

.wand-selector button.is-active,
.familiar-selector button.is-active {
  border-color: var(--gold);
  color: #1a1012;
  background: var(--gold);
  font-weight: 850;
}

.familiar-stage {
  min-height: 630px;
}

.wand-collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin: 4px auto 22px;
}
.wand-collections > button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e3c28b55;
  border-radius: 14px;
  color: #f8ebd4;
  background: #22081280;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wand-collections > button:hover { border-color: #e3c28b; background: #461525; }
.wand-collections > button.is-active { border-color: #e6bd66; background: linear-gradient(120deg, #74422d, #441525); box-shadow: inset 0 0 0 1px #e6bd6644; }
.wand-collections > button:focus-visible,
.wand-selector button:focus-visible { outline: 2px solid #ffdc91; outline-offset: 3px; }
.wand-collection-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #edca8555; border-radius: 12px; color: #f7d88e; font-size: 2rem; }
.wand-collection-copy { flex: 1; min-width: 0; }
.wand-collection-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.05rem; }
.wand-collection-copy small { display: block; margin-top: 5px; color: #deccbd; font-size: .73rem; line-height: 1.5; }
.wand-collection-new { padding: 3px 6px; border-radius: 5px; background: #e9c57e; color: #421325; font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wand-collection-count { flex-shrink: 0; color: #e2c28c; font-size: .72rem; }
.wand-collection-caption { max-width: 1080px; margin: 0 auto 10px; color: #e4ccb4; font-size: .72rem; }
.wand-selector { max-width: 1080px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.wand-selector button { min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: .76rem; line-height: 1.4; }
.wand-selector button:hover { border-color: #f6d385; background: #f8e9c7; }
.wand-selector button.is-active { background: #e9c57e; border-color: #f8dca2; }

.familiar-stage model-viewer {
  height: 500px;
}

.familiar-flames {
  width: min(520px, 76%);
  height: 300px;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 53%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease, filter .3s ease;
  mix-blend-mode: screen;
}

.familiar-flames__glow {
  width: 48%;
  aspect-ratio: 1.45;
  position: absolute;
  left: 50%;
  bottom: 17%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff3a0b8 0 8%, #ffad29a8 24%, #ff4d084f 48%, transparent 72%);
  filter: blur(10px);
  transform: translateX(-50%);
  animation: familiar-fire-breathe 1.2s ease-in-out infinite alternate;
}

.familiar-flames i {
  --spark-left: 50%;
  --spark-drift: 0px;
  --spark-delay: 0s;
  --spark-duration: 1.35s;
  width: 8px;
  height: 17px;
  position: absolute;
  left: var(--spark-left);
  bottom: 23%;
  border-radius: 80% 15% 65% 35%;
  background: linear-gradient(#fffbd1 0 14%, #ffd34d 32%, #ff741d 70%, #b7190700);
  box-shadow: 0 0 8px #ffcc57, 0 0 18px #ff5a17a8;
  opacity: 0;
  transform: translateX(-50%) rotate(42deg) scale(.55);
  animation: familiar-ember-rise var(--spark-duration) ease-out var(--spark-delay) infinite;
}

.familiar-flames i:nth-of-type(1) { --spark-left: 34%; --spark-drift: -32px; --spark-delay: -.1s; }
.familiar-flames i:nth-of-type(2) { --spark-left: 42%; --spark-drift: 18px; --spark-delay: -.75s; --spark-duration: 1.1s; }
.familiar-flames i:nth-of-type(3) { --spark-left: 48%; --spark-drift: -12px; --spark-delay: -.35s; --spark-duration: 1.55s; }
.familiar-flames i:nth-of-type(4) { --spark-left: 55%; --spark-drift: 26px; --spark-delay: -.95s; }
.familiar-flames i:nth-of-type(5) { --spark-left: 62%; --spark-drift: -18px; --spark-delay: -.55s; --spark-duration: 1.18s; }
.familiar-flames i:nth-of-type(6) { --spark-left: 69%; --spark-drift: 35px; --spark-delay: -.2s; --spark-duration: 1.62s; }
.familiar-flames i:nth-of-type(7) { --spark-left: 29%; --spark-drift: 28px; --spark-delay: -1.15s; }
.familiar-flames i:nth-of-type(8) { --spark-left: 74%; --spark-drift: -30px; --spark-delay: -.48s; --spark-duration: 1.28s; }
.familiar-flames i:nth-of-type(9) { --spark-left: 38%; --spark-drift: -48px; --spark-delay: -.86s; --spark-duration: .92s; }
.familiar-flames i:nth-of-type(10) { --spark-left: 46%; --spark-drift: 42px; --spark-delay: -.24s; --spark-duration: 1.04s; }
.familiar-flames i:nth-of-type(11) { --spark-left: 53%; --spark-drift: -38px; --spark-delay: -.66s; --spark-duration: .86s; }
.familiar-flames i:nth-of-type(12) { --spark-left: 59%; --spark-drift: 50px; --spark-delay: -1.05s; --spark-duration: 1.14s; }
.familiar-flames i:nth-of-type(13) { --spark-left: 24%; --spark-drift: -24px; --spark-delay: -.42s; --spark-duration: 1.02s; }
.familiar-flames i:nth-of-type(14) { --spark-left: 78%; --spark-drift: 22px; --spark-delay: -.8s; --spark-duration: .96s; }
.familiar-flames i:nth-of-type(15) { --spark-left: 31%; --spark-drift: 58px; --spark-delay: -1.2s; --spark-duration: 1.2s; }
.familiar-flames i:nth-of-type(16) { --spark-left: 71%; --spark-drift: -55px; --spark-delay: -.62s; --spark-duration: 1.08s; }

.familiar-stage[data-flame-mode="warm"] .familiar-flames,
.familiar-stage[data-flame-mode="burst"] .familiar-flames {
  opacity: 1;
}

.familiar-stage[data-flame-mode="warm"] .familiar-flames {
  opacity: .52;
  filter: saturate(.85);
}

.familiar-stage[data-flame-mode="warm"] .familiar-flames i:nth-of-type(n + 7) {
  display: none;
}

.familiar-stage[data-flame-mode="burst"] .familiar-flames {
  filter: saturate(1.35) brightness(1.14);
}

.familiar-stage[data-flame-mode="burst"] .familiar-flames__glow {
  width: 64%;
  filter: blur(12px);
  animation-duration: .38s;
}

.familiar-stage[data-flame-mode="burst"] .familiar-flames i {
  width: 10px;
  height: 22px;
  animation-duration: .78s;
}

.familiar-stage[data-flame-mode="sleep"] .familiar-flames {
  opacity: .14;
  filter: saturate(.45);
}

.familiar-stage[data-flame-mode="sleep"] .familiar-flames i {
  display: none;
}

.familiar-stage.is-animation-paused .familiar-flames *,
.familiar-stage.is-animation-paused .familiar-flames i {
  animation-play-state: paused;
}

@keyframes familiar-fire-breathe {
  from { opacity: .68; transform: translateX(-50%) scale(.88, .78); }
  to { opacity: 1; transform: translateX(-50%) scale(1.08, 1.16); }
}

@keyframes familiar-ember-rise {
  0% { opacity: 0; transform: translate(-50%, 24px) rotate(42deg) scale(.4); }
  14% { opacity: .98; }
  68% { opacity: .82; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-drift)), -170px) rotate(235deg) scale(.08); }
}

.familiar-selector {
  width: min(540px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.familiar-selector button {
  padding: 9px 16px;
  font-size: .78rem;
}

.familiar-details {
  padding: 24px clamp(20px, 5vw, 54px);
  border-top: 1px solid #d5b96859;
  background: linear-gradient(145deg, #fffdf9, #f1e7dd);
}

.familiar-copy {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}

.familiar-copy h2 {
  margin: 4px 0 7px;
  color: #31121c;
  font: 700 clamp(1.7rem, 3vw, 2.45rem) Georgia, serif;
}

.familiar-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 0 auto;
  color: #6b5e63;
  font-size: .84rem;
  line-height: 1.5;
}

.familiar-motion-dock {
  width: min(840px, calc(100% - 32px));
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 49px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px 9px 15px;
  border: 1px solid #f0cb715e;
  border-radius: 18px;
  color: #fff7dc;
  background: linear-gradient(135deg, #260711e8, #521125e8 58%, #260711e8);
  box-shadow: 0 14px 42px #12020799, inset 0 1px #fff2b82e;
  backdrop-filter: blur(14px) saturate(1.15);
}

.familiar-motion-caption {
  min-width: 88px;
  display: grid;
  gap: 1px;
  padding-right: 12px;
  border-right: 1px solid #f3d98930;
  line-height: 1.05;
}

.familiar-motion-caption span {
  color: #d6b862;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.familiar-motion-caption strong {
  overflow: hidden;
  color: #fff6d7;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.familiar-animation-list {
  min-width: 0;
  display: grid;
  grid-auto-columns: minmax(82px, 1fr);
  grid-auto-flow: column;
  gap: 6px;
}

.familiar-animation-list button {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #f5df9b29;
  border-radius: 11px;
  color: #f4e7c8;
  background: #fff8df0b;
  cursor: pointer;
  font: 800 .67rem/1.1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}

.familiar-animation-list button:hover {
  transform: translateY(-1px);
  border-color: #f3d27975;
  background: #fff4cc16;
}

.familiar-animation-list button:focus-visible,
.familiar-animation-toggle:focus-visible {
  outline: 2px solid #ffe49a;
  outline-offset: 2px;
}

.familiar-animation-list button.is-active {
  border-color: #ffdc7a;
  color: #2d130e;
  background: linear-gradient(145deg, #ffe299, #dba947);
  box-shadow: 0 6px 18px #08010266, inset 0 1px #fff8d6;
}

.familiar-animation-list svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.familiar-animation-list button[data-icon="search"] svg,
.familiar-animation-list button[data-icon="sleep"] svg {
  fill: none;
  stroke: currentColor;
}

.familiar-animation-toggle {
  width: 40px;
  height: 40px;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid #efd78659;
  border-radius: 50%;
  color: #fff4c9;
  background: #16040b73;
  box-shadow: inset 0 1px #fff1bc1f;
  cursor: pointer;
}

.familiar-animation-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.familiar-animation-toggle[data-state="pause"]::before {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 6px 0 currentColor;
  transform: translate(calc(-50% - 3px), -50%);
}

.familiar-animation-toggle[data-state="play"]::before {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  transform: translate(-36%, -50%);
}

.familiar-animation-toggle:hover {
  border-color: #ffe18c;
  color: #2a110d;
  background: #e5b652;
}

.familiar-animation-toggle:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.familiar-purchase {
  width: min(calc(100% - 28px), 760px);
  margin: 18px auto 24px;
}

.familiar-purchase .paypal-copy > p:not(.eyebrow) strong {
  color: #563314;
}

.pack-copy {
  padding: 23px 24px 20px;
  background: linear-gradient(150deg, #fffdf9, #f5eee8);
}

.pack-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.pack-copy h2 { font-size: clamp(1.75rem, 2.8vw, 2.65rem); }

.selected-price {
  min-width: 88px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 5px;
  padding: 7px 10px 8px;
  border: 1px solid #f0d27988;
  border-radius: 11px;
  color: #1b1111;
  background: linear-gradient(145deg, #ffe6a0, #c99534);
  box-shadow: 0 12px 28px #dbaa3c2b, inset 0 1px #fff9;
}

.selected-price span {
  grid-column: 1 / -1;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.selected-price strong { font: 800 1.25rem Georgia, serif; }
.selected-price small { font-weight: 900; }

.pack-summary,
.pack-closing { color: #6d6166; font-size: .82rem; line-height: 1.42; }

.pack-content {
  margin: 13px 0;
  padding: 13px;
  border: 1px solid #d4b6644d;
  border-radius: 11px;
  background: #fffaf2;
}

.pack-content h3 {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pack-content ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pack-content li { font-size: .82rem; }
.pack-content li { display: flex; align-items: flex-start; gap: 10px; }
.pack-content li span { color: var(--gold); }
.pack-content li p { margin: 0; }

.pack-role { display: flex; align-items: center; gap: 9px; font-size: .82rem; }
.pack-role > span {
  width: 32px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #d9b76255;
  border-radius: 9px;
  color: var(--gold);
}
.pack-role div { display: grid; }
.pack-role small { color: #7e7175; }

.paypal-purchase {
  width: min(100%, 680px);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5c86f66;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff9ec, #eee4da);
  box-shadow: 0 18px 40px #6d4b2a1c;
}

.paypal-copy {
  width: min(100%, 560px);
  margin-inline: auto;
  text-align: center;
}

.paypal-copy h3 {
  margin: 2px 0 5px;
  font: 700 1.05rem Georgia, serif;
}

.paypal-copy > p:not(.eyebrow) { margin: 0 0 7px; color: #6b5f64; font-size: .72rem; line-height: 1.38; }
.paypal-copy > strong { color: #694719; }

.payment-actions { display: grid; gap: 10px; width: min(100%, 440px); text-align: center; }
.payment-open { display: grid; place-items: center; min-height: 50px; padding: 12px 18px; border-radius: 12px; background: #173c8e; color: white; font-weight: 750; text-decoration: none; box-shadow: 0 6px 16px #173c8e25; }
.payment-open:hover { background: #0c2b70; }
.payment-actions p { margin: 0; color: #5b5052; font-size: .8rem; line-height: 1.55; }
.payment-copy { min-height: 44px; border: 1px solid #b49a71; border-radius: 10px; background: #fffaf0; color: #654820; cursor: pointer; font: inherit; font-size: .85rem; }
.payment-actions input { min-width: 0; width: 100%; padding: 12px; border: 1px solid #b49a71; border-radius: 8px; font-size: 16px; }
.payment-status:empty { display: none; }
.payment-qr { width: 100%; text-align: center; }
.payment-qr summary { min-height: 44px; padding: 12px 6px; color: #695332; cursor: pointer; font-size: .8rem; }
.payment-qr .paypal-qr-frame { margin-top: 6px; }

.shop-history { padding: clamp(18px, 4vw, 36px); border: 1px solid #d6b675; border-radius: 20px; background: #fffaf1; color: #372129; }
.shop-history[hidden] { display: none; }
.shop-history h2 { margin: 0; font: 700 1.7rem Georgia, serif; }
.shop-history p { font-size: .9rem; line-height: 1.6; }
.history-stats { margin: 20px 0; padding: 16px; border-radius: 12px; background: #f0dfbc; font-weight: 700; }
.history-feedback:not(:empty) { padding: 12px; border: 1px solid #b49a71; border-radius: 10px; }
.history-tool { margin: 12px 0; padding: 16px; border: 1px solid #ddcba7; border-radius: 12px; }
.history-tool summary { min-height: 32px; cursor: pointer; font-weight: 700; }
.history-tool a { color: #173c8e; }
.history-tool > label { display: grid; gap: 8px; margin-top: 18px; }
.shop-history input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 12px; border: 1px solid #c4b08e; border-radius: 8px; background: white; color: #372129; font-size: 16px; }
.shop-history input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #80304b; }
.history-import-preview { max-height: 480px; overflow: auto; margin: 16px 0; }
.history-import-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-bottom: 1px solid #e5d7bd; cursor: pointer; }
.history-import-row span, .history-payment > div { display: grid; gap: 6px; min-width: 0; }
.shop-history small { color: #77645a; line-height: 1.5; overflow-wrap: anywhere; }
.history-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.history-form label { display: grid; gap: 8px; font-size: .85rem; }
.history-form .history-confirm { display: flex; align-items: flex-start; grid-column: 1 / -1; line-height: 1.6; }
.shop-history button { border: 0; cursor: pointer; font: inherit; }
.shop-history button:disabled { opacity: .5; cursor: default; }
.history-list { display: grid; gap: 10px; margin-top: 18px; }
.history-payment { display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: start; gap: 14px; padding: 16px; border: 1px solid #e0cda8; border-radius: 12px; background: white; overflow-wrap: anywhere; }
.history-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .history-form, .history-payment { grid-template-columns: 1fr; } .history-tool { padding: 12px; } }

.paypal-qr-frame {
  width: 252px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  border: 3px solid #fff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px #0007;
}

.paypal-qr-frame img {
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  width: 158%;
  max-width: none;
  height: auto;
  display: block;
  transform: translate(-50%, -19.3%);
}

.wand-paypal-purchase {
  width: min(calc(100% - 28px), 680px);
  margin: 16px auto 22px;
}

.shop-notice { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 9px; }
.shop-notice div {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #d8bd7040;
  border-radius: 10px;
  color: #66595e;
  background: #fffdf9e8;
}
.shop-notice p { margin: 0; font-size: .76rem; line-height: 1.35; }

.catalog-placeholder {
  min-height: 270px;
  padding: 48px clamp(22px, 6vw, 78px);
  border: 1px solid #d8bd7045;
  border-radius: 18px;
  background: linear-gradient(145deg, #fffdf9, #f1e8df);
  box-shadow: 0 28px 80px #79583420;
}

.catalog-placeholder[hidden] { display: none; }
.catalog-placeholder span { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.catalog-placeholder h2 { margin: 8px 0; font: 700 clamp(1.7rem, 4vw, 3rem) Georgia, serif; }
.catalog-placeholder p { max-width: 680px; color: #6d6065; }

.shop-footer {
  padding: 14px;
  font-size: .78rem;
  color: #786b70;
  font-family: Georgia, serif;
  font-style: italic;
  text-align: center;
}
.shop-footer p { margin: 0 0 7px; }
.shop-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.shop-footer a { color: #d8bcc4; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .7rem; font-style: normal; font-weight: 750; }

@media (max-width: 980px) {
  .shop-header,
  main { width: min(100% - 28px, 900px); }
  .shop-header { grid-template-columns: 1fr auto 1fr; }
  .header-model-news span:last-child { max-width: 170px; line-height: 1.1; }
  .shop-hero { grid-template-columns: 1fr; }
  .shop-hero aside { grid-template-columns: auto 1fr; align-items: baseline; }
  .shop-hero aside small { grid-column: 1 / -1; }
  .pack-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-stage { grid-template-columns: 1fr; }
  .pack-visual { min-height: 460px; }
  .pack-visual img { max-height: 520px; }
  .model-stage { min-height: 510px; }
  model-viewer { height: 408px; }
  .familiar-stage { min-height: 610px; }
  .familiar-stage model-viewer { height: 472px; }
}

@media (max-width: 660px) {
  .shop-header { min-height: 52px; margin-top: 7px; padding: 6px 8px; border-radius: 12px; }
  .brand-logo { width: 34px; height: 34px; border-radius: 8px; }
  .brand { gap: 8px; }
  .brand strong { font-size: .96rem; }
  .shop-header { grid-template-columns: 1fr auto; }
  .header-model-news { justify-self: end; padding: 5px 7px; }
  .header-model-news span:last-child { display: none; }
  .availability { display: none; padding: 6px 8px; font-size: .68rem; }
  .availability small { display: none; }
  .shop-hero { min-height: 0; padding: 13px 14px; border-radius: 14px; }
  .shop-hero h1 { font-size: 1.65rem; }
  .shop-hero p:not(.eyebrow) { font-size: .76rem; }
  .shop-hero aside { display: none; }
  .transparency-notice { grid-template-columns: 1fr; gap: 9px; }
  .transparency-notice p + p { padding: 9px 0 0; border-top: 1px solid #d8bd7055; border-left: 0; }
  .pack-tabs { grid-template-columns: 1fr 1fr; }
  .catalog-tabs { display: flex; }
  .catalog-tabs button { flex: 0 0 auto; min-width: 128px; }
  .catalog-tabs button:first-child { min-width: 104px; margin-right: 3px; }
  .pack-tabs button,
  .pack-tab--soutien,
  .pack-tab--heritage { min-height: 60px !important; }
  .pack-tabs button { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 7px 8px; }
  .pack-tab-icon { width: 28px; border-radius: 8px; }
  .pack-tab-icon svg { width: 17px; height: 17px; }
  .pack-tab-copy strong { font-size: .74rem; }
  .pack-tab-copy small { font-size: .6rem; }
  .pack-tab-price { min-width: 47px; padding: 4px 6px; }
  .pack-tab-price strong { font-size: .82rem; }
  .pack-stage { border-radius: 14px; }
  .pack-visual { min-height: 350px; padding: 12px; }
  .pack-visual-disclosure { margin-right: auto; text-align: center; }
  .pack-visual img { max-height: 420px; border-radius: 10px; }
  .model-stage { min-height: 470px; padding-top: 8px; }
  model-viewer { height: 358px; }
  .model-update-notice { top: auto; padding: 8px 14px; font-size: .82rem; }
  .viewer-help { display: none; }
  .wand-browser,
  .familiar-browser { padding: 0 8px; }
  .wand-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wand-selector button { padding: 8px; font-size: .74rem; }
  .wand-collections { gap: 8px; margin-bottom: 16px; }
  .wand-collections > button { position: relative; display: block; padding: 12px; }
  .wand-collection-symbol { display: none; }
  .wand-collection-copy strong { font-size: .9rem; gap: 5px; }
  .wand-collection-copy small { font-size: .68rem; }
  .wand-collection-count { display: block; margin-top: 8px; font-size: .67rem; }
  .familiar-stage { min-height: 555px; }
  .familiar-stage model-viewer { height: 420px; }
  .familiar-selector button { padding: 7px 8px; font-size: .7rem; }
  .familiar-details { padding: 19px 16px; }
  .familiar-motion-dock { width: calc(100% - 20px); bottom: 14px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; border-radius: 14px; }
  .familiar-motion-caption { display: none; }
  .familiar-animation-list { grid-auto-columns: minmax(60px, 1fr); gap: 4px; }
  .familiar-animation-list button { min-height: 34px; gap: 4px; padding: 5px 6px; font-size: .61rem; }
  .familiar-animation-list svg { width: 13px; height: 13px; }
  .familiar-animation-toggle { width: 36px; height: 36px; }
  .pack-copy { padding: 18px 16px; }
  .pack-copy h2 { font-size: 1.9rem; }
  .pack-heading { gap: 10px; }
  .selected-price { width: fit-content; }
  .paypal-purchase { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .paypal-qr-frame { width: min(238px, 100%); margin: 0 auto; }
  .shop-notice { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .shop-header,
  main { width: calc(100% - 18px); }
  .shop-header { gap: 8px; }
  .brand { min-width: 0; gap: 8px; }
  .brand-logo { width: 32px; height: 32px; border-radius: 8px; }
  .brand > div { min-width: 0; }
  .brand strong { display: block; overflow: hidden; font-size: .84rem; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
  .availability { display: none; }
  .hero-copy { min-width: 0; }
  .shop-hero h1 { font-size: 1.36rem; line-height: 1.05; overflow-wrap: anywhere; }
  .pack-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-tabs button,
  .pack-tab--soutien,
  .pack-tab--heritage { min-height: 52px !important; }
  .paypal-purchase { grid-template-columns: 1fr; }
  .paypal-qr-frame { width: min(224px, 100%); margin: 0 auto; }
  .wand-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familiar-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familiar-animation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; grid-auto-flow: row; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-owl,
  .pixel-owl__eye,
  .pixel-owl__wing { animation: none; }

  .familiar-view model-viewer { --progress-bar-height: 0; }
  .familiar-flames *,
  .familiar-flames i { animation: none; }
}