/*
Theme Name: Spiritual Sparks
Theme URI: https://positivemedium.com
Description: Divi child theme for Spiritual Sparks (formerly Susan Winter Herbst), generated from the project Figma file.
Author: Positive Medium
Author URI: https://positivemedium.com
Template: Divi
Version: 1.0.0
Text Domain: spiritual-sparks-child
*/

/* Design tokens as CSS custom properties, mirrored from the Figma file. */
:root {
	--ss-white: #ffffff;
	--ss-blush: #f8eeee;
	--ss-rose: #aa7578;
	--ss-plum: #55404f;
	--ss-heading: #3a3a3a;
	--ss-body: #595959;
	--ss-body-alt: #535252;
	--ss-muted: #868686;
	--ss-border: #d9d9d9;

	--ss-font-heading: "Playfair Display", Georgia, serif;
	--ss-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--ss-font-script: "Brittany Signature", "Style Script", cursive;
}

body {
	color: var(--ss-body);
	font-family: var(--ss-font-body);
}

h1, h2, h3, h4, h5, h6,
.et_pb_heading__title,
.et_pb_module .et_pb_text h1,
.et_pb_module .et_pb_text h2,
.et_pb_module .et_pb_text h3 {
	font-family: var(--ss-font-heading);
	color: var(--ss-heading);
}

h1 em, h2 em, h3 em,
.et_pb_heading__title em {
	font-style: italic;
	color: var(--ss-rose);
}

a,
.et_pb_button {
	color: var(--ss-rose);
}

.et_pb_button {
	border-color: var(--ss-rose) !important;
	font-family: var(--ss-font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Darkens to plum, not rose: several buttons (Explore My Book, LOAD MORE,
   the second Read My Story) already use rose as their normal background,
   so hovering to rose again produced no visible change. Plum matches the
   darken-on-hover already used for .ss-nav-button and the CF7 submit
   button elsewhere in this file. */
.et_pb_button:hover {
	background-color: var(--ss-plum) !important;
	color: var(--ss-white) !important;
	border-color: var(--ss-plum) !important;
}

/* Home hero "Explore My Book" / "Read My Story" buttons sit side by side in
   one row in the Figma design. Divi's own module_class attribute lands on
   the <a class="et_pb_button"> itself for this module (not its wrapper div),
   so scoping via the column's module_class="ss-hero-buttons-col" instead:
   .et_pb_button_module_wrapper is block-level by default, which is what
   stacked them. "Explore My Book" itself is now a plain-HTML et_pb_code
   module (see layouts/home.divi) rather than an et_pb_button, so it needs
   the same inline-block treatment via its own (block-level by default)
   .et_pb_code wrapper. Unlike the button wrapper (whose margin is
   explicitly zeroed via the module's own custom_margin attribute), the
   .et_pb_code module has no custom_margin set, so it falls back to Divi's
   own gutter-width-3 responsive spacing rule
   (".et_pb_gutters3 .et_pb_column_1_2 .et_pb_module{margin-bottom:5.82%}",
   3 classes) — for an inline-block element, vertical-align:middle centers
   using the full margin box, so that extra margin was pushing "Explore My
   Book" visibly out of line with "Read My Story" below it. !important is
   required since that Divi rule (3 classes) outranks this one (2 classes)
   on specificity alone. */
.ss-hero-buttons-col .et_pb_button_module_wrapper,
.ss-hero-buttons-col .et_pb_code {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0 !important;
}
.ss-home-explore-book-btn:hover {
	background-color: var(--ss-plum) !important;
}

/* Decorative watercolor underline stroke beneath "Purpose", layered on top
   of the section's own gradient background. Position: bottom of the stroke
   aligned to the bottom of the "Purpose" text (measured live: text bottom
   ~350px, stroke height 44px, so y = 350-44 = 306). The other left-edge
   brush stroke is a rotated shape, which background-image layers can't
   represent, so it's rendered separately as an <img> in its own
   standalone et_pb_code module (module_class="ss-hero-swash") instead of
   as a background layer here — see layouts/home.divi. Divi renders its
   own gradient inline, hence !important — this rule redeclares the full
   2-layer background so nothing is lost. */
.ss-home-hero {
	background-image:
		url('assets/images/home/hero-brush-underline.svg'),
		linear-gradient(63deg, #fbf2ef 0%, #ece1e1 100%) !important;
	background-position: 344px 306px, 0 0 !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: 343px 44px, 100% 100% !important;
}

/* Left-edge paint swash's positioning parent. TWO layers need neutralizing,
   not one: Divi's et_pb_code wraps content in .et_pb_code_inner with
   position:relative, AND every module (.et_pb_module — .et_pb_code
   includes this class on its own outer element) is ALSO position:relative
   by default. Left either one in place and the swash's position:absolute
   div resolves against it instead of climbing further up — which is
   exactly what happened the first time only .et_pb_code_inner was
   overridden. Forcing both to static here (scoped to just this one module
   via module_class, so the OTHER et_pb_code module in this same section —
   the book + splashes — is unaffected) lets the swash resolve against the
   next positioned ancestor up: .ss-home-hero itself, which is full-bleed
   to the actual browser viewport edge. !important is needed on the module
   rule specifically: .et_pb_module{position:relative} and
   .ss-hero-swash{position:static} are tied on specificity (one class
   each), so without it the outcome depends on unpredictable source order
   between Divi's dynamically-generated inline CSS and this stylesheet.
   See layouts/home.divi for the swash markup and full positioning
   rationale. */
.ss-hero-swash {
	position: static !important;
}

.ss-hero-swash .et_pb_code_inner {
	position: static;
}

/* Row positioning parent for the Author Showcase title band's swashes +
   rotated photo (see .ss-author-title-decor below and
   layouts/author-showcase.divi). Deliberately NOT set via the row's own
   custom_css_main_element/module_class attribute — this row shares its
   width="1170px" value with sibling rows elsewhere in the theme, and
   giving a row any extra builder attribute excludes it from Divi's
   shared-width CSS batching without emitting a replacement rule, silently
   dropping its width entirely (same "real Divi bug" documented in
   home.divi's hero-row fix; confirmed here too — the row rendered full
   section width instead of 1170px until this was scoped via the section's
   module_class instead). */
.ss-author-hero .et_pb_row {
	position: relative;
	overflow: visible;
}

/* Same rule, same reasoning, for the other four pages sharing this title
   band (see the shared-classes comment above .ss-title-decor-col). */
.ss-my-story-hero .et_pb_row,
.ss-clinical-services-hero .et_pb_row,
.ss-spiritual-reality-hero .et_pb_row,
.ss-contact-me-hero .et_pb_row {
	position: relative;
	overflow: visible;
}

/* Same positioning-parent fix as .ss-hero-swash above, for the code module
   itself — except THREE layers need neutralizing here, not two: this
   module sits inside the row's 1_3 column, and (unlike what was assumed
   when writing the row rule above) .et_pb_column is ALSO position:relative
   by default, not just .et_pb_module. Skipping this one silently resolved
   the swashes/photo against the column's own box instead of the row —
   confirmed live (positions were off by exactly the column's own left
   offset within the row). */
.ss-author-title-decor-col {
	position: static;
}

.ss-author-title-decor {
	position: static !important;
}

.ss-author-title-decor .et_pb_code_inner {
	position: static;
}

/* The actual root cause of every swash sizing/positioning problem in this
   section: WordPress core's default responsive-image CSS sets
   `img { max-width: 100%; height: auto; }`, which silently clamps these
   images' explicit native-size widths (343px, 296px, 384px — all larger
   than their own rotated-bounding-box container) down to their container's
   width. That shrinks the rendered (pre-rotation) image, which shrinks the
   whole rotated shape along with it — confirmed live: title-swash-c.svg's
   image rendered at 137px computed width instead of the 343px set inline,
   and its rotated bounding rect came out 112x147 instead of the intended
   136x352. The photo's own image happened to go unnoticed by this same
   bug only because its native width (282px) is already smaller than its
   container (310px), so the clamp never kicked in for it. */
.ss-author-title-swash img {
	max-width: none;
}

/* My Story's "My journey has always been rooted..." section (my-story.divi):
   these swashes are plain cropped-pixel <img> tags (see that file's own
   comment), not a rotated element nested in a wrapper, so — unlike every
   other swash in this theme — there's no WordPress core img{max-width:100%}
   clamp bug to work around here: each one's inline width/height already
   matches its own crop exactly. Nothing needed in this rule; kept as a
   marker so a future edit doesn't have to rediscover that. */

@media (max-width: 980px) {
	/* Same call as every other purely-decorative fixed-position swash in
	   this theme: the offsets are calibrated against the desktop 386x445
	   photo at a fixed column width, and don't have anywhere sensible to
	   go once the column narrows — drop them below tablet width rather
	   than recalculating per breakpoint. The photo itself needs to become
	   fluid here too (it was a deliberate fixed 386px matching Figma's
	   fixed two-column desktop layout, not meant to also be the mobile
	   width — at 386px fixed it already slightly overflows a 375px-wide
	   phone). */
	.ss-bookshelf-swash {
		display: none;
	}
	.ss-bookshelf-photo {
		width: 100% !important;
		max-width: 386px;
		height: auto !important;
	}
	/* Same treatment for the "My Mission" photo further down the same
	   page — same reasoning, different fixed size (386x270, matching
	   that photo's own native/Figma size). */
	.ss-mission-swash {
		display: none;
	}
	.ss-mission-photo {
		width: 100% !important;
		max-width: 386px;
		height: auto !important;
	}

	/* My Story's three content sections below the title band ("My journey
	   has always been rooted...", "Creative Expressions...", "My
	   Mission") never got a module_class, so — like every other row fix
	   in this file — they were never reachable by the site-wide
	   .et_pb_row{max-width:100%} fix's real-world equivalent here: these
	   rows don't use a fixed width post-fix, they just have no left/right
	   padding of their own, so on mobile (where the row IS the viewport
	   width) their photos and text sit flush against the screen edges.
	   Same 24px inset used everywhere else in this file for mobile row
	   padding. Every row in these three sections is a plain layout with
	   no special column-stacking needs, so — as with the Author Showcase
	   sections — a plain (unindexed) descendant selector off each
	   section's own class covers all of it. */
	.ss-my-story-journey-section .et_pb_row,
	.ss-my-story-creative-section .et_pb_row,
	.ss-my-story-mission-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}

	/* "Creative Expressions Through Writing and Baking" heading: desktop's
	   0.84em line-height is tuned for this heading rendering on a single
	   line (Figma's own value, matching the letterform proportions of a
	   one-line heading) — it looks fine there because line-height only
	   matters once there's a second line to space against the first. On
	   mobile this heading wraps to 3 lines, and 0.84em (33.6px on this
	   36px heading, i.e. less than the font size itself) makes each
	   line's descenders nearly touch the line below. Bumped up for
	   mobile only; desktop is unaffected. */
	.ss-my-story-creative-section .et_pb_module_heading {
		line-height: 1.2em !important;
	}
}

/* ---------------------------------------------------------
   Shared title-band pieces: My Story, Clinical Services,
   Spiritual Reality, Contact Me
   ---------------------------------------------------------
   These four pages reuse the exact same Figma title-band component as
   Author Showcase (confirmed: identical swash vector geometry, identical
   photo frame position/size/rotation, identical gradient, identical
   heading font/size/color/letter-spacing — only the line-height and each
   page's own text/photo differ). Rather than duplicate every fix already
   proven out on Author Showcase (the position:static escape hatch, the
   WordPress core max-width:100% clamp on rotated swash images, the mobile
   bottom-anchor crop) under four more sets of page-specific class names,
   this one shared set is reused by all four via a generic ".ss-title-*"
   class on each page's own markup. Each page still gets its own
   ".ss-<page>-hero" section class for the row-width-batching-bug fix and
   gradient/padding, since those aren't shareable (Divi's own generated
   CSS is keyed to each page's own order-index classes). */

/* Figma's own frame for this component is a fixed 360px tall on every
   page it appears on. Each page's custom_padding (74px on Author
   Showcase/My Story, 77px on the other three — different because their
   headings use a different line-height) was tuned to land on 360px via
   padding-top + content-height + padding-bottom arithmetic alone, but
   that's inherently approximate (font-metric rounding, sub-pixel
   line-height) — measured live, Author Showcase came out to 359.75px and
   Clinical Services to 354.5px, a visible ~5px difference between pages
   that are supposed to look identical. An explicit height here is exact
   regardless of that arithmetic. Safe to add without re-deriving any of
   the swash/photo offsets elsewhere in this file: every one of them is
   anchored via `top` (not `bottom`), so a few extra px of height showing
   up at the very bottom of the section (past whatever the padding+content
   already added up to) doesn't move anything — it's just a bit more of
   the same background gradient, which is seamless either way.
   Desktop only (min-width:981px, matching this file's own max-width:980px
   mobile breakpoint everywhere else): on mobile the row is genuinely
   variable height (the heading can wrap to 2-3 lines depending on
   viewport width — see the mobile bottom-anchor crop notes elsewhere in
   this file), so a FIXED height there doesn't just fail to help, it
   actively breaks the layout — content taller than 360px has nowhere to
   go but overflow past the section's own bottom edge, which is exactly
   what forced this rule to be desktop-only. */
@media (min-width: 981px) {
	.ss-author-hero,
	.ss-my-story-hero,
	.ss-clinical-services-hero,
	.ss-spiritual-reality-hero,
	.ss-contact-me-hero {
		height: 360px;
		box-sizing: border-box;
	}
}

.ss-title-decor-col {
	position: static;
}

.ss-title-decor {
	position: static !important;
}

.ss-title-decor .et_pb_code_inner {
	position: static;
}

.ss-title-swash img,
.ss-title-photo img {
	max-width: none;
}

@media (max-width: 980px) {
	.ss-title-swash {
		display: none;
	}
	.ss-title-photo {
		position: absolute !important;
		right: 0;
		left: auto;
		top: auto !important;
		bottom: -74px !important;
		width: 150px !important;
		height: 143px !important;
		max-width: none;
		overflow: hidden;
		margin: 0;
	}
	.ss-title-photo-inner {
		position: absolute !important;
		left: 0;
		top: 0;
		width: 150px !important;
		height: 160px !important;
	}
	.ss-title-photo img {
		width: 136px !important;
		height: 148px !important;
	}
	/* Spiritual Reality / Contact Me: the source photo is full-resolution
	   (890x1024), so the desktop markup nests an extra 282x306
	   object-fit:cover crop wrapper INSIDE .ss-title-photo-inner (see
	   layouts/spiritual-reality.divi's own comment). That wrapper is
	   centered via the same top:50%/left:50%/translate(-50%,-50%) formula
	   as the plain <img> on the other pages, so it also needs the same
	   136x148 mobile resize — but on THIS wrapper, not on the img (which
	   must stay 100%/100% to keep filling it via object-fit). */
	.ss-title-photo-crop {
		width: 136px !important;
		height: 148px !important;
	}
	.ss-title-photo .ss-title-photo-crop img {
		width: 100% !important;
		height: 100% !important;
	}
}

/* Site wordmark, used in the Theme Builder global header + footer layouts
   (see layouts/global-header.divi and layouts/global-footer.divi). */
.spiritual-sparks-wordmark,
#logo {
	font-family: var(--ss-font-script);
	color: var(--ss-rose);
}

/* Header nav (see layouts/global-header.divi's module_class="ss-header-menu")
   is all-caps in the Figma design. */
.ss-header-menu li a {
	text-transform: uppercase;
	letter-spacing: 0.08em; /* matches Figma's 8% letter-spacing on the nav text */
}

/* Footer nav (see layouts/global-footer.divi's module_class="ss-footer-menu")
   is also all-caps in Figma (confirmed via each nav text node's textCase:
   "UPPER"), just without the header's extra letter-spacing. Divi's Menu
   module has no built-in "all caps" toggle for this Divi version (only
   certain font-field groups opt into that field), hence plain CSS here,
   matching the same approach as .ss-header-menu above. */
.ss-footer-menu li a {
	text-transform: uppercase;
}

/* Gaps between footer nav items (measured from Figma's own auto-layout
   itemSpacing: a consistent 67px edge-to-edge gap between each item's
   text). Divi's default here is 0 horizontal padding, so items render
   flush against each other with no gap. Margin (not padding) so the
   group's own left/right edges stay put — important since this nav is
   right-aligned to match "Powered by Positive Medium" below it; padding
   on the outer items would throw that off.
   !important is required: Divi's own ".et_pb_menu .et_pb_menu__menu>nav>ul>li"
   rule (margin:0) outranks a plain ".ss-footer-menu li" selector on
   specificity (2 classes + 3 elements vs. 1 class + 1 element), even
   though it comes first in the stylesheet — same pattern as
   .ss-nav-button above. */
.ss-footer-menu li:not(:last-child) {
	margin-right: 67px !important;
}

/* Divi's Text module has no built-in "all caps" toggle in this Divi version
   either (see .ss-footer-menu comment above) — used for the footer's
   "follow on:" label, which Figma also has as all-caps (textCase: "UPPER"). */
.ss-uppercase {
	text-transform: uppercase;
}

/* Newsletter signup band email field (layouts/global-newsletter-section.divi)
   — "Your email address" is a real <input placeholder>, not visible label
   text, so it needs to be styled here (::placeholder can't be set via an
   inline style attribute). Matches the Figma text node it replaces:
   DM Sans 500 20px in the rose accent color. `opacity: 1` overrides
   Firefox's default dimmed placeholder opacity. */
.ss-footer-signup input::placeholder {
	font-family: var(--ss-font-body);
	font-weight: 500;
	font-size: 20px;
	color: var(--ss-rose);
	opacity: 1;
}

/* Wider gaps between header nav items (Divi's default li padding is only
   11px each side). */
.ss-header-menu li {
	padding: 0 14px !important;
}

/* Divi's menu <ul> defaults to align-items: stretch, which forces every <li>
   to the same box height. Combined with the button's own (taller) padding
   below, that left the "Contact Me" pill hanging lower than the plain text
   links instead of sharing their vertical center. */
.ss-header-menu ul,
.ss-header-menu nav {
	align-items: center !important;
}

/* Hamburger icon: Divi defaults the mobile menu bar to its own generic
   accent teal (rgb(126,190,197)) rather than inheriting the menu's
   text_color, so it needs an explicit override. Matched to the hero
   heading color (see home.divi's title_text_color="#3a3a3a") rather than
   the nav's own #3a3a3a text_color coincidentally being the same value,
   since --ss-heading is the semantic source of truth for that color. */
.ss-header-menu .mobile_menu_bar::before {
	color: var(--ss-heading) !important;
}

/* "Contact" nav menu item styled as a pill button, matching the Figma nav.
   Class assigned to the menu item in inc/theme-setup.php:ss_build_menu(). */
.ss-nav-button > a {
	background-color: var(--ss-rose) !important;
	color: var(--ss-white) !important;
	border-radius: 999px !important;
	padding: 10px 24px !important;
}

.ss-nav-button > a:hover {
	background-color: var(--ss-plum) !important;
}

/* While actually on the Contact page, Divi's Theme Builder header module
   outputs its own "current menu item" color rule for whichever item is
   active (".et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a",
   3 classes + 3 elements, also !important) — that beats the plain
   ".ss-nav-button > a" rule above on specificity (3 classes vs. Divi's 3
   classes + 3 elements — element count is the tiebreaker once class counts
   are equal), painting "CONTACT ME" the same rose as its own pill
   background and making the label invisible. ".et_pb_menu" is Divi's own
   generic (non-instance-specific) menu-module class, so chaining it in
   here reaches 4 real classes, which outranks Divi's rule on class count
   alone regardless of its extra element selectors. */
.et_pb_menu.ss-header-menu .ss-nav-button.current-menu-item > a {
	color: var(--ss-white) !important;
}

/* The desktop pill-button treatment above also reaches "Contact Me" inside
   the mobile dropdown, since Divi renders both from the same menu markup.
   Reset it back to a plain item there, matching the values Divi's own
   .et_mobile_menu li a default rule renders for every other item. */
.et_mobile_menu .ss-nav-button > a {
	background-color: transparent !important;
	color: #666666 !important;
	border-radius: 0 !important;
	padding: 10px 5% !important;
}

.et_mobile_menu .ss-nav-button > a:hover {
	background-color: rgba(0, 0, 0, 0.03) !important;
	opacity: 0.7;
}

/* Mobile header: put the hamburger toggle in the title row instead of its
   own row below. layouts/global-header.divi carries a second, mobile-only
   copy of the nav menu module (.ss-header-menu-mobile-toggle, shown via
   Divi's own disabled_on responsive visibility) right next to the wordmark;
   the original standalone menu row is hidden at the same breakpoint the
   same way. 980px matches Divi's own built-in breakpoint for switching the
   menu module itself into hamburger mode (confirmed in the compiled
   dynamic CSS), so the toggle only ever appears here exactly when it would
   otherwise have appeared alone in the row below. */
@media (max-width: 980px) {
	.ss-header-top-row .et_pb_column {
		display: flex;
		align-items: center;
	}
	.ss-header-top-row .spiritual-sparks-wordmark {
		flex: 1;
		/* Divi's text module default margin-bottom (30px) inflates this
		   item's flex box well past its actual text height, which throws
		   off align-items:center against the hamburger icon next to it. */
		margin-bottom: 0;
	}
	.ss-header-menu-mobile-toggle {
		width: auto !important;
		flex: 0 0 auto;
	}

	/* Divi's dropdown panel is `left:0; width:100%` of its own module box
	   (see .et_mobile_menu's base rule) — fine when that module spanned the
	   old full-width row, but our toggle module is now auto-width (just the
	   icon), so the dropdown would inherit that same tiny width. Anchor it
	   to the right edge with its own explicit width instead. */
	.ss-header-menu-mobile-toggle .et_mobile_menu {
		left: auto;
		right: 0;
		width: 240px;
	}

	/* Global footer rows: same fixed-width-row treatment as the header
	   above, using Divi's native width_tablet/width_phone (see
	   layouts/global-footer.divi) since this is Theme Builder content —
	   unlike regular page rows, that responsive attribute reliably
	   generates CSS here. Just needs the matching edge padding, since
	   width:100% alone still leaves content flush against the viewport. */
	.ss-footer-row {
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Copyright + legal-links row: two 1_2 columns that stack on mobile.
	   Left-aligned by default and text_orientation="right" respectively
	   (see layouts/global-footer.divi) — both look correct side-by-side on
	   desktop but read as randomly-indented once stacked full-width, so
	   center both here. !important needed: Divi's own text_orientation
	   output is an ID-scoped rule (higher specificity than a class). */
	.ss-footer-copyright,
	.ss-footer-legal-links {
		text-align: center !important;
	}

	/* "follow on:" label + social icons: left-aligned via the column's own
	   display:flex (custom_css_main_element in layouts/global-footer.divi,
	   no justify-content set so it defaults to flex-start) — fine sharing a
	   row with the nav on desktop, but reads off-center once this column
	   stacks to full width above it. */
	.ss-footer-follow-col {
		justify-content: center;
	}
}

/* The menu module's background_color="rgba(0,0,0,0)" (needed to keep the
   desktop nav bar transparent over the header) gets applied by Divi to the
   mobile dropdown panel too, via a 3-class !important rule — outrank it
   here instead of touching the module's own background setting. Also
   drops Divi's default 3px blue top border on that panel. */
.et-l--header .ss-header-menu.et_pb_menu .et_mobile_menu,
.et-l--header .ss-header-menu.et_pb_menu .et_mobile_menu ul {
	background-color: var(--ss-white) !important;
}

.et-l--header .ss-header-menu .et_mobile_menu {
	border-top: none;
}

/* Footer nav: unlike the header, this should stay a plain link list on
   mobile rather than collapsing into Divi's hamburger + dropdown (which any
   et_pb_menu module does by default below 980px). Force the horizontal menu
   back on and hide the hamburger toggle; .et_pb_menu__menu is the wrapper
   Divi's own responsive CSS sets to display:none at this breakpoint, so
   this needs !important to outrank it. The <ul> itself is already
   display:flex; flex-wrap:wrap — just re-centered (desktop is right-
   aligned, via text_orientation="right") and given a tighter gap (the
   desktop 67px item spacing, from .ss-footer-menu li:not(:last-child)
   above, is tuned for the full-width row and wraps awkwardly this narrow). */
@media (max-width: 980px) {
	.ss-footer-menu .mobile_menu_bar {
		display: none !important;
	}
	.ss-footer-menu .et_pb_menu__menu {
		display: block !important;
	}
	.ss-footer-menu nav ul {
		justify-content: center;
		gap: 6px 20px;
	}
	.ss-footer-menu li:not(:last-child) {
		margin-right: 0 !important;
	}
}

/* Contact Form 7 styling — used on the Contact page (see
   inc/contact-form.php for the form template this matches). Fonts,
   colors, and the per-field icons/chevron match the mockup exactly
   (node 97:1604). */
.wpcf7-form .ss-cf7-row {
	display: flex;
	gap: 24px;
	margin-bottom: 81px;
}

.wpcf7-form .ss-cf7-row > span.wpcf7-form-control-wrap {
	flex: 1;
}
@media (max-width: 600px) {
	.wpcf7-form .ss-cf7-row {
		flex-direction: column;
		gap: 0;
	}
	.wpcf7-form .ss-cf7-row > span.wpcf7-form-control-wrap {
		margin-bottom: 20px;
	}
	.wpcf7-form .ss-cf7-row > span.wpcf7-form-control-wrap:last-child {
		margin-bottom: 0;
	}
}

/* Fields outside a .ss-cf7-row (e.g. the message textarea) still need to
   stack as their own block since autop is disabled for this form. */
.wpcf7-form > span.wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 50px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 18px;
	color: #3a3a3a;
	border: none;
	border-bottom: 1px solid var(--ss-border);
	border-radius: 0;
	padding: 10px 0 18px 30px;
	background: transparent;
	background-repeat: no-repeat;
	background-position: left center;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: rgba(26, 26, 26, 0.3);
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.wpcf7-form textarea {
	min-height: 120px;
	background-position: left top 16px;
}

/* Each field's own icon, matched against the field's own shortcode name
   (name="your-name" etc. — see inc/contact-form.php). CF7's wrap span
   (span.wpcf7-form-control-wrap) doesn't carry a per-field class in this
   CF7 version, so these target the actual input/select/textarea
   directly via its background-image rather than a ::before on the wrap. */
.wpcf7-form input[name="your-name"] {
	background-image: url("assets/images/contact-me/icon-field-name.svg");
	background-size: 19px 17px;
}
.wpcf7-form input[name="your-email"] {
	background-image: url("assets/images/contact-me/icon-field-email.svg");
	background-size: 19px 16px;
}
.wpcf7-form input[name="your-phone"] {
	background-image: url("assets/images/contact-me/icon-field-phone.svg");
	background-size: 17px 14px;
}
.wpcf7-form textarea[name="your-message"] {
	background-image: url("assets/images/contact-me/icon-field-message.svg");
	background-size: 17px 14px;
}

/* Custom chevron replaces the native arrow (appearance:none) — combined
   with the field's own left-side icon as a second background layer, and
   "Select Service" (the first_as_label placeholder option — see
   inc/contact-form.php) reads in the same dark #3a3a3a as a real
   selected value, not the lighter placeholder tone the other fields
   use, matching the mockup. */
.wpcf7-form select[name="your-service"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 30px;
	background-image: url("assets/images/contact-me/icon-field-service.svg"),
		url("assets/images/contact-me/icon-field-chevron.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
	background-size: 17px 17px, 20px 20px;
	cursor: pointer;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-bottom-color: var(--ss-rose);
}

.wpcf7-form .wpcf7-submit {
	display: block;
	margin: 20px auto 0;
	background-color: var(--ss-rose);
	color: var(--ss-white);
	border: none;
	border-radius: 62px;
	padding: 14px 40px;
	font-family: var(--ss-font-body);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--ss-plum);
}

/* =========================================================
   Responsive layout
   =========================================================
   Every page in this theme uses et_pb_row width="1170px" as its content
   column (matching the Figma design's 1170px column). Divi's own default
   CSS is `.et_pb_row{width:100%}`, and a row with an explicit width is
   normally paired with `max-width:100%` so it can still shrink below its
   set width on narrower viewports — but the per-instance rule Divi
   generates for our rows is a bare `.et_pb_row_N.et_pb_row{width:1170px}`
   with no max-width companion, so every row was rendering at a literal
   fixed 1170px and forcing horizontal scroll on anything narrower.
   `!important` is required here: Divi's own core CSS ships a generic
   `.container, .et_pb_row, .et_pb_slider .et_pb_container, ...
   {max-width:1600px}` rule that has the SAME specificity as a plain
   `.et_pb_row` selector and loads after this stylesheet, so without
   `!important` it silently wins and this fix does nothing (confirmed via
   getComputedStyle — every row on the site was resolving to
   max-width:1600px, not this rule's 100%, regardless of whether the row
   had its own custom gutter settings). This was originally written
   without `!important` on the assumption it wasn't needed, which worked
   by accident on pages that already had their own page-specific
   `!important` row-width overrides (the various `.ss-*-hero .et_pb_row_0`
   rules elsewhere in this file) — it was never actually doing its job on
   any row that didn't already have one of those, which is why "plainer"
   sections kept turning up with the same overflow bug (Author Showcase's
   Best Selling Authors row, then its Featured Healing Books rows) even
   though they're built from nothing but standard Divi modules. This one
   rule now genuinely fixes it site-wide, and lets Divi's own
   column-stacking (already responsive by default for standard modules)
   take over below its built-in tablet/phone breakpoints. */
.et_pb_row {
	max-width: 100% !important;
	box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
}

/* ---------------------------------------------------------
   Homepage custom sections (home.divi)
   ---------------------------------------------------------
   Everything below targets the hand-built, absolutely-positioned code
   blocks used to pixel-match the Figma mockup (swashes, overlapping
   book/product photography, the credential strip, service cards). None
   of that positioning is percentage- or flex-based, so none of it
   reflows on its own the way standard Divi modules do — each needs an
   explicit mobile treatment. The approach throughout: keep real content
   (headings, text, photos, cards) but let it flow normally instead of
   pinning it to Figma's desktop pixel coordinates, and drop purely
   decorative brush-stroke swashes/splashes below tablet width — they're
   accents tuned to one specific desktop layout and don't scale
   gracefully, which is standard practice for this kind of hand-drawn
   texture on responsive rebuilds. */

/* Desktop/mobile image swap for the book-stack photo (see .ss-shop-block
   below) — hide the mobile (transparent-background) variant by default,
   shown instead of the desktop one below 980px. */
.ss-shop-block-image-mobile {
	display: none;
}

@media (max-width: 980px) {
	/* Hero row itself: fixed at width="1170px" with no responsive override,
	   same as every other row in this file (see the file-level note above).
	   Targeted via Divi's own generated order-index classes (.et_pb_row_0 /
	   .et_pb_heading_0 — first row/heading on the page), scoped under the
	   section's existing module_class="ss-home-hero", rather than adding a
	   module_class to the row/heading itself: doing that here broke Divi's
	   CSS generation for this row entirely (verified — a row that shares
	   its width value with sibling rows elsewhere on the page normally gets
	   batched into one shared CSS rule with them; adding module_class
	   excludes it from that batch without Divi emitting a replacement rule,
	   silently dropping ALL of its width CSS, including the plain desktop
	   1170px value — a real Divi bug, not specific to responsive fields).
	   The header's Theme Builder row didn't hit this because it had no
	   sibling rows sharing its width to begin with. */
	.ss-home-hero .et_pb_row_0 {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ss-home-hero .et_pb_heading_0 .et_pb_module_heading {
		font-size: 60px !important;
	}

	/* The "Purpose" underline stroke (see .ss-home-hero's background-image
	   rule above) is pinned to a fixed pixel position calibrated against
	   the desktop 3-line heading layout. Below 980px the heading shrinks
	   and rewraps, so that fixed position no longer lands under "Purpose"
	   — it ends up floating over the paragraph text instead. Drop the
	   stroke layer here rather than trying to recalculate its position for
	   every breakpoint; the gradient (2nd layer) stays. */
	.ss-home-hero {
		background-image: linear-gradient(63deg, #fbf2ef 0%, #ece1e1 100%) !important;
	}

	/* "Explore My Book" / "Read My Story" sit side by side (see
	   .ss-hero-buttons-col rule above making the wrappers inline-block) —
	   at full 40px/side button padding they no longer fit next to each
	   other once the row's own edge padding above eats into the column's
	   available width, so tighten it here to keep them on one line.
	   !important is required to beat "Explore My Book"'s own inline
	   padding (see layouts/home.divi) — inline styles otherwise outrank a
	   plain external rule regardless of source order. */
	.ss-home-hero .ss-hero-buttons-col .et_pb_button,
	.ss-home-hero .ss-hero-buttons-col .ss-home-explore-book-btn {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Hero: book + splashes */
	.ss-hero-book-splash {
		display: none;
	}
	.ss-hero-book-wrap {
		position: relative;
		height: auto !important;
	}
	.ss-hero-book-cover {
		position: static !important;
		width: 100% !important;
		max-width: 320px;
		margin: 40px auto 0;
	}
	.ss-hero-swash {
		display: none;
	}
	.ss-hero-paragraph {
		max-width: 100% !important;
	}
	.ss-hero-paragraph .et_pb_text_inner {
		max-width: 100% !important;
	}

	/* "My work lives between" section: all 3 rows (content, divider,
	   credentials strip) are fixed at width="1170px" with no responsive
	   override, same as the hero row (see that fix's comment above for why
	   this is done via order-index classes scoped under the section's
	   module_class="ss-mystory-section" rather than adding module_class
	   directly to the rows themselves). */
	.ss-mystory-section .et_pb_row_1,
	.ss-mystory-section .et_pb_row_2,
	.ss-mystory-section .et_pb_row_3 {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}

	/* "My work lives between" photo + heading */
	.ss-mystory-swash {
		display: none;
	}
	/* Clinical Therapy Services section's left-side swash — same
	   fixed-pixel-position-doesn't-recalculate-per-breakpoint reasoning as
	   .ss-hero-swash/.ss-mystory-swash above, plus its negative top would
	   bleed it into the reflowed "Shop..." heading's own (now taller,
	   wrapped) text at this width. */
	.ss-clinical-left-swash-wrap {
		display: none;
	}
	.ss-mystory-photo {
		width: 100% !important;
		max-width: 420px;
		margin: 0 auto;
	}
	.ss-mystory-underline {
		display: none;
	}
	.ss-mystory-heading {
		max-width: 100% !important;
		font-size: 34px !important;
	}
	.ss-mystory-paragraph {
		max-width: 100% !important;
	}

	/* Credential logo strip: absolute grid -> centered wrapping row */
	.ss-credentials-strip {
		width: 100% !important;
		height: auto !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 28px 24px;
		padding: 24px 0;
	}
	.ss-credentials-strip img {
		position: static !important;
	}
	.ss-credentials-strip > div {
		display: none; /* the column-divider lines stop meaning anything once the row wraps */
	}

	/* "Clinical Therapy Services" + "Shop ... Crafted with Love" sections:
	   same fixed-width-row bug as the hero and "My work lives between"
	   rows above (see those fixes' comments for why this is done via
	   order-index classes scoped under each section's module_class rather
	   than adding module_class to the rows themselves). */
	.ss-clinical-section .et_pb_row_4,
	.ss-clinical-section .et_pb_row_5,
	.ss-shop-section .et_pb_row_6,
	.ss-shop-section .et_pb_row_7 {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}

	/* "Clinical Therapy Services" heading */
	.ss-clinical-heading-swash {
		display: none;
	}
	.ss-clinical-heading {
		font-size: 38px !important;
	}
	.ss-clinical-paragraph {
		max-width: 100% !important;
	}

	/* Service cards: fixed 370px -> fluid, centered, stacked by the row */
	.ss-service-card {
		width: 100% !important;
		max-width: 400px;
		margin: 0 auto;
	}

	/* "Shop ... Crafted with Love" heading */
	.ss-shop-heading-wrap {
		width: 100% !important;
	}
	.ss-shop-heading-swash {
		display: none;
	}
	.ss-shop-heading {
		max-width: 100% !important;
		font-size: 32px !important;
	}

	/* Shop blocks (books / bakes): overlapping photo -> stacked above the text.
	   padding-bottom reserves room for the bottom-anchored image (bottom:16px,
	   see .ss-shop-block-image below) — sized for the taller of the two
	   images (the book stack scales to ~244px tall at the fixed 200px width
	   below vs. ~200px for the bakes photo), since the reserved space and the
	   image's own position both grow 1:1 with the text block's height, so a
	   too-small value overlaps by the same fixed amount regardless of how
	   much text is above it. Previously 240px, which undershot the book
	   stack image and let "Check My Books" render underneath it. */
	.ss-shop-block {
		height: auto !important;
		padding: 32px 24px 320px;
	}
	.ss-shop-block-image-desktop {
		display: none;
	}
	.ss-shop-block-image-mobile {
		display: block;
	}
	.ss-shop-block-image {
		left: 50% !important;
		top: auto !important;
		bottom: 16px !important;
		transform: translateX(-50%);
		width: 200px !important;
		height: auto !important;
	}
	.ss-shop-block-text {
		position: static !important;
		max-width: 100% !important;
	}
}

/* ---------------------------------------------------------
   Author Showcase title band (author-showcase.divi)
   ---------------------------------------------------------
   The swashes + rotated photo are absolutely positioned against the
   1170px row (see layouts/author-showcase.divi), which only makes sense
   at the desktop width they were measured against — once the row's own
   2_3/1_3 columns stack on narrower screens the fixed offsets place
   everything off-screen or overlapping. Drop the decorative swashes
   (same treatment as every other purely-decorative brush accent in this
   theme), but the photo keeps its desktop treatment — rotated, cropped
   at the section's own bottom edge — just re-scaled and repositioned for
   a narrow, stacked layout (see the photo rules below).
   The row itself also needed the exact fix already documented for the
   home hero row (see home.divi's own hero-row comment): Divi emits an
   order-index-scoped rule (.et_pb_row_0.et_pb_row — 2 classes) with
   higher specificity than this file's site-wide ".et_pb_row{max-width:
   100%}" fix (1 class), so without this override the row stayed pinned
   at 1170px on mobile regardless of that global rule — confirmed live
   (row rendered 1170px wide on a 528px viewport, pushing the photo off
   the right edge). */

/* ---------------------------------------------------------
   "Featured Healing Books" / "Best Selling Authors" card grids
   ---------------------------------------------------------
   Rendered by the [ss_featured_books] / [ss_best_selling_authors]
   shortcodes (inc/books-authors.php) from the ss_book / ss_author custom
   post types, instead of being hand-coded per-card into
   author-showcase.divi — each shortcode outputs one of these grid
   wrappers plus a .ss-book-card / circular-avatar item per post. This
   sidesteps the Divi row/column system entirely for the card layout
   (no order-index classes, no gutter-setting quirks to work around) —
   the grid's own CSS handles the desktop column count and the mobile
   stack + inset directly. */
.ss-book-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 50px;
	margin-top: 40px;
}
.ss-authors-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 20px;
	margin-top: 40px;
}

/* Clinical Services "Service Cards" grid (inc/clinical-services.php,
   [ss_clinical_services]) — same rebuild, same reasoning, as the book/
   author grids above; this one replaced a plain 1_3,1_3,1_3 Divi row
   rather than a 1_6-column one, but the underlying order-index/gutter
   fragility is the same class of problem either way. */
.ss-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 30px;
}

/* [ss_other_services] (Service Detail template's "Other Services" section)
   reuses this same grid/card markup, but always renders one fewer card
   than the site actually has (it excludes whichever service the visitor
   is currently viewing) — with the site's 3 total services that's a
   2-card row. The 1fr/1fr/1fr columns above fill the full row width
   regardless of item count, so 2 cards left-pack against an invisible
   empty third column instead of centering as a group. Desktop-only
   (mobile already stacks to one column, where this doesn't apply) —
   switches to flex with fixed-width cards so justify-content:center has
   something narrower than the row to center. */
@media (min-width: 981px) {
	.ss-service-detail-section .ss-service-grid {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 30px;
	}
	.ss-service-detail-section .ss-service-grid .ss-service-card {
		width: 370px;
		flex: 0 0 370px;
	}
}

@media (max-width: 980px) {
	.ss-book-grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
	.ss-authors-grid {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}
	.ss-service-grid {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
	.ss-clinical-services-cards-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 980px) {
	.ss-author-hero .et_pb_row_0 {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ss-author-hero .et_pb_heading_0 .et_pb_module_heading {
		font-size: 60px !important;
	}
	.ss-author-title-swash {
		display: none;
	}

	/* Photo: same rotate + clip-at-section-bottom treatment as desktop,
	   scaled down and re-centered under the now-stacked heading instead
	   of sitting beside it.
	   Positioned via `bottom`, not `top`: the mobile row's own width (and
	   therefore how "Author Showcase" wraps — one line at some widths
	   within this breakpoint, two at others) varies continuously, unlike
	   desktop's fixed 1170px row, so the row's height (and this section's
	   total height) isn't constant across this breakpoint. A `top` value
	   calibrated against one wrap amount overshoots past the section's
	   real bottom edge at the other (confirmed live: with a 2-line-wrap
	   calibration, a 1-line render pushed the photo 31px past the
	   section, cropping far less of it than intended). The row sits a
	   fixed 74px above the section's own bottom regardless of the row's
	   own height (that 74px is this section's own padding-bottom, set on
	   the section tag above), so anchoring to the row's bottom edge via a
	   negative `bottom` offset lands at the section's true bottom edge no
	   matter how the heading wraps.
	   Size: the gap between the heading's own bottom and the section's
	   bottom is ALSO roughly constant across wrap amounts (confirmed live
	   at two different widths: ~158px both times, since heading height
	   and section height grow/shrink together as the heading wraps) — but
	   210px (89% of the desktop-derived 235px, matching desktop's own
	   296/331 crop ratio) doesn't fit that budget without overlapping the
	   heading. Rescaled everything down directly from the desktop values
	   (0.483x: 331px natural height -> 160px) so the same 89% ratio now
	   fits inside the ~158px budget with a small margin, rather than
	   changing the ratio itself. */
	/* Same row-width and heading-size fixes as Author Showcase above, for
	   the other four pages sharing this title band. The photo/swash mobile
	   treatment itself is already covered by the shared .ss-title-swash /
	   .ss-title-photo rules earlier in this file — only the two things
	   that are inherently page-specific (each page's own order-index
	   classes) need repeating per page. */
	.ss-my-story-hero .et_pb_row_0,
	.ss-clinical-services-hero .et_pb_row_0,
	.ss-spiritual-reality-hero .et_pb_row_0,
	.ss-contact-me-hero .et_pb_row_0 {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ss-my-story-hero .et_pb_heading_0 .et_pb_module_heading,
	.ss-clinical-services-hero .et_pb_heading_0 .et_pb_module_heading,
	.ss-spiritual-reality-hero .et_pb_heading_0 .et_pb_module_heading,
	.ss-contact-me-hero .et_pb_heading_0 .et_pb_module_heading {
		font-size: 60px !important;
	}

	/* Author Showcase section rows (heading + the [ss_featured_books] /
	   [ss_best_selling_authors] shortcode rows): every row in both of
	   these sections is a single plain 4_4-column row now (the shortcodes
	   replaced the old 1_3/1_6 multi-column layouts — see
	   author-showcase.divi), so there's no more order-index fragility or
	   per-column stacking to work around; a plain descendant selector off
	   each section's own module_class covers every row in it. (Divi core
	   ships a generic `.container, .et_pb_row, ...{max-width:1600px}` rule
	   that loads after and beats this file's site-wide
	   `.et_pb_row{max-width:100%}` at equal specificity — hence the
	   `!important` here, same as every other row-width fix in this file.) */
	.ss-authors-section .et_pb_row,
	.ss-featured-books-section .et_pb_row {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}

	/* "Featured Healing Books" / "Best Selling Authors" underline swashes
	   (author-showcase.divi): positioned with fixed px offsets calibrated
	   against the desktop single-line heading layout. On mobile the
	   heading wraps ("Featured Healing" / "Books" on two lines), so the
	   swash — still pinned to its desktop coordinates — lands over the
	   first line instead of under the accent word, and overflows off the
	   right edge of the now-narrower heading. Same call as every other
	   fixed-position decorative swash in this file: drop it below tablet
	   width rather than trying to recalculate it per breakpoint/wrap. */
	.ss-featured-books-heading-swash,
	.ss-authors-heading-swash {
		display: none;
	}
	/* Same 54px -> 38px mobile step already used for the homepage's
	   "Clinical Therapy Services" heading (.ss-clinical-heading above) —
	   these two headings use the same 54px desktop size. */
	.ss-featured-books-heading-wrap h2,
	.ss-authors-heading-wrap h2 {
		font-size: 38px !important;
	}

	/* Newsletter signup band (global-newsletter-section.divi): a genuine
	   Divi Global Section, appended to every page's own content rather
	   than living inside any one page's .divi file, so its row lands at a
	   different order-index on every page (et_pb_row_7 on Author Showcase,
	   et_pb_row_3 on Contact, etc.) — targeting it by index like every
	   other row fix in this file isn't possible. Its section DOES carry
	   its own stable module_class, though, and it only ever has the one
	   row, so a plain (unindexed) descendant selector off that class is
	   both safe (not applied directly to the row itself, so it doesn't
	   trip the row-width-batching bug) and unambiguous. */
	.ss-newsletter-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 480px) {
	.ss-home-hero .et_pb_heading_0 .et_pb_module_heading {
		font-size: 42px !important;
	}
	.ss-author-hero .et_pb_heading_0 .et_pb_module_heading {
		font-size: 42px !important;
	}
	.ss-my-story-hero .et_pb_heading_0 .et_pb_module_heading,
	.ss-clinical-services-hero .et_pb_heading_0 .et_pb_module_heading,
	.ss-spiritual-reality-hero .et_pb_heading_0 .et_pb_module_heading,
	.ss-contact-me-hero .et_pb_heading_0 .et_pb_module_heading {
		font-size: 42px !important;
	}
	.ss-service-card {
		max-width: 320px;
	}
	.ss-clinical-heading {
		font-size: 32px !important;
	}
	.ss-shop-heading {
		font-size: 26px !important;
	}
	.ss-blog-heading {
		font-size: 42px !important;
	}
	.ss-service-detail-heading {
		font-size: 42px !important;
	}
	.ss-blog-detail-heading {
		font-size: 36px !important;
	}
	.ss-newsletters-heading {
		font-size: 42px !important;
	}
	.ss-privacy-heading {
		font-size: 42px !important;
	}
	.ss-terms-heading {
		font-size: 42px !important;
	}
}

/* ---------------------------------------------------------
   Service Detail Theme Builder template (layouts/service-detail.divi)
   ---------------------------------------------------------
   Both photos are rendered by [ss_service_image] as a bare <img> (not an
   et_pb_image module — shortcodes only expand inside et_pb_text content,
   not module attributes like et_pb_image's src=; see
   inc/clinical-services.php), so they need the sizing/radius the module
   would otherwise have handled itself. Each has its own paint-swash
   treatment matching its own Figma component — the hero (portrait,
   386x444, node 120:345) and the second section (landscape, 386x270,
   node 120:334) — see the markup comments in service-detail.divi for the
   pixel-crop technique and why the swash <img> tags there are all on one
   line. */

/* Breadcrumb's "Clinical Services" segment — a real link back to the
   Clinical Services page (the only breadcrumb in the site with a real
   intermediate level; every other page's breadcrumb is plain text). Color
   inherits the surrounding span's #55404f by default so it reads the same
   as before, only turning the rose accent color on hover. */
.ss-breadcrumb-link {
	color: inherit;
	text-decoration: none;
}
.ss-breadcrumb-link:hover {
	color: #aa7578;
}

.ss-service-detail-hero-wrap {
	position: relative;
	width: 386px;
	max-width: 100%;
	height: 444px;
	margin: 0 auto;
}
.ss-service-detail-hero-photo {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 8px;
}
.ss-service-detail-hero-swash {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.ss-service-detail-second-wrap {
	position: relative;
	width: 386px;
	max-width: 100%;
	height: 270px;
	margin: 0 auto;
}
.ss-service-detail-second-photo {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
}
.ss-service-detail-second-swash {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 980px) {
	/* The swash offsets are measured against each photo's fixed desktop
	   box; once that box goes fluid on mobile (below) the offsets no
	   longer line up with the photo's edges, so the swashes are dropped
	   here rather than shown misaligned — same tradeoff already made for
	   every other purely-decorative swash in this theme on mobile. */
	.ss-service-detail-hero-wrap {
		width: 100%;
		height: auto;
		aspect-ratio: 386 / 444;
	}
	.ss-service-detail-hero-swash {
		display: none;
	}
	.ss-service-detail-second-wrap {
		width: 100%;
		height: auto;
		aspect-ratio: 386 / 270;
	}
	.ss-service-detail-second-swash {
		display: none;
	}
	.ss-service-detail-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	/* "What to Expect?" / "Areas of support may include:" headings: centered
	   on desktop (Divi's text_orientation="center"), left-justified on
	   mobile by design. Also scales the font down like every other heading
	   on the site already does on mobile — this one had no reduction at all
	   before. */
	.ss-service-detail-section .et_pb_heading .et_pb_module_heading {
		text-align: left !important;
		font-size: 28px !important;
	}
}

/* Blog page title band (layouts/blog.divi) — had no module_class at all,
   so the breadcrumb/heading row never got the standard mobile side-padding
   fix every other row-fix in this file exists for, and bled flush to the
   screen edge below 980px. Same gap in the Blog Grid section right below
   it (the actual post cards) — it has a module_class but never got this
   fix applied to its row either, so the cards themselves were also flush
   to the screen edge on mobile. */
@media (max-width: 980px) {
	.ss-blog-hero .et_pb_row,
	.ss-blog-grid-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ---------------------------------------------------------
   Spiritual Reality "A Journey of Inner Reflection" photo
   ---------------------------------------------------------
   Same component as the Service Detail template's hero photo (see that
   file's style rules) — portrait 386x444 box, photo + 4 paint-swash
   slivers pixel-cropped from Figma. Not shared as one reusable class
   since this page's version is static (a plain <img>, no [ss_service_*]
   shortcode plumbing behind it) while Service Detail's is dynamic per
   post; duplicating the ~15 lines of CSS was simpler than adding a layer
   of indirection two call sites don't otherwise need. */
.ss-spiritual-reality-photo-wrap {
	position: relative;
	width: 386px;
	max-width: 100%;
	height: 444px;
	margin: 0 auto;
}
.ss-spiritual-reality-photo {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 8px;
}
.ss-spiritual-reality-photo-swash {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 980px) {
	.ss-spiritual-reality-reflection-section .et_pb_row,
	.ss-spiritual-reality-space-section .et_pb_row,
	.ss-spiritual-reality-hope-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	/* "A Space for Reflection..." / "My hope is to encourage..." headings:
	   36px with 0.84em line-height is tuned for a single desktop line: on
	   mobile both wrap to 2-3 lines, where the tight line-height crowds the
	   wrapped lines together — same fix already applied to My Story's
	   "Creative Expressions..." heading for the same reason. */
	.ss-spiritual-reality-space-section .et_pb_module_heading,
	.ss-spiritual-reality-hope-section .et_pb_module_heading {
		font-size: 28px !important;
		line-height: 1.2em !important;
	}
	.ss-spiritual-reality-photo-wrap {
		width: 100%;
		height: auto;
		aspect-ratio: 386 / 444;
	}
	.ss-spiritual-reality-photo-swash {
		display: none;
	}
}

/* ---------------------------------------------------------
   Blog grid cards (layouts/blog.divi, et_pb_blog module)
   ---------------------------------------------------------
   Divi's blog module gives each post card its own default border+padding
   box and a fixed title-then-meta DOM order — the mockup has neither: no
   card chrome, and the date sits above the title. Can't reorder through
   the builder's own settings (there's no such toggle), so this reorders
   the module's fixed DOM (image, .entry-title, .post-meta, .post-content)
   with flexbox instead. Spacing values are Figma's own gaps for this
   component (node 125:490, "Finding Peace..." card). */
.ss-blog-grid-section .et_pb_post {
	border: none;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ss-blog-grid-section .et_pb_post .et_pb_image_container,
.ss-blog-grid-section .et_pb_post .et_pb_image_container img {
	border-radius: 8px;
}
.ss-blog-grid-section .et_pb_post .et_pb_image_container {
	/* Divi's own default here is margin-bottom:29px — as a flex item (see
	   .et_pb_post above) that doesn't collapse with .post-meta's own
	   margin-top below, so the two were stacking into a 49px gap instead
	   of the 20px .post-meta already specifies on its own. */
	margin-bottom: 0;
}
.ss-blog-grid-section .et_pb_post .post-meta {
	order: 1;
	margin: 20px 0 4px 0;
}
.ss-blog-grid-section .et_pb_post .entry-title {
	order: 2;
	margin: 0 0 12px 0;
}
.ss-blog-grid-section .et_pb_post .post-content {
	order: 3;
	margin: 0;
}
.ss-blog-grid-section .et_pb_post .post-content p {
	margin: 0 0 14px 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.ss-blog-grid-section .et_pb_post .post-content .more-link {
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #aa7578 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: underline;
}

/* Blog grid pagination (includes/navigation-index.php overrides Divi's
   default "Older/Newer Entries" prev/next-only links with real numbered
   paginate_links() output, styled here as pills to match the mockup,
   node 97:1335). Only renders once there's more than one page of posts. */
.ss-blog-pagination {
	margin-top: 20px;
}
.ss-blog-pagination .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.ss-blog-pagination .page-numbers li {
	display: block;
}
.ss-blog-pagination .page-numbers a,
.ss-blog-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 52px;
	padding: 0 25px;
	border-radius: 999px;
	border: 1px solid #aa7578;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.45;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(10, 9, 9, 0.8);
	background: transparent;
}
.ss-blog-pagination .page-numbers a:hover {
	background: rgba(170, 117, 120, 0.08);
}
.ss-blog-pagination .page-numbers .current,
.ss-blog-pagination .page-numbers .next,
.ss-blog-pagination .page-numbers .prev {
	background: #aa7578;
	color: #ffffff;
}
.ss-blog-pagination .page-numbers .next:hover,
.ss-blog-pagination .page-numbers .prev:hover {
	background: #96636a;
}
.ss-blog-pagination .page-numbers .next,
.ss-blog-pagination .page-numbers .prev {
	padding: 0 30px;
}
.ss-blog-pagination .page-numbers .dots {
	border-color: #aa7578;
}

/* ---------------------------------------------------------
   Blog Detail Theme Builder template (layouts/blog-detail.divi)
   ---------------------------------------------------------
   Had no module_class at all as a static example page, so — same as the
   Blog listing page's title band before it — it never got the standard
   mobile side-padding fix every other row-fix in this file exists for. */
@media (max-width: 980px) {
	.ss-blog-detail-hero .et_pb_row,
	.ss-blog-detail-body .et_pb_row,
	.ss-blog-detail-related .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* Related Blogs section's left-side decorative swash. The source SVG
   (related-blogs-side-swash.svg) is authored landscape (647x190) — Figma
   only shows it upright because a rotation transform is applied at the
   frame level, which Figma's node asset export doesn't bake into the file.
   Rotating a landscape box to a portrait footprint with plain CSS needs a
   wrapper sized to the FINAL (portrait) footprint, with the image inside
   pre-sized to the PRE-rotation (landscape, axes swapped) dimensions and
   centered/rotated into place — a plain `transform: rotate()` on the img
   alone would rotate visually but keep occupying its original landscape
   layout box, so it wouldn't fill/align with the intended vertical strip. */
.ss-blog-detail-related {
	position: relative;
	overflow: hidden;
}
/* Divi gives every et_pb_text module (and its inner .et_pb_text_inner) its
   own `position: relative` — that module collapses to 0 height here since
   its only content is the absolutely-positioned swash wrap below, so it
   sits right at the top of the section. Without neutralizing it, the wrap's
   `bottom: 0` anchors to THIS module's (zero-height, near the section top)
   box instead of the section's, pushing the swash up and out of view. */
.ss-blog-detail-related-swash-row,
.ss-blog-detail-related-swash-column,
.ss-blog-detail-related-swash-carrier,
.ss-blog-detail-related-swash-carrier .et_pb_text_inner {
	position: static;
}
.ss-blog-detail-related-swash-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 198px;
	height: 673px;
	overflow: hidden;
	/* Not negative: a negative z-index paints BELOW all normal in-flow
	   content in this stacking context (per the CSS2.1 painting-order
	   spec), not just below the section's own background as you'd expect —
	   that hid the swash behind the section's gradient entirely. A low
	   positive value is safe here since this box (x: 0–198px) never
	   overlaps the card content, which starts well to its right. */
	z-index: 1;
	pointer-events: none;
}
.ss-blog-detail-related-swash {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 673px;
	height: 198px;
	max-width: none;
	transform: translate(-50%, -50%) rotate(90deg);
}

.ss-blog-detail-featured-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 900 / 510;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
}

/* [ss_post_share_buttons] — Facebook opens a real share dialog; Instagram
   has no web share-by-URL intent, so it copies the link instead (see
   assets/js/social-share.js) and shows this CSS-only tooltip as feedback. */
.ss-post-share-buttons {
	display: flex;
	align-items: center;
	gap: 22px;
}
.ss-post-share-buttons a {
	position: relative;
	display: inline-flex;
}
.ss-post-share-buttons a:hover {
	opacity: 0.75;
}
.ss-post-share-copy.ss-post-share-copied::after {
	content: "Link copied!";
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 4px 10px;
	border-radius: 4px;
	background: #3a3a3a;
	color: #ffffff;
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
}

/* [ss_post_content] renders whatever an editor writes in the normal post
   editor via the_content — unlike this template's other dynamic fields,
   its markup shape isn't fixed, so headings/lists/images/quotes an editor
   adds need baseline typography here to match the rest of the theme
   instead of rendering as unstyled browser defaults. */
.ss-blog-detail-content h2,
.ss-blog-detail-content h3 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	color: #3a3a3a;
	line-height: 1.3em;
	margin: 40px 0 18px;
}
.ss-blog-detail-content h2 {
	font-size: 32px;
}
.ss-blog-detail-content h3 {
	font-size: 24px;
}
.ss-blog-detail-content p {
	margin: 0 0 24px;
}
.ss-blog-detail-content ul,
.ss-blog-detail-content ol {
	margin: 0 0 30px;
	padding-left: 22px;
}
.ss-blog-detail-content li {
	margin-bottom: 10px;
}
.ss-blog-detail-content ul li::marker {
	color: #aa7578;
}
.ss-blog-detail-content img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 10px 0 30px;
}
.ss-blog-detail-content blockquote {
	margin: 0 0 30px;
	padding-left: 20px;
	border-left: 3px solid #aa7578;
	font-style: italic;
	color: #3a3a3a;
}

/* [ss_related_posts] card grid — same 3-col desktop / stacked mobile
   pattern as .ss-service-grid (see that rule's own comment for why). */
.ss-related-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 40px;
}
.ss-related-post-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 20px;
}
.ss-related-post-date {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 17px;
	color: rgba(43, 43, 43, 0.8);
	margin: 0 0 10px;
}
.ss-related-post-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.35em;
	color: #3a3a3a;
	margin: 0 0 12px;
}
.ss-related-post-excerpt {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 16px;
	letter-spacing: 0.32px;
	line-height: 1.4em;
	color: #595959;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.ss-related-post-link {
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #aa7578;
	text-transform: uppercase;
	text-decoration: underline;
}
@media (max-width: 980px) {
	.ss-related-posts-grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
}

/* ---------------------------------------------------------
   Newsletters page (layouts/newsletters.divi)
   ---------------------------------------------------------
   [ss_newsletters] card grid — cover image (500x575 in Figma, a clean
   0.8696 ratio matching the source PNGs' own 1000x1150 natural size, so
   a plain aspect-ratio + object-fit:cover is enough, no crop/mask
   technique needed) plus a plain title caption underneath. The cover
   links to the newsletter's PDF when one is set. */
.ss-newsletter-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 60px;
	row-gap: 50px;
}
.ss-newsletter-empty {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	color: rgba(43, 43, 43, 0.8);
	text-align: center;
	padding: 40px 0;
}
.ss-newsletter-cover {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 500 / 575;
	object-fit: cover;
	border-radius: 8px;
}
.ss-newsletter-date {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 15px;
	color: rgba(43, 43, 43, 0.8);
	margin-top: 24px;
}
.ss-newsletter-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: -0.44px;
	color: #55404f;
	margin-top: 4px;
}
/* Same treatment as the Blog page's own "READ MORE" links — see
   .ss-blog-grid-section .et_pb_post .post-content .more-link. */
.ss-newsletter-read-more {
	display: inline-block;
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #aa7578;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: underline;
	margin-top: 12px;
}
@media (max-width: 980px) {
	.ss-newsletters-hero .et_pb_row,
	.ss-newsletters-grid-section .et_pb_row,
	.ss-privacy-hero .et_pb_row,
	.ss-privacy-body .et_pb_row,
	.ss-terms-hero .et_pb_row,
	.ss-terms-body .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ss-newsletter-grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
}

/* ---------------------------------------------------------
   Classes page (layouts/classes.divi)
   ---------------------------------------------------------
   [ss_classes] toolbar ("Upcoming Classes" label + decorative-only search
   bar — Figma node 2075:76 has no functional search wired up anywhere,
   just the input's visual chrome) + 3-column card grid. Every card in the
   mockup uses the same plain gray placeholder box (no real photography
   yet) — .ss-class-card-image's background-color is that fallback look;
   a real featured image simply overrides it via inline background-image. */
.ss-classes-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
}
.ss-classes-view-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background-color: transparent;
	background-image: url("assets/images/classes/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 9.5px 4.75px;
	padding-right: 21px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 20px;
	letter-spacing: -0.6px;
	color: #222222;
	opacity: 0.9;
	cursor: pointer;
}
.ss-classes-view-select:focus {
	outline: none;
}
.ss-classes-empty {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 18px;
	color: #595959;
	margin: 20px 0 60px;
}
.ss-classes-search {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: 370px;
	max-width: 100%;
	height: 34px;
	padding: 0 15px;
	border: 0.5px solid #aa7578;
	box-sizing: border-box;
}
.ss-classes-search-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.ss-classes-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 15px;
	letter-spacing: -0.6px;
	color: #3a3a3a;
}
.ss-classes-search input::placeholder {
	color: #bfbfbf;
}
.ss-classes-search input:focus {
	outline: none;
}
.ss-classes-search-clear {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 18px;
	line-height: 1;
	color: #aa7578;
	text-decoration: none;
}
.ss-classes-search-clear:hover {
	color: #55404f;
}
.ss-classes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 50px;
}
.ss-class-card {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ss-class-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 370 / 470;
	background-color: #e6e6e6;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
}
.ss-class-badge {
	position: absolute;
	left: 25px;
	top: 25px;
	padding: 5px 20px;
	background-color: rgba(230, 178, 181, 0.4);
	font-family: "Work Sans", sans-serif;
	font-weight: 300;
	font-size: 12px;
	letter-spacing: -0.48px;
	text-transform: uppercase;
	color: #0a0909;
}
.ss-class-title {
	margin-top: 30px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: -0.8px;
	color: #55404f;
}
.ss-class-meta {
	margin-top: 8px;
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	letter-spacing: 0.2px;
	color: var(--ss-rose);
}

/* Class Detail template (layouts/class-detail.divi) */
.ss-class-detail-hero-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 500 / 470;
	background-color: #e6e6e6;
	border-radius: 8px;
	overflow: hidden;
}
.ss-class-detail-hero-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.ss-class-detail-logistics {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 20px;
}
.ss-class-detail-logistics-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}
.ss-class-detail-logistics-label {
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ss-rose);
}
.ss-class-detail-logistics-value {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 17px;
	color: #3a3a3a;
}
.ss-class-detail-instructor-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #e6e6e6;
	border-radius: 50%;
	overflow: hidden;
}
.ss-class-detail-instructor-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.ss-class-detail-cta-button {
	display: inline-block;
	background-color: var(--ss-rose);
	color: var(--ss-white);
	border: none;
	border-radius: 62px;
	padding: 16px 44px;
	font-family: var(--ss-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 980px) {
	/* Rows are declared width="1170px" in layouts/class-detail.divi, same
	   as every other detail template in this theme — without this, content
	   runs edge-to-edge on mobile instead of respecting the viewport.
	   Same fix/values as .ss-service-detail-section .et_pb_row above. */
	.ss-class-detail-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ss-class-detail-section .et_pb_heading .et_pb_module_heading {
		text-align: left !important;
		font-size: 28px !important;
	}
	.ss-class-detail-logistics {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 24px;
	}
	.ss-class-detail-instructor-wrap {
		width: 160px;
		margin: 0 auto 24px;
	}
}

/* "Reserve Your Spot" registration modal — see
   ss_render_class_registration_modal() in inc/classes.php and
   assets/js/class-registration-modal.js for the open/close behavior. */
.ss-class-registration-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}
.ss-class-registration-modal.ss-class-registration-modal-open {
	display: block;
}
.ss-class-registration-modal-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(43, 33, 39, 0.6);
}
.ss-class-registration-modal-box {
	position: relative;
	z-index: 1;
	width: calc(100% - 40px);
	max-width: 480px;
	max-height: 86vh;
	margin: 7vh auto 0;
	overflow-y: auto;
	background-color: #ffffff;
	border-radius: 12px;
	padding: 44px 40px;
}
.ss-class-registration-modal-close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	padding: 4px;
	font-size: 26px;
	line-height: 1;
	color: #9a9a9a;
	cursor: pointer;
}
.ss-class-registration-modal-eyebrow {
	margin: 0 0 6px;
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ss-rose);
}
.ss-class-registration-modal-heading {
	margin: 0 0 28px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 30px;
	color: #55404f;
}
/* Tighter field spacing than the full Contact page form (see the base
   .wpcf7-form rules above) — this form only has 3 fields in a 480px box,
   so the Contact page's roomier vertical rhythm reads as excessive here. */
.ss-class-registration-modal-box .wpcf7-form > span.wpcf7-form-control-wrap {
	margin-bottom: 28px;
}
.ss-class-registration-modal-box .wpcf7-form .wpcf7-submit {
	margin-top: 4px;
}
body.ss-modal-lock-scroll {
	overflow: hidden;
}
@media (max-width: 600px) {
	.ss-class-registration-modal-box {
		padding: 36px 24px;
		margin-top: 5vh;
	}
}
@media (max-width: 980px) {
	.ss-classes-hero .et_pb_row,
	.ss-classes-grid-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	.ss-classes-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.ss-classes-search {
		width: 100%;
	}
	.ss-classes-grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
}

/* Contact page's Phone/Email/Instagram row (layouts/contact-me.divi) — the
   et_pb_blurb module has no built-in text-transform attribute, so the
   mockup's uppercase "PHONE"/"EMAIL"/"INSTAGRAM" labels need an explicit
   override here (same missing-uppercase gap as the Blog Detail
   breadcrumb/date elsewhere in this theme). */
.ss-contact-info-blurb .et_pb_module_header {
	text-transform: uppercase;
}
/* header_font/body_font/image_icon_width on the et_pb_blurb shortcode
   attributes above don't reach the front end for this Divi version (same
   category of silently-ignored-attribute bug hit elsewhere in this
   theme) — the module was falling back to generic h4/paragraph defaults
   (Playfair Display 500 18px header, DM Sans 14px body) and a 32px icon
   instead of the mockup's 47px circle. Direct overrides here are the
   established, reliable fallback for this. */
.ss-contact-info-blurb .et_pb_main_blurb_image img {
	width: 47px !important;
	height: 47px !important;
}
.ss-contact-info-blurb .et_pb_module_header {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 1px !important;
	color: #aa7578 !important;
}
.ss-contact-info-blurb .et_pb_blurb_description {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
	font-weight: 400 !important;
	font-size: 22px !important;
	color: #535252 !important;
}
.ss-contact-info-link {
	color: inherit;
	text-decoration: none;
}
.ss-contact-info-link:hover {
	color: #aa7578;
	text-decoration: underline;
}
/* This section had no module_class at all, so the Phone/Email/Instagram
   row never got the standard mobile side-padding fix every other
   row-fix in this file exists for, and bled flush to the screen edge
   below 980px. */
@media (max-width: 980px) {
	.ss-contact-info-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
	/* Same missing-module_class gap as .ss-contact-info-section above —
	   the "Get In Touch" heading + form section had no module_class
	   either, so it bled flush to the screen edge on mobile too. */
	.ss-get-in-touch-section .et_pb_row {
		width: 100% !important;
		box-sizing: border-box;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* "Get In Touch" heading (layouts/contact-me.divi) — a *negative*
   text_letter_spacing value ("-1.08px", matching the mockup) silently
   breaks Divi's CSS generation for the whole module: every other
   text_* attribute on it (font, size, color, line-height) stops
   applying too, falling back to generic body-paragraph defaults. Set
   here instead, bypassing that attribute entirely. */
.ss-get-in-touch-heading {
	letter-spacing: -1.08px;
}