/* ================================================================
   FLORINSKY ATELIER — Production Stylesheet
   Soft pastel neumorphism · Warm rose-cream · Lilac accent
   ================================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; }

/* ---- Design Tokens ---- */
:root {
  /* Surfaces */
  --bg:               #EADCDB;
  --surface:          #F9F4F0;
  --surface-rose:     #DECED2;
  --surface-lilac:    #C4BAD3;
  --surface-form:     #D4D6DB;
  --surface-distinct: #dbcfd2;
  --frame:            #C3BDCF;

  /* Ink */
  --ink:       #2D2626;
  --ink-soft:  #4E4444;
  --ink-mauve: #6B5A5B;
  --ink-muted: #8A7B7C;
  --on-dark:   #F9F4F0;

  /* Brand */
  --brand:      #A878D0;
  --brand-deep: #8E5FB6;
  --brand-soft: #C9B0E0;
  --footer-bg:  #63535B;

  /* Neumorphic shadow pairs (one system, three tiers) */
  --nm-light: rgba(255, 255, 255, 0.72);
  --nm-dark:  rgba(112, 96, 110, 0.30);

  --elev-sm:    -5px  -5px  12px var(--nm-light),  5px  5px  12px var(--nm-dark);
  --elev-md:    -9px  -9px  18px var(--nm-light),  9px  9px  18px var(--nm-dark);
  --elev-lg:   -16px -16px  32px var(--nm-light), 16px 16px  32px var(--nm-dark);
  --elev-hover:-12px -12px  24px var(--nm-light), 12px 12px  24px var(--nm-dark);

  --inset-sm: inset  -4px  -4px 10px var(--nm-light), inset  4px  4px 10px var(--nm-dark);
  --inset-md: inset  -8px  -8px 16px var(--nm-light), inset  8px  8px 16px var(--nm-dark);
  --inset-lg: inset -13px -13px 26px var(--nm-light), inset 13px 13px 26px var(--nm-dark);
  --nm-inset: var(--inset-sm);

  --glow-accent: 0 0 0 1px rgba(168,120,208,.25),
                 -8px -8px 18px var(--nm-light),
                  8px  8px 18px rgba(142,95,182,.28);

  /* Typography */
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-pill: 9999px;
  --r-card: 32px;
  --r-panel: 48px;

  /* Spacing (8pt grid) */
  --s-1:  8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-6: 48px;  --s-8: 64px;  --s-10: 80px; --s-12: 96px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  280ms;
}

/* ---- Base ---- */
body {
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography helpers ---- */
.eyebrow {
  font: 400 15px/1.5 var(--font-sans);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
}

.section-label {
  font: 700 13px/1.5 var(--font-sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ================================================================
   LAYOUT SHELL
   ================================================================ */
.site-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 128px;
  padding: 80px 64px 64px;
}

/* ================================================================
   TOP NAV
   ================================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 14px 64px;
  display: flex;
  justify-content: center;
  transition: transform 480ms ease-in-out;
}

.nav--hidden {
  transform: translateY(-110%) !important;
  pointer-events: none !important;
}

.nav-pill {
  height: 60px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--elev-md);
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 0 40px;
}

.nav-link {
  position: relative;
  font: 500 16px/1.5 var(--font-sans);
  color: var(--ink-soft);
  white-space: nowrap;
  /* leave = 2s ease-in-out */
  transition: color 2s ease-in-out;
  padding-bottom: 4px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 6px;
  border-radius: 9999px;
  background: var(--brand);
  /* leave = 2s ease-in-out */
  transition: width 2s ease-in-out;
}

.nav-link:hover {
  color: var(--brand);
  /* enter = fast */
  transition: color var(--dur) var(--ease);
}
.nav-link:hover::after {
  transition: width var(--dur) var(--ease);
}
.nav-link.active {
  font-weight: 600;
  color: var(--brand-deep);
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 40px 0 8px;
  width: 100%;
}

/* Wordmark block */
.hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.wordmark {
  font: 400 61px/1 var(--font-display);
  letter-spacing: 0.05em;
  color: var(--brand);
  display: inline-block;
  cursor: default;
  /* leave = 2s ease-in-out */
  transition:
    transform   2s ease-in-out,
    text-shadow 2s ease-in-out,
    color       2s ease-in-out;
}

.wordmark:hover {
  transform: scale(1.018);
  color: #c084f5;
  text-shadow:
    0 0  8px rgba(192, 132, 245, 0.34),
    0 0 16px rgba(168, 120, 208, 0.30),
    0 0 32px rgba(168, 120, 208, 0.23),
    0 0 64px rgba(142,  95, 182, 0.14),
    0 0 96px rgba(142,  95, 182, 0.07);
  /* enter = 2× slower than before (1680ms) */
  transition:
    transform   1680ms var(--ease),
    text-shadow 1680ms var(--ease),
    color       1680ms var(--ease);
}


.wordmark-tagline {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-wordmark .eyebrow {
  font-size: 13.5px; /* 15px × 0.9 */
}

.tagline-rule {
  display: block;
  width: 40px;
  height: 1.5px;
  background: var(--brand-soft);
}

/* Hero image plate */
.hero-plate {
  width: 100%;
  max-width: 1072px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--elev-lg);
  padding: 16px;
  border: 1.5px solid transparent;
  border-top-color: rgba(255,255,255,0.88);
  border-left-color: rgba(255,255,255,0.88);
}

.hero-plate img,
.hero-plate video {
  width: 100%;
  border-radius: calc(var(--r-card) - 16px);
  aspect-ratio: 1040 / 585;
  object-fit: cover;
  display: block;
}

/* Hero copy */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

.hero-copy h1 {
  font: 700 64px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink-mauve);
  margin: 0;
  max-width: 1050px;
}

.hero-copy p {
  font: 400 18px/1.625 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 672px;
}

.hero-ctas {
  display: flex;
  gap: 24px;
  padding-top: 8px;
}

/* Standalone CTA pair at page bottom */
.cta-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

/* ================================================================
   NEO BUTTON (neumorphic pill)
   ================================================================ */
.neo-btn {
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.002);
  padding: 16px 32px;
  font: 700 16px/1.5 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mauve);
  box-shadow: var(--elev-md);
  transition:
    box-shadow var(--dur) var(--ease),
    transform   var(--dur) var(--ease),
    color       var(--dur) var(--ease);
  white-space: nowrap;
}

.neo-btn:hover {
  box-shadow: var(--elev-hover);
  transform: translateY(-3px);
  color: var(--brand-deep);
}

.neo-btn:active {
  box-shadow: var(--inset-md);
  transform: scale(0.97) translateY(0);
  color: var(--brand-deep);
}

.neo-btn--solid {
  background: var(--surface);
  padding: 20px 56px;
  letter-spacing: 0.25em;
}

.neo-btn--muted { color: var(--ink-soft); }

/* ================================================================
   SECTION TITLE (h2 + accent rule)
   ================================================================ */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.section-title h2 {
  font: 700 48px/1.17 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.section-title-rule {
  display: block;
  width: 96px;
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--ink-mauve));
}

/* ================================================================
   ICON WELL (circular inset disc)
   ================================================================ */
.icon-well {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  box-shadow: var(--inset-md);
  flex-shrink: 0;
  color: var(--ink-mauve);
}

.icon-well svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.75;
}

/* ================================================================
   FEATURES
   ================================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1072px;
}

.feature-card {
  border-radius: var(--r-card);
  background: var(--surface-rose);
  box-shadow: var(--elev-md);
  padding: 40px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  /* leave = 2s ease-in-out */
  transition: transform 2s ease-in-out;
}

.feature-card:hover {
  transform: translateY(-6px);
  transition: transform 385ms ease-in-out;
}

.feature-card h3 {
  font: 700 32px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 6px 0 0;
}

.feature-card p {
  font: 400 16px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 252px;
}

/* ================================================================
   COLLECTIONS
   ================================================================ */
.collections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 1072px;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 100%;
}

.collection-card {
  border-radius: var(--r-card);
  background: var(--frame);
  box-shadow: var(--elev-md);
  padding: 16px;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  /* leave = 2s ease-in-out */
  transition: transform 2s ease-in-out;
}

.collection-card:hover {
  transform: translateY(-6px);
  transition: transform 385ms ease-in-out;
}

.collection-card-inner {
  position: relative;
  border-radius: calc(var(--r-card) - 16px);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* Glossy-surface ambient sheen.
   A large soft gradient tile (300%×300%) shifts position via JS custom
   properties so the bright zone migrates to the forward-tilting edge —
   exactly as ambient light reflects off lacquered/glossy material.
   soft-light blend lets the underlying photo show through naturally. */
.collection-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 90% 80% at center,
    rgba(255, 255, 255, 0.90)  0%,
    rgba(255, 255, 255, 0.45) 30%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent               70%
  );
  background-size: 300% 300%;
  background-position: var(--shine-px, 50%) var(--shine-py, 50%);
  opacity: var(--shine-o, 0);
  mix-blend-mode: soft-light;
  pointer-events: none;
  will-change: background-position, opacity;
}

.collection-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Frosted caption bar */
.collection-caption {
  position: absolute;
  inset: auto -30px 0 -30px; /* 30px buffer each side absorbs parallax translate */
  padding: 18px 52px;        /* 22px + 30px to compensate */
  background: rgba(249, 244, 240, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.collection-caption-title {
  font: 600 17px/1.4 var(--font-sans);
  color: var(--ink);
}

.collection-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: rgba(249, 244, 240, 0.7);
  transition: box-shadow var(--dur) var(--ease);
  color: var(--ink-mauve);
}

.collection-card:hover .collection-arrow {
  box-shadow: var(--elev-sm);
}

.collection-arrow svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ================================================================
   OUR PREMIUM DISTINCTION (accordion)
   ================================================================ */
.distinction {
  width: 100%;
  max-width: 900px;
  border-radius: var(--r-panel);
  background: var(--surface-distinct);
  box-shadow: var(--inset-lg);
  padding: 48px 56px 52px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Raised variant — matches feature card aesthetic */
.distinction--raised {
  background: var(--surface-rose);
  box-shadow: var(--elev-md);
}

.distinction--raised .accordion-row {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.distinction--raised .accordion-row.open {
  box-shadow: none;
}

/* Chevron on rose surface — soft calibrated shadow, no white bubble */
.distinction--raised .accordion-chevron {
  box-shadow:
    -3px -3px 7px rgba(255, 255, 255, 0.38),
     3px  3px 7px rgba(112,  96, 110, 0.18);
}

.distinction--raised .accordion-row.open .accordion-chevron {
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.32),
    inset  2px  2px 6px rgba(112,  96, 110, 0.16);
}

.distinction--raised .distinction-list {
  gap: 18px;
}

.distinction-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accordion-row {
  border-radius: 16px;
  background: #f8f4f1;
  box-shadow: var(--elev-sm);
  overflow: hidden;
  transition: box-shadow 700ms ease-in-out;
}

.accordion-row.open { box-shadow: var(--elev-hover); }

.accordion-trigger {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  height: 33px;
  display: flex;
  flex-direction: row;
  align-items: center;    /* strict vertical center */
  justify-content: space-between;
  gap: 22px;
  padding: 0 28px;
  text-align: left;
  /* NO overflow:hidden here — chevron shadow must not be clipped */
}

.accordion-number {
  font: 700 16px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--brand);
  flex-shrink: 0;
  width: 28px;
  transition: color 700ms ease-in-out;
}

.accordion-row.open .accordion-number { color: var(--brand-deep); }

.accordion-title {
  flex: 1;
  font: 600 16px/1 var(--font-sans);  /* line-height:1 removes extra leading */
  color: var(--ink);
  transition: color 700ms ease-in-out;
}

.accordion-row.open .accordion-title { color: var(--brand-deep); }

.accordion-chevron {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  box-shadow: var(--elev-sm);
  transition:
    transform  700ms ease-in-out,
    box-shadow 700ms ease-in-out,
    color      700ms ease-in-out;
  color: var(--ink-mauve);
}

.accordion-row.open .accordion-chevron {
  box-shadow: var(--inset-sm);
  transform: rotate(180deg);
  color: var(--brand-deep);
}

.accordion-chevron svg { width: 14px; height: 14px; stroke-width: 2; }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 700ms ease-in-out,
    opacity    700ms ease-in-out;
}

.accordion-row.open .accordion-body {
  max-height: 300px;
  opacity: 1;
}

.accordion-body-inner {
  padding: 0 28px 24px 28px;
}

.accordion-accent-rule {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 9999px;
  background: var(--brand-soft);
  margin-bottom: 16px;
}

.accordion-body-text {
  font: 400 16px/1.625 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 760px;
}

.distinction-closing {
  text-align: center;
  font: 600 18px/1.6 var(--font-sans);
  color: var(--ink-mauve);
  letter-spacing: 0.01em;
  margin: 0;
  padding-top: 8px;
  opacity: 0.85;
}

/* ================================================================
   INQUIRY FORM
   ================================================================ */
.inquiry {
  width: 100%;
  max-width: 717px;
  border-radius: var(--r-panel);
  background: var(--surface-form);
  box-shadow: var(--inset-lg);
  padding: 70px 70px 74px;
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.inquiry-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.inquiry-header h2 {
  font: 700 43px/1.4 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

.inquiry-header p {
  font: 400 16px/1.5 var(--font-sans);
  color: var(--ink-soft);
  opacity: 0.8;
  margin: 0;
}

.form-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-field label {
  font: 700 16px/1.5 var(--font-sans);
  color: var(--ink-soft);
  padding-left: 16px;
}

.form-input,
.form-textarea {
  border: none;
  outline: none;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-md);
  padding: 17px 24px;
  font: 400 16px/1.5 var(--font-sans);
  color: var(--ink);
  transition: box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink-muted);
}

.form-input:focus,
.form-textarea:focus {
  box-shadow: var(--glow-accent);
}

.form-textarea {
  border-radius: var(--r-card);
  resize: none;
  line-height: 1.5;
}

/* Date field with icon */
.form-date-wrap {
  position: relative;
}

.form-date-wrap .form-input {
  padding-right: 52px;
}

.form-date-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
  display: flex;
}

.form-date-icon svg { width: 20px; height: 20px; stroke-width: 1.75; }

.form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 26px;
}

.form-consent {
  font: 400 11.5px/1.65 var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
  margin: 0;
  letter-spacing: 0.02em;
  max-width: 360px;
}
.form-consent-link {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-soft);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.form-consent-link:hover {
  color: var(--brand-deep);
  border-color: var(--brand);
}

/* ================================================================
   INQUIRY FORM — narrow wrapper (Contacts page + Home page)
   ================================================================ */
.cc-inquiry-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc-inquiry-wrap .inquiry {
  width: 100%;
  padding: 44px 44px 48px;
  gap: 26px;
  box-shadow: var(--elev-md);
}
.cc-inquiry-wrap .neo-btn {
  padding: 13px 26px;
  font-size: 13px;
  letter-spacing: 0.09em;
}
.cc-inquiry-wrap .inquiry-header {
  gap: 10px;
}
.cc-inquiry-wrap .inquiry-header h2 {
  font-size: 34px;
  line-height: 1.25;
}
.cc-inquiry-wrap .inquiry-header p {
  font-size: 14px;
  line-height: 1.45;
}
.cc-inquiry-wrap .form-body {
  gap: 16px;
}
.cc-inquiry-wrap .form-row {
  gap: 18px;
}
.cc-inquiry-wrap .form-field {
  gap: 8px;
}
.cc-inquiry-wrap .form-field label {
  font-size: 14px;
}
.cc-inquiry-wrap .form-input,
.cc-inquiry-wrap .form-textarea {
  padding: 13px 20px;
  font-size: 14px;
  box-shadow: 0 0 0 0 transparent,
              inset -8px -8px 16px rgba(255,255,255,0.72),
              inset  8px  8px 16px rgba(112,96,110,0.30) !important;
  transition-property: box-shadow !important;
  transition-duration: 700ms !important;
  transition-timing-function: ease-in-out !important;
}
.cc-inquiry-wrap .form-input:focus,
.cc-inquiry-wrap .form-textarea:focus {
  box-shadow: 0 0 0 0 transparent,
              inset -3px -3px 5px rgba(255,255,255,1.0),
              inset  3px  3px 5px rgba(112,96,110,0.60) !important;
}
.cc-inquiry-wrap .form-submit {
  padding-top: 16px;
  gap: 8px;
}
.cc-inquiry-wrap .form-consent {
  white-space: nowrap;
  font-size: 12px;
  max-width: none;
}

/* ================================================================
   SOCIAL STRIP
   ================================================================ */
.social-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
}

.social-links {
  display: flex;
  gap: 32px;
}

.social-link {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--elev-md);
  display: grid;
  place-items: center;
  color: var(--ink);
  /* leave = 2s ease-in-out */
  transition:
    box-shadow 2s ease-in-out,
    transform  2s ease-in-out,
    color      2s ease-in-out;
}

.social-link:hover {
  box-shadow: var(--elev-hover);
  transform: translateY(-3px);
  color: var(--brand);
  /* enter = fast */
  transition:
    box-shadow var(--dur) var(--ease),
    transform  var(--dur) var(--ease),
    color      var(--dur) var(--ease);
}

.social-link svg { width: 23px; height: 23px; stroke-width: 1.75; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  width: 100%;
  background: var(--footer-bg);
  padding: 64px 104px;
  margin-top: 24px;
}

.footer-inner {
  max-width: 1072px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-wordmark {
  font: 400 28px/1.5 var(--font-display);
  letter-spacing: 0.05em;
  color: var(--on-dark);
}

.footer-copy {
  font: 400 16px/1.5 var(--font-sans);
  color: var(--on-dark);
  opacity: 0.7;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer-link {
  font: 400 16px/1.5 var(--font-sans);
  color: var(--on-dark);
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease);
}

.footer-link:hover { opacity: 1; }

.footer-instagram {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark);
  opacity: 0.85;
  font: 400 16px/1.5 var(--font-sans);
  transition: opacity var(--dur) var(--ease);
}

.footer-instagram:hover { opacity: 1; }
.footer-instagram svg { width: 16px; height: 16px; stroke-width: 1.75; }

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.footer-social-label {
  font: 400 11px/1.5 var(--font-sans);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0.55;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  opacity: 0.75;
  transition: opacity 2s ease-in-out, transform 2s ease-in-out, color 2s ease-in-out;
}

.footer-social-icon:hover {
  opacity: 1;
  transform: scale(1.2);
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, color 200ms ease-in-out;
}
.footer-social-icon[aria-label="Instagram"]:hover { color: #e1306c; }
.footer-social-icon[aria-label="Facebook"]:hover  { color: #1877f2; }
.footer-social-icon[aria-label="YouTube"]:hover   { color: #ff0000; }
.footer-social-icon[aria-label="TikTok"]:hover    { color: #69c9d0; }
.footer-social-icon svg { width: 33px; height: 33px; stroke-width: 1.5; }

/* ── Footer SEO columns (Our Collections, Event Rentals) ──── */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 150px;
}

.footer-col-title {
  font: 700 11px/1.5 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0.92;
  display: block;
}

.footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col-link {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--on-dark);
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease);
}

.footer-col-link:hover { opacity: 1; }

.footer-more {
  opacity: 0.48;
  font-style: italic;
}

/* ── Floating contact widget — manager pill ─────────────── */
.contact-widget {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 300;
  pointer-events: none;
}

.contact-widget-btn {
  position: relative;
  height: 56px;
  border-radius: 28px;
  padding: 0 22px 0 8px;
  border: none;
  background: linear-gradient(135deg, #cca8e4 0%, var(--brand) 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 22px rgba(168, 120, 208, 0.42), 0 1px 4px rgba(0, 0, 0, 0.07);
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  animation: widget-float 3s ease-in-out infinite;
  pointer-events: auto;
  white-space: nowrap;
}

.contact-widget-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(168, 120, 208, 0.62), 0 2px 8px rgba(0, 0, 0, 0.10);
  animation-play-state: paused;
}

.contact-widget-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-widget-initial {
  font: 600 22px/1 var(--font-display);
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.02em;
  user-select: none;
}

.contact-widget-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4caf50;
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.contact-widget-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.contact-widget-title {
  font: 600 13px/1.2 var(--font-sans);
  color: rgba(255, 255, 255, 0.96);
}

.contact-widget-online {
  font: 400 11px/1 var(--font-sans);
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

@keyframes widget-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

.footer-locations {
  flex-basis: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(249, 244, 240, 0.14);
}

.footer-locations-title {
  display: block;
  font: 600 11px/1.5 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0.55;
  margin-bottom: 10px;
}

.footer-locations-list {
  font: 400 14px/1.8 var(--font-sans);
  color: var(--on-dark);
  opacity: 0.65;
  margin: 0;
}

/* ================================================================
   ABOUT US — two-panel card (identity top + story bottom)
   ================================================================ */
.about-page-header {
  width: 100%;
  max-width: 1072px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 0 0;
  text-align: center;
}

.about-page-header h1 {
  font: 700 56px/1.2 var(--font-sans);
  color: var(--ink-mauve);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Outer card shell */
.about-card {
  width: 100%;
  max-width: 1072px;
  border-radius: var(--r-card);
  box-shadow: var(--elev-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ① Identity panel — dark mauve background (same as footer/noir variant) */
.about-identity {
  background: var(--footer-bg);
  padding: 52px 60px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: center;
}

/* ── Avatar spring-bounce animation ─────────────────────────── */
@keyframes avatar-spring {
  0%   { transform: scale(1.000); }
  20%  { transform: scale(1.151); }
  38%  { transform: scale(1.073); }
  53%  { transform: scale(1.123); }
  66%  { transform: scale(1.095); }
  77%  { transform: scale(1.118); }
  87%  { transform: scale(1.106); }
  94%  { transform: scale(1.115); }
  100% { transform: scale(1.112); }
}

/* Circular avatar — inverted neumorphic on dark bg, single-ring */
.about-avatar-wrap {
  width: 200px;
  height: 200px;
  border-radius: 9999px;
  background: var(--surface);
  box-shadow:
    -10px -10px 28px rgba(255,255,255,0.09),
     10px  10px 28px rgba(0,0,0,0.50);
  padding: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Sheen stripe — swept across after spring settles */
.about-avatar-wrap::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 45%;
  height: 140%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.52) 50%,
    transparent 100%
  );
  transform: skewX(-14deg) translateX(-250%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes sheen-run {
  0%   { transform: skewX(-14deg) translateX(-250%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: skewX(-14deg) translateX(700%);  opacity: 0; }
}

.about-avatar-wrap.sheen-active::after {
  animation: sheen-run 1560ms ease-out forwards;
}

.about-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.about-identity-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Text on dark identity panel */
.about-identity .section-label { color: var(--brand-soft); }

.about-name {
  font: 700 52px/1.1 var(--font-sans);
  color: var(--on-dark);
  letter-spacing: -0.025em;
  margin: 0;
}

.about-title {
  font: 400 13px/1.5 var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(249,244,240,0.52);
}

.about-divider {
  width: 64px;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-soft), var(--brand));
}

/* ② Story panel — cream background, full reading text */
.about-story {
  background: var(--surface);
  padding: 52px 60px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* no max-width — fills the full card width like the identity panel */
}

.about-bio {
  font: 400 16px/1.8 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.about-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}
.about-link:hover { color: var(--brand-deep); }

/* Bullet list */
.about-list {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-list li {
  font: 400 16px/1.65 var(--font-sans);
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}

.about-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--brand-soft);
}

/* Closing goal sentence */
.about-bio--goal {
  font-style: italic;
  color: var(--ink-mauve);
  border-left: 3px solid var(--brand-soft);
  padding-left: 18px;
  margin-top: 4px;
}

/* Responsive — base variant */
@media (max-width: 768px) {
  .about-identity {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 40px 32px;
    gap: 28px;
  }
  .about-identity-text { align-items: center; }
  .about-name { font-size: 40px; }
  .about-story { padding: 40px 32px; }
}

@media (max-width: 480px) {
  .about-avatar-wrap { width: 160px; height: 160px; }
  .about-name { font-size: 32px; }
  .about-bio { font-size: 15px; }
  .about-story { padding: 32px 20px; }
}




/* ================================================================
   OUR ADVANTAGES
   ================================================================ */
.advantages {
  width: 100%;
  max-width: 1072px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.advantages-intro {
  font: 400 18px/1.7 var(--font-sans);
  color: var(--ink-soft);
  text-align: center;
  max-width: 780px;
  margin: 0;
}

.adv-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

/* Card: editorial two-column split */
.adv-card {
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--elev-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
/* White border highlight — same taper technique as FAQ panels */
.adv-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  border: 1.5px solid rgba(255,255,255,0.82);
  pointer-events: none;
  z-index: 1;
}
/* Odd cards (image-left, text-right): visible over text half only, fades at the image boundary */
.adv-card:nth-of-type(odd)::after {
  -webkit-mask-image:
    linear-gradient(to bottom, black 0px, black 19px, transparent 30px),
    linear-gradient(to left,   black 0%,  black 45%,  transparent 50%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, black 0px, black 19px, transparent 30px),
    linear-gradient(to left,   black 0%,  black 45%,  transparent 50%);
  mask-composite: intersect;
}
/* Even cards (text-left, image-right): visible over text half only, fades at the image boundary */
.adv-card:nth-of-type(even)::after {
  -webkit-mask-image:
    linear-gradient(to bottom, black 0px, black 19px, transparent 30px),
    linear-gradient(to right,  black 0%,  black 45%,  transparent 50%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, black 0px, black 19px, transparent 30px),
    linear-gradient(to right,  black 0%,  black 45%,  transparent 50%);
  mask-composite: intersect;
}

/* Thin separator between Advantages section and Inquiry form.
   Negative margins pull it closer to both neighbours (page-stack gap is 128px). */
.section-sep {
  width: 100%;
  max-width: 880px;
  height: 1px;
  margin: -55px auto -5px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(168,120,208,0.12) 10%,
    rgba(168,120,208,0.38) 30%,
    var(--brand-soft)      50%,
    rgba(168,120,208,0.38) 70%,
    rgba(168,120,208,0.12) 90%,
    transparent
  );
  flex-shrink: 0;
}

/* Divider between cards */
.adv-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent      0%,
    rgba(168,120,208,.10)  8%,
    rgba(168,120,208,.45) 30%,
    var(--brand)          50%,
    rgba(168,120,208,.45) 70%,
    rgba(168,120,208,.10) 92%,
    transparent     100%
  );
  flex-shrink: 0;
}

/* Photo container — fills 50% of card (set by grid row = text column height).
   position:relative + img position:absolute removes the image's intrinsic
   aspect-ratio from the grid height calculation, so a square photo (2-adv.jpg)
   can't inflate the card beyond the text column's natural height. */
.adv-img-wrap {
  overflow: hidden;
  position: relative;
  min-height: 272px;  /* visual floor when text is very short */
}

.adv-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Leave (mouse-out): slow 2s ease-in-out */
  transition: transform 2s ease-in-out;
}

.adv-card:hover .adv-img-wrap img {
  transform: scale(1.04);
  /* Enter (mouse-over): fast ease-in-out */
  transition: transform 700ms ease-in-out;
}

/* Odd cards: image left, text right */
/* Even cards: text left, image right */
/* Use nth-of-type so the .adv-divider element doesn't shift the count */
.adv-card:nth-of-type(even) .adv-img-wrap { order: 2; }
.adv-card:nth-of-type(even) .adv-content  { order: 1; }

.adv-content {
  padding: 44px 48px;   /* 52×0.85=44, 56×0.85=48 → −15% */
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.adv-number {
  font: 700 12px/1.5 var(--font-sans);
  letter-spacing: 0.32em;
  color: var(--brand);
  text-transform: uppercase;
}

.adv-title {
  font: 700 28px/1.25 var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.adv-short {
  font: 400 16px/1.65 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

/* Long description — always shows 1 line (text continues on expand) */
.adv-long {
  overflow: hidden;
  /* Show exactly 1 line: 16px × 1.65 ≈ 26px + small buffer */
  max-height: 28px;
  position: relative;
  transition: max-height 700ms ease-in-out;
}

/* Fade-out "..." hint at end of truncated line */
.adv-long:not(.open)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  height: 28px;
  background: linear-gradient(to right, transparent, var(--surface) 60%);
  pointer-events: none;
}

/* .adv-long.open max-height is set via JS (scrollHeight)
   for instant close response. Class used only for ::after visibility. */

.adv-long p {
  font: 400 16px/1.65 var(--font-sans); /* matches adv-short */
  color: var(--ink-soft);
  margin: 0;
  white-space: normal;
}

/* Read More / Read Less toggle */
.adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  padding: 0;
  font: 600 13px/1.5 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  cursor: pointer;
  margin-top: 4px;
  transition: color var(--dur) var(--ease);
}

.adv-toggle:hover { color: var(--brand-deep); }

.adv-toggle-chevron {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  transition: transform 400ms ease-in-out;
  flex-shrink: 0;
}

.adv-toggle.open .adv-toggle-chevron {
  transform: rotate(180deg);
}

.advantages-closing {
  text-align: center;
  font: 600 18px/1.6 var(--font-sans);
  color: var(--ink-mauve);
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 760px;
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 900px) {
  .adv-card { grid-template-columns: 1fr; }
  .adv-card:nth-child(even) .adv-img-wrap { order: 1; }
  .adv-card:nth-child(even) .adv-content  { order: 2; }
  .adv-img-wrap { aspect-ratio: 16 / 9; min-height: 240px; }
  .adv-content  { padding: 36px 32px; }
  .adv-title    { font-size: 24px; }
}

@media (max-width: 480px) {
  .adv-content  { padding: 28px 20px; }
  .adv-title    { font-size: 20px; }
  .adv-short    { font-size: 15px; }
}

/* ================================================================
   HERO ROTATING PHRASES
   ================================================================ */
.hero-phrases {
  position: relative;
  width: 100%;
  max-width: 1050px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-phrase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 700 64px/1.25 var(--font-sans);
  color: var(--ink-mauve);
  letter-spacing: -0.01em;
  padding: 0 24px;
  /* max-width set per-phrase by JS (naturalWidth / 2) for exact 2-line wrap */
  margin: 0 auto;

  /* base (hidden) state: comes from behind (scale back) */
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

/* Enter: zooms forward from behind → natural resting size */
.hero-phrase.ph-enter {
  transition:
    opacity   1900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter    1900ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Exit: zooms further forward past viewer → dissolves */
.hero-phrase.ph-exit {
  transition:
    opacity   1400ms cubic-bezier(0.55, 0, 1, 0.45),
    transform 1400ms cubic-bezier(0.55, 0, 1, 0.45),
    filter    1400ms cubic-bezier(0.55, 0, 1, 0.45);
  opacity: 0;
  transform: scale(1.10);
  filter: blur(8px);
}

@media (max-width: 1024px) {
  .hero-phrases { height: 130px; }
  .hero-phrase  { font-size: 48px; }
}
@media (max-width: 768px) {
  .hero-phrases { height: 110px; }
  .hero-phrase  { font-size: 36px; }
}
@media (max-width: 480px) {
  .hero-phrases { height: 90px; }
  .hero-phrase  { font-size: 26px; }
}

/* ================================================================
   MOBILE TOP BAR + OVERLAY NAV (hidden on desktop)
   ================================================================ */
.mobile-top {
  display: none;
  position: sticky;
  top: 0;
  z-index: 300;
  width: 100%;
  height: 64px;
  background: var(--bg);
  box-shadow: var(--elev-sm);
  padding: 0 24px;
  justify-content: space-between;
  align-items: center;
}

.mobile-wordmark {
  font: 400 26px/1 var(--font-display);
  letter-spacing: 0.05em;
  color: var(--brand);
}

.mobile-burger {
  border: none;
  background: transparent;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  box-shadow: var(--elev-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease);
  flex-shrink: 0;
}
.mobile-burger:active { box-shadow: var(--inset-sm); }

.burger-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink-mauve);
  border-radius: 9999px;
  transition:
    transform 300ms var(--ease),
    opacity   300ms var(--ease),
    width     300ms var(--ease);
}
.mobile-burger.open .burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-burger.open .burger-bar:nth-child(2) { opacity: 0; width: 0; }
.mobile-burger.open .burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen nav overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 299;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition:
    opacity   350ms var(--ease),
    transform 350ms var(--ease);
}
.mobile-nav-overlay.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav-link {
  font: 600 26px/1.4 var(--font-sans);
  color: var(--ink-soft);
  padding: 14px 56px;
  border-radius: var(--r-pill);
  text-align: center;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.mobile-nav-link:hover,
.mobile-nav-link:active { color: var(--brand); }

/* ================================================================
   RESPONSIVE — large tablet (1025–1280)
   ================================================================ */
@media (max-width: 1024px) {
  .page-stack { padding: 0 40px 64px; gap: 96px; }
  .site-nav  { padding: 20px 40px; }
  .nav-pill  { gap: 28px; padding: 0 32px; }
  .hero-copy h1  { font-size: 48px; }
  .distinction   { padding: 48px 40px 52px; }
  .inquiry       { padding: 64px 56px; }
  .site-footer   { padding: 48px 40px; }
}

/* ================================================================
   RESPONSIVE — tablet (769–1024)
   ================================================================ */
@media (max-width: 900px) {
  .nav-pill  { gap: 20px; padding: 0 24px; }
  .nav-link  { font-size: 14px; }
  .hero-copy h1 { font-size: 42px; }
  .collections-grid { gap: 24px; }
  .features { gap: 24px; }
}

/* ================================================================
   RESPONSIVE — mobile (max 768px)
   ================================================================ */
@media (max-width: 768px) {
  /* Switch to mobile nav */
  .site-nav        { display: none; }
  .mobile-top      { display: flex; }
  .mobile-nav-overlay { display: flex; }

  /* Shell */
  .page-stack { padding: 0 20px 48px; gap: 64px; }

  /* Hero */
  .hero { gap: 40px; padding: 28px 0 0; }
  .wordmark { font-size: 40px; }
  .wordmark-tagline { gap: 12px; }
  .tagline-rule { width: 28px; }
  .hero-copy h1 {
    font-size: 36px;
    line-height: 1.2;
  }
  .hero-copy p { font-size: 16px; max-width: 100%; }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
    gap: 16px;
  }
  .neo-btn { text-align: center; }
  .hero-plate { padding: 12px; border-radius: 24px; }
  .hero-plate img,
  .hero-plate video { border-radius: 16px; }

  /* Section titles */
  .section-title h2 { font-size: 38px; }

  /* Features — 1 column */
  .features {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
  }
  .feature-card { padding: 32px 24px 36px; }
  .feature-card h3 { font-size: 26px; }

  /* Collections — 1 column */
  .collections-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
  }

  /* Distinction */
  .distinction { padding: 40px 20px 44px; border-radius: 32px; }
  .accordion-trigger { height: 33px; padding: 0 16px; gap: 12px; }
  .distinction { padding: 32px 20px 36px; max-width: 100%; gap: 20px; }
  .accordion-title { font-size: 16px; line-height: 1.35; }
  .accordion-body-inner { padding: 0 20px 20px 20px; }
  .accordion-number { width: 22px; font-size: 14px; }
  .accordion-chevron { width: 32px; height: 32px; }
  .distinction-closing { font-size: 16px; }

  /* Inquiry form */
  .inquiry { padding: 44px 20px 48px; border-radius: 32px; max-width: 100%; }
  .inquiry-header h2 { font-size: 34px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .form-body { gap: 20px; }
  .form-submit { padding-top: 20px; }
  .neo-btn--solid { width: 100%; }

  /* Social */
  .social-strip { gap: 20px; }
  .social-links { gap: 20px; }

  /* Footer */
  .site-footer { padding: 40px 20px; }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-links { gap: 8px; }
  .footer-col { flex-basis: calc(50% - 20px); }
  .contact-widget { bottom: 24px; right: 24px; }
  .contact-widget-btn { height: 50px; padding: 0 18px 0 7px; gap: 10px; }
  .contact-widget-avatar { width: 36px; height: 36px; }
  .contact-widget-initial { font-size: 20px; }
}

/* ================================================================
   RESPONSIVE — small mobile (max 480px)
   ================================================================ */
@media (max-width: 480px) {
  .page-stack { padding: 0 16px 40px; gap: 52px; }

  .wordmark { font-size: 36px; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy p { font-size: 15px; }
  .hero-ctas { max-width: 100%; }

  .section-title h2 { font-size: 30px; }

  .feature-card h3 { font-size: 22px; }
  .feature-card p { font-size: 15px; }

  .distinction { padding: 28px 16px 32px; }
  .accordion-title { font-size: 15px; }
  .accordion-body-inner { padding: 0 16px 16px 16px; }
  .accordion-body-text { font-size: 15px; }

  .inquiry { padding: 32px 16px 36px; }
  .inquiry-header h2 { font-size: 26px; }
  .inquiry-header p { font-size: 14px; }
  .form-field label { font-size: 14px; }
  .form-input, .form-textarea { padding: 15px 20px; font-size: 15px; }

  .mobile-nav-link { font-size: 22px; padding: 12px 40px; }
  .site-footer { padding: 32px 16px; }
  .footer-wordmark { font-size: 22px; }
  .footer-links { gap: 8px; }
  .footer-col { flex-basis: 100%; }
  .contact-widget { bottom: 20px; right: 20px; }
  .contact-widget-btn { height: 46px; padding: 0 14px 0 6px; gap: 8px; border-radius: 23px; }
  .contact-widget-avatar { width: 32px; height: 32px; }
  .contact-widget-initial { font-size: 18px; }
  .contact-widget-text { display: none; }
}

/* ================================================================
   PRODUCT CARD PAGE
   ================================================================ */

.product-breadcrumb {
  width: 100%;
  max-width: 1072px;
  padding-top: 16px;
}

.product-breadcrumb a {
  font: 500 14px/1 var(--font-sans);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  transition: color var(--dur) var(--ease);
}

.product-breadcrumb a:hover { color: var(--brand); }

/* ── Two-column layout ────────────────────────────── */
.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
  width: 100%;
  max-width: 1072px;
}

.product-media {
  position: sticky;
  top: 90px;
}

/* ── Media type tabs ──────────────────────────────── */
.media-tabs {
  display: flex;
  gap: 3px;
  background: var(--surface);
  border-radius: 14px;
  padding: 4px;
  box-shadow: var(--nm-inset);
  margin-bottom: 14px;
}

.media-tab {
  flex: 1;
  padding: 9px 6px;
  border-radius: 11px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}

.media-tab:hover { color: var(--ink-soft); }

.media-tab.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--elev-sm);
}

/* ── Media panes ──────────────────────────────────── */
.media-pane { display: none; }
.media-pane.active { display: block; }

/* ── Photo carousel ───────────────────────────────── */
.carousel-wrap {
  border-radius: var(--r-card);
  background: var(--frame);
  box-shadow: var(--elev-md);
  padding: 10px;
  position: relative;
  user-select: none;
}

.carousel-main {
  border-radius: calc(var(--r-card) - 10px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  background: var(--surface-rose);
}

.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.carousel-img.active {
  opacity: 1;
  pointer-events: auto;
}

/* Nav arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(249, 244, 240, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(45, 38, 38, 0.18);
}

.carousel-arrow svg { width: 18px; height: 18px; stroke-width: 2; }
.carousel-arrow.prev { left: 18px; }
.carousel-arrow.next { right: 18px; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.carousel-wrap:hover .carousel-arrow { opacity: 1; }

/* ── Standalone lighting bar (shared V1 + V2) ───── */
.lighting-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.lighting-bar-label {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.lighting-bar-btns {
  display: flex;
  gap: 3px;
  background: var(--surface);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--nm-inset);
}

/* Icon-only buttons inside the lighting bar */
.lighting-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 180ms ease;
}
.lighting-btn svg { width: 15px; height: 15px; stroke-width: 1.75; flex-shrink: 0; }
.lighting-btn:hover { color: var(--ink-soft); background: rgba(255,255,255,0.55); }
.lighting-btn.active {
  background: var(--surface-distinct);
  color: var(--ink-mauve);
  box-shadow: 0 1px 5px rgba(107,90,91,0.18);
}

/* Thumbnail strip */
.carousel-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.carousel-thumbs::-webkit-scrollbar { display: none; }

.carousel-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.50;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: opacity 180ms ease, border-color 180ms ease;
}

.carousel-thumb.active {
  opacity: 1;
  border-color: var(--brand);
}

.carousel-thumb:hover { opacity: 0.80; }

/* Video panes */
.product-video-wrap {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #2D2626;
  box-shadow: var(--elev-md);
  aspect-ratio: 4 / 5;
  position: relative;
}

.product-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.video-caption {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
  margin: 10px 0 0;
}

/* ── Info column ──────────────────────────────────── */
.product-info {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-eyebrow {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
  margin-bottom: 12px;
}

.product-name {
  font: 600 40px/1.1 var(--font-display);
  color: var(--ink-mauve);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.product-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.product-tag {
  padding: 5px 13px;
  border-radius: 20px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--surface);
  box-shadow: var(--nm-inset);
}

.product-desc {
  font: 400 15px/1.75 var(--font-sans);
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.product-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-soft) 30%, var(--brand-soft) 70%, transparent);
  margin: 0 0 20px;
  border: none;
}

/* ── Detail panels (Palette + Flowers) ───────────── */
.detail-panels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.detail-panel {
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--nm-inset);
  overflow: hidden;
}

.detail-panel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink-soft);
  text-align: left;
  transition: color 180ms ease;
}

.detail-panel-trigger:hover { color: var(--ink); }

.detail-panel-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}

.detail-panel-icon svg { width: 14px; height: 14px; stroke-width: 1.75; }

.detail-panel-label { flex: 1; }

.detail-panel-chevron {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--ink-muted);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.detail-panel-trigger.open .detail-panel-chevron { transform: rotate(180deg); }

.detail-panel-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-panel-inner {
  padding: 4px 18px 18px;
}

/* Colour swatches */
.swatch-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.swatch-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 3px 3px 8px rgba(45,38,38,0.18), -2px -2px 5px rgba(255,255,255,0.60);
}

.swatch-name {
  font: 400 11px/1.2 var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
  max-width: 52px;
}

/* Flower chips */
.flower-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.flower-chip {
  padding: 6px 13px;
  border-radius: 20px;
  font: 400 13px/1 var(--font-sans);
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--frame);
  letter-spacing: 0.01em;
}

/* ── Size selector ────────────────────────────────── */
.size-selector {
  margin-bottom: 24px;
}

.size-label {
  display: block;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.size-options {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  background: var(--surface);
  border-radius: 19px;
  padding: 6px;
  box-shadow: var(--nm-inset);
}

.size-btn {
  flex: 1;
  padding: 13px 6px;
  border-radius: 13px;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink-muted);
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  box-shadow: none;
  transition: all 200ms ease;
  letter-spacing: 0.01em;
}

.size-btn:hover { color: var(--ink-soft); background: rgba(249,244,240,0.65); }

.size-btn.active {
  color: var(--ink-mauve);
  background: #f8f4f1;
  border-color: var(--brand);
  box-shadow: var(--elev-sm);
}

.size-desc {
  font: 400 14px/1.65 var(--font-sans);
  color: var(--ink-muted);
  margin: 0;
  min-height: 46px;
  transition: opacity 160ms ease;
}

/* ── CTA ──────────────────────────────────────────── */
.product-cta {
  width: 100%;
  padding: 18px 24px;
  font-size: 15px;
  letter-spacing: 0.08em;
  margin-top: 4px;
  background: var(--brand);
  color: rgba(255,255,255,0.97);
  box-shadow: 0 4px 22px rgba(168,120,208,0.38);
}
.product-cta:hover {
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 6px 28px rgba(142,95,182,0.48);
  transform: translateY(-2px);
}
.product-cta:active {
  background: var(--brand);
  transform: scale(0.97) translateY(0);
}

/* ── Spec cards (Engineering Details) ────────────── */
.product-specs {
  width: 100%;
  max-width: 1072px;
}

.specs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.spec-card {
  display: flex;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--elev-sm);
  transition: box-shadow 240ms ease, transform 240ms ease;
}

.spec-card:hover {
  box-shadow: var(--elev-md);
  transform: translateY(-2px);
}

.spec-card-img-wrap {
  width: 200px;
  flex-shrink: 0;
}

.spec-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spec-card-body {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.spec-card-num {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-soft);
}

.spec-card-title {
  font: 600 17px/1.3 var(--font-sans);
  color: var(--ink);
  margin: 0;
}

.spec-card-desc {
  font: 400 14px/1.65 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

/* ================================================================
   PRODUCT PAGE RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .product-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .product-media { position: static; }
  .product-name { font-size: 34px; }
  .spec-card-img-wrap { width: 160px; }
}

@media (max-width: 600px) {
  .media-tab { font-size: 11px; padding: 8px 4px; }
  .product-name { font-size: 30px; }
  .spec-card { flex-direction: column; }
  .spec-card-img-wrap { width: 100%; height: 180px; }
  .size-btn { font-size: 12px; padding: 11px 4px; }
}

/* ================================================================
   PRODUCT PAGE — LAYOUT VARIANT 2
   ================================================================ */

/* Variant divider label */
.pv2-variant-divider {
  width: 100%;
  max-width: 1072px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
}
.pv2-variant-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-soft));
}
.pv2-variant-rule:last-child {
  background: linear-gradient(270deg, transparent, var(--brand-soft));
}
.pv2-variant-label {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-soft);
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--nm-inset);
}

/* Main wrapper */
.pv2-wrap {
  width: 100%;
  max-width: 1072px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header row ────────────────────────────────────── */
.pv2-header { }
.pv2-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pv2-header-left { display: flex; flex-direction: column; gap: 0; }
.pv2-name {
  font: 600 40px/1.1 var(--font-display);
  color: var(--ink-mauve);
  letter-spacing: -0.01em;
  margin: 8px 0 0;
}

/* Photos / Video top tabs */
.pv2-topbar-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-radius: 16px;
  padding: 5px;
  box-shadow: var(--nm-inset);
  align-self: flex-end;
  margin-bottom: 2px;
}
.pv2-topbar-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 11px;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: none;
  transition: all 200ms ease;
  white-space: nowrap;
}
.pv2-topbar-tab svg { width: 14px; height: 14px; stroke-width: 1.75; flex-shrink: 0; }
.pv2-topbar-tab:hover { color: var(--ink-soft); background: rgba(249,244,240,0.65); }
.pv2-topbar-tab.active {
  background: #f8f4f1;
  color: var(--ink-mauve);
  border-color: var(--brand);
  box-shadow: var(--elev-sm);
}

/* ── Wide landscape media zone (15:10) ────────────── */
.pv2-media-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 15 / 10;
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--elev-md);
  user-select: none;
}

/* Photo / video panes */
.pv2-pane {
  display: none;
  position: absolute;
  inset: 0;
}
.pv2-pane.active { display: block; }

.pv2-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.pv2-img.active { opacity: 1; }

.pv2-pane video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Video caption inside media zone — bottom overlay */
.pv2-vid-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 24px 20px;
  background: linear-gradient(transparent, rgba(45,38,38,0.52));
  font: 400 13px/1.5 var(--font-sans);
  color: rgba(255,255,255,0.85);
  pointer-events: none;
}

/* ── Left-side control pill ───────────────────────── */
.pv2-left-controls {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 7px;
  background: rgba(252, 248, 244, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(45, 38, 38, 0.16), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Tab icon button */
.pv2-tab {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: all 180ms ease;
  position: relative;
  flex-shrink: 0;
}
.pv2-tab:hover { color: var(--ink-soft); background: rgba(255,255,255,0.55); }
.pv2-tab.active {
  background: var(--bg);
  color: var(--brand);
  box-shadow: 0 2px 7px rgba(45,38,38,0.14);
}
.pv2-tab svg { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; }

/* Hover tooltip on controls */
.pv2-tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(45, 38, 38, 0.86);
  color: #fff;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.pv2-tab:hover .pv2-tip,
.pv2-light-btn:hover .pv2-tip,
.pv2-palette-btn:hover .pv2-tip { opacity: 1; }

/* Control group separator */
.pv2-ctrl-sep {
  width: 18px;
  height: 1px;
  background: rgba(45,38,38,0.10);
  margin: 3px 0;
  flex-shrink: 0;
}

/* Lighting icon buttons */
.pv2-light-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: all 180ms ease;
  position: relative;
  flex-shrink: 0;
}
.pv2-light-btn:hover { color: var(--ink-soft); background: rgba(255,255,255,0.55); }
.pv2-light-btn.active {
  background: var(--surface-distinct);
  color: var(--ink-mauve);
  box-shadow: 0 2px 7px rgba(107,90,91,0.18);
}
.pv2-light-btn svg { width: 15px; height: 15px; stroke-width: 1.75; flex-shrink: 0; }

/* Palette trigger button */
.pv2-palette-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: all 180ms ease;
  position: relative;
  flex-shrink: 0;
}
.pv2-palette-btn:hover { color: var(--brand); background: rgba(255,255,255,0.55); }
.pv2-palette-btn.active {
  background: rgba(175, 136, 148, 0.18);
  color: var(--brand);
  box-shadow: 0 2px 7px rgba(45,38,38,0.10);
}
.pv2-palette-btn svg { width: 17px; height: 17px; stroke-width: 1.75; flex-shrink: 0; }

/* ── Floating palette panel — bottom-right corner, no background ── */
.pv2-palette-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 8;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pv2-palette-panel.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}


/* Horizontal row of swatches */
.pv2-palette-grid {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-end;
}

/* Each swatch: dot top, name below */
.pv2-swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.pv2-palette-panel.open .pv2-swatch-item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pv2-palette-panel.open .pv2-swatch-item:nth-child(1) { transition-delay: 150ms; }
.pv2-palette-panel.open .pv2-swatch-item:nth-child(2) { transition-delay: 120ms; }
.pv2-palette-panel.open .pv2-swatch-item:nth-child(3) { transition-delay: 90ms; }
.pv2-palette-panel.open .pv2-swatch-item:nth-child(4) { transition-delay: 60ms; }
.pv2-palette-panel.open .pv2-swatch-item:nth-child(5) { transition-delay: 30ms; }
.pv2-palette-panel.open .pv2-swatch-item:nth-child(6) { transition-delay: 0ms; }

.pv2-swatch-dot {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: default;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.30),
    0 1px 3px rgba(0,0,0,0.16),
    inset 0 1px 2px rgba(255,255,255,0.40);
  transition: transform 200ms ease;
}
.pv2-swatch-dot:hover { transform: scale(1.14); }

.pv2-swatch-name {
  font: 600 9px/1.2 var(--font-sans);
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 5px rgba(0,0,0,0.65), 0 0 10px rgba(0,0,0,0.30);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
}

/* ── Prev / Next arrows ───────────────────────────── */
.pv2-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(249, 244, 240, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mauve);
  opacity: 0.3;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(45,38,38,0.18);
}
.pv2-arrow svg { width: 18px; height: 18px; stroke-width: 2; }
.pv2-arrow.prev { left: 18px; }
.pv2-arrow.next { right: 18px; }
.pv2-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }

/* Photo counter — top right corner */
.pv2-counter {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 7;
  background: rgba(249, 244, 240, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 6px 12px;
  font: 500 11px/1 var(--font-sans);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  box-shadow: 0 1px 6px rgba(45,38,38,0.12);
  pointer-events: none;
}
.pv2-counter.hidden { display: none; }

/* ── Video subtab selector (overlaid bottom of video pane) ── */
.pv2-video-subtabs {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 3px;
  background: rgba(45, 38, 38, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 4px;
}
.pv2-vsub {
  padding: 8px 16px;
  border-radius: 10px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
}
.pv2-vsub:hover { color: rgba(255,255,255,0.90); }
.pv2-vsub.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.pv2-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Controls bar (Lighting + Palette rainbow) ────── */
.pv2-controls-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--surface);
  border-radius: 14px;
  padding: 5px 10px;
  box-shadow: var(--nm-inset);
  overflow: visible;
  position: relative;
}

.pv2-bar-sep {
  width: 1px;
  height: 22px;
  background: rgba(45,38,38,0.14);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Rainbow palette button ───────────────────────── */
.pv2-rainbow-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: conic-gradient(
    from 0deg,
    hsl(350,72%,58%),
    hsl(20,82%,58%),
    hsl(45,84%,56%),
    hsl(80,62%,54%),
    hsl(150,54%,52%),
    hsl(200,67%,54%),
    hsl(240,64%,60%),
    hsl(275,60%,60%),
    hsl(315,67%,58%),
    hsl(350,72%,58%)
  );
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--elev-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
  position: relative;
}
.pv2-rainbow-btn::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.92);
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(74,53,64,0.12);
}
.pv2-rainbow-btn:hover {
  transform: scale(1.10);
  box-shadow: 0 4px 14px rgba(45,38,38,0.30);
}
.pv2-rainbow-btn.active {
  box-shadow: var(--inset-sm), 0 0 0 3px rgba(74,53,64,0.30);
}

/* ── Brand-dark button colors (V2 controls) ───────── */
.pv2-lighting-bar .pv2-light-btn,
.pv2-controls-bar .pv2-light-btn {
  color: var(--brand-deep);
  background: #f8f4f1;
  box-shadow: var(--elev-sm);
}
.pv2-lighting-bar .pv2-light-btn.active,
.pv2-controls-bar .pv2-light-btn.active {
  color: var(--ink-mauve);
  background: var(--surface-distinct);
  box-shadow: var(--inset-sm);
}
.pv2-lighting-bar .pv2-light-btn:hover,
.pv2-controls-bar .pv2-light-btn:hover {
  color: var(--ink-mauve);
  background: rgba(74,53,64,0.13);
}

/* Also darken V1 lighting buttons */
.lighting-bar .lighting-btn { color: var(--brand-deep); background: rgba(74,53,64,0.07); }
.lighting-bar .lighting-btn.active { color: var(--ink-mauve); background: var(--surface-distinct); }
.lighting-bar .lighting-btn:hover { color: var(--ink-mauve); background: rgba(74,53,64,0.13); }

/* ── Thumbs + lighting combined row ──────────────── */
.pv2-thumbs-lighting-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pv2-thumbs-lighting-row .pv2-thumbs-row {
  flex: 1;
  min-width: 0;
}

/* V2 lighting bar — shrinks to fit beside thumbs */
.pv2-lighting-bar {
  flex-shrink: 0;
}
.pv2-lighting-bar .pv2-light-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  transition: all 180ms ease;
}
.pv2-lighting-bar .pv2-light-btn svg { width: 15px; height: 15px; stroke-width: 1.75; flex-shrink: 0; }
.pv2-lighting-bar .pv2-light-btn:hover { color: var(--ink-soft); background: rgba(255,255,255,0.55); }
.pv2-lighting-bar .pv2-light-btn.active {
  background: var(--bg);
  color: var(--brand);
  box-shadow: 0 1px 5px rgba(45, 38, 38, 0.14);
}

/* ── Thumbnail strip (below media zone) ──────────── */
.pv2-thumbs-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.pv2-thumbs-row::-webkit-scrollbar { display: none; }
.pv2-thumb {
  width: 64px;
  height: 50px;
  border-radius: 9px;
  object-fit: cover;
  object-position: center top;
  cursor: pointer;
  opacity: 0.50;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: opacity 180ms ease, border-color 180ms ease;
}
.pv2-thumb.active { opacity: 1; border-color: var(--brand); }
.pv2-thumb:hover { opacity: 0.80; }

/* ── Info strip: two columns below media ─────────── */
.pv2-info-strip {
  padding-top: 4px;
}
.pv2-ctab-pane { display: none; }
.pv2-ctab-pane.active { display: block; }
.pv2-info-grid {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: 48px;
  align-items: start;
}

.pv2-info-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pv2-flowers-block { display: flex; flex-direction: column; gap: 10px; }

.pv2-info-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Size selector (variant 2) ────────────────────── */
.pv2-size-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  position: relative;
}

.pv2-size-help {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-soft);
  background: var(--bg);
  color: var(--brand);
  font: 700 10px/1 var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 180ms ease;
  box-shadow: var(--elev-sm);
  letter-spacing: 0;
}
.pv2-size-help:hover { background: var(--brand-soft); color: var(--bg); }

/* Size popup tooltip */
.pv2-size-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 310px;
  background: var(--surface);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: var(--elev-md);
  border: 1px solid rgba(255,255,255,0.55);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pv2-size-popup.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Arrow/caret on popup */
.pv2-size-popup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-right: 1px solid rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  transform: rotate(45deg);
}
.pv2-size-popup h4 {
  font: 600 13px/1.2 var(--font-sans);
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
.pv2-popup-sizes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pv2-popup-size-row { display: flex; flex-direction: column; gap: 3px; }
.pv2-popup-size-name {
  font: 600 12px/1 var(--font-sans);
  color: var(--brand);
}
.pv2-popup-size-desc {
  font: 400 12px/1.55 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

/* ================================================================
   PRODUCT V2 — RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .pv2-info-grid { grid-template-columns: 1fr; gap: 28px; }
  .pv2-header-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pv2-name { font-size: 34px; }
  .pv2-size-popup { width: 260px; }
  .pv2-content-tabs { top: 12px; }
}

@media (max-width: 600px) {
  .pv2-media-zone { border-radius: 18px; }
  .pv2-name { font-size: 28px; }
  .pv2-left-controls { padding: 8px 5px; gap: 3px; }
  .pv2-tab,
  .pv2-palette-btn { width: 30px; height: 30px; }
  .pv2-tab svg,
  .pv2-palette-btn svg { width: 13px; height: 13px; }
  .pv2-arrow.prev { left: 18px; }
  .pv2-tip { display: none; }
  .pv2-thumbs-lighting-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pv2-rainbow-tip { display: none; }
  .pv2-content-tabs { flex-wrap: wrap; }
}

/* ── Content tabs (Sizes / Modification / Structure) ── */
.pv2-content-tabs {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  gap: 3px;
  background: rgba(249,244,240,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 4px;
  box-shadow: var(--nm-inset), 0 4px 20px rgba(74,53,64,0.18);
  white-space: nowrap;
}
.pv2-ctab {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 11px;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--brand-deep);
  background: #f8f4f1;
  border: none;
  cursor: pointer;
  box-shadow: var(--elev-sm);
  transition: all 200ms ease;
  white-space: nowrap;
}
.pv2-ctab:hover { color: var(--ink-mauve); background: rgba(74,53,64,0.13); }
.pv2-ctab.active {
  background: var(--surface-distinct);
  color: var(--ink-mauve);
  box-shadow: var(--inset-sm);
}

/* ── Rainbow palette button wrapper + tooltip ─────── */
.pv2-rainbow-wrap {
  position: relative;
  flex-shrink: 0;
}
.pv2-rainbow-tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  background: #f8f4f0;
  border-radius: 14px;
  padding: 14px 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  font: 400 12px/1.55 var(--font-sans);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(107,90,91,0.20), 0 1px 4px rgba(107,90,91,0.10);
  transition: opacity 220ms ease 0s, transform 220ms ease 0s;
}
.pv2-rainbow-wrap:hover .pv2-rainbow-tip {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease 1s, transform 220ms ease 1s;
}
.pv2-tip-eyebrow {
  display: block;
  font: 700 9px/1 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 7px;
}

/* ── Structure spec table ─────────────────────────── */
.pv2-struct-specs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
}
.pv2-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(74,53,64,0.08);
}
.pv2-spec-row:first-child { border-top: 1px solid rgba(74,53,64,0.08); }
.pv2-spec-label {
  font: 600 10px/1 var(--font-sans);
  color: var(--brand-deep);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pv2-spec-value {
  font: 500 13px/1.4 var(--font-sans);
  color: var(--ink-mauve);
  text-align: right;
}