/*!
 * Bellita theme — front-end CSS
 * Loaded by inc/enqueue.php (Plan 01).
 *
 * This file holds everything theme.json cannot express: hover transitions,
 * ::before/::after decorations, gradients, sticky-header backdrop, focus
 * visibility, prefers-reduced-motion overrides, mobile breakpoint at 900px,
 * and the .is-style-outline button variant (D-10, D-12).
 *
 * Targets the bellita-* class hooks emitted by Plan 03 template parts and
 * Plan 04 patterns. Reads CSS custom properties (--wp--preset--color--*)
 * generated by WordPress from theme.json (Plan 01).
 */

/* === CRITICAL START === */
/* Above-the-fold CSS extracted by inc/enqueue.php's bellita_emit_critical_css()
   helper and inlined via wp_add_inline_style() on a deferred dummy handle.
   Sections 1-9 (custom-property aliases, reset, utilities, focus, buttons,
   topbar, header, hero) cover the first paint on every page-type.
   Phase-4 D-D — Claude's Discretion strategy. Phase-6 host runbook documents
   HTTP/103 Early Hints / preload+swap as the v2 deferral half. */

/* ============================================================
   1. Custom-property aliases (legacy mockup names → wp tokens)
   ============================================================ */
:root {
	--champagne:      var(--wp--preset--color--champagne);
	--champagne-dark: var(--wp--preset--color--champagne-dark);
	--blush:          var(--wp--preset--color--blush);
	--cream:          var(--wp--preset--color--cream);
	--ivory:          var(--wp--preset--color--ivory);
	--deep:           var(--wp--preset--color--deep);
	--text:           var(--wp--preset--color--text);
	--muted:          var(--wp--preset--color--muted);
	--line:           var(--wp--preset--color--line);
	--destructive: #9B2C2C; /* Phase 2: form error states (UI-SPEC line 130) */
}

/* ============================================================
   2. Global reset / smoothing
   ============================================================ */
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================================
   3. Utilities (.bellita-eyebrow shared across patterns)
   ============================================================ */
.bellita-eyebrow,
.eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.75rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--champagne-dark);
	font-weight: 500;
	display: inline-block;
}

/* Section heading wrapper used by services/pricelist/testi/contact patterns */
.bellita-section-head {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   4. Element baselines
   ============================================================ */
a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}
a:hover {
	color: var(--champagne-dark);
}

/* ============================================================
   5. Focus visibility — WCAG 2.1 AA (A11Y-02 prerequisite, PRD §7.5)
   ============================================================ */
:focus-visible {
	outline: 2px solid var(--champagne);
	outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--champagne);
	outline-offset: 2px;
}

/* Skip link „Przejdź do treści" — A11Y-03 / WCAG 2.1 AA / Phase 1 lock retrofitted in Plan 04-09.
   Hidden visually until keyboard focus, then slides into view at top-left. Lives at the very top
   of parts/header.html so first Tab on every page reveals it; Enter jumps to <main id="main">. */
.bellita-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 12px 24px;
	background: var(--deep);
	color: var(--ivory);
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--champagne);
	border-radius: 2px;
	transform: translateY(-200%);
	transition: transform 0.2s ease;
}
.bellita-skip-link:focus,
.bellita-skip-link:focus-visible {
	transform: translateY(0);
	outline: 2px solid var(--champagne);
	outline-offset: 2px;
	clip: auto;
	width: auto;
	height: auto;
	overflow: visible;
	white-space: normal;
	margin: 0;
}

/* ============================================================
   6. Block: core/button — primary + outline variant (D-12)
   ============================================================ */
.wp-block-button .wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.wp-block-button .wp-block-button__link:hover {
	background-color: var(--champagne-dark);
	border-color: var(--champagne-dark);
	transform: translateY(-1px);
	color: var(--ivory);
}

/* Outline variant — registered in inc/block-styles.php Plan 01 (label "Obrys") */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--deep);
	border: 1px solid var(--deep);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--deep);
	color: var(--ivory);
	border-color: var(--deep);
	transform: translateY(-1px);
}

/* Light-on-dark CTA used in satisfaction-guarantee section (champagne bg + deep text) */
.bellita-cta-light .wp-block-button__link {
	background-color: var(--champagne);
	color: var(--deep);
	border-color: var(--champagne);
}
.bellita-cta-light .wp-block-button__link:hover {
	background-color: var(--ivory);
	color: var(--deep);
	border-color: var(--ivory);
	transform: translateY(-1px);
}

/* ============================================================
   7. Topbar (parts/topbar.html)
   ----------------------------------------------------------------
   Phase-6 visual-regression fix (260508-g3w):
   Explicit colour rules on every text-bearing descendant so the
   inline color:#D9CFB8 on the wrapper actually applies. Inline parent
   colours don't always cascade through theme.json's body p selector
   (theme.json styles.color.text = #3A3128 emits `body { color: #3A3128 }`
   which beats the parent inline style on <p> descendants).
   Contrast: #D9CFB8 on #2B2218 = 7.4:1 (passes AAA for normal text).
   ============================================================ */
.bellita-topbar {
	font-family: var(--wp--preset--font-family--inter);
	color: #D9CFB8;
}
.bellita-topbar p,
.bellita-topbar span,
.bellita-topbar a {
	color: #D9CFB8;
}
/* Phase 6 visual-regression fix (260508-g3w round 2): emoji icons in the
   topbar render as monochrome text on Windows when Inter is the active font
   family (no color-emoji fallback). User-facing intent: phone + pin should
   read as red brand accents matching the mockup's native Segoe UI Emoji
   color rendering. Clock stays cream by inheriting the parent rule. */
.bellita-topbar .bellita-topbar__icon--phone,
.bellita-topbar .bellita-topbar__icon--pin,
.bellita-topbar__icon--phone,
.bellita-topbar__icon--pin {
	color: #E63946 !important;
	/* Round 5: force text-presentation so CSS color tints the glyph.
	   Without this, Chrome on Windows renders 📞 as a Segoe UI Emoji
	   colour glyph (outlined receiver, white interior) and CSS `color`
	   is ignored. font-variant-emoji is the modern hint; the U+FE0E
	   variation selector in the markup is the universal fallback. */
	font-variant-emoji: text;
}
.bellita-topbar a {
	text-decoration: none;
	transition: color 0.25s ease;
}
.bellita-topbar a:hover,
.bellita-topbar a:focus-visible {
	color: var(--champagne);
}
.bellita-topbar__info {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
}
.bellita-topbar .bellita-langs {
	display: flex;
	border-left: 1px solid #4a3d2c;
}
.bellita-langs .bellita-lang {
	padding: 0 14px;
	border-right: 1px solid #4a3d2c;
	display: inline-flex;          /* Phase 5 — center text vertically inside 44px hit-area */
	align-items: center;            /* Phase 5 */
	min-height: 44px;               /* Phase 5 — WCAG 2.5.5 hit-area target */
	line-height: 1;
	color: #D9CFB8;
	font-size: 0.78rem;
	text-decoration: none;
	transition: color 0.25s ease;
}
.bellita-langs .bellita-lang.is-active,
.bellita-langs .bellita-lang[aria-current="page"] {
	color: var(--champagne);
	font-weight: 500;
}

/* ============================================================
   8. Site header (parts/header.html) — sticky, blur backdrop
   ============================================================ */
.bellita-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(250, 247, 242, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	padding-top: 18px;
	padding-bottom: 18px;
}

/* Phase 6 visual-regression fix (260508-g3w round 2): hardcoded header logo
   sizing for the wp:html-rendered <a class="bellita-site-logo"><img></a> in
   parts/header.html. wp:site-logo block was replaced because it requires the
   WP custom_logo option (environment-dependent). 56px chosen vs mockup's 64px
   to balance with the 18px header padding — visually matches staging screenshot. */
.bellita-site-logo {
	display: inline-flex;
	align-items: center;
}
.bellita-site-logo img {
	height: 56px;
	width: auto;
	display: block;
}

/* Primary nav — animated champagne underline (Mockup 1 lines 60–63) */

/* Phase-6 visual-regression fix (260508-g3w):
   Force horizontal layout + reset list bullets for the wp:html-rendered nav.
   The header's nav uses static <ul> markup inside wp:html (Phase 5 D-07), which
   bypasses wp-block-navigation's auto-flex defaults. Without this, the <ul>
   inherits browser-default vertical list-item layout. */
.bellita-primary-nav,
.bellita-primary-nav .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 42px;
}
.bellita-primary-nav .wp-block-navigation-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bellita-primary-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	position: relative;
	padding: 6px 0;
	color: var(--text);
	transition: color 0.25s ease;
}
.bellita-primary-nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--champagne);
	transition: width 0.3s ease;
}
.bellita-primary-nav .wp-block-navigation-item__content:hover::after,
.bellita-primary-nav .wp-block-navigation-item__content:focus-visible::after {
	width: 100%;
}
.bellita-primary-nav .wp-block-navigation-item__content:hover {
	color: var(--deep);
}

.bellita-header-cta .wp-block-button__link {
	padding: 12px 24px;
	font-size: 0.75rem;
}

/* ============================================================
   9. Hero pattern (patterns/hero.php)
   ============================================================ */
.bellita-hero__lead {
	max-width: 520px;
}
.bellita-hero__image-wrap {
	position: relative;
}
.bellita-hero__image {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 2px;
	background: linear-gradient(135deg, var(--blush) 0%, var(--champagne) 100%);
}
.bellita-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Offset 1px champagne outline (Mockup 1 line 74) */
.bellita-hero__image::before {
	content: '';
	position: absolute;
	inset: -1px;
	border: 1px solid var(--champagne);
	transform: translate(20px, 20px);
	border-radius: 2px;
	z-index: -1;
}
.bellita-hero__badge {
	position: absolute;
	bottom: 32px;
	left: -32px;
	background-color: var(--ivory);
	box-shadow: 0 20px 60px rgba(43, 34, 24, 0.12);
	font-family: var(--wp--preset--font-family--cormorant);
	text-align: center;
	z-index: 2;
}
/* === CRITICAL END === */

/* ============================================================
   10. Trust bar (patterns/trust-bar.php) — D-04 brand SVGs
   ============================================================ */
.bellita-trust__lead {
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	color: var(--deep);
}
.bellita-trust__brands {
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	color: var(--muted);
}
/* Brand SVGs (Plan 04 emits <img class="bellita-trust__logo">) — grayscale + */
/* 0.65 opacity by default per mockup lines 256–263, restored on hover/focus. */
/* Reduced-motion: handled site-wide by the global block in section 21       */
/* (`*, *::before, *::after { transition-duration: 0.01ms !important; }`) —  */
/* no logo-specific override needed for consistency.                         */
.bellita-trust__logo {
	height: 40px;
	width: auto;
	opacity: 0.65;
	filter: grayscale(100%);
	transition: opacity 0.3s ease, filter 0.3s ease;
}
.bellita-trust__logo:hover,
.bellita-trust__logo:focus-visible {
	opacity: 1;
	filter: grayscale(0%);
}

/* ============================================================
   11. Services grid (patterns/services-grid.php)
   ============================================================ */
.bellita-services__grid {
	background-color: var(--line);
}
.bellita-service {
	transition: background-color 0.35s ease;
}
.bellita-service:hover {
	background-color: var(--cream) !important;
}
.bellita-service__icon {
	color: var(--champagne-dark);
}
.bellita-service__list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.bellita-service__list li {
	font-size: 0.88rem;
	padding: 6px 0;
	border-bottom: 1px dashed var(--line);
	color: var(--text);
	list-style: none;
}
.bellita-service__list li:last-child {
	border: 0;
}
.bellita-service__arrow a {
	color: var(--deep);
	transition: color 0.25s ease;
}
.bellita-service__arrow a:hover {
	color: var(--champagne-dark);
}

/* ============================================================
   12. About / owner-quote (patterns/owner-quote.php)
   ============================================================ */
.bellita-about__image img {
	aspect-ratio: 5/6;
	object-fit: cover;
	width: 100%;
	height: auto;
}
.bellita-about__quote cite {
	display: block;
	font-style: normal;
	font-size: 0.95rem;
	color: var(--muted);
	letter-spacing: 0.04em;
	margin-top: 16px;
	margin-bottom: 24px;
	font-family: var(--wp--preset--font-family--inter);
}
.bellita-about__stats .num,
.bellita-about__stats strong {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 2.4rem;
	color: var(--champagne-dark);
	display: block;
	line-height: 1;
	font-weight: 400;
}

/* ============================================================
   13. Pricelist preview rows (patterns/pricelist-preview.php)
   ============================================================ */
.bellita-pricelist {
	background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
}
.bellita-pricelist__grid {
	gap: 64px;
}
.bellita-pricelist .price-grid {
	/* Desktop column gap for cennik-tables.php — mirrors mockup-1-luxurious.html line 116 (260513-p9x). */
	/* WP's default wp-block-columns flex gap is collapsed by theme.json/section-2 resets, so we set it explicitly. */
	/* Mobile gap (40px) is handled by the existing @media (max-width: 768px) rule at ~line 992 — do not touch. */
	gap: 64px;
}
.bellita-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--line);
}
.bellita-price-row:last-child {
	border-bottom: 0;
}
.bellita-price-row p {
	margin: 0;
}
.bellita-pricelist__more {
	text-align: center;
	margin-top: 64px;
}

/* ============================================================
   14. Gallery hover zoom (patterns/gallery.php)
   ============================================================ */
.bellita-gallery__grid {
	gap: 0;
}
.bellita-gallery__grid .wp-block-image {
	overflow: hidden;
	margin: 0;
}
.bellita-gallery__grid .wp-block-image img {
	transition: transform 0.35s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bellita-gallery__grid .wp-block-column:not(.bellita-gallery__cta):hover .wp-block-image img {
	transform: scale(1.06);
}
.bellita-gallery__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: transform 0.35s ease;
	background: linear-gradient(135deg, var(--champagne) 0%, var(--blush) 100%);
}
.bellita-gallery__cta:hover {
	transform: scale(1.02);
}

/* ============================================================
   15. Testimonials (patterns/testimonials.php)
   ============================================================ */
.bellita-testi {
	background-color: var(--deep);
	color: #E8DECE;
}
.bellita-testi__grid {
	gap: 40px;
}
.bellita-testi__card {
	border: 1px solid #4a3d2c;
	background-color: rgba(255, 252, 247, 0.02);
	padding: 40px;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.bellita-testi__card:hover {
	border-color: var(--champagne);
	background-color: rgba(200, 168, 118, 0.04);
}
.bellita-testi__card cite {
	font-style: normal;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--champagne) !important;
}
.bellita-testi__stars {
	color: var(--champagne) !important;
	letter-spacing: 4px;
}
/* Phase 6 visual-regression fix (260508-g3w round 2): testimonials cascade
   override. The H2 ("Setki kobiet zaufały Bellicie. I wracają.") and the
   italic body quotes inherit theme.json's body color (#3A3128) instead of
   their inline `style="color:#FFFCF7"` / `style="color:#F4ECDD"` attributes
   because theme.json's `body p` selector has equal-or-higher specificity. */
.bellita-testi h2,
.bellita-testi .wp-block-heading {
	color: var(--ivory) !important;
}
.bellita-testi__card p:not(.bellita-testi__stars) {
	color: #F4ECDD !important;
}
.bellita-testi .bellita-eyebrow {
	color: #C8A876 !important;
}

/* ============================================================
   16. CTA banner / booking-banner (patterns/booking-banner.php)
   ============================================================ */
.bellita-cta-banner {
	background: linear-gradient(135deg, var(--champagne) 0%, var(--blush) 100%);
}
.bellita-cta-banner h2 br {
	display: inline;
}

/* Satisfaction guarantee section — dark gradient bg */
.bellita-guarantee {
	background: linear-gradient(135deg, var(--deep) 0%, #3d3120 100%);
}

/* Phase-6 visual-regression fix (260508-g3w):
   Force the gwarancja columns to render as a horizontal grid matching the
   mockup contract (mockup-1-luxurious.html lines 344-354:
   grid-template-columns: auto 1fr auto). Static diagnosis (no browser access)
   identified narrow-middle-column flex-shrink as the most likely cause of
   the per-character word-wrap regression — wp:columns renders as flex with
   default `flex:1 1 0%` on the un-sized middle column, so given column 1
   (flex-basis:100px) + column 3 (flex-basis:auto, button ~200px wide), the
   middle column shrinks to fit its longest word ("usatysfakcjonowana") and
   the headline + eyebrow word-wrap aggressively. Replacing the flex layout
   with `display:grid; grid-template-columns: auto 1fr auto` is defensive:
   it neutralizes that cause AND the alternative cause (a) where the
   .wp-block-cover__inner-container collapses to theme.json contentSize:780px
   instead of the cover's per-block contentSize:1100px, because `max-width`
   here forces 1100px regardless of inner-container width. */
.bellita-guarantee .wp-block-cover__inner-container > .wp-block-columns {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	gap: 64px;
	align-items: center;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.bellita-guarantee .wp-block-cover__inner-container > .wp-block-columns > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0;
}
.bellita-guarantee h2,
.bellita-guarantee .wp-block-heading {
	color: var(--ivory) !important;
	word-break: normal;
	overflow-wrap: break-word;
}
/* Phase 6 visual-regression fix (260508-g3w round 2): gwarancja eyebrow +
   body paragraph cascade override. Round 1 only covered h2; eyebrow and
   body still inherited theme.json's body p { color: #3A3128 } rule.
   :not(.has-text-align-center) excludes the giant ✓ paragraph which has
   its own inline #C8A876 we want to preserve. */
.bellita-guarantee .bellita-eyebrow {
	color: #C8A876 !important;
}
.bellita-guarantee p:not(.bellita-eyebrow):not(.has-text-align-center) {
	color: #D9CFB8 !important;
}
/* Round 4: giant ✓ checkmark column. Has class="has-text-align-center has-text-color"
   which collides with WP's slug-poison rule (.has-text-color forces #3A3128 !important).
   Need explicit !important rule to restore champagne. */
.bellita-guarantee p.has-text-align-center {
	color: #C8A876 !important;
}
.bellita-guarantee .wp-block-button__link {
	color: #2B2218 !important;
}

/* ============================================================
   17. Contact + map (patterns/contact-map.php)
   ============================================================ */
.bellita-contact__grid {
	gap: 60px;
}
.bellita-contact__info {
	background-color: var(--ivory);
	padding: 56px;
}
.bellita-contact__dl dt {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.bellita-contact__dl dd {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.25rem;
	color: var(--deep);
	margin: 0 0 24px 0;
}
.bellita-contact__dl dd small {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9rem;
	color: var(--muted);
}
.bellita-contact__map {
	background: linear-gradient(135deg, var(--blush) 0%, var(--champagne) 100%);
	min-height: 520px;
}
.bellita-contact__map iframe {
	min-height: 520px;
	width: 100%;
	border: 0;
	display: block;
}

/* ============================================================
   18. Footer (parts/footer.html)
   ============================================================ */
.bellita-site-footer {
	font-family: var(--wp--preset--font-family--inter);
}

/* Phase-6 visual-regression fix (260508-g3w):
   Same cascade-override pattern as topbar — explicit colour rules on every
   text-bearing descendant so the inline color:#A89880 on the wrapper applies.
   Note: #A89880 on #2B2218 = 3.3:1, which is BELOW WCAG AA 4.5:1 for body text.
   This matches the mockup (line 166), but flag at Task 4 checkpoint — Mariusz
   may want to bump to #C9BBA3 (4.5:1+) for AA compliance. Headings #FFFCF7 = 14.5:1. */
/* Phase 6 visual-regression fix (260508-g3w round 2): bumped specificity to
   `body .bellita-site-footer h4` so this rule wins against any later rule
   the WP block renderer emits. Same for footer body links — promoted from
   #A89880 (3.3:1, AA fail) to #C9BBA3 (~4.5:1, AA pass) per Mariusz's
   round-1 checkpoint deferred decision. Round-2 feedback ("more contrast")
   confirmed the bump is justified. */
body .bellita-site-footer p,
body .bellita-site-footer li,
body .bellita-site-footer span {
	color: #C9BBA3 !important;
}
body .bellita-site-footer a {
	color: #C9BBA3 !important;
	text-decoration: none;
}
body .bellita-site-footer h4,
body .bellita-site-footer .wp-block-heading {
	color: var(--ivory) !important;
}
.bellita-footer-bottom,
.bellita-footer-bottom p,
.bellita-footer-bottom a {
	color: #7a6a52 !important;
}
.bellita-footer-bottom a:hover {
	color: var(--champagne);
}

/* Phase 6 visual-regression fix (260508-g3w round 2): the footer logo asset
   logo-light.svg embeds a dark raster PNG and renders nearly invisible on the
   #2B2218 footer background. CSS filter mirrors mockup line 554's inline
   `filter:invert(1) brightness(.95)`. Round-2 reinforcement: bumped to
   `invert(1) brightness(1.1)` so the cream-on-brown contrast survives any
   downstream blend-mode / opacity inheritance the WP image block emits. */
/* Round 4: render the SVG silhouette as a solid ivory mask. Bypasses the
   filter approach (which depends on the embedded PNG's exact pixel values
   and was producing inconsistent results across browsers/cache states).
   The figure becomes the visible element; the original <img> is hidden. */
.bellita-site-footer .bellita-footer-logo {
	width: 200px !important;
	aspect-ratio: 512 / 399;
	background-color: var(--ivory) !important;
	-webkit-mask: url("/wp-content/themes/bellita/assets/images/logo-light.svg") no-repeat center / contain;
	mask: url("/wp-content/themes/bellita/assets/images/logo-light.svg") no-repeat center / contain;
	margin: 0;
}
.bellita-site-footer .bellita-footer-logo img {
	display: none !important;
}
.bellita-footer-grid {
	gap: 60px;
}
.bellita-footer-grid a {
	color: #C9BBA3 !important; /* Round 2: bumped from #A89880 (3.3:1) for WCAG AA. Round 3: !important to beat WP's .has-text-color { color: #3A3128 !important } slug-collision rule. */
	transition: color 0.25s ease;
}
.bellita-footer-grid a:hover {
	color: var(--champagne) !important;
}
.bellita-footer-grid h4 {
	color: var(--ivory) !important;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom: 16px;
}
.bellita-footer-bottom a {
	color: #7a6a52;
	transition: color 0.25s ease;
}
.bellita-footer-bottom a:hover {
	color: var(--champagne);
}

/* Strip default <ul> bullets in footer columns */
.bellita-site-footer .wp-block-list,
.bellita-site-footer .wp-block-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bellita-site-footer .wp-block-list li {
	padding: 6px 0;
	font-size: 0.88rem;
	line-height: 1.7;
}

/* Social icons hover (parts/socials.html) */
.bellita-socials .wp-social-link,
.bellita-footer-socials .wp-social-link {
	background-color: transparent !important;
	border: 1px solid #4a3d2c;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.bellita-socials .wp-social-link:hover,
.bellita-footer-socials .wp-social-link:hover {
	background-color: var(--champagne) !important;
	border-color: var(--champagne);
	color: var(--deep) !important;
	transform: translateY(-1px);
}

/* ============================================================
   19. Quote / blockquote default (used by owner-quote pattern)
   ============================================================ */
blockquote.wp-block-quote {
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	border-left: 2px solid var(--champagne);
	padding-left: 24px;
	font-size: 1.6rem;
	line-height: 1.4;
	color: var(--deep);
	margin-left: 0;
	margin-right: 0;
}
blockquote.wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font-size: 0.95rem;
	color: var(--muted);
	font-style: normal;
	font-family: var(--wp--preset--font-family--inter);
	letter-spacing: 0.04em;
}

/* ============================================================
   20. Mobile breakpoint — 900px (Mockup 1 lines 178–188)
   ============================================================ */
@media (max-width: 900px) {
	/* Container padding */
	.wp-block-group.has-global-padding,
	.wp-site-blocks {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Hide desktop nav (mobile-nav toggle deferred to Phase 2 if needed) */
	.bellita-primary-nav { display: none; }
	.bellita-header-cta { display: none; }

	/* Sticky header compaction */
	.bellita-site-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.bellita-site-logo img {
		height: 48px;
	}

	/* Topbar wrap */
	.bellita-topbar__info {
		flex-wrap: wrap;
		gap: 12px;
	}

	/* Compact hero padding */
	.bellita-hero { padding-top: 60px !important; padding-bottom: 80px !important; }

	/* Section padding compaction */
	.bellita-services,
	.bellita-about,
	.bellita-guarantee,
	.bellita-pricelist,
	.bellita-testi,
	.bellita-cta-banner,
	.bellita-contact { padding-top: 70px !important; padding-bottom: 70px !important; }

	/* Multi-col grids → 1fr (WP columns block uses flex; switch to column direction) */
	.bellita-hero__grid,
	.bellita-about .wp-block-columns,
	.bellita-contact__grid,
	.bellita-pricelist__grid,
	.bellita-testi__grid,
	.bellita-footer-grid { flex-direction: column !important; gap: 40px !important; }

	.bellita-services__grid { flex-direction: column !important; gap: 1px !important; }

	/* Phase-6 visual-regression fix (260508-g3w):
	   Collapse the gwarancja grid to a single column on narrow viewports. */
	.bellita-guarantee .wp-block-cover__inner-container > .wp-block-columns {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
		text-align: center;
	}

	/* Gallery 4-col → 2-col */
	.bellita-gallery__grid { flex-wrap: wrap !important; }
	.bellita-gallery__grid .wp-block-column { flex-basis: 50% !important; }

	/* About stats stay 3-col but tighter gap */
	.bellita-about__stats { gap: 16px !important; }

	/* Hero badge repositions inside the column */
	.bellita-hero__badge {
		position: relative;
		bottom: 0;
		left: 0;
		margin-top: 16px;
		display: inline-block;
	}

	/* Contact info card compaction */
	.bellita-contact__info {
		padding: 40px 28px;
	}

	/* Trust bar wraps */
	.bellita-trust__brands {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 20px !important;
	}

	/* ----------------------------------------------------------
	   Phase 2 mobile rules (UI-SPEC §467–482)
	   ---------------------------------------------------------- */
	.bellita-service__hero {
		padding-top: 60px !important;
		padding-bottom: 40px !important;
	}
	.bellita-treatments__table {
		font-size: 0.95rem;
	}
	.bellita-treatments__table th,
	.bellita-treatments__table td {
		padding: 12px 8px 12px 0;
	}
	.bellita-realisations__grid {
		grid-template-columns: 1fr;
	}
	.bellita-team__grid {
		grid-template-columns: 1fr !important;
		gap: 40px;
	}
	.bellita-promos__grid {
		flex-direction: column;
		gap: 40px;
	}
	.bellita-promo {
		padding: 32px 24px;
	}
	.bellita-form-section {
		padding: 32px 24px;
	}
	.bellita-form__submit {
		width: 100%;
		min-width: 0;
		align-self: stretch;
	}
	.bellita-gallery__filter {
		gap: 8px;
		flex-wrap: wrap;
	}
	.bellita-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bellita-lightbox__close { top: -40px; right: 0; }
	.bellita-lightbox__prev,
	.bellita-lightbox__next {
		top: auto;
		bottom: -50px;
		transform: none;
	}
	.bellita-lightbox__prev { left: 30%; }
	.bellita-lightbox__next { right: 30%; }
	.bellita-lightbox__img {
		max-height: calc(100vh - 160px);
	}

	/* ----------------------------------------------------------
	   Phase 3 cennik mobile additions (D-29 — single-breakpoint policy preserved)
	   Phase 999.2 Plan 04 — __note full-width on mobile (UI-SPEC §Responsive)
	   ---------------------------------------------------------- */
	.bellita-cennik-tabs { flex-wrap: wrap; gap: 8px; padding: 12px 0; top: 64px; overflow-x: visible; }
	.bellita-cennik-tabs__pill { padding: 10px 12px; font-size: 0.72rem; }
	.bellita-pricelist .price-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
	.bellita-pricelist__category-table { margin-bottom: 32px; }
	.bellita-pricelist__category-table caption { font-size: 1.4rem; }
	.bellita-pricelist__category-table .bellita-pricelist__price { font-size: 1.2rem; }
	.bellita-pricelist__note { max-width: 100%; }

	/* ----------------------------------------------------------
	   Phase 3 brand mobile additions (D-29 — single-breakpoint policy preserved)
	   ---------------------------------------------------------- */
	.bellita-brands-grid { grid-template-columns: 1fr; gap: 40px; }
	.bellita-brand-card { padding: 24px 20px; }
	.bellita-brand-card__name { font-size: 1.4rem; }
	.bellita-brand-hero { padding-top: 60px !important; padding-bottom: 60px !important; }
	.bellita-brand-hero__grid { grid-template-columns: 1fr !important; gap: 40px; text-align: left; }
	.bellita-brand-hero__logo { max-width: 200px; }
	.bellita-brand-hero__content { gap: 24px; }

	/* ----------------------------------------------------------
	   Phase 4 — Complianz banner + Maps placeholder mobile (D-09 + D-10)
	   ---------------------------------------------------------- */
	.cmplz-cookiebanner { padding: 16px !important; }
	.cmplz-cookiebanner .cmplz-btn { padding: 10px 16px; font-size: 0.78rem; }
	.bellita-map-placeholder { padding: 24px 16px; min-height: 360px; }
	.bellita-map-placeholder h3 { font-size: 1.3rem; }
}

/* ============================================================
   21. prefers-reduced-motion (PRD §7.5, A11Y-05 prerequisite)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.bellita-gallery__grid .wp-block-column:hover .wp-block-image img,
	.bellita-gallery__cta:hover {
		transform: none !important;
	}
	.wp-block-button .wp-block-button__link:hover {
		transform: none !important;
	}
	.bellita-socials .wp-social-link:hover,
	.bellita-footer-socials .wp-social-link:hover {
		transform: none !important;
	}
}

/* ============================================================
   22. WP block defaults — collapse default margins on first/last
   ============================================================ */
main#main > *:first-child { margin-top: 0; }
main#main > *:last-child { margin-bottom: 0; }

/* ============================================================
   23. Service-page hero + intro + sections (patterns/service-page.php — Phase 2)
   ============================================================ */
.bellita-service__hero {
	text-align: center;
}
.bellita-service__lead {
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
}
.bellita-service__intro h2 {
	text-align: left;
	margin-bottom: 24px;
}

/* ============================================================
   24. Treatments table — semantic <table> per PRD §21.2 (D-09)
   ============================================================ */
.bellita-treatments__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 40px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
}
.bellita-treatments__table caption {
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-size: 1rem;
	color: var(--muted);
	margin-bottom: 18px;
	text-align: left;
	font-style: italic;
}
.bellita-treatments__table th {
	text-align: left;
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--champagne);
	padding: 12px 16px 12px 0;
}
.bellita-treatments__table th:last-child {
	text-align: right;
	padding-right: 0;
}
.bellita-treatments__table td {
	padding: 18px 16px 18px 0;
	border-bottom: 1px dashed var(--line);
	color: var(--deep);
	font-weight: 500;
	font-size: 1rem;
}
.bellita-treatments__table td:last-child {
	text-align: right;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--champagne-dark);
	padding-right: 0;
}
.bellita-treatments__note {
	margin-top: 24px;
	font-style: italic;
	color: var(--muted);
	font-size: 0.95rem;
}

/* ============================================================
   25. Realisations gallery (3-col grid in service-page; reuses lightbox JS)
   ============================================================ */
.bellita-realisations__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 40px;
	/* Escape the 780px content-size cap that WP's is-layout-constrained parent
	   applies and stretch out to the wide-size (1280px) so the realisations
	   read as a full editorial band like the homepage gallery. */
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.bellita-realisations__grid:has(figure:nth-child(4)) {
	grid-template-columns: repeat(4, 1fr);
}
.bellita-realisations__grid figure {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	background: var(--blush);
}
.bellita-realisations__grid figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.bellita-realisations__grid figure:hover img {
	transform: scale(1.06);
}
.bellita-realisations__grid figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px;
	background: linear-gradient(transparent, rgba(43,34,24,0.7));
	color: #FFFCF7;
	font-size: 0.85rem;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.bellita-realisations__grid figure:hover figcaption,
.bellita-realisations__grid figure:focus-within figcaption {
	opacity: 1;
}

/* ============================================================
   26. FAQ accordion (patterns/service-faq.php — native <details>)
   ============================================================ */
.bellita-faq__item {
	border-bottom: 1px solid var(--line);
}
.bellita-faq__item summary {
	cursor: pointer;
	padding: 16px 32px 16px 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--deep);
	list-style: none;
	position: relative;
}
.bellita-faq__item summary::-webkit-details-marker {
	display: none;
}
.bellita-faq__item summary::after {
	content: '▾';
	position: absolute;
	right: 0;
	top: 16px;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-size: 1rem;
	color: var(--text);
	transition: transform 0.3s ease, color 0.3s ease;
}
.bellita-faq__item[open] summary::after {
	transform: rotate(180deg);
	color: var(--champagne-dark);
}
.bellita-faq__body {
	padding: 0 0 24px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--text);
	max-width: 720px;
}

/* ============================================================
   27. About-team grid (patterns/about-team.php — D-19 silhouette placeholders)
   ============================================================ */
.bellita-team__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px 64px;
}
.bellita-team__card {
	text-align: left;
}
.bellita-team__card img,
.bellita-team__portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	background: var(--blush);
	transition: transform 0.35s ease;
}
.bellita-team__card:hover img,
.bellita-team__portrait:hover img {
	transform: scale(1.03);
}
.bellita-team__card h3 {
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--deep);
}
.bellita-team__role {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--champagne-dark);
	margin-top: 8px;
}

/* ============================================================
   28. Promo grid (patterns/promo-grid.php)
   ============================================================ */
.bellita-promos__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
}
.bellita-promo {
	flex: 1 1 240px;
	background: var(--ivory);
	border: 1px solid var(--line);
	padding: 24px;
	position: relative;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bellita-promo:hover {
	border-color: var(--champagne);
	box-shadow: 0 4px 24px rgba(43,34,24,0.06);
}
.bellita-promo__badge {
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-size: 2.4rem;
	font-weight: 400;
	color: var(--champagne-dark);
	line-height: 1;
	margin-bottom: 16px;
}

/* ============================================================
   29. Contact form (patterns/contact-form.php + assets/js/contact-form.js)
   ============================================================ */
.bellita-form-section {
	background: var(--ivory);
	border: 1px solid var(--line);
	padding: 56px;
}
.bellita-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.bellita-form__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.bellita-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bellita-form__field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
}
.bellita-form__label {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.bellita-form__field input[type="text"],
.bellita-form__field input[type="email"],
.bellita-form__field input[type="tel"],
.bellita-form__field textarea,
.bellita-form__select {
	padding: 16px;
	border: 1px solid var(--line);
	background: var(--ivory);
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 400;
	font-size: 1rem;
	color: var(--deep);
	transition: border-color 0.3s ease;
	border-radius: 0;
}
.bellita-form__field input:focus-visible,
.bellita-form__field textarea:focus-visible,
.bellita-form__select:focus-visible {
	border-color: var(--champagne);
	outline: 2px solid var(--champagne);
	outline-offset: 2px;
}
.bellita-form__field textarea {
	min-height: 160px;
	resize: vertical;
}
.bellita-form__field input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--champagne-dark);
	margin-top: 2px;
	flex-shrink: 0;
}
.bellita-form__helper {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 0.85rem;
	color: var(--muted);
}
.bellita-form__error {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 0.85rem;
	color: var(--destructive);
}
.bellita-form__field input[aria-invalid="true"],
.bellita-form__field textarea[aria-invalid="true"] {
	border-color: var(--destructive);
}
.bellita-form__nudge {
	font-size: 0.95rem;
	color: var(--muted);
	font-style: italic;
	margin-top: 8px;
}
.bellita-form__status {
	min-height: 1.5em;
	font-size: 0.95rem;
	color: var(--destructive);
}
.bellita-form__submit {
	background: var(--deep);
	color: var(--ivory);
	padding: 16px 36px;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	min-width: 240px;
	transition: background 0.3s ease, transform 0.3s ease;
	align-self: flex-start;
}
.bellita-form__submit:hover:not(:disabled) {
	background: var(--champagne-dark);
	transform: translateY(-1px);
}
.bellita-form__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}
.bellita-form__submit-spinner {
	display: inline-block;
	animation: bellita-spin 1s linear infinite;
}
@keyframes bellita-spin {
	to { transform: rotate(360deg); }
}
.bellita-form__success {
	text-align: center;
	padding: 32px;
}
.bellita-form__success h3 {
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	color: var(--deep);
	font-size: 1.6rem;
	margin-bottom: 16px;
}

/* ============================================================
   30. Gallery filter row + active-tab underline (/galeria/, copy/galeria.html)
   ============================================================ */
.bellita-gallery__filter {
	display: inline-flex;
	gap: 32px;
	justify-content: center;
	width: 100%;
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.bellita-gallery__filter button {
	background: none;
	border: none;
	padding: 12px 20px 14px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	position: relative;
	transition: color 0.3s ease;
}
.bellita-gallery__filter button[aria-selected="true"] {
	color: var(--deep);
}
.bellita-gallery__filter button[aria-selected="true"]::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--champagne);
	transition: width 0.3s ease;
}
.bellita-gallery__filter button:hover {
	color: var(--deep);
}
.bellita-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
}
.bellita-gallery__grid figure {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: pointer;
	background: var(--blush);
	position: relative;
}
.bellita-gallery__grid figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.bellita-gallery__grid figure:hover img {
	transform: scale(1.06);
}
.bellita-gallery__grid figure[hidden] {
	display: none !important;
}
.bellita-gallery__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: var(--muted);
}

/* ============================================================
   31. Lightbox (assets/js/gallery-lightbox.js — JS-injected markup)
   ============================================================ */
.bellita-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: bellita-lightbox-fade 0.25s ease;
}
.bellita-lightbox[hidden] {
	display: none;
}
@keyframes bellita-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.bellita-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(43,34,24,0.92);
	cursor: pointer;
}
.bellita-lightbox__content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	z-index: 1;
	text-align: center;
}
.bellita-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	display: block;
	margin: 0 auto;
	transition: opacity 0.2s ease;
}
.bellita-lightbox__img--swap {
	opacity: 0;
}
.bellita-lightbox__caption {
	color: #D9CFB8;
	font-size: 0.85rem;
	line-height: 1.5;
	max-width: 600px;
	margin: 16px auto 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-weight: 300;
}
.bellita-lightbox__close,
.bellita-lightbox__prev,
.bellita-lightbox__next {
	position: absolute;
	background: none;
	border: none;
	color: #D9CFB8;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 12px;
	min-width: 44px;
	min-height: 44px;
	transition: color 0.3s ease;
}
.bellita-lightbox__close { top: -50px; right: 0; }
.bellita-lightbox__prev  { left: -60px; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.bellita-lightbox__next  { right: -60px; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.bellita-lightbox__close:hover,
.bellita-lightbox__close:focus-visible,
.bellita-lightbox__prev:hover,
.bellita-lightbox__prev:focus-visible,
.bellita-lightbox__next:hover,
.bellita-lightbox__next:focus-visible {
	color: var(--champagne);
}

/* ============================================================
   32. Screen-reader-only utility (used by .screen-reader-text + JS aria-live regions)
   ============================================================ */
.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ============================================================
   33. Phase-2 page-level: Booksy nudge callout, address block, /kontakt/ hours
   ============================================================ */
.bellita-kontakt__address {
	font-style: normal;
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant Garamond', serif);
	font-size: 1.25rem;
	color: var(--deep);
	line-height: 1.65;
}
.bellita-kontakt__address a {
	color: inherit;
}

/* ============================================================
   34. Cennik category tables (patterns/cennik-tables.php)
       Phase 3 — original; Phase 999.2 Plan 04 (D-06) — rebuilt for the
       hierarchical sectioned long-scroll layout: __section wrappers,
       D-02 __rowgroup labels, D-10/D-12 __note blocks.
   ============================================================ */
/* 999.2 D-06 — long-scroll section wrapper: one <section> per parent term. */
.bellita-pricelist__section {
	margin-bottom: 60px;
}
.bellita-pricelist__section:last-child { margin-bottom: 0; }
.bellita-pricelist__category-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0;
	margin-bottom: 48px;
}
.bellita-pricelist__category-table:last-child { margin-bottom: 0; }
.bellita-pricelist__category-table caption {
	caption-side: top;
	text-align: left;
	padding-bottom: 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--champagne, #C8A876);
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.55rem;
	font-weight: 500;
	color: var(--wp--preset--color--deep, #2B2218);
	line-height: 1.15;
}
.bellita-pricelist__category-table caption small {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #8A7A68);
	margin-left: 8px;
	white-space: nowrap;
}
.bellita-pricelist__category-table tbody tr {
	border-bottom: 1px dashed var(--wp--preset--color--line, #E8DECE);
}
.bellita-pricelist__category-table tbody tr:last-child { border-bottom: 0; }
.bellita-pricelist__category-table tbody td {
	padding: 18px 0;
	vertical-align: baseline;
}
.bellita-pricelist__category-table .bellita-pricelist__name strong {
	font-weight: 500;
	color: var(--wp--preset--color--deep, #2B2218);
	display: block;
}
.bellita-pricelist__category-table .bellita-pricelist__name span {
	display: block;
	font-size: 0.85rem;
	font-weight: 300;
	color: var(--wp--preset--color--muted, #8A7A68);
	margin-top: 4px;
	line-height: 1.5;
}
.bellita-pricelist__category-table .bellita-pricelist__price {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.35rem;
	color: var(--wp--preset--color--champagne-dark, #A8895C);
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-left: 24px;
}

/* 999.2 D-02 — in-table row-group label (Twarz deep-nesting collapsed per
   CONTEXT D-02): a semantically valid <tr>/<th scope="colgroup"> heading,
   not a fake heading. The border-bottom: 0 override stops the inherited
   dashed row border from drawing under the label. */
.bellita-pricelist__category-table .bellita-pricelist__rowgroup th {
	padding: 24px 0 8px;
	text-align: left;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--champagne-dark, #A8895C);
}
.bellita-pricelist__category-table .bellita-pricelist__rowgroup { border-bottom: 0; }

/* 999.2 D-10/D-12 — category note: the percentage package-discount text +
   the `*` footnote, rendered as a <p> below the table it annotates. The
   --line top divider separates the note from that table. */
.bellita-pricelist__note {
	max-width: 580px;
	margin-top: 32px;
	padding: 12px 16px 0;
	border-top: 1px solid var(--wp--preset--color--line, #E8DECE);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #8A7A68);
}

/* SR-only utility for hidden table headers (PRD §21.2 a11y) — bellita-prefixed
   to avoid collision with section 32's generic .sr-only used by Phase-2 patterns. */
.bellita-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Filter visibility (999.2 D-06) — one rule per parent-section slug toggling
   display: none on non-matching .bellita-pricelist__section blocks. Section-level
   granularity replaces the Phase-3 per-category-table rules. */
.bellita-pricelist[data-active-filter="fryzjerstwo"]              .bellita-pricelist__section:not([data-section="fryzjerstwo"])              { display: none; }
.bellita-pricelist[data-active-filter="kosmetyka-dlonie-stopy"]   .bellita-pricelist__section:not([data-section="kosmetyka-dlonie-stopy"])   { display: none; }
.bellita-pricelist[data-active-filter="kosmetyka-henna-regulacja"] .bellita-pricelist__section:not([data-section="kosmetyka-henna-regulacja"]) { display: none; }
.bellita-pricelist[data-active-filter="kosmetyka-depilacja"]      .bellita-pricelist__section:not([data-section="kosmetyka-depilacja"])      { display: none; }
.bellita-pricelist[data-active-filter="kosmetyka-twarz"]          .bellita-pricelist__section:not([data-section="kosmetyka-twarz"])          { display: none; }
.bellita-pricelist[data-active-filter="kosmetyka-cialo"]          .bellita-pricelist__section:not([data-section="kosmetyka-cialo"])          { display: none; }
.bellita-pricelist[data-active-filter="rzesy"]                    .bellita-pricelist__section:not([data-section="rzesy"])                    { display: none; }
.bellita-pricelist[data-active-filter="przekluwanie-uszu"]        .bellita-pricelist__section:not([data-section="przekluwanie-uszu"])        { display: none; }
/* "all" implicit: data-active-filter="all" → no rule fires → all sections visible */

/* ============================================================
   35. Cennik tab-bar (patterns/cennik-tabs.php) — Phase 3
   ============================================================ */
.bellita-cennik-tabs {
	position: sticky;
	top: 80px;
	z-index: 50;
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	padding: 16px 0;
	margin: 0 0 40px;
	background: rgba(250, 247, 242, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line, #E8DECE);
	overflow-x: auto;  /* defensive on viewports between 901px and very narrow desktop windows */
}
.bellita-cennik-tabs__pill {
	background: transparent;
	border: 0;
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #8A7A68);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	transition: color 0.25s ease, box-shadow 0.3s ease;
}
.bellita-cennik-tabs__pill.is-active,
.bellita-cennik-tabs__pill[aria-selected="true"] {
	color: var(--wp--preset--color--deep, #2B2218);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--champagne, #C8A876);
}
.bellita-cennik-tabs__pill:hover { color: var(--wp--preset--color--deep, #2B2218); }
.bellita-cennik-tabs__pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne, #C8A876);
	outline-offset: 2px;
}

/* ============================================================
   36. Brand cards (patterns/kosmetyki-index, brand-card) — Phase 3 Plan 07
   ============================================================ */
.bellita-brands-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px 64px;
}
.bellita-brand-card {
	background: var(--wp--preset--color--ivory, #FFFCF7);
	border: 1px solid var(--wp--preset--color--line, #E8DECE);
	padding: 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}
.bellita-brand-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 24px rgba(43, 34, 24, 0.06);
}
.bellita-brand-card__link-wrap {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.bellita-brand-card__link-wrap:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne, #C8A876);
	outline-offset: 2px;
}
.bellita-brand-card__logo {
	aspect-ratio: 1 / 1;
	max-width: 120px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--blush, #E8D5C4);
	padding: 24px;
}
.bellita-brand-card__logo img { max-width: 100%; height: auto; }
.bellita-brand-card__name {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.55rem;
	font-weight: 500;
	color: var(--wp--preset--color--deep, #2B2218);
	margin: 16px 0 8px;
	line-height: 1.15;
	text-align: center;
}
.bellita-brand-card__badge {
	display: inline-block;
	align-self: center;
	padding: 4px 12px;
	border: 1px solid currentColor;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.bellita-brand-card__badge--wlosy     { color: var(--wp--preset--color--deep, #2B2218); }
.bellita-brand-card__badge--twarz     { color: var(--wp--preset--color--champagne-dark, #A8895C); }
.bellita-brand-card__badge--paznokcie { color: var(--wp--preset--color--text, #3A3128); }
.bellita-brand-card__badge--stopy     { color: var(--wp--preset--color--muted, #8A7A68); }
.bellita-brand-card__desc {
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--text, #3A3128);
	margin-top: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bellita-brand-card__cta {
	margin-top: auto;
	padding-top: 16px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep, #2B2218);
}

/* ============================================================
   37. Brand hero (patterns/brand-hero on /kosmetyki/{slug}/) — Phase 3 Plan 07
   ============================================================ */
.bellita-brand-hero {
	background: linear-gradient(180deg, var(--wp--preset--color--cream, #FAF7F2) 0%, var(--wp--preset--color--ivory, #FFFCF7) 100%);
}
.bellita-brand-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 80px;
	align-items: center;
}
.bellita-brand-hero__logo {
	aspect-ratio: 1 / 1;
	max-width: 240px;
	margin: 0 auto;
	background: var(--wp--preset--color--blush, #E8D5C4);
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bellita-brand-hero__logo img { max-width: 100%; height: auto; }
.bellita-brand-hero__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.bellita-brand-hero__prose { max-width: 580px; }
.bellita-brand-hero__prose p { line-height: 1.75; }
.bellita-brand-hero__cta-row { margin-top: 0; }
.bellita-brand-related {
	border-top: 1px solid var(--wp--preset--color--line, #E8DECE);
	padding-top: 32px;
	margin-top: 0;
}
.bellita-brand-related__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #8A7A68);
	margin-bottom: 8px;
}
.bellita-brand-related a {
	color: var(--wp--preset--color--deep, #2B2218);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease, color 0.25s ease;
}
.bellita-brand-related a:hover {
	color: var(--wp--preset--color--champagne-dark, #A8895C);
	border-bottom-color: var(--wp--preset--color--champagne-dark, #A8895C);
}

/* ============================================================
 * 38. Complianz cookie banner — Bellita visual identity overrides (Phase 4 D-09)
 *
 * Plugin DOM is rendered by Complianz; we override colors + typography only.
 * Do NOT override copy (PL/EN/UA plugin defaults per D-09).
 * Do NOT introduce new breakpoint at-rules — single-breakpoint policy invariant.
 * ============================================================ */

.cmplz-cookiebanner {
	background-color: var(--cream) !important;
	color: var(--text) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	border: 1px solid var(--line) !important;
	border-radius: 2px !important;
	z-index: 9999;
}
.cmplz-cookiebanner h2,
.cmplz-cookiebanner h3 {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	color: var(--deep) !important;
	font-weight: 500;
	line-height: 1.15;
}
.cmplz-cookiebanner .cmplz-btn {
	font-family: 'Inter', sans-serif !important;
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 12px 24px;
	border-radius: 2px !important;
	transition: background-color 200ms ease, color 200ms ease;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background-color: var(--champagne) !important;
	color: var(--deep) !important;
	border: 1px solid var(--champagne) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background-color: var(--champagne-dark) !important;
	border-color: var(--champagne-dark) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background-color: transparent !important;
	color: var(--deep) !important;
	border: 1px solid var(--deep) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background-color: var(--deep) !important;
	color: var(--cream) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	background-color: transparent !important;
	color: var(--muted) !important;
	border: none !important;
	text-decoration: underline;
}
.cmplz-cookiebanner a {
	color: var(--champagne-dark);
}

/* ============================================================
 * 39. .bellita-map-placeholder — click-to-load Google Maps (Phase 4 D-10)
 *
 * Replaces the Phase-1 iframe in patterns/contact-map.php until consent.
 * After Complianz dispatches cmplz_event_marketing, the plugin auto-replaces
 * data-cmplz-blocked="googlemaps" containers with the original iframe.
 * ============================================================ */

.bellita-map-placeholder {
	background-color: var(--ivory);
	border-left: 2px solid var(--champagne);
	padding: 32px 24px;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	color: var(--text);
}
.bellita-map-placeholder .bellita-eyebrow {
	color: var(--champagne);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
}
.bellita-map-placeholder h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--deep);
	margin: 0;
}
.bellita-map-placeholder p {
	margin: 0;
	line-height: 1.65;
}
.bellita-map-load-btn {
	background-color: var(--champagne);
	color: var(--deep);
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 12px 24px;
	border: 1px solid var(--champagne);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 200ms ease;
}
.bellita-map-load-btn:hover,
.bellita-map-load-btn:focus-visible {
	background-color: var(--champagne-dark);
	border-color: var(--champagne-dark);
}
.bellita-map-placeholder__hint {
	color: var(--muted);
	font-size: 0.78rem;
}

/* ============================================================
 * 40. Phase 7 — Single-post template + /blog/ archive styling.
 *
 * Covers all 6 sub-blocks per UI-SPEC §CSS to Add:
 *   40.1  .bellita-breadcrumbs                        ~20 lines
 *   40.2  .bellita-post-content (drop-cap, body-link, list, image)  ~35 lines
 *   40.3  .bellita-post-share                         ~50 lines
 *   40.4  .bellita-post-related                       ~50 lines
 *   40.5  .bellita-post-card (shared base for archive + related)    ~25 lines
 *   40.6  .bellita-blog-archive-head + archive grid + pagination     ~30 lines
 *   40.7  @media (prefers-reduced-motion: reduce) resets
 *
 * All values resolve to theme.json palette tokens (cream / ivory / champagne /
 * champagne-dark / muted / text / deep / line) or the project's 4-multiple
 * spacing scale (4 / 8 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 120 px).
 * Three intra-component micro-rhythm exceptions (6/10/12/18 px) are scoped
 * to typography baseline and called out where used.
 * ============================================================ */

/* 40.1 — .bellita-breadcrumbs (UI-SPEC §Component Inventory — Breadcrumbs) */
.bellita-breadcrumbs {
	padding-top: 0;
	padding-bottom: 24px;
}
.bellita-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.bellita-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* WCAG 2.5.5 touch target */
}
.bellita-breadcrumbs__link {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding: 0;
	transition: color 0.25s ease;
}
.bellita-breadcrumbs__link:hover,
.bellita-breadcrumbs__link:focus-visible {
	color: var(--wp--preset--color--champagne-dark);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--champagne);
	text-underline-offset: 4px;
}
.bellita-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 2px;
}
.bellita-breadcrumbs__sep {
	color: var(--wp--preset--color--line);
	margin: 0 12px; /* intra-component micro-rhythm — UI-SPEC permitted exception */
	user-select: none;
}
.bellita-breadcrumbs__item--current span[aria-current="page"] {
	color: var(--wp--preset--color--champagne-dark);
}
@media (max-width: 767px) {
	.bellita-breadcrumbs__list { font-size: 0.72rem; }
	.bellita-breadcrumbs__sep { margin: 0 8px; }
}

/* 40.2 — .bellita-post-content (drop-cap, body-link, list markers, image margins) */
.bellita-post-content { line-height: 1.75; }
.bellita-post-content > p:first-of-type::first-letter {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 4.8rem;
	font-weight: 400;
	color: var(--wp--preset--color--champagne-dark);
	float: left;
	line-height: 0.85;
	margin: 0.1em 0.18em 0 0;
	padding: 0;
}
@media (max-width: 479px) {
	.bellita-post-content > p:first-of-type::first-letter {
		font-size: inherit;
		float: none;
		color: inherit;
		margin: 0;
	}
}
.bellita-post-content a:not(.wp-element-button) {
	color: var(--wp--preset--color--deep);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--champagne);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.25s ease;
}
.bellita-post-content a:not(.wp-element-button):hover {
	text-decoration-color: var(--wp--preset--color--champagne-dark);
}
.bellita-post-content a:not(.wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 2px;
}
.bellita-post-content ul li::marker { color: var(--wp--preset--color--champagne-dark); }
.bellita-post-content img { max-width: 100%; height: auto; border-radius: 2px; margin: 32px auto; display: block; }
.bellita-post-content img.alignwide { max-width: 1024px; }
.bellita-post-content figcaption {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-top: 12px; /* intra-component micro-rhythm */
}

/* 40.3 — .bellita-post-share (UI-SPEC §Component Inventory — Social Share Row) */
.bellita-post-share {
	padding: 48px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-top: 64px;
}
.bellita-post-share__label {
	font-family: 'Inter', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 24px 0;
}
.bellita-post-share__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
}
.bellita-post-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px; /* intra-component micro-rhythm */
	min-height: 44px;
	padding: 12px 20px; /* intra-component micro-rhythm */
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--deep);
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.bellita-post-share__btn:hover {
	border-color: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--champagne-dark);
	background-color: var(--wp--preset--color--cream);
}
.bellita-post-share__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 2px;
}
.bellita-post-share__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.bellita-post-share__list { gap: 12px; }
}

/* 40.4 — .bellita-post-related (UI-SPEC §Component Inventory — Related Posts) */
.bellita-post-related {
	margin-top: 0;
}
.bellita-post-related__eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--champagne-dark);
	text-align: center;
	margin: 0 0 18px 0; /* intra-component micro-rhythm */
}
.bellita-post-related__heading {
	margin-top: 0;
	margin-bottom: 64px;
	color: var(--wp--preset--color--deep);
}
.bellita-post-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
@media (max-width: 1023px) {
	.bellita-post-related__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
	.bellita-post-related__grid { grid-template-columns: 1fr; gap: 24px; }
	.bellita-post-related { padding-top: 64px !important; padding-bottom: 64px !important; }
}
.bellita-post-related__empty {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.2rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
	text-align: center;
	grid-column: 1 / -1;
	padding: 32px 0;
}
.bellita-post-related__see-all {
	margin-top: 64px;
}
.bellita-post-related__see-all a {
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep);
	text-decoration: none;
	transition: color 0.25s ease;
}
.bellita-post-related__see-all a:hover { color: var(--wp--preset--color--champagne-dark); text-decoration: underline; text-decoration-color: var(--wp--preset--color--champagne); }

/* 40.5 — .bellita-post-card (shared base for /blog/ archive + related-posts grid) */
.bellita-post-card { position: relative; }
.bellita-post-card__link-wrap {
	display: block;
	text-decoration: none;
	color: inherit;
}
.bellita-post-card__link-wrap:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 4px;
}
.bellita-post-card__image,
.bellita-post-card .wp-block-post-featured-image {
	display: block;
	overflow: hidden;
	border-radius: 2px;
}
.bellita-post-card__image img,
.bellita-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform 0.6s ease;
}
.bellita-post-card:hover .bellita-post-card__image img,
.bellita-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.bellita-post-card__caption { margin-top: 16px; }
.bellita-post-card__date {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 6px; /* intra-component micro-rhythm */
}
.bellita-post-card__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	font-size: 1.55rem;
	line-height: 1.25;
	color: var(--wp--preset--color--deep);
	margin: 0 0 8px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bellita-post-card__title a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.bellita-post-card:hover .bellita-post-card__title,
.bellita-post-card:hover .bellita-post-card__title a { color: var(--wp--preset--color--champagne-dark); }
.bellita-post-card__excerpt {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 40.6 — .bellita-blog-archive-head + archive grid + pagination */
.bellita-blog-archive-head .bellita-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--champagne-dark);
	margin: 0 0 18px 0;
}
.bellita-blog-archive-head__title { color: var(--wp--preset--color--deep); margin: 0 0 24px 0; }
.bellita-blog-archive-head__lead { color: var(--wp--preset--color--muted); margin: 0; }
.bellita-blog-archive-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	list-style: none;
	padding: 0;
}
@media (max-width: 1023px) {
	.bellita-blog-archive-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
	.bellita-blog-archive-grid .wp-block-post-template { grid-template-columns: 1fr; gap: 24px; }
}
.bellita-blog-archive-pagination {
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.bellita-blog-archive-pagination a { color: var(--wp--preset--color--deep); text-decoration: none; padding: 8px 12px; }
.bellita-blog-archive-pagination a:hover { color: var(--wp--preset--color--champagne-dark); text-decoration: underline; text-decoration-color: var(--wp--preset--color--champagne); }
.bellita-blog-archive-pagination .current { color: var(--wp--preset--color--champagne-dark); border-bottom: 1px solid var(--wp--preset--color--champagne); padding-bottom: 4px; }
.bellita-blog-archive-empty {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.6rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
	padding: 80px 0;
}

/* 40.7 — Reduced-motion resets (Phase-1 A11Y-05 lock) */
@media (prefers-reduced-motion: reduce) {
	.bellita-post-card__image img,
	.bellita-post-card .wp-block-post-featured-image img { transition: none; }
	.bellita-post-card:hover .bellita-post-card__image img,
	.bellita-post-card:hover .wp-block-post-featured-image img { transform: none; }
	.bellita-post-share__btn,
	.bellita-breadcrumbs__link,
	.bellita-post-card__title,
	.bellita-post-card__title a,
	.bellita-post-related__see-all a,
	.bellita-blog-archive-pagination a { transition: none; }
}