/* Pixaverse WWW — Phase 1 (Vanilla) */
/* Built to feel like the Game Landing: dark cinematic, glass panels, gold-tinted primary. */

:root {
  --pv-displate-inline-logo-h: 15px;
  --pv-displate-inline-y: 1px;
  --pv-displate-pill-h: 26px;
  --pv-displate-pill-px: 10px;
  --pv-displate-logo-h: 14px;
  --pv-displate-logo-nudge: 0px;

  --pv-gold: #d4a94a;
  --pv-ink: #07060b;
  --pv-text: #f3ead9;
  --pv-text-dim: rgba(243, 234, 217, 0.72);

  --pv-panel-bg: rgba(10, 8, 14, 0.78);
  --pv-panel-border: rgba(212, 169, 74, 0.18);
  --pv-panel-shadow: 0 18px 52px rgba(0, 0, 0, 0.68);

  --pv-radius: 18px;
  --pv-radius-xl: 24px;

  --pv-shell: 1180px;

  --pv-topbar-h: 72px;

  --pv-focus: 0 0 0 3px rgba(212, 169, 74, 0.26);

  --pv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pv-raise: translateY(-2px);
}

* {
  box-sizing: border-box;
}


/* Ensure HTML [hidden] always wins (prevents accidental UI duplication) */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
  background: var(--pv-ink);
}

/* Mobile: disable smooth scrolling so section jumps are instant (prevents long, slow scroll through heavy content). */
@media (max-width: 919px) {
  html {
    scroll-behavior: auto;
  }
}


body {
  margin: 0;
  background: var(--pv-ink);
  color: var(--pv-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus);
  border-radius: 12px;
}

button {
  font-family: inherit;
}

/* Casual protection (deterrence, not DRM)
   - Prevent "right-click → save image" on gallery/featured by making <img> non-interactive.
   - Modal keeps pointer events for cinematic hover/zoom, but context menu is blocked in JS.
*/
img {
  -webkit-user-drag: none;
  user-select: none;
}

.pv-card__media img,
.pv-featured__rail img {
  pointer-events: none;
}

.pv-hero__media img,
.pv-hero__media video {
  pointer-events: none;
}

.pv-card__media,
#pvFeaturedRail {
  -webkit-touch-callout: none;
}





.pv-card__media {
  position: relative;
  overflow: hidden;
}

.pv-atmos {
  position: fixed;
  inset: -10vh -10vw;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 22% 8%, rgba(212, 169, 74, 0.13), transparent 62%),
    radial-gradient(1200px 820px at 84% 14%, rgba(90, 140, 255, 0.07), transparent 66%),
    radial-gradient(1400px 980px at 54% 112%, rgba(170, 90, 255, 0.06), transparent 64%),
    radial-gradient(900px 620px at 64% 44%, rgba(50, 160, 180, 0.05), transparent 62%);
  opacity: 1;
  z-index: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .pv-atmos {
    animation: pv-atmos-drift 26s ease-in-out infinite alternate;
  }
}

@keyframes pv-atmos-drift {
  0% {
    transform: translate3d(-1.2%, -0.8%, 0) scale(1.02);
  }

  100% {
    transform: translate3d(1.2%, 0.9%, 0) scale(1.04);
  }
}


.pv-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 900px at 50% 30%, rgba(0, 0, 0, 0.15), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.24) 72%, rgba(0, 0, 0, 0.78));
  opacity: 0.92;
  z-index: 0;
}

.pv-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.032;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 2400px 2400px;
  filter: blur(0.3px);
  background-position: 320px 160px;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Layout shell */
.pv-main {
  position: relative;
  z-index: 1;
  padding-top: var(--pv-topbar-h);
}

.pv-shell {
  width: min(var(--pv-shell), calc(100% - 40px));
  margin: 0 auto;
}

/* Topbar */
.pv-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(7, 6, 11, 0.62);
  border-bottom: 1px solid rgba(212, 169, 74, 0.12);
}

.pv-topbar.pv-topbar--scrolled {
  background: rgba(7, 6, 11, 0.82);
  border-bottom-color: rgba(212, 169, 74, 0.18);
}

.pv-topbar__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: 12px;
  width: min(var(--pv-shell), calc(100% - 24px));
  margin: 0 auto;
}

.pv-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pv-brand__mark {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--pv-gold);
  filter: drop-shadow(0 0 18px rgba(212, 169, 74, 0.28));
}

.pv-brand__logo {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.pv-brand__name {
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: 0.14em;
  font-size: 12px;
  text-transform: uppercase;
}

.pv-brand__tag {
  font-size: 12px;
  color: var(--pv-text-dim);
  margin-top: -2px;
}

.pv-nav {
  display: none;
  gap: 14px;
  margin-left: 10px;
}

.pv-nav__link {
  position: relative;
  font-size: 13px;
  color: rgba(243, 234, 217, 0.86);
  padding: 8px 10px;
  border-radius: 12px;
  transition: background 220ms var(--pv-ease);
}

.pv-nav__link:hover {
  background: rgba(212, 169, 74, 0.10);
}


/* AAA v2: Scrollspy active link (desktop + mobile) */
.pv-nav__link[aria-current="true"] {
  background: rgba(212, 169, 74, 0.14);
}

.pv-nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  border-radius: 999px;
  background: rgba(212, 169, 74, 0.62);
  opacity: 0.9;
}

.pv-mnav__link[aria-current="true"] {
  border-color: rgba(212, 169, 74, 0.28);
  background: rgba(212, 169, 74, 0.10);
}

.pv-topbar__cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile menu (topbar) */
.pv-mnav {
  display: none;
  position: relative;
}

.pv-mnav>summary {
  list-style: none;
}

.pv-mnav>summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 919px) {
  .pv-mnav {
    display: block;
  }
}

.pv-mnav__btn {
  white-space: nowrap;
}

.pv-mnav[open] .pv-mnav__btn {
  border-color: rgba(212, 169, 74, 0.32);
  background: rgba(212, 169, 74, 0.10);
}

.pv-mnav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(240px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(212, 169, 74, 0.18);
  background: rgba(7, 6, 11, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 80;
}

.pv-mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(243, 234, 217, 0.10);
  background: rgba(10, 8, 14, 0.42);
  color: rgba(243, 234, 217, 0.90);
  text-decoration: none;
  cursor: pointer;
}

.pv-mnav__link:hover {
  border-color: rgba(212, 169, 74, 0.22);
  background: rgba(10, 8, 14, 0.55);
}



/* Buttons */
.pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
  border: 1px solid rgba(212, 169, 74, 0.18);
  background: rgba(10, 8, 14, 0.45);
  color: rgba(243, 234, 217, 0.92);
  cursor: pointer;
  transition: transform 200ms var(--pv-ease), background 200ms var(--pv-ease), border-color 200ms var(--pv-ease), box-shadow 200ms var(--pv-ease);
  user-select: none;
  white-space: nowrap;
}

.pv-btn:hover {
  transform: var(--pv-raise);
  border-color: rgba(212, 169, 74, 0.28);
}

.pv-btn:active {
  transform: translateY(0px);
}

.pv-btn:disabled,
.pv-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}


.pv-btn--primary {
  background: linear-gradient(180deg, rgba(212, 169, 74, 0.22), rgba(212, 169, 74, 0.12));
  border-color: rgba(212, 169, 74, 0.38);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.pv-btn--primary:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.62);
}

.pv-btn--secondary {
  background: rgba(10, 8, 14, 0.70);
  border-color: rgba(243, 234, 217, 0.16);
}

.pv-btn--ghost {
  background: transparent;
  border-color: rgba(243, 234, 217, 0.12);
  color: rgba(243, 234, 217, 0.86);
}

.pv-btn--block {
  width: 100%;
}

.pv-btn--tight {
  padding: 10px 12px;
  border-radius: 12px;
}

.pv-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(7, 6, 11, 0.52);
  color: rgba(243, 234, 217, 0.92);
  cursor: pointer;
  transition: transform 200ms var(--pv-ease), background 200ms var(--pv-ease), border-color 200ms var(--pv-ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pv-iconbtn:hover {
  transform: var(--pv-raise);
  border-color: rgba(212, 169, 74, 0.26);
}

.pv-iconbtn:active {
  transform: translateY(0px);
}

.pv-iconbtn--soft {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: rgba(10, 8, 14, 0.58);
}

.pv-iconbtn--soft:hover {
  background: rgba(10, 8, 14, 0.72);
}



/* AAA v2: Specular glint (hover/focus only — GPU-friendly) */
@media (prefers-reduced-motion: no-preference) {

  .pv-btn,
  .pv-chip--link,
  .pv-iconbtn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .pv-btn::before,
  .pv-chip--link::before,
  .pv-iconbtn::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-120%) skewX(-12deg);
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(243, 234, 217, 0) 34%,
        rgba(243, 234, 217, 0.12) 45%,
        rgba(212, 169, 74, 0.22) 50%,
        rgba(243, 234, 217, 0.12) 55%,
        rgba(243, 234, 217, 0) 66%,
        transparent 100%);
    mix-blend-mode: screen;
    transition: transform 720ms var(--pv-ease), opacity 220ms var(--pv-ease);
    will-change: transform, opacity;
  }

  /* Keyboard accessibility: glint on focus-visible everywhere */
  .pv-btn:focus-visible::before,
  .pv-chip--link:focus-visible::before,
  .pv-iconbtn:focus-visible::before {
    opacity: 1;
    transform: translateX(120%) skewX(-12deg);
  }
}

/* Hover glint only on true hover devices (prevents “sticky hover” on touch) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {

  .pv-btn:hover::before,
  .pv-chip--link:hover::before,
  .pv-iconbtn:hover::before {
    opacity: 1;
    transform: translateX(120%) skewX(-12deg);
  }
}


.pv-proofline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  margin-top: 10px;
  font-size: 13px;
  color: rgba(243, 234, 217, 0.70);
}




/* Proofline (Hero): stable two-line layout on mobile, inline on desktop */
.pv-proofline__top,
.pv-proofline__bottom {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.pv-proofline__top {
  gap: 6px;
}

.pv-proofline__label {
  color: rgba(243, 234, 217, 0.70);
}

/* Desktop: keep the classic "·" between Displate and metrics */
.pv-proofline__bottom::before {
  content: "·";
  opacity: 0.45;
  padding: 0 8px;
}

/* We handle spacing via flex gap now (override legacy margin-left) */
.pv-proofline .pv-displateTitle__mark--inline {
  margin-left: 0 !important;
}

@media (max-width: 680px) {
  .pv-proofline {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .pv-proofline__bottom {
    justify-content: center;
  }

  .pv-proofline__bottom::before {
    content: "";
    padding: 0;
  }
}

/* Ensure natural spacing between "via" and the Displate wordmark inside flex prooflines */
.pv-proofline .pv-displateTitle__mark--inline,
.pv-trustline .pv-displateTitle__mark--inline {
  margin-left: 0.35em;
}

.pv-proofline__metric {
  font-variant-numeric: tabular-nums;
  color: rgba(243, 234, 217, 0.84);
}

.pv-proofline__link {
  color: rgba(243, 234, 217, 0.84);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 234, 217, 0.18);
}

.pv-proofline__link:hover {
  border-bottom-color: rgba(243, 234, 217, 0.34);
}

.pv-link {
  color: rgba(212, 169, 74, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 169, 74, 0.30);
  padding-bottom: 1px;
}

.pv-link:hover {
  border-bottom-color: rgba(212, 169, 74, 0.55);
}


/* Partner inline mark (logo + text) */
/* Partner inline mark (logo + text) */
.pv-partnerInline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* No pill — plain inline logo/link */
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;

  line-height: 1;
  vertical-align: middle;
}

/* Partner inline link (clickable, but not button-like) */
a.pv-partnerInline--click {
  cursor: pointer;
  color: rgba(243, 234, 217, 0.90);
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
}


a.pv-partnerInline--click:hover {
  text-decoration: underline;
  text-decoration-color: rgba(212, 169, 74, 0.55);
  text-underline-offset: 3px;
}



.pv-partnerInline__logo {
  height: var(--pv-displate-logo-h);
  width: auto;
  opacity: 0.95;
  display: none;
}

/* Show Displate wordmark only once JS confirms a valid asset */
.pv-displateWrap--logo .pv-partnerInline__logo {
  display: block;
  transform: translateY(var(--pv-displate-logo-nudge));
  will-change: transform;
}

.pv-displateWrap--logo .pv-displateTitle__logo {
  display: block;
  transform: translateY(1px);
  will-change: transform;
}



/* Displate wordmark contrast
   - The official Displate SVG is a black wordmark.
   - Pixaverse WWW is dark-mode, so we apply an inverse (white) treatment via CSS filter.
   - The asset remains unchanged; only the rendered pixels are inverted. */
.pv-displateWrap--logo img[data-pv-displate-logo] {
  filter: brightness(0) invert(1);
}

/* Make the Displate pill slightly brighter so the wordmark reads on dark glass. */
[data-pv-displate-wrap].pv-partnerInline {
  background: rgba(243, 234, 217, 0.26);
  border-color: rgba(243, 234, 217, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: light) {
  .pv-displateWrap--logo img[data-pv-displate-logo] {
    filter: none;
  }
}

/* Displate logo handling
   - The official Displate SVG is a wordmark, so we avoid printing "Displate" twice.
   - We keep a tiny text fallback that is shown while the logo is still hidden
     and also if the asset fails to load. JS toggles the wrap classes. */
.pv-displateFallback {
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.pv-displateWrap--logo .pv-displateFallback {
  display: none;
}

.pv-displateWrap--fallback .pv-displateFallback {
  display: inline;
}

/* Displate title (logo + "Shop") */
/* Displate title (logo + "SHOP") */
.pv-displateTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.pv-displateTitle__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pv-displateTitle__logo {
  height: 20px;
  width: auto;
  opacity: 0.95;
  display: none;
}

.pv-displateTitle__tail {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.64);
  margin-top: 1px;
}

/* Prints: checkout note under CTA (subtle, not a button) */
.pv-checkoutFine {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212, 169, 74, 0.92);
  text-align: right;
}



/* Hero */
.pv-hero {
  position: relative;
  padding: 56px 0 28px;
}

.pv-hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-bottom: none;
  pointer-events: none;
}

.pv-hero__media {
  position: absolute;
  inset: -20px;
  filter: blur(0px);
  transform: scale(1.02);
  opacity: 0.55;
}

.pv-hero__media video,
.pv-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero media: poster → video crossfade (AAA polish, GPU-friendly) */
.pv-hero__poster {
  opacity: 1;
}

.pv-hero__video {
  opacity: 0;
}

.pv-hero__media--videoReady .pv-hero__video {
  opacity: 1;
}

.pv-hero__media--videoReady .pv-hero__poster {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {

  .pv-hero__poster,
  .pv-hero__video {
    transition: opacity 420ms var(--pv-ease);
    will-change: opacity;
  }
}


.pv-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 700px at 20% 10%, rgba(212, 169, 74, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(7, 6, 11, 0.16), rgba(7, 6, 11, 0.88));
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.pv-hero__content {
  position: relative;
  padding: 24px 0 20px;
  overflow: visible;
  text-align: center;
}

.pv-hero__kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.74);
}

.pv-hero__title {
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.06;
  margin: 10px 0 10px;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.62);
}

.pv-hero__sub {
  max-width: 64ch;
  font-size: 16px;
  color: rgba(243, 234, 217, 0.78);
  margin: 0 auto 18px;
}

.pv-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
}

.pv-hero__link {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(243, 234, 217, 0.84);
}

.pv-hero__link:hover {
  text-decoration: underline;
}


/* Hero: choreographed entrance (AAA polish, low cost) */
@media (prefers-reduced-motion: no-preference) {
  .pv-hero .pv-hero__kicker {
    animation: pvHeroRise 680ms var(--pv-ease) 60ms both;
  }

  .pv-hero .pv-hero__title {
    animation: pvHeroRise 680ms var(--pv-ease) 120ms both;
  }

  .pv-hero .pv-hero__sub {
    animation: pvHeroRise 680ms var(--pv-ease) 180ms both;
  }

  .pv-hero .pv-chips {
    animation: pvHeroRise 680ms var(--pv-ease) 240ms both;
  }

  .pv-hero .pv-proofline {
    animation: pvHeroRise 680ms var(--pv-ease) 300ms both;
  }

  .pv-hero .pv-hero__ctas {
    animation: pvHeroRise 680ms var(--pv-ease) 360ms both;
  }

  .pv-hero .pv-hero__link {
    animation: pvHeroRise 680ms var(--pv-ease) 420ms both;
  }

  .pv-hero .pv-featured__head {
    animation: pvHeroRise 720ms var(--pv-ease) 520ms both;
  }

  .pv-hero .pv-featured__wrap {
    animation: pvHeroRise 720ms var(--pv-ease) 580ms both;
  }
}

@keyframes pvHeroRise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 10px;
  justify-content: center;
}

.pv-chip {
  cursor: default;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.12);
  background: rgba(10, 8, 14, 0.48);
  font-size: 12px;
  color: rgba(243, 234, 217, 0.82);
}

.pv-chip--link {
  cursor: pointer;
  transition: transform 200ms var(--pv-ease), background 200ms var(--pv-ease), border-color 200ms var(--pv-ease);
}

.pv-chip--link:hover {
  transform: var(--pv-raise);
  background: rgba(212, 169, 74, 0.10);
  border-color: rgba(212, 169, 74, 0.22);
}

.pv-chip--link:active {
  transform: translateY(0px);
}

/* Chip label shortening on very small screens (prevents clipping) */
.pv-chip__short {
  display: none;
}

@media (max-width: 720px) {
  .pv-chip__full {
    display: none;
  }

  .pv-chip__short {
    display: inline;
  }

  .pv-chip {
    padding: 8px 8px;
    font-size: 12px;
  }
}

/* Featured rail */
.pv-featured {
  margin-top: 18px;
}

.pv-featured__head {
  display: block;
  margin-bottom: 10px;
}

.pv-featured__title {
  font-family: ui-serif, Georgia, serif;
  font-size: 16px;
}

.pv-featured__hint {
  font-size: 12px;
  color: var(--pv-text-dim);
}

.pv-featured__controls {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.pv-featured__wrap {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
}

.pv-featured__wrap {
  /* No outer frame: the carousel should float in the page, not inside a boxed panel */
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
}

@media (max-width: 680px) {

  /* Mobile controls (AAA): compact when closed; efficient 2-up layout when open. */
  .pv-filters:not([open]) .pv-filters__body {
    display: none;
  }

  /* Layout: Search full width, then Filters (left) + Wishlist (right). */

  /* -------------------------------
   Wishlist Bar (WWW)
   - Shown only in Wishlist-only mode (JS toggles [hidden])
   - Conversion: "Shop Prints" + Trust micro-status
-------------------------------- */
  .pv-wishlistBar {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 10, 12, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .pv-wishlistBar__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .pv-wishlistBar__titleRow {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pv-wishlistBar__title {
    font-family: var(--pv-serif, inherit);
    letter-spacing: 0.02em;
    font-size: 14px;
    opacity: 0.92;
  }

  .pv-wishlistBar__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    opacity: 0.92;
  }

  .pv-wishlistBar__meta {
    font-size: 12px;
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
  }

  .pv-wishlistBar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  @media (max-width: 680px) {
    .pv-wishlistBar {
      padding: 12px 12px;
      border-radius: 16px;
    }

    .pv-wishlistBar__meta {
      max-width: 62vw;
    }

    .pv-wishlistBar__right {
      gap: 8px;
    }

    /* Keep Wishlist button becomes icon-tight on small screens */
    #pvWishlistKeepBtn {
      padding-left: 12px;
      padding-right: 12px;
    }


    /* Mobile: compact unauth layout (prevents overlap without growing the header) */
    .pv-wishlistBar.pv-wishlistBar--compactUnauth .pv-wishlistBar__left {
      display: none;
    }

    .pv-wishlistBar.pv-wishlistBar--compactUnauth .pv-wishlistBar__right {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .pv-wishlistBar.pv-wishlistBar--compactUnauth #pvWishlistKeepBtn,
    .pv-wishlistBar.pv-wishlistBar--compactUnauth #pvWishlistSyncBtn,
    .pv-wishlistBar.pv-wishlistBar--compactUnauth #pvWishlistShopBtn {
      width: 100%;
      justify-content: center;
    }

  }

  /* Empty state (Wishlist-only) */
  .pv-wishlistEmpty {
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(10, 10, 12, 0.35);
  }

  .pv-wishlistEmpty__title {
    font-family: var(--pv-serif, inherit);
    font-size: 14px;
    opacity: 0.92;
    margin-bottom: 4px;
  }

  .pv-wishlistEmpty__sub {
    font-size: 12px;
    opacity: 0.72;
  }

  .pv-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "search search"
      "filters right";
    gap: 10px;
    padding: 12px;
    align-items: end;
  }

  .pv-field--search {
    grid-area: search;
  }

  .pv-filters {
    grid-area: filters;
  }

  .pv-controls__right {
    grid-area: right;
    align-items: flex-end;
  }

  /* Closed: keep it light (Wishlist only). */
  .pv-controls__meta {
    display: none;
  }

  #pvReset {
    display: none;
  }

  .pv-wishlistToggle__label {
    display: none;
  }

  .pv-controls__rightRow {
    justify-content: flex-end;
  }

  /* Open: filters get full width; actions become a clean footer row. */
  #pvFilters[open] {
    grid-column: 1 / -1;
  }

  #pvFilters[open] .pv-filters__body {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }

  #pvFilters[open] .pv-filters__body>.pv-field {
    min-width: 0;
  }

  #pvFilters[open]~.pv-controls__right {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    align-items: stretch;
  }

  #pvFilters[open]~.pv-controls__right .pv-controls__meta {
    display: block;
    align-self: end;
    text-align: right;
    padding: 0 2px;
  }

  #pvFilters[open]~.pv-controls__right #pvReset {
    display: inline-flex;
  }

  /* Footer actions: Reset + Wishlist side-by-side (no overlaps). */
  #pvFilters[open]~.pv-controls__right .pv-controls__rightRow {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #pvFilters[open]~.pv-controls__right .pv-controls__rightRow>* {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 420px) {

  /* Very small phones: filters stack to one column */
  #pvFilters[open] .pv-filters__body {
    grid-template-columns: 1fr;
  }
}



.pv-featured__nav {
  width: 44px;
  height: 44px;
  justify-self: center;
  align-self: center;
}

@media (max-width: 680px) {
  .pv-featured__nav {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 680px) {
  .pv-featured__rail {
    scroll-padding-left: 8px;
    scroll-padding-right: 8px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


.pv-featured__rail {
  display: grid;
  align-items: start;
  grid-auto-rows: max-content;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%);
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 18vw, 240px);
  gap: 12px;
  overflow-x: auto;
  cursor: grab;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  padding-left: 0px;
  padding-right: 0px;
  scroll-padding-left: 12px;
  scroll-padding-right: 12px;
  scroll-snap-type: x mandatory;
}

/* Featured cards: prevent placeholder intrinsic sizing from stretching the carousel row */
.pv-card--featured {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  align-self: start;
}

.pv-card--featured[data-pv-open="1"] {
  cursor: pointer;
}

.pv-card--featured .pv-card__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.pv-card--featured .pv-card__actions .pv-btn--primary {
  flex: 0 1 auto;
  width: min(240px, 86%);
  justify-content: center;
}

/* Featured CTAs appear on hover/focus (desktop), always visible on touch */
@media (hover:hover) and (pointer:fine) {
  .pv-card--featured .pv-card__actions {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 200ms var(--pv-ease), transform 200ms var(--pv-ease);
  }

  .pv-card--featured:hover .pv-card__actions,
  .pv-card--featured:focus-within .pv-card__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}


.pv-card--featured .pv-card__body {
  padding: 10px 10px 12px;
}

.pv-card--featured .pv-card__sub {
  margin-bottom: 8px;
}

/* Card typography: centered titles/subtitles for a more symmetric gallery feel */
.pv-grid .pv-card__title,
.pv-grid .pv-card__sub,
.pv-featured .pv-card__title,
.pv-featured .pv-card__sub {
  text-align: center;
}



.pv-featured__rail::-webkit-scrollbar {
  height: 10px;
}

.pv-featured__rail::-webkit-scrollbar-thumb {
  background: rgba(243, 234, 217, 0.10);
  border-radius: 999px;
}


.pv-featured__rail:focus-visible {
  box-shadow: none;
  border-radius: var(--pv-radius-xl);
}


@media (max-width: 680px) {
  .pv-featured__rail {
    cursor: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
  }
}

.pv-featured__rail.pv-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.pv-featured__rail.pv-dragging * {
  user-select: none;
}


/* Sections */
.pv-section {
  padding: 52px 0;
  scroll-margin-top: calc(var(--pv-topbar-h) + 18px);
}


/* AAA v2: Section reveal (section-level only; IO in JS) */
@media (prefers-reduced-motion: no-preference) {
  .pv-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 720ms var(--pv-ease), transform 720ms var(--pv-ease);
    will-change: opacity, transform;
  }

  .pv-reveal.pv-reveal--in {
    opacity: 1;
    transform: translateY(0);
  }
}

.pv-section--alt {
  position: relative;
  background: transparent;
}

.pv-section--alt::before {
  content: "";
  position: absolute;
  inset: -70px 0;
  pointer-events: none;
  background:
    radial-gradient(900px 640px at 18% 20%, rgba(212, 169, 74, 0.07), transparent 60%),
    radial-gradient(900px 640px at 82% 30%, rgba(90, 140, 255, 0.05), transparent 62%),
    linear-gradient(180deg, rgba(10, 8, 14, 0.18), rgba(10, 8, 14, 0.28));
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%);
}

.pv-section--alt>.pv-shell {
  position: relative;
}

.pv-section__head {
  margin-bottom: 18px;
}

.pv-h2 {
  font-family: ui-serif, Georgia, serif;
  font-size: 30px;
  margin: 0 0 6px;
}

.pv-lede {
  margin: 0;
  color: rgba(243, 234, 217, 0.74);
  max-width: 72ch;
}

/* Controls */
.pv-controls {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 0.7fr) 0.7fr auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border-radius: var(--pv-radius-xl);
  background: rgba(10, 8, 14, 0.48);
  border: 1px solid rgba(212, 169, 74, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
  margin-bottom: 16px;
}

.pv-controls__meta {
  justify-self: end;
  font-size: 12px;
  color: var(--pv-text-dim);
  padding: 0 4px;
}

.pv-controls__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
}

.pv-controls__rightRow {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: nowrap;
}

.pv-controls__rightRow>* {
  flex: 0 0 auto;

  /* Tablet / small desktop (before the desktop flex toolbar kicks in) */
  @media (min-width: 681px) and (max-width: 919px) {

    /* Closed filters should stay compact on touch widths */
    .pv-filters:not([open]) .pv-filters__body {
      display: none;
    }

    .pv-controls {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "search search"
        "filters right";
    }

    .pv-field--search {
      grid-area: search;
    }

    .pv-filters {
      grid-area: filters;
    }

    .pv-controls__right {
      grid-area: right;
    }

    .pv-controls__meta {
      display: none;
    }

    #pvReset {
      display: none;
    }
  }

}

/* Mobile gallery filters: search-first, expandable filters */
.pv-filters {
  margin: 0;
}

.pv-filters>summary {
  list-style: none;
}

.pv-filters>summary::-webkit-details-marker {
  display: none;
}

.pv-filters__summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.pv-filters__chev {
  opacity: 0.78;
  transition: transform 200ms var(--pv-ease);
}

.pv-filters[open] .pv-filters__chev {
  transform: rotate(180deg);
}

.pv-filters__body {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Desktop: compact single-row toolbar (robust; avoids <details> display:contents bugs) */
@media (min-width: 920px) {

  .pv-controls {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: end;
    gap: 12px;
    padding: 12px;
  }


  .pv-controls__right {
    margin-left: auto;
  }

  .pv-controls__meta {
    margin: 0;
    padding: 0 2px;
    white-space: nowrap;
    text-align: right;
  }

  #pvWishlistToggle {
    flex: 0 0 auto;
  }

  .pv-controls .pv-field {
    width: auto;
    min-width: 0;
  }

  /* Compact inputs on desktop so everything fits in one line */
  .pv-input,
  .pv-select {
    padding: 10px 12px;
    border-radius: 14px;
  }

  /* Search stays readable but not bloated */
  #pvSearch {
    width: clamp(190px, 18vw, 280px);
  }

  /* Filter selects stay small */
  #pvFilterHeart,
  #pvFilterRealm,
  #pvFilterMood,
  #pvSort {
    width: clamp(120px, 9vw, 150px);
  }

  /* <details> becomes an inline container (always open on desktop via JS) */
  .pv-filters {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: end;
    gap: 12px;
    margin: 0;
  }

  .pv-filters>summary,
  .pv-filters__summary {
    display: none;
  }

  .pv-filters__body {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    gap: 12px;
    margin-top: 0;
    min-width: 0;
  }

  /* Reset should look like a compact control, not a block */
  #pvReset {
    height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    white-space: nowrap;
  }

  /* Count should sit at the far right (either inside controls or inside details body) */
  .pv-controls__meta,
  #pvResultCount {
    white-space: nowrap;
    font-size: 12px;
    color: var(--pv-text-dim);
    padding: 0 4px;
  }

  #pvResultCount {
    margin-left: auto;
    align-self: center;
  }
}


/* Desktop mid-width safety: keep the toolbar single-row without overlaps */
@media (min-width: 920px) and (max-width: 1120px) {

  /* Make room: hide the word label, keep icon + count */
  .pv-wishlistToggle__label {
    display: none;
  }

  #pvSearch {
    width: clamp(160px, 16vw, 220px);
  }

  #pvFilterHeart,
  #pvFilterRealm,
  #pvFilterMood,
  #pvSort {
    width: clamp(104px, 8.5vw, 132px);
  }

  #pvReset {
    padding: 0 10px;
  }
}

/* Mobile: sizing tweaks only (layout is defined above) */
@media (max-width: 680px) {
  .pv-controls {
    gap: 10px;
    padding: 12px;
  }
}

.pv-field {
  display: grid;
  gap: 6px;
}

.pv-field__label {
  font-size: 12px;
  color: rgba(243, 234, 217, 0.70);
  letter-spacing: 0.02em;
}

.pv-input,
.pv-select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(7, 6, 11, 0.48);
  color: rgba(243, 234, 217, 0.92);
}

.pv-input::placeholder {
  color: rgba(243, 234, 217, 0.40);
}

.pv-select {
  cursor: pointer;
}

/* Grid */
.pv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pv-card {
  border-radius: var(--pv-radius-xl);
  content-visibility: auto;
  contain-intrinsic-size: 360px 520px;
  background: var(--pv-panel-bg);
  border: 1px solid var(--pv-panel-border);
  box-shadow: var(--pv-panel-shadow);
  overflow: hidden;
}

/* Padded cards (used for text-only cards like About + Curated collections) */
.pv-card--pad {
  padding: 18px;
  contain-intrinsic-size: 360px 260px;
}

/* Prevent serif overhang clipping near rounded corners */
.pv-card--pad .pv-h3,
.pv-card--pad .pv-kicker {
  padding-left: 1px;
}

.pv-kicker--partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pv-kickerPill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.10);
  background: rgba(10, 8, 14, 0.40);
}

.pv-kickerPartner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(243, 234, 217, 0.14);
}

.pv-kickerPartner__logo {
  height: 12px;
  width: auto;
  opacity: 0.92;
}

.pv-kickerPartner__name {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.82);
}

/* Prints hub: make "Official" read like a label (not a button) */
#prints .pv-printHub__primary .pv-kickerPill {
  padding: 0;
  border: none;
  background: transparent;
}

/* Keep the kicker line visually consistent with the "SHOP" label */
#prints .pv-printHub__primary .pv-kicker--partner {
  gap: 10px;
}


/* Card grids should never overflow on small viewports */
@media (max-width: 980px) {
  .pv-cardgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .pv-cardgrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .pv-modal__panel {
    width: 100%;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .pv-modal__media {
    height: 42vh;
    min-height: 240px;
  }

  .pv-modal__body {
    padding: 16px 16px 112px;
  }

  .pv-modal__sticky {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* Newsletter: allow wrap to avoid horizontal overflow */
.pv-newsletter {
  flex-wrap: wrap;
  align-items: flex-start;
}

.pv-newsletter__form {
  flex: 1 1 360px;
}



.pv-card[data-pv-open="1"] .pv-card__media,
.pv-card[data-pv-open="1"] .pv-card__title {
  cursor: pointer;
}

.pv-card[data-pv-open="1"]:focus-visible {
  box-shadow: var(--pv-focus);
}

.pv-card {
  transition: transform 220ms var(--pv-ease), box-shadow 220ms var(--pv-ease), border-color 220ms var(--pv-ease);
}

.pv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 169, 74, 0.26);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.74);
}

.pv-card:hover .pv-card__media img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .pv-card {
    transition: none;
  }

  .pv-card:hover {
    transform: none;
  }

  .pv-card:hover .pv-card__media img {
    transform: scale(1.01);
    filter: none;
  }
}

.pv-card--soft {
  background: rgba(10, 8, 14, 0.58);
  border-color: rgba(243, 234, 217, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.pv-card__media {
  position: relative;
  cursor: pointer;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background:
    radial-gradient(420px 320px at 30% 20%, rgba(212, 169, 74, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(243, 234, 217, 0.10);
}

/* Quiet luxury: make “open” affordance feel like a gallery label (no extra buttons). */
.pv-card[data-pv-open="1"] .pv-card__media::before {
  content: "Open";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(7, 6, 11, 0.62);
  color: rgba(243, 234, 217, 0.90);
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms var(--pv-ease), transform 180ms var(--pv-ease);
  pointer-events: none;
}

.pv-card[data-pv-open="1"]:hover .pv-card__media::before,
.pv-card[data-pv-open="1"]:focus-visible .pv-card__media::before {
  opacity: 1;
  transform: translateY(0px);
}

@media (hover: none) {
  .pv-card[data-pv-open="1"] .pv-card__media::before {
    display: none;
  }
}

.pv-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(243, 234, 217, 0.08) 45%, transparent 100%);
  transform: translateX(-55%);
  opacity: 0.55;
  animation: pv-shimmer 1.35s linear infinite;
}

.pv-card__media.pv-media--ready::after {
  opacity: 0;
  animation: none;
}

@keyframes pv-shimmer {
  0% {
    transform: translateX(-55%);
  }

  100% {
    transform: translateX(55%);
  }
}

.pv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

.pv-img {
  opacity: 1;
  transition: opacity 280ms var(--pv-ease), filter 360ms var(--pv-ease), transform 420ms var(--pv-ease);
}

.pv-img--loading {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.03);
}

.pv-img--ready {
  opacity: 1;
  filter: none;
  transform: scale(1.01);
}

.pv-card__body {
  padding: 12px 12px 12px;
}

.pv-card__title {
  font-family: ui-serif, Georgia, serif;
  font-size: 16px;
  margin: 0 0 2px;
}

.pv-card__sub {
  font-size: 12px;
  color: rgba(243, 234, 217, 0.70);
  margin: 0 0 10px;
}

.pv-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pv-card__meta {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(243, 234, 217, 0.62);
  margin-bottom: 10px;
}

.pv-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Grid actions: quiet by default; reveal on hover/focus (desktop) */
#pvGrid .pv-card__actions .pv-btn--primary {
  flex: 0 1 auto;
  width: min(240px, 86%);
  justify-content: center;
}

#pvGrid .pv-card__actions .pv-iconbtn {
  flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  #pvGrid .pv-card__actions {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms var(--pv-ease), transform 180ms var(--pv-ease);
  }

  #pvGrid .pv-card:hover .pv-card__actions,
  #pvGrid .pv-card:focus-within .pv-card__actions {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
  }
}

.pv-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.pv-loadmore[hidden] {
  display: none;
}

.pv-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}


/* Prints: keep curated inspiration stacked (prevents ultrawide layouts from feeling "broken") */
#prints .pv-cardgrid[aria-label="Curated collections"] {
  grid-template-columns: 1fr;
}

/* Collection cards (Prints section): preview strip + filter affordance */
.pv-collectionCard__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.pv-collectionCard__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.pv-collectionCard__previews {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pv-collectionCard__previews img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(243, 234, 217, 0.12);
  background: rgba(7, 6, 11, 0.40);
  opacity: 0.92;
}

.pv-collectionCard__browse {
  margin-top: 10px;
}

.pv-collectionCard.is-active {
  border-color: rgba(212, 169, 74, 0.30) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.60);
}

/* Disabled buttons should look disabled (partners, placeholders) */
.pv-btn[disabled],
.pv-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.pv-btn[disabled]:hover,
.pv-btn[aria-disabled="true"]:hover {
  transform: none !important;
  border-color: rgba(243, 234, 217, 0.14);
}

.pv-h3 {
  font-family: ui-serif, Georgia, serif;
  margin: 0 0 6px;
  font-size: 18px;
}

.pv-p {
  margin: 0 0 12px;
  color: rgba(243, 234, 217, 0.74);
}


/* Print hub */
.pv-printHub {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 14px;
  margin-bottom: 14px;
}


@media (max-width: 980px) {
  .pv-printHub {
    grid-template-columns: 1fr;
  }
}

.pv-printHub__primary {
  padding: 18px;
}

.pv-printHub__partners {
  padding: 18px;
}

.pv-printHub__row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pv-printHub__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}


.pv-printHub__fine {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.66);
}


.pv-partnerRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pv-partnerRow--badge {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(243, 234, 217, 0.14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}


.pv-partnerLogo {
  height: 14px;
  width: auto;
  opacity: 0.9;
}

.pv-partnerMark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pv-partnerName {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.84);
}



.pv-partnerNote {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.62);
  white-space: nowrap;
}


.pv-proofRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.pv-proofChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  color: rgba(243, 234, 217, 0.82);
  text-decoration: none;
}


.pv-proofChip--metric {
  font-variant-numeric: tabular-nums;
}

.pv-proofChip--muted {
  color: rgba(243, 234, 217, 0.72);
  border-color: rgba(243, 234, 217, 0.14);
}

.pv-proofChip--link:hover {
  border-color: rgba(243, 234, 217, 0.28);
}

.pv-microfine {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.66);
  line-height: 1.35;
}

.pv-partners__fine {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.62);
  line-height: 1.35;
}

.pv-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.78);
}

.pv-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.pv-partners .pv-btn {
  padding: 8px 12px;
  border-radius: 999px;
}

.pv-kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.64);
  margin-bottom: 6px;
}

.pv-kicker--mini {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(243, 234, 217, 0.58);
  margin-bottom: 2px;
}


/* Newsletter */
.pv-newsletter {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

/* Newsletter section anchor: keep the card aligned when it lives in its own section */
#newsletter .pv-newsletter {
  margin-top: 0;
}

.pv-newsletter__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  width: min(560px, 100%);
}

.pv-note {
  font-size: 12px;
  color: rgba(243, 234, 217, 0.72);
  grid-column: 1 / -1;
  min-height: 16px;
}

/* Socials */
.pv-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Footer */
.pv-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(243, 234, 217, 0.10);
}

.pv-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(243, 234, 217, 0.66);
  font-size: 12px;
}

.pv-footer__sep {
  opacity: 0.4;
}

.pv-footer__link {
  color: rgba(243, 234, 217, 0.78);
}

.pv-footer__link:hover {
  text-decoration: underline;
}

/* Sticky */
.pv-sticky {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 8px;
  width: min(540px, calc(100% - 24px));
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid rgba(212, 169, 74, 0.18);
  background: rgba(7, 6, 11, 0.56);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62);
  isolation: isolate;
}

.pv-sticky__btn {
  width: auto;
}

/* AAA mobile dock: collapsed "handle" state */
.pv-sticky.pv-sticky--collapsed {
  width: 176px;
  padding: 10px 12px;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.pv-sticky.pv-sticky--collapsed .pv-sticky__btn {
  display: none;
}

.pv-sticky.pv-sticky--collapsed::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 12px;
  background-image: url("/favicon.webp");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 18px rgba(212, 169, 74, 0.18);
  opacity: 0.95;
}

.pv-sticky.pv-sticky--collapsed::after {
  content: "Quick actions";
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(243, 234, 217, 0.82);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* Sticky dock hidden state (used by app.js gates) */
.pv-sticky.pv-sticky--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(calc(100% + 18px));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .pv-sticky {
    transition: opacity 200ms var(--pv-ease), transform 220ms var(--pv-ease),
      width 220ms var(--pv-ease), padding 220ms var(--pv-ease);
    will-change: transform, opacity;
  }
}

/* Modal */
.pv-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pv-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .pv-modal {
    transition: opacity 180ms var(--pv-ease), visibility 0ms linear 180ms;
    will-change: opacity;
  }

  .pv-modal[aria-hidden="false"] {
    transition: opacity 180ms var(--pv-ease), visibility 0ms;
  }
}

.pv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
}

.pv-modal__panel {
  position: relative;
  width: min(1060px, calc(100% - 24px));
  height: min(82vh, 780px);
  margin: 8vh auto 0;
  border-radius: var(--pv-radius-xl);
  background: rgba(10, 8, 14, 0.92);
  border: 1px solid rgba(212, 169, 74, 0.18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Modal: cinematic open/close (AAA polish, keep perf) */
.pv-modal__backdrop {
  opacity: 0;
}

.pv-modal[aria-hidden="false"] .pv-modal__backdrop {
  opacity: 1;
}

.pv-modal__panel {
  transform: translateY(12px) scale(0.99);
  opacity: 0.98;
}

.pv-modal[aria-hidden="false"] .pv-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .pv-modal__backdrop {
    transition: opacity 200ms var(--pv-ease);
    will-change: opacity;
  }

  .pv-modal__panel {
    transition: transform 220ms var(--pv-ease), opacity 220ms var(--pv-ease);
    will-change: transform, opacity;
  }
}


.pv-modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(7, 6, 11, 0.55);
  color: rgba(243, 234, 217, 0.90);
  cursor: pointer;
}

.pv-modal__tool {
  position: absolute;
  right: 54px;
  top: 10px;
  z-index: 2;
}

.pv-modal__media {
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(243, 234, 217, 0.10);
  overflow: hidden;
}

.pv-modal__media {
  position: relative;
}

.pv-modal__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 700px at 50% 20%, rgba(212, 169, 74, 0.08), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(90, 140, 255, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.38));
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 84%, transparent 100%);
}

.pv-modal__media img {
  position: relative;
  z-index: 1;
}

.pv-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.02);
}

/* Modal image: artifact-grade interaction (desktop only) */
.pv-modal__media {
  --pv-zoom-x: 50%;
  --pv-zoom-y: 50%;
}

@media (hover: hover) and (pointer: fine) {
  .pv-modal__media.pv-zoom-on {
    cursor: zoom-in;
  }

  .pv-modal__media.pv-zoom-on img {
    transform-origin: var(--pv-zoom-x) var(--pv-zoom-y);
    transition: transform 260ms var(--pv-ease), filter 260ms var(--pv-ease);
  }

  .pv-modal__media.pv-zoom-on:hover img {
    transform: scale(1.08);
    filter: saturate(1.05) contrast(1.03);
  }
}


.pv-modal__body {
  padding: 18px 18px 74px;
  overflow: auto;
}

.pv-modal__kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.70);
}

.pv-modal__title {
  font-family: ui-serif, Georgia, serif;
  font-size: 28px;
  margin: 6px 0 2px;
}

.pv-modal__subtitle {
  color: rgba(243, 234, 217, 0.70);
  font-size: 14px;
}

.pv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
}

.pv-tag {
  border: 1px solid rgba(243, 234, 217, 0.12);
  background: rgba(10, 8, 14, 0.55);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.80);
}

.pv-lore {
  margin: 10px 0 12px;
}

.pv-lore__text {
  color: rgba(243, 234, 217, 0.78);
  font-size: 14px;
  white-space: pre-line;
}

.pv-lore__text.pv-lore__text--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-lore__more {
  margin-top: 10px;
}

.pv-modal__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}


.pv-modal__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}


.pv-benefitChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.72);
  white-space: nowrap;
}

.pv-benefitChip::before {
  content: "✓";
  color: rgba(212, 169, 74, 0.92);
  opacity: 0.95;
}

.pv-trustline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  margin-top: 14px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.68);
}

.pv-trustsep {
  opacity: 0.45;
  padding: 0 8px;
}


.pv-modal__sticky {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 8, 14, 0.92);
  border-top: 1px solid rgba(243, 234, 217, 0.12);
  gap: 10px;
}

/* Responsive */
@media (min-width: 920px) {
  .pv-nav {
    display: flex;
  }
}

@media (max-width: 980px) {
  .pv-controls {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .pv-controls__meta {
    justify-self: start;
  }

  .pv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pv-cardgrid {
    grid-template-columns: 1fr;
  }

  .pv-printHub {
    grid-template-columns: 1fr;
  }

  .pv-modal__panel {
    grid-template-columns: 1fr;
    height: min(86vh, 820px);
  }

  .pv-modal__media {
    border-right: none;
    border-bottom: 1px solid rgba(243, 234, 217, 0.10);
    height: 44%;
  }

  .pv-modal__body {
    padding-bottom: 86px;
  }

  .pv-modal__ctas {
    display: none;
  }

  .pv-modal__sticky {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .pv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mobile sticky dock: single-row compact pills (doesn't cover the art) */
  .pv-sticky {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .pv-sticky__btn {
    flex: 1 1 0;
    padding: 10px 10px;
    border-radius: 999px;
    font-size: 12px;
    min-height: 40px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pv-sticky__btn--wide {
    flex: 1.35 1 0;
  }
}

@media (max-width: 420px) {
  .pv-sticky__btn {
    padding: 9px 9px;
    font-size: 11.5px;
    min-height: 38px;
  }

  .pv-sticky__btn--wide {
    flex: 1.45 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-btn {
    transition: none;
  }

  .pv-btn:hover {
    transform: none;
  }

  .pv-card__media::after {
    animation: none;
    opacity: 0;
  }
}

/* --- Curated modal details (AAA polish) --- */
.pv-details {
  margin: 10px 0 6px;
  display: grid;
  gap: 10px;
}

.pv-details__toggle {
  justify-self: start;
}

.pv-details__panel {
  border: 1px solid rgba(243, 234, 217, 0.10);
  background: rgba(7, 6, 11, 0.35);
  border-radius: 16px;
  padding: 12px;
}

.pv-details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pv-details__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: baseline;
}

.pv-details__k {
  font-size: 12px;
  color: rgba(243, 234, 217, 0.62);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pv-details__v {
  font-size: 13px;
  color: rgba(243, 234, 217, 0.82);
}

.pv-details__block {
  margin-top: 12px;
}

.pv-details__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pv-tag--muted {
  opacity: 0.82;
  border-color: rgba(243, 234, 217, 0.10);
  background: rgba(10, 8, 14, 0.42);
}

.pv-details__id {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.55);
}

@media (max-width: 980px) {
  .pv-details__row {
    grid-template-columns: 1fr;
  }
}


/* Modal: always show full lore on WWW (no clamp toggle) */
.pv-lore__more {
  display: none !important;
}

/* Modal meta footnote area: keep tags/details out of the hero content */
.pv-modal__meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(243, 234, 217, 0.10);
}

.pv-tags--foot {
  margin: 10px 0 0;
  gap: 6px;
}

.pv-tags--foot .pv-tag {
  padding: 5px 8px;
  font-size: 11px;
  opacity: 0.86;
}




/* AAA: Modal artwork should never reveal edges during hover/zoom/parallax */
.pv-modal__media {
  overflow: hidden;
}

.pv-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .pv-modal__media img {
    transform: none;
  }
}



/* ----------------------------
   Mobile polish (WWW)
   - Keep conversion CTAs readable
   - Make filters usable on narrow screens
   - Avoid sticky covering content
---------------------------- */
@media (max-width: 720px) {
  .pv-topbar__inner {
    gap: 12px;
    padding: 12px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }

  .pv-brand__name {
    font-size: 12px;
    letter-spacing: 0.20em;
  }

  .pv-topbar__cta {
    gap: 8px;
  }

  .pv-topbar__cta .pv-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {

  /* Reduce topbar clutter: sticky dock already provides Shop Prints */
  #pvDisplateShopTopbar {
    display: none;
  }
}

/* Hero (mobile): keep proof chips readable (no horizontal scroll, no clipping) */
@media (max-width: 720px) {
  .pv-hero {
    padding: 42px 0 22px;
  }

  .pv-hero__content {
    padding: 18px 0 14px;
    overflow: visible;
  }

  .pv-hero__sub {
    font-size: 15px;
  }

  .pv-chips {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
  }

  .pv-chip {
    flex: 0 1 auto;
    justify-content: center;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .pv-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .pv-hero__ctas .pv-btn {
    width: 100%;
  }
}

/* Featured rail (phones): no mask clipping; use overlay fades instead */
@media (max-width: 520px) {
  .pv-featured__wrap {
    grid-template-columns: 1fr;
  }

  .pv-featured__nav {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(7, 6, 11, 0.50);
    border: 1px solid rgba(243, 234, 217, 0.18);
    backdrop-filter: blur(8px);
  }

  .pv-featured__nav--left {
    left: 10px;
  }

  .pv-featured__nav--right {
    right: 10px;
  }

  /* Keep arrows perfectly stable on tap (avoid :active/:hover transform overrides) */
  .pv-featured__nav,
  .pv-featured__nav:hover,
  .pv-featured__nav:active,
  .pv-featured__nav:focus-visible {
    transform: translateY(-50%) !important;
  }

  /* No edge fog on mobile: keep the carousel clean and frameless */
  .pv-featured__wrap::before,
  .pv-featured__wrap::after {
    content: none !important;
    display: none !important;
  }

  /* Remove alpha-mask that makes cards look “cut” */
  .pv-featured__rail {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    grid-auto-columns: clamp(240px, 82vw, 340px);
    padding-left: 12px;
    padding-right: 12px;
    scroll-padding-left: 12px;
    scroll-padding-right: 12px;
  }

  /* Soft edge fog as overlay (doesn’t crop content) */
  .pv-featured__wrap::before,
  .pv-featured__wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    z-index: 2;
  }

  .pv-featured__wrap::before {
    left: 0;
    background: linear-gradient(90deg, rgba(7, 6, 11, 0.62), rgba(7, 6, 11, 0.0));
  }

  .pv-featured__wrap::after {
    right: 0;
    background: linear-gradient(270deg, rgba(7, 6, 11, 0.62), rgba(7, 6, 11, 0.0));
  }
}

/* Gallery controls: make the first row (Search) span full width and keep Reset + count aligned */
@media (max-width: 980px) {
  .pv-controls>label:first-child {
    grid-column: 1 / -1;
  }

  .pv-controls__meta {
    justify-self: end;
    align-self: end;
    padding: 0 2px;
  }
}

@media (max-width: 680px) {

  /* Closed filters should stay compact on mobile */
  .pv-filters:not([open]) .pv-filters__body {
    display: none;
  }

  .pv-controls {
    padding: 12px;
    gap: 10px;
  }

  .pv-input,
  .pv-select {
    padding: 11px 11px;
    border-radius: 14px;
  }

  #pvReset {
    height: 40px;
    border-radius: 14px;
  }
}


/* Gallery grid: readability-first on small phones */
@media (max-width: 420px) {
  .pv-grid {
    grid-template-columns: 1fr;
  }
}

/* Sticky dock: prevent it covering the last rows */
@media (max-width: 680px) {
  #gallery {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* Modal CTA stack on very small screens */
@media (max-width: 420px) {
  .pv-modal__sticky {
    grid-template-columns: 1fr;
  }
}



/* V32 Mobile modal concept: maximize artwork, avoid clipping, keep sticky CTAs only */
@media (max-width: 680px) {
  .pv-modal__media::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 0.75;
  }
}

@media (max-width: 520px) {
  .pv-modal__panel {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(240px, 50vh) 1fr;
    height: 100dvh !important;
  }

  .pv-modal__media {
    border-right: none !important;
    border-bottom: 1px solid rgba(243, 234, 217, 0.10);
    height: auto !important;
    min-height: 240px;
  }

  .pv-modal__media img {
    transform: scale(1.03);
  }

  .pv-modal__body {
    padding-bottom: 124px;
  }
}


/* V32 Card alignment (Featured + Gallery): centered titles and CTAs for symmetry */
.pv-card__title,
.pv-card__subtitle,
.pv-card__meta {
  text-align: center;
}

.pv-card__actions {
  justify-content: center;
}


/* V33: Mobile modal uses full height on all small devices (not only <=520px) */
@media (max-width: 680px) {
  .pv-modal__panel {
    width: 100%;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .pv-modal__media {
    height: 44vh;
    min-height: 260px;
  }
}


/* =========================================================
   AAA V34 — Mobile concept polish
   Goals:
   - Center hero content + proof chips on mobile
   - Featured carousel: no outer frame / no fog overlays; arrows visible
   - Modal: true mobile layout up to 680px; no clipped image; no duplicate CTAs
   - Mobile menu dropdown: fixed + centered (no clipping)
   ========================================================= */

@media (max-width: 680px) {

  /* Hero symmetry */
  .pv-hero__content {
    text-align: center;
  }

  .pv-hero__kicker,
  .pv-hero__title,
  .pv-hero__sub,
  .pv-hero__link {
    text-align: center;
  }

  .pv-chips {
    justify-content: center;
  }

  .pv-hero__ctas {
    justify-content: center;
  }

  .pv-hero__ctas .pv-btn {
    width: min(520px, 100%);
    justify-content: center;
  }

  /* Mobile menu: fixed & centered under topbar */
  .pv-mnav__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--pv-topbar-h, 64px) + 10px);
    width: auto;
    max-width: 420px;
    margin: 0 auto;
    z-index: 9999;
  }
}

/* Featured: remove any visible "frame" (focus ring) */
.pv-featured__rail:focus-visible {
  box-shadow: none;
  border-radius: 0;
}

@media (max-width: 680px) {

  /* Featured carousel: arrows overlay + no fog overlays, no empty side padding */
  .pv-featured__wrap {
    display: block;
  }

  .pv-featured__wrap::before,
  .pv-featured__wrap::after {
    content: none !important;
    display: none !important;
  }

  .pv-featured__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    border-radius: 18px;
  }

  .pv-featured__nav--left {
    left: 8px;
  }

  .pv-featured__nav--right {
    right: 8px;
  }

  .pv-featured__rail {
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: 12px !important;
    scroll-padding-right: 12px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Modal: true mobile layout up to 680px (not only 520px) */
@media (max-width: 680px) {
  .pv-modal__panel {
    width: calc(100% - 20px) !important;
    height: calc(100dvh - 20px) !important;
    margin: 10px auto !important;
    border-radius: 26px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(280px, 52vh) 1fr !important;
  }

  .pv-modal__media {
    border-right: none !important;
    border-bottom: 1px solid rgba(243, 234, 217, 0.10);
    height: auto !important;
    min-height: 280px;
  }

  .pv-modal__media img {
    transform: none !important;
    object-position: center center;
  }

  /* No duplicate CTAs on mobile: use sticky only */
  .pv-modal__ctas {
    display: none !important;
  }

  .pv-modal__body {
    padding: 16px 16px calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pv-modal__sticky {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Tools aligned to corners */
  .pv-modal__tool {
    right: 56px !important;
    top: 12px !important;
  }

  .pv-modal__close {
    right: 12px !important;
    top: 12px !important;
  }
}


/* ---------------------------------
   Mobile polish (WWW): Featured carousel + anchor offsets
   - No overlays/vignettes on artwork media
   - Remove harsh "frame" around featured cards on mobile
   - Use soft edge fade on the rail (not on the images)
   - Ensure hash navigation lands below fixed topbar
---------------------------------- */
.pv-section {
  scroll-margin-top: var(--pv-topbar-offset, 84px);
}


/* Anchor: Newsletter sits inside Prints, so give it the same safe offset as sections */
#newsletter {
  scroll-margin-top: var(--pv-topbar-offset, 84px);
}

@media (max-width: 680px) {

  /* Keep images pristine: no pseudo overlays on the media container */
  .pv-featured .pv-card--featured .pv-card__media::before,
  .pv-featured .pv-card--featured .pv-card__media::after {
    content: none !important;
    display: none !important;
  }

  /* Remove the panel frame for featured cards only (mobile) */
  .pv-featured .pv-card--featured {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    /* avoid clipping shadows/rounding */
  }

  /* Apply rounding on the media itself */
  .pv-featured .pv-card--featured .pv-card__media {
    border-radius: var(--pv-radius-xl);
    overflow: hidden;
    background:
      radial-gradient(520px 360px at 30% 20%, rgba(212, 169, 74, 0.10), transparent 58%),
      rgba(255, 255, 255, 0.02);
    border: 0;
  }

  /* Mobile: never hide featured images completely while loading (prevents black tiles during swipe) */
  .pv-featured .pv-card--featured img.pv-img--loading {
    opacity: 1;
    filter: blur(18px);
    transform: scale(1.02);
  }

  /* Soft edge fade on the carousel rail (matches "fog" feel without touching the art) */
  .pv-featured__rail {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%);
    /* Mobile: show ~one card per view to avoid visible unloaded neighbors */
    grid-auto-columns: clamp(280px, 86vw, 360px);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .pv-featured__rail>* {
    scroll-snap-stop: always;
  }
}


/* ---------------------------------
   AAA polish: soften instant anchor jumps
   - Navigation stays instant (no slow scroll), but destination gets a subtle pulse.
---------------------------------- */
.pv-jump-pulse {
  position: relative;
}

.pv-jump-pulse::before {
  content: "";
  position: absolute;
  inset: -18px -12px;
  border-radius: 28px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  border: 1px solid rgba(243, 234, 217, 0.20);
  box-shadow:
    0 0 0 1px rgba(212, 169, 74, 0.08),
    0 18px 60px rgba(0, 0, 0, 0.42);
  background:
    radial-gradient(680px 280px at 50% 0%, rgba(243, 234, 217, 0.22), rgba(243, 234, 217, 0) 64%),
    radial-gradient(620px 260px at 50% 100%, rgba(212, 169, 74, 0.16), rgba(212, 169, 74, 0) 62%);
  animation: pvJumpPulse 820ms var(--pv-ease, ease) both;
}

@keyframes pvJumpPulse {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  32% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-2px) scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-jump-pulse::before {
    animation: none;
    opacity: 0;
  }
}

/* Scroll buffer (injected by JS)
   Ensures #prints/#about/#socials can align under the fixed topbar even
   before the Gallery fully renders. */
.pv-scrollbuffer {
  width: 1px;
  /* Default: keep the page ending tight (no huge empty tail).
     JS may temporarily expand this during an in-page jump if a target section
     would otherwise be clamped by max scroll height. */
  height: 48px;
  pointer-events: none;
}

/* =========================================================
   AAA Nav Arrival Pulse (section highlight)
   - purely visual, does not affect scrolling
   - respects prefers-reduced-motion
========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .pv-arrival-pulse {
    position: relative;
    animation: pvArrivalPulse 680ms ease-out 1;
  }

  @keyframes pvArrivalPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(215, 176, 91, 0.0);
      transform: translateZ(0);
    }

    22% {
      box-shadow: 0 0 0 10px rgba(215, 176, 91, 0.12);
    }

    60% {
      box-shadow: 0 0 0 18px rgba(215, 176, 91, 0.07);
    }

    100% {
      box-shadow: 0 0 0 26px rgba(215, 176, 91, 0.0);
    }
  }
}

/* ---------------------------------
   WWW Wishlist (local-only, Phase 1)
   --------------------------------- */
.pv-wishlistToggle {
  white-space: nowrap;
  gap: 8px;
}

.pv-wishlistToggle__icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.92;
}

.pv-wishlistToggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.20);
  background: rgba(7, 6, 11, 0.42);
  font-size: 12px;
  color: rgba(243, 234, 217, 0.88);
}

.pv-wishlistToggle[aria-pressed="true"] {
  border-color: rgba(212, 169, 74, 0.28);
  background: rgba(212, 169, 74, 0.10);
}

.pv-wishlistToggle[aria-pressed="true"] .pv-wishlistToggle__icon {
  opacity: 1;
  color: var(--pv-gold);
  text-shadow: 0 0 14px rgba(212, 169, 74, 0.22);
}

/* Small icon action for cards */
.pv-wishbtn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
}

.pv-wishbtn__icon {
  font-size: 18px;
  line-height: 1;
}

.pv-wishbtn[aria-pressed="true"] {
  border-color: rgba(212, 169, 74, 0.28);
  background: rgba(212, 169, 74, 0.10);
}

.pv-wishbtn[aria-pressed="true"] .pv-wishbtn__icon {
  color: var(--pv-gold);
  text-shadow: 0 0 14px rgba(212, 169, 74, 0.22);
}

/* Card Wishlist overlay (top-left, hover-reveal) */
.pv-card__wishbtn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(243, 234, 217, 0.16);
  background: rgba(7, 6, 11, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.pv-card__wishbtn .pv-wishbtn__icon {
  font-size: 18px;
  opacity: 0.96;
}

.pv-card__wishbtn[aria-pressed="true"] {
  border-color: rgba(212, 169, 74, 0.30);
  background: rgba(212, 169, 74, 0.14);
  color: var(--pv-gold);
  text-shadow: 0 0 14px rgba(212, 169, 74, 0.22);
}

@media (hover:hover) and (pointer:fine) {
  .pv-card__wishbtn {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 180ms var(--pv-ease), transform 180ms var(--pv-ease);
  }

  .pv-card:hover .pv-card__wishbtn,
  .pv-card:focus-within .pv-card__wishbtn,
  .pv-card__wishbtn[aria-pressed="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (pointer:coarse) {
  .pv-card__wishbtn {
    opacity: 0.92;
  }
}

/* Compact Wishlist toggle label on tight widths */
@media (max-width: 520px) {
  .pv-wishlistToggle__label {
    display: none;
  }
}

/* Modal tools: place Wishlist left of copy */
.pv-modal__tool--wish {
  right: 98px;
}

#pvModalWishIcon {
  color: rgba(243, 234, 217, 0.92);
}

#pvModalWishIcon[aria-pressed="true"] {
  border-color: rgba(212, 169, 74, 0.32);
  background: rgba(212, 169, 74, 0.14);
  color: var(--pv-gold);
  text-shadow: 0 0 14px rgba(212, 169, 74, 0.22);
}

@media (max-width: 720px) {
  .pv-controls {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .pv-field--search {
    grid-column: 1 / -1;
  }

  #pvFilters {
    grid-column: 1 / 2;
  }

  #pvWishlistToggle {
    grid-column: 2 / 3;
    justify-self: end;
  }

  .pv-controls__meta {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
  }
}

/* =========================================================
   AAA V35 — Wishlist Cloud Sync (WWW)
   - Subtle "Sync" control next to Wishlist
   - Minimal sign-in modal (email link) powered by firebaseSidecar.js
   ========================================================= */

.pv-wishlistSync[hidden] {
  display: none !important;
}

.pv-wishlistSync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pv-wishlistSync__icon {
  font-size: 14px;
  opacity: 0.9;
  transform: translateY(-0.5px);
}

@media (max-width: 520px) {
  .pv-wishlistSync__label {
    display: none;
  }
}

/* Cloud modal */
.pv-cloudModal {
  z-index: 90;
}

.pv-cloudModal__panel {
  grid-template-columns: 1fr !important;
  width: min(560px, calc(100% - 24px));
  height: auto;
  margin: 10vh auto 0;
}

.pv-cloudModal__body {
  padding: 20px 18px;
  overflow: auto;
  max-height: min(78vh, 760px);
}

.pv-cloudModal__body {
  /* Ensure form fields never clip on narrow in-app viewports */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {

  /* Cloud modal must NOT inherit the artwork modal's mobile grid/rows */
  .pv-cloudModal__panel {
    width: calc(100% - 20px) !important;
    height: auto !important;
    max-height: calc(100vh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100svh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: 10px auto !important;
    border-radius: 26px !important;
    grid-template-rows: 1fr !important;
  }

  .pv-cloudModal__body {
    padding: 18px 16px !important;
    max-height: calc(100vh - 20px - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100svh - 20px - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 20px - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }

  .pv-cloudForm,
  .pv-cloudForm * {
    min-width: 0;
  }
}

.pv-cloudModal__sub {
  margin-top: 6px;
  color: rgba(243, 234, 217, 0.78);
}

.pv-cloudForm {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.pv-cloudForm__actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 520px) {

  /* Mobile: actions become a clean vertical stack (prevents half-width clipping in WebViews). */
  .pv-cloudForm__actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pv-cloudForm__actions .pv-btn,
  .pv-cloudForm__actions button,
  .pv-cloudForm__actions a {
    width: 100%;
  }

  .pv-cloudGoogleBtn {
    width: 100%;
  }
}


.pv-cloudGoogleBtn {
  justify-content: center;
  padding: 14px 16px;
  border-radius: 18px;
}

.pv-googleBtn__icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.pv-googleBtn__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.pv-cloudAlt {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.70);
}

.pv-cloudSteps {
  margin-top: -2px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.60);
}

.pv-cloudMeta {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.78);
}

.pv-cloudAdvanced {
  margin-top: 10px;
}

.pv-cloudAdvanced>summary {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.64);
  padding: 6px 0;
  outline: none;
}

.pv-cloudAdvanced>summary::-webkit-details-marker {
  display: none;
}

.pv-cloudAdvanced>summary:before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transform: translateY(-1px);
  opacity: 0.85;
}

.pv-cloudAdvanced[open]>summary:before {
  content: "▾";
}

.pv-cloudAdvanced__body {
  padding-top: 6px;
  display: grid;
  gap: 10px;
}

.pv-cloudCounts {
  font-size: 12px;
  color: rgba(243, 234, 217, 0.62);
}

.pv-cloudActions--advanced .pv-btn {
  padding: 10px 12px;
  border-radius: 14px;
}

.pv-cloudNoteTiny {
  min-height: 14px;
  font-size: 12px;
  color: rgba(243, 234, 217, 0.62);
}

.pv-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(243, 234, 217, 0.78);
  line-height: 1.35;
  user-select: none;
}

.pv-check input {
  margin-top: 2px;
  accent-color: rgba(212, 169, 74, 0.92);
}

.pv-check--muted {
  color: rgba(243, 234, 217, 0.62);
}

.pv-cloudNote {
  min-height: 16px;
}

.pv-cloudSigned {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(243, 234, 217, 0.10);
  background: rgba(7, 6, 11, 0.35);
}


.pv-cloudSignedNewsKit {
  margin-top: 12px;
  display: block;
}

.pv-cloudSignedNewsKitBody {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pv-cloudSignedNewsKitBody .pv-growthActions {
  margin-top: 0;
  flex: 1 1 auto;
}

.pv-cloudSignedNewsHint {
  flex: 0 0 auto;
  max-width: 260px;
  font-size: 11px;
  opacity: 0.70;
  text-align: right;
}

@media (max-width: 680px) {
  .pv-cloudSignedNewsKitBody {
    flex-direction: column;
    align-items: stretch;
  }

  .pv-cloudSignedNewsHint {
    max-width: none;
    text-align: left;
  }
}

.pv-pulseRequired {
  outline: 2px solid rgba(255, 215, 120, 0.60);
  outline-offset: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.20), 0 0 0 2px rgba(255, 215, 120, 0.14), 0 0 28px rgba(255, 215, 120, 0.22);
  background: rgba(255, 215, 120, 0.06);
  border-radius: 14px;
  will-change: transform, filter, background;
  transform: translateZ(0);
  transform-origin: center;
  animation: pvPulseReq 900ms ease;
}

@keyframes pvPulseReq {
  0% {
    filter: saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }

  10% {
    transform: translate3d(-0.8px, 0, 0) scale(1.002);
  }

  20% {
    transform: translate3d(0.8px, 0, 0) scale(1.002);
  }

  30% {
    transform: translate3d(-0.6px, 0, 0) scale(1.001);
  }

  40% {
    transform: translate3d(0.6px, 0, 0) scale(1.001);
  }

  50% {
    filter: saturate(1.22);
    transform: translate3d(-0.4px, 0, 0) scale(1.001);
  }

  60% {
    transform: translate3d(0.4px, 0, 0) scale(1.001);
  }

  70% {
    transform: translate3d(-0.2px, 0, 0) scale(1.0005);
  }

  80% {
    transform: translate3d(0.2px, 0, 0) scale(1.0005);
  }

  100% {
    filter: saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-pulseRequired {
    animation: none !important;
  }
}

.pv-cloudId {
  font-size: 12px;
  color: rgba(243, 234, 217, 0.72);
}

.pv-cloudActions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 680px) {
  .pv-cloudModal__panel {
    width: 100%;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .pv-cloudModal__body {
    max-height: none;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}

/* -------------------------------
   Wishlist Bar (WWW)
   - Shown only in Wishlist-only mode (JS toggles [hidden])
   - Conversion: "Shop Prints" + Trust micro-status
-------------------------------- */
.pv-wishlistBar {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pv-wishlistBar__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pv-wishlistBar__titleRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv-wishlistBar__title {
  font-family: var(--pv-serif, inherit);
  letter-spacing: 0.02em;
  font-size: 14px;
  opacity: 0.92;
}

.pv-wishlistBar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  opacity: 0.92;
}

.pv-wishlistBar__meta {
  font-size: 12px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58vw;
}

.pv-wishlistBar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .pv-wishlistBar {
    padding: 12px 12px;
    border-radius: 16px;
  }

  .pv-wishlistBar__meta {
    max-width: 62vw;
  }

  .pv-wishlistBar__right {
    gap: 8px;
  }

  #pvWishlistKeepBtn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Empty state (Wishlist-only) */
.pv-wishlistEmpty {
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  background: rgba(10, 10, 12, 0.35);
}

.pv-wishlistEmpty__title {
  font-family: var(--pv-serif, inherit);
  font-size: 14px;
  opacity: 0.92;
  margin-bottom: 4px;
}

.pv-wishlistEmpty__sub {
  font-size: 12px;
  opacity: 0.72;
}

/* === Growth Polish (Realm Chronicle) === */
.pv-growthCard {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  z-index: 9999;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(12, 12, 14, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

.pv-growthHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pv-growthCopy {
  flex: 1 1 auto;
  min-width: 0;
}

.pv-growthTitle {
  font-weight: 750;
  letter-spacing: 0.2px;
}

.pv-growthBody {
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.86;
  line-height: 1.35;
}

.pv-growthClose {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.pv-growthActions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  .pv-growthActions {
    grid-template-columns: 1fr;
  }

  .pv-growthActions .pv-btn {
    width: 100%;
  }
}

.pv-growthInline {
  display: block;
  margin-top: 8px;
}

.pv-growthInline .pv-growthActions {
  margin-top: 8px;
  width: 100%;
  max-width: 520px;
}

/* AAA conversion polish: clickable proof chips must read as links, not passive pills */
.pv-proofChip--link {
  cursor: pointer;
  border-color: rgba(212, 169, 74, 0.32);
  background: rgba(212, 169, 74, 0.10);
}

.pv-proofChip--link:hover {
  border-color: rgba(212, 169, 74, 0.55);
  background: rgba(212, 169, 74, 0.14);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pv-proofChip--link::after {
  content: "↗";
  margin-left: 6px;
  opacity: 0.75;
  font-size: 0.9em;
}


/* === PV AAA ALIGNMENT HOTFIX (v11) === */
/* Keep Displate badge inline with surrounding text (no oversized pill) */
.pv-partnerInline {
  padding: 0.12em 0.56em;
  min-height: unset;
  height: auto;
  gap: 0.45em;
  line-height: 1;
  vertical-align: -0.06em;
  border: 1px solid rgba(243, 234, 217, 0.18);
  background: rgba(243, 234, 217, 0.10);
}

.pv-partnerInline__logo {
  display: block;
  height: 1.05em;
  width: auto;
  transform: translateY(0.08em);
  /* compensate viewBox whitespace */
}

/* Displate wordmark: ensure contrast on dark glass without editing the SVG */
.pv-displateWrap--logo img[data-pv-displate-logo],
.pv-displateTitle__mark img[data-pv-displate-logo] {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* PRINTS HUB: make OFFICIAL + SHOP read like one premium header line */
.pv-printHub__primary .pv-kickerPill {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, 0.65);
}

.pv-printHub__primary .pv-displateTitle {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  gap: 10px;
}

.pv-printHub__primary .pv-displateTitle__logo {
  height: 18px;
  transform: translateY(1px);
}

.pv-printHub__primary .pv-displateTitle__tail {
  color: rgba(243, 234, 217, 0.72);
}

/* Proof row: rating + reviews should feel like a single action, not split */
.pv-printHub__primary .pv-proofChip--link {
  border-color: rgba(201, 164, 94, 0.40);
  background: rgba(201, 164, 94, 0.12);
}

.pv-printHub__primary .pv-proofChip--link::after {
  content: " ↗";
  opacity: 0.9;
}

.pv-printHub__primary .pv-proofChip--metric.pv-proofChip--muted {
  display: none !important;
}

/* === END HOTFIX === */


/* === PV AAA ALIGNMENT FIX (v12) === */
/* Displate inline badge: baseline aligned and snug around the wordmark */
.pv-partnerInline {
  padding: 0.10em 0.50em;
  gap: 0.42em;
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(0.02em);
  /* align with surrounding text baseline */
  background: rgba(243, 234, 217, 0.12);
  border: 1px solid rgba(243, 234, 217, 0.20);
  box-shadow: none;
}

.pv-partnerInline__logo {
  height: 0.95em;
  width: auto;
  transform: translateY(0.10em);
  /* center wordmark in pill */
}

.pv-displateWrap--logo .pv-partnerInline__logo {
  transform: translateY(0.10em);
}

/* Prints hub title line: OFFICIAL · [Displate wordmark] · SHOP on one axis */
#prints .pv-printHub__primary .pv-displateTitle--header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: 1;
}

#prints .pv-printHub__primary .pv-displateLabel {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: none;
  color: rgba(243, 234, 217, 0.62);
  transform: translateY(0.04em);
  /* optical alignment to the wordmark */
}

#prints .pv-printHub__primary .pv-displateTitle__mark {
  display: inline-flex;
  align-items: center;

  line-height: 0;
}

#prints .pv-printHub__primary .pv-displateTitle__logo {
  height: 18px;
  width: auto;
  transform: translateY(var(--pv-displate-logo-nudge));
  /* compensate logo viewBox whitespace */
}

/* Trustpilot chip: single action chip */
#prints .pv-printHub__primary .pv-proofChip--link {
  padding-right: 0.8em;
}


/* --------------------------------------------------
   Displate inline wordmark (no pill) — normalization
   Used in hero proofline + modal trustline.
-------------------------------------------------- */
.pv-displateTitle__mark--inline {
  gap: 6px;
  vertical-align: middle;
}

.pv-displateWrap--logo .pv-displateTitle__mark--inline .pv-displateTitle__logo {
  height: var(--pv-displate-inline-logo-h);
  width: auto;
  transform: translateY(var(--pv-displate-inline-y));
}

/* Keep clickable partner marks link-like, not button-like */
a.pv-displateTitle__mark--inline.pv-partnerInline--click:hover {
  text-decoration: underline;
  text-decoration-color: rgba(212, 169, 74, 0.55);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   Mobile stability (AAA polish)
   - Avoid "placeholder squares" / pop-in by keeping images visible (blurred) while loading.
   - Disable content-visibility placeholders on small screens to prevent flicker.
   - Reduce shimmer work on mobile GPUs (still fades out once media is ready).
--------------------------------------------------------- */
@media (hover: none),
(max-width: 680px) {
  .pv-card {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .pv-card__media::after {
    opacity: 0.18;
    animation: none;
    transform: none;
  }

  .pv-img--loading {
    opacity: 1;
    filter: blur(18px) saturate(0.92) contrast(0.98);
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-card__media::after {
    animation: none;
  }
}


/* ============================================================
   AAA v3: Micro Depth + Hero HiFi (desktop only; performance-safe)
   - Featured cards get a touch more depth (without over-saturating the art)
   - Hero veil micro-parallax + magnetic CTAs are driven by JS via CSS vars
   Guards:
   - prefers-reduced-motion respected
   - hover:hover + pointer:fine only (no sticky hover on touch)
=============================================================== */

@media (prefers-reduced-motion: no-preference) and (hover:hover) and (pointer:fine) {

  /* Featured carousel: richer depth, but keep the artwork pristine */
  .pv-featured .pv-card--featured {
    transform: translateZ(0);
    transition:
      transform 260ms var(--pv-ease),
      box-shadow 260ms var(--pv-ease),
      border-color 260ms var(--pv-ease);
  }

  .pv-featured .pv-card--featured:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(212, 169, 74, 0.30);
    box-shadow: 0 28px 92px rgba(0, 0, 0, 0.78);
  }

  .pv-featured .pv-card--featured:hover .pv-card__media img {
    transform: scale(1.03);
    filter: none;
  }

  /* Dragging should feel stable (no hover-lift while scrubbing the rail) */
  .pv-featured__rail.pv-dragging .pv-card--featured,
  .pv-featured__rail.pv-dragging .pv-card--featured:hover {
    transform: none !important;
  }

  .pv-featured__rail.pv-dragging .pv-card--featured .pv-card__media img {
    transform: scale(1.01) !important;
    filter: none !important;
  }

  /* Hero media micro-parallax (transform only; JS sets --pv-hero-media-x/y) */
  .pv-hero__media {
    transform: translate3d(var(--pv-hero-media-x, 0px),
        var(--pv-hero-media-y, 0px),
        0) scale(1.02);
    will-change: transform;
  }

  /* Keep veil fixed (backdrop-filter) to avoid seam artifacts at the edges */
  .pv-hero__veil {
    transform: none !important;
  }

  /* Magnetic hero CTAs (JS sets --pv-cta-mx/my per button) */
  .pv-hero__ctas .pv-btn {
    transform: translate3d(var(--pv-cta-mx, 0px), var(--pv-cta-my, 0px), 0);
    will-change: transform;
  }

  .pv-hero__ctas .pv-btn:hover {
    transform: translate3d(var(--pv-cta-mx, 0px), var(--pv-cta-my, 0px), 0) translateY(-2px);
  }

  .pv-hero__ctas .pv-btn:active {
    transform: translate3d(var(--pv-cta-mx, 0px), var(--pv-cta-my, 0px), 0) translateY(0px);
  }
}