/*
 * Wild Soul — Component Styling Layer
 * ====================================
 * Ported from design_handoff_wild_soul_site/designs/assets/site.css
 * and Wild Soul - Home.html. Adapted for WordPress block markup.
 *
 * COMPONENT CLASS CONTRACT
 * ========================
 * Patterns and templates carry these classes on their outermost block.
 * Theme.json handles global body/heading typography; this file handles
 * section/component specifics.
 *
 * Layout helpers:
 *   .ws-container       — max-width 1240px, centred, padding 0 40px
 *   .ws-container--narrow — max-width 920px, centred, padding 0 40px
 *
 * Typography:
 *   .ws-eyebrow         — kicker label (Jost, tracked uppercase, sand)
 *
 * Buttons:
 *   .ws-btn             — primary CTA (forest bg, cream text)
 *   .ws-btn--light      — light variant (cream bg, forest text)
 *   .ws-btn--outline    — transparent with border
 *   .ws-btn--outline-dark — outline on dark background
 *   .ws-btn--sm         — smaller padding/font
 *
 * Header / Nav:
 *   .ws-promo-bar       — top promo strip (forest bg)
 *   .ws-header          — site header, light (cream bg, ink text)
 *   .ws-header--overlay — header floats transparently over a hero image
 *
 * Sections:
 *   .ws-section         — generic padded section (90px vert)
 *   .ws-section--tint   — cream-2 background
 *   .ws-section--paper  — paper background
 *   .ws-section--forest — forest background (cream text)
 *   .ws-section-head    — centred eyebrow + h2 + optional lead text
 *
 * Home-page components:
 *   .ws-hero            — full-bleed cover with image + gradient overlay
 *   .ws-hero-tagline    — slogan banner beneath hero
 *   .ws-intro           — centred intro statement (large Cormorant)
 *   .ws-practice-cards  — 3-column practice pillars (photo, title, text, link)
 *   .ws-offers          — 2-column introductory offer grid
 *   .ws-retreat-split   — 50/50 image + copy split section
 *   .ws-newsletter      — newsletter signup section
 *
 * CPT card grids (used on listing pages):
 *   .ws-card-grid       — responsive auto-fit card grid
 *   .ws-card            — generic card (practice / teacher / retreat)
 *   .ws-card__image     — card image wrapper (4/5 aspect ratio)
 *   .ws-card__body      — card text content area
 *   .ws-card__title     — card h3
 *   .ws-card__meta      — small meta line (date, location, price)
 *   .ws-card__more      — text link (Jost uppercase, sand underline)
 *
 * Inner-page hero:
 *   .ws-page-hero       — inner page title band (cream bg, centred)
 *
 * Footer:
 *   .ws-footer          — site footer (ink bg)
 *
 * Mobile drawer:
 *   .ws-drawer          — fullscreen overlay nav drawer
 * ========================
 */

/* ============================================================
   Design-token aliases
   Maps to WP preset custom properties emitted by theme.json.
   Use --ws-* or the WP vars interchangeably in this file.
   ============================================================ */
:root {
  --ws-forest:     var(--wp--preset--color--forest,    #1E3B38);
  --ws-forest-2:   var(--wp--preset--color--forest-2,  #27514D);
  --ws-teal:       var(--wp--preset--color--teal,       #4E8E8A);
  --ws-teal-deep:  var(--wp--preset--color--teal-deep,  #2C7B74);
  --ws-cream:      var(--wp--preset--color--cream,      #F0EBE0);
  --ws-cream-2:    var(--wp--preset--color--cream-2,    #E7E0D2);
  --ws-sand:       var(--wp--preset--color--sand,       #C8A57E);
  --ws-paper:      var(--wp--preset--color--paper,      #FBF7EE);
  --ws-ink:        var(--wp--preset--color--ink,        #1B2624);
  --ws-ink-soft:   var(--wp--preset--color--ink-soft,   #45534F);
  --ws-muted:      var(--wp--preset--color--muted,      #6B7A77);
  --ws-line:       var(--wp--preset--color--line,       #DAD2C2);

  --ws-maxw:       1240px;
  --ws-maxw-narrow: 920px;

  /* hero text shadow */
  --ws-hero-shadow: 0 1px 2px rgba(20, 30, 28, .5);

  /* promo bar height — used to offset the overlay header on the home page */
  --ws-promo-h: 2.5rem;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.ws-container {
  max-width: var(--ws-maxw);
  margin-inline: auto;
  padding-inline: 40px;
}

.ws-container--narrow {
  max-width: var(--ws-maxw-narrow);
  margin-inline: auto;
  padding-inline: 40px;
}

/* ============================================================
   Typography — global element overrides
   (theme.json sets font-family/line-height; this layer adds
   letter-spacing + font-smoothing not expressible in theme.json)
   ============================================================ */
body {
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  letter-spacing: 0.005em;
}

/* ============================================================
   Eyebrow / kicker label
   ============================================================ */
.ws-eyebrow {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ws-sand);
  display: inline-block;
}

/* ============================================================
   Buttons
   ============================================================ */
/* The component classes work on a bare <a>/<button> AND on a WordPress
   core/button (where the class lands on the .wp-block-button wrapper and we
   forward the styling to the inner .wp-block-button__link). */
.ws-btn,
.wp-block-button.ws-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ws-forest);
  color: var(--ws-cream);
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.25s ease;
}
.ws-btn:hover,
.wp-block-button.ws-btn > .wp-block-button__link:hover {
  background: var(--ws-forest-2);
  color: var(--ws-cream);
}

/* On a core button block the inner .wp-block-button__link carries ALL the
   styling (bg/border/padding). Neutralise the .wp-block-button wrapper so it
   doesn't render a second, doubled box — this is what caused the double border
   on outline buttons and the slightly oversized solid buttons. */
.wp-block-button.ws-btn {
  padding: 0;
  border: 0;
  background: none;
}

.ws-btn--light,
.wp-block-button.ws-btn--light > .wp-block-button__link {
  background: var(--ws-cream);
  color: var(--ws-forest);
}
.ws-btn--light:hover,
.wp-block-button.ws-btn--light > .wp-block-button__link:hover {
  background: #fff;
  color: var(--ws-forest);
}

.ws-btn--outline,
.wp-block-button.ws-btn--outline > .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--ws-forest);
  color: var(--ws-forest);
}
.ws-btn--outline:hover,
.wp-block-button.ws-btn--outline > .wp-block-button__link:hover {
  background: var(--ws-forest);
  color: var(--ws-cream);
}

.ws-btn--outline-dark,
.wp-block-button.ws-btn--outline-dark > .wp-block-button__link {
  background: transparent;
  color: var(--ws-cream);
  border: 1px solid var(--ws-cream);
}
.ws-btn--outline-dark:hover,
.wp-block-button.ws-btn--outline-dark > .wp-block-button__link:hover {
  background: rgba(240, 235, 224, 0.12);
  color: var(--ws-cream);
}

.ws-btn--sm,
.wp-block-button.ws-btn--sm > .wp-block-button__link {
  padding: 13px 24px;
  font-size: 12px;
}

/* ============================================================
   Promo bar
   ============================================================ */
.ws-promo-bar {
  background: var(--ws-forest);
  color: var(--ws-cream);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 11px;
  font-weight: 400;
}
.ws-promo-bar__code {
  color: var(--ws-sand);
}

/* ============================================================
   Site header — light (inner pages default)
   ============================================================ */
.ws-header {
  background: var(--ws-cream);
  color: var(--ws-ink);
  border-bottom: 1px solid var(--ws-line);
}
.ws-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 30px;
}
.ws-header__logo img {
  height: 30px;
  width: 213px;
  max-width: none;
}
.ws-header__nav {
  display: flex;
  gap: 32px;
}
.ws-header__nav a {
  color: var(--ws-ink-soft);
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
}
.ws-header__nav a:hover,
.ws-header__nav a.is-active {
  color: var(--ws-forest);
}
.ws-header__nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--ws-sand);
}
.ws-header__book {
  color: var(--ws-forest);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid rgba(30, 59, 56, 0.32);
  padding: 11px 22px;
  white-space: nowrap;
  transition: background 0.2s;
  text-decoration: none;
}
.ws-header__book:hover {
  background: rgba(30, 59, 56, 0.06);
}

/* Overlay variant — floats transparently over the hero image */
.ws-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(240, 235, 224, 0.5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(30, 59, 56, 0.10);
  color: var(--ws-ink);
}
.ws-header--overlay .ws-header__bar {
  padding-block: 30px;
}
.ws-header--overlay .ws-header__nav a {
  color: var(--ws-ink-soft);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.55);
}
.ws-header--overlay .ws-header__nav a:hover {
  color: var(--ws-forest);
}
.ws-header--overlay .ws-header__book {
  color: var(--ws-forest);
  background: rgba(240, 235, 224, 0.45);
  border-color: rgba(30, 59, 56, 0.4);
}
.ws-header--overlay .ws-header__book:hover {
  background: rgba(240, 235, 224, 0.7);
}

/* Mobile menu button */
.ws-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.ws-menu-btn span {
  width: 24px;
  height: 2px;
  background: var(--ws-forest);
}

/* ============================================================
   Generic section helpers
   ============================================================ */
.ws-section {
  padding-block: 90px;
}
.ws-section--tint {
  background: var(--ws-cream-2);
}
.ws-section--paper {
  background: var(--ws-paper);
}
.ws-section--forest {
  background: var(--ws-forest);
  color: var(--ws-cream);
}
.ws-section--forest h1,
.ws-section--forest h2,
.ws-section--forest h3,
.ws-section--forest h4 {
  color: var(--ws-cream);
}
.ws-section--forest .ws-eyebrow {
  color: var(--ws-sand);
}

.ws-section-head {
  text-align: center;
  margin-bottom: 54px;
}
.ws-section-head .ws-eyebrow {
  margin-bottom: 16px;
}
.ws-section-head h2 {
  font-size: clamp(36px, 4.6vw, 54px);
}
.ws-section-head h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-section-head p {
  color: var(--ws-ink-soft);
  max-width: 52ch;
  margin: 14px auto 0;
}

/* ============================================================
   Hero — full-bleed cover
   ============================================================ */
.ws-hero {
  position: relative;
  height: 90vh;
  min-height: 680px;
  max-height: 880px;
  color: var(--ws-cream);
  overflow: hidden;
}
.ws-hero > img,
.ws-hero .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* EXACT handoff gradient (Wild Soul - Home.html .hero::after): subtle,
     vertical, barely-there at the top and darkening toward the bottom where
     the cream headline + CTAs sit. Keeps the photo light/airy. */
  background: linear-gradient(
    180deg,
    rgba(20, 32, 30, 0.06) 0%,
    rgba(20, 32, 30, 0.06) 26%,
    rgba(20, 32, 30, 0.66) 100%
  );
  pointer-events: none;
  /* z-index 0 keeps the gradient ABOVE the cover image yet BELOW the core
     .wp-block-cover__inner-container (z-index 1) that holds the copy. */
  z-index: 0;
}
.ws-hero__inner {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 74px;
}
.ws-hero h1 {
  font-size: clamp(46px, 6.4vw, 84px);
  font-weight: 300;
  line-height: 1.04;
  max-width: 13ch;
  color: var(--ws-cream);
  /* --hero-shadow from the handoff */
  text-shadow: 0 1px 2px rgba(20, 30, 28, 0.5);
}
.ws-hero h1 em {
  font-style: italic;
  color: #fff;
}
.ws-hero__lead {
  font-size: 18px;
  font-weight: 300;
  max-width: 46ch;
  margin: 22px 0 32px;
  color: rgba(240, 235, 224, 0.94);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(20, 30, 28, 0.5);
}
.ws-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   Hero tagline — slogan banner beneath hero
   ============================================================ */
.ws-hero-tagline {
  text-align: center;
  padding: 54px 40px;
}
.ws-hero-tagline__tag {
  display: block;
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--ws-muted);
}
/* separator dots between tagline spans */
.ws-hero-tagline__tag .ws-t + .ws-t::before {
  content: "\00b7";
  margin: 0 0.4em;
  color: var(--ws-sand);
  opacity: 0.9;
}

/* tinted background variant */
.ws-hero-tagline--tint {
  background: var(--ws-cream-2);
}

/* flanking line variant — compact (matches the handoff "flanktint" banner) */
.ws-hero-tagline--flank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 30px);
  padding-block: 40px;
}
.ws-hero-tagline--flank::before,
.ws-hero-tagline--flank::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(34px, 6vw, 80px);
  height: 1px;
  background: var(--ws-sand);
  opacity: 0.65;
}
.ws-hero-tagline--flank .ws-hero-tagline__tag {
  font-size: clamp(27px, 3.9vw, 44px);
}

/* ============================================================
   Intro statement
   ============================================================ */
.ws-intro {
  padding: 64px 0 96px;
  text-align: center;
}
.ws-intro .ws-eyebrow {
  margin-bottom: 24px;
}
.ws-intro p:not(.ws-eyebrow) {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 300;
  line-height: 1.28;
  max-width: 24ch;
  margin-inline: auto;
  color: var(--ws-ink);
}
.ws-intro p em {
  font-style: italic;
  color: var(--ws-teal-deep);
}

/* ============================================================
   Practice cards (3-column pillars grid)
   ============================================================ */
.ws-practice-cards {
  padding-block: 100px;
}
.ws-practice-cards__head {
  text-align: center;
  margin-bottom: 54px;
}
.ws-practice-cards__head .ws-eyebrow {
  margin-bottom: 18px;
}
.ws-practice-cards__head h2 {
  font-size: clamp(36px, 4.6vw, 54px);
}
.ws-practice-cards__head h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-practice-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.ws-practice-card {
  display: flex;
  flex-direction: column;
}
.ws-practice-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.ws-practice-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.ws-practice-card:hover .ws-practice-card__image img {
  transform: scale(1.05);
}
.ws-practice-card h3 {
  font-size: 30px;
  margin: 22px 0 8px;
  color: var(--ws-ink);
}
.ws-practice-card p {
  color: var(--ws-ink-soft);
  font-size: 15px;
  margin-bottom: 14px;
  max-width: 36ch;
}
.ws-practice-card__more {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-forest);
  border-bottom: 1px solid var(--ws-sand);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.2s;
  text-decoration: none;
}
.ws-practice-card__more:hover {
  color: var(--ws-teal-deep);
}

/* ============================================================
   Offers grid (introductory 2-up cards)
   ============================================================ */
.ws-offers {
  padding-block: 100px;
}
.ws-offers--tint {
  background: var(--ws-cream-2);
}
.ws-offers__head {
  text-align: center;
  margin-bottom: 56px;
}
.ws-offers__head .ws-eyebrow {
  margin-bottom: 18px;
}
.ws-offers__head h2 {
  font-size: clamp(38px, 5vw, 58px);
}
.ws-offers__head h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ws-line);
  border: 1px solid var(--ws-line);
}
.ws-offer {
  position: relative;
  background: var(--ws-paper);
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.ws-offer:hover {
  background: #FEFBF4;
  box-shadow: 0 16px 38px -24px rgba(27, 38, 36, 0.45);
}
/* stretch the link over the whole card */
.ws-offer .ws-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ws-offer__num {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ws-teal-deep);
  margin-bottom: 16px;
}
.ws-offer h3 {
  font-size: clamp(34px, 4vw, 46px);
  color: var(--ws-ink);
}
.ws-offer h3 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-offer p:not(.ws-offer__num):not(.ws-offer__codeline) {
  color: var(--ws-ink-soft);
  font-size: 15px;
  margin: 12px 0 8px;
  max-width: 38ch;
}
.ws-offer__codeline {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-muted);
  margin-bottom: 26px;
}
.ws-offer__codeline b {
  color: var(--ws-teal-deep);
  font-weight: 500;
}
.ws-offer .ws-btn {
  align-self: flex-start;
}
.ws-offers__fine {
  text-align: center;
  color: var(--ws-muted);
  font-size: 12px;
  margin-top: 34px;
  letter-spacing: 0.02em;
  max-width: 74ch;
  margin-inline: auto;
}

/* ============================================================
   Retreat split — 50/50 image + copy
   ============================================================ */
.ws-retreat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}
.ws-retreat-split__image {
  position: relative;
}
.ws-retreat-split__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-retreat-split__copy {
  background: var(--ws-cream-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 80px;
}
.ws-retreat-split__copy .ws-eyebrow {
  margin-bottom: 22px;
}
.ws-retreat-split__copy h2 {
  font-size: clamp(44px, 5.4vw, 64px);
  margin-bottom: 6px;
}
.ws-retreat-split__copy h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-retreat-split__when {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 23px;
  color: var(--ws-muted);
  margin-bottom: 26px;
}
.ws-retreat-split__copy p:not(.ws-eyebrow):not(.ws-retreat-split__when) {
  color: var(--ws-ink-soft);
  font-size: 16px;
  margin-bottom: 34px;
  max-width: 42ch;
}
.ws-retreat-split__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   Newsletter signup
   ============================================================ */
.ws-newsletter {
  padding-block: 100px;
  text-align: center;
}
.ws-newsletter .ws-eyebrow {
  margin-bottom: 20px;
}
.ws-newsletter h2 {
  font-size: clamp(38px, 4.8vw, 56px);
  margin-bottom: 14px;
}
.ws-newsletter h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-newsletter p:not(.ws-eyebrow) {
  color: var(--ws-ink-soft);
  max-width: 46ch;
  margin: 0 auto 32px;
}
.ws-newsletter__form {
  display: flex;
  max-width: 480px;
  margin-inline: auto;
  border-bottom: 1px solid var(--ws-ink);
}
.ws-newsletter__form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 4px;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 300;
  color: var(--ws-ink);
}
.ws-newsletter__form input:focus {
  outline: none;
}
.ws-newsletter__form button {
  border: none;
  background: none;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ws-forest);
  padding: 0 8px;
}
.ws-newsletter__form button:hover {
  color: var(--ws-teal);
}
.ws-newsletter__socials {
  margin-top: 34px;
  display: flex;
  gap: 28px;
  justify-content: center;
}
.ws-newsletter__socials a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  text-decoration: none;
}
.ws-newsletter__socials a:hover {
  color: var(--ws-forest);
  border-color: var(--ws-sand);
}

/* ============================================================
   Generic card grid (CPT listing pages)
   ============================================================ */
.ws-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.ws-card {
  display: flex;
  flex-direction: column;
  background: var(--ws-paper);
  transition: box-shadow 0.3s;
}
.ws-card:hover {
  box-shadow: 0 12px 32px -16px rgba(27, 38, 36, 0.35);
}
.ws-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.ws-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.ws-card:hover .ws-card__image img {
  transform: scale(1.04);
}
.ws-card__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ws-card__title {
  font-size: clamp(24px, 2.8vw, 32px);
  color: var(--ws-ink);
  margin-bottom: 8px;
}
.ws-card__meta {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ws-muted);
  margin-bottom: 10px;
}
.ws-card p {
  color: var(--ws-ink-soft);
  font-size: 15px;
  margin-bottom: 14px;
  max-width: 36ch;
}
.ws-card__more {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-forest);
  border-bottom: 1px solid var(--ws-sand);
  padding-bottom: 4px;
  align-self: flex-start;
  margin-top: auto;
  transition: color 0.2s;
  text-decoration: none;
}
.ws-card__more:hover {
  color: var(--ws-teal-deep);
}

/* ============================================================
   Inner-page title band
   ============================================================ */
.ws-page-hero {
  text-align: center;
  padding: 84px 0 64px;
  background: var(--ws-cream);
}
.ws-page-hero__crumb {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-muted);
  margin-bottom: 20px;
}
.ws-page-hero__crumb a:hover {
  color: var(--ws-teal-deep);
}
.ws-page-hero h1 {
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 300;
}
.ws-page-hero h1 em {
  color: var(--ws-teal-deep);
}
.ws-page-hero__sub {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 27px);
  color: var(--ws-muted);
  margin-top: 14px;
}
.ws-page-hero__lead {
  font-size: 17px;
  color: var(--ws-ink-soft);
  max-width: 54ch;
  margin: 22px auto 0;
}

/* ============================================================
   FAQ accordion (native core/details)
   Mirrors the handoff .faq: Cormorant summaries, sand +/× marker,
   hairline dividers, soft-ink answers. Constrained to ~820px.
   ============================================================ */
.ws-faq > * {
  margin-block-start: 0;
}
.ws-faq .wp-block-details {
  border-bottom: 1px solid var(--ws-line);
}
.ws-faq .wp-block-details summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 24px 44px 24px 4px;
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  color: var(--ws-ink);
  transition: color 0.2s;
}
.ws-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}
.ws-faq .wp-block-details summary::marker {
  content: "";
}
.ws-faq .wp-block-details summary:hover {
  color: var(--ws-teal-deep);
}
.ws-faq .wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 22px;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: var(--ws-sand);
  transition: transform 0.25s;
}
.ws-faq .wp-block-details[open] summary::after {
  transform: rotate(45deg);
}
/* answer paragraph(s) — core/details renders them as direct children */
.ws-faq .wp-block-details > :not(summary) {
  margin: 0;
  padding: 0 44px 26px 4px;
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  max-width: 64ch;
}

/* "Still have a question?" CTA beneath the accordion */
.ws-faq-cta {
  text-align: center;
  margin-top: 54px;
}
.ws-faq-cta > * {
  margin-block-start: 0;
}
.ws-faq-cta p {
  color: var(--ws-ink-soft);
  font-size: 16px;
  margin-bottom: 20px;
}

/* ============================================================
   Contact page — details column + form panel
   ============================================================ */
.ws-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.ws-contact-grid > * {
  margin-block-start: 0;
}
.ws-contact__col > * {
  margin-block-start: 0;
}
.ws-contact__lead-line {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--ws-muted);
  line-height: 1.3;
  max-width: 20ch;
  margin-top: 16px;
}
.ws-contact__intro {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  margin-top: 16px;
  max-width: 40ch;
}
.ws-contact__lines {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 36px;
}
.ws-contact__line > * {
  margin-block-start: 0;
}
.ws-contact__line b {
  display: block;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.ws-contact__line a,
.ws-contact__line span {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 24px;
  color: var(--ws-ink);
  text-decoration: none;
}
.ws-contact__line a:hover {
  color: var(--ws-teal-deep);
}

/* Contact form panel (static markup — styled to match the handoff) */
.ws-contact-form {
  background: var(--ws-paper);
  border: 1px solid var(--ws-line);
  padding: 46px;
}
.ws-contact-form__head {
  margin-bottom: 28px;
}
.ws-contact-form__head h3 {
  font-size: 28px;
  color: var(--ws-ink);
}
.ws-contact-form__head p {
  color: var(--ws-ink-soft);
  font-size: 14.5px;
  margin-top: 6px;
}
.ws-contact-form .ws-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ws-contact-form .ws-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.ws-contact-form label {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-muted);
  font-weight: 600;
  margin-bottom: 9px;
}
.ws-contact-form label .req {
  color: var(--ws-sand);
}
.ws-contact-form input,
.ws-contact-form select,
.ws-contact-form textarea {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 15px;
  color: var(--ws-ink);
  background: var(--ws-cream);
  border: 1px solid var(--ws-line);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.ws-contact-form input:focus,
.ws-contact-form select:focus,
.ws-contact-form textarea:focus {
  outline: none;
  border-color: var(--ws-teal);
  background: #fff;
}
.ws-contact-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
.ws-contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23889' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.ws-contact-form .ws-btn {
  margin-top: 6px;
}
.ws-contact-form__foot {
  font-size: 12.5px;
  color: var(--ws-muted);
  margin-top: 16px;
  line-height: 1.6;
}

/* ============================================================
   Footer
   ============================================================ */
.ws-footer {
  background: var(--ws-ink);
  color: #9fb0ac;
  padding: 76px 0 30px;
}
.ws-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ws-footer__brand-mark {
  margin-bottom: 16px;
}
.ws-footer__brand-mark img {
  height: 30px;
  /* Glow effect: lifts the logo off the dark footer — Edge 20% / Dispersion 55% */
  filter:
    drop-shadow(0 0 0.4px  rgba(255, 255, 255, 0.28))
    drop-shadow(0 0 0.8px  rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 1.6px  rgba(255, 255, 255, 0.12))
    drop-shadow(0 0 3px    rgba(255, 255, 255, 0.05))
    drop-shadow(0 0 12px   rgba(255, 255, 255, 0.30))
    drop-shadow(0 0 26px   rgba(255, 255, 255, 0.21))
    drop-shadow(0 0 48px   rgba(255, 255, 255, 0.13))
    drop-shadow(0 0 78px   rgba(255, 255, 255, 0.07));
}
.ws-footer__brand p {
  font-size: 14px;
  color: #7e918d;
  max-width: 32ch;
  font-weight: 300;
  margin-bottom: 20px;
}
.ws-footer__social {
  display: flex;
  gap: 18px;
}
.ws-footer__social a {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a6a2;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  text-decoration: none;
}
.ws-footer__social a:hover {
  color: var(--ws-sand);
  border-color: var(--ws-sand);
}
.ws-footer__col h4 {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  color: var(--ws-cream);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}
.ws-footer__col a {
  display: block;
  color: #94a6a2;
  font-size: 14px;
  padding: 6px 0;
  font-weight: 300;
  text-decoration: none;
}
.ws-footer__col a:hover {
  color: var(--ws-sand);
}
.ws-footer__bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 26px;
  flex-wrap: wrap;
  color: #637470;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.ws-footer__legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.ws-footer__legal a {
  color: #7e918d;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  text-decoration: none;
}
.ws-footer__bottom a:hover {
  color: var(--ws-sand);
  border-color: var(--ws-sand);
}

/* ============================================================
   Mobile nav drawer
   ============================================================ */
.ws-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 32, 30, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.ws-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ws-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 80%;
  max-width: 330px;
  background: var(--ws-forest);
  padding: 30px;
  transform: translateX(100%);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}
.ws-drawer.is-open .ws-drawer__panel {
  transform: translateX(0);
}
.ws-drawer__panel a {
  padding: 15px 4px;
  border-bottom: 1px solid rgba(240, 235, 224, 0.15);
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 26px;
  color: var(--ws-cream);
  text-decoration: none;
}
.ws-drawer__panel .ws-btn {
  margin-top: 22px;
  justify-content: center;
  background: var(--ws-cream);
  color: var(--ws-forest);
}
.ws-drawer__close {
  align-self: flex-end;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ws-cream);
  line-height: 1;
}

/* ============================================================
   WordPress core/cover adaptation for the hero
   The hero pattern uses a core/cover (so the background image is
   referenced from the media library and stays editable). These rules
   bottom-anchor the cover content full-width inside .ws-container.
   ============================================================ */
.ws-hero.wp-block-cover {
  padding: 0;
  border-radius: 0;
  /* Bottom-anchor the cover content (matching the handoff .hero-inner
     justify-content:flex-end). Beats core's align-items on the cross-axis. */
  align-items: stretch;
  justify-content: flex-end;
}
/* Inner container spans full width above the scrim; the .ws-container group
   inside it constrains and left-aligns the copy. */
.ws-hero.wp-block-cover .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: 5;
}
/* The gradient overlay is supplied by .ws-hero::after — neutralise the
   core dim span so it doesn't double up. */
.ws-hero > .wp-block-cover__background {
  display: none;
}

/* ============================================================
   Practice cards — forest treatment (homepage "Find your kind of practice")
   ============================================================ */
.ws-practice-cards--forest {
  background: var(--ws-forest);
  color: var(--ws-cream);
}
.ws-practice-cards--forest .ws-eyebrow {
  color: var(--ws-sand);
}
.ws-practice-cards--forest .ws-practice-cards__head h2,
.ws-practice-cards--forest .ws-practice-card h3 {
  color: var(--ws-cream);
}
.ws-practice-cards--forest .ws-practice-cards__head h2 em {
  color: var(--ws-sand);
}
.ws-practice-cards--forest .ws-practice-card p {
  color: rgba(240, 235, 224, 0.74);
}
.ws-practice-cards--forest .ws-practice-card__more {
  color: var(--ws-cream);
  border-bottom-color: var(--ws-sand);
}
.ws-practice-cards--forest .ws-practice-card__more:hover {
  color: var(--ws-sand);
}
/* reset core/image figure chrome inside cards */
.ws-practice-card__image.wp-block-image,
.ws-retreat-split__image.wp-block-image {
  margin: 0;
}

/* ============================================================
   Retreat split — forest copy treatment
   ============================================================ */
.ws-retreat-split__copy--forest {
  background: var(--ws-forest);
  color: rgba(240, 235, 224, 0.85);
}
.ws-retreat-split__copy--forest .ws-eyebrow {
  color: var(--ws-sand);
}
.ws-retreat-split__copy--forest h2 {
  color: var(--ws-cream);
}
.ws-retreat-split__copy--forest h2 em {
  color: var(--ws-sand);
}
.ws-retreat-split__copy--forest .ws-retreat-split__when {
  color: rgba(240, 235, 224, 0.78);
}
.ws-retreat-split__copy--forest p:not(.ws-eyebrow):not(.ws-retreat-split__when) {
  color: rgba(240, 235, 224, 0.8);
}

/* ============================================================
   Site header
   Base = solid cream bar (inner pages). Background/border are driven from CSS
   (not a block preset class) so the .home override can make it a translucent
   overlay — WP's has-*-background-color preset classes use !important and would
   otherwise win.
   ============================================================ */
.site-header {
  background: var(--ws-cream, #F0EBE0);
  border-bottom: 1px solid var(--ws-line, #DAD2C2);
}

/* ============================================================
   Homepage header overlay
   The site header floats translucently over the hero image, exactly as
   the handoff (rgba(240,235,224,.5) + blur(7px)). Only applies on the front
   page (body.home); inner pages keep the solid cream header above. The promo
   bar stays in normal flow above the hero.
   ============================================================ */
.home .site-header {
  position: absolute;
  top: var(--ws-promo-h, 2.5rem);
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(240, 235, 224, 0.5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(30, 59, 56, 0.10);
}
.home .ws-promo-bar {
  position: relative;
  z-index: 31;
}

/* ============================================================
   Header nav — active / current page state
   The core/navigation block marks the current item with
   .current-menu-item on the <li> and aria-current on the link.
   Match the handoff: forest text + a sand underline.
   ============================================================ */
.site-header .main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header .main-nav .wp-block-navigation-item__content[aria-current] {
  position: relative;
  color: var(--ws-forest);
}
.site-header .main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.site-header .main-nav .wp-block-navigation-item__content[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--ws-sand);
}

/* ============================================================
   ROOT FIX: neutralise WordPress's auto flow block-gap, SITE-WIDE.
   WP injects `margin-block-start: 24px` between every sibling block in flow
   layouts (and onto template parts). That was the single cause of: gaps
   between full-width sections, staggered/uneven grid items (cards & offers
   pushed down unevenly), and pushed-apart header/footer template parts.
   This theme spaces everything EXPLICITLY via component padding/margins, so we
   remove the auto gap globally. `.is-layout-flow > * + *` (specificity 0,1,0)
   beats core's `:where(.is-layout-flow) > * + *` (0,0,0) without !important.
   ============================================================ */
.is-layout-flow > * + *,
.wp-block-template-part,
.wp-block-template-part > * + * {
  margin-block-start: 0;
}

/* Restore basic vertical rhythm for RAW PROSE (e.g. the Privacy/Terms pages)
   without reintroducing gaps between full-width sections or grid items —
   only consecutive non-full-width blocks directly in the post content. */
.wp-block-post-content > :not(.alignfull) + :not(.alignfull) {
  margin-block-start: 1.2em;
}

/* The content <main> must sit flush under the header — WP's template-root flow
   adds margin-block-start:24px between the header template part and <main>,
   which pushed the whole page (and the hero) down. On home the header is an
   absolute overlay, so this lets the hero start right below the 40px promo bar,
   matching the handoff (hero top 41px). */
.wp-site-blocks > main,
main.wp-block-group {
  margin-block-start: 0;
}

/* ============================================================
   Classes page — booking CTA band (forest)
   Centred "see the timetable & book" call-to-action.
   ============================================================ */
.ws-book-cta {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  padding-block: 90px;
}
.ws-book-cta > * {
  margin-block-start: 0;
}
.ws-book-cta .ws-eyebrow {
  margin-bottom: 16px;
}
.ws-book-cta h2 {
  font-size: clamp(36px, 4.6vw, 54px);
  color: var(--ws-cream);
}
.ws-book-cta h2 em {
  font-style: italic;
  color: var(--ws-sand);
}
.ws-book-cta p:not(.ws-eyebrow) {
  color: rgba(240, 235, 224, 0.82);
  font-size: 16.5px;
  margin: 18px auto 32px;
  max-width: 48ch;
}

/* ============================================================
   Classes page — class styles grid ("Find your flow")
   2-up cards: small square photo beside copy.
   ============================================================ */
.ws-styles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}
.ws-style-card {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 26px;
  align-items: center;
}
.ws-style-card__media {
  aspect-ratio: 1;
  overflow: hidden;
  margin: 0;
}
.ws-style-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.ws-style-card:hover .ws-style-card__media img {
  transform: scale(1.05);
}
.ws-style-card__body > * {
  margin-block-start: 0;
}
.ws-style-card__lvl {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-sand);
  margin-bottom: 10px;
}
.ws-style-card h3 {
  font-size: 27px;
  margin-bottom: 6px;
  color: var(--ws-ink);
}
.ws-style-card p:not(.ws-style-card__lvl) {
  color: var(--ws-ink-soft);
  font-size: 14.5px;
  max-width: 42ch;
}

/* ============================================================
   Classes page — pricing grid
   ============================================================ */
.ws-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ws-line);
  border: 1px solid var(--ws-line);
}
.ws-price-card {
  background: var(--ws-paper);
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
}
.ws-price-card > * {
  margin-block-start: 0;
}
.ws-price-card--feature {
  background: var(--ws-forest);
  color: var(--ws-cream);
}
.ws-price-card__kicker {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-muted);
  margin-bottom: 18px;
}
.ws-price-card--feature .ws-price-card__kicker {
  color: var(--ws-sand);
}
.ws-price-card__amount {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 54px;
  line-height: 1;
  color: var(--ws-ink);
}
.ws-price-card--feature .ws-price-card__amount {
  color: var(--ws-cream);
}
.ws-price-card__per {
  font-size: 17px;
  font-style: italic;
  color: var(--ws-muted);
}
.ws-price-card--feature .ws-price-card__per {
  color: rgba(240, 235, 224, 0.7);
}
.ws-price-card__conc {
  font-size: 14px;
  color: var(--ws-ink-soft);
  margin-top: 10px;
}
.ws-price-card--feature .ws-price-card__conc {
  color: rgba(240, 235, 224, 0.78);
}
.ws-price-card__note {
  font-style: italic;
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 16px;
  color: var(--ws-muted);
  margin: 18px 0 26px;
}
.ws-price-card--feature .ws-price-card__note {
  color: rgba(240, 235, 224, 0.72);
}
/* push the button to the bottom of the card and left-align it */
.ws-price-card .wp-block-buttons {
  margin-top: auto;
  justify-content: flex-start;
}
.ws-price-note {
  text-align: center;
  color: var(--ws-muted);
  font-size: 13px;
  margin-top: 22px;
}

/* ============================================================
   Classes page — intro-pack welcome band (sand)
   ============================================================ */
.ws-intro-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background: var(--ws-sand);
  color: var(--ws-forest);
  padding: 48px 56px;
  margin-top: 40px;
}
.ws-intro-band__copy {
  max-width: 62ch;
}
.ws-intro-band__copy > * {
  margin-block-start: 0;
}
.ws-intro-band .ws-eyebrow {
  color: var(--ws-forest);
  opacity: 0.62;
  margin-bottom: 13px;
}
.ws-intro-band h3 {
  color: var(--ws-forest);
  font-size: clamp(29px, 3.3vw, 42px);
  line-height: 1.06;
}
.ws-intro-band__pound {
  font-style: italic;
}
.ws-intro-band p:not(.ws-eyebrow) {
  color: rgba(30, 59, 56, 0.78);
  font-size: 16px;
  margin-top: 13px;
  max-width: 46ch;
}
.ws-intro-band .wp-block-buttons {
  flex: 0 0 auto;
}

/* ============================================================
   Classes page — locations grid
   ============================================================ */
.ws-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.ws-loc-card {
  background: var(--ws-paper);
  border: 1px solid var(--ws-line);
  padding: 42px;
}
.ws-loc-card > * {
  margin-block-start: 0;
}
.ws-loc-card__area {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-sand);
  margin-bottom: 20px;
}
.ws-loc-card h3 {
  font-size: 28px;
  margin-bottom: 4px;
  color: var(--ws-ink);
}
.ws-loc-card__address {
  color: var(--ws-ink-soft);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.ws-loc-card__map {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-teal-deep);
  border-bottom: 1px solid var(--ws-sand);
  padding-bottom: 3px;
  text-decoration: none;
}

/* ============================================================
   Book page — timetable section ("Upcoming classes")
   Left-aligned eyebrow + heading with studio chips on the right,
   above the Momence embed / placeholder region.
   ============================================================ */
.ws-tt {
  padding: 72px 0 90px;
}
.ws-tt__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.ws-tt__head > * {
  margin-block-start: 0;
}
.ws-tt__head .ws-eyebrow {
  margin-bottom: 14px;
}
.ws-tt__head h2 {
  font-size: clamp(32px, 4vw, 46px);
}
.ws-tt__head h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-tt__studios {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ws-chip {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ws-ink-soft);
  border: 1px solid var(--ws-line);
  padding: 9px 16px;
  background: var(--ws-paper);
}

/* Momence embed / placeholder region */
.ws-tt-embed {
  position: relative;
  border: 1px solid var(--ws-line);
  background: var(--ws-paper);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 32px;
  overflow: hidden;
}
.ws-tt-embed__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-muted);
  border: 1px solid var(--ws-line);
  padding: 6px 11px;
  background: var(--ws-cream);
}
.ws-tt-embed__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ws-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ws-line) 1px, transparent 1px);
  background-size: 100% 64px, 14.28% 100%;
  opacity: 0.4;
  pointer-events: none;
}
.ws-tt-embed__inner {
  position: relative;
  max-width: 46ch;
}
.ws-tt-embed__inner > * {
  margin-block-start: 0;
}
.ws-tt-embed__cal {
  width: 56px;
  height: 56px;
  margin: 0 auto 26px;
  color: var(--ws-sand);
}
.ws-tt-embed h3 {
  font-size: 30px;
  margin-bottom: 12px;
  color: var(--ws-ink);
}
.ws-tt-embed p {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
}
.ws-tt-embed__note {
  margin-top: 24px;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ws-muted);
}
.ws-tt-embed__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

/* ============================================================
   Book page — "Reserve your place in seconds" (forest)
   Two-column: booking copy + app badges on the left, a bordered
   "How booking works" numbered-steps panel on the right.
   ============================================================ */
.ws-reserve {
  background: var(--ws-forest);
  color: var(--ws-cream);
}
.ws-reserve__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 90px 0;
}
.ws-reserve__copy > * {
  margin-block-start: 0;
}
.ws-reserve .ws-eyebrow {
  color: var(--ws-sand);
}
.ws-reserve h2 {
  color: var(--ws-cream);
  font-size: clamp(34px, 4.2vw, 48px);
  margin-top: 14px;
}
.ws-reserve h2 em {
  font-style: italic;
  color: var(--ws-sand);
}
.ws-reserve__copy p:not(.ws-eyebrow):not(.ws-reserve__small) {
  color: rgba(240, 235, 224, 0.82);
  font-size: 16px;
  margin: 18px 0;
  max-width: 46ch;
}
.ws-reserve__badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}
.ws-reserve__badges img {
  height: 52px;
  width: auto;
}
.ws-reserve__small {
  font-size: 13px;
  color: rgba(240, 235, 224, 0.6);
  margin-top: 24px;
  max-width: 46ch;
}
.ws-reserve__small a {
  color: var(--ws-sand);
  border-bottom: 1px solid transparent;
  text-decoration: none;
}
.ws-reserve__small a:hover {
  border-color: var(--ws-sand);
}
.ws-reserve__panel {
  background: rgba(240, 235, 224, 0.06);
  border: 1px solid rgba(240, 235, 224, 0.16);
  padding: 44px;
}
.ws-reserve__panel > * {
  margin-block-start: 0;
}
.ws-reserve__panel h3 {
  color: var(--ws-cream);
  font-size: 30px;
  margin-bottom: 8px;
}
.ws-reserve__steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 30px;
  padding: 0;
}
.ws-reserve__steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 52px;
  border-top: 1px solid rgba(240, 235, 224, 0.12);
  color: rgba(240, 235, 224, 0.86);
  font-size: 15px;
}
.ws-reserve__steps li:first-child {
  border-top: none;
}
.ws-reserve__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ws-sand);
  color: var(--ws-sand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 17px;
}
.ws-reserve__panel .wp-block-buttons {
  margin-top: 0;
}
.ws-reserve__panel .ws-btn--block,
.ws-reserve__panel .ws-btn--block > .wp-block-button__link {
  width: 100%;
  justify-content: center;
}

/* ============================================================
   Workshops page — upcoming workshop cards
   2-up cards: 16/10 photo with date + status tag, then level,
   title, teacher, blurb, meta row and a price / reserve footer.
   ============================================================ */
.ws-wk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}
.ws-wk-card {
  display: flex;
  flex-direction: column;
  background: var(--ws-paper);
  border: 1px solid var(--ws-line);
  overflow: hidden;
}
.ws-wk-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
}
.ws-wk-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.ws-wk-card:hover .ws-wk-card__media img {
  transform: scale(1.04);
}
.ws-wk-card__date {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(30, 59, 56, 0.88);
  color: var(--ws-cream);
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 15px;
}
.ws-wk-card__status {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(200, 165, 126, 0.95);
  color: var(--ws-ink);
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 13px;
}
.ws-wk-card__body {
  padding: 34px 36px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ws-wk-card__body > * {
  margin-block-start: 0;
}
.ws-wk-card__lvl {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-sand);
  margin-bottom: 12px;
}
.ws-wk-card h3 {
  font-size: 31px;
  margin-bottom: 6px;
  color: var(--ws-ink);
}
.ws-wk-card h3 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-wk-card__with {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ws-muted);
  margin-bottom: 16px;
}
.ws-wk-card__blurb {
  color: var(--ws-ink-soft);
  font-size: 15px;
  margin-bottom: 22px;
  max-width: 48ch;
}
.ws-wk-card__meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--ws-line);
}
.ws-wk-card__meta .ws-wk-m {
  font-size: 14px;
  color: var(--ws-ink-soft);
}
.ws-wk-card__meta .ws-wk-m b {
  display: block;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.ws-wk-card__row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ws-wk-card__price {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 34px;
  color: var(--ws-ink);
  line-height: 1;
}
.ws-wk-card--past {
  opacity: 0.62;
}

/* ============================================================
   Workshops page — "Why a workshop?" forest band
   3-up columns with a roman-numeral marker.
   ============================================================ */
.ws-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.ws-why > * {
  margin-block-start: 0;
}
.ws-why__num {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ws-sand);
  margin-bottom: 14px;
}
.ws-why h3 {
  color: var(--ws-cream);
  font-size: 27px;
  margin-bottom: 10px;
}
.ws-why p:not(.ws-why__num) {
  color: rgba(240, 235, 224, 0.8);
  font-size: 15px;
  max-width: 34ch;
}

/* ============================================================
   Workshops page — private / bespoke split CTA
   Photo beside a centred copy panel.
   ============================================================ */
.ws-host {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  min-height: 440px;
  border: 1px solid var(--ws-line);
  overflow: hidden;
  background: var(--ws-paper);
}
.ws-host__media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  margin: 0;
}
.ws-host__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-host__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 58px;
}
.ws-host__body > * {
  margin-block-start: 0;
}
.ws-host__body .ws-eyebrow {
  margin-bottom: 16px;
}
.ws-host h2 {
  font-size: clamp(34px, 3.8vw, 46px);
  color: var(--ws-ink);
}
.ws-host h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-host__body p:not(.ws-eyebrow) {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  margin: 16px 0 26px;
  max-width: 44ch;
}

/* ============================================================
   About page — story split
   Photo beside a cream-2 copy panel with eyebrow, headline,
   founding date, narrative and a "meet the teachers" link.
   ============================================================ */
.ws-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 560px;
}
.ws-story__media {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  margin: 0;
}
.ws-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-story__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 78px 72px;
  background: var(--ws-cream-2);
}
.ws-story__body > * {
  margin-block-start: 0;
}
.ws-story h2 {
  font-size: clamp(36px, 4.4vw, 52px);
  margin: 14px 0 8px;
  color: var(--ws-ink);
}
.ws-story h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-story__since {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ws-muted);
  margin-bottom: 20px;
}
.ws-story__body p:not(.ws-eyebrow):not(.ws-story__since) {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  margin-bottom: 14px;
  max-width: 46ch;
}
.ws-story__body .wp-block-buttons {
  margin-top: 10px;
}

/* ============================================================
   About page — values grid
   2x2 paper cards on hairline gridlines, each numbered.
   ============================================================ */
.ws-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ws-line);
  border: 1px solid var(--ws-line);
}
.ws-value {
  background: var(--ws-paper);
  padding: 46px 44px;
}
.ws-value > * {
  margin-block-start: 0;
}
.ws-value__num {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ws-sand);
  margin-bottom: 14px;
}
.ws-value h3 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--ws-ink);
}
.ws-value h3 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-value p:not(.ws-value__num) {
  color: var(--ws-ink-soft);
  font-size: 15px;
  max-width: 42ch;
}

/* ============================================================
   About page — "the people" teachers CTA (inside a forest section)
   Photo beside copy, vertically centred.
   ============================================================ */
.ws-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.ws-people__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}
.ws-people__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-people__body > * {
  margin-block-start: 0;
}
.ws-people__body .ws-eyebrow {
  margin-bottom: 16px;
}
.ws-people h2 {
  color: var(--ws-cream);
  font-size: clamp(34px, 4vw, 50px);
}
.ws-people h2 em {
  font-style: italic;
  color: var(--ws-sand);
}
.ws-people__body p:not(.ws-eyebrow) {
  color: rgba(240, 235, 224, 0.82);
  font-size: 16px;
  margin: 16px 0 26px;
  max-width: 42ch;
}

/* ============================================================
   Teachers archive — founder feature rows
   Full-bleed two-column profile rows (large photo + bio panel) that
   alternate sides. Mirrors the handoff .founder treatment. The rows live
   on the founders query-loop <ul.wp-block-post-template>; each <li> is a
   .ws-founder grid. Odd rows: photo left + tinted panel. Even rows: photo
   right + paper panel.
   ============================================================ */
.ws-founders .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-founders .wp-block-post-template > li {
  margin: 0;
}
.ws-founder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 600px;
}
.ws-founder__ph {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  margin: 0;
}
/* The core featured-image <figure> is position:relative and would collapse to
   zero height (its <img> is absolutely positioned). Stretch the figure to fill
   the photo cell, then let the image cover it. */
.ws-founder__ph .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
}
.ws-founder__ph .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}
.ws-founder__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-founder__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 78px 72px;
  background: var(--ws-cream-2);
}
.ws-founder__body > * {
  margin-block: 0;
}
.ws-founder__role {
  margin-bottom: 16px;
}
.ws-founder__name {
  font-size: clamp(38px, 4.4vw, 54px);
  line-height: 1.04;
  color: var(--ws-ink);
  margin-bottom: 6px;
}
.ws-founder__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.ws-founder__name a:hover {
  color: var(--ws-teal-deep);
}
.ws-founder__name em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-founder__creds {
  font-family: var(--wp--preset--font-family--cormorant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ws-muted);
  margin: 6px 0 22px;
}
.ws-founder__bio p {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 46ch;
}
.ws-founder__bio p:last-child {
  margin-bottom: 0;
}
/* Even rows mirror the layout: body left, photo right, paper panel. */
.ws-founders .wp-block-post-template > li:nth-child(even) .ws-founder__ph {
  order: 2;
}
.ws-founders .wp-block-post-template > li:nth-child(even) .ws-founder__body {
  order: 1;
  background: var(--ws-paper);
}

/* ============================================================
   Teachers archive — guest grid
   Two-up rows: circular featured image beside name + short bio.
   Mirrors the handoff .guests / .guest treatment. The grid lives on the
   query-loop <ul.wp-block-post-template>; each card is a .ws-guest group.
   ============================================================ */
.ws-teachers-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-teachers-grid .wp-block-post-template > li {
  margin: 0;
}
.ws-guest {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: start;
}
.ws-guest__ph {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.ws-guest__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.7s ease;
}
.ws-guest:hover .ws-guest__ph img {
  transform: scale(1.06);
}
.ws-guest__text > * {
  margin-block-start: 0;
}
.ws-guest__name {
  font-size: 25px;
  margin-bottom: 8px;
  color: var(--ws-ink);
}
.ws-guest__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.ws-guest__name a:hover {
  color: var(--ws-teal-deep);
}
.ws-guest__spec {
  color: var(--ws-ink-soft);
  font-size: 15px;
  max-width: 34ch;
}
.ws-guest__bio {
  margin: 0;
}
.ws-guest__bio,
.ws-guest__bio p {
  color: var(--ws-ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 42ch;
}
.ws-guest__bio p {
  margin: 0;
}

/* ============================================================
   Retreats archive — feature cards
   Large editorial cards: photo with corner tag beside a copy panel
   (eyebrow, title, dates, blurb, meta row, CTAs). Mirrors handoff .feature.
   ============================================================ */
.ws-features .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 64px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ws-features .wp-block-post-template > li {
  margin: 0;
}
.ws-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 560px;
  border: 1px solid var(--ws-line);
  background: var(--ws-paper);
  overflow: hidden;
}
.ws-feature__ph {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  margin: 0;
}
/* The core featured-image <figure> is position:relative and would collapse to
   zero height (its <img> is absolutely positioned). Stretch the figure to fill
   the photo cell, then let the image cover it. */
.ws-feature__ph .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
}
.ws-feature__ph .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}
.ws-feature__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.ws-feature:hover .ws-feature__ph img {
  transform: scale(1.04);
}
.ws-feature__tag {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  background: rgba(30, 59, 56, 0.86);
  color: var(--ws-cream);
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 16px;
  margin: 0;
}
.ws-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 60px;
}
.ws-feature__body > * {
  margin-block-start: 0;
}
.ws-feature__body .ws-eyebrow {
  margin-bottom: 16px;
}
.ws-feature__body h2 {
  font-size: clamp(36px, 4.2vw, 52px);
  margin-bottom: 6px;
  color: var(--ws-ink);
}
.ws-feature__body h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-feature__when {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 21px;
  color: var(--ws-muted);
  margin-bottom: 8px;
}
.ws-feature__desc {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  margin-bottom: 18px;
  max-width: 46ch;
}
.ws-feature__meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ws-line);
}
.ws-feature__m > * {
  margin-block-start: 0;
}
.ws-feature__m {
  font-size: 14px;
  color: var(--ws-ink-soft);
}
.ws-feature__mlabel {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.ws-feature__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Retreats archive — centred intro copy + "on the horizon" note */
.ws-intro-copy {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  color: var(--ws-ink-soft);
  font-size: 16.5px;
}
.ws-upcoming-note {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--ws-muted);
  max-width: 26ch;
  margin: 0 auto 26px;
  line-height: 1.3;
}

/* ============================================================
   Single retreat — full-bleed photographic hero
   Core/cover with featured image; title + dates bottom-centred over a
   bottom-weighted gradient. Mirrors handoff .r-hero.
   ============================================================ */
.ws-r-hero.wp-block-cover {
  height: 72vh;
  min-height: 520px;
  max-height: 720px;
  overflow: hidden;
  color: var(--ws-cream);
  padding: 0;
  border-radius: 0;
  align-items: flex-end;
}
.ws-r-hero > .wp-block-cover__background {
  display: none;
}
.ws-r-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 32, 30, 0.08) 0%,
    rgba(20, 32, 30, 0.02) 22%,
    rgba(20, 32, 30, 0) 48%,
    rgba(20, 32, 30, 0.58) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.ws-r-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: 54px;
  text-align: center;
}
.ws-r-hero .wp-block-cover__inner-container > * {
  margin-block-start: 0;
}
.ws-r-hero h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 300;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.ws-r-hero h1 em {
  font-style: italic;
  color: #fff;
}
.ws-r-hero__dates {
  display: flex;
  gap: 0.35em;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: rgba(240, 235, 224, 0.94);
  margin-top: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.ws-r-hero__dates p {
  margin: 0;
}

/* ============================================================
   Single retreat — editorial body (post content)
   Ported 1:1 from the handoff inline CSS (.r-intro / .r-split /
   .gallery / .r-pricing / .info-grid / .closing). Selectors
   re-targeted to .ws-r-* block markup; design tokens preserved.
   ============================================================ */

/* Lead intro */
.ws-r-intro {
  text-align: center;
  padding: 84px 0 70px;
  background: var(--ws-cream);
}
.ws-r-intro h2 {
  font-size: clamp(34px, 4.4vw, 52px);
  /* Span the full width like the handoff (the constrained block layout would
     otherwise cap it at content-size and wrap "Soul." to a second line). */
  max-width: none;
}
.ws-r-intro h2 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-r-intro .ws-r-lead {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(21px, 2.6vw, 28px);
  font-style: italic;
  color: var(--ws-muted);
  max-width: 30ch;
  margin: 20px auto 0;
  line-height: 1.34;
}

/* Editorial split rows */
.ws-r-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px;
}
.ws-r-split__ph {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  margin: 0;
}
.ws-r-split__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-r-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px 70px;
}
.ws-r-split--reverse .ws-r-split__ph {
  order: 2;
}
.ws-r-split--reverse .ws-r-split__body {
  order: 1;
}
.ws-r-split--tint .ws-r-split__body {
  background: var(--ws-cream-2);
}
.ws-r-split--paper .ws-r-split__body {
  background: var(--ws-paper);
}
.ws-r-split--forest .ws-r-split__body {
  background: var(--ws-forest);
  color: var(--ws-cream);
}
.ws-r-split--forest h3,
.ws-r-split--forest h4 {
  color: var(--ws-cream);
}
.ws-r-split--forest .ws-eyebrow {
  color: var(--ws-sand);
}
.ws-r-split h3 {
  font-size: clamp(30px, 3.6vw, 42px);
  margin-bottom: 18px;
}
.ws-r-split h3 em {
  font-style: italic;
  color: var(--ws-teal-deep);
}
.ws-r-split--forest h3 em {
  color: var(--ws-sand);
}
.ws-r-split h4 {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-sand);
  margin: 26px 0 10px;
}
.ws-r-split p:not(.ws-eyebrow) {
  color: var(--ws-ink-soft);
  font-size: 15.5px;
  margin-bottom: 12px;
  max-width: 48ch;
}
.ws-r-split--forest p:not(.ws-eyebrow) {
  color: rgba(240, 235, 224, 0.82);
}
.ws-r-split ul {
  list-style: none;
  margin: 6px 0 4px;
  max-width: 48ch;
  padding: 0;
}
.ws-r-split li {
  position: relative;
  padding: 7px 0 7px 24px;
  color: var(--ws-ink-soft);
  font-size: 15px;
  border-bottom: 1px solid var(--ws-line);
}
.ws-r-split--forest li {
  color: rgba(240, 235, 224, 0.84);
  border-color: rgba(240, 235, 224, 0.14);
}
.ws-r-split li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 7px;
  height: 7px;
  background: var(--ws-sand);
  border-radius: 50%;
}

/* Daily rhythm timeline (forest split, time + description rows) */
.ws-r-rhythm li {
  display: flex;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(240, 235, 224, 0.14);
}
.ws-r-rhythm li::before {
  display: none;
}
.ws-r-rhythm .ws-r-rhythm__t {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ws-sand);
  min-width: 74px;
}
.ws-r-rhythm .ws-r-rhythm__d {
  color: rgba(240, 235, 224, 0.86);
  font-size: 15px;
}

/* Gallery */
.ws-r-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ws-r-gallery__g {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  margin: 0;
}
.ws-r-gallery__g--wide {
  grid-column: span 2;
  aspect-ratio: 2;
}
.ws-r-gallery__g img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.ws-r-gallery__g:hover img {
  transform: scale(1.06);
}

/* Pricing */
.ws-r-pricing {
  max-width: 760px;
  margin: 0 auto;
}
.ws-r-rooms {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 26px;
}
.ws-r-rooms th,
.ws-r-rooms td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ws-line);
  font-size: 16px;
}
.ws-r-rooms th {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.ws-r-rooms td:last-child,
.ws-r-rooms th:last-child {
  text-align: right;
}
.ws-r-rooms__price {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 24px;
  color: var(--ws-ink);
}
.ws-r-rooms__room {
  font-weight: 400;
}
.ws-r-rooms__sub {
  display: block;
  font-size: 13px;
  color: var(--ws-muted);
  margin-top: 2px;
}
.ws-r-book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  justify-content: center;
}
.ws-r-limit-note {
  text-align: center;
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ws-muted);
  margin-bottom: 8px;
}
.ws-r-fine-note {
  text-align: center;
  color: var(--ws-muted);
  font-size: 13px;
  margin-top: 26px;
  max-width: 60ch;
  margin-inline: auto;
}

/* Further information — Q&A grid */
.ws-r-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 56px;
}
.ws-r-info-block h4 {
  font-size: 23px;
  margin-bottom: 8px;
}
.ws-r-info-block p {
  color: var(--ws-ink-soft);
  font-size: 15px;
  margin-bottom: 8px;
}
.ws-r-info-block ul {
  margin: 4px 0 0 0;
  padding-left: 18px;
  color: var(--ws-ink-soft);
  font-size: 15px;
}
.ws-r-info-block ol {
  margin: 4px 0 0 0;
  padding-left: 20px;
  color: var(--ws-ink-soft);
  font-size: 15px;
}
.ws-r-info-block li {
  padding: 4px 0;
}

/* Closing line (inside a forest section) */
.ws-r-closing {
  text-align: center;
  padding: 10px 0 6px;
}
.ws-r-closing h2 {
  font-size: clamp(34px, 4.4vw, 52px);
}
.ws-r-closing h2 em {
  font-style: italic;
  color: var(--ws-sand);
}

/* Single-retreat responsive (matches handoff @900px) */
@media (max-width: 900px) {
  .ws-r-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ws-r-split--reverse .ws-r-split__ph {
    order: 0;
  }
  .ws-r-split--reverse .ws-r-split__body {
    order: 0;
  }
  .ws-r-split__body {
    padding: 48px 30px;
  }
  .ws-r-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .ws-r-gallery__g--wide {
    grid-column: span 2;
  }
  .ws-r-info-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */
@media (max-width: 1020px) {
  /* Handoff hides the desktop nav AND the "Book a class" button below 1020px,
     swapping to a hamburger drawer (site.css: .site-header nav.main,.site-header
     .book{display:none}). The WP header uses core/navigation (.main-nav,
     overlayMenu:"mobile") + a button block (.book-cta). Core's nav collapses at
     600px by default, so we push that collapse to 1020px to match the handoff. */
  .site-header .book-cta {
    display: none;
  }
  /* Hide the inline nav links (core shows them via @media(min-width:600px)) */
  .site-header .main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  /* Show the hamburger toggle (core hides it via @media(min-width:600px)) */
  .site-header .main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

@media (max-width: 980px) {
  .ws-practice-cards__grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .ws-container,
  .ws-container--narrow {
    padding-inline: 26px;
  }
  .ws-hero {
    /* Handoff (Home .hero @900): collapse to content height with a 128px top
       pad that clears the absolute header; NOT a 78vh viewport block. */
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .ws-hero__inner {
    padding-top: 128px;
    padding-bottom: 56px;
  }
  .ws-hero-tagline {
    padding: 44px 26px;
  }
  .ws-section {
    padding-block: 64px;
  }
  .ws-page-hero {
    padding: 60px 0 48px;
  }
  .ws-offer-grid {
    grid-template-columns: 1fr;
  }
  .ws-offer {
    padding: 40px;
  }
  .ws-retreat-split {
    grid-template-columns: 1fr;
  }
  .ws-retreat-split__image {
    min-height: 340px;
  }
  .ws-retreat-split__copy {
    padding: 54px 32px;
  }
  .ws-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .ws-footer__brand {
    grid-column: 1 / -1;
  }
  .ws-book-cta {
    padding-block: 60px;
  }
}

/* Classes page — collapse multi-column grids */
@media (max-width: 900px) {
  .ws-styles-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ws-price-grid {
    grid-template-columns: 1fr;
  }
  .ws-loc-grid {
    grid-template-columns: 1fr;
  }
}

/* Workshops page — collapse multi-column grids */
@media (max-width: 900px) {
  .ws-wk-grid {
    grid-template-columns: 1fr;
  }
  .ws-why-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ws-host {
    grid-template-columns: 1fr;
  }
  .ws-host__media {
    min-height: 300px;
  }
  .ws-host__body {
    padding: 44px 30px;
  }
}

/* About page — collapse split + grid layouts */
@media (max-width: 900px) {
  .ws-story {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ws-story__body {
    padding: 48px 30px;
  }
  .ws-values-grid {
    grid-template-columns: 1fr;
  }
  .ws-people {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Book page — collapse reserve grid + shrink embed placeholder */
@media (max-width: 900px) {
  .ws-reserve__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 0;
  }
  .ws-reserve__panel {
    padding: 32px;
  }
  .ws-tt-embed {
    min-height: 480px;
    padding: 56px 24px;
  }
}

/* Classes page — intro band stacks */
@media (max-width: 760px) {
  .ws-intro-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 38px 32px;
    gap: 28px;
  }
}

/* Classes page — style card photo moves above copy */
@media (max-width: 520px) {
  .ws-style-card {
    grid-template-columns: 1fr;
  }
  .ws-style-card__media {
    aspect-ratio: 16 / 9;
  }
}

/* Contact page — details column stacks above the form panel */
@media (max-width: 900px) {
  .ws-contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* Teachers archive — founder rows stack (photo always on top) */
@media (max-width: 900px) {
  .ws-founder {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ws-founder__ph {
    min-height: 380px;
  }
  .ws-founder__body {
    padding: 48px 30px;
  }
  .ws-founders .wp-block-post-template > li:nth-child(even) .ws-founder__ph {
    order: 0;
  }
  .ws-founders .wp-block-post-template > li:nth-child(even) .ws-founder__body {
    order: 0;
  }
}

/* Teachers archive + Retreats archive — collapse to a single column */
@media (max-width: 900px) {
  .ws-teachers-grid .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .ws-feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ws-feature__ph {
    min-height: 320px;
  }
  .ws-feature__body {
    padding: 44px 30px;
  }
}

/* Teachers archive — stack photo above name on the narrowest screens */
@media (max-width: 520px) {
  .ws-guest {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 22px;
  }
  .ws-guest__ph {
    width: 160px;
  }
  .ws-guest__spec {
    margin-inline: auto;
  }
}

/* Contact form — paired fields stack */
@media (max-width: 560px) {
  .ws-contact-form .ws-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ws-contact-form {
    padding: 32px;
  }
}

/* ============================================================
   Momence booking widget — brand theming
   Token names verified by reading host-schedule.js. Legacy --momenceColor*
   (accent/background) + modern --momence-* tokens (font, text greys, separator).
   Set on the .wildsoul-momence wrapper AND :root so they beat the widget's own
   injected :root defaults for everything rendered inside the embed.
   ============================================================ */
:root,
.wildsoul-momence {
  /* Accent (buttons, active states) = Wild Soul teal */
  --momenceColorPrimary: 69, 122, 127;
  --momence-primary: #457A7F;
  --momenceColorBackground: #fbfbfb;
  --momence-background: #fbfbfb;
  --momenceColorWhite: 255, 255, 255;
  --momence-white: #ffffff;
  --momenceColorBlack: 3, 1, 13;

  /* Match the site font (widget default is 'Inter' — coincidentally close to Jost) */
  --momence-font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);

  /* Text + lines in the brand's neutral tones (widget defaults are flat greys) */
  --momence-primary-color: var(--ws-ink, #1B2624);
  --momence-secondary-color: var(--ws-ink-soft, #45534F);
  --momence-tertiary-color: var(--ws-muted, #6B7A77);
  --momence-session-separator-color: var(--ws-line, #DAD2C2);
}

/* The widget hardcodes all font-sizes in px inside a closed shadow DOM, so we
   can't enlarge text alone. Scale the whole embed up a touch instead — adjust
   this single value (1.0 = default) to taste. */
.wildsoul-momence {
  zoom: 1.08;
}

/* ============================================================
   Single retreat — editorial body: TRUE full bleed + flush sections
   The body wrapper carries root padding (≈48px inset) and post-content is a
   constrained layout, so its alignfull sections were inset AND got the 24px
   block-gap. Force the wrapper/post-content to zero side padding and the
   sections to span the viewport with no inter-section gap. Each section sets
   its own inner max-width/padding (matching the handoff).
   ============================================================ */
.ws-r-body,
.ws-r-body > .wp-block-post-content {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.ws-r-body > .wp-block-post-content > * {
  margin-left: 0;
  margin-right: 0;
  margin-block-start: 0;
  max-width: none;
}

/* ============================================================
   SHOP — WooCommerce archive (Shop page)
   Ported from design_handoff_wild_soul_site/designs/Wild Soul - Shop.html
   (.shop-intro / .shop-grid / .prod / .mto / .soon). The handoff grid maps
   to the woocommerce/product-collection > product-template <ul>; each product
   <li> wraps a .ws-prod card built from WC product blocks.
   ============================================================ */

/* Centred intro paragraph above the grid */
.ws-shop-intro {
  text-align: center;
  padding: 6px 0 2px;
}
.ws-shop-intro p {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--ws-ink-soft);
  font-size: 16.5px;
}

/* Category filter row (handoff .filters). Rendered by the wild-soul/shop-filter
   dynamic block; pills link to /shop/ and the product-category archives, and
   the current view carries .is-active. */
.ws-shop-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 38px 0 6px;
}
.ws-pill {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-ink-soft);
  background: transparent;
  border: 1px solid var(--ws-line);
  padding: 11px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ws-pill:hover {
  border-color: var(--ws-sand);
  color: var(--ws-forest);
}
.ws-pill.is-active {
  background: var(--ws-forest);
  border-color: var(--ws-forest);
  color: var(--ws-cream);
}

/* Product grid — override the product-template's flex layout with the exact
   handoff CSS grid (3-col, 34px row / 30px column gaps). !important is needed
   to beat WooCommerce's generated .is-layout-flex container rules. */
.ws-shop-collection .wp-block-woocommerce-product-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.ws-shop-collection .wp-block-woocommerce-product-template > li {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
/* product-collection wrapper itself carries no extra chrome */
.ws-shop-collection {
  margin: 0;
}

/* Product card (handoff .prod) */
.ws-prod {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ws-paper);
  border: 1px solid var(--ws-line);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ws-prod:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -26px rgba(27, 38, 36, 0.45);
}

/* Image area (handoff .prod .ph). The 4/5 ratio is enforced on the <img>
   itself (a replaced element where aspect-ratio is rock-solid) rather than on
   an empty container, so the panel always reserves the correct height. */
.ws-prod__ph {
  position: relative;
  overflow: hidden;
  background: var(--ws-cream-2);
}
.ws-prod__ph .wp-block-woocommerce-product-image {
  margin: 0;
  display: block;
}
.ws-prod__ph .wp-block-woocommerce-product-image a {
  display: block;
}
.ws-prod__ph .wp-block-woocommerce-product-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ws-prod__ph .wc-block-components-product-image__inner-container {
  display: none;
}
/* "Made to order" tag (handoff .prod .tag) */
.ws-prod__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin: 0;
  background: rgba(251, 247, 238, 0.92);
  color: var(--ws-ink-soft);
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  font-weight: 500;
}

/* Wishlist control (handoff .prod .fav) — decorative ♡ top-right of the card */
.ws-prod__fav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(251, 247, 238, 0.9);
  color: var(--ws-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 34px;
  text-align: center;
  padding: 0;
  transition: color 0.2s, background 0.2s;
}
.ws-prod__fav:hover {
  color: var(--ws-sand);
  background: #fff;
}

/* Card image placeholder (handoff <image-slot> empty state) — a small line
   icon + caption on the cream-2 panel, used for products with no featured
   image. Reserves the same 4/5 ratio as a real product image. */
.ws-prod__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 12px;
  text-align: center;
  color: var(--ws-muted);
  margin: 0;
}
.ws-prod__phicon {
  opacity: 0.45;
}
.ws-prod__phcaption {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ws-muted);
  max-width: 90%;
}

/* Card body (handoff .prod .body) */
.ws-prod__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ws-prod__body > * {
  margin-block-start: 0;
}
/* Category / material eyebrow (handoff .prod .cat) */
.ws-prod__cat {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-sand);
  margin: 0 0 9px;
}
/* Product name (handoff .prod h3) */
.ws-prod__title {
  font-size: 25px;
  line-height: 1.1;
  margin: 0 0 5px;
  color: var(--ws-ink);
}
.ws-prod__title a {
  color: inherit;
  text-decoration: none;
}
.ws-prod__title a:hover {
  color: var(--ws-teal-deep);
}
/* Teal-italic accent on the product name's last word (handoff .prod h3 em) */
.ws-prod__accent {
  font-style: italic;
  color: var(--ws-teal-deep);
}
/* Description (handoff .prod .desc) */
.ws-prod__desc {
  color: var(--ws-muted);
  font-size: 14px;
  margin: 0 0 20px;
}
/* Price + add-to-bag row (handoff .prod .row) */
.ws-prod__row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--ws-line);
}
/* Price (handoff .prod .price) */
.ws-prod__price,
.ws-prod__price .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 30px;
  color: var(--ws-ink);
  line-height: 1;
  margin: 0;
}
.ws-prod__price ins {
  text-decoration: none;
}
.ws-prod__price del {
  font-size: 0.6em;
  color: var(--ws-muted);
  opacity: 0.7;
}
/* Add to bag button (handoff .prod .add) */
.ws-prod__add {
  margin: 0;
}
.ws-prod__add .wp-block-button__link,
.ws-prod__add a.button {
  display: inline-block;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-forest);
  background: transparent;
  border: 1px solid rgba(30, 59, 56, 0.32);
  border-radius: 0;
  padding: 11px 18px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ws-prod__add .wp-block-button__link:hover,
.ws-prod__add a.button:hover,
.ws-prod__add .added_to_cart {
  background: var(--ws-forest);
  color: var(--ws-cream);
  border-color: var(--ws-forest);
}
/* "View bag" link WC appends after adding — keep it subtle */
.ws-prod__add .added_to_cart {
  margin-left: 8px;
  font-size: 10px;
}

/* Responsive — exact handoff breakpoints */
@media (max-width: 1020px) {
  .ws-shop-collection .wp-block-woocommerce-product-template {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .ws-shop-collection .wp-block-woocommerce-product-template {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   "Mindful by design" forest band — 3-up made-to-order grid
   (handoff .mto) — sits inside .ws-section--forest.
   ------------------------------------------------------------ */
.ws-mto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.ws-mto__item {
  text-align: center;
}
.ws-mto__item > * {
  margin-block-start: 0;
}
.ws-mto__num {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ws-sand);
  margin: 0 0 12px;
}
.ws-mto__item h3 {
  color: var(--ws-cream);
  font-size: 25px;
  margin: 0 0 10px;
}
.ws-mto__item p {
  color: rgba(240, 235, 224, 0.8);
  font-size: 15px;
  max-width: 34ch;
  margin: 0 auto;
}
/* on the forest band the section-head accent should be sand, not teal */
.ws-section--forest .ws-section-head h2 em {
  color: var(--ws-sand);
}
@media (max-width: 900px) {
  .ws-mto {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ------------------------------------------------------------
   "More to come" strip (handoff .soon)
   ------------------------------------------------------------ */
.ws-soon {
  text-align: center;
}
.ws-soon > .ws-container--narrow > * {
  margin-block-start: 0;
}
.ws-soon__note {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(23px, 2.8vw, 32px);
  color: var(--ws-muted);
  max-width: 30ch;
  margin: 0 auto 22px;
  line-height: 1.3;
}

/* ============================================================
   WooCommerce — global branding (single product, cart, checkout,
   my account). No bespoke handoff design exists for these, so we
   inherit the Sanctuary palette/typography and remove WC's default
   rounded/grey chrome so nothing looks off-brand or broken.
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-forest);
  color: var(--ws-cream);
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background: var(--ws-forest-2);
  color: var(--ws-cream);
}
/* secondary / alt buttons */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--ws-forest);
  color: var(--ws-cream);
}

/* Prices in Cormorant across WC */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
}

/* Single product page polish */
.ws-single-product .ws-product-title {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.05;
  margin: 0 0 8px;
}
.ws-single-product .ws-product-price,
.ws-single-product .ws-product-price .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: 34px;
  color: var(--ws-teal-deep);
}
.ws-single-product .wp-block-woocommerce-breadcrumbs {
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ws-muted);
  margin-bottom: 28px;
}
.ws-single-product .wp-block-woocommerce-breadcrumbs a {
  color: var(--ws-muted);
}
.ws-single-product .wp-block-woocommerce-breadcrumbs a:hover {
  color: var(--ws-teal-deep);
}
/* quantity input + form spacing */
.ws-single-product .quantity input.qty {
  border: 1px solid var(--ws-line);
  border-radius: 0;
  background: var(--ws-paper);
  padding: 12px 8px;
  font-family: var(--wp--preset--font-family--jost, 'Jost', system-ui, sans-serif);
}
.ws-single-product form.cart {
  margin-top: 24px;
}
/* related products heading */
.ws-single-product .wp-block-woocommerce-related-products h2,
.ws-single-product .related.products > h2 {
  font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  margin-top: 56px;
}
/* ============================================================
   Retreats archive — alternate feature cards (handoff .feature.reverse):
   every even card gets the image on the RIGHT, body on the left.
   ============================================================ */
.ws-features .wp-block-post-template > *:nth-child(even) .ws-feature__ph { order: 2; }
.ws-features .wp-block-post-template > *:nth-child(even) .ws-feature__body { order: 1; }
@media (max-width: 900px) {
  .ws-features .wp-block-post-template > *:nth-child(even) .ws-feature__ph,
  .ws-features .wp-block-post-template > *:nth-child(even) .ws-feature__body { order: 0; }
}