/* ============================================================
   components.css — buttons, cards, forms, cart widgets.
============================================================ */

.btn {
  display: inline-block;
  padding: 0.85em 1.6em;
  background: var(--fg);
  color: var(--bg);
  border: none;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.85; text-decoration: none; }
.btn-secondary { background: transparent; color: var(--fg); border: 1px solid rgba(255,255,255,0.2); }
.btn-primary   { background: var(--accent); color: #fff; }

.product-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.product-card a { display: flex; flex-direction: column; gap: 0.4em; padding: 1.2rem; border: 1px solid rgba(255,255,255,0.06); }
.product-card strong { font-weight: 500; letter-spacing: 0.05em; }
.product-card span { color: var(--muted); font-size: 0.85rem; }

.cart-lines { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.cart-lines li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 1rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cart-line-form { display: inline-flex; gap: 0.4rem; align-items: center; }
.cart-line-form input[type=number] { width: 4rem; padding: 0.3rem; background: var(--panel); color: var(--fg); border: 1px solid rgba(255,255,255,0.1); }
.cart-total { font-size: 1.2rem; letter-spacing: 0.04em; }

.cart-badge { display: inline-block; min-width: 1.25rem; padding: 0.15em 0.4em; background: var(--ca, #fe86f4); color: var(--cp, #8c75ff); border-radius: 999px; font-size: 0.7rem; margin-left: 0.35rem; font-weight: 700; }

.cart-btn {
  display: inline-flex; align-items: center;
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; cursor: pointer; line-height: 1;
  flex-shrink: 0;
  margin-left:20px;
  margin-right:10px;
}
.cart-btn:hover { color: var(--ca, #fe86f4); }
.cart-btn__icon { display: block; }

.empty-state { max-width: 44rem; padding: 1.5rem; border: 1px dashed rgba(255,255,255,0.12); color: var(--muted); line-height: 1.7; }
.empty-state code { background: rgba(255,255,255,0.06); padding: 0.1em 0.4em; color: var(--fg); font-size: 0.9em; }
.empty-state a { color: var(--accent); }

/* ============================================================
   Home page — two full-viewport sections
============================================================ */
/* Snap scrolling — html is the scroll container (always === document.scrollingElement).
   body stays auto-height so sections stack naturally inside it. */
html:has(body.page-home) {
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;  /* prevent 1-2px bleed from scrollbar-width mismatch */
  scroll-snap-type: y mandatory;
  overscroll-behavior: none;
}
body.page-home {
  overflow: visible;
}

/* Fixed header on home — hidden until user scrolls past the hero.
   IMPORTANT: no transform on the visible state. A non-none transform on the
   header would make it the containing block for position:fixed descendants
   (CSS spec), trapping .nav-links inside the header instead of the viewport. */
body.page-home .site-header {
  position: fixed;
  top: calc(-1 * var(--header-h) - 2px); /* slide above viewport — no transform */
  left: 0;
  right: 0;
  z-index: 9001;
  opacity: 0;
  pointer-events: none;
  transition: top 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* On the homepage the header is transparent and floats over sections that
   already have their own grain — suppress the header grain to avoid doubling. */
body.page-home .site-header::before { display: none; }
body.page-home .site-header.header-visible {
  top: 0;  /* no transform — nav-links stays viewport-relative */
  opacity: 1;
  pointer-events: auto;
}

/* Hero section — big centered logo */
.hero-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.hero-logo-clip {
  flex: none;
  width: clamp(460px, 68vw, 920px);
  height: clamp(283px, 53vh, 601px);
  overflow: hidden;
  position: relative;
}
.hero-logo-3d {
  display: block;
  width: 100%;
  height: 100%;
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  --poster-color: transparent;
  background: transparent;
}

.home-section {
  display: grid;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}
/* Footer is the last snap target on the home page. */
body.page-home .site-footer { scroll-snap-align: start; }

/* Section 1: looping video + frame PNG overlay */
.home-section--video { padding: 0; }
.hero-video-stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;         /* PNG stretches to stage — it's a frame. */
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* Hero audio toggle — hidden until track is replaced with a royalty-cleared one */
#hero-audio-btn { display: none !important; }
/* Hero audio toggle — pill style matching .pp-buy-btn */
#hero-audio-btn.__unused {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1rem;
  color: var(--cp, #8c75ff);
  background: var(--ca, #fe86f4);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity .18s ease, transform .12s ease;
}
#hero-audio-btn:hover  { opacity: .85; }
#hero-audio-btn:active { transform: scale(.96); }

/* -------- Hero scroll arrow -------- */
.hero-scroll-arrow {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 8.8rem;
  height: 8.8rem;
  color: #fe86f4;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  animation: hero-arrow-bounce 1.6s ease-in-out infinite;
}
.hero-scroll-arrow svg { width: 100%; height: 100%; display: block; }
@keyframes hero-arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);    opacity: 1;   }
  50%       { transform: translateX(-50%) translateY(6px);  opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow { animation: none; }
}

/* Section 4 (herstory): 4-column layout — wider slots so frames don't overlap */
#section-insta {
  overflow: visible;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  align-content: center;
  padding-top: 10%;
}
#section-insta .brand-stage    { grid-column: 1; text-align: right; padding-right: 2.5rem; padding-left: 2rem; }
#section-insta .polaroid-col--1 { grid-column: 2; }
#section-insta .polaroid-col--2 { grid-column: 3; }
#section-insta .polaroid-col--3 { grid-column: 4; }

/* Section 2: brand wordmark + CTA */
.home-section--brand {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #8c75ff;
  color: #fe86f4;
  text-align: left;
  padding: 0;
  position: relative;
  isolation: isolate;
}

/* ── Grainy gradient overlay ─────────────────────────────────────────────── */
/* SVG fractal-noise tile used for the grain texture across brand sections.  */
/* technique: css-tricks.com/grainy-gradients — noise + gradient, mix:overlay */
.home-section--brand::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 100% 0%, rgba(254,134,244,0.28) 0%, transparent 62%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  mix-blend-mode: overlay;
  opacity: 0.45;
}
/* "make it yours" (cfg-invite) — gradient from bottom-right */
#section-cfg-invite::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 90% 90%, rgba(254,134,244,0.28) 0%, transparent 60%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
}
/* "no trends no noise" (herstory) — gradient from top center */
#section-insta::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 0%, rgba(254,134,244,0.3) 0%, transparent 55%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
}
.brand-stage {
  grid-column: 2;
  padding: 3rem 1.25rem 3rem 0;
}
.home-section--brand:has(.polaroid-col) .brand-stage { text-align: right; padding-right: 2.5rem; }
#section-statement .brand-stage { padding-top: 13rem; align-self: start; position: relative; z-index: 1; }
#section-cfg-invite .brand-stage { position: relative; z-index: 1; }
/* Diagonal pink gradient — bottom-left to top-right */
#section-statement::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top right, rgba(254,134,244,0.55) 0%, transparent 58%);
}
/* Diagonal pink gradient — bottom-right to top-left */
#section-cfg-invite::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top left, rgba(254,134,244,0.55) 0%, transparent 58%);
}
/* Soft diagonal pink gradient — top-left to bottom-right */
#section-insta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top left, rgba(254,134,244,0.32) 0%, transparent 52%);
}
#section-insta .brand-stage { position: relative; z-index: 1; }
#section-insta .polaroid-col { position: relative; z-index: 1; }
/* Hide section grain when the "more" overlay is open — overlay has its own grain */
#section-statement:has(.brand-about-overlay.is-open)::before { display: none; }
#section-statement:has(.brand-about-overlay.is-open)::after { display: none; }
/* Statement section image wrapper — right three columns, pinned to bottom */
.statement-img-wrap {
  grid-column: 3 / 6;
  align-self: end;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.statement-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: auto;
  user-select: none;
  cursor: pointer;
}
.statement-frame-overlay {
  position: absolute;
  top: calc(50% + 7%);
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 55%);
  height: calc(100% + 55%);
  max-width: none;
  pointer-events: none;
  z-index: 2;
}
/* Section 4 polaroid — column 3 */
.polaroid-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.polaroid-col--1 { grid-column: 3; }
.polaroid-col--2 { grid-column: 4; }
.polaroid-col--3 { grid-column: 5; }
.polaroid-frame {
  position: relative;
  background: transparent;
  padding: 0;
}
.polaroid-frame-overlay {
  position: absolute;
  top: calc(50% + 7%);
  left: 50%;
  transform: translate(-50%, -50%);
  /* Bleed as % of frame so it scales proportionally at any frame size */
  width: calc(100% + 55%);
  max-width: none;
  height: calc(100% + 55%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 1023px) {
  .polaroid-frame-overlay { max-width: 100vw; }
  #section-insta .polaroid-col--3 { display: none; }
}
.polaroid-window {
  /* Fluid: fills column on mobile, caps at 10rem on desktop */
  width: clamp(5rem, 25vw, 10rem);
  height: clamp(6rem, 30vw, 12rem);
  overflow: hidden;
}
@media (max-width: 767px) {
  .polaroid-window {
    width: clamp(4rem, 20vw, 6rem);
    height: clamp(5rem, 24vw, 8rem);
  }
}
.polaroid-reel {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.polaroid-window {
  position: relative;
  overflow: hidden;
}
.polaroid-item {
  position: relative;
  display: block;
  text-decoration: none;
  z-index: 1;
}
.polaroid-img {
  display: block;
  width: clamp(5rem, 25vw, 10rem);
  height: clamp(6rem, 30vw, 12rem);
  object-fit: cover;
  flex: 0 0 auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.polaroid-img:hover {
  filter: blur(2px);
  image-rendering: pixelated;
  transform: scale(1.05);
}
.polaroid-img:hover + .polaroid-instagram-link,
.polaroid-item:hover .polaroid-instagram-link {
  opacity: 1;
}
@media (max-width: 767px) {
  .polaroid-img {
    width: clamp(4rem, 20vw, 6rem);
    height: clamp(5rem, 24vw, 8rem);
  }
}
/* Big screens: instax 20% bigger (frame overlay scales with the window) */
@media (min-width: 1600px) {
  .polaroid-window,
  .polaroid-img {
    width: 12rem;
    height: 14.4rem;
  }
}
.polaroid-instagram-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.75rem 1.25rem;
  background: rgba(140, 117, 255, 0.98);
  background: var(--cp, rgba(140, 117, 255, 0.98));
  color: #fe86f4;
  color: var(--ca, #fe86f4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  z-index: 10;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Polaroid lightbox ──────────────────────────────────────────────── */
.polaroid-img { cursor: zoom-in; }
#polaroid-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#polaroid-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-out;
}
#polaroid-lightbox img {
  width: 22rem;
  height: 30rem;
  object-fit: cover;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
  background: #f5f5f0;
  padding: 0.65rem 0.65rem 2.75rem;
  transform: scale(0.88);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  cursor: default;
}
#polaroid-lightbox.is-open img { transform: scale(1); }

/* ── Section 4 responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .home-section--brand {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    padding: 4rem 1.25rem 2.5rem;
  }
  .brand-stage {
    flex: 0 0 auto;
    padding: 0;
    width: 100%;
  }
  /* centre-align the text in section 4 on mobile */
  .home-section--brand:has(.polaroid-col) .brand-stage {
    text-align: center !important;
  }
  .polaroid-col,
  .polaroid-col--1,
  .polaroid-col--2,
  .polaroid-col--3 {
    flex: 1 1 0;
    grid-column: unset;
  }
  /* polaroid-window/img now use clamp() — no fixed mobile override needed */
  .polaroid-frame-overlay { top: calc(50% + 7%); }

  /* ── Herstory section — 2 polaroid cols side by side on mobile ── */
  #section-insta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 3rem 1rem 2.5rem;
  }
  #section-insta .brand-stage {
    flex: 0 0 100%;
    width: 100%;
    text-align: center !important;
    padding: 0;
    margin-bottom: 3.5rem;
  }
  #section-insta .brand-wordmark {
    font-size: clamp(2.6rem, 11vw, 4rem);
  }
  #section-insta .brand-tagline {
    font-size: clamp(0.8rem, 3.8vw, 1rem);
    letter-spacing: 0.12em;
  }
  #section-insta .polaroid-col--1,
  #section-insta .polaroid-col--2 {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    min-width: 0;
  }
  #section-insta .polaroid-col--3 { display: none; }

  /* ── Statement section (section 2) — column stack on mobile ───── */
  /* Uses ID selector to win the specificity battle against
     #section-statement .brand-stage { padding-top: 13rem } (desktop rule). */
  #section-statement {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }
  #section-statement .brand-stage {
    flex: 0 0 auto;
    padding: 9rem 1.25rem 1.5rem;
    align-self: auto;
  }
  /* Wrap is the direct flex child — it must grow to fill remaining space */
  #section-statement .statement-img-wrap {
    flex: 1 1 0;
    min-height: 120px;
    height: auto;
    width: 100%;
    grid-column: unset;
    align-self: auto;
    padding-bottom: 15vh;
  }
  /* Image fills the wrapper */
  #section-statement .statement-img {
    width: 100%;
    height: 100%;
    min-height: 120px;
  }
}
.brand-wordmark {
  font-size: clamp(1.625rem, 6.5vw, 4.55rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 0 1.4rem;
}
.brand-tagline {
  color: rgba(254,134,244,0.7);
  font-size: clamp(.975rem, 1.3vw, 1.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}
.brand-cta .btn + .btn { margin-left: 0.6rem; }

/* Brand about — more / back buttons: pill style matching the CTA button */
.brand-about-trigger,
.brand-about-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 24px;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cp, #8c75ff);
  background: var(--ca, #fe86f4);
  border: 2px solid var(--ca, #fe86f4);
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .18s ease;
}
.brand-about-trigger { margin-top: 1.5rem; }
.brand-about-close   { margin-top: 1.5rem; }
.brand-about-trigger:hover,
.brand-about-close:hover  { opacity: 0.82; outline: none; }
.brand-about-trigger:active,
.brand-about-close:active { opacity: 0.65; }
.brand-about-trigger:focus-visible,
.brand-about-close:focus-visible { outline: 2px solid #fe86f4; outline-offset: 3px; }

.brand-about-overlay {
  position: absolute;
  inset: 0;
  background: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem clamp(1.25rem, 8vw, 6rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 10;
  overflow: hidden;
}
.brand-about-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 100% 0%, rgba(254,134,244,0.28) 0%, transparent 62%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  mix-blend-mode: overlay;
  opacity: 0.45;
}
.brand-about-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.brand-about-content {
  max-width: 54rem;
  width: 100%;
}
.brand-about-content p {
  color: #fe86f4;
  font-size: clamp(0.8rem, 2.2vh, 1.15rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0 0 0.9em;
  text-transform: none;
}
.brand-about-content p:last-child { margin-bottom: 0; }

/* Section 3: embedded visualizer */
.home-section--visualizer { padding: 0; background: var(--bg); position: relative; }
.viz-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: var(--bg, #8c75ff);
  opacity: 1;
  transition: opacity 0.55s ease;
}
.viz-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 100% 0%, rgba(254,134,244,0.28) 0%, transparent 62%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  mix-blend-mode: overlay;
  opacity: 0.45;
}
.viz-loader__img {
  position: relative;
  z-index: 1;
  max-width: 220px;
  width: 40%;
  height: auto;
}
.viz-loader.is-loaded { opacity: 0; }
.viz-loader.is-gone   { display: none; }
.home-visualizer-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100dvh;
  border: 0;
  display: block;
}
/* Expand iframe to true full-screen when the product modal is open inside it */
.home-visualizer-frame.pp-fullscreen {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999;
}

/* Section 4a: configurator invite teaser */
#section-cfg-invite {
  grid-template-rows: 1fr;
  position: relative;
}
#section-cfg-invite .brand-stage {
  grid-column: 2 / 4;
  padding-top: 13rem;
  align-self: start;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  /* "Make it yours" text/CTA block, shifted 10% of its own width to the
     left on laptop screens. */
  #section-cfg-invite .brand-stage {
    transform: translateX(-10%);
  }
}
.cfg-invite__eyebrow {
  font-size: 0.7rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--ca, #fe86f4); opacity: 0.6; margin: 0 0 0.6rem; font-weight: 700;
}
.cfg-invite__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  min-width: 140px;
  padding: 9px 17px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
  background: var(--cp, #8c75ff);
  border: 2px solid var(--ca, #fe86f4);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  font-family: inherit;
  margin-top: 2rem;
}
.cfg-invite__cta:hover {
  background: var(--ca, #fe86f4);
  color: var(--cp, #8c75ff);
  border-color: var(--ca, #fe86f4);
}
/* Configurator preview image — pinned to bottom-right of section */
.cfg-invite__img-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 900px;
  z-index: 1;
}
.cfg-invite__img {
  width: 100%; height: auto;
  object-fit: contain;
  user-select: none;
  display: block;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  /* Laptop widths: image was rendering at its full 900px cap, too large
     relative to the section on smaller laptop screens. 20% smaller. */
  .cfg-invite__img-wrap { max-width: 720px; }
}
@media (max-width: 767px) {
  #section-cfg-invite {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    /* Exactly one screen tall. When the section was taller than the screen, arriving
       at its lower end pushed "Make it yours" up underneath the logo. The image now
       takes whatever height is left instead of making the section grow. */
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    gap: 0.5rem;
  }
  #section-cfg-invite .brand-stage {
    flex: 0 0 auto;
    padding: 5rem 1.5rem 1rem;
    align-self: auto;
  }
  #section-cfg-invite .cfg-invite__eyebrow {
    margin-top: 1.75rem;
  }
  #section-cfg-invite .brand-wordmark {
    font-size: clamp(2.8rem, 12vw, 5rem);
    white-space: normal;
  }
  #section-cfg-invite .brand-tagline {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    opacity: 1;
    color: var(--ca, #fe86f4);
    max-width: 36ch;
  }
  .cfg-invite__img-wrap {
    position: relative;
    width: 85%;
    margin: 0 auto;
    flex: 1 1 0;      /* fills the space left under the text */
    min-height: 0;
  }
  .cfg-invite__img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* Section 4b: embedded shirt configurator */
.home-section--configurator { padding: 0; background: var(--bg); }
.home-configurator-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100dvh;
  border: 0;
  display: block;
}

/* Keep the old .home-hero rule for any non-home pages still using it. */
.home-hero { max-width: 56rem; margin: 0 auto; padding: 4rem 0; text-align: center; }
.home-hero h1 { font-size: clamp(3rem, 10vw, 6rem); letter-spacing: -0.02em; }
.home-hero p { color: var(--muted); font-size: 1rem; }
.home-hero .btn + .btn { margin-left: 0.6rem; }

/* ============================================================
   Site footer — German e-commerce
============================================================ */
.site-footer {
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  padding: 3rem 1.5rem 2rem;
  border-top: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 20%, transparent);
  position: relative;
  isolation: isolate;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 100%, rgba(254,134,244,0.25) 0%, transparent 65%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  background-attachment: fixed, fixed;
  mix-blend-mode: overlay;
  opacity: 0.45;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  max-width: 80rem;
  margin: 0 auto 2.5rem;
}
@media (max-width: 767px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem 1.25rem;
  }
  .site-footer__col--brand { grid-column: 1 / -1; }
  .site-footer__col h4 { letter-spacing: 0.08em; font-size: 0.68rem; }
}
.site-footer__col h4 {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
  font-weight: 600;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.site-footer__col a { color: var(--ca, #fe86f4); font-size: 0.85rem; }
.site-footer__col a:hover { opacity: .7; }
.site-footer__brand { font-size: 1.2rem; letter-spacing: 0.25em; color: var(--ca, #fe86f4); display: block; margin-bottom: 0.6rem; }
.site-footer__blurb { font-size: 0.85rem; line-height: 1.6; margin: 0; max-width: 24rem; color: color-mix(in srgb, var(--ca, #fe86f4) 70%, transparent); }

.site-footer__meta {
  max-width: 80rem;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ca, #fe86f4) 50%, transparent);
}
.site-footer__meta a { color: var(--ca, #fe86f4); }
.site-footer__meta a:hover { opacity: .7; }
.site-footer__credit { display: block; text-align: right; margin-top: 0.75rem; font-size: 0.85rem; color: color-mix(in srgb, var(--ca, #fe86f4) 90%, transparent); }
.site-footer__credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Brutalist sliding cart drawer (top-right)
   Uses --cp (primary/bg) and --ca (accent/text) from theme picker.
============================================================ */
.cart-drawer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.cart-drawer[aria-hidden="false"] { pointer-events: auto; }

.cart-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity .25s ease;
}
.cart-drawer[aria-hidden="false"] .cart-drawer__scrim { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: var(--header-h); right: 0;
  width: min(340px, 92vw);
  max-height: calc(100dvh - var(--header-h));
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  border-left: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 25%, transparent);
  box-shadow: none;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(calc(-100% - var(--header-h)));
  transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease;
  font-family: inherit;
  isolation: isolate;
}
.cart-drawer[aria-hidden="false"] .cart-drawer__panel {
  transform: translateY(0);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.cart-drawer__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 100% 0%, rgba(254,134,244,0.28) 0%, transparent 65%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, 100% 100%;
  background-attachment: fixed, fixed;
  mix-blend-mode: overlay;
  opacity: 0.45;
}

@media (max-width: 767px) {
  .cart-drawer__panel {
    width: 100%;
    top: 0;
    max-height: 100dvh;
    padding-top: var(--header-h);
    box-sizing: border-box;
    transform: translateY(-100%); /* simpler offset since top is now 0 */
  }
}

.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.25rem;
  border-bottom: 2px solid color-mix(in srgb, var(--ca, #fe86f4) 35%, transparent);
  background: var(--cp, #8c75ff);
}
.cart-drawer__head h2 {
  margin: 0; font-size: 1.1rem; letter-spacing: 0.35em;
  text-transform: uppercase; font-weight: 700; color: var(--ca, #fe86f4);
}
.cart-drawer__count {
  display: inline-block; margin-left: 0.5em;
  padding: 0.1em 0.55em; background: var(--ca, #fe86f4); color: var(--cp, #8c75ff);
  font-size: 0.75rem; letter-spacing: 0.1em;
}
.cart-drawer__x {
  background: transparent; color: var(--ca, #fe86f4); border: 2px solid var(--ca, #fe86f4);
  width: 2.2rem; height: 2.2rem; font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0;
}
.cart-drawer__x:hover { background: var(--ca, #fe86f4); color: var(--cp, #8c75ff); }

.cart-drawer__lines {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; overflow-y: auto;
}
.cart-drawer__line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  color: var(--ca, #fe86f4);
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 18%, transparent);
}
.cart-drawer__thumb {
  width: 64px; height: 64px; background: var(--cp, #8c75ff);
  border: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 20%, transparent); object-fit: cover;
}
img.cart-drawer__thumb { cursor: pointer; }
.cart-drawer__thumb--cfg {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ca, #fe86f4);
}
.cart-drawer__meta { min-width: 0; }
.cart-drawer__meta .name {
  display: block; font-size: 0.9rem; letter-spacing: 0.05em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ca, #fe86f4);
}
.cart-drawer__meta .qty {
  display: block; font-size: 0.75rem; letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--ca, #fe86f4) 60%, transparent);
  text-transform: uppercase; margin-top: 0.2em;
}
.cart-drawer__price {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem;
  font-size: 0.85rem; letter-spacing: 0.05em; color: var(--ca, #fe86f4);
}
.cart-drawer__remove {
  background: transparent; color: var(--ca, #fe86f4);
  border: 1px solid color-mix(in srgb, var(--ca, #fe86f4) 45%, transparent);
  padding: 0.15em 0.55em; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; cursor: pointer;
}
.cart-drawer__remove:hover {
  background: var(--ca, #fe86f4);
  border-color: var(--ca, #fe86f4);
  color: var(--cp, #8c75ff);
}

@keyframes cart-line-blink {
  0%, 100% { background: transparent; }
  50%       { background: color-mix(in srgb, var(--ca, #fe86f4) 22%, transparent); }
}
.cart-drawer__line--new { animation: cart-line-blink 0.55s ease-in-out 2; }

.cart-drawer__empty {
  margin: 0; padding: 3rem 1.25rem; text-align: center;
  letter-spacing: 0.3em; font-size: 0.85rem;
  color: color-mix(in srgb, var(--ca, #fe86f4) 55%, transparent);
}

.cart-drawer__foot {
  border-top: 2px solid color-mix(in srgb, var(--ca, #fe86f4) 35%, transparent);
  padding: 1.1rem 1.25rem;
  background: var(--cp, #8c75ff);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.cart-drawer__total {
  display: flex; justify-content: space-between; align-items: baseline;
  letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.8rem;
  color: var(--ca, #fe86f4);
}
.cart-drawer__total strong { font-size: 1.25rem; letter-spacing: 0.05em; color: var(--ca, #fe86f4); }
.cart-drawer__checkout {
  width: 100%; padding: 0.85em; cursor: pointer;
  background: var(--ca, #fe86f4); color: var(--cp, #8c75ff);
  border: 2px solid var(--ca, #fe86f4);
  border-radius: 999px;
  font-size: 0.85rem; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 700;
  transition: transform .12s ease, opacity .15s ease;
}
.cart-drawer__checkout:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.cart-drawer__checkout:disabled { opacity: 0.35; cursor: not-allowed; }

/* In-drawer confirm dialog */
.cart-drawer__confirm[hidden] { display: none !important; }
.cart-drawer__confirm {
  position: absolute; inset: 0;
  background: var(--cp, #8c75ff);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity .18s ease;
  z-index: 5;
}
.cart-drawer__confirm.is-visible { opacity: 1; }
.cart-drawer__confirm-msg {
  margin: 0 0 1.2rem;
  padding: 1.2rem 1rem;
  background: var(--cp, #8c75ff); color: var(--ca, #fe86f4);
  border: 2px solid var(--ca, #fe86f4);
  font-size: 0.85rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center;
  max-width: 100%;
}
.cart-drawer__confirm > div {
  display: flex; gap: 0.75rem; width: 100%;
}
.cart-drawer__confirm-actions { display: flex; gap: 0.75rem; width: 100%; }
.cart-drawer__confirm-btn {
  flex: 1;
  padding: 0.85em 1em;
  background: transparent; color: var(--ca, #fe86f4);
  border: 2px solid var(--ca, #fe86f4);
  border-radius: 999px;
  font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.cart-drawer__confirm-btn:hover { opacity: .75; }
.cart-drawer__confirm-btn.is-danger {
  background: var(--ca, #fe86f4); color: var(--cp, #8c75ff); border-color: var(--ca, #fe86f4);
}
.cart-drawer__confirm-btn.is-danger:hover { opacity: .85; }

.cart-drawer__toast {
  position: absolute;
  top: 50%; left: 1.25rem; right: 1.25rem;
  transform: translateY(calc(-50% + 8px));
  padding: 0.9rem 1.25rem;
  background: var(--cp, #8c75ff); color: var(--ca, #fe86f4);
  border: 2px solid var(--ca, #fe86f4);
  font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; text-align: center;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.cart-drawer__toast.is-visible { opacity: 1; transform: translateY(-50%); }
.cart-drawer__toast.is-error { border-color: color-mix(in srgb, var(--ca, #fe86f4) 50%, transparent); opacity: 0.9; }

/* Configurator cart item — preview modal */
.cfg-preview-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.82);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.cfg-preview-modal.is-open { display: flex; }
.cfg-preview-modal__panel {
  position: relative; width: 100%; max-width: min(92vw, 880px);
  max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: var(--cp, #8c75ff); border: 2px solid var(--ca, #fe86f4);
}
.cfg-preview-modal__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}
.cfg-preview-modal__head {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--ca, #fe86f4);
  background: transparent;
}
.cfg-preview-modal__close {
  background: transparent;
  color: var(--ca, #fe86f4);
  border: 2px solid var(--ca, #fe86f4);
  width: 2.2rem; height: 2.2rem; font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.cfg-preview-modal__close:hover { background: var(--ca, #fe86f4); color: var(--cp, #8c75ff); }
.cfg-preview-modal__views {
  display: grid; grid-template-columns: 1fr 1fr;
}
.cfg-preview-modal__view:first-child:not([hidden]) ~ .cfg-preview-modal__view:not([hidden]) {
  border-left: 1px solid var(--ca, #fe86f4);
}
/* Phone screens: stack front/back vertically so each image fills width and the scroll wrapper handles overflow. */
@media (max-width: 640px) {
  .cfg-preview-modal { padding: 0.5rem; }
  .cfg-preview-modal__panel { max-width: 100%; max-height: 96dvh; }
  .cfg-preview-modal__views { grid-template-columns: 1fr; }
  .cfg-preview-modal__view:first-child:not([hidden]) ~ .cfg-preview-modal__view:not([hidden]) {
    border-left: none;
    border-top: 1px solid var(--ca, #fe86f4);
  }
}
.cfg-preview-modal__face-lbl {
  display: block; text-align: center; padding: 0.35rem;
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ca, #fe86f4);
  border-bottom: 1px solid var(--ca, #fe86f4);
}
.cfg-preview-modal__img { display: block; width: 100%; height: auto; }
.cfg-preview-modal__no-prev {
  color: var(--ca, #fe86f4); padding: 3rem 2rem; text-align: center;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 540px) {
  .cfg-preview-modal__views { grid-template-columns: 1fr; }
  .cfg-preview-modal__view:first-child:not([hidden]) ~ .cfg-preview-modal__view:not([hidden]) {
    border-left: none; border-top: 1px solid var(--ca, #fe86f4);
  }
  .cfg-preview-modal__panel { max-width: 100%; }
}

/* ============================================================
   Shop — listing + product detail
   Uses --cp (primary) and --ca (accent) set by the anti-flash
   script, falling back to the default brand palette.
============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */
.shop-page {
  min-height: calc(100dvh - var(--header-h, 3.4rem));
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
}

/* ── Listing header ──────────────────────────────────────────── */
.shop-head {
  padding: 4.5rem 2rem 2.5rem;
  border-bottom: 1px solid rgba(254,134,244,.2);
}
.shop-head__inner { max-width: 80rem; margin: 0 auto; }
.shop-head__title {
  font-size: clamp(3.5rem, 9vw, 7rem);
  letter-spacing: -0.02em;
  line-height: .9;
  margin: 0 0 .5rem;
  color: var(--ca, #fe86f4);
  font-weight: 700;
}
.shop-head__sub {
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
  opacity: .55;
  margin: 0;
}

/* ── Listing body ────────────────────────────────────────────── */
.shop-body {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

/* ── Product grid ────────────────────────────────────────────── */
.shop-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  border: 1px solid rgba(254,134,244,.15);
}

.shop-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .2s ease;
}
.shop-card__link:hover { border-color: var(--ca, #fe86f4); text-decoration: none; }

.shop-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(0,0,0,.15);
}
.shop-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-smooth, cubic-bezier(.22,.61,.36,1));
}
.shop-card__link:hover .shop-card__img { transform: scale(1.05); }

.shop-card__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--ca, #fe86f4);
  opacity: .18;
  user-select: none;
}

.shop-card__overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  opacity: 0;
  transition: opacity .2s ease;
  font-size: .65rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
}
.shop-card__link:hover .shop-card__overlay { opacity: 1; }

.shop-card__meta {
  padding: .9rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  border-top: 1px solid rgba(254,134,244,.15);
  background: var(--cp, #8c75ff);
}
.shop-card__name {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ca, #fe86f4);
}
.shop-card__price {
  font-size: .78rem;
  letter-spacing: .06em;
  opacity: .7;
  white-space: nowrap;
  color: var(--ca, #fe86f4);
}

/* ── Product detail ──────────────────────────────────────────── */
.product-detail {
  height: calc(100dvh - var(--header-h, 3.4rem));
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
}
@media (max-width: 767px) {
  .product-detail {
    height: auto;
    min-height: calc(100dvh - var(--header-h, 3.4rem));
    grid-template-columns: 1fr;
  }
}

.product-detail__visual {
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,.12);
  min-height: 55dvh;
}
.product-detail__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product-detail__placeholder {
  width: 100%; height: 100%;
  min-height: 55dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--ca, #fe86f4);
  opacity: .15;
  user-select: none;
}

.product-detail__info {
  padding: 3.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-detail__info::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .product-detail__info { padding: 2rem 1.5rem 3rem; }
}

.product-detail__label {
  font-size: .62rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0;
  color: var(--ca, #fe86f4);
}
.product-detail__name {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -.01em;
  line-height: .95;
  margin: 0;
  color: var(--ca, #fe86f4);
}
.product-detail__price {
  font-size: 1.6rem;
  letter-spacing: .04em;
  margin: 0;
  color: var(--ca, #fe86f4);
}
.product-detail__desc {
  font-size: .9rem;
  line-height: 1.75;
  opacity: .7;
  margin: 0;
  color: var(--ca, #fe86f4);
  max-width: 38ch;
}

.product-detail__form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-top: .5rem;
}
.product-detail__qty-row {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.product-detail__qty-label {
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: .55;
  color: var(--ca, #fe86f4);
}
.product-detail__qty-input {
  width: 5.5rem;
  padding: .55rem .85rem;
  background: transparent;
  border: 2px solid var(--ca, #fe86f4);
  color: var(--ca, #fe86f4);
  font-size: 1rem;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.product-detail__qty-input::-webkit-inner-spin-button,
.product-detail__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.product-detail__qty-input:focus { outline: none; }

.product-detail__back {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .45;
  color: var(--ca, #fe86f4);
  text-decoration: none;
  transition: opacity .15s ease;
  margin-top: .25rem;
}
.product-detail__back:hover { opacity: 1; text-decoration: none; }

/* ============================================================
   Cart page — full themed layout
   Uses --cp (primary) and --ca (accent) like the shop page.
============================================================ */
.cart-page {
  min-height: calc(100dvh - var(--header-h, 3.4rem));
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
}

/* ── Page header ─────────────────────────────────────────────── */
.cart-page__head {
  padding: 4.5rem 2rem 2rem;
  border-bottom: 1px solid rgba(254,134,244,.2);
}
.cart-page__head-inner {
  max-width: 44rem;
  margin: 0 auto;
}
.cart-page__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.02em;
  line-height: .9;
  margin: 0 0 .4rem;
  color: var(--ca, #fe86f4);
  font-weight: 700;
}
.cart-page__sub {
  font-size: .95rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
  opacity: .6;
  margin: 0;
}

/* ── Body ────────────────────────────────────────────────────── */
.cart-page__body {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

/* ── Empty state ─────────────────────────────────────────────── */
.cart-page__empty {
  text-align: center;
  padding: 5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.cart-page__empty p {
  font-size: .9rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0;
  color: var(--ca, #fe86f4);
}

/* ── Items list ──────────────────────────────────────────────── */
.cart-page__items {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.cart-page__item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(254,134,244,.18);
}

/* ── Product thumbnail ───────────────────────────────────────── */
.cart-page__img-wrap {
  width: 90px;
  height: 110px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(254,134,244,.2);
}
.cart-page__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-page__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--ca, #fe86f4);
  opacity: .25;
  user-select: none;
}

/* ── Item info ───────────────────────────────────────────────── */
.cart-page__item-info {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}
.cart-page__item-name {
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ca, #fe86f4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-page__item-cat {
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
  opacity: .62;
}
.cart-page__qty-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
}
.cart-page__qty-label {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .5;
  color: var(--ca, #fe86f4);
}
.cart-page__qty-input {
  width: 4rem;
  padding: .35rem .6rem;
  background: transparent;
  border: 2px solid rgba(254,134,244,.4);
  color: var(--ca, #fe86f4);
  font-size: .85rem;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-page__qty-input::-webkit-inner-spin-button,
.cart-page__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.cart-page__qty-input:focus {
  outline: none;
  border-color: var(--ca, #fe86f4);
}
.cart-page__update-btn {
  background: transparent;
  color: var(--ca, #fe86f4);
  border: 1px solid rgba(254,134,244,.45);
  padding: .3em .8em;
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.cart-page__update-btn:hover {
  background: var(--ca, #fe86f4);
  color: var(--cp, #8c75ff);
  border-color: var(--ca, #fe86f4);
}

/* ── Item right (price + remove) ─────────────────────────────── */
.cart-page__item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
.cart-page__item-price {
  font-size: .95rem;
  letter-spacing: .05em;
  color: var(--ca, #fe86f4);
  white-space: nowrap;
}
.cart-page__remove-btn {
  background: transparent;
  color: var(--ca, #fe86f4);
  border: 1px solid rgba(254,134,244,.35);
  padding: .25em .7em;
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  opacity: .55;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.cart-page__remove-btn:hover {
  opacity: 1;
  background: rgba(254,134,244,.15);
  border-color: var(--ca, #fe86f4);
}

/* ── Summary block ───────────────────────────────────────────── */
.cart-page__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(254,134,244,.35);
}
.cart-page__total {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
}
.cart-page__total strong {
  font-size: 1.6rem;
  letter-spacing: .04em;
  color: var(--ca, #fe86f4);
}
.cart-page__checkout {
  min-width: 14rem;
  justify-content: center;
}
.cart-page__continue {
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ca, #fe86f4);
  opacity: .45;
  text-decoration: none;
  transition: opacity .15s ease;
}
.cart-page__continue:hover { opacity: 1; text-decoration: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cart-page__head { padding: 4rem 1.25rem 1.5rem; }
  .cart-page__body { padding: 1.5rem 1.25rem 4rem; }
  .cart-page__item {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
  }
  .cart-page__img-wrap { width: 72px; height: 88px; }
  .cart-page__item-right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: .5rem;
    border-top: 1px solid rgba(254,134,244,.12);
  }
  .cart-page__summary { align-items: stretch; }
  .cart-page__total { justify-content: space-between; }
  .cart-page__checkout { width: 100%; }
  .cart-page__continue { text-align: center; }
}

/* ── pp-buy-btn reused on shop product page ─────────────────── */
.pp-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75em 2em;
  background: var(--ca, #fe86f4);
  color: var(--cp, #8c75ff);
  border: 2px solid var(--ca, #fe86f4);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease;
  text-decoration: none;
  white-space: nowrap;
}
.pp-buy-btn:hover { opacity: .85; transform: translateY(-1px); text-decoration: none; }
.pp-buy-btn--inv {
  background: var(--cp, #8c75ff);
  color: var(--ca, #fe86f4);
  border-color: var(--ca, #fe86f4);
}