/*
Theme Name: Donor Whisperer
Theme URI: https://donorwhisperer.co.uk
Author: Donor Whisperer
Author URI: https://donorwhisperer.co.uk
Description: The official Donor Whisperer block theme, built from the Claude Design system export. Royal blue to gold spectrum gradients, Poppins caps headings, Montserrat body, pill buttons, soft cards and plus-mark sparkles — with ready-made patterns for the Home, About, Products and Free resources pages.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: donor-whisperer
Tags: block-patterns, block-styles, full-site-editing, one-column, custom-colors, custom-logo, editor-style
*/

/* ============================================================
   1 · Token layer — lifted verbatim from the Donor Whisperer
   design system (single source of truth). Do not edit values
   here; change them in the design system first.
   ============================================================ */
:root {
	/* ---- Decoration ---- */
	--dw-sparkle-opacity: 0.5;

	/* ---- Brand spectrum (raw) ---- */
	--dw-royal-blue: #3626A7;
	--dw-mid-blue:   #647CD3;
	--dw-purple:     #8C56BB;
	--dw-violet:     #BF77B7;
	--dw-pink:       #F5A0AF;
	--dw-peach:      #FFADA5;
	--dw-red:        #FF331F;
	--dw-dark-orange:#FF5A23;
	--dw-mid-orange: #FF8428;
	--dw-gold:       #FFB22D;
	--dw-light-gold: #FFD78F;

	/* ---- Neutrals ---- */
	--dw-black:      #000000;
	--dw-dark-grey:  #5F5F5F;
	--dw-mid-grey:   #8E8E8E;
	--dw-light-grey: #F2F2F2;
	--dw-white:      #FFFFFF;

	/* ---- Tints ---- */
	--dw-royal-blue-08: rgba(54, 38, 167, 0.08);
	--dw-royal-blue-12: rgba(54, 38, 167, 0.12);
	--dw-gold-12:       rgba(255, 178, 45, 0.14);
	--dw-peach-16:      rgba(255, 173, 165, 0.18);
	--dw-violet-12:     rgba(191, 119, 183, 0.14);

	/* ---- Signature gradients ---- */
	--dw-gradient-hero:
		radial-gradient(130% 120% at 90% 4%, rgba(255,197,33,0.95), rgba(255,197,33,0) 52%),
		radial-gradient(120% 120% at 96% 98%, rgba(255,120,60,0.85), rgba(255,120,60,0) 55%),
		radial-gradient(120% 120% at 60% 96%, rgba(255,138,178,0.70), rgba(255,138,178,0) 55%),
		radial-gradient(120% 120% at 6% 8%, rgba(78,100,224,0.90), rgba(78,100,224,0) 58%),
		linear-gradient(118deg in oklch, #322099 0%, #5A3FC0 40%, #9A4FAE 62%, #D96A78 82%, #FF9A3C 100%);
	--dw-gradient-cool:
		radial-gradient(120% 120% at 10% 8%, rgba(96,124,232,0.85), rgba(96,124,232,0) 55%),
		radial-gradient(120% 120% at 96% 96%, rgba(160,95,206,0.85), rgba(160,95,206,0) 55%),
		linear-gradient(130deg in oklch, #2E2196 0%, #4A54C4 45%, #7C52C6 78%, #9E5FC8 100%);
	--dw-gradient-warm:
		radial-gradient(120% 120% at 4% 6%, rgba(255,214,202,0.90), rgba(255,214,202,0) 55%),
		radial-gradient(120% 120% at 98% 98%, rgba(255,200,32,0.90), rgba(255,200,32,0) 55%),
		linear-gradient(125deg in oklch, #FF9A8E 0%, #FF8A3E 55%, #FFC020 100%);
	--dw-gradient-mark: linear-gradient(120deg, #647CD3 0%, #BF77B7 45%, #FF5A23 80%, #FFB22D 100%);

	/* ---- Semantic aliases ---- */
	--color-bg:           var(--dw-white);
	--color-bg-subtle:    var(--dw-light-grey);
	--color-surface:      var(--dw-white);
	--color-surface-alt:  #FAFAFB;
	--color-text:         #1C1830;
	--color-text-muted:   var(--dw-dark-grey);
	--color-text-subtle:  var(--dw-mid-grey);
	--color-text-invert:  var(--dw-white);
	--color-primary:        var(--dw-royal-blue);
	--color-primary-hover:  #2A1D85;
	--color-primary-press:  #211770;
	--color-on-primary:     var(--dw-white);
	--color-accent:         var(--dw-mid-orange);
	--color-accent-hover:   #F0701A;
	--color-on-accent:      var(--dw-white);
	--color-border:        #E4E2EC;
	--color-border-strong: #CFCBDD;
	--color-focus-ring:    var(--dw-mid-blue);
	--color-success: #1F8A5B;
	--color-warning: var(--dw-gold);
	--color-danger:  var(--dw-red);
	--color-info:    var(--dw-mid-blue);

	/* ---- Type ---- */
	--font-heading: "Poppins", "Century Gothic", "Futura", sans-serif;
	--font-body: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--lh-tight: 1.04;
	--lh-heading: 1.15;
	--lh-snug: 1.35;
	--lh-body: 1.6;
	--ls-display: -0.02em;
	--ls-heading: -0.01em;
	--ls-caps: 0.08em;
	--ls-wordmark: 0.18em;

	/* ---- Space / radius / border ---- */
	--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
	--space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
	--space-7: 3rem;    --space-8: 4rem;   --space-9: 6rem;
	--radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;
	--radius-xl: 32px; --radius-pill: 999px; --radius-card: var(--radius-lg);
	--border-width: 1.5px;
	--border-width-strong: 2px;

	/* ---- Shadows / focus / motion ---- */
	--shadow-xs: 0 1px 2px rgba(54, 38, 167, 0.06);
	--shadow-sm: 0 2px 8px rgba(54, 38, 167, 0.08);
	--shadow-md: 0 10px 28px -8px rgba(54, 38, 167, 0.18);
	--shadow-lg: 0 24px 60px -16px rgba(54, 38, 167, 0.26);
	--shadow-warm: 0 18px 40px -12px rgba(255, 132, 40, 0.30);
	--focus-ring: 0 0 0 3px rgba(100, 124, 211, 0.45);
	--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}

/* ============================================================
   2 · Base polish
   ============================================================ */
::selection { background: var(--dw-royal-blue-12); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

b, strong { font-weight: 700; }

/* Post titles and page titles follow the heading element rules from
   theme.json; keep archive/query titles consistent. */
.wp-block-query-title,
.wp-block-post-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: var(--ls-heading);
}

/* ============================================================
   3 · Gradient fallbacks
   Browsers without `in oklch` gradient interpolation drop the
   whole declaration (var() substitution fails "invalid at
   computed-value time"), so paint an sRGB equivalent instead.
   ============================================================ */
@supports not (background: linear-gradient(90deg in oklch, #000, #fff)) {
	.has-hero-gradient-background {
		background:
			radial-gradient(130% 120% at 90% 4%, rgba(255,197,33,0.95), rgba(255,197,33,0) 52%),
			radial-gradient(120% 120% at 96% 98%, rgba(255,120,60,0.85), rgba(255,120,60,0) 55%),
			radial-gradient(120% 120% at 60% 96%, rgba(255,138,178,0.70), rgba(255,138,178,0) 55%),
			radial-gradient(120% 120% at 6% 8%, rgba(78,100,224,0.90), rgba(78,100,224,0) 58%),
			linear-gradient(118deg, #322099 0%, #5A3FC0 40%, #9A4FAE 62%, #D96A78 82%, #FF9A3C 100%) !important;
	}
	.has-cool-gradient-background {
		background:
			radial-gradient(120% 120% at 10% 8%, rgba(96,124,232,0.85), rgba(96,124,232,0) 55%),
			radial-gradient(120% 120% at 96% 96%, rgba(160,95,206,0.85), rgba(160,95,206,0) 55%),
			linear-gradient(130deg, #2E2196 0%, #4A54C4 45%, #7C52C6 78%, #9E5FC8 100%) !important;
	}
	.has-warm-gradient-background {
		background:
			radial-gradient(120% 120% at 4% 6%, rgba(255,214,202,0.90), rgba(255,214,202,0) 55%),
			radial-gradient(120% 120% at 98% 98%, rgba(255,200,32,0.90), rgba(255,200,32,0) 55%),
			linear-gradient(125deg, #FF9A8E 0%, #FF8A3E 55%, #FFC020 100%) !important;
	}
}

/* ============================================================
   4 · Sparkle fields — "+" texture, always behind content
   ============================================================ */
.dw-sparkles,
.dw-sparkles-hero {
	position: relative;
	isolation: isolate;
}
.dw-sparkles > *,
.dw-sparkles-hero > * { position: relative; z-index: 1; }

.dw-sparkles::before,
.dw-sparkles-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: var(--dw-sparkle-opacity);
	background-repeat: no-repeat;
}
.dw-sparkles::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 3v16M3 11h16' stroke='%23FFADA5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v14M2 9h14' stroke='%23FFB22D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: 8% 22%, 70% 14%, 30% 78%;
}
/* Hero variant — masthead-style scatter, sparse and irregular */
.dw-sparkles-hero::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 4v22M4 15h22' stroke='%23FFB22D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 3v16M3 11h16' stroke='%23FFADA5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='%23FFD78F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23F5A0AF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v14M2 9h14' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: 5% 22%, 16% 72%, 30% 30%, 92% 26%, 84% 68%, 63% 82%;
}

/* ============================================================
   5 · Surface helpers, capsules, text gradient, overline
   ============================================================ */
.is-style-dw-capsule-peach { background: var(--dw-peach-16); border-radius: var(--radius-lg); }
.is-style-dw-capsule-gold  { background: var(--dw-gold-12); border-radius: var(--radius-lg); }
.is-style-dw-capsule-blue  { background: var(--dw-royal-blue-08); border-radius: var(--radius-lg); }

.dw-text-gradient {
	background: var(--dw-gradient-mark);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.dw-text-gradient-hero {
	background: var(--dw-gradient-hero);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.dw-overline {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

/* Display-size headings get the tighter brand leading and tracking */
.has-display-font-size {
	line-height: var(--lh-tight) !important;
	letter-spacing: var(--ls-display) !important;
	font-weight: 800;
}

/* ============================================================
   6 · Buttons — pill, Poppins caps (spec from Button.jsx)
   Default (theme.json): primary · royal blue / white / 12×24 · 15px
   ============================================================ */
.wp-block-button .wp-block-button__link {
	border: var(--border-width) solid transparent;
	transition:
		background var(--dur-base) var(--ease-standard),
		color var(--dur-base) var(--ease-standard),
		border-color var(--dur-base) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard),
		box-shadow var(--dur-base) var(--ease-standard);
}
.wp-block-button .wp-block-button__link:active {
	transform: translateY(1px) scale(0.985);
}

/* Accent — warm CTA */
.wp-block-button.is-style-dw-accent .wp-block-button__link {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
}
.wp-block-button.is-style-dw-accent .wp-block-button__link:hover,
.wp-block-button.is-style-dw-accent .wp-block-button__link:focus {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-on-accent);
}

/* Secondary — quiet outline */
.wp-block-button.is-style-dw-secondary .wp-block-button__link {
	background: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-primary);
}
.wp-block-button.is-style-dw-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-dw-secondary .wp-block-button__link:focus {
	background: var(--dw-royal-blue-08);
	color: var(--color-primary);
}

/* Ghost — text-weight action */
.wp-block-button.is-style-dw-ghost .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--color-primary);
}
.wp-block-button.is-style-dw-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-dw-ghost .wp-block-button__link:focus {
	background: var(--dw-royal-blue-08);
	color: var(--color-primary);
}

/* Core "outline" style, tuned for dark/gradient surfaces (used in hero) */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: var(--border-width);
	padding-top: 12px; padding-bottom: 12px;
	padding-left: 24px; padding-right: 24px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.14);
}

/* Size helpers — add as extra CSS class on the button block */
.wp-block-button.dw-btn-sm .wp-block-button__link { padding: 8px 16px; font-size: 0.8125rem; }
.wp-block-button.dw-btn-lg .wp-block-button__link { padding: 15px 32px; font-size: 1.0625rem; }

/* ============================================================
   7 · Cards — group block styles (spec from Card.jsx)
   ============================================================ */
.is-style-dw-card,
.is-style-dw-card-accent {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.is-style-dw-card-accent::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--dw-gradient-hero);
}
.dw-card-hover:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.dw-card-featured {
	box-shadow: var(--shadow-warm);
	border-color: var(--dw-gold);
}

/* ============================================================
   8 · Callouts (spec from Callout.jsx) — use on a group block
   ============================================================ */
.dw-callout {
	border-radius: var(--radius-md);
	padding: 14px 16px;
}
.dw-callout--info   { background: var(--dw-royal-blue-08); }
.dw-callout--warm   { background: var(--dw-peach-16); }
.dw-callout--gold   { background: var(--dw-gold-12); }
.dw-callout--success{ background: rgba(31, 138, 91, 0.10); }
.dw-callout--danger { background: rgba(255, 51, 31, 0.10); }
.dw-callout .dw-callout-title {
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.8125rem;
	margin: 0 0 3px;
}
.dw-callout--info .dw-callout-title    { color: var(--color-primary); }
.dw-callout--warm .dw-callout-title    { color: #C0436A; }
.dw-callout--gold .dw-callout-title    { color: #9A6200; }
.dw-callout--success .dw-callout-title { color: var(--color-success); }
.dw-callout--danger .dw-callout-title  { color: var(--color-danger); }
.dw-callout p { font-size: 0.875rem; line-height: 1.55; }

/* ============================================================
   9 · Badges — paragraph helper class
   ============================================================ */
.dw-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--dw-gold-12);
	color: #9A6200;
}
.dw-badge--primary { background: var(--dw-royal-blue-08); color: var(--color-primary); }
.dw-badge--pink    { background: var(--dw-peach-16); color: #C0436A; }
.dw-badge--solid   { background: var(--color-accent); color: #fff; }

/* ============================================================
   10 · Squiggle separator — peach brand motif
   ============================================================ */
.wp-block-separator.is-style-dw-squiggle {
	border: none;
	height: 40px;
	width: 120px;
	max-width: 120px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none'%3E%3Cpath d='M4 20 C 14 4, 26 4, 34 20 S 54 36, 62 20 S 82 4, 90 20 S 110 36, 116 20' stroke='%23FFADA5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 1;
}

/* ============================================================
   11 · Wordmark & logo helpers
   ============================================================ */
.dw-wordmark {
	display: inline-flex;
	flex-direction: column;
	line-height: 0.92;
	font-family: var(--font-heading);
	color: var(--dw-royal-blue);
	text-decoration: none;
}
.dw-wordmark .dw-wordmark-donor {
	font-weight: 700;
	text-transform: lowercase;
	letter-spacing: -0.01em;
	font-size: 1.9em;
}
.dw-wordmark .dw-wordmark-whisperer {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-wordmark);
	font-size: 1em;
}
.dw-on-dark .dw-wordmark { color: var(--dw-white); }

/* White knockout for the logo on dark or gradient surfaces */
.dw-logo-knockout img { filter: brightness(0) invert(1); }

/* Circular portrait with the gradient brand ring (Avatar.jsx) */
.dw-avatar-ring img {
	border-radius: 50%;
	padding: 4px;
	background: var(--dw-gradient-mark);
	border: 2px solid #fff;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Stylised book-cover stand-in — replace with the real cover image */
.dw-book-cover {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

/* Big stat number */
.dw-stat {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--dw-royal-blue);
}

/* ============================================================
   12 · Header & navigation
   ============================================================ */
.dw-site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover,
.wp-block-navigation a:focus { color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; }
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: 6px;
}
/* Mobile overlay: white on royal blue, per the brand rule */
.wp-block-navigation__responsive-container.is-menu-open {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ============================================================
   13 · Footer
   ============================================================ */
.dw-site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.dw-site-footer a:hover, .dw-site-footer a:focus { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.dw-site-footer .wp-block-page-list { font-size: 0.875rem; }

/* ============================================================
   14 · Forms (Input.jsx spec) — search, comments, Mailerlite, Woo
   ============================================================ */
.wp-block-search__input,
.wp-site-blocks input[type="text"],
.wp-site-blocks input[type="email"],
.wp-site-blocks input[type="url"],
.wp-site-blocks input[type="search"],
.wp-site-blocks input[type="tel"],
.wp-site-blocks input[type="number"],
.wp-site-blocks input[type="password"],
.wp-site-blocks textarea,
.wp-site-blocks select {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: 11px 14px;
	transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.wp-block-search__input:focus,
.wp-site-blocks input:focus,
.wp-site-blocks textarea:focus,
.wp-site-blocks select:focus {
	border-color: var(--color-primary);
	box-shadow: var(--focus-ring);
	outline: none;
}
.wp-block-search__button {
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ============================================================
   15 · WooCommerce — inherit the brand
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--radius-pill) !important;
	background: var(--color-primary) !important;
	color: var(--color-on-primary) !important;
	padding: 12px 24px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover {
	background: var(--color-primary-hover) !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--color-accent) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--color-accent-hover) !important;
}
.woocommerce span.onsale {
	background: var(--dw-gold);
	color: var(--color-text);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
}
.woocommerce ul.products li.product,
.wc-block-grid__product {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	padding: var(--space-4);
}

/* ============================================================
   16 · Blog cards (query loop)
   ============================================================ */
.dw-post-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.dw-post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dw-post-card .wp-block-post-title { font-size: 1.25rem; }
.dw-post-card .wp-block-post-title a { text-decoration: none; }
.dw-post-card .wp-block-post-featured-image img { border-radius: 0; }

/* ============================================================
   17 · Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	.dw-card-hover:hover,
	.dw-post-card:hover,
	.wp-block-button .wp-block-button__link:active { transform: none; }
}