/* ==========================================================================
   JESSYNAYS MAIN STYLES & LAYOUT
   Night-Comfort Reading • Neutral Purple Highlights • Playful & Elegant
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--bg-space);
  background-image: 
    radial-gradient(ellipse at 50% 0%, var(--bg-radial-1, rgba(94, 68, 120, 0.16)) 0%, var(--bg-radial-2, rgba(21, 17, 28, 0.95)) 70%),
    radial-gradient(circle at 10% 40%, var(--bg-radial-3, rgba(68, 48, 88, 0.12)) 0%, transparent 50%),
    radial-gradient(circle at 90% 70%, var(--bg-radial-4, rgba(85, 60, 105, 0.14)) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  padding-bottom: 60px; /* room for bottom affirmation bar */
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* --------------------------------------------------------------------------
   BACKDROP BLOOMS
   Three atmospheric botanical flowers behind the page.
   - Primary large bloom anchored off the right edge.
   - Mid-size bloom left of centre.
   - Small bloom anchored off the far left edge.
   All are masked to nothing at their rims so they settle gently into
   the canvas rather than reading as placed graphics.
   -------------------------------------------------------------------------- */
.bloom-backdrop {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  overflow: hidden;
  max-width: 100vw;
  /* Melts the circular edge of the artwork into the canvas. Without this the
     bloom reads as a pasted-on disc no matter how low the opacity goes. */
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 96%);
  transition: opacity var(--transition-normal);
}

/* Primary large flower on the right */
.bloom-backdrop--right {
  top: 50%;
  right: -14vmin;
  width: 96vmin;
  height: 96vmin;
  transform: translateY(-50%) rotate(-8deg);
  transform-origin: center;
}

/* Mid-size flower left of centre. The +10vw pushes it a tenth of the viewport
   to the right of where it used to sit, opening room for the far-left bloom. */
.bloom-backdrop--left {
  top: 42%;
  left: calc(48vmin + 10vw);
  width: 58vmin;
  height: 58vmin;
  transform: translateY(-50%) rotate(32deg);
  transform-origin: center;
  opacity: 0.36;
}

/* Third, smallest flower hugging the far left edge. Sits lower than the other
   two so the trio reads as a diagonal drift rather than a row. */
.bloom-backdrop--far-left {
  top: 66%;
  left: calc(-10vmin + 20vw);
  width: 40vmin;
  height: 40vmin;
  transform: translateY(-50%) rotate(-24deg);
  transform-origin: center;
  opacity: 0.30;
}

.bloom-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* drop-shadow() takes offsets + a single colour; the --shadow-glow-* tokens
     are whole box-shadow values and silently void the filter. */
  filter: drop-shadow(0 0 22px var(--botanical-glow));
}

/* Light mode carries the blooms at full dark-mode presence. The artwork's own
   alphas are tiny (petal gradients bottom out at 0.03), so on paper the extra
   contrast comes from the deepened --botanical-stroke-* tokens rather than
   from painting the blooms harder — this only stops them being dialled back. */
[data-mode="light"] .bloom-backdrop {
  opacity: 0.55;
}

[data-mode="light"] .bloom-backdrop--left {
  opacity: 0.42;
}

[data-mode="light"] .bloom-backdrop--far-left {
  opacity: 0.36;
}

@media (max-width: 1100px) {
  .bloom-backdrop--right {
    right: -26vmin;
    width: 108vmin;
    height: 108vmin;
    opacity: 0.34;
  }
  .bloom-backdrop--left {
    left: calc(34vmin + 10vw);
    top: 38%;
    width: 66vmin;
    height: 66vmin;
    opacity: 0.24;
  }
  .bloom-backdrop--far-left {
    left: calc(-14vmin + 20vw);
    top: 72%;
    width: 44vmin;
    height: 44vmin;
    opacity: 0.20;
  }
  [data-mode="light"] .bloom-backdrop--right {
    opacity: 0.38;
  }
  [data-mode="light"] .bloom-backdrop--left {
    opacity: 0.28;
  }
  [data-mode="light"] .bloom-backdrop--far-left {
    opacity: 0.24;
  }
}

@media (max-width: 768px) {
  /* Keep them, but well back: at this width they sit directly under body copy. */
  .bloom-backdrop--right {
    right: -38vmin;
    opacity: 0.2;
  }
  .bloom-backdrop--left {
    left: calc(20vmin + 10vw);
    top: 30%;
    width: 54vmin;
    height: 54vmin;
    opacity: 0.12;
  }
  .bloom-backdrop--far-left {
    left: calc(-18vmin + 20vw);
    top: 78%;
    width: 38vmin;
    height: 38vmin;
    opacity: 0.11;
  }
  /* Mobile keeps them fainter than desktop in both modes: at this width the
     blooms sit directly under body copy rather than beside it. */
  [data-mode="light"] .bloom-backdrop--right {
    opacity: 0.24;
  }
  [data-mode="light"] .bloom-backdrop--left {
    opacity: 0.17;
  }
  [data-mode="light"] .bloom-backdrop--far-left {
    opacity: 0.15;
  }
}

/* Container Utility */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  z-index: 10;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Anchor targets sit under a sticky header, so a raw jump would land their
   first line behind it. */
#heroSection,
#aboutSection,
#catalogSection,
#contactSection {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  color: var(--text-secondary);
  font-size: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* Accessibility Focus */
:focus-visible {
  outline: 2px solid var(--purple-neutral);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   FLAT UI ICONS
   One stroke weight, no fills, always currentColor — so an icon takes the
   colour of whatever control it sits in and needs no per-context rules.
   ========================================================================== */
.ui-icon {
  width: 1.15em;
  height: 1.15em;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

/* data-icon spans are pure carriers — they must not add layout of their own. */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The gold heart ornament paints itself with --text-gold, which reads on the
   page canvas but vanishes on the dark filled buttons in light mode, where
   --text-gold is a deep brown. A CSS rule on the path beats the SVG's
   presentation attributes, so those surfaces repaint it. */
[data-mode="light"] .commission-btn [data-ornament="gold"] path,
[data-mode="light"] .modal-commission-cta-btn [data-ornament="gold"] path {
  fill: var(--accent-gold-pale);
  stroke: var(--accent-gold-pale);
}

.empty-state-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.6rem;
  color: var(--text-dim);
}

.empty-state-icon .ui-icon {
  width: 2.4rem;
  height: 2.4rem;
}



/* ==========================================================================
   HEADER & NAVBAR
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 1.5rem;
  /* A flex item's default min-width:auto is its min-content width, so without
     this the lockup and the action row add up to more than a phone's viewport
     and push the row past the right edge — the header paints only as wide as
     the viewport, so the overflow reads as a broken, ragged top bar. */
  min-width: 0;
}

/* Brand Logo */
.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  /* The lockup is the part that gives: it truncates so the action buttons on
     the right keep their full size at any width. */
  min-width: 0;
  flex-shrink: 1;
}

/* Brand mark: the same six-petal bloom as the backdrop flower, so the logo and
   the background read as one plant rather than two unrelated motifs. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--purple-neutral-light);
  transition: color var(--transition-fast), transform var(--transition-bounce);
}

.brand-mark .ui-icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.3;
}

/* The bloom is its own link to Contact, so it lights up on its own hover
   rather than on the whole lockup's. */
.brand-mark:hover {
  color: var(--text-gold);
  transform: rotate(24deg);
}

.brand-text-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}

/* Footer repeats the lockup, so the mark sits with the wordmark there too. */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.brand-lockup .brand-mark .ui-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.brand-text-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1.1;
  white-space: nowrap;
  min-width: 0;
}

.brand-title .title-accent {
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}

.brand-subtitle {
  font-family: var(--font-caps);
  font-size: calc(0.72rem * var(--font-caps-size-scale));
  text-transform: uppercase;
  letter-spacing: calc(0.12em * var(--font-caps-tracking-scale));
  color: var(--text-muted);
  font-weight: 500;
  /* Architects Daughter sets wider and taller than the sans it replaced. Left
     alone it wrapped this line in two and inherited the body's 1.6 leading,
     which doubled the lockup's height and grew the whole header. nowrap keeps
     it on one line; 1.1 matches .brand-title's leading. */
  white-space: nowrap;
  line-height: 1.1;
}

/* Header Navigation Links */
.header-nav {
  display: flex;
  align-items: center;
  /* 1.75rem here put the row at ~1290px against a 1256px container, so even a
     1440px screen squeezed the wordmark. */
  gap: 1.25rem;
  min-width: 0;
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple-neutral), var(--text-gold));
  transition: width var(--transition-normal);
  border-radius: var(--radius-full);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  /* Never squeezed: the circles must stay circles, so the lockup absorbs any
     shortfall instead. */
  flex-shrink: 0;
}

.icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 1.05rem;
  position: relative;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-highlight);
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* Language switch: a two-letter code rather than a flag.
   Refined, understated typography that balances harmoniously with adjacent icon buttons. */
.icon-btn.lang-btn,
.lang-btn,
.lang-btn [data-lang-code] {
  font-size: calc(0.60rem * var(--font-caps-size-scale));
  font-weight: 600;
  letter-spacing: calc(0.08em * var(--font-caps-tracking-scale));
  text-indent: 0.08em; /* optical centering for letter-spaced uppercase */
  text-transform: uppercase;
  font-family: var(--font-caps);
  line-height: 1;
}

.icon-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--purple-neutral);
  color: var(--bg-space);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sits in the same row as the 40px .icon-btn circles, so it takes their height
   exactly and grows only sideways for its label. */
.commission-btn {
  height: 40px;
  flex-shrink: 0;
  padding: 0 0.95rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--filled-from), var(--filled-to));
  border: 1px solid var(--border-highlight);
  color: var(--text-on-filled);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.commission-btn:hover {
  background: linear-gradient(135deg, var(--purple-neutral-muted), var(--purple-neutral-dark));
  border-color: var(--purple-neutral-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--shadow-glow-purple);
}

/* Seven nav links, the lockup and five actions do not all fit until the
   container is at its full 1320px. Below that the row gives in stages rather
   than overflowing: first the nav tightens and the tagline steps out, then the
   nav goes entirely. */
@media (min-width: 1181px) and (max-width: 1340px) {
  .header-nav {
    gap: 1rem;
  }
  .nav-link {
    font-size: 0.85rem;
  }
  .brand-subtitle {
    display: none;
  }
}

@media (max-width: 1180px) {
  .header-nav {
    display: none; /* Accessible via category filter tabs and jump buttons */
  }
}

@media (max-width: 900px) {
  /* Collapse to an icon-only pill — hide the label, keep the ornament, or the
     button reads as an empty capsule. */
  .commission-btn {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .commission-btn [data-i18n] {
    display: none;
  }
}

/* Tablet-to-phone. The header bar itself gets shorter here, and the seal badge
   stops crowding the corner it floats in. The button sizing that follows starts
   one tier down, at 560px, where the row actually stops fitting. */
@media (max-width: 640px) {
  .site-header {
    --header-height: 64px;
  }
  .brand-logo-wrap {
    gap: 0.45rem;
  }
  .icon-btn {
    font-size: 0.95rem;
  }
  .rotating-seal-badge {
    width: 80px;
    height: 80px;
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* Phone. Five 40px circles plus the full lockup measure ~500px, which is wider
   than the viewport — so the row is cut down here rather than left to overflow
   and drag the sticky header's right edge off screen. */
@media (max-width: 560px) {
  .header-inner {
    gap: 0.75rem;
  }
  .header-actions {
    gap: 0.4rem;
  }
  .icon-btn,
  .commission-btn {
    width: 36px;
    height: 36px;
  }
  .brand-mark .ui-icon {
    width: 1.7rem;
    height: 1.7rem;
  }
  .brand-title {
    font-size: 1.3rem;
  }
  /* Two lines of wordmark do not fit next to five buttons; the tagline is the
     line that carries no navigation, so it goes first. */
  .brand-subtitle {
    display: none;
  }
}

@media (max-width: 380px) {
  .icon-btn,
  .commission-btn {
    width: 34px;
    height: 34px;
  }
  .brand-title {
    font-size: 1.15rem;
  }
  .brand-mark .ui-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* 320px — iPhone SE and the narrowest Androids. Five buttons at 34px already
   leave the wordmark too little room to spell itself out, so this tier buys the
   last ~40px back from the gaps, the gutter and the type. */
@media (max-width: 340px) {
  .site-header .container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .header-inner {
    gap: 0.5rem;
  }
  .header-actions {
    gap: 0.3rem;
  }
  .icon-btn,
  .commission-btn {
    width: 32px;
    height: 32px;
  }
  .brand-logo-wrap {
    gap: 0.4rem;
  }
  .brand-mark .ui-icon {
    width: 1.35rem;
    height: 1.35rem;
  }
  .brand-title {
    font-size: 1.02rem;
  }
}

/* ==========================================================================
   HERO SECTION & "VERY NAY'S" BRAND STORY
   ========================================================================== */
.hero-section {
  padding: 3.5rem 0 2.5rem;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero-headline {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
  font-family: var(--font-serif);
}

.hero-headline em {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--purple-neutral-light);
  font-weight: 400;
  padding-right: 0.2rem;
}

.hero-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 580px;
}

.hero-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.btn-primary {
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--action-from), var(--action-to));
  color: var(--action-text);
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 4px 18px var(--shadow-glow-purple);
  transition: all var(--transition-bounce);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--action-from-hover), var(--action-to-hover));
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px var(--shadow-glow-purple);
}

.btn-secondary {
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--purple-neutral);
  transform: translateY(-2px);
}

/* Hero Feature Points */
.hero-highlights-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.hero-highlight-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.hero-highlight-item .bullet-icon {
  color: var(--text-gold);
  font-size: 0.95rem;
}

/* Hero Visual & Rotating Seal Badge Stage
   The caption used to sit ON the photo, over a scrim. That could not survive a
   theme flip: the text colour follows the canvas (near-white on dark, near-black
   on paper) while the photo underneath and its scrim stay dark in both modes, so
   light mode put dark text on a dark image. The caption now lives in its own bar
   below the photo, on a real themed surface, where the text tokens mean what
   they say. Nothing is left over the image except the seal, which carries its
   own opaque badge. */
.hero-visual-stage {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-lg), var(--shadow-glow-purple);
}

/* The photo's own box. It keeps the stage's old aspect ratio and clips the
   hover zoom, so the scaled image can't creep over the caption bar. */
.hero-stage-frame {
  position: relative;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  cursor: pointer;
}

.hero-stage-frame:focus-visible,
.hero-stage-caption-bar:focus-visible {
  outline: 2px solid var(--purple-neutral);
  outline-offset: -2px;
}

.hero-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

.hero-visual-stage:hover .hero-stage-img {
  transform: scale(1.035);
}

/* Pure vignette now — it carries no text, so it only has to settle the photo
   into the caption bar beneath it. */
.hero-stage-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--scrim-image-mid) 0%,
    transparent 55%
  );
  pointer-events: none;
}

.hero-stage-caption-bar {
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.hero-stage-caption-bar:hover {
  background: var(--bg-card-hover);
}

.hero-stage-caption {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.hero-stage-subcaption {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* THE "VERY NAY'S" CIRCULAR ROTATING SEAL */
.rotating-seal-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 105px;
  height: 105px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--text-gold);
  box-shadow: var(--shadow-md), var(--shadow-glow-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: transform var(--transition-bounce), box-shadow var(--transition-normal);
}

.rotating-seal-badge:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
}

.rotating-seal-badge svg {
  width: 100%;
  height: 100%;
}

/* Secondary smaller product card badge */
.product-card-seal {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-full);
  background: var(--bg-card-hover);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--text-gold);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}


/* ==========================================================================
   ABOUT SECTION
   Portrait on the left, story on the right — the mirror of the hero grid, so
   the two read as a pair rather than as two unrelated slabs.
   ========================================================================== */
.about-section {
  padding: 3.5rem 0 1rem;
  position: relative;
  z-index: 10;
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 960px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Built like the hero stage, and for the same reason: a caption laid over the
   photo took its colour from the canvas while its ground stayed dark in both
   modes, so it vanished on paper. Photo and caption are separate boxes now. */
.about-visual {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-lg), var(--shadow-glow-purple);
  background: var(--bg-secondary);
}

.about-visual-frame {
  position: relative;
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
}

.about-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

.about-visual:hover .about-portrait {
  transform: scale(1.035);
}

.about-visual-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim-image-mid) 0%, transparent 55%);
  pointer-events: none;
}

.about-visual-caption {
  padding: 1.1rem 1.35rem 1.25rem;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-primary);
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.about-eyebrow {
  font-family: var(--font-caps);
  font-size: calc(0.72rem * var(--font-caps-size-scale));
  text-transform: uppercase;
  letter-spacing: calc(0.16em * var(--font-caps-tracking-scale));
  font-weight: 600;
  color: var(--text-gold);
}

.about-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

.about-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.about-lead strong {
  color: var(--purple-neutral-light);
  font-weight: 600;
}

.about-values-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.about-values-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.about-value-icon {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.about-values-list strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.about-values-list span {
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.about-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   DAILY AFFIRMATION STRIP (SUBTLE, QUIET, DATE-DRIVEN AT THE BOTTOM)
   ========================================================================== */
.daily-affirmation-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  padding: 0.65rem 1.5rem;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0.65rem));
  font-size: 0.86rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 100%;
  box-sizing: border-box;
  transition: all var(--transition-normal);
}

.affirmation-content-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  max-width: 900px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affirmation-leaf-icon {
  color: var(--purple-neutral-muted);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.affirmation-phrase-text {
  color: var(--purple-neutral-light);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  min-width: 0;
  flex: 1;
}

@media (max-width: 600px) {
  .daily-affirmation-bar {
    padding: 0.45rem 0.85rem;
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0.45rem));
    font-size: 0.78rem;
  }
  .affirmation-phrase-text {
    font-size: 0.84rem;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  margin-top: 5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  padding: 4rem 0 3.5rem;
  position: relative;
  z-index: 10;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand-col p {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 320px;
}

.footer-col-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links-list a {
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-links-list a:hover {
  color: var(--purple-neutral-light);
}

/* Contact band — the bloom in the header scrolls here. */
.footer-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.footer-contact-text {
  max-width: 480px;
}

.footer-contact-text .footer-col-title {
  margin-bottom: 0.4rem;
}

.footer-contact-text p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-contact-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* A <button> rather than an <a>: it opens the inquiry drawer, since no address
   is published. Buttons inherit neither font nor background, so both are set. */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--text-gold);
  background: none;
  color: var(--text-gold);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.contact-link:hover {
  background: var(--overlay-chip);
  transform: translateY(-2px);
}