/*
Theme Name: Summit Dahlias
Theme URI: https://summitdahlias.com
Author: Summit Dahlias
Author URI: https://summitdahlias.com
Description: Editorial garden-journal block theme for Summit Dahlias, a Pacific Northwest dahlia grower. Built for WooCommerce catalog-mode product listings.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.2.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: summit-dahlias
Tags: block-theme, e-commerce, full-site-editing, one-page
*/

/* -------------------------------------------------------------
   Summit Dahlias — component styles
   Design tokens come from theme.json (--wp--preset--* variables).
   This file only adds structure/behavior the block editor can't:
   sticky header blur, badges, card hovers, accordions, grids.
------------------------------------------------------------- */

:root {
	--sd-transition: 300ms ease;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--wp--preset--color--base);
}

/* Layout helpers */
.sd-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--page-margin-mobile);
	padding-right: var(--wp--preset--spacing--page-margin-mobile);
}
@media (min-width: 782px) {
	.sd-container {
		padding-left: var(--wp--preset--spacing--page-margin-desktop);
		padding-right: var(--wp--preset--spacing--page-margin-desktop);
	}
}

.sd-section {
	padding-top: var(--wp--preset--spacing--section-gap-sm);
	padding-bottom: var(--wp--preset--spacing--section-gap-sm);
}
@media (min-width: 782px) {
	.sd-section {
		padding-top: var(--wp--preset--spacing--section-gap);
		padding-bottom: var(--wp--preset--spacing--section-gap);
	}
}

.sd-divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 0;
}

/* Eyebrow / label-caps text */
.sd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.sd-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--primary);
	display: inline-block;
}

/* Buttons */
.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem 2rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--sd-transition), color var(--sd-transition), border-color var(--sd-transition);
	line-height: 1;
}
.sd-btn--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.sd-btn--primary:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}
.sd-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.sd-btn--outline:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.sd-btn--disabled {
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	border-color: var(--wp--preset--color--border);
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}
.sd-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color var(--sd-transition), color var(--sd-transition);
}
.sd-link:hover {
	border-color: currentColor;
	color: var(--wp--preset--color--primary);
}
.sd-link--primary {
	color: var(--wp--preset--color--primary);
}

/* Header */
.sd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(250, 249, 246, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sd-header .sd-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
}
.sd-header__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}
.sd-header__brand img {
	height: 48px;
	width: auto;
	display: block;
}

.sd-header nav.wp-block-navigation {
	--wp--style--block-gap: 2rem;
}
.sd-header .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--label) !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.sd-header .wp-block-navigation-item a:hover,
.sd-header .current-menu-item > a {
	color: var(--wp--preset--color--primary) !important;
}

/* Hero — a core/cover block, so the image is replaceable in the editor.
   The scrim lives on the cover's own overlay span (customGradient in the
   block attributes), which keeps the overlay controls working in the editor. */
.wp-block-cover.sd-hero {
	padding: 0;
	align-items: center;
}
.sd-hero .wp-block-cover__inner-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--page-margin-mobile);
	padding-right: var(--wp--preset--spacing--page-margin-mobile);
}
@media (min-width: 782px) {
	.sd-hero .wp-block-cover__inner-container {
		padding-left: var(--wp--preset--spacing--page-margin-desktop);
		padding-right: var(--wp--preset--spacing--page-margin-desktop);
	}
}
@media (max-width: 781px) {
	/* Overriding the block's own gradient: vertical scrim reads better when the
	   text sits under the bloom rather than beside it. */
	.sd-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(250, 249, 246, 0.5) 0%, rgba(250, 249, 246, 0.92) 62%, rgba(250, 249, 246, 0.97) 100%);
	}
	.wp-block-cover.sd-hero {
		min-height: 100vh;
	}
}
.sd-hero__content {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.sd-hero__content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sd-hero__title em {
	color: var(--wp--preset--color--primary);
	font-style: italic;
	font-weight: 400;
}
.sd-hero__lede {
	color: var(--wp--preset--color--contrast-2);
	max-width: 32rem;
}
.sd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}
.sd-hero__actions > * {
	margin-block-start: 0;
}

/* Product grid + cards */
.sd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 1.5rem;
}
@media (min-width: 600px) {
	.sd-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.sd-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.sd-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sd-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.sd-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.sd-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	margin-bottom: 1.5rem;
}
.sd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}
.sd-card:hover .sd-card__media img {
	transform: scale(1.04);
}
.sd-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--heading);
}
.sd-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.sd-card__price {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
}
.sd-card__desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast-2);
	margin: 0.75rem 0 1.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* margin-top:auto pins the spec table and the button to the bottom of the card,
   so a title that wraps or a missing short description can't shift them. */
.sd-card__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: auto;
	margin-bottom: 1.5rem;
}
.sd-card__spec-label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 0.25rem;
}
/* Columns are narrow, so values like "Formal Decorative" wrap to two lines while
   "Burgundy" stays on one. Reserving two lines keeps every card's spec table the
   same height, which is what keeps the View Details buttons on a shared line. */
.sd-card__spec-value {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	min-height: 2.6em;
	color: var(--wp--preset--color--contrast);
}

/* WooCommerce loop wrapper -> reuse the sd-grid layout */
ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.products li.product {
	list-style: none;
	display: flex;
	flex-direction: column;
}
@media (min-width: 600px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Neutralise WooCommerce's classic float layout (woocommerce-layout.css).
   These rules sat dormant while content-product.php emitted a bare <a>; restoring the
   required <li class="product"> wrapper activated them, and they fight the grid two ways.
   The clearfix pseudo-elements are `display:table`, so on a grid container they become
   grid items and eat the first cell, shunting every card one column to the right. And
   `.columns-3 li.product{width:30.75%}` sizes each item to a third of its own column
   rather than filling it. style.css is enqueued after woocommerce-layout.css, so matching
   specificity is enough to win — no !important needed. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Badge nested inside WooCommerce's block-based product-image container */
.wc-block-components-product-image {
	position: relative;
}
.wc-block-components-product-image .sd-badge {
	top: 1rem;
	left: 1rem;
}
/* woocommerce_thumbnail is generated at a matching 3:4 (see the image size
   settings), so object-fit has nothing left to crop and nothing to upscale. */
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.wp-block-woocommerce-product-collection .wc-block-product-template {
	gap: 3rem 1.5rem;
}
.wp-block-post-title.wp-block-post-title,
h2.wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	text-align: left !important;
}
.wc-block-components-product-price {
	text-align: left !important;
	color: var(--wp--preset--color--contrast-2);
}
.wp-block-woocommerce-product-button {
	text-align: left !important;
}
.wc-block-components-product-button__button {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	transition: background-color var(--sd-transition), color var(--sd-transition);
}
.wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Availability badges */
.sd-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.5rem 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.sd-badge--in-stock {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.sd-badge--low-stock,
.sd-badge--waitlist {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--white);
}
.sd-badge--sold-out {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
}

/* Panels (Care & Growing split) — each panel is a core/cover block, so its
   background image is swappable from the editor. */
.sd-panels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sd-panels > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
@media (min-width: 782px) {
	.sd-panels { grid-template-columns: 1fr 1fr; }
	.sd-panels > .sd-panel:first-child { border-right: 1px solid var(--wp--preset--color--border); }
}
.wp-block-cover.sd-panel {
	min-height: 420px;
	align-items: flex-end;
	background-color: transparent;
	padding: 2.5rem var(--wp--preset--spacing--page-margin-mobile);
}
@media (min-width: 782px) {
	.wp-block-cover.sd-panel { padding: 3rem var(--wp--preset--spacing--page-margin-desktop); min-height: 500px; }
}
/* The image is the hover accent, not the backdrop — it fades in over base-2. */
.sd-panel .wp-block-cover__image-background {
	opacity: 0;
	transition: opacity 700ms ease;
}
.sd-panel:hover .wp-block-cover__image-background {
	opacity: 0.12;
}
.sd-panel .wp-block-cover__inner-container {
	max-width: 26rem;
}
.sd-panel--right {
	text-align: left;
}
@media (min-width: 782px) {
	.sd-panel--right .wp-block-cover__inner-container { margin-left: auto; margin-right: 0; text-align: right; }
	.sd-panel--right .sd-link { justify-content: flex-end; }
	.sd-panel--right .sd-eyebrow { justify-content: flex-end; }
}

/* FAQ accordion (progressive enhancement over <details>) */
.sd-faq {
	border-top: 1px solid var(--wp--preset--color--border);
}
.sd-faq details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 1.5rem 0;
}
.sd-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
}
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
	transition: transform var(--sd-transition);
	flex-shrink: 0;
}
.sd-faq details[open] summary::after {
	transform: rotate(45deg);
}
.sd-faq details:hover summary,
.sd-faq details:hover summary::after {
	color: var(--wp--preset--color--primary);
}
.sd-faq p {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast-2);
	margin: 1rem 0 0;
	max-width: 60ch;
}

/* Footer */
.sd-footer {
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--preset--color--border);
}
.sd-footer__top {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}
.sd-footer__top > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
@media (min-width: 782px) {
	.sd-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.sd-footer__brand img {
	height: 52px;
	width: auto;
	opacity: 0.85;
	margin-bottom: 1rem;
}
.sd-footer__brand p {
	max-width: 22rem;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast-2);
}
.sd-footer__nav-groups {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: 2rem;
}
.sd-footer__nav-groups > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
@media (min-width: 500px) {
	.sd-footer__nav-groups { grid-template-columns: repeat(3, 1fr); }
}
/* Each column is a flow group: zero out block-gap so the headings share a
   baseline regardless of how many links sit under them. */
.sd-footer__col > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sd-footer__nav-groups h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
	line-height: 1.4;
}
.sd-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sd-footer__links li {
	margin: 0 0 0.6rem;
	line-height: 1.5;
}
.sd-footer__links li:last-child {
	margin-bottom: 0;
}
.sd-footer__nav-groups a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}
.sd-footer__nav-groups a:hover {
	color: var(--wp--preset--color--primary);
}
.sd-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	text-align: center;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}
@media (min-width: 782px) {
	.sd-footer__bottom { flex-direction: row; justify-content: space-between; }
}
.sd-footer .wp-block-social-links a {
	color: var(--wp--preset--color--contrast-2);
}
.sd-footer .wp-block-social-links a:hover { color: var(--wp--preset--color--primary); }

/* Single product */
.sd-product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 992px) {
	.sd-product { grid-template-columns: 1.1fr 1fr; gap: 5rem; }
}
.sd-product__gallery img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}
.sd-product__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	padding: 1.5rem 0;
	margin: 1.5rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sd-product__specs dt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: 0.35rem;
}
.sd-product__specs dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}
.sd-product__growing {
	background: var(--wp--preset--color--base-2);
	padding: 1.75rem;
	margin-top: 2rem;
}
.sd-product__growing h2 {
	margin-top: 0;
}

/* Archive filter bar */
.sd-archive-intro {
	padding-top: 3rem;
	padding-bottom: 1.5rem;
}
.sd-archive-end {
	text-align: center;
	padding: 3rem 0;
}

/* Dahlia-type filter — sticky beneath the 80px header */
.sd-filter {
	position: sticky;
	top: 80px;
	z-index: 40;
	background: var(--wp--preset--color--base);
	padding-top: 1.25rem;
	margin-bottom: 2.5rem;
}
.sd-filter__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	padding-bottom: 1rem;
}
.sd-filter__item {
	position: relative;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
	padding-bottom: 4px;
	transition: color var(--sd-transition);
}
.sd-filter__item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--sd-transition);
}
.sd-filter__item:hover {
	color: var(--wp--preset--color--contrast);
}
.sd-filter__item.is-active {
	color: var(--wp--preset--color--contrast);
}
.sd-filter__item.is-active::after,
.sd-filter__item:hover::after {
	transform: scaleX(1);
}

/* Staggered editorial catalog grid.
   Offsets only apply once the grid is genuinely three-up, so the
   single- and two-column layouts stay flush. */
.sd-catalog .wc-block-product-template {
	row-gap: 4rem;
	column-gap: var(--wp--preset--spacing--gutter);
}
@media (min-width: 992px) {
	.sd-catalog .wc-block-product-template {
		row-gap: 6.25rem;
	}
	/* WooCommerce sizes the tracks as
	   repeat(auto-fill, minmax(max(150px, calc(33.33333% - .83333em)), 1fr)), and that
	   minimum only sums to 100% at its own default 1.25em (20px) gap. The column-gap
	   above is var(--...--gutter) = 24px, so three tracks plus two gaps need width + 8px
	   and auto-fill silently drops to two columns — which also threw the nth-child
	   offsets below onto the wrong cards. Pin the count explicitly instead; auto-fill
	   still governs the narrower breakpoints. */
	.sd-catalog .wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.sd-catalog .wc-block-product-template > li:nth-child(3n + 2) {
		margin-top: 3rem;
	}
	.sd-catalog .wc-block-product-template > li:nth-child(3n + 3) {
		margin-top: 6rem;
	}
}

/* Pagination */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--section-gap-sm);
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--border);
	gap: 1.5rem;
}
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
	transition: color var(--sd-transition);
}
.wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--primary);
	padding-bottom: 2px;
}

/* Contact page */
.sd-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 900px) {
	.sd-contact { grid-template-columns: 1.2fr 1fr; }
}
.sd-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.sd-form-field label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.sd-form-field input,
.sd-form-field textarea {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: transparent;
	padding: 0.6rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast);
}
.sd-form-field input:focus,
.sd-form-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}
.sd-contact-direct {
	background: var(--wp--preset--color--base-2);
	padding: 2rem;
}
.sd-contact-direct .wp-block-social-links {
	margin-top: 1.5rem;
}

/* Resources page */
.sd-resource-card {
	border: 1px solid var(--wp--preset--color--border);
	padding: 1.75rem;
	background: var(--wp--preset--color--white);
}
.sd-resource-card h3 {
	margin-top: 0;
}

/* Sneak peek gallery — a core/gallery block, so core owns the column layout;
   we only set the crop and caption treatment. */
.sd-gallery.wp-block-gallery {
	gap: 1.5rem;
}
.sd-gallery img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}
.sd-gallery figcaption {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	text-align: left;
	margin-top: 0.75rem;
	background: none;
	position: static;
	padding: 0;
}

@media (max-width: 599px) {
	.sd-hero__actions { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------
   core/button styles (registered in functions.php) so the site's button
   look is pickable in the editor instead of hand-written <a class="sd-btn">.
   ------------------------------------------------------------------ */
.wp-block-button.is-style-sd-primary .wp-block-button__link,
.wp-block-button.is-style-sd-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem 2rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	line-height: 1;
	transition: background-color var(--sd-transition), color var(--sd-transition), border-color var(--sd-transition);
}
.wp-block-button.is-style-sd-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-sd-primary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-sd-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-sd-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------
   Home page sections (native blocks — see templates/front-page.html)
   ------------------------------------------------------------------ */
.sd-teaser {
	text-align: center;
	gap: 1.5rem;
}
.sd-teaser > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sd-teaser h2,
.sd-teaser p:not(.sd-eyebrow) {
	max-width: 36rem;
}

.sd-story {
	gap: 3rem;
}
.sd-story .wp-block-image,
.sd-story .wp-block-image img {
	margin: 0;
	display: block;
	width: 100%;
}

.sd-faq-section .sd-eyebrow {
	margin-bottom: 1.5rem;
}
/* .sd-eyebrow is inline-flex, so centering it needs the parent's text-align. */
.sd-faq-section p.has-text-align-center.sd-eyebrow {
	display: flex;
	justify-content: center;
}
.sd-faq > * {
	margin-block-start: 0;
}
.sd-faq-section .wp-block-buttons {
	margin-top: 2rem;
}

/* ------------------------------------------------------------------
   Shop archive intro / outro
   ------------------------------------------------------------------ */
.sd-archive-intro > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sd-archive-intro__title {
	margin-top: 0.75rem;
	max-width: 40rem;
}
.sd-archive-intro__title em {
	color: var(--wp--preset--color--primary);
	font-style: italic;
}
.sd-archive-intro__lede {
	margin-top: 1rem;
	max-width: 34rem;
	color: var(--wp--preset--color--contrast-2);
}
.sd-archive-end .sd-divider {
	max-width: 20rem;
	margin: 0 auto 2rem;
}
.sd-archive-end p.has-text-align-center.sd-eyebrow {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}
.sd-archive-end__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: var(--wp--preset--color--primary);
	max-width: 28rem;
	margin: 0 auto;
}

/* 404 */
.sd-404 p.has-text-align-center.sd-eyebrow {
	display: flex;
	justify-content: center;
}

/* ------------------------------------------------------------------
   Shared page intro (eyebrow + H1 + lede) used by About, Care, Growing,
   Resources, Contact, Sneak Peek and FAQ.
   ------------------------------------------------------------------ */
.sd-page-intro {
	padding-bottom: 0;
}
.sd-page-intro > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.sd-page-intro__title {
	margin-top: 0.75rem;
	max-width: 36rem;
}
.sd-page-intro__title em {
	font-style: italic;
	color: var(--wp--preset--color--primary);
}
.sd-page-intro__lede {
	margin-top: 1rem;
	max-width: 34rem;
	color: var(--wp--preset--color--contrast-2);
}
.sd-page-intro--center .sd-page-intro__lede {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}

/* Long-form text pages (privacy policy) */
.sd-prose > * {
	margin-block-start: 0;
}
.sd-prose h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}
.sd-prose p {
	max-width: 42rem;
}

/* About — philosophy card */
.sd-philosophy {
	background: var(--wp--preset--color--base-2);
	padding: 2.5rem;
	max-width: 40rem;
}
.sd-philosophy > * {
	margin-block-start: 0;
}
.sd-philosophy__title {
	font-style: italic;
	color: var(--wp--preset--color--primary);
	margin-top: 0;
	margin-bottom: 1.5rem;
}
.sd-philosophy__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sd-philosophy__list li {
	display: flex;
	gap: 1rem;
}
.sd-philosophy__list li + li {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1.25rem;
	margin-top: 1.25rem;
}
.sd-philosophy__list .sd-eyebrow {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

/* Centred call-to-action card (FAQ page) */
.sd-cta-card {
	background: var(--wp--preset--color--base-2);
	padding: var(--wp--preset--spacing--section-gap-sm);
	text-align: center;
}
.sd-cta-card > * {
	margin-block-start: 0;
}
.sd-cta-card h2 {
	margin-top: 0;
	margin-bottom: 1rem;
}
.sd-cta-card__lede {
	max-width: 26rem;
	margin: 0 auto 1.5rem;
}

/* Contact — direct contact card */
.sd-contact-direct > * {
	margin-block-start: 0;
}
.sd-contact-direct__title {
	margin-top: 0;
	margin-bottom: 1rem;
}