/* =============================================================
   Sonala Creations — main stylesheet
   Mirrors the live Valeska theme tokens used on sonalacreations.com
   ============================================================= */

/* ---------- Self-hosted webfonts ----------
   Decoupled from Google Fonts / the WordPress export: woff2 files live in
   /fonts. Cormorant Garamond and Roboto are variable; Yantramanav ships one
   file per weight. Latin subset only. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Yantramanav";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/yantramanav-300.woff2") format("woff2");
}
@font-face {
  font-family: "Yantramanav";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/yantramanav-400.woff2") format("woff2");
}
@font-face {
  font-family: "Yantramanav";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/yantramanav-500.woff2") format("woff2");
}
@font-face {
  font-family: "Yantramanav";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/yantramanav-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("../fonts/roboto.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  --color-text: #353535;
  --color-heading: #000;
  --color-bg: #fff;
  --color-cream: #E8E6DB;
  --color-burgundy: #753333;
  --color-accent: #68818D;        /* slate-blue accent */
  --color-accent-soft: #BBC6CC;   /* lighter wash of accent (back-to-top idle) */
  --color-accent-deep: #556A74;   /* deeper shade of accent */
  --color-pink: #F6E8EA;          /* newsletter band pale pink */
  --color-pink-deep: #C05968;     /* darker shade of the pale pink (arrow) */
  --color-pink-line: #E3C3CA;     /* soft outline for inputs on the pink band */
  --color-dark: #191919;
  --color-line: #ececec;
  --color-input-border: var(--color-accent-soft);  /* one hairline colour for every text input */

  /* Override Valeska theme accent so back-to-top, newsletter, hovers, etc. pick up --color-accent */
  --qode-main-color: #68818D;

  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Yantramanav", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1300px;
  --header-height: 104px;
  --topbar-height: 44px;
  --gutter: 3.95%;

  /* Horizontal page gutter for reduced widths. Desktop bands keep their own
     edge values; below 1024px every full-bleed band collapses to this single
     token (see the consolidated `padding-inline` rule at the end of the file)
     so section edges stay aligned as the viewport shrinks.
       tablet 32  ·  mobile 24  ·  small mobile 16  (remapped below) */
  --page-x: var(--space-6);   /* 32 */

  /* ===== Spacing system =====
     Base scale (8pt grid with half-steps). Reach for these values, not literals.
       1=4  2=8  3=12  4=16  5=24  6=32  7=40  8=56  9=72  10=96  11=128  12=160 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 160px;

  /* Section vertical padding — top/bottom on big bands.
     sm = quiet utility band   md = default   lg = hero/page-title   xl = generous */
  --section-y-sm: var(--space-8);   /*  56 */
  --section-y-md: var(--space-10);  /*  96 */
  --section-y-lg: var(--space-11);  /* 128 */
  --section-y-xl: var(--space-12);  /* 160 */

  /* Section-to-section rhythm — the gap left by `.spacer` ladder or `<div class="spacer">` */
  --rhythm-sm: var(--space-7);   /*  40 */
  --rhythm-md: var(--space-9);   /*  72 */
  --rhythm-lg: var(--space-11);  /* 128 */
  --rhythm-xl: var(--space-12);  /* 160 */

  /* Grid gaps (cards, columns) */
  --gap-tight: var(--space-3);   /* 12 */
  --gap:       var(--space-5);   /* 24 */
  --gap-wide:  var(--space-7);   /* 40 */

  /* ===== Button system =====
     One scale for every text button — .btn on light pages and its
     dark-surface twins (.cs-btn on shop, the gate form button).
     The asymmetric vertical padding (18 top / 16 bottom) optically
     centres the uppercase label, which sits high in its line box. */
  --btn-font-size:      14px;
  --btn-font-weight:    400;
  --btn-letter-spacing: 0.1em;
  --btn-radius:         0;
  --btn-border-width:   1px;
  --btn-pad-top:        17px;
  --btn-pad-x:          42px;
  --btn-pad-bottom:     17px;
  --btn-height-sm:      48px;   /* compact inline buttons (newsletter row) */
  --btn-focus-ring:     2px solid var(--color-accent);
  --btn-focus-offset:   3px;
  --btn-transition:     color .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
}

/* Responsive remap — every section/spacer that uses tokens scales together */
@media (max-width: 1024px) {
  :root {
    --section-y-md: var(--space-9);   /*  72 */
    --section-y-lg: var(--space-10);  /*  96 */
    --section-y-xl: var(--space-11);  /* 128 */
    --rhythm-md:    var(--space-8);   /*  56 */
    --rhythm-lg:    var(--space-10);  /*  96 */
    --rhythm-xl:    var(--space-11);  /* 128 */
  }
}
@media (max-width: 767px) {
  :root {
    --section-y-md: var(--space-8);   /*  56 */
    --section-y-lg: var(--space-9);   /*  72 */
    --section-y-xl: var(--space-10);  /*  96 */
    --rhythm-md:    var(--space-7);   /*  40 */
    --rhythm-lg:    var(--space-9);   /*  72 */
    --rhythm-xl:    var(--space-10);  /*  96 */
    --page-x:       var(--space-5);   /*  24 */
  }
}
@media (max-width: 480px) {
  :root {
    --page-x:       var(--space-4);   /*  16 */
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.35em;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s ease-out; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* Visually-hidden (skip link, a11y labels). Folded in from the theme base so the
   page no longer depends on the Valeska/Elementor CSS to hide these. */
.screen-reader-text,
.elementor-screen-only,
.ui-helper-hidden-accessible {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography (UPPERCASE Cormorant 300) ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: var(--space-5) 0;
  word-wrap: break-word;
}
h1 { font-size: 80px; line-height: .88em; }
h2 { font-size: 66px; line-height: .9em; }
h3 { font-size: 50px; line-height: 1.02em; }
h4 { font-size: 40px; line-height: 1.025em; }
h5 { font-size: 30px; line-height: 1.03em; font-weight: 400; }
h6 { font-size: 24px; line-height: 1.04em; font-weight: 400; }
p { margin: var(--space-3) 0; }

/* ---------- Subtitle / eyebrow ---------- */
.subtitle, .eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  line-height: 1.22em;
  letter-spacing: var(--btn-letter-spacing);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  outline: 0;
  padding: var(--btn-pad-top) var(--btn-pad-x) var(--btn-pad-bottom);
  background-color: transparent;
  color: var(--color-heading);
  border: var(--btn-border-width) solid var(--color-heading);
  transition: var(--btn-transition);
  cursor: pointer;
}
.btn:hover { color: #fff; background-color: var(--color-dark); }
.btn:focus-visible { outline: var(--btn-focus-ring); outline-offset: var(--btn-focus-offset); }

/* Variant: solid dark fill (primary call-to-action on light pages) */
.btn--filled { color: #fff; background-color: var(--color-dark); border-color: transparent; }
.btn--filled:hover { background-color: var(--color-accent); }

/* Variant: solid accent fill (used for the lead action on dark surfaces) */
.btn--accent { color: #fff; background-color: var(--color-accent); border-color: var(--color-accent); }
.btn--accent:hover { color: var(--color-dark); background-color: #fff; border-color: #fff; }

/* Variant: outline on dark surfaces (white hairline, inverts on hover) */
.btn--ghost { color: #fff; border-color: #fff; background: transparent; }
.btn--ghost:hover { color: var(--color-heading); background-color: #fff; }

/* Size: compact, fixed-height — for inline form rows where the button
   sits beside an input. Centres the label with line-height (matching
   .subscribe__input) rather than flex: inline-flex's align-items:center
   renders this font's uppercase slightly low, so the label read as sitting
   too low next to the padding-centred base .btn. */
.btn--sm {
  /* Compact inline-row size that keeps the SAME centering as the full-size
     .btn (inline-block + symmetric vertical padding + inherited
     line-height:1.22em). Box-centering mechanisms (flex align-items:center,
     or line-height:height) leave this font's uppercase label sitting low, so
     we stay on the padding model and just shrink it. ~14.5px top/bottom +
     ~17px line ≈ the 48px input height beside it. */
  padding: 14.5px var(--space-7);
  text-align: center;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap);
}
.text-center { text-align: center; }
.spacer { display: block; }
.spacer--xl { height: var(--rhythm-xl); }
.spacer--lg { height: var(--rhythm-lg); }
.spacer--md { height: var(--rhythm-md); }
.spacer--sm { height: var(--rhythm-sm); }

/* ---------- Top bar (floating glass pill) ----------
   `.topbar` is a transparent wrapper that centers `.topbar__inner` — the actual
   pill — so the pill is content-width and floats clearly above the page,
   instead of stretching edge-to-edge and visually merging with the navbar. */
.topbar {
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-4) 0;
  background: transparent;
  pointer-events: none;          /* let clicks through the empty wrapper */
}
.topbar__inner {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  /* compact, content-sized chip */
  max-width: min(640px, calc(100% - var(--space-8)));
  padding: var(--space-2) var(--space-5);
  background: rgba(25, 25, 25, 0.55);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.topbar__sep { opacity: 0.4; }
.topbar a { color: inherit; opacity: 0.85; transition: opacity .2s ease-out; }
.topbar a:hover { opacity: 1; }
/* Fallback when the browser can't blur — keep it readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar__inner { background: rgba(25, 25, 25, 0.92); }
}

/* ---------- Header (white sticky, 104px) ---------- */
.header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border: 1px solid transparent;
  transition: background .3s ease, -webkit-backdrop-filter .3s ease,
    backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease,
    border-radius .3s ease, margin .3s ease, top .3s ease;
}

/* Once scrolled, detach the header into a floating, glassy rounded pill. */
body.is-scrolled .header {
  top: var(--space-3);
  margin: 0 var(--space-4);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
/* Fallback where backdrop blur is unsupported — keep the bar legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.is-scrolled .header { background: rgba(255, 255, 255, 0.92); }
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
  gap: var(--gap);
}
.header__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-heading);
  white-space: nowrap;
}
.header__logo:hover { color: var(--color-burgundy); }
.header__logo img { height: 60px; width: auto; object-fit: contain; }

.nav { display: flex; align-items: center; gap: var(--space-7); }
.nav__list {
  display: flex;
  gap: var(--space-7);
  align-items: center;
}
.nav__list a {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-heading);
  position: relative;
  padding: 6px 0;
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--color-burgundy); }

.nav__icons { display: flex; gap: 14px; align-items: center; }
.icon-btn { background: transparent; border: 0; padding: 6px; color: var(--color-heading); line-height: 0; }
.icon-btn:hover { color: var(--color-burgundy); }

.menu-toggle { display: none; background: transparent; border: 0; color: var(--color-heading); padding: 8px; }

/* Remove header search opener, its cover form, and hamburger (side-area) opener */
.widget_valeska_core_search_opener,
.qodef-search-cover-form,
.widget_valeska_core_side_area_opener { display: none !important; }

/* The off-canvas side-area panel is dead markup now that its opener is gone —
   and the theme CSS that would hide it off-screen isn't loaded here, so it
   renders as a big white box (with a close "X") below the footer. Hide it. */
#qodef-side-area { display: none !important; }

/* ---------- Hero (centered wordmark + tagline) ---------- */
.hero {
  text-align: center;
  padding: var(--section-y-md) var(--gap) 0;
  background: #fff;
}
.hero__logo {
  margin: 0 auto;
  display: block;
  width: 63%;
  max-width: 720px;
  height: auto;
}
.hero__tag {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.04em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-heading);
  margin: var(--space-6) 0 0;
}

/* ---------- 5-column category row ---------- */
/* Centered section heading above the row */
.subtitle.text-center { display: block; text-align: center; }
.cat-section__title {
  text-align: center;
  font-size: 34px;
  margin: 0 0 var(--space-7);
}
.cat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-tight);
}
.cat-tile {
  /* five per row; a leftover last row centres on its own */
  flex: 0 1 calc((100% - 4 * var(--gap-tight)) / 5);
  display: block;
  text-align: center;
}
/* image well — owns the aspect ratio, zoom and hover veil */
.cat-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #f4f4f0;
}
.cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.46,0,.36,.99);
  will-change: transform;
}
.cat-tile:hover .cat-tile__media img { transform: scale(1.05); }
/* dark veil that fades in on hover */
.cat-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity .5s ease;
}
.cat-tile:hover .cat-tile__media::after { opacity: 1; }
/* label sits beneath the image, serif uppercase like the section heads */
.cat-tile__label {
  display: block;
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-heading);
  transition: color .2s ease-out;
}
.cat-tile:hover .cat-tile__label,
.cat-tile:focus-visible .cat-tile__label {
  color: var(--color-accent);
}

/* ---------- Process / split section ---------- */
.process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.process__image {
  background-color: var(--color-cream);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 10.5%;
}
.process__image-inner {
  width: 100%;
  min-height: 700px;
  background-color: var(--color-burgundy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.process__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-y-sm) var(--space-5) var(--section-y-sm) 33%;
}
.process--reverse .process__image { order: 2; }
.process--reverse .process__copy { padding: var(--section-y-sm) var(--space-5) var(--section-y-sm) 33%; }

.process__title {
  font-family: var(--font-serif);
  font-size: 66px;
  line-height: .9em;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: var(--space-1) 0 0;
  word-break: break-word;
}
.process__text {
  margin: var(--space-4) 0 0;
  max-width: 260px;
  font-size: 17px;
  line-height: 1.35em;
  color: var(--color-text);
}
.process__btn { margin-top: var(--space-7); }

/* ---------- Page title (sub-pages) ---------- */
.page-title {
  background: #fff;
  padding: var(--section-y-md) var(--space-5) var(--section-y-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}
.page-title h1 { font-size: 80px; line-height: .88em; margin: 0; }
.page-title .crumbs {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  margin-top: var(--space-3);
}
.page-title .crumbs a:hover { color: var(--color-burgundy); }

/* ---------- Product grid ---------- */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) var(--gap);
}
.product { display: block; text-decoration: none; }
.product__media {
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.46,0,.36,.99);
}
.product:hover .product__media img { transform: scale(1.04); }
.product__name {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.1em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.product__price {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-burgundy);
  text-transform: uppercase;
}

/* ---------- Newsletter band ---------- */
.newsletter {
  background: #000;
  color: #fff;
  padding: var(--section-y-md) var(--space-5);
  text-align: center;
}
.newsletter h2 { color: #fff; margin: 0 0 var(--space-4); font-size: 56px; line-height: .92em; }
.newsletter p { color: #ccc; margin: 0 auto var(--space-5); max-width: 560px; }
.newsletter__form {
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter__form input {
  flex: 1 1 260px;
  padding: var(--space-4) 18px;   /* 18px horizontal is optical (off-grid on purpose) */
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: 0;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.55); }

/* ---------- Footer ---------- */
.footer {
  padding: var(--section-y-md) var(--gutter);
  border-top: 1px solid var(--color-line);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-wide);
  align-items: center;
}
.footer__brand {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
}
.footer__brand a { color: var(--color-heading); }
.footer__copy {
  font-family: "Roboto", var(--font-sans);
  font-size: 14px;
  color: var(--color-heading);
  margin: 0;
}
.footer__social {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
}
.footer__social a {
  color: var(--color-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  transition: all .2s ease-out;
}
.footer__social a:hover { background: var(--color-burgundy); border-color: var(--color-burgundy); color: #fff; }

/* ---------- Contact ---------- */
/* Offset the anchor jump so the sticky header doesn't cover the section top. */
#contact { scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-10);
}
/* Inset the copy so "Get In Touch" lines up with the "Latest Collection"
   eyebrow above (which is inset by the same amount, see .feature-split__copy). */
.contact-grid > div:first-child { padding-inline-start: var(--space-6); }
.contact-headline { font-size: 50px; line-height: .95em; margin: 0 0 var(--space-4); }
/* Serif but upright — the italic read as "weird" next to the sans eyebrow. */
.contact-grid .lede { font-style: normal; }
.contact-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;   /* sits inside <strong>; keep it light like the eyebrow */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.contact-block { margin-top: var(--space-6); }
.contact-meta { color: #888; font-size: 14px; margin-top: var(--space-6); }
.contact-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  color: #000;
  transition: color .2s ease;
}
.contact-social:hover { color: var(--color-accent); }
.qodef-social-icons-group {
  display: flex;
  align-items: center;
  gap: 24px;
}
.qodef-social-icons-item { display: inline-flex; align-items: center; }
.qodef-social-icons-group .contact-social { margin-right: 0; }
.qodef-social-icons-group .contact-social svg { display: block; width: 26px; height: 26px; }
.contact-social-group {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
}
.contact-social-group .contact-social { margin-right: 0; }
.contact-social-group .contact-social svg { display: block; width: 26px; height: 26px; }
/* Full-width image band */
.media-band { width: 100%; overflow: hidden; }
.media-band img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .media-band img { height: 280px; }
}

/* ---------- Feature split (rebuilt from Elementor "stacked images") ----------
   Image+text band: a tall main image with a smaller landscape image overlapping
   toward the copy. `.feature-split` = copy left / media right; add
   `.feature-split--reverse` for media left / copy right (e.g. "True Unique Style").
   All margins/weights are explicit so the block is immune to the legacy Valeska
   universal resets and renders identically with or without the theme CSS. */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 8vw, 120px);
  padding-top: var(--section-y-md);
  padding-bottom: var(--section-y-md);
}
/* Inset the copy from the screen-side edge and widen the text so it no longer
   hugs the gutter with a big empty gap on the far side (balanced left/right). */
.feature-split__copy { max-width: 480px; padding-inline-start: var(--space-6); }
.feature-split__copy h2 { margin: 0; }
.feature-split__text {
  margin: var(--space-4) 0 var(--space-6);
  max-width: 42ch;
  font-weight: 400;
  color: var(--color-text);
}
.feature-split__media { position: relative; margin: 0; }
/* Main image is contained (not full-bleed) and aligned to the outer edge, so the
   inset can overlap its inner-lower corner with whitespace around — matching the
   original "stacked images" composition. */
.feature-split__media-frame {
  width: 80%;
  margin: 0 0 0 auto;   /* push to the right edge (copy is on the left) */
  overflow: hidden;     /* contain the scroll-zoom parallax (see [data-parallax]) */
}
.feature-split__media-main { display: block; width: 100%; height: auto; margin: 0; }
.feature-split__media-inset {
  position: absolute;
  bottom: -8%;
  left: -6%;
  width: 56%;
  height: auto;
  margin: 0;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
}
/* Reverse layout: media on the left, main aligned left, inset overlaps lower-right */
.feature-split--reverse .feature-split__media { order: -1; }
.feature-split--reverse .feature-split__copy {
  margin-left: auto;
  padding-inline-start: 0;
  padding-inline-end: var(--space-6);   /* copy is on the right here */
}
.feature-split--reverse .feature-split__media-frame { margin: 0 auto 0 0; }
.feature-split--reverse .feature-split__media-inset { left: auto; right: -6%; }
/* Social row inside the copy (About "I'm Sonal") */
.feature-split__social { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
/* Single-image media (no overlapping inset, e.g. About "Believe") — fill the column */
.feature-split__media--single .feature-split__media-frame { width: 100%; margin: 0; }

/* Winter Items: enlarge the overlapping inset (top) image on desktop only. The
   tablet/mobile stacked layout (max-width: 1024px below) is left untouched. */
@media (min-width: 1025px) {
  .feature-split--winter .feature-split__media-inset { width: 90%; }
}

/* Tablet & down: stack to a single column. The jewellery (inset) is the hero, so
   it becomes the larger, on-top image, with the botanical main shrunk to a
   secondary accent behind it — keeping the stacked composition at every size. */
@media (max-width: 1024px) {
  .feature-split { grid-template-columns: 1fr; gap: var(--space-7); }
  .feature-split--reverse .feature-split__media { order: 0; }
  /* Stacked: copy spans the row, so inset both sides evenly (no longer the
     screen edge) and keep the text left-aligned. */
  .feature-split__copy,
  .feature-split--reverse .feature-split__copy {
    max-width: none;
    margin-left: 0;
    padding-inline: var(--space-5);
  }
  /* Botanical accent floats inside the gutter with clear breathing room on the
     outer edge, so it never reads as hugging the screen. */
  .feature-split__media-frame { width: 58%; margin: 0 var(--space-6) 0 auto; }
  .feature-split__media-inset {
    width: 66%;
    left: 0;
    right: auto;
    bottom: -6%;
  }
  .feature-split--reverse .feature-split__media-frame { margin: 0 auto 0 var(--space-6); }
  .feature-split--reverse .feature-split__media-inset { left: auto; right: 0; }
  /* Single wide image (About "Believe") fills the column at 100% width; clear the
     reverse left-margin so it doesn't overflow the far gutter — even inset both
     sides, matching the homepage .media-band wide image. */
  .feature-split--reverse .feature-split__media--single .feature-split__media-frame { margin: 0; }

  .contact-headline { font-size: 42px; }
}
@media (max-width: 767px) {
  .contact-headline { font-size: 36px; }
  /* Center the feature-split copy on phones (Latest Collection, The Process,
     About "hello" & "Unconditional Beauty"). */
  .feature-split__copy { text-align: center; }
  .feature-split__text { margin-left: auto; margin-right: auto; }
  .feature-split__social { justify-content: center; }
}
.form-field { margin-bottom: var(--gap); }
.form-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: var(--space-2);
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-input-border);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-heading);
  border-radius: 0;
  transition: border-color .2s ease-out;
}
.form-field input:focus,
.form-field textarea:focus { outline: 0; border-color: var(--color-heading); }
.form-field textarea { min-height: 160px; resize: vertical; }

/* ---------- Subscribe (newsletter section, replaces old popup) ---------- */
.subscribe-band {
  background-color: var(--color-pink);
  padding: var(--section-y-md) 0;
}
.subscribe {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.subscribe__title { font-size: 50px; line-height: .95em; margin: 0 0 var(--space-4); }
.subscribe__lede { margin-bottom: var(--space-6); }
.subscribe__form {
  display: flex;
  gap: var(--space-3);
  /* Centre, don't stretch — stretching makes the button taller than its label
     and pushes "Subscribe" up to the top of an empty stretched box. */
  align-items: center;
  justify-content: center;
}
.subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  /* Match the button's natural height exactly so the row is balanced. */
  height: var(--btn-height-sm);
  /* Kill the theme's input margin-bottom — otherwise align-items:center
     centres the margin box and the field rides ~10px above the button. */
  margin: 0;
  padding: 0 var(--space-4);
  /* Soft tone of the powder-pink band, not the slate hairline. */
  border: 1px solid var(--color-pink-line);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-heading);
  border-radius: 0;
  transition: border-color .2s ease-out;
}
.subscribe__input:focus { outline: 0; border-color: var(--color-heading); }
/* The theme repoints every email input's border to --color-input-border
   (input[type=email], specificity 0,1,1). Out-specify it so the newsletter
   field keeps its darker powder-pink outline in both rest and focus states. */
.subscribe__form .subscribe__input {
  border-color: var(--color-pink-line);
  /* The theme's input[type=email] rule (0,1,1) sets margin:0 0 20px and
     padding:13.5px 17px, out-specifying the base .subscribe__input class.
     This selector (0,2,0) wins, killing the bottom margin that pushed the
     field above the button, and restoring a balanced height/padding. */
  height: var(--btn-height-sm);
  margin: 0;
  padding: 0 var(--space-4);
  line-height: var(--btn-height-sm);
}
.subscribe__form .subscribe__input:focus { border-color: var(--color-heading); }
/* Sizing/centring now lives in the `.btn--sm` utility (see §7). This class
   only carries the flex-item behaviour for the subscribe row. */
.subscribe__btn { flex: 0 0 auto; }
.subscribe__msg {
  margin-top: var(--space-4);
  font-size: 14px;
  color: var(--color-burgundy);
  min-height: 1.2em;
}
@media (max-width: 540px) {
  .subscribe__title { font-size: 36px; }
  .subscribe__form { flex-direction: column; }
}

/* ---------- Instagram feed (manual gallery, full-width dark band) ---------- */
.ig-feed-section {
  text-align: center;
  /* Black band to match the footer below it. */
  background: #111;
  color: #aaa;
  /* Own vertical rhythm so it breathes between the pink subscribe band above
     and the footer below (otherwise it butts straight up against the footer). */
  padding-top: var(--section-y-md);
  padding-bottom: var(--section-y-md);
}
/* Heading reuses .cat-section__title's font; trim its bottom margin so the
   @handle link sits directly beneath the title. On the dark band it goes light. */
.ig-feed-section .ig-feed__title { margin-bottom: var(--space-3); color: #fff; }
.ig-feed__handle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  color: var(--color-pink);
  text-decoration: none;
  font-family: var(--font-sans);
}
.ig-feed__handle:hover span { text-decoration: underline; }
.ig-feed__grid {
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.ig-feed__item a {
  display: block;
  position: relative;
  /* Reel framing — vertical 9:16 tiles. */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
}
.ig-feed__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .ig-feed__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .ig-feed__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.divider { width: 48px; height: 1px; background: var(--color-heading); margin: var(--space-4) auto; border: 0; }
.lede {
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text);
  text-transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  h1 { font-size: 68px; }
  h2 { font-size: 58px; }
  h3 { font-size: 47px; }
  h4 { font-size: 35px; }
  h5 { font-size: 28px; }
  .process__title { font-size: 58px; }
  .page-title h1 { font-size: 68px; }
  .newsletter h2 { font-size: 48px; }
}

@media (max-width: 1024px) {
  :root { --header-height: 70px; }
  .header__logo img { height: 44px; }
  .nav__list { gap: var(--space-5); }

  /* three per row; the trailing two centre on the second row */
  .cat-tile { flex-basis: calc((100% - 2 * var(--gap-tight)) / 3); }

  .process { grid-template-columns: 1fr; }
  .process__copy,
  .process--reverse .process__copy { padding: var(--section-y-md) 13%; }
  .process--reverse .process__image { order: 0; }
  .process__image-inner { min-height: 480px; }

  .products { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr; gap: var(--gap); text-align: center; }
  .footer__social { justify-content: center; }
}

@media (max-width: 767px) {
  h1 { font-size: 50px; }
  h2 { font-size: 45px; }
  h3 { font-size: 40px; }
  .process__title { font-size: 50px; }
  .page-title h1 { font-size: 50px; }
  .newsletter h2 { font-size: 38px; }

  .topbar {
    /* phones: tighter top inset */
    padding: var(--space-3) var(--space-3) 0;
  }
  .topbar__inner {
    /* softer rectangle on phones since the content wraps */
    border-radius: 14px;
    max-width: 100%;
    font-size: 11px;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    flex-direction: column;
    line-height: 1.4;
    white-space: normal;
  }
  .topbar__sep { display: none; }

  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-10) var(--space-6) var(--space-6);
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -10px 0 40px rgba(0,0,0,.08);
    z-index: 60;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .nav__icons { margin-top: var(--gap); }

  .hero { padding: var(--section-y-md) var(--space-4) 0; }
  .hero__tag { font-size: 18px; margin-top: var(--space-5); }

  /* two per row; a lone fifth tile centres on the last row */
  .cat-row { gap: var(--space-5) var(--space-4); }
  .cat-tile { flex-basis: calc((100% - var(--space-4)) / 2); }
  .cat-tile__label { font-size: 20px; margin-top: var(--space-3); }

  .process__copy { padding: var(--section-y-md) 9%; }
  .process__image { padding: 0; }
  .process__image-inner { min-height: 360px; }

  .products { grid-template-columns: 1fr 1fr; gap: var(--gap) var(--space-4); }
  .product__name { font-size: 18px; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  /* Stacked on phones: drop the inset and centre the copy + social icons. */
  .contact-grid > div:first-child { padding-inline-start: 0; text-align: center; }

  .page-title { padding: var(--section-y-md) var(--space-4) var(--section-y-sm); }
}

/* Mobile nav backdrop + scroll lock */
body.no-scroll { overflow: hidden; }
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index: 55;
}
.nav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* =============================================================
   ABOUT PAGE — Valeska-style intro / gallery / belief
   ============================================================= */
.about-intro {
  background: #fff;
  padding: var(--section-y-lg) var(--space-5) var(--section-y-sm);
  text-align: center;
}
.about-intro__inner { max-width: 760px; margin: 0 auto; }
.about-intro__title {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 96px;
  line-height: .95em;
  margin: var(--space-2) 0 var(--gap);
  color: var(--color-heading);
}
.about-intro__text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 auto;
  max-width: 580px;
}
.about-intro__social {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.about-intro__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  color: var(--color-heading);
  transition: all .2s ease-out;
}
.about-intro__social a:hover { background: var(--color-burgundy); border-color: var(--color-burgundy); color: #fff; }

.about-gallery { padding: var(--section-y-sm) 0; background: #fff; }
.about-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.about-gallery__item { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: #f4f4f0; }
.about-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.about-gallery__item:hover img { transform: scale(1.04); }

.about-belief { background: #fff; padding: var(--section-y-md) var(--space-5) var(--section-y-lg); text-align: center; }
.about-belief__inner { max-width: 720px; margin: 0 auto; }
.about-belief__title {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 80px;
  line-height: .92em;
  margin: var(--space-2) 0 0;
  color: var(--color-heading);
}
.about-belief__text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  margin: var(--space-4) auto 0;
  max-width: 580px;
}
.about-belief__cta { margin-top: var(--space-7); }

@media (max-width: 1024px) {
  .about-intro__title { font-size: 72px; }
  .about-belief__title { font-size: 64px; }
  .about-gallery__grid { gap: var(--space-4); }
}
@media (max-width: 767px) {
  .about-intro { padding: var(--section-y-md) var(--space-4) var(--section-y-sm); }
  .about-intro__title { font-size: 50px; }
  .about-belief__title { font-size: 50px; }
  .about-belief { padding: var(--section-y-md) var(--space-4) var(--section-y-lg); }
  .about-gallery__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   HOMEPAGE — Valeska-style sections
   ============================================================= */

/* Split hero (text left, 2 stacked images right) */
.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-10);
  padding: var(--section-y-md) var(--gutter);
  background: #fff;
  max-width: 1600px;
  margin: 0 auto;
}
.split-hero__text { padding: 0 0 0 4%; }
.split-hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 100px;
  line-height: .92em;
  margin: var(--space-4) 0 var(--space-4);
  color: var(--color-heading);
}
.split-hero__title em {
  font-style: italic;
  font-weight: 400;
}
.split-hero__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--color-burgundy);
  margin: 0 0 var(--space-4);
  text-transform: none;
}
.split-hero__text p {
  max-width: 460px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}
.split-hero__images {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  align-self: stretch;
}
.split-hero__images figure { margin: 0; overflow: hidden; aspect-ratio: 5 / 3; background: #f4f4f0; }
.split-hero__images img { width: 100%; height: 100%; object-fit: cover; }

/* Section heading (centered, eyebrow + serif title) */
.section-head { text-align: center; margin-bottom: var(--space-8); }
.section-head h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 56px;
  line-height: .95em;
  margin: 6px 0 0;
}
.section-head h2 em { font-style: italic; font-weight: 400; }

/* 5-column product strip */
.products--five { grid-template-columns: repeat(5, 1fr); }

/* "Popular items" 3-col grid */
.popular { padding: var(--space-7) var(--gutter); }
.popular__inner { max-width: var(--container); margin: 0 auto; }
.popular__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--gap);
}

/* Contact band: split text + image */
.contact-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--section-y-md) var(--gutter);
  background: var(--color-cream);
  max-width: 1600px;
  margin: 0 auto;
}
.contact-band__copy { padding-left: 4%; }
.contact-band__title {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 64px;
  line-height: .95em;
  margin: var(--space-2) 0 var(--gap);
}
.contact-band__title em { font-style: italic; font-weight: 400; }
.contact-band__list {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.contact-band__list strong {
  display: inline-block;
  min-width: 90px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--color-heading);
}
.contact-band__image { aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.contact-band__image img { width: 100%; height: 100%; object-fit: cover; }

/* Inline newsletter (used inside contact band) */
.inline-newsletter {
  display: flex;
  max-width: 460px;
  border-bottom: 1px solid var(--color-heading);
  padding-bottom: var(--space-2);
  align-items: center;
}
.inline-newsletter input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: var(--space-3) var(--space-1);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-heading);
}
.inline-newsletter input:focus { outline: 0; }
.inline-newsletter button {
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-heading);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  cursor: pointer;
}
.inline-newsletter button:hover { color: var(--color-burgundy); }

/* Dark 4-column footer (Valeska-style) */
.footer--dark {
  background: #111;
  color: #aaa;
  border-top: 0;
  padding: var(--section-y-md) var(--gutter) var(--space-6);
  position: relative;
  overflow: hidden;
}
.footer--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/mandala-white.png?v=2);
  background-position: right 90%;
  background-repeat: no-repeat;
  background-size: 420px auto;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.footer--dark > * { position: relative; z-index: 1; }
/* Home footer: tint the mandala watermark powder pink (--color-pink) */
.footer--pink-mandala::before {
  background-image: url(../images/mandala-pink.png?v=1);
  opacity: 0.13;
}
.footer--dark .footer__cols {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--gap-wide);
  text-align: left;
  padding-bottom: var(--space-8);
}
.footer--dark .footer__brand-block { text-align: left; }
.footer--dark .footer__brand-block .logo {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--space-4);
  display: block;
}
.footer--dark .footer__brand-block p { font-size: 14px; line-height: 1.6; color: #888; max-width: 280px; }
.footer--dark .footer__brand-social {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.footer--dark .footer__brand-social li { margin: 0; padding: 0; }
.footer--dark .footer__brand-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #aaa;
  transition: color .2s, border-color .2s, background-color .2s;
}
.footer--dark .footer__brand-social a:hover {
  color: #fff;
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
}
/* Icons are geometrically centered, but these thin-line glyphs read slightly
   low inside the roomy circle — a 1px upward optical nudge balances them. */
.footer--dark .footer__brand-social svg { display: block; transform: translateY(-1px); }
.footer--dark .footer__col h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin: 0 0 var(--gap);
}
.footer--dark .footer__col ul li { margin-bottom: var(--space-3); }
.footer--dark .footer__col a { color: #aaa; font-size: 14px; transition: color .2s; }
.footer--dark .footer__col a:hover { color: #fff; }
.footer--dark .footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #777;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.footer--dark .footer__bottom a { color: #aaa; }
.footer--dark .footer__bottom a:hover { color: #fff; }

@media (max-width: 1280px) {
  .split-hero__title { font-size: 78px; }
  .section-head h2 { font-size: 48px; }
  .contact-band__title { font-size: 52px; }
}
@media (max-width: 1024px) {
  .split-hero { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--section-y-md) var(--gap); }
  .split-hero__text { padding: 0; }
  .split-hero__title { font-size: 64px; }
  .split-hero__images { grid-template-rows: auto auto; }
  .products--five { grid-template-columns: repeat(3, 1fr); }
  .popular__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-band { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--section-y-md) var(--gap); }
  .contact-band__copy { padding-left: 0; }
  .contact-band__title { font-size: 44px; }
  .footer--dark .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 767px) {
  .split-hero__title { font-size: 50px; }
  .split-hero__sub { font-size: 20px; }
  .section-head h2 { font-size: 38px; }
  .products--five { grid-template-columns: 1fr 1fr; }
  .popular__grid { grid-template-columns: 1fr 1fr; gap: var(--gap) var(--space-4); }
  .contact-band__title { font-size: 36px; }
  .footer--dark .footer__cols { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-7); }
  .footer--dark .footer__bottom { flex-direction: column; text-align: center; }
}

/* Blog hidden for now — may bring back later */
.menu-item-41,
.menu-item-8003 { display: none !important; }

/* ---------- Theme overrides (load after Valeska/Elementor) ---------- */

/* Hero mandala: sit behind the text as a watermark, keep text legible */
.qodef-offset-image-appear-animation--yes .qodef-offset-image-holder {
  z-index: 0 !important;
}
.qodef-offset-image-appear-animation--yes .qodef-offset-image-wrapper,
.qodef-offset-image-appear-animation--yes.qodef-appeared .qodef-offset-image-wrapper {
  opacity: 0.7;
}
/* Hero mandala section: grow it so the larger mandala fits below the navbar,
   clip anything that would otherwise bleed up under the transparent header,
   force the mandala to true center (overrides JS-injected top:55%), and
   vertically center the text column so it lands inside the mandala. */
.elementor-element-34d3794 {
  position: relative;
  overflow: hidden;
  min-height: 820px;
  display: flex;
  align-items: center;
}
.elementor-element-34d3794 > .elementor-container {
  width: 100%;
}
.elementor-element-34d3794 .qodef-offset-image-holder {
  top: 50% !important;
  left: 50% !important;
}
.qodef-offset-image-wrapper img {
  /* Source PNG is 300×300 — capping keeps softness in check */
  width: clamp(500px, 52vw, 640px);
  height: auto;
  max-width: none;
}
@media (max-width: 768px) {
  .elementor-element-34d3794 { min-height: 640px; }
  .qodef-offset-image-wrapper img { width: clamp(360px, 86vw, 480px); }
}
.qodef-offset-image-appear-animation--yes > .elementor-container,
.qodef-offset-image-appear-animation--yes .elementor-column,
.qodef-offset-image-appear-animation--yes .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}

/* Text-selection highlight: neutral standard, not the accent */
::selection { background: rgba(0, 0, 0, .2); color: inherit; }
::-moz-selection { background: rgba(0, 0, 0, .2); color: inherit; }

/* Back-to-top — fully self-contained. The theme's base styles for this button
   live in valeska-core.min.css, which is NOT loaded on these pages (only its
   JS is), so the box size, flex centering, chevron fill:none and show-on-scroll
   are all defined here. A solid slate-blue accent circle with a white arrow,
   matching the site's filled buttons. */
#qodef-back-to-top .qodef-back-to-top-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(246, 232, 234, 0.82);   /* --color-pink, icey translucent */
  border: 0;
  border-radius: 50%;
  color: #D89AA3;   /* soft, light pink chevron */
  box-shadow: 0 10px 28px rgba(15, 15, 18, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, color .2s ease;
}
#qodef-back-to-top:hover .qodef-back-to-top-icon {
  background-color: rgba(252, 246, 247, 0.92);   /* much lighter, near-white pink */
  color: #D89AA3;
}
/* The chevron is an open polyline — render it as a stroked outline (not a
   filled triangle) and lift it 1px so it reads optically centered. */
#qodef-back-to-top .qodef-back-to-top-icon svg {
  display: block;
  width: 16px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-1px);
}

/* Subscribe popup: disabled — moved to a static section on the contact page */
#qodef-subscribe-popup-modal { display: none !important; }

/* Footer: light text gets a barely-there cool-white tint (version of accent) */
#qodef-page-footer .widget a:hover,
#qodef-page-footer .widget .qodef-widget-title a:hover,
#qodef-page-footer .widget_icl_lang_sel_widget .wpml-ls-legacy-list-horizontal ul li a,
#qodef-page-footer .widget_icl_lang_sel_widget .wpml-ls-legacy-list-horizontal ul li a:hover,
#qodef-page-footer .widget_icl_lang_sel_widget .wpml-ls-legacy-list-vertical ul li a,
#qodef-page-footer .widget_icl_lang_sel_widget .wpml-ls-legacy-list-vertical ul li a:hover {
  color: #F5F9FB;
}
#qodef-page-footer-top-area .widget a,
#qodef-page-footer-top-area .widget p {
  color: rgba(245, 249, 251, .55);
}

/* Footer mandala: shrink the watermark and fade it so the widget columns sit forward */
#qodef-page-footer-top-area-inner {
  background-image: none !important;
  position: relative;
}
#qodef-page-footer-top-area-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/mandala-white.png);
  background-position: right 90%;
  background-repeat: no-repeat;
  background-size: 420px auto;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
#qodef-page-footer-top-area-inner > * {
  position: relative;
  z-index: 1;
}

/* ---------- Valeska accent bridge ----------
   The Valeska theme hard-codes #ddd9ca on a few visible surfaces. Re-point
   the ones that actually appear on this site at --color-accent. */
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
textarea {
  border-color: var(--color-input-border);
}
#qodef-page-footer-top-area .widget .qodef-widget-title,
#qodef-page-footer .widget .qodef-widget-title {
  color: var(--color-accent) !important;
}

/* ===================================================================
   TEMPORARY OVERRIDES — added June 2026
   To restore the announcement bar and/or the Shop, delete this block.
   =================================================================== */

/* 1) Hide the WordPress legacy top-area strip — the new lightweight `.topbar`
   (floating glass pill) is the supported announcement bar now. */
#qodef-top-area {
  display: none !important;
}

/* 2) Hide "Shop" from navigation (desktop + mobile main menus) */
li.menu-item:has(> a[href="shop.html"]),
li.menu-item:has(> a[href="../shop.html"]) {
  display: none !important;
}

/* 2b) Hide the header shop/cart icon (links to shop.html) */
.qodef-woo-side-area-cart,
.qodef-m-opener[href="shop.html"],
.qodef-m-opener[href="../shop.html"] {
  display: none !important;
}

/* ===================================================================
   FOOTER HARDENING
   about.html still loads the full legacy Valeska/WordPress theme CSS,
   which leaks into the new footer (restyles its headings, links, lists
   and spacing). These rules force the footer to render identically to
   the clean pages regardless of the surrounding theme stylesheets.
   Safe to keep on every page; only matters where the theme CSS is present.
   =================================================================== */
.footer.footer--dark {
  background: #111 !important;
  color: #aaa !important;
  padding: 90px var(--gutter) 30px !important;
  font-family: var(--font-sans) !important;
}
.footer.footer--dark .footer__cols {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr !important;
  gap: 48px !important;
  text-align: left !important;
}
.footer.footer--dark .footer__brand-block .logo {
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  line-height: 1.1 !important;
  color: #fff !important;
  /* Pull the cap-top up so it lines up with the INFO heading's cap-top — the
     larger serif's line-height leading otherwise drops it ~4px lower. */
  margin: -4px 0 var(--space-4) !important;
}
.footer.footer--dark .footer__brand-block p {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #888 !important;
  max-width: 280px !important;
  margin: 0 !important;
}
/* Copyright now sits under the social icons; give it a little breathing room
   and a quieter tone than the brand description above it. */
.footer.footer--dark .footer__brand-block .footer__copyright {
  margin: var(--space-5) 0 0 !important;
  font-size: 13px !important;
  color: #777 !important;
}
/* INFO column heading mirrors the "Sonala Creations" wordmark — same serif
   face, weight and scale, so the two columns read as a matched pair. */
.footer.footer--dark .footer__col h4 {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  color: #fff !important;
  margin: -4px 0 var(--space-5) !important;
}
.footer.footer--dark .footer__col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer.footer--dark .footer__col ul li {
  margin: 0 0 var(--space-3) !important;
  padding: 0 !important;
  list-style: none !important;
}
.footer.footer--dark .footer__col a,
.footer.footer--dark .footer__bottom a {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #aaa !important;
}
.footer.footer--dark .footer__col a:hover,
.footer.footer--dark .footer__bottom a:hover {
  color: #fff !important;
}
.footer.footer--dark .footer__bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  font-size: 13px !important;
  color: #777 !important;
}
.footer.footer--dark .footer__bottom p {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

@media (max-width: 1280px) {
  .footer.footer--dark .footer__cols { grid-template-columns: 1fr 1fr !important; gap: var(--space-6) !important; }
}
@media (max-width: 680px) {
  .footer.footer--dark .footer__cols { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .footer.footer--dark .footer__bottom { flex-direction: column !important; text-align: center !important; }
}

/* ===================================================================
   SPLIT HERO (homepage) — text left, overlapping image pair right,
   with the front image cycling as a crossfade slider (js/main.js).
   =================================================================== */
.hero-split {
  position: relative;
  background: #fff;
  padding: 72px var(--gutter) 24px;
  overflow: hidden;
}
/* Mandala accent in the top-left background */
.hero-split::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  width: 720px;
  height: 720px;
  background: url("../images/mandala-accent.png?v=4") no-repeat top left;
  background-size: contain;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.hero-split__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

/* Left — text */
.hero-split__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 var(--gap);
}
.hero-split__title {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 90px;
  line-height: 0.9em;
  color: var(--color-heading);
  margin: 0;
}
/* Hero title is upright in every locale — force any stray inline element
   (i, em, cite, span, etc.) back to normal so a translated `<i>` wrap can
   never sneak italic into the headline. */
.hero-split__title,
.hero-split__title * { font-style: normal !important; }

/* Right — overlapping media */
.hero-split__media {
  position: relative;
  min-height: 480px;
}
.hero-split__back {
  position: relative;
  width: 78%;
  margin-left: auto;
  aspect-ratio: 13 / 14;
  overflow: hidden;
}
.hero-split__back img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-split__front {
  position: absolute;
  left: 0;
  bottom: 7%;
  width: 52%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f4f4f0;
}
.hero-split__front img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-split__front img.is-active { opacity: 1; }

/* Homepage: float a transparent navbar over the hero so the mandala accent
   reads all the way to the top edge instead of being capped by the white bar. */
body.home .header {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}
/* Once scrolled past the hero, fade in a frosted-glass surface for legibility. */
body.home.is-scrolled .header {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 30px rgba(15, 15, 18, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Fallback where backdrop-filter is unsupported: near-solid white. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home.is-scrolled .header { background: rgba(255, 255, 255, 0.92); }
}
/* The slide-out mobile nav and its backdrop are position:fixed children of
   .header. Once scrolled, .header gains a backdrop-filter (the frosted pill),
   which makes it the containing block for those fixed descendants — clipping
   the drawer to the short header bar (stray white sliver when closed, links
   spilling out of a floating box when open). On phones, where the drawer
   lives, render the scrolled header with a solid surface and no backdrop
   filter so the fixed nav/backdrop resolve against the viewport. Placed after
   the home/standard scrolled-header rules so it wins on equal specificity. */
@media (max-width: 767px) {
  body.is-scrolled .header,
  body.home.is-scrolled .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }
}

body.home #qodef-page-outer { margin-top: 0 !important; }
body.home .hero-split { padding-top: calc(var(--header-height) + 88px); }
/* Drop the accent's top bleed so its upper arc clears the (now transparent) bar. */
body.home .hero-split::before { top: 0; }

@media (max-width: 1024px) {
  .hero-split { padding-top: 56px; }
  .hero-split__title { font-size: 68px; }
  .hero-split__inner { gap: var(--space-7); }
  .hero-split__media { min-height: 420px; }
}
@media (max-width: 768px) {
  .hero-split { padding-top: 48px; }
  .hero-split__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-split__text { text-align: center; }
  .hero-split__media { width: 100%; max-width: 460px; margin: 0 auto; min-height: 440px; }
}
@media (max-width: 480px) {
  .hero-split__title { font-size: 46px; }
  .hero-split__media { min-height: 360px; }
}

/* ===================================================================
   TOP-BAR NAVIGATION (risevoice.media concept) — June 2026
   Transparent over the hero, turns solid white on scroll, logo left /
   links + CTA pill right. The CTA pill is injected by js/main.js.
   =================================================================== */

/* Use our own scroll behaviour; hide the theme's duplicate sticky bar. */
.qodef-header-sticky { display: none !important; }

/* Floating glass navbar — detached from the edges with a frosted, mirror-like
   finish (translucent white + backdrop blur + a bright top highlight). */
#qodef-page-header {
  position: sticky;
  top: 14px;
  z-index: 200;
  /* The theme sets the header to display:inline-block, which shrink-wraps it
     to its content once our width:auto removes the theme's width:100%. Force
     block so the bar fills the row on every page (home escapes this via its
     fixed left/right insets); the menu then right-aligns like the homepage. */
  display: block;
  width: auto;
  margin: 14px clamp(12px, 3vw, 40px) 0;
  border-radius: 20px;
  /* At the top of the page the bar is fully transparent and fades into the
     hero/background. The frosted-glass surface only appears once scrolled
     (see body.is-scrolled below). */
  background-color: transparent !important;
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    background-color .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    -webkit-backdrop-filter .3s ease,
    backdrop-filter .3s ease;
}

/* Below 1024px the Valeska mobile header (#qodef-page-mobile-header) takes over.
   Our base `display:block` above (needed so the desktop pill fills the row) loads
   after the theme and was overriding the theme's own `display:none` at this
   breakpoint, leaving the desktop bar stuck on phones beside the mobile header.
   Re-assert the collapse so only the mobile header shows. */
@media (max-width: 1024px) {
  #qodef-page-header { display: none !important; }
}

/* Homepage: float over the hero (fixed) instead of sitting in flow.
   Inset with explicit left/right + width:auto so the box can't over-constrain
   and spill past the right edge. */
body.home #qodef-page-header {
  position: fixed;
  top: 14px;
  left: clamp(12px, 3vw, 40px);
  right: clamp(12px, 3vw, 40px);
  width: auto;
  margin: 0;
}
/* Keep header text dark in every state (the surfaces behind it are light). */
body.home #qodef-page-header .qodef-header-logo-link,
body.home #qodef-page-header .qodef-menu-item-text {
  color: var(--color-heading) !important;
}

/* Once scrolled, the frosted-glass surface fades in for legibility over content. */
body.is-scrolled #qodef-page-header {
  background-color: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 10px 34px rgba(15, 15, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* On the light glass pill the text must be dark — override any light skin
   (e.g. About's qodef-skin--light) once scrolled. */
body.is-scrolled #qodef-page-header .qodef-header-logo-link,
body.is-scrolled #qodef-page-header .qodef-menu-item-text {
  color: var(--color-heading) !important;
}

/* Light-skin header (e.g. About) floats over a dark band, so the language
   picker must read white like the adjacent nav links — then flip back to dark
   on the scrolled glass pill, matching .qodef-menu-item-text above. */
.qodef-skin--light .sonala-lang__toggle {
  color: #fff !important;
}
body.is-scrolled #qodef-page-header .sonala-lang__toggle {
  color: var(--color-heading) !important;
}

/* Graceful fallback where backdrop-filter is unsupported: solid-ish white,
   but only once scrolled so the transparent top state is preserved. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.is-scrolled #qodef-page-header { background-color: rgba(255, 255, 255, 0.92) !important; }
}

/* Now that the bar is inset, ease the inner padding so the nav stays balanced. */
#qodef-page-header-inner {
  padding-left: clamp(20px, 3vw, 48px) !important;
  padding-right: clamp(20px, 3vw, 48px) !important;
}

/* ===================================================================
   HEADER LAYOUT — decoupled from Valeska (Phase 3, Step 1)
   Reproduces the inner-layout primitives the header still borrowed from
   themes/valeska + valeska-core (flex row, nav typography, logo, mobile
   header, the 1024px swap, back-to-top position). Added while those sheets
   are still loaded, so it is a visual no-op today; it becomes the source
   once the theme <link>s are dropped. The pill/sticky/glass shell lives
   above (~line 1631). Values mirror Valeska's effective (post-inline) ones.
   =================================================================== */

/* Inner row: logo left, nav + widgets right. (h-padding set above.) */
#qodef-page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Textual logo */
#qodef-page-header .qodef-header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.025em;
  text-transform: uppercase;
  color: var(--color-heading);
  text-decoration: none;
}

/* Desktop nav: right-aligned flex row */
.qodef-header-navigation { height: 100%; margin-left: auto; }
.qodef-header-navigation > ul {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.qodef-header-navigation > ul > li { height: 100%; margin: 0 20px; }
.qodef-header-navigation > ul > li:first-child { margin-left: 0; }
.qodef-header-navigation > ul > li:last-child  { margin-right: 0; }
.qodef-header-navigation > ul > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.22em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-heading);
  text-decoration: none;
}

/* Animated underline under each menu item (hover + current page) */
.qodef-menu-item-text { position: relative; }
.qodef-menu-item-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .2s ease-out;
}
.qodef-header-navigation > ul > li > a:hover .qodef-menu-item-text::before,
.qodef-header-navigation > ul > li.current-menu-item > a .qodef-menu-item-text::before {
  width: calc(100% - 0.1em);
}

/* Widget holder (language switcher / search opener) */
#qodef-page-header .qodef-widget-holder {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 40px;
}
#qodef-page-header .qodef-widget-holder .widget { margin: 0 0 0 20px; }

/* Back-to-top — position, size and show-on-scroll (icon styling lives above).
   Hidden by default; the theme JS toggles .qodef--on / .qodef--off on scroll. */
#qodef-back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 48px;
  height: 48px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
#qodef-back-to-top.qodef--on { opacity: 1; visibility: visible; transition: opacity .3s ease; }
#qodef-back-to-top.qodef--off { opacity: 0; visibility: hidden; }

/* Mobile header layout + the desktop/mobile swap at 1024px */
#qodef-page-mobile-header { position: relative; display: none; height: 70px; z-index: 100; }
#qodef-page-mobile-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding: 0 var(--space-7);
}
#qodef-page-mobile-header .qodef-mobile-header-logo-link {
  display: flex;
  align-items: center;
  height: 70px;
  margin-right: auto;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 25px;
  text-transform: uppercase;
  color: var(--color-heading);
  text-decoration: none;
}
@media (max-width: 1024px) {
  #qodef-page-mobile-header { display: block; }
}

/* ===================================================================
   BOTANICAL PAGE-TITLE BACKGROUNDS
   Adds an atmospheric photo behind page-title bands, with a dark
   overlay so the heading stays legible in white. Paths are relative
   to this stylesheet (/css/), so ../images works on every page.
   =================================================================== */
.page-title.has-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 0;
  color: #fff;
  padding-top: var(--section-y-lg);
  padding-bottom: var(--section-y-md);
}
.page-title.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,18,0.62) 0%, rgba(15,15,18,0.78) 100%);
  z-index: 0;
}
.page-title.has-bg > * { position: relative; z-index: 1; }
.page-title.has-bg h1 { color: #fff; }
.page-title.has-bg .info__lead { color: #fff; }
.page-title.has-bg .subtitle { color: rgba(255,255,255,0.92); }
.page-title.has-bg .crumbs { color: rgba(255,255,255,0.78); }
.page-title.has-bg .crumbs a { color: rgba(255,255,255,0.92); }
.page-title.has-bg .crumbs a:hover { color: #fff; }

.page-title.is-rings     { background-image: url(../images/backgrounds/bg-rings.jpg); }
.page-title.is-earrings  { background-image: url(../images/backgrounds/bg-earrings.jpg); }
.page-title.is-necklaces { background-image: url(../images/backgrounds/bg-necklaces.jpg); }
.page-title.is-pendants  { background-image: url(../images/backgrounds/bg-pendants.jpg); }
.page-title.is-bracelets { background-image: url(../images/backgrounds/bg-bracelets.jpg); }

/* Info pages — atmospheric (non-category) backdrops behind the title */
.page-title.is-faq      { background-image: url(../images/backgrounds/bg-contact-band.jpg); }
.page-title.is-shipping { background-image: url(../images/backgrounds/bg-hero.jpg); }
.page-title.is-care     { background-image: url(../images/backgrounds/bg-about.jpg); }
.page-title.is-gift     { background-image: url(../images/backgrounds/bg-latest.jpg); }
.page-title.is-privacy  { background-image: url(../images/backgrounds/bg-about.jpg); }

/* About page title band (legacy theme markup) */
.qodef-page-title.qodef--has-image {
  background-image:
    linear-gradient(180deg, rgba(15,15,18,0.38) 0%, rgba(15,15,18,0.58) 100%),
    url(../images/backgrounds/bg-about.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.qodef-page-title.qodef--has-image .qodef-m-title,
.qodef-page-title.qodef--has-image .qodef-m-subtitle { color: #fff !important; }
/* Band layout (was Valeska's): centre the title in the band. Height (605px) comes
   from the inline valeska-style block; background from the rule above. */
.qodef-page-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.qodef-page-title .qodef-m-inner { width: 100%; }
.qodef-page-title .qodef-m-title { margin: 0; }

/* ===================================================================
   CONSISTENT EDGE PADDING — tablet & mobile
   Every full-bleed band gets the SAME horizontal page gutter once the
   viewport drops below 1024px, so section edges line up instead of
   drifting (some bands used the 3.95% `--gutter`, others a fixed 24px,
   others 16px). `--page-x` remaps per breakpoint: 32 → 24 → 16.
   `padding-inline` overrides only the left/right axis, leaving each
   band's vertical rhythm intact. Placed last so it wins source order
   over the scattered per-band responsive paddings above.
   =================================================================== */
@media (max-width: 1024px) {
  .container,
  .header__inner,
  .hero,
  .hero-split,
  .split-hero,
  .page-title,
  .process__copy,
  .process--reverse .process__copy,
  .newsletter,
  .about-intro,
  .about-belief,
  .popular,
  .contact-band,
  .footer,
  .footer--dark {
    padding-inline: var(--page-x);
  }
}

/* ===================================================================
   INFO / CONTENT PAGES  (FAQ · Shipping · Care · Gift Cards)
   A single narrow reading column, token-driven, matching the site's
   serif/sans rhythm. The page-title band and footer are shared markup.
   =================================================================== */
.info { max-width: 760px; margin: 0 auto; }

/* Italic serif intro, centred — mirrors the .lede voice used elsewhere */
.info__lead {
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-text);
  text-align: center;
  margin: 0 auto var(--space-9);
  max-width: 620px;
}

/* Prose section: a quiet serif heading + body copy */
.info__block { margin-bottom: var(--space-8); }
.info__block:last-child { margin-bottom: 0; }
.info__block h2 {
  font-size: 30px;
  line-height: 1.05em;
  font-weight: 400;
  margin: 0 0 var(--space-4);
}
.info__block p { margin: 0 0 var(--space-4); }
.info__block p:last-child { margin-bottom: 0; }
.info__block ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  list-style: none;
}
.info__block li {
  position: relative;
  margin-bottom: var(--space-3);
  line-height: 1.4em;
}
.info__block li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5));
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

/* FAQ — native <details> accordion, no JS, chevron rotates on open */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__item:first-child { border-top: 1px solid var(--color-line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-heading);
  transition: color .2s ease-out;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--color-burgundy); }
.faq__item summary:focus-visible {
  outline: var(--btn-focus-ring);
  outline-offset: var(--btn-focus-offset);
}
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(225deg); margin-top: 2px; }
.faq__a { margin: 0; padding: 0 0 var(--space-6); max-width: 60ch; }

/* Inline links within info/faq prose */
.info__block a,
.faq__a a {
  color: var(--color-burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info__block a:hover,
.faq__a a:hover { color: var(--color-accent-deep); }

/* Gift-card denomination chips */
.info__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.info__values li {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-input-border);
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--color-heading);
}
.info__values li::before { content: none; }

.info__cta { margin-top: var(--space-7); }

@media (max-width: 767px) {
  .info__lead { font-size: 21px; }
  .info__block h2 { font-size: 26px; }
  .faq__item summary { font-size: 21px; }
}


/* ===================================================================
   Universal header — neutralise the legacy Valeska "content behind
   transparent header" offset on pages that still use the qodef page
   wrappers (index, about). With the solid sticky .header in normal
   flow, content must start below it, not under it.
   =================================================================== */
#qodef-page-outer { margin-top: 0 !important; }

/* ===================================================================
   SHOP "COMING SOON" MODAL
   Built and opened by js/main.js when any shop.html link is clicked.
   Dark dialog (matching the coming-soon page) over a dimmed backdrop.
   =================================================================== */
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.shop-modal[hidden] { display: none; }

.shop-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 14, 16, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
}
.shop-modal.is-open .shop-modal__backdrop { opacity: 1; }

.shop-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  overflow: hidden;                 /* clip the video to the rounded corners */
  background: var(--color-dark, #191919);
  color: #e8e6db;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.shop-modal.is-open .shop-modal__dialog {
  opacity: 1;
  transform: none;
}

/* Full-bleed background video + darkening gradient (as on shop.html) */
.shop-modal__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-dark, #191919) url('../images/gate-poster.jpg') center / cover no-repeat;
}
.shop-modal__video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.shop-modal__video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.78) 100%);
}
.shop-modal__mandala {
  position: absolute;
  bottom: -70px;
  right: -70px;
  width: 220px;
  opacity: .07;
  z-index: 0;
  pointer-events: none;
}

.shop-modal__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 56px 44px 48px;
}
.shop-modal__logo {
  display: block;
  width: 150px;
  max-width: 55%;
  height: auto;
  margin: 0 auto 28px;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.shop-modal__eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: 12px;
  opacity: .85;
  margin: 0 0 18px;
  padding-left: .42em;
}
.shop-modal__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 5.5vw, 46px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 22px;
}
.shop-modal__lede {
  font-size: 15px;
  line-height: 1.7;
  opacity: .9;
  margin: 0 auto 36px;
  max-width: 400px;
}
.shop-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
/* Dark-surface buttons, matching shop.html's .cs-btn (uses the --btn-* tokens) */
.shop-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  padding: var(--btn-pad-top) var(--btn-pad-x) var(--btn-pad-bottom);
  border: var(--btn-border-width) solid rgba(232, 230, 219, 0.55);
  border-radius: var(--btn-radius);
  color: #e8e6db;
  background: transparent;
  transition: var(--btn-transition);
}
.shop-modal__btn:hover { background: #e8e6db; color: var(--color-dark); border-color: #e8e6db; }
.shop-modal__btn--primary { background: #fff; border-color: #fff; color: var(--color-dark); }
.shop-modal__btn--primary:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.shop-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(232, 230, 219, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: #e8e6db;
  opacity: .85;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease, border-color .2s ease;
}
.shop-modal__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.45); border-color: #e8e6db; }
.shop-modal__close:focus-visible { outline: 2px solid #e8e6db; outline-offset: 2px; }

@media (max-width: 520px) {
  .shop-modal__content { padding: 48px 24px 36px; }
  .shop-modal__actions { flex-direction: column; }
  .shop-modal__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-modal__backdrop,
  .shop-modal__dialog { transition: none; }
}

/* Keep the legacy Valeska wrapper from acting as a scroll container, which
   would break the sticky .header on pages that still use it. */
#qodef-page-wrapper { overflow: clip; }