/* ============================================================
   Jeunesse Anion — page-specific styles
   Ported from _reference/index-c.html (homepage / variant C)
   and _reference/product.html (single product PDP).
   Plus WordPress block integration + per-product accent system.
   ============================================================ */

/* ---------- WordPress integration resets ---------- */
.wp-site-blocks { overflow-x: clip; }
body { margin: 0; }
/* Drop WP's auto block-gap margin on flow layouts — this theme controls spacing
   via section padding + flex gaps. (Same selector/specificity as core's rule;
   custom.css loads after global styles, so this wins by source order.) */
:root :where(.is-layout-flow) > * { margin-block-start: 0; }
/* Our sections own their own gutter; neutralise default block padding. */
.jeunesse-section { padding-inline: var(--gutter); }
.jeunesse-section > .wrap,
.jeunesse-section > .wrap-narrow { margin-inline: auto; }

/* Optional wave separators referenced in the reference markup (no-op placeholders
   so the class hooks exist for future decorative tuning). */
.wave-sep { position: relative; }
.to-paper { }
.to-white { }

/* Per-product accent — set inline via --product-accent on the PDP root.
   Falls back to brand magenta. */
:root { --product-accent: var(--magenta); }

/* ====== VARIANT C – STRUCTURED / SHOP-FORWARD (HOMEPAGE) ====== */
.c-hero { padding-top: var(--section-space-s); padding-bottom: var(--section-space-m); }
.c-bento {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "msg msg img1 img1" "msg msg img2 buy";
  position: relative; z-index: 1;
}
.c-tile { border-radius: var(--r-lg); overflow: hidden; position: relative; min-height: 200px; }
.tile-msg {
  grid-area: msg; background: var(--paper); border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: var(--s-5);
}
.tile-msg h1 { font-family: var(--display); font-weight: 400; font-size: var(--text-hero-alt); line-height: 1.04; letter-spacing: -.01em; color: var(--ink); }
.tile-msg h1 .accent { color: var(--magenta); }
.tile-msg p { font-size: var(--text-lead-xs); line-height: 1.6; color: var(--slate); max-width: 42ch; }
.tile-msg .c-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
.tile-msg .c-ctas .btn { min-width: 180px; justify-content: center; }
@media (max-width: 460px) { .tile-msg .c-ctas { flex-direction: column; align-items: stretch; } .tile-msg .c-ctas .btn { width: 100%; } }
.tile-img1 { grid-area: img1; aspect-ratio: 4 / 3; }
.tile-img2 { grid-area: img2; aspect-ratio: 4 / 3; }
.tile-img1 img, .tile-img2 img { width: 100%; height: 100%; object-fit: cover; background: var(--blush); }
.c-tile .float-pill {
  position: absolute; left: var(--s-4); bottom: var(--s-4); background: rgba(255,255,255,.92);
  color: var(--ink); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 15px; border-radius: var(--r-pill);
}
.tile-buy {
  grid-area: buy; background: var(--magenta); color: #fff;
  padding: var(--s-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4);
}
.tile-buy .lbl { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.tile-buy strong { font-family: var(--display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.1; }
.tile-buy .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tile-buy .chips a { background: rgba(255,255,255,.16); color: #fff; font-size: var(--text-xs); font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); text-decoration: none; transition: background .2s ease; }
.tile-buy .chips a:hover { background: rgba(255,255,255,.3); }
.tile-buy .chips a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 960px) {
  .c-bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "msg msg" "img1 img1" "img2 buy"; }
}
@media (max-width: 600px) {
  .c-bento { grid-template-columns: 1fr; grid-template-areas: "msg" "img1" "img2" "buy"; }
  .c-tile { min-height: 220px; }
}

/* Sections */
.c-section { padding-block: var(--section-space-m); }
.c-section.tint:not([class*="texture-"]) { background: var(--paper); }
.c-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.c-head > div { display: flex; flex-direction: column; gap: var(--title-gap); }
.c-title { font-family: var(--display); font-weight: 400; font-size: var(--text-title-lg); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.c-body { font-size: var(--text-md); line-height: 1.7; color: var(--slate); max-width: 56ch; }

/* Why – bento (3 cards + 1 image tile) */
.c-why { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, 1fr); }
.c-feature {
  grid-column: span 1; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 34px); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.c-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.c-feature .num { font-family: var(--display); font-size: var(--text-xl); color: var(--magenta); }
.c-feature h3 { font-family: var(--display); font-weight: 400; font-size: var(--text-2xl2); line-height: 1.18; color: var(--ink); margin: var(--s-3) 0 var(--s-3); }
.c-feature p { font-size: var(--text-cap); line-height: 1.65; color: var(--slate); }
.c-why-img { grid-column: span 1; border-radius: var(--r-lg); overflow: hidden; background: var(--blush); min-height: 220px; }
.c-why-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .c-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .c-why { grid-template-columns: 1fr; } }

/* Products – the shop-forward grid */
.c-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.c-prod { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.c-prod:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.c-prod:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.c-prod .shot { position: relative; aspect-ratio: 1; background: var(--blush); overflow: hidden; }
.c-prod .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.c-prod:hover .shot img { transform: scale(1.05); }
.c-prod .pill { position: absolute; top: var(--s-3); left: var(--s-3); background: rgba(255,255,255,.92); color: var(--ink); font-size: var(--text-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); }
.c-prod .body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.c-prod .cat { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); font-weight: 700; }
.c-prod h3 { font-family: var(--display); font-weight: 400; font-size: var(--text-xl2); line-height: 1.2; color: var(--ink); }
.c-prod .tagline { font-size: var(--text-cap); color: var(--slate); line-height: 1.55; flex: 1; }
.c-prod .view { font-size: var(--text-sm); font-weight: 600; color: var(--ink); display: inline-flex; gap: 7px; margin-top: var(--s-2); transition: gap .25s var(--ease), color .2s; }
.c-prod:hover .view { color: var(--magenta); gap: 11px; }
/* Accent stripe driven by per-product colour */
.c-prod { border-top: 3px solid transparent; }
.c-prod[style*="--product-accent"] { border-top-color: var(--product-accent); }
.c-prod[style*="--product-accent"] .cat { color: var(--product-accent); }
@media (max-width: 860px) { .c-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .c-products { grid-template-columns: 1fr; } }

/* Placeholder (no image yet) — fills its aspect-ratio container */
.is-placeholder {
  width: 100%; height: 100%; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; padding: var(--s-4);
  background: var(--cloud);
  color: var(--mist); font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.is-placeholder .ph-size { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .8; }
.pdp-main .is-placeholder, .pdp-box.media .is-placeholder { min-height: 220px; }

/* Anion – wide banner tile */
.c-anion { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--cloud); position: relative; z-index: 1; }
/* Contrast rule: on an already off-white (tinted) section, the card flips to
   pure white so it still reads as a distinct surface. */
.c-section.tint .c-anion { background: var(--white); }
.c-anion .copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-5); }
.c-anion .copy h2 { font-family: var(--display); font-weight: 400; font-size: var(--text-title); line-height: 1.1; color: var(--ink); }
.c-anion .copy p { font-size: var(--text-md); line-height: 1.7; color: var(--slate); max-width: 46ch; }
.c-anion .media { background: var(--blush); min-height: 320px; }
.c-anion .media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .c-anion { grid-template-columns: 1fr; } .c-anion .media { order: -1; min-height: 260px; } }

/* Where to buy band */
.c-buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.c-buy-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.c-buy-figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 3 / 2; background: var(--blush); }
.c-buy-figure img { width: 100%; height: 100%; object-fit: cover; }
.c-buy .retailers { margin-top: 0; }
@media (max-width: 760px) { .c-buy-grid { grid-template-columns: 1fr; } }

/* Brand story teaser — square image left, content right */
.c-story { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.c-story-media {
  margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1;
  background: var(--blush); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.c-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-story-media .is-placeholder { min-height: 100%; }
.c-story-content { display: flex; flex-direction: column; gap: var(--s-4); max-width: 56ch; }
.c-story-content .btn { align-self: flex-start; margin-top: var(--s-2); }
@media (max-width: 760px) {
  .c-story { grid-template-columns: 1fr; gap: var(--s-6); }
  .c-story-media { aspect-ratio: 16 / 10; }
}

/* ====== SINGLE PRODUCT PAGE (PDP) ====== */
.pdp { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 8vw, 104px); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--text-sm); color: var(--mist); margin-bottom: var(--s-7); }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--magenta); }
.breadcrumb a:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 3px; }
.breadcrumb .sep { color: var(--mist); }
.breadcrumb [aria-current] { color: var(--ink); }

.pdp-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pdp-gallery { display: flex; flex-direction: column; gap: var(--s-4); }
.pdp-main { border-radius: var(--r-lg); overflow: hidden; background: var(--blush); aspect-ratio: 1; box-shadow: var(--shadow-sm); }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.pdp-thumb { border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--blush); aspect-ratio: 1; cursor: pointer; padding: 0; transition: border-color .2s ease; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { border-color: var(--magenta-40); }
.pdp-thumb.active { border-color: var(--product-accent); }
.pdp-thumb:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.pdp-info { position: sticky; top: 98px; display: flex; flex-direction: column; gap: var(--s-5); }
.pdp-cat { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--product-accent); line-height: 1; }
.pdp-title { font-family: var(--display); font-weight: 400; font-size: var(--text-title-xl); line-height: 1.06; letter-spacing: -.01em; color: var(--ink); }
.pdp-titlewrap { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp-tagline { font-size: var(--text-lead); color: var(--slate); }
.pdp-size { display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start; background: var(--cloud); color: var(--ink); font-size: var(--text-sm); font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); }
.pdp-benefits { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.pdp-benefits li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--text-body); color: var(--slate); line-height: 1.5; }
.pdp-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--magenta-20); color: var(--product-accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pdp-check svg { width: 14px; height: 14px; }
/* Per-feature icon slot: real icon, or a greyed "icon" placeholder (client option). */
.pdp-ficon { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.pdp-ficon img { width: 100%; height: 100%; object-fit: contain; }
.pdp-ficon.is-icon-ph {
  background: var(--cloud); border: 1px dashed var(--magenta-40); color: var(--mist);
  font-size: var(--text-3xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pdp-benefit-text { padding-top: 6px; }

/* Card-level icon slot (feature/value/option cards): icon, or greyed "icon" placeholder. */
.feature-icon { width: 48px; height: 48px; border-radius: var(--r-md); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-3); }
.feature-icon img { width: 100%; height: 100%; object-fit: contain; }
.feature-icon.is-icon-ph {
  background: var(--cloud); border: 1px dashed var(--magenta-40); color: var(--mist);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pdp-ctas { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp-ctas .btn { width: 100%; justify-content: center; }
.pdp-ctas .pdp-row { display: flex; gap: var(--s-3); }
.pdp-ctas .pdp-row .btn { flex: 1; }
.pdp-find { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.pdp-find .btn-ghost { padding: 0; }
.pdp-note { font-size: var(--text-sm); color: var(--mist); text-align: center; }
@media (max-width: 860px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-info { position: static; }
}

.pdp-section { padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
.pdp-section.paper { background: var(--paper); }
.pdp-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--product-accent); line-height: 1; }
.pdp-h2 { font-family: var(--display); font-weight: 400; font-size: var(--text-title); line-height: 1.1; color: var(--ink); }

.pdp-bento {
  display: grid; gap: var(--s-6); grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "about about about media1 media1 media1"
    "specs specs materials materials media2 media2";
}
.pdp-box { border-radius: var(--r-lg); }
.pdp-box.pad { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--s-4); }
.pdp-box.tint { background: var(--cloud); }
.pdp-box.white { background: #fff; border: 1px solid var(--line); }
.pdp-box.media { overflow: hidden; background: var(--blush); min-height: 220px; }
.pdp-box.media img { width: 100%; height: 100%; object-fit: cover; }
.pdp-box p { font-size: var(--text-md); line-height: 1.7; color: var(--slate); }
.pdp-box .head { display: flex; flex-direction: column; gap: var(--s-3); }
.box-about { grid-area: about; }
/* "About this pad" box fills with the product's brand colour; text flips light. */
.pdp-box.box-about { background: var(--product-accent); }
.pdp-box.box-about .pdp-eyebrow { color: #fff; opacity: .82; }
.pdp-box.box-about .pdp-h2 { color: #fff; }
.pdp-box.box-about p { color: rgba(255, 255, 255, .92); }
.box-specs { grid-area: specs; }
.box-materials { grid-area: materials; }
.box-media1 { grid-area: media1; }
.box-media2 { grid-area: media2; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-body); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.spec-table th { color: var(--mist); font-weight: 600; width: 45%; }
.spec-table td { color: var(--ink); font-weight: 500; }
.materials { font-size: var(--text-md); line-height: 1.8; color: var(--slate); }
@media (max-width: 900px) {
  .pdp-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "about about" "media1 media1" "specs materials" "media2 media2"; }
}
@media (max-width: 560px) {
  .pdp-bento { grid-template-columns: 1fr; grid-template-areas: "about" "media1" "specs" "materials" "media2"; }
}

.faq { width: 100%; max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: var(--s-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-family: var(--body); font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.faq-q:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: var(--r-sm); }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--magenta-20); color: var(--product-accent); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); line-height: 1; transition: transform .3s var(--ease), background .2s ease, color .2s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--product-accent); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { padding-bottom: var(--s-5); font-size: var(--text-body); line-height: 1.7; color: var(--slate); max-width: 64ch; }
.pdp-faq { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 48px); }
.pdp-faq .head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); }
.pdp-faq .faq { width: 100%; }

.pdp-rev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-6); margin-bottom: clamp(28px, 4vw, 48px); }
.pdp-rev-titleblock { display: flex; flex-direction: column; gap: var(--s-4); }
.pdp-rev-summary { display: flex; align-items: center; gap: var(--s-4); }
.pdp-rev-score { font-family: var(--display); font-weight: 400; font-size: var(--text-stat); color: var(--ink); line-height: 1; }
.pdp-rev-of { display: flex; flex-direction: column; gap: 5px; }
.pdp-stars { color: var(--product-accent); letter-spacing: 2px; font-size: var(--text-md); line-height: 1; }
.pdp-stars .muted { color: var(--magenta-20); }
.pdp-rev-count { font-size: var(--text-sm); color: var(--mist); }
.pdp-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.pdp-review { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: var(--s-3); }
.pdp-review .pdp-stars { font-size: var(--text-cap); }
.pdp-review p { font-size: var(--text-body); line-height: 1.65; color: var(--ink); }
.pdp-review cite { font-style: normal; font-size: var(--text-sm); color: var(--mist); }
@media (max-width: 860px) { .pdp-reviews-grid { grid-template-columns: 1fr; } .pdp-rev-head { align-items: flex-start; } }

.pdp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.pdp-card { text-decoration: none; color: inherit; display: block; }
.pdp-card .shot { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--blush); aspect-ratio: 1; margin-bottom: var(--s-4); }
.pdp-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pdp-card:hover .shot img { transform: scale(1.05); }
.pdp-card .shot .pill { position: absolute; top: var(--s-4); left: var(--s-4); background: rgba(255,255,255,.92); color: var(--ink); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-pill); }
.pdp-card .cat { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); font-weight: 700; }
.pdp-card h3 { font-family: var(--display); font-weight: 400; font-size: var(--text-2xl); color: var(--ink); margin: var(--s-2) 0 var(--s-2); }
.pdp-card .view { font-size: var(--text-cap); font-weight: 600; color: var(--ink); display: inline-flex; gap: 7px; transition: gap .25s var(--ease), color .2s ease; }
.pdp-card:hover .view { color: var(--magenta); gap: 11px; }
.pdp-cards-head { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 760px) { .pdp-cards { grid-template-columns: 1fr; max-width: 420px; } }

/* ====== Field-driven designed pages (about / contact / anion) ====== */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* Prose block inside a designed section */
.section-prose { display: flex; flex-direction: column; gap: var(--s-5); max-width: 68ch; }
.section-prose p { font-size: var(--text-lg); line-height: 1.8; color: var(--slate); }

/* "Our story" two-column: image left, copy right */
.story-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.story-media {
  margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1;
  background: var(--blush); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-copy { display: flex; flex-direction: column; gap: var(--s-4); }
.story-copy .section-prose { max-width: 56ch; }
@media (max-width: 860px) {
  .story-split { grid-template-columns: 1fr; gap: var(--s-6); }
  .story-media { order: -1; aspect-ratio: 16 / 10; }
}

/* ---- Two-column hero with overlapping quote (About / Anion / Contact) ---- */
.page-hero-quote {
  position: relative; overflow: hidden;
  padding-top: clamp(36px, 5vw, 80px);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.page-hero-quote > .wrap { position: relative; z-index: 1; }
/* Colour glow radiates from the centre of the hero (overrides the corner blobs). */
.page-hero-quote .blob-1 {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
}
.page-hero-quote .blob-2 {
  top: 50%; left: 56%; right: auto; bottom: auto;
  transform: translate(-50%, -45%);
}
.hero-q-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.hero-q-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.hero-q-copy .eyebrow { margin-bottom: calc(var(--s-2) * -1); }
.hero-q-copy h1 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--text-display); line-height: 1.05;
  letter-spacing: -.015em; color: var(--ink); margin: 0;
  text-wrap: balance;
}
.hero-q-copy h1 .accent { color: var(--magenta); }
.hero-q-copy p { font-size: var(--text-lead-sm); line-height: 1.7; color: var(--slate); max-width: 48ch; margin: 0; }

/* Right column: image with a quote card overlapping its lower-left. */
.hero-q-media { position: relative; }
.hero-q-image {
  margin: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--blush); border: 1px solid var(--line);
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-md);
}
.hero-q-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-q-image .is-placeholder { min-height: 100%; }
/* Pull-quote card: an excerpt from the page copy (not a testimonial). Body font,
   with a large, subtle decorative quotation mark behind the text. */
.hero-q-quote {
  position: absolute; right: clamp(-32px, -2vw, -16px); left: auto; bottom: clamp(24px, 4vw, 48px);
  width: min(92%, 380px); margin: 0; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(24px, 2.6vw, 34px);
}
.hero-q-quote::before {
  content: "\201C"; position: absolute; top: 8px; right: 16px; left: auto;
  font-family: var(--display); font-size: 120px; line-height: .9;
  color: var(--magenta); opacity: .08; pointer-events: none; z-index: 0;
  transform: scaleX(-1);
}
.hero-q-quote blockquote {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: var(--text-lead); line-height: 1.55; color: var(--ink);
}

@media (max-width: 860px) {
  .hero-q-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-q-image { aspect-ratio: 4 / 3; }
  .hero-q-quote { left: var(--s-4); right: var(--s-4); width: auto; bottom: clamp(-24px, -4vw, -16px); }
  .page-hero-quote { padding-bottom: clamp(56px, 12vw, 88px); }
}

/* ---- Richer section atmosphere on designed pages ---- */
/* Soft tinted card-feel for plain designed sections + a touch more depth on tints. */
.c-section.tint.texture-grain,
.c-section.tint.texture-dots,
.c-section.tint.texture-lines,
.c-section.tint.texture-sweep { border-block: 1px solid var(--line); }

/* ---- Feminine background patterns (subtle) ----------------------------
   Add a class to any .c-section / hero header. Tile softly in brand tints;
   add `.tint` for a paper-tinted base. Keep them light — the brand is calm. */
/* Soft scallop / fish-scale arcs */
.texture-scallop {
  background-image: radial-gradient(circle at 50% 120%, transparent 0 13px, rgba(178, 32, 139, 0.05) 14px 15px, transparent 16px);
  background-size: 34px 17px;
}
.texture-scallop.tint { background-color: var(--paper); }
/* Scattered soft petals (offset dots in two brand tints) */
.texture-petals {
  background-image:
    radial-gradient(circle at 18% 28%, rgba(178, 32, 139, 0.06) 0 5px, transparent 6px),
    radial-gradient(circle at 68% 58%, rgba(128, 83, 162, 0.05) 0 4px, transparent 5px),
    radial-gradient(circle at 42% 86%, rgba(178, 32, 139, 0.045) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 16%, rgba(128, 83, 162, 0.04) 0 4px, transparent 5px);
  background-size: 150px 150px;
}
.texture-petals.tint { background-color: var(--paper); }
/* Diamond lattice — fine criss-cross of soft brand lines */
.texture-lattice {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(178, 32, 139, 0.04) 22px 23px),
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(128, 83, 162, 0.035) 22px 23px);
}
.texture-lattice.tint { background-color: var(--paper); }

/* ---- FAQ page: clear category separation ---- */
.faq-cats { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); width: 100%; max-width: 820px; margin-inline: auto; }
.faq-cat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.faq-cat::before {
  content: ""; position: absolute; left: 0; top: clamp(26px, 3.4vw, 46px);
  width: 4px; height: clamp(28px, 3vw, 40px); border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--magenta);
}
.faq-cat-head {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding-bottom: var(--s-4); margin-bottom: var(--s-2);
  border-bottom: 2px solid var(--cloud);
}
.faq-cat-num { font-family: var(--display); font-size: var(--text-subhead); color: var(--magenta-40); line-height: 1; }
.faq-cat-name { font-family: var(--display); font-weight: 400; font-size: var(--text-heading); color: var(--ink); line-height: 1.1; margin: 0; }
.faq-cat-head { align-items: center; }
.faq-cat-head .feature-icon { width: 40px; height: 40px; margin-bottom: 0; }
.faq-cat .faq { max-width: none; width: 100%; }
.faq-cat .faq-item:last-child { border-bottom: none; }
.faq-cat .faq-item:last-child .faq-q { padding-bottom: 0; }

/* Contact details list */
.contact-list { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--text-md); color: var(--slate); }
.contact-list a { color: var(--magenta); text-decoration: none; }
.contact-list a:hover { border-bottom: 1.5px solid var(--magenta-40); }

/* Contact "Drop us a line" — form left, image right */
.contact-form-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.contact-form-copy { min-width: 0; }
.contact-form-media { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--cloud); border: 1px solid var(--line); min-height: 100%; }
.contact-form-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-form-media .is-placeholder { min-height: 100%; }
@media (max-width: 860px) {
  .contact-form-split { grid-template-columns: 1fr; }
  .contact-form-media { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
}

/* ====== Generic page (faqs + fallback) ====== */
.page-hero { padding-block: var(--section-space-m); }
.page-hero .wrap-narrow { display: flex; flex-direction: column; gap: var(--s-4); }
.page-hero h1 { font-family: var(--display); font-weight: 400; font-size: var(--text-display); line-height: 1.06; color: var(--ink); }
.page-hero p { font-size: var(--text-lead-md); color: var(--slate); max-width: 60ch; }
.prose-section { padding-block: var(--section-space-m); }
.prose { max-width: 70ch; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-5); }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: var(--text-title-sm); color: var(--ink); }
.prose p { font-size: var(--text-lg); line-height: 1.8; color: var(--slate); }

/* ====== Resources (blog) archive ====== */
.blog-hero { padding-block: var(--section-space-m) var(--section-space-s); }
.blog-hero .wrap { display: flex; flex-direction: column; gap: var(--s-4); }
.blog-hero-title { font-family: var(--display); font-weight: 400; font-size: var(--text-hero-alt); line-height: 1.04; letter-spacing: -.01em; color: var(--ink); max-width: 20ch; margin: 0; }
.blog-hero-title .accent { color: var(--magenta); }
.blog-hero-intro { font-size: var(--text-lead); color: var(--slate); max-width: 60ch; line-height: 1.7; margin: 0; }

/* Featured highlight card */
.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); margin-bottom: var(--s-8); }
.blog-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-featured-media { background: var(--cloud); min-height: 340px; overflow: hidden; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); justify-content: center; }
.blog-featured-title { font-family: var(--display); font-weight: 400; font-size: var(--text-title-lg); line-height: 1.1; color: var(--ink); margin: 0; }
.blog-featured .btn { margin-top: var(--s-2); }
@media (max-width: 760px) { .blog-featured { grid-template-columns: 1fr; } .blog-featured-media { order: -1; aspect-ratio: 16 / 9; min-height: 0; } }

.blog-meta { font-size: var(--text-sm); color: var(--mist); letter-spacing: .02em; }
.blog-excerpt { font-size: var(--text-cap); line-height: 1.65; color: var(--slate); margin: 0; }

/* Recent grid */
.blog-recent-head { margin-top: var(--s-7); margin-bottom: var(--s-6); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card-media { aspect-ratio: 4 / 3; background: var(--cloud); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.blog-card-cat { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.blog-card-title { font-family: var(--display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.2; color: var(--ink); margin: 0; }
.blog-card .blog-meta { margin-top: auto; padding-top: var(--s-2); }
@media (max-width: 860px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* ====== Single post ====== */
.single-post-hero { padding-block: var(--section-space-m) var(--s-6); }
.single-post-hero .wrap-narrow { display: flex; flex-direction: column; gap: var(--s-4); max-width: 820px; }
.single-post-hero h1 { font-family: var(--display); font-weight: 400; font-size: var(--text-title-xl); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.single-post-meta { font-size: var(--text-sm); color: var(--mist); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.single-post-body { padding-block: var(--s-6) var(--section-space-m); }
.single-post-body .wrap-narrow { max-width: 820px; margin-inline: auto; }
.single-post-cover { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-7); }
.single-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.single-post-body .prose { max-width: 68ch; margin-inline: auto; }
.single-post-body .prose p { font-size: var(--text-lg); line-height: 1.85; color: var(--slate); }
.single-post-body .prose h2 { font-family: var(--display); font-weight: 400; font-size: var(--text-title-sm); color: var(--ink); }
.single-post-body .prose h3 { font-family: var(--display); font-weight: 400; font-size: var(--text-2xl); color: var(--ink); }
/* Article rhythm — restore vertical spacing inside the post content (the global
   block-gap margin is neutralised theme-wide; the article needs its own). */
.single-post-body .wp-block-post-content > * { margin-block: 0; }
.single-post-body .wp-block-post-content > * + * { margin-top: var(--s-5); }
.single-post-body .wp-block-post-content :is(h2, h3) { margin-top: var(--s-7); }
.single-post-body .wp-block-post-content :is(h2, h3) + * { margin-top: var(--s-3); }
.single-post-body .wp-block-post-content > *:first-child { margin-top: 0; }
.single-post-body .wp-block-post-content :is(ul, ol) { padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.single-post-body .wp-block-post-content li { font-size: var(--text-lg); line-height: 1.7; color: var(--slate); }

/* Post gallery (after content) */
.post-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-8); max-width: 68ch; margin-inline: auto; }
.post-gallery-item { margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 2; background: var(--cloud); }
.post-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .post-gallery { grid-template-columns: 1fr; } }

/* ====== Fluent Forms — match the Jeunesse design system ====== */
.fluentform { font-family: var(--body); }
.fluentform .ff-el-group { margin-bottom: var(--s-5); }
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label.ff-el-block-label label {
  font-family: var(--body); font-size: var(--text-cap); font-weight: 600; color: var(--ink);
  margin-bottom: var(--s-2); padding: 0; letter-spacing: 0;
}
.fluentform .ff-el-is-required.asterisk-right > label::after,
.fluentform .ff_t_container .text-danger,
.fluentform label .ff-el-is-required { color: var(--magenta); }

.fluentform input.ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control {
  font-family: var(--body); font-size: var(--text-md); color: var(--ink); line-height: 1.5;
  width: 100%; padding: 13px 16px; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.fluentform .ff-el-form-control::placeholder { color: var(--mist); opacity: 1; }
.fluentform input.ff-el-form-control:focus,
.fluentform textarea.ff-el-form-control:focus,
.fluentform select.ff-el-form-control:focus {
  outline: none; border-color: var(--magenta-40); box-shadow: 0 0 0 3px var(--magenta-20);
}
.fluentform textarea.ff-el-form-control { min-height: 150px; resize: vertical; }

/* Submit button — brand pill (also set on the form so FF's per-form colour matches) */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style,
.fluentform button.ff-btn.ff-btn-submit {
  font-family: var(--body); font-weight: 600; font-size: var(--text-md);
  background: var(--magenta); color: #fff; border: 1px solid var(--magenta);
  border-radius: var(--r-pill); padding: 14px 32px; cursor: pointer; box-shadow: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn.ff-btn-submit:hover {
  background: var(--magenta-deep); border-color: var(--magenta-deep); transform: translateY(-1px);
}

/* Validation + success states */
.fluentform .ff-el-is-error input.ff-el-form-control,
.fluentform .ff-el-is-error textarea.ff-el-form-control { border-color: var(--magenta); }
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger { color: var(--magenta-deep); font-size: var(--text-sm); margin-top: var(--s-2); }
.ff-message-success,
.fluentform_wrapper .ff-message-success {
  background: var(--cloud); border: 1px solid var(--line); border-left: 3px solid var(--magenta);
  border-radius: var(--r-md); padding: var(--s-5); color: var(--ink); font-size: var(--text-md);
}

/* Footer contact line (Business Settings) */
.footer-contact { font-size: var(--text-cap); line-height: 1.7; margin-top: var(--s-3); }
.footer-contact a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer-contact a:hover { color: #fff; }