/* =========================================================
   Dhaka Dough — Design System
   Palette: deep forest green anchor, terracotta + honey-gold
   accents, warm cream background. Serif (Fraunces) headlines,
   Inter body/UI. Mobile-first throughout.
   ========================================================= */

:root {
	--dd-forest: #2f4b3c;
	--dd-forest-dark: #1c2e25;
	--dd-terracotta: #c1683c;
	--dd-terracotta-dark: #a2532e;
	--dd-gold: #b8863a;
	/* All buttons across the site (Add to Cart, primary CTAs, filter/review
	   submit buttons, pagination) share this one red rather than the mix of
	   forest-green and terracotta they used before. -dark is a ~20% darker
	   shade for hover states, matching how the other color pairs above are
	   built. */
	--dd-button: #a31e22;
	--dd-button-dark: #82181b;
	--dd-cream: #faf5ec;
	--dd-cream-deep: #f1e7d4;
	--dd-ink: #24261f;
	--dd-ink-soft: #55584c;
	--dd-line: #e4d9c3;
	--dd-white: #fffdf9;

	--dd-font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
	--dd-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--dd-radius: 14px;
	--dd-radius-sm: 8px;
	--dd-container: 1180px;
	--dd-shadow: 0 10px 40px -12px rgba(28, 46, 37, 0.18);
	--dd-shadow-sm: 0 4px 16px -6px rgba(28, 46, 37, 0.14);
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--dd-cream);
	color: var(--dd-ink);
	font-family: var(--dd-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4 {
	font-family: var(--dd-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--dd-forest-dark);
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

button {
	font-family: inherit;
}

.dd-container {
	max-width: var(--dd-container);
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 782px) {
	.dd-container {
		padding: 0 40px;
	}
}

.dd-eyebrow {
	display: inline-block;
	font-family: var(--dd-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-terracotta-dark);
	margin-bottom: 0.9em;
}

.dd-section {
	padding: 56px 0;
}

@media (min-width: 782px) {
	.dd-section {
		padding: 96px 0;
	}
}

.dd-section--tight {
	padding: 40px 0;
}

.dd-section--forest {
	/* Class name is legacy (originally the forest-green homepage
	   sections) — this specific section (the homepage Announcement
	   block, its only remaining user) now matches the footer's brand
	   red instead, per request. */
	background: var(--dd-button);
	color: var(--dd-cream);
}
.dd-section--forest h2,
.dd-section--forest h3 {
	color: var(--dd-white);
}

.dd-section--deep {
	background: var(--dd-cream-deep);
}

.dd-center {
	text-align: center;
}

.dd-lede {
	font-size: 18px;
	color: var(--dd-ink-soft);
	max-width: 640px;
}
.dd-center .dd-lede {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Buttons ---------- */
.dd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--dd-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	min-height: 48px;
}
.dd-btn:active {
	transform: translateY(1px);
}
.dd-btn--primary {
	background: var(--dd-button);
	color: var(--dd-white);
	box-shadow: var(--dd-shadow-sm);
}
.dd-btn--primary:hover {
	background: var(--dd-button-dark);
}
.dd-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.dd-btn--outline:hover {
	background: rgba(0, 0, 0, 0.05);
}
.dd-section--forest .dd-btn--outline:hover {
	background: rgba(255, 255, 255, 0.1);
}
.dd-btn--light {
	background: var(--dd-white);
	color: var(--dd-forest-dark);
}
.dd-btn--light:hover {
	background: var(--dd-cream);
}
.dd-btn--block {
	width: 100%;
}

/* =========================================================
   Header
   ========================================================= */
.dd-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 245, 236, 0.92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--dd-line);
}

.dd-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	gap: 16px;
}

.dd-logo {
	font-family: var(--dd-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--dd-forest-dark);
	white-space: nowrap;
}
.dd-logo span {
	color: var(--dd-terracotta);
}
/* Header-only: small nudge right so the logo's left edge visually lines up
   with the "S" in the "Shop" heading below it — the logo box itself is
   already flush with the page container, but the logo artwork's own edge
   reads slightly left of the heading. Scoped to the header specifically
   so it doesn't also shift the footer's copy of the same logo, which
   needs to stay flush left with the paragraph under it instead. */
.dd-header__bar .dd-logo {
	margin-left: 42px;
}
/* Uploaded header logo (Customize > Site Identity): the_custom_logo()
   prints its own link + img, so size the img directly rather than relying
   on the text-logo font-size above. Fixed 60x60 — matches the
   add_theme_support('custom-logo') crop size in functions.php.
   object-fit:contain is a safety net for SVG logo uploads, which
   WordPress doesn't run through its cropper (they pass through at their
   native, possibly non-square, dimensions). */
.dd-logo--custom .custom-logo-link {
	display: flex;
	align-items: center;
}
.dd-logo--custom .custom-logo {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

/* Footer logo: a separate upload (Customize > Footer Logo), not the same
   image as the header. Plain <img>, not the_custom_logo() markup, so it's
   sized directly here — 80x80 as specified, with object-fit:contain as a
   safety net in case the uploaded file isn't perfectly square. */
.dd-footer-logo {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
	margin-bottom: 4px;
}

.dd-nav {
	display: none;
}
/* wp_nav_menu() (used once a real menu is assigned to Appearance > Menus >
   Primary Menu) prints each item as a bare <li> — without this reset, an
   <li> shows a default bullet marker even with no <ul> wrapper around it. */
.dd-nav li {
	list-style: none;
	margin: 0;
}

@media (min-width: 960px) {
	.dd-nav {
		display: flex;
		gap: 6px;
		align-items: center;
		/* Groups the nav with the account/cart icons on the right instead
		   of floating in the middle of the header: this auto margin
		   consumes the header bar's flex free-space, pushing the nav (and
		   the actions group right after it) flush right while the logo
		   stays put on the left. */
		margin-left: auto;
	}
	.dd-nav a {
		display: inline-flex;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
		color: var(--dd-ink);
		padding: 10px 16px;
		border-radius: 999px;
		transition: background-color 0.15s ease;
	}
	/* Same hover treatment as the account/cart icon buttons (.dd-icon-btn
	   below) for a consistent header feel. */
	.dd-nav a:hover {
		background: var(--dd-cream-deep);
	}
}

.dd-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dd-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--dd-forest-dark);
}
.dd-icon-btn:hover {
	background: var(--dd-cream-deep);
}
.dd-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--dd-terracotta);
	color: var(--dd-white);
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.dd-menu-toggle {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--dd-line);
	background: var(--dd-white);
}
@media (min-width: 960px) {
	.dd-menu-toggle {
		display: none;
	}
}
.dd-menu-toggle span,
.dd-menu-toggle span::before,
.dd-menu-toggle span::after {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background: var(--dd-forest-dark);
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.dd-menu-toggle span::before {
	position: absolute;
	top: -6px;
}
.dd-menu-toggle span::after {
	position: absolute;
	top: 6px;
}
.dd-header.is-open .dd-menu-toggle span {
	background: transparent;
}
.dd-header.is-open .dd-menu-toggle span::before {
	top: 0;
	transform: rotate(45deg);
	background: var(--dd-forest-dark);
}
.dd-header.is-open .dd-menu-toggle span::after {
	top: 0;
	transform: rotate(-45deg);
	background: var(--dd-forest-dark);
}

.dd-mobile-nav {
	display: none;
	border-top: 1px solid var(--dd-line);
	padding: 8px 0 20px;
}
.dd-header.is-open .dd-mobile-nav {
	display: block;
}
.dd-mobile-nav li {
	list-style: none;
	margin: 0;
}
.dd-mobile-nav a {
	display: block;
	padding: 14px 4px;
	font-size: 17px;
	font-weight: 500;
	border-bottom: 1px solid var(--dd-line);
}
@media (min-width: 960px) {
	.dd-mobile-nav {
		display: none !important;
	}
}

/* =========================================================
   Hero
   ========================================================= */
.dd-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 15% 20%, rgba(184, 134, 58, 0.35), transparent 55%),
		radial-gradient(circle at 85% 0%, rgba(193, 104, 60, 0.28), transparent 50%), var(--dd-forest);
	color: var(--dd-white);
}
.dd-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.dd-hero--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.dd-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}
.dd-hero--overlay-none::before {
	background: transparent;
}
.dd-hero--overlay-light::before {
	background: linear-gradient(180deg, rgba(15, 26, 20, 0.32), rgba(15, 26, 20, 0.48));
}
.dd-hero--overlay-medium::before {
	background: linear-gradient(180deg, rgba(15, 26, 20, 0.55), rgba(15, 26, 20, 0.7));
}
.dd-hero--overlay-dark::before {
	background: linear-gradient(180deg, rgba(15, 26, 20, 0.72), rgba(15, 26, 20, 0.85));
}
.dd-hero__inner {
	position: relative;
	z-index: 1;
	padding: 72px 0 64px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (min-width: 782px) {
	.dd-hero__inner {
		padding: 120px 0 100px;
	}
}
.dd-hero__tag {
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--dd-cream);
	opacity: 0.85;
	margin-bottom: 22px;
}
.dd-hero h1 {
	color: var(--dd-white);
	font-size: clamp(34px, 8vw, 68px);
	/* min(16ch, 92vw) instead of a plain 16ch: on some mobile widths a single
	   long word (e.g. "Bangladesh") rendered in this serif display font is
	   wider than 16ch, and with no word-break allowed it overflowed straight
	   past the box's right edge instead of wrapping — capping to whichever
	   is smaller keeps the box itself from ever exceeding the viewport. */
	max-width: min(16ch, 92vw);
	overflow-wrap: break-word;
	word-break: break-word;
	margin-bottom: 0.35em;
}
.dd-hero em {
	/* No color set here on purpose — the gold accent now lives as normal,
	   editable inline formatting on the phrase itself (baked into the
	   default hero content, see dd_ensure_homepage_hero_page() in
	   functions.php), so picking a different color in the block editor's
	   Text color tool actually takes effect instead of being silently
	   overridden by this stylesheet. */
	font-style: italic;
}
.dd-hero p.dd-lede {
	color: rgba(255, 253, 249, 0.82);
	font-size: clamp(16px, 2.4vw, 19px);
	margin-bottom: 34px;
}
.dd-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* Hero buttons are a WordPress core "Buttons" block (see functions.php,
   dd_homepage_hero_content()) so buttons can be freely added, removed, or
   reordered from the block editor. These rules style the block's own
   markup to match the site's pill-button look. In the editor, use the
   block's "Outline" style (Styles panel) for an outline button like
   "Our story". */
.dd-hero__ctas .wp-block-button {
	margin: 0 !important;
}
.dd-hero__inner .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--dd-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	min-height: 48px;
	background: var(--dd-button);
	color: var(--dd-white);
	box-shadow: var(--dd-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.dd-hero__inner .wp-block-button__link:hover {
	background: var(--dd-button-dark);
	color: var(--dd-white);
}
.dd-hero__inner .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.dd-hero__inner .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Hero stats are a WordPress core "Columns" block (className
   "dd-hero__stats") with a Paragraph ("dd-stat-num") + Paragraph
   ("dd-stat-label") inside each column — add, remove, or reorder columns
   freely from the block editor and this grid adapts automatically. */
.dd-hero__inner .wp-block-columns.dd-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
	margin-top: 56px;
	margin-bottom: 0;
	max-width: 620px;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 28px;
}
.dd-hero__inner .wp-block-columns.dd-hero__stats .wp-block-column {
	margin: 0 !important;
	flex-basis: auto;
}
.dd-hero__inner .dd-stat-num {
	display: block;
	font-family: var(--dd-font-display);
	font-size: clamp(20px, 3vw, 28px);
	color: var(--dd-white);
	margin: 0;
}
.dd-hero__inner .dd-stat-label {
	font-size: 12px;
	color: rgba(255, 253, 249, 0.75);
	letter-spacing: 0.03em;
	margin: 0;
}

/* ---------- Trust strip ---------- */
.dd-trust {
	background: var(--dd-white);
	border-bottom: 1px solid var(--dd-line);
}
.dd-trust__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	padding: 34px 0;
}
@media (min-width: 700px) {
	.dd-trust__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.dd-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 0 6px;
}
.dd-trust__icon {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--dd-cream-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dd-terracotta);
}
.dd-trust__item span {
	font-size: 13px;
	font-weight: 600;
	color: var(--dd-ink);
	line-height: 1.35;
}

/* ---------- Collections ---------- */
.dd-collections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 44px;
}
@media (min-width: 700px) {
	.dd-collections {
		grid-template-columns: repeat(3, 1fr);
	}
}
.dd-collection-card {
	position: relative;
	border-radius: var(--dd-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px;
	color: var(--dd-white);
	box-shadow: var(--dd-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dd-collection-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dd-shadow);
}
.dd-collection-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 46, 37, 0.05) 0%, rgba(28, 46, 37, 0.75) 100%);
	z-index: 0;
}
.dd-collection-card__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Only takes effect when a category has a real photo set (see
	   front-page.php — inline background-image style, sourced from the
	   category's native WooCommerce "Thumbnail" field). Harmless when
	   there's no image; the gradient class's flat background shows
	   through untouched. The card's existing ::before dark gradient
	   scrim still sits on top either way, keeping the white text
	   readable over a photo the same way it already does over the
	   gradient tiles. */
	background-size: cover;
	background-position: center;
}
.dd-collection-card__label {
	position: relative;
	z-index: 1;
}
.dd-collection-card__label .count {
	display: block;
	font-size: 12px;
	opacity: 0.85;
	margin-bottom: 6px;
	letter-spacing: 0.04em;
}
.dd-collection-card__label h3 {
	color: var(--dd-white);
	margin-bottom: 4px;
}
.dd-collection-card__label .go {
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dd-bg-oil { background: linear-gradient(135deg, #b8863a, #6f4a1e); }
.dd-bg-honey { background: linear-gradient(135deg, #d79e3f, #8a5a1e); }
.dd-bg-spice { background: linear-gradient(135deg, #c1683c, #6f3420); }
.dd-bg-essentials { background: linear-gradient(135deg, #4c6b56, #23342a); }
.dd-bg-kitchen { background: linear-gradient(135deg, #7a5c6e, #352838); }
.dd-bg-others { background: linear-gradient(135deg, #6f8a72, #33453a); }

/* ---------- Story split section ---------- */
.dd-story {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
}
@media (min-width: 900px) {
	.dd-story {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}
	.dd-story--reverse {
		direction: rtl;
	}
	.dd-story--reverse > * {
		direction: ltr;
	}
}
.dd-story__art {
	border-radius: var(--dd-radius);
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	color: var(--dd-white);
	padding: 30px;
	text-align: center;
}
.dd-story__art .dd-story__art-caption {
	position: relative;
	font-family: var(--dd-font-display);
	font-size: 15px;
	font-style: italic;
	opacity: 0.9;
}
.dd-story__art--photo {
	aspect-ratio: 1 / 1;
	min-height: 0;
	background-size: cover;
	background-position: center;
	padding: 0;
}
.dd-story h2 {
	font-size: clamp(26px, 4vw, 38px);
}
.dd-story ul {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dd-story ul li {
	display: flex;
	gap: 10px;
	font-size: 15px;
	color: var(--dd-ink-soft);
}
.dd-story ul li strong {
	color: var(--dd-ink);
}

/* Story section CTAs are a WordPress core "Buttons" block (see
   functions.php, dd_story_honey_content()/dd_story_oil_content()) so the
   button can be freely edited/relinked from the block editor. Same
   pattern as the hero buttons (.dd-hero__inner .wp-block-button__link) —
   styles the block's own markup to match the site's pill-button look.
   Both story sections have a light (cream) background, so this only
   needs the light-background hover treatment, unlike the hero. */
.dd-story__ctas {
	margin-top: 24px !important;
}
.dd-story .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--dd-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	min-height: 48px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.dd-story .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.dd-story .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* ---------- Cyclist callout ---------- */
.dd-callout {
	border: 1px dashed var(--dd-terracotta);
	border-radius: var(--dd-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	background: var(--dd-white);
}
@media (min-width: 700px) {
	.dd-callout {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40px 48px;
	}
}
.dd-callout__icon {
	font-size: 34px;
}
.dd-callout h3 {
	margin-bottom: 6px;
}
.dd-callout p {
	margin: 0;
	color: var(--dd-ink-soft);
	max-width: 46ch;
}

/* ---------- Newsletter ---------- */
.dd-announce {
	text-align: center;
}
.dd-announce__image {
	display: block;
	width: 100%;
	max-width: 720px;
	border-radius: var(--dd-radius);
	margin: 0 auto 28px;
}
.dd-announce__text {
	max-width: 700px;
	margin: 0 auto;
	color: rgba(255, 253, 249, 0.92);
	line-height: 1.5;
}
.dd-announce__text a {
	color: var(--dd-white);
}
.dd-announce__text p {
	margin: 0 0 14px;
}
.dd-announce__text p:last-child {
	margin-bottom: 0;
}
/* User-selectable text size (Appearance > Customize > Homepage Announcement). */
.dd-announce__text--small {
	font-size: 16px;
}
.dd-announce__text--medium {
	font-size: 19px;
}
.dd-announce__text--large {
	font-family: var(--dd-font-display);
	font-size: clamp(24px, 3vw, 32px);
}
.dd-announce__text--xlarge {
	font-family: var(--dd-font-display);
	font-size: clamp(30px, 4.5vw, 44px);
	line-height: 1.25;
}
.dd-announce__text--xxlarge {
	font-family: var(--dd-font-display);
	font-size: clamp(36px, 6vw, 60px);
	line-height: 1.15;
}

/* =========================================================
   Footer
   ========================================================= */
.dd-footer {
	background: var(--dd-button);
	color: rgba(255, 253, 249, 0.82);
	padding: 60px 0 28px;
}
.dd-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}
@media (min-width: 782px) {
	.dd-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 24px;
	}
}
.dd-footer__brand .dd-logo {
	color: var(--dd-white);
}
.dd-footer__brand p {
	margin-top: 14px;
	font-size: 14px;
	color: rgba(255, 253, 249, 0.68);
	max-width: 32ch;
}
.dd-footer h4 {
	color: var(--dd-white);
	font-family: var(--dd-font-body);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.dd-footer ul li {
	margin-bottom: 10px;
	font-size: 14px;
}
.dd-footer ul li a:hover {
	color: var(--dd-white);
}
.dd-footer__social {
	display: flex;
	gap: 12px;
	margin-top: 18px;
}
.dd-footer__social a {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dd-footer__bottom {
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	color: rgba(255, 253, 249, 0.55);
}
@media (min-width: 782px) {
	.dd-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* =========================================================
   WooCommerce base overrides (foundation — extended per page)
   ========================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
}
/* WooCommerce core applies an old-school clearfix (content:" "; display:table)
   to ::before/::after on the product loop, left over from its float layout.
   Inside a grid container these generated boxes become real (invisible)
   grid items and silently eat a cell, pushing the whole grid out of order.
   Neutralize them so only actual <li class="product"> items are grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 700px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}
@media (min-width: 1080px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	list-style: none;
	/* Neutralize WooCommerce core's float-grid width/float so our CSS Grid
	   controls sizing — otherwise each card shrinks to its own explicit
	   percentage width and left-aligns inside the (wider) grid cell. */
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: var(--dd-white);
	border-radius: var(--dd-radius);
	/* Image bleeds to the card edges (see img rule below); clip it to the
	   card's own rounded corners instead of rounding the image itself. */
	overflow: hidden;
	padding: 0 0 20px;
	box-shadow: var(--dd-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--dd-shadow);
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .dd-product-thumb-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0;
	margin: 0 0 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--dd-font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--dd-forest-dark);
	margin: 0 14px 6px;
	line-height: 1.3;
}
.woocommerce ul.products li.product .price {
	font-family: var(--dd-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--dd-terracotta-dark);
	margin: 0 14px 12px;
	display: block;
}
.woocommerce ul.products li.product .price del {
	color: var(--dd-ink-soft);
	opacity: 0.6;
	font-weight: 400;
	margin-right: 6px;
}
.woocommerce ul.products li.product .button {
	margin: auto 14px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dd-button);
	color: var(--dd-white) !important;
	border-radius: 999px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.15s ease;
}
.woocommerce ul.products li.product .button:hover {
	background: var(--dd-button-dark);
}
/* "View cart" link WooCommerce injects next to "Add to cart" after a
   successful AJAX add — previously totally unstyled (plain default link
   text + a bare unstyled <a>, since WooCommerce doesn't style this itself
   and the theme never had a rule for it). Styled as the same pill shape
   as "Add to cart", one shade darker so the two are clearly related but
   distinguishable at a glance. */
.woocommerce ul.products li.product .added_to_cart.wc-forward {
	margin: 8px 14px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dd-button-dark);
	color: var(--dd-white) !important;
	border-radius: 999px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.woocommerce ul.products li.product .added_to_cart.wc-forward:hover {
	background: var(--dd-button);
}
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--dd-terracotta);
	color: var(--dd-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	min-height: 0;
}
.woocommerce ul.products li.product {
	position: relative;
}

.dd-page-hero {
	background: var(--dd-cream-deep);
	padding: 48px 0 36px;
	border-bottom: 1px solid var(--dd-line);
}
.dd-page-hero h1 {
	font-size: clamp(30px, 5vw, 46px);
	margin-bottom: 8px;
}
.dd-breadcrumb {
	font-size: 13px;
	color: var(--dd-ink-soft);
	margin-bottom: 14px;
}
.dd-breadcrumb a:hover {
	color: var(--dd-terracotta-dark);
}

main {
	display: block;
}

/* ---------- Scroll reveal ----------
   Content is visible by default (no-JS / crawlers / JS failures always see
   everything). Only when JS has confirmed it can run the animation do we
   add `.js-reveal-ready`, which switches elements to their hidden starting
   state just before IntersectionObserver takes over. This avoids ever
   shipping content that depends on JS to become visible. */
.js-reveal-ready [data-dd-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-dd-reveal].is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js-reveal-ready [data-dd-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Product thumbnail placeholder (until real photography) ---------- */
.dd-product-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--dd-font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.dd-product-thumb-placeholder span {
	font-size: clamp(22px, 3.4vw, 30px);
}

/* =========================================================
   Merchandising badges
   ========================================================= */
.dd-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--dd-white);
}
.dd-badge.is-bestseller { background: var(--dd-terracotta); }
.dd-badge.is-new { background: var(--dd-forest); }
.dd-badge.is-gift { background: var(--dd-gold); }

/* =========================================================
   Shop archive: filters + toolbar
   ========================================================= */
.dd-shop__head.dd-page-hero {
	margin-bottom: 36px;
}
.dd-shop__mobile-bar {
	display: none;
	margin-bottom: 18px;
}
.dd-filter-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--dd-line);
	background: var(--dd-white);
	border-radius: var(--dd-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dd-ink);
	width: 100%;
	justify-content: center;
}
.dd-filter-toggle .dot {
	display: none;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--dd-terracotta);
}
.dd-filter-toggle.has-filters .dot {
	display: inline-block;
}
@media (max-width: 900px) {
	.dd-shop__mobile-bar {
		display: block;
	}
}

.dd-shop__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
	padding-bottom: 90px;
}
@media (max-width: 900px) {
	.dd-shop__layout {
		grid-template-columns: 1fr;
	}
}

.dd-filter-panel {
	background: var(--dd-white);
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
	padding: 22px;
}
.dd-filter-panel__head {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.dd-filter-close {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--dd-ink-soft);
}
.dd-filter-group {
	margin-bottom: 26px;
}
.dd-filter-group:last-of-type {
	margin-bottom: 20px;
}
.dd-filter-group h4 {
	font-family: var(--dd-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dd-ink-soft);
	margin: 0 0 12px;
	font-weight: 600;
}
.dd-filter-cats li {
	margin-bottom: 2px;
}
.dd-filter-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/* Negative margin cancels the padding below so the link TEXT lines up
	   flush with the "Category" heading and every other control in this
	   panel (price inputs, in-stock toggle, buttons) — the padding is kept
	   purely to give the hover/active background a bit of room to either
	   side, not to indent the text itself. */
	margin: 0 -6px;
	padding: 8px 6px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--dd-ink);
}
.dd-filter-cats a:hover {
	background: var(--dd-cream-deep);
}
.dd-filter-cats a.is-active {
	color: var(--dd-terracotta-dark);
	font-weight: 600;
}
.dd-filter-cats .count {
	color: var(--dd-ink-soft);
	font-size: 12px;
}
.dd-filter-price {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dd-filter-price input {
	width: 100%;
	border: 1px solid var(--dd-line);
	border-radius: 8px;
	padding: 9px 10px;
	font-size: 13px;
	font-family: var(--dd-font-body);
	background: var(--dd-cream);
}
.dd-filter-price span {
	color: var(--dd-ink-soft);
	font-size: 13px;
}
.dd-filter-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	cursor: pointer;
}
.dd-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	flex: none;
}
.dd-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.dd-switch__slider {
	position: absolute;
	inset: 0;
	background: #d8d2c2;
	border-radius: 999px;
	transition: 0.2s;
}
.dd-switch__slider::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	left: 2px;
	top: 2px;
	background: var(--dd-white);
	border-radius: 999px;
	transition: 0.2s;
}
.dd-switch input:checked + .dd-switch__slider {
	background: var(--dd-forest);
}
.dd-switch input:checked + .dd-switch__slider::before {
	transform: translateX(16px);
}
.dd-filter-clear {
	display: block;
	text-align: center;
	margin-top: 10px;
	padding: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dd-button);
	border: 1px solid var(--dd-button);
	border-radius: 8px;
}
.dd-filter-clear:hover {
	background: var(--dd-button);
	color: var(--dd-white);
}

@media (max-width: 900px) {
	.dd-shop__filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 91;
		max-height: 82vh;
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform 0.28s ease;
	}
	.dd-shop__filters.is-open {
		transform: translateY(0);
	}
	.dd-filter-panel {
		border-radius: 20px 20px 0 0;
		border: none;
		padding-bottom: 28px;
	}
	.dd-filter-panel__head {
		display: flex;
	}
}
.dd-filter-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(28, 46, 37, 0.5);
	z-index: 90;
}
.dd-filter-drawer-overlay.is-open {
	display: block;
}

.dd-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.dd-shop__count {
	font-size: 14px;
	color: var(--dd-ink-soft);
}
.dd-shop__toolbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
/* WooCommerce core ships .woocommerce-ordering with its own default
   margin (meant for its normal block-layout position), which survives
   unless reset here — inside this flex row that margin pushes the
   dropdown's box up/down relative to the search box next to it, even
   though both boxes are otherwise the same height. Zeroing both wrapper
   margins keeps every child's box edges flush within the row. */
.dd-shop__toolbar-right .woocommerce-ordering,
.dd-shop__search {
	margin: 0;
	position: relative;
}
.dd-shop__search svg {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.5;
	pointer-events: none;
}
.dd-shop__search input {
	border: 1px solid var(--dd-line);
	border-radius: 9px;
	padding: 10px 14px 10px 34px;
	font-size: 14px;
	font-family: var(--dd-font-body);
	width: 200px;
	background: var(--dd-white);
	/* Matches the sorting dropdown's min-height below so both controls in
	   this row render at the same height instead of the search box being
	   a couple pixels shorter. */
	min-height: 44px;
}
.dd-shop__toolbar-right .woocommerce-ordering select {
	border: 1px solid var(--dd-line);
	border-radius: 9px;
	padding: 10px 32px 10px 14px;
	font-size: 14px;
	font-family: var(--dd-font-body);
	background: var(--dd-white);
	color: var(--dd-ink);
	min-height: 44px;
}

.dd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.dd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--dd-cream-deep);
	border: 1px solid var(--dd-line);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12.5px;
	color: var(--dd-forest-dark);
	font-weight: 500;
}
.dd-chip a {
	color: var(--dd-forest-dark);
	font-size: 14px;
	line-height: 1;
}

.woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	justify-content: center;
	/* !important needed here: WooCommerce's own plugin stylesheet sets a
	   margin on this same element at equal CSS specificity, and (depending
	   on plugin/theme load order) can win the cascade tie-break over a
	   plain declaration in this theme's stylesheet. */
	margin-top: 72px !important;
	flex-wrap: wrap;
}
/* border/box-shadow forced off with !important — WooCommerce's own plugin
   stylesheet puts a border/outline ring on this exact element (same
   conflict as the margin above), which is what was showing as a stray
   reddish ring around the current page and gray boxes around the rest. */
.woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border-radius: 999px;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--dd-ink);
}
.woocommerce-pagination .page-numbers.current {
	background: var(--dd-button) !important;
	color: var(--dd-white) !important;
}
.woocommerce-pagination .page-numbers:hover:not(.current) {
	background: var(--dd-cream-deep);
}

/* =========================================================
   Single product
   ========================================================= */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	padding: 40px 0 20px;
	max-width: var(--dd-container);
	margin: 0 auto;
	position: relative;
}
/* Grid items default to min-width:auto, which sizes them to their content's
   intrinsic minimum width. The tabs row (ul.tabs, overflow-x:auto) has enough
   tab labels that its intrinsic width can exceed the viewport on mobile —
   without min-width:0 here, the grid track stretches to fit it instead of
   letting the tabs scroll internally, blowing out the whole page horizontally. */
.woocommerce div.product > * {
	min-width: 0;
}
@media (max-width: 940px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px 20px 20px;
	}
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .dd-gallery {
	position: sticky;
	top: 90px;
	width: 100% !important;
	max-width: none !important;
}
@media (max-width: 940px) {
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .dd-gallery {
		position: static;
	}
}
/* The real product photo has no fixed size to design around — some are
   small phone photos, some will be proper studio shots later — so force
   it to always fill the gallery column at a consistent square crop
   instead of rendering at whatever pixel size WordPress generated.
   !important because WooCommerce's zoom + slider scripts (both enabled
   via add_theme_support in functions.php) write their own inline
   width/height styles onto these elements after the page loads — a plain
   CSS rule here loses to that inline style, which is why the first pass
   at this fix had no visible effect. */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 18px;
}

.dd-gallery__main {
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dd-white);
	font-family: var(--dd-font-display);
	font-weight: 700;
	font-size: 52px;
	margin-bottom: 12px;
}
.dd-gallery__initial {
	position: relative;
}
.dd-gallery__tag {
	position: absolute;
	bottom: 16px;
	left: 16px;
	font-family: var(--dd-font-body);
	font-size: 12px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.28);
	padding: 6px 12px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.dd-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.dd-gallery__thumb {
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	border: 2px solid transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dd-white);
	font-family: var(--dd-font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	padding: 4px;
}
.dd-gallery__thumb.is-active {
	border-color: var(--dd-forest);
	box-shadow: 0 0 0 2px var(--dd-white), 0 0 0 3px var(--dd-forest);
}

.woocommerce div.product .summary {
	max-width: none;
}
.woocommerce div.product .product_title {
	font-size: 32px;
	margin-bottom: 10px;
}
.woocommerce div.product p.price {
	font-family: var(--dd-font-body);
	font-size: 26px;
	font-weight: 700;
	color: var(--dd-forest-dark);
	margin-bottom: 6px;
}
.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: 16px;
	font-size: 13.5px;
}
.woocommerce div.product .star-rating {
	color: var(--dd-gold);
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 6px;
}
.woocommerce div.product .stock {
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 4px;
}
.woocommerce div.product .stock.in-stock {
	color: #4f7a52;
}
.woocommerce div.product .stock.out-of-stock {
	color: var(--dd-terracotta-dark);
}

.dd-trust-mini {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 18px 0 22px;
}
.dd-trust-mini span {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--dd-ink-soft);
	background: var(--dd-cream-deep);
	border-radius: 10px;
	padding: 10px 12px;
}
.dd-trust-mini svg {
	flex: none;
	color: var(--dd-forest);
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.woocommerce div.product form.cart .quantity {
	margin: 0;
}
.woocommerce div.product form.cart .qty {
	width: 70px;
	height: 48px;
	border: 1px solid var(--dd-line);
	border-radius: 10px;
	text-align: center;
	font-size: 15px;
	font-family: var(--dd-font-body);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	background: var(--dd-button);
	color: var(--dd-white);
	border: none;
	border-radius: 10px;
	font-size: 15.5px;
	font-weight: 600;
	padding: 0 24px;
	height: 48px;
	min-width: 180px;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--dd-button-dark);
}

.dd-delivery-note {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--dd-ink-soft);
	margin-bottom: 20px;
}
.dd-delivery-note svg {
	flex: none;
}

.woocommerce div.product .product_meta {
	padding-top: 16px;
	border-top: 1px solid var(--dd-line);
	font-size: 12.5px;
	color: var(--dd-ink-soft);
}
.woocommerce div.product .product_meta a {
	text-decoration: underline;
}

/* ---------- Product tabs ---------- */
.woocommerce-tabs {
	grid-column: 1 / -1;
	max-width: 820px;
	margin: 20px 0 0;
}
@media (max-width: 940px) {
	.woocommerce-tabs {
		margin-top: 0;
	}
}
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--dd-line);
	overflow-x: auto;
	margin: 0 0 0;
	padding: 0;
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dd-ink-soft);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--dd-forest-dark);
	border-color: var(--dd-terracotta);
}
.woocommerce-tabs .panel {
	padding: 30px 4px 10px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--dd-ink);
}
.woocommerce-tabs .panel h4 {
	font-family: var(--dd-font-display);
	font-size: 17px;
	color: var(--dd-forest-dark);
	margin: 0 0 10px;
}
.dd-tab-copy p {
	margin: 0 0 16px;
}

/* ---------- Reviews ---------- */
#reviews #comments ol.commentlist {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
#reviews #comments ol.commentlist li {
	padding: 18px 0;
	border-bottom: 1px solid var(--dd-line);
}
#reviews .comment-form-rating select,
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
	border: 1px solid var(--dd-line);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: var(--dd-font-body);
	background: var(--dd-cream);
	width: 100%;
}
#reviews #submit,
#reviews .form-submit input[type="submit"] {
	background: var(--dd-button);
	color: var(--dd-white);
	border: none;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Related products ---------- */
.related.products {
	grid-column: 1 / -1;
	margin-top: 50px;
	padding-top: 50px;
	border-top: 1px solid var(--dd-line);
}
.related.products > h2 {
	font-size: 24px;
	margin-bottom: 20px;
}

/* ---------- Sticky mobile add-to-cart bar ---------- */
.dd-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
	background: var(--dd-white);
	border-top: 1px solid var(--dd-line);
	padding: 12px 16px;
	display: none;
	align-items: center;
	gap: 12px;
	box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}
.dd-sticky-bar.show {
	transform: translateY(0);
}
.dd-sticky-bar__info {
	flex: 1;
	min-width: 0;
}
.dd-sticky-bar__name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dd-sticky-bar__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--dd-forest-dark);
}
.dd-sticky-bar .dd-btn {
	padding: 12px 20px;
	min-height: 0;
}
@media (max-width: 940px) {
	.dd-sticky-bar {
		display: flex;
	}
}