/* =========================================================
   Nhang Dai Thanh - Main stylesheet
   ========================================================= */

:root {
	--dt-red: #9f1d20;
	--dt-red-dark: #641316;
	--dt-red-deep: #3b0c0e;

	--dt-gold: #d5a431;
	--dt-gold-dark: #a97818;
	--dt-gold-light: #f3d77d;

	--dt-cream: #fff8e8;
	--dt-cream-soft: #f8edd5;
	--dt-surface: #ffffff;

	--dt-text: #2b1712;
	--dt-text-muted: #75615a;
	--dt-border: rgba(100, 19, 22, 0.14);

	--dt-container: min(100% - 40px, 1280px);
	--dt-container-wide: min(100% - 32px, 1440px);

	--dt-header-height: 58px;

	--dt-radius-small: 14px;
	--dt-radius-medium: 24px;
	--dt-radius-large: 36px;

	--dt-shadow: 0 24px 60px rgba(92, 21, 18, 0.12);
	--dt-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* =========================================================
   Base
   ========================================================= */

html {
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--dt-cream);
	color: var(--dt-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.admin-bar .dt-header {
	top: 32px;
}

main {
	display: block;
}

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

a {
	color: inherit;
	transition:
		color 180ms var(--dt-ease),
		opacity 180ms var(--dt-ease),
		transform 180ms var(--dt-ease);
}

p {
	color: var(--dt-text);
}

:focus-visible {
	outline: 3px solid #0066cc;
	outline-offset: 3px;
}

.dt-main {
	min-height: calc(100svh - var(--dt-header-height));
}

.dt-container {
	width: var(--dt-container);
	margin-inline: auto;
}

.dt-container-wide {
	width: var(--dt-container-wide);
	margin-inline: auto;
}

.dt-section {
	padding-block: clamp(4rem, 10vw, 9rem);
}

.dt-eyebrow {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dt-red);
}

.dt-lead {
	max-width: 720px;
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.45rem);
	line-height: 1.55;
	color: var(--dt-text-muted);
}

/* =========================================================
   Header
   ========================================================= */

.dt-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 248, 232, 0.88);
	border-bottom: 1px solid rgba(159, 29, 32, 0.12);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 0 rgba(213, 164, 49, 0.16);
	transition:
		background-color 220ms var(--dt-ease),
		box-shadow 220ms var(--dt-ease);
}

.dt-header__inner {
	width: var(--dt-container);
	min-height: var(--dt-header-height);
	margin-inline: auto;
}

.dt-header__logo img {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.dt-header__logo,
.dt-header .wp-block-site-title {
	color: var(--dt-red-dark);
	font-weight: 700;
}

.dt-header .wp-block-site-title {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.02em;
}

.dt-header .wp-block-site-title a {
	color: var(--dt-red-dark);
	text-decoration: none;
}

.dt-header.is-scrolled {
	background: rgba(255, 248, 232, 0.96);
	box-shadow:
		0 8px 28px rgba(100, 19, 22, 0.09),
		0 1px 0 rgba(213, 164, 49, 0.18);
}

.dt-navigation {
	font-size: 0.9rem;
	font-weight: 550;
}

.dt-navigation .wp-block-navigation__container {
	gap: clamp(1rem, 2vw, 1.8rem);
}

.dt-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	color: var(--dt-text);
	text-decoration: none;
}

.dt-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--dt-red), var(--dt-gold));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 200ms var(--dt-ease);
}

.dt-navigation .wp-block-navigation-item__content:hover,
.dt-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--dt-red);
}

.dt-navigation .wp-block-navigation-item__content:hover::after,
.dt-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* =========================================================
   Buttons
   ========================================================= */

.wp-element-button {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--dt-red), var(--dt-red-dark));
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(100, 19, 22, 0.18);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		transform 180ms var(--dt-ease),
		box-shadow 180ms var(--dt-ease),
		background-color 180ms var(--dt-ease),
		color 180ms var(--dt-ease);
}

.wp-element-button:hover {
	transform: translateY(-2px);
	color: #ffffff;
	box-shadow: 0 14px 32px rgba(100, 19, 22, 0.28);
}

.dt-button-secondary .wp-element-button {
	background: transparent;
	border: 1px solid var(--dt-gold);
	color: var(--dt-red-dark);
	box-shadow: none;
}

.dt-button-secondary .wp-element-button:hover {
	background: var(--dt-gold);
	color: var(--dt-red-deep);
}

/* =========================================================
   Hero - two-column desktop layout
   ========================================================= */

.dt-hero {
	position: relative;
	min-height: calc(78svh - var(--dt-header-height));
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 18% 20%,
			rgba(213, 164, 49, 0.2),
			transparent 34%
		),
		radial-gradient(
			circle at 82% 72%,
			rgba(159, 29, 32, 0.15),
			transparent 40%
		),
		linear-gradient(
			180deg,
			#fffdf6 0%,
			var(--dt-cream) 55%,
			var(--dt-cream-soft) 100%
		);
}

.dt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(159, 29, 32, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 29, 32, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.45),
		transparent 82%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.45),
		transparent 82%
	);
	pointer-events: none;
}

.dt-hero__inner {
	position: relative;
	z-index: 1;
	width: var(--dt-container-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 8rem);
	padding-block: clamp(5rem, 8vw, 8rem);
}

.dt-hero__copy {
	width: 100%;
	margin: 0;
}

.dt-hero__title {
	max-width: 700px;
	margin: 0 0 1.5rem;
	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-hero__title span {
	display: block;
	color: var(--dt-gold-dark);
}

.dt-hero__description {
	max-width: 560px;
	margin: 0 0 2rem;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.35rem);
	line-height: 1.6;
	color: var(--dt-text-muted);
	text-wrap: balance;
}

.dt-hero__copy .wp-block-buttons {
	justify-content: flex-start;
}

.dt-hero__visual {
	position: relative;
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dt-hero__visual::before {
	content: "";
	position: absolute;
	width: min(34vw, 520px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(243, 215, 125, 0.6) 0%,
		rgba(213, 164, 49, 0.22) 44%,
		transparent 72%
	);
	filter: blur(3px);
	pointer-events: none;
}

.dt-hero__visual-placeholder {
	position: relative;
	z-index: 1;
	width: min(100%, 620px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 2rem;
	border: 1px dashed rgba(159, 29, 32, 0.28);
	border-radius: var(--dt-radius-large);
	background:
		radial-gradient(
			circle at 50% 48%,
			rgba(213, 164, 49, 0.25),
			transparent 50%
		),
		rgba(255, 255, 255, 0.55);
	box-shadow: 0 28px 70px rgba(100, 19, 22, 0.12);
	color: var(--dt-text-muted);
}

.dt-hero__visual-placeholder p {
	margin: 0;
	color: var(--dt-text-muted);
}

.dt-hero__product-image {
	position: relative;
	z-index: 1;
	width: min(100%, 680px);
	margin: 0;
}

.dt-hero__product-image img {
	width: 100%;
	max-height: 680px;
	object-fit: contain;
	filter: drop-shadow(0 34px 35px rgba(84, 20, 17, 0.2));
	transition: transform 600ms var(--dt-ease);
}

@media (hover: hover) {
	.dt-hero__product-image:hover img {
		transform: translateY(-8px) scale(1.015);
	}
}

/* =========================================================
   Introduction
   ========================================================= */

.dt-introduction {
	background: linear-gradient(180deg, #ffffff 0%, var(--dt-cream) 100%);
}

.dt-introduction h2 {
	max-width: 900px;
	margin-inline: auto;
	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-introduction h2::after {
	content: "";
	display: block;
	width: 72px;
	height: 3px;
	margin: 1.5rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--dt-red), var(--dt-gold));
}

.dt-introduction__text {
	max-width: 720px;
	margin-inline: auto;
	font-size: clamp(1.15rem, 1rem + 0.65vw, 1.65rem);
	line-height: 1.5;
	color: var(--dt-text-muted);
	text-wrap: balance;
}

/* =========================================================
   Generic cards
   ========================================================= */

.dt-card {
	overflow: hidden;
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-medium);
	background: var(--dt-surface);
	box-shadow: 0 12px 34px rgba(100, 19, 22, 0.06);
	transition:
		transform 220ms var(--dt-ease),
		box-shadow 220ms var(--dt-ease),
		border-color 220ms var(--dt-ease);
}

.dt-card:hover {
	transform: translateY(-6px);
	border-color: rgba(213, 164, 49, 0.4);
	box-shadow: 0 24px 54px rgba(100, 19, 22, 0.13);
}

.dt-card img {
	width: 100%;
	transition: transform 500ms var(--dt-ease);
}

.dt-card:hover img {
	transform: scale(1.03);
}

/* =========================================================
   Footer
   ========================================================= */

.dt-footer {
	position: relative;
	padding-block: clamp(4rem, 9vw, 8rem) 2rem;
	background:
		radial-gradient(
			circle at 15% 15%,
			rgba(213, 164, 49, 0.12),
			transparent 38%
		),
		linear-gradient(135deg, var(--dt-red-deep), var(--dt-red-dark));
	color: var(--dt-cream);
	overflow: hidden;
	font-size: 0.95rem;
}

.dt-footer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--dt-gold),
		var(--dt-gold-light),
		var(--dt-gold),
		transparent
	);
}

.dt-footer__columns {
	width: var(--dt-container);
	margin-inline: auto;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: flex-start;
	max-width: 1000px;
}

.dt-footer__title {
	margin: 0;
	font-size: clamp(1.75rem, 2.2vw, 2.4rem);
	font-weight: 700;
	color: var(--dt-gold-light);
}

.dt-footer__title a {
	color: var(--dt-gold-light);
}

.dt-footer__intro {
	max-width: 420px;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(255, 248, 232, 0.74);
}

.dt-footer__heading {
	margin-top: 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dt-gold-light);
}

.dt-footer p {
	line-height: 1.7;
	color: rgba(255, 248, 232, 0.82);
	font-size: 1rem;
}

.dt-footer a {
	color: var(--dt-cream);
	text-decoration: none;
}

.dt-footer a:hover {
	color: var(--dt-gold-light);
}

.dt-footer__navigation .wp-block-navigation-item__content {
	color: var(--dt-cream);
}

.dt-footer__navigation .wp-block-navigation-item__content:hover {
	color: var(--dt-gold-light);
}

.dt-footer__separator {
	width: var(--dt-container);
	margin: clamp(3rem, 7vw, 6rem) auto 1.5rem;
	border-color: rgba(243, 215, 125, 0.22);
}

.dt-footer__copyright {
	width: var(--dt-container);
	margin-inline: auto;
	font-size: 0.8rem;
	text-align: center;
	color: rgba(255, 248, 232, 0.58);
}

/* =========================================================
   WordPress blocks
   ========================================================= */

.wp-block-heading {
	color: var(--dt-red-dark);
}

.wp-block-separator {
	opacity: 1;
}

.wp-block-image {
	margin-block-start: 0;
}

.wp-site-blocks {
	overflow-x: hidden;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1023px) {
	.dt-hero__inner {
		grid-template-columns: 1fr;
		gap: 3.5rem;
		padding-top: 6rem;
		padding-bottom: 5rem;
		text-align: center;
	}

	.dt-hero__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.dt-hero__title,
	.dt-hero__description {
		margin-right: auto;
		margin-left: auto;
	}

	.dt-hero__copy .wp-block-buttons {
		justify-content: center;
	}

	.dt-hero__visual-placeholder {
		width: min(100%, 580px);
	}

	.dt-hero__visual::before {
		width: min(64vw, 500px);
	}
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 782px) {
	body.admin-bar .dt-header {
		top: 46px;
	}
}

@media (max-width: 767px) {
	:root {
		--dt-container: min(100% - 24px, 1280px);
		--dt-container-wide: min(100% - 20px, 1440px);
		--dt-header-height: 54px;
		--dt-radius-large: 24px;
		--dt-radius-medium: 20px;
	}

	.dt-header__logo img {
		width: 38px;
		height: 38px;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open {
		padding:
			calc(1rem + env(safe-area-inset-top))
			1.5rem
			calc(2rem + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, #fffaf0 0%, var(--dt-cream) 100%);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container-content {
		align-items: flex-start;
	}

	.dt-navigation
		.wp-block-navigation__container {
		gap: 1.5rem;
		font-size: 1.8rem;
		font-weight: 650;
	}

	.dt-navigation
		.wp-block-navigation-item__content {
		color: var(--dt-red-dark);
	}

	.dt-navigation
		.wp-block-navigation-item__content::after {
		display: none;
	}

	.dt-hero {
		min-height: auto;
	}

	.dt-hero__inner {
		width: var(--dt-container);
		gap: 2.75rem;
		padding-top: 4.5rem;
		padding-bottom: 4rem;
	}

	.dt-hero__title {
		font-size: clamp(2.65rem, 12vw, 4.2rem);
	}

	.dt-hero__description {
		max-width: 420px;
		font-size: 1rem;
	}

	.dt-hero__visual-placeholder {
		width: min(100%, 430px);
		border-radius: 24px;
	}

	.dt-hero__product-image {
		width: min(100%, 460px);
	}

	.dt-footer__columns {
		display: grid;
		grid-template-columns: 1fr;
	}

	.dt-footer {
		padding-top: 4rem;
	}
}

/* =========================================================
   Small mobile
   ========================================================= */

@media (max-width: 420px) {
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-button,
	.wp-element-button {
		width: 100%;
	}

	.dt-hero__inner {
		padding-top: 3.75rem;
	}

	.dt-hero__title {
		font-size: clamp(2.3rem, 12vw, 3.25rem);
	}

	.dt-hero__title span {
		margin-top: 0.2em;
	}

	.dt-hero__description {
		max-width: 320px;
	}

	.dt-hero__visual-placeholder {
		aspect-ratio: 4 / 5;
	}

	.dt-section {
		padding-block: 4rem;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
/* =========================================================
   Section headings
   ========================================================= */

.dt-section-heading {
	max-width: 900px;
	margin: 0 auto clamp(3rem, 7vw, 6rem);
}

.dt-section-heading h2 {
	margin-top: 0;
	margin-bottom: 1.5rem;
	text-wrap: balance;
}

.dt-section-description {
	max-width: 680px;
	margin-inline: auto;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
	line-height: 1.6;
	color: var(--dt-text-muted);
	text-wrap: balance;
}

/* =========================================================
   Product categories
   ========================================================= */

.dt-categories {
	background: #ffffff;
}

.dt-category-grid {
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: stretch;
}

.dt-category-stack {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.dt-category-card {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	margin: 0;
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-large);
	background: var(--dt-cream-soft);
	box-shadow: 0 18px 46px rgba(100, 19, 22, 0.08);
	isolation: isolate;
}

.dt-category-card--large {
	min-height: 760px;
}

.dt-category-card--small {
	min-height: 360px;
}

.dt-category-card--warm {
	background: #f3e2c5;
}

.dt-category-card__image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: -2;
}

.dt-category-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(43, 23, 18, 0.02) 20%,
			rgba(43, 23, 18, 0.75) 100%
		);
}

.dt-category-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 700ms var(--dt-ease),
		filter 700ms var(--dt-ease);
}

.dt-category-card__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: clamp(1.5rem, 4vw, 3rem);
}

.dt-category-card__content h3 {
	margin: 0 0 0.65rem;
	font-size: clamp(1.8rem, 3vw, 3rem);
	color: #ffffff;
}

.dt-category-card__content p {
	max-width: 500px;
	margin-top: 0;
	margin-bottom: 0.85rem;
	color: rgba(255, 255, 255, 0.82);
}

.dt-category-card__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dt-gold-light) !important;
}

.dt-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
}

@media (hover: hover) {
	.dt-category-card:hover .dt-category-card__image img {
		transform: scale(1.055);
		filter: saturate(1.05);
	}

	.dt-category-card:hover {
		box-shadow: 0 30px 70px rgba(100, 19, 22, 0.15);
	}
}

/* =========================================================
   Production story - balanced layout
   ========================================================= */

.dt-story {
	background:
		linear-gradient(
			135deg,
			var(--dt-red-deep) 0%,
			var(--dt-red-dark) 100%
		);

	color: var(--dt-cream);
}

.dt-story__inner {
	width: min(100% - 48px, 1160px);
	margin-inline: auto;

	display: grid;
	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(0, 1.1fr);

	align-items: center;
	gap: clamp(3rem, 6vw, 6rem);

	padding-block: clamp(4.5rem, 7vw, 7rem);
}

.dt-story__visual {
	position: relative;
	top: auto;

	width: 100%;
	max-width: 460px;
	margin-inline: auto;

	transform:
		translate3d(
			0,
			var(--dt-parallax-y, 0),
			0
		);

	will-change: transform;
}

.dt-story__image {
	overflow: hidden;
	margin: 0;

	border-radius: 28px;

	box-shadow:
		0 28px 64px rgba(0, 0, 0, 0.28);
}

.dt-story__image img {
	width: 100%;
	aspect-ratio: 4 / 5;

	object-fit: cover;
	object-position: center;

	display: block;
}

.dt-story__content {
	width: 100%;
	max-width: 560px;

	padding: 0;
	margin: 0;
}

.dt-story__content .dt-eyebrow {
	margin-bottom: 0.85rem;

	color: var(--dt-gold);
}

.dt-story__content h2 {
	max-width: 560px;

	margin:
		0
		0
		1.25rem;

	color: var(--dt-cream);

	text-wrap: balance;
}

.dt-story__lead {
	max-width: 540px;

	margin:
		0
		0
		2rem;

	font-size:
		clamp(
			1.05rem,
			1rem + 0.3vw,
			1.3rem
		);

	line-height: 1.6;

	color:
		rgba(
			255,
			248,
			232,
			0.76
		);
}

.dt-process-list {
	margin-top: 1.5rem;
}

.dt-process-item {
	display: grid !important;
	grid-template-columns: 42px 1fr;

	align-items: start;
	gap: 1rem;

	padding-block: 1.2rem;

	border-top:
		1px solid
		rgba(
			243,
			215,
			125,
			0.16
		);
}

.dt-process-item:last-child {
	border-bottom:
		1px solid
		rgba(
			243,
			215,
			125,
			0.16
		);
}

.dt-process-item__number {
	margin: 0;

	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;

	color: var(--dt-gold);
}

.dt-process-item h3 {
	margin:
		0
		0
		0.35rem;

	font-size:
		clamp(
			1.1rem,
			1rem + 0.3vw,
			1.35rem
		);

	line-height: 1.25;

	color: var(--dt-gold-light);
}

.dt-process-item p {
	margin: 0;

	font-size: 0.95rem;
	line-height: 1.55;

	color:
		rgba(
			255,
			248,
			232,
			0.68
		);
}

/* =========================================================
   Contact CTA
   ========================================================= */

.dt-contact-cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(6rem, 13vw, 12rem);
	background:
		radial-gradient(
			circle at 50% 20%,
			rgba(213, 164, 49, 0.24),
			transparent 38%
		),
		linear-gradient(
			180deg,
			#fffdf6 0%,
			var(--dt-cream-soft) 100%
		);
}

.dt-contact-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			rgba(159, 29, 32, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(159, 29, 32, 0.025) 1px,
			transparent 1px
		);
	background-size: 52px 52px;
	pointer-events: none;
}

.dt-contact-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.dt-contact-cta h2 {
	margin-top: 0;
	margin-bottom: 1.5rem;
	text-wrap: balance;
}

.dt-contact-cta__description {
	max-width: 650px;
	margin: 0 auto 2rem;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
	line-height: 1.6;
	color: var(--dt-text-muted);
}

/* =========================================================
   Scroll reveal
   ========================================================= */

.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 42px, 0);
	transition:
		opacity 800ms var(--dt-ease),
		transform 800ms var(--dt-ease);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.dt-category-grid [data-reveal]:nth-child(2) {
	transition-delay: 120ms;
}

.dt-process-item:nth-child(2) {
	transition-delay: 80ms;
}

.dt-process-item:nth-child(3) {
	transition-delay: 160ms;
}

.dt-process-item:nth-child(4) {
	transition-delay: 240ms;
}

/* =========================================================
   New section responsive rules
   ========================================================= */

@media (max-width: 1023px) {
	.dt-category-grid {
		display: grid;
		grid-template-columns: 1fr;
	}

	.dt-category-card--large {
		min-height: 580px;
	}

	.dt-category-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dt-story__inner {
		grid-template-columns: 1fr;
	}

	.dt-story__visual {
		position: relative;
		top: auto;
	}

	.dt-story__image img {
		height: min(66vh, 680px);
	}
}

@media (max-width: 767px) {
	.dt-section-heading {
		margin-bottom: 2.75rem;
	}

	.dt-category-stack {
		grid-template-columns: 1fr;
	}

	.dt-category-card--large,
	.dt-category-card--small {
		min-height: 470px;
	}

	.dt-category-card__content {
		padding: 1.5rem;
	}

	.dt-story__inner {
		width: var(--dt-container);
		gap: 3rem;
		padding-block: 5rem;
	}

	.dt-story__image img {
		height: 480px;
	}

	.dt-process-item {
		gap: 1rem;
	}

	.dt-process-item__number {
		flex-basis: 34px;
	}

	.dt-contact-cta {
		padding-block: 6rem;
	}
}

@media (max-width: 420px) {
	.dt-category-card--large,
	.dt-category-card--small {
		min-height: 410px;
	}

	.dt-story__image img {
		height: 400px;
	}
}

/* =========================================================
   Compact homepage spacing
   ========================================================= */

/* Global section spacing */
.dt-section {
	padding-block: clamp(3.5rem, 6vw, 6rem);
}

/* Hero */
.dt-hero {
	min-height: calc(88svh - var(--dt-header-height));
}

.dt-hero__inner {
	padding-block: clamp(4.5rem, 7vw, 7rem);
}

/* Introduction */
.dt-introduction {
	padding-block: clamp(4rem, 6vw, 6rem);
}

.dt-introduction h2 {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.dt-introduction__text {
	margin-top: 0;
}

/* Product categories */
.dt-categories {
	padding-top: clamp(4rem, 6vw, 6rem);
	padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

.dt-section-heading {
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.dt-section-heading h2 {
	margin-bottom: 1rem;
}

.dt-section-description {
	margin-top: 0;
}

/* Category cards */
.dt-category-grid {
	margin-bottom: 0;
}

/* Story section */
.dt-story__inner {
	padding-block: clamp(5rem, 8vw, 8rem);
}

.dt-story__content {
	padding-block: clamp(0.5rem, 2vw, 2rem);
}

.dt-story__lead {
	margin-bottom: 2.5rem;
}

.dt-process-list {
	margin-top: 2rem;
}

.dt-process-item {
	padding-block: 1.35rem;
}

/* Contact CTA */
.dt-contact-cta {
	padding-block: clamp(4.5rem, 7vw, 7rem);
}

.dt-contact-cta h2 {
	margin-bottom: 1rem;
}

.dt-contact-cta__description {
	margin-bottom: 1.75rem;
}

/* Footer */
.dt-footer {
	padding-top: clamp(3.5rem, 6vw, 5.5rem);
	padding-bottom: 1.5rem;
}

.dt-footer__separator {
	margin-top: clamp(2.5rem, 4vw, 4rem);
}

/* Remove unnecessary default margins */
.dt-introduction > *,
.dt-categories > *,
.dt-contact-cta > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 767px) {
	.dt-section {
		padding-block: 3.5rem;
	}

	.dt-hero__inner {
		padding-top: 3.75rem;
		padding-bottom: 3.75rem;
	}

	.dt-introduction {
		padding-block: 3.5rem;
	}

	.dt-categories {
		padding-top: 3.5rem;
		padding-bottom: 4rem;
	}

	.dt-section-heading {
		margin-bottom: 2.25rem;
	}

	.dt-story__inner {
		padding-block: 4rem;
	}

	.dt-contact-cta {
		padding-block: 4rem;
	}

	.dt-footer {
		padding-top: 3.5rem;
	}
}

/* =========================================================
   Compact hero spacing
   ========================================================= */

.dt-hero {
	min-height: auto;
	align-items: flex-start;
}

.dt-hero__inner {
	padding-top: clamp(1.5rem, 3vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 5rem);
}


/* =========================================================
   Hero image - softer shadow
   ========================================================= */

.dt-hero__product-image {
	width: min(100%, 620px);
	margin: 0;

	overflow: hidden;

	border: 1px solid rgba(100, 19, 22, 0.08);
	border-radius: 32px;

	background: rgba(255, 255, 255, 0.42);

	box-shadow:
		0 18px 42px rgba(84, 20, 17, 0.10),
		0 4px 12px rgba(84, 20, 17, 0.05);
}

.dt-hero__product-image img {
	display: block;

	width: 100%;
	height: auto;

	border-radius: inherit;

	object-fit: cover;

	filter: none;

	transition:
		transform 500ms var(--dt-ease);
}

@media (hover: hover) {
	.dt-hero__product-image:hover img {
		transform: scale(1.01);
	}
}

/* 2) Footer text contrast fix */
.dt-footer {
	color: rgba(255, 248, 232, 0.92);
}

.dt-footer .wp-block-heading,
.dt-footer__heading {
	color: var(--dt-gold-light) !important;
}

.dt-footer__title,
.dt-footer__title a {
	color: #fff8e8 !important;
}

.dt-footer__intro {
	color: rgba(255, 248, 232, 0.78) !important;
}

.dt-footer p {
	color: rgba(255, 248, 232, 0.84) !important;
}

.dt-footer a {
	color: #fff8e8 !important;
}

.dt-footer a:hover {
	color: var(--dt-gold-light) !important;
}

.dt-footer__copyright {
	color: rgba(255, 248, 232, 0.62) !important;
}

/* =========================================================
   Final header — centered Apple-style layout
   ========================================================= */

:root {
	--dt-header-height: 78px;
}

.dt-header {
	width: 100%;
}

/*
 * Center the whole logo + navigation group.
 * The header no longer stretches the logo and menu to opposite edges.
 */
.dt-header__inner {
	width: var(--dt-container-wide) !important;
	max-width: none !important;
	min-height: var(--dt-header-height);
	margin-inline: auto !important;
	padding-inline: 0 !important;

	display: flex !important;
	align-items: center;
	justify-content: center !important;
	flex-wrap: nowrap !important;

	gap: clamp(2.25rem, 4vw, 4.5rem) !important;
}

/* Brand wrapper now contains only the logo */
.dt-brand {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	flex-wrap: nowrap !important;

	min-width: 0;
	margin: 0 !important;
	gap: 0;
}

/* Hide the old text wordmark if it still exists in the editor */
.dt-brand-wordmark,
.dt-brand__title,
.dt-header .wp-block-site-title {
	display: none !important;
}

/* Logo */
.dt-header__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 64px;

	width: 64px;
	height: 48px;
	margin: 0 !important;
	overflow: visible;
	line-height: 0;
}

.dt-header__logo img {
	display: block;
	width: 64px !important;
	height: 48px !important;
	max-width: none !important;

	object-fit: contain;
	transform: none !important;
}

/* Navigation sits immediately beside the logo */
.dt-navigation {
	flex: 0 0 auto;
	margin: 0 !important;

	font-size: 1rem;
	font-weight: 650;
}

.dt-navigation .wp-block-navigation__responsive-container-content,
.dt-navigation .wp-block-navigation__container {
	flex-wrap: nowrap !important;
}

.dt-navigation .wp-block-navigation__container {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: clamp(1.6rem, 2.7vw, 3rem);
	white-space: nowrap;
}

.dt-navigation .wp-block-navigation-item {
	flex: 0 0 auto;
}

.dt-navigation .wp-block-navigation-item__content {
	padding-block: 0.75rem;
}

/* Medium desktop */
@media (max-width: 1100px) {
	.dt-header__inner {
		gap: 2rem !important;
	}

	.dt-header__logo {
		flex-basis: 56px;
		width: 56px;
		height: 43px;
	}

	.dt-header__logo img {
		width: 56px !important;
		height: 43px !important;
	}

	.dt-navigation {
		font-size: 0.95rem;
	}

	.dt-navigation .wp-block-navigation__container {
		gap: 1.35rem;
	}
}

/* Tablet and mobile */
@media (max-width: 782px) {
	:root {
		--dt-header-height: 64px;
	}

	.dt-header__inner {
		width: var(--dt-container) !important;
		justify-content: space-between !important;
		gap: 1rem !important;
	}

	.dt-header__logo {
		flex-basis: 50px;
		width: 50px;
		height: 39px;
	}

	.dt-header__logo img {
		width: 50px !important;
		height: 39px !important;
	}

	.dt-navigation {
		margin-left: auto !important;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open {
		padding:
			calc(1rem + env(safe-area-inset-top))
			1.5rem
			calc(2rem + env(safe-area-inset-bottom));

		background:
			linear-gradient(
				180deg,
				#fffaf0 0%,
				var(--dt-cream) 100%
			);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		align-items: flex-start;
		flex-direction: column;
		flex-wrap: nowrap !important;
		gap: 1.4rem;

		font-size: 1.65rem;
		font-weight: 650;
		white-space: normal;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content::after {
		display: none;
	}
}

/* Small mobile */
@media (max-width: 420px) {
	.dt-header__logo {
		flex-basis: 44px;
		width: 44px;
		height: 35px;
	}

	.dt-header__logo img {
		width: 44px !important;
		height: 35px !important;
	}
}

/* =========================================================
   Final mobile navigation
   ========================================================= */

@media (max-width: 782px) {

	/* Header bar */
	:root {
		--dt-header-height: 68px;
	}

	.dt-header {
		min-height: var(--dt-header-height);
	}

	.dt-header__inner {
		width: min(100% - 28px, 100%) !important;
		min-height: var(--dt-header-height);

		display: flex !important;
		align-items: center;
		justify-content: space-between !important;

		margin-inline: auto !important;
		padding: 0 !important;
		gap: 1rem !important;
	}

	/* Mobile logo */
	.dt-header__logo {
		flex: 0 0 58px;
		width: 58px;
		height: 44px;
		margin: 0 !important;
	}

	.dt-header__logo img {
		display: block;
		width: 58px !important;
		height: 44px !important;
		max-width: none !important;
		object-fit: contain;
	}

	/* Navigation block */
	.dt-navigation {
		flex: 0 0 auto;
		margin: 0 0 0 auto !important;
		font-size: inherit;
	}

	/* Hamburger button */
	.dt-navigation
		.wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 46px;
		height: 46px;
		padding: 0;

		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--dt-text);

		transition:
			background-color 180ms var(--dt-ease),
			transform 180ms var(--dt-ease);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container-open:hover {
		background: rgba(159, 29, 32, 0.07);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container-open svg {
		width: 30px;
		height: 30px;
	}

	/* Full-screen mobile menu */
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		z-index: 99999;

		width: 100%;
		height: 100dvh;
		max-width: none;

		display: flex;
		flex-direction: column;

		padding:
			calc(1rem + env(safe-area-inset-top))
			1.5rem
			calc(2rem + env(safe-area-inset-bottom));

		overflow-y: auto;

		background:
			linear-gradient(
				180deg,
				#fffaf0 0%,
				var(--dt-cream) 100%
			);
	}

	/*
	 * WordPress adds its own content wrapper.
	 * Force it to fill the screen and remove old alignment rules.
	 */
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		width: min(100%, 520px);
		min-height: 100%;
		margin-inline: auto;

		display: flex;
		flex-direction: column;
		align-items: stretch !important;
		justify-content: center;

		padding: 5rem 0 3rem !important;
	}

	/* Close button */
	.dt-navigation
		.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: calc(1rem + env(safe-area-inset-top));
		right: 1.25rem;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 46px;
		height: 46px;
		padding: 0;

		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--dt-text);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container-close:hover {
		background: rgba(159, 29, 32, 0.07);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container-close svg {
		width: 30px;
		height: 30px;
	}

	/* Vertical menu */
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		width: 100%;

		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;

		gap: 0 !important;
		margin: 0;
		padding: 0;

		font-size: inherit !important;
		font-weight: inherit;
		white-space: normal;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		display: block;
		width: 100%;
		margin: 0;

		border-bottom: 1px solid rgba(100, 19, 22, 0.12);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:first-child {
		border-top: 1px solid rgba(100, 19, 22, 0.12);
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		padding: 1.2rem 0;

		font-size: clamp(1.45rem, 6vw, 2rem) !important;
		font-weight: 650;
		line-height: 1.2;

		color: var(--dt-text);
		text-decoration: none;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.current-menu-item
		> .wp-block-navigation-item__content {
		color: var(--dt-red);
	}

	/* Remove desktop underline inside mobile overlay */
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content::after {
		display: none !important;
	}

	/* Prevent odd WordPress block margins */
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item,
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		margin-block: 0 !important;
	}
}
/* =========================================================
   Contact page
   ========================================================= */

.dt-contact-page {
	background: var(--dt-cream);
}

.dt-contact-container {
	width: var(--dt-container-wide);
	margin-inline: auto;
}

/* Hero */

.dt-contact-hero {
	position: relative;
	overflow: hidden;

	padding:
		clamp(5.5rem, 9vw, 9rem)
		0
		clamp(4rem, 7vw, 6.5rem);

	background:
		radial-gradient(
			circle at 15% 20%,
			rgba(232, 184, 69, 0.17),
			transparent 32%
		),
		radial-gradient(
			circle at 85% 30%,
			rgba(159, 29, 32, 0.08),
			transparent 31%
		),
		linear-gradient(
			135deg,
			#fff6dc 0%,
			#fffaf0 55%,
			#f8e7de 100%
		);
}

.dt-contact-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background-image:
		linear-gradient(
			rgba(100, 19, 22, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(100, 19, 22, 0.025) 1px,
			transparent 1px
		);

	background-size: 72px 72px;
	mask-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.55),
			transparent
		);
}

.dt-contact-hero__inner {
	position: relative;
	z-index: 1;
}

.dt-contact-title {
	max-width: 920px;
	margin:
		0.65rem
		auto
		1.25rem;

	font-size:
		clamp(
			3.2rem,
			7vw,
			6.6rem
		);

	line-height: 0.96;
	letter-spacing: -0.065em;

	color: var(--dt-red-dark);
}

.dt-contact-lead {
	max-width: 720px;
	margin-inline: auto;

	font-size:
		clamp(
			1.05rem,
			0.95rem + 0.35vw,
			1.35rem
		);

	line-height: 1.75;
	color: var(--dt-muted);
}

/* Main layout */

.dt-contact-main {
	padding:
		clamp(4rem, 8vw, 7rem)
		0;
}

.dt-contact-layout {
	display: grid;
	grid-template-columns:
		minmax(0, 0.92fr)
		minmax(0, 1.08fr);

	align-items: stretch;

	gap:
		clamp(
			2rem,
			4vw,
			4rem
		);
}

/* Information panel */

.dt-contact-panel {
	padding:
		clamp(
			2rem,
			4vw,
			4rem
		);

	border:
		1px solid
		rgba(100, 19, 22, 0.08);

	border-radius: 32px;

	background:
		rgba(255, 250, 240, 0.82);

	box-shadow:
		0 24px 70px
		rgba(86, 39, 20, 0.08);
}

.dt-contact-kicker {
	margin: 0 0 1rem;

	font-size: 0.75rem;
	font-weight: 800;

	letter-spacing: 0.18em;
	text-transform: uppercase;

	color: var(--dt-red);
}

.dt-contact-panel__title {
	margin: 0 0 1rem;

	font-size:
		clamp(
			2.3rem,
			4vw,
			4rem
		);

	line-height: 1;
	letter-spacing: -0.05em;

	color: var(--dt-red-dark);
}

.dt-contact-panel__description {
	max-width: 580px;
	margin: 0 0 2.5rem;

	font-size: 1.05rem;
	line-height: 1.75;

	color: var(--dt-muted);
}

/* Contact rows */

.dt-contact-row {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);

	gap: 1.1rem;

	margin: 0;
	padding: 1.5rem 0;

	border-top:
		1px solid
		rgba(100, 19, 22, 0.1);
}

.dt-contact-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	border-radius: 16px;

	color: var(--dt-gold-dark);

	background:
		rgba(232, 184, 69, 0.14);
}

.dt-contact-row__label {
	margin: 0 0 0.3rem;

	font-size: 0.7rem;
	font-weight: 800;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: var(--dt-red);
}

.dt-contact-row__value {
	margin: 0;

	font-size:
		clamp(
			1.25rem,
			1.05rem + 0.45vw,
			1.7rem
		);

	font-weight: 750;
	line-height: 1.35;

	color: var(--dt-text);
}

.dt-contact-row__value a {
	color: var(--dt-red-dark);
	text-decoration: none;
}

.dt-contact-row__value a:hover {
	color: var(--dt-red);
}

.dt-contact-row__note {
	margin: 0.35rem 0 0;

	font-size: 0.93rem;
	line-height: 1.6;

	color: var(--dt-muted);
}

.dt-contact-buttons {
	margin-top: 2rem;
}

/* Visual */

.dt-contact-visual {
	position: relative;

	min-height: 700px;
	overflow: hidden;

	border-radius: 32px;

	background: var(--dt-red-dark);

	box-shadow:
		0 28px 80px
		rgba(86, 39, 20, 0.16);
}

.dt-contact-image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
	margin: 0;
}

.dt-contact-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition:
		transform
		900ms
		var(--dt-ease);
}

.dt-contact-visual::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(50, 8, 10, 0.86) 0%,
			rgba(50, 8, 10, 0.22) 48%,
			rgba(50, 8, 10, 0.02) 75%
		);
}

.dt-contact-visual__caption {
	position: absolute;
	z-index: 2;

	right: clamp(1.7rem, 4vw, 3.5rem);
	bottom: clamp(1.7rem, 4vw, 3.5rem);
	left: clamp(1.7rem, 4vw, 3.5rem);

	color: #fff8ec;
}

.dt-contact-visual__eyebrow {
	margin: 0 0 0.8rem;

	font-size: 0.7rem;
	font-weight: 800;

	letter-spacing: 0.17em;
	text-transform: uppercase;

	color: var(--dt-gold);
}

.dt-contact-visual__caption h3 {
	max-width: 520px;
	margin: 0 0 0.8rem;

	font-size:
		clamp(
			2rem,
			4vw,
			3.7rem
		);

	line-height: 1;
	letter-spacing: -0.05em;

	color: #fff8ec;
}

.dt-contact-visual__caption p:last-child {
	max-width: 560px;
	margin: 0;

	line-height: 1.7;

	color:
		rgba(
			255,
			248,
			236,
			0.78
		);
}

@media (hover: hover) {
	.dt-contact-visual:hover
		.dt-contact-image img {
		transform: scale(1.035);
	}
}

/* Bottom CTA */

.dt-contact-bottom {
	padding:
		0
		0
		clamp(4rem, 8vw, 7rem);
}

.dt-contact-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 2rem;

	padding:
		clamp(
			2.25rem,
			4vw,
			4rem
		);

	border-radius: 30px;

	background:
		linear-gradient(
			135deg,
			var(--dt-red-dark),
			#7e1519
		);

	box-shadow:
		0 24px 70px
		rgba(100, 19, 22, 0.18);
}

.dt-contact-bottom__copy {
	max-width: 760px;
}

.dt-contact-bottom__copy .dt-eyebrow {
	color: var(--dt-gold);
}

.dt-contact-bottom__copy h2 {
	margin: 0.7rem 0 0.8rem;

	font-size:
		clamp(
			2rem,
			4vw,
			3.8rem
		);

	line-height: 1;
	letter-spacing: -0.05em;

	color: #fff8ec;
}

.dt-contact-bottom__copy p:last-child {
	margin: 0;

	line-height: 1.7;

	color:
		rgba(
			255,
			248,
			236,
			0.72
		);
}

.dt-contact-bottom__actions {
	flex: 0 0 auto;
}

/* Buttons inside dark CTA */

.dt-contact-bottom
	.dt-button-secondary
	.wp-block-button__link {
	border-color:
		rgba(
			255,
			248,
			236,
			0.45
		);

	color: #fff8ec;
}

.dt-contact-bottom
	.dt-button-secondary
	.wp-block-button__link:hover {
	border-color: var(--dt-gold);
	color: var(--dt-red-dark);
	background: var(--dt-gold);
}

/* Responsive */

@media (max-width: 1023px) {
	.dt-contact-layout {
		grid-template-columns: 1fr;
	}

	.dt-contact-visual {
		min-height: 600px;
	}

	.dt-contact-bottom__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.dt-contact-bottom__actions {
		flex: none;
	}
}

@media (max-width: 767px) {
	.dt-contact-hero {
		padding:
			4.25rem
			0
			3.5rem;
	}

	.dt-contact-title {
		font-size:
			clamp(
				2.8rem,
				14vw,
				4.5rem
			);
	}

	.dt-contact-main {
		padding:
			3rem
			0
			4rem;
	}

	.dt-contact-panel {
		padding: 1.5rem;
		border-radius: 24px;
	}

	.dt-contact-row {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 0.85rem;
	}

	.dt-contact-row__icon {
		width: 44px;
		height: 44px;
		border-radius: 14px;
	}

	.dt-contact-visual {
		min-height: 520px;
		border-radius: 24px;
	}

	.dt-contact-bottom__inner {
		padding: 1.7rem;
		border-radius: 24px;
	}

	.dt-contact-buttons,
	.dt-contact-bottom__actions {
		width: 100%;
	}

	.dt-contact-buttons
		.wp-block-button,
	.dt-contact-bottom__actions
		.wp-block-button {
		flex: 1 1 auto;
	}

	.dt-contact-buttons
		.wp-block-button__link,
	.dt-contact-bottom__actions
		.wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.dt-contact-visual {
		min-height: 460px;
	}

	.dt-contact-row {
		padding: 1.25rem 0;
	}

	.dt-contact-buttons,
	.dt-contact-bottom__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* =========================================================
   Final contact page width — escape Gutenberg constraints
   ========================================================= */

/*
 * Important:
 * 100% only measures the narrow Gutenberg parent.
 * 100vw measures the actual browser viewport, allowing these
 * sections to break out of the WordPress content-size wrapper.
 */

.dt-contact-page {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: var(--dt-cream);
}

.dt-contact-page > .alignfull,
.dt-contact-hero,
.dt-contact-main,
.dt-contact-bottom {
	position: relative;
	left: 50%;

	width: 100vw !important;
	max-width: none !important;

	margin-right: 0 !important;
	margin-left: 0 !important;

	transform: translateX(-50%);
}

/* Main reusable contact container */
.dt-contact-page .dt-contact-container {
	position: relative;
	left: auto;

	width: min(calc(100vw - 80px), 1440px) !important;
	max-width: 1440px !important;

	margin-right: auto !important;
	margin-left: auto !important;
	padding-right: 0 !important;
	padding-left: 0 !important;

	transform: none;
}

/* Remove Gutenberg limits from children within our custom layout */
.dt-contact-page .is-layout-constrained > *,
.dt-contact-page .wp-block-group-is-layout-constrained > * {
	max-width: none;
}

/* =========================================================
   Contact hero
   ========================================================= */

.dt-contact-hero {
	padding:
		clamp(4.5rem, 7vw, 7rem)
		0
		clamp(3.5rem, 5vw, 5rem);
}

.dt-contact-hero .dt-contact-container {
	width: min(calc(100vw - 80px), 1080px) !important;
	max-width: 1080px !important;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.dt-contact-title {
	width: 100%;
	max-width: 940px !important;

	margin-right: auto;
	margin-left: auto;

	font-size: clamp(3.6rem, 6vw, 6.8rem);
	line-height: 0.94;
}

.dt-contact-lead {
	max-width: 760px !important;
	margin-right: auto;
	margin-left: auto;
}

/* =========================================================
   Main two-column contact layout
   ========================================================= */

.dt-contact-main {
	padding:
		clamp(4rem, 7vw, 7rem)
		0;
}

.dt-contact-layout {
	width: min(calc(100vw - 80px), 1440px) !important;
	max-width: 1440px !important;

	display: grid !important;
	grid-template-columns:
		minmax(0, 0.88fr)
		minmax(0, 1.12fr);

	align-items: stretch;
	gap: clamp(2rem, 4vw, 4rem);
}

/* Override WordPress block margins inside the grid */
.dt-contact-layout > * {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.dt-contact-panel {
	min-width: 0;
	padding: clamp(2.5rem, 4vw, 4.25rem);
	border-radius: 32px;
}

.dt-contact-visual {
	min-width: 0;
	min-height: 680px;
	border-radius: 32px;
}

.dt-contact-visual .wp-block-image,
.dt-contact-image {
	width: 100% !important;
	max-width: none !important;
	height: 100%;
	margin: 0 !important;
}

/* =========================================================
   Bottom CTA
   ========================================================= */

.dt-contact-bottom {
	padding:
		0
		0
		clamp(4.5rem, 7vw, 7rem);
}

.dt-contact-bottom__inner {
	width: min(calc(100vw - 80px), 1440px) !important;
	max-width: 1440px !important;

	display: grid !important;
	grid-template-columns:
		minmax(0, 1fr)
		auto;

	align-items: center;
	gap: clamp(2rem, 5vw, 6rem);

	padding: clamp(2.75rem, 5vw, 4.75rem);
}

.dt-contact-bottom__inner > * {
	max-width: none !important;
	margin: 0 !important;
}

.dt-contact-bottom__copy {
	max-width: 760px !important;
}

.dt-contact-bottom__actions {
	justify-content: flex-end;
	flex-wrap: nowrap;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
	.dt-contact-page .dt-contact-container,
	.dt-contact-layout,
	.dt-contact-bottom__inner {
		width: min(calc(100vw - 48px), 980px) !important;
	}

	.dt-contact-hero .dt-contact-container {
		width: min(calc(100vw - 48px), 900px) !important;
	}

	.dt-contact-layout {
		grid-template-columns:
			minmax(0, 0.95fr)
			minmax(0, 1.05fr);

		gap: 1.75rem;
	}

	.dt-contact-panel {
		padding: 2rem;
	}

	.dt-contact-visual {
		min-height: 600px;
	}

	.dt-contact-bottom__inner {
		grid-template-columns: 1fr;
	}

	.dt-contact-bottom__actions {
		justify-content: flex-start;
	}
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 782px) {
	.dt-contact-page .dt-contact-container,
	.dt-contact-layout,
	.dt-contact-bottom__inner {
		width: calc(100vw - 28px) !important;
	}

	.dt-contact-hero .dt-contact-container {
		width: calc(100vw - 28px) !important;
	}

	.dt-contact-hero {
		padding:
			3.75rem
			0
			3rem;
	}

	.dt-contact-title {
		font-size: clamp(2.8rem, 13vw, 4.5rem);
	}

	.dt-contact-main {
		padding:
			3rem
			0
			4rem;
	}

	.dt-contact-layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.dt-contact-panel {
		padding: 1.5rem;
		border-radius: 24px;
	}

	.dt-contact-visual {
		min-height: 520px;
		border-radius: 24px;
	}

	.dt-contact-bottom__inner {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		padding: 1.75rem;
		border-radius: 24px;
	}

	.dt-contact-bottom__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.dt-contact-bottom__actions .wp-block-button,
	.dt-contact-bottom__actions .wp-block-button__link {
		width: 100%;
	}
}

/* =========================================================
   Contact page — compact section spacing
   ========================================================= */

.dt-contact-main {
	padding-top: clamp(0rem, 0vw, 0rem) !important;
	padding-bottom: clamp(1rem, 1vw, 1rem) !important;
}

.dt-contact-bottom {
	padding-top: 0 !important;
	padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}

/* Reduce spacing between contact grid and CTA */
.dt-contact-layout {
	margin-bottom: 0 !important;
}

.dt-contact-bottom__inner {
	margin-top: 0 !important;
}

/* Remove Gutenberg default block spacing */
.dt-contact-page > *,
.dt-contact-main > *,
.dt-contact-bottom > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Keep only a controlled gap between sections */
.dt-contact-main + .dt-contact-bottom {
	margin-top: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}

/* Reduce gap before footer */
.dt-contact-bottom + .dt-footer,
.dt-contact-page + .dt-footer {
	margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 1023px) {
	.dt-contact-main {
		padding-top: 2.5rem !important;
		padding-bottom: 2rem !important;
	}

	.dt-contact-main + .dt-contact-bottom {
		margin-top: 1.5rem !important;
	}
}

/* Mobile */
@media (max-width: 782px) {
	.dt-contact-main {
		padding-top: 0rem !important;
		padding-bottom: 1.5rem !important;
	}

	.dt-contact-bottom {
		padding-bottom: 2.5rem !important;
	}

	.dt-contact-main + .dt-contact-bottom {
		margin-top: 1rem !important;
	}
}

/* =========================================================
   CONTACT PAGE — FINAL OVERRIDES
   Keep this block at the very end of main.css
   ========================================================= */

/* Contact information card buttons */
.dt-contact-page .dt-contact-buttons {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	margin: 2rem 0 0 !important;
}

.dt-contact-page .dt-contact-buttons > .wp-block-button {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

/* Compact spacing between contact section and CTA */
.dt-contact-page .dt-contact-main {
	padding-top: 0 !important;
	padding-bottom: 1.5rem !important;
}

.dt-contact-page .dt-contact-layout {
	margin-bottom: 0 !important;
}

.dt-contact-page .dt-contact-bottom {
	width: 100vw !important;
	margin: 0 !important;
	padding: 0 0 clamp(2.5rem, 4vw, 4rem) !important;
}

/* Bottom CTA card */
.dt-contact-page .dt-contact-bottom__inner {
	width: min(calc(100vw - 80px), 1440px) !important;
	max-width: 1440px !important;
	min-height: auto !important;

	display: grid !important;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(360px, 440px) !important;

	align-items: center !important;
	gap: clamp(2.5rem, 5vw, 6rem) !important;

	margin: 0 auto !important;

	padding:
		clamp(3rem, 4.5vw, 4.5rem)
		clamp(3rem, 5vw, 5.5rem) !important;

	border-radius: 30px !important;
}

/* CTA copy */
.dt-contact-page .dt-contact-bottom__copy {
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dt-contact-page .dt-contact-bottom__copy .dt-eyebrow {
	margin: 0 0 0.9rem !important;
}

.dt-contact-page .dt-contact-bottom__copy h2 {
	max-width: 720px !important;
	margin: 0 0 1rem !important;

	font-size:
		clamp(
			2.6rem,
			3.8vw,
			4.25rem
		) !important;

	line-height: 0.98 !important;
	letter-spacing: -0.055em !important;
	text-wrap: balance;
}

.dt-contact-page .dt-contact-bottom__copy p:last-child {
	max-width: 680px !important;
	margin: 0 !important;

	font-size:
		clamp(
			1rem,
			0.95rem + 0.2vw,
			1.15rem
		) !important;

	line-height: 1.6 !important;
}

/* CTA buttons */
.dt-contact-page .dt-contact-bottom__actions {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	margin: 0 !important;
}

.dt-contact-page
	.dt-contact-bottom__actions
	> .wp-block-button {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.dt-contact-page
	.dt-contact-bottom__actions
	.wp-block-button__link {
	min-width: 180px !important;
	padding-right: 1.6rem !important;
	padding-left: 1.6rem !important;
	white-space: nowrap !important;
}

/* Contact details emphasis */
.dt-contact-page .dt-contact-row__value {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
}

.dt-contact-page .dt-contact-hotlines {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;

	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.35rem);
	color: var(--dt-red-dark);
}

.dt-contact-page .dt-contact-hotlines a {
	color: inherit;
	text-decoration: none;
}

.dt-contact-page .dt-contact-hotlines__separator {
	color: var(--dt-gold-dark);
	font-weight: 500;
}

.dt-contact-page .dt-working-hours__day {
	margin: 0 0 0.4rem;
}

.dt-contact-page .dt-working-hours__time {
	margin: 0.2rem 0 0;
	line-height: 1.5;
	color: var(--dt-text-muted);
}

.dt-contact-page
	.dt-working-hours__item
	+ .dt-working-hours__item {
	margin-top: 1rem;
}

/* Medium screens: keep CTA in two columns */
@media (max-width: 1050px) {
	.dt-contact-page .dt-contact-bottom__inner {
		width: min(calc(100vw - 48px), 960px) !important;

		grid-template-columns:
			minmax(0, 1fr)
			minmax(300px, 360px) !important;

		gap: 2.5rem !important;

		padding:
			3rem
			2.75rem !important;
	}

	.dt-contact-page .dt-contact-bottom__copy h2 {
		font-size:
			clamp(
				2.4rem,
				4.2vw,
				3.5rem
			) !important;
	}
}

/* Tablet */
@media (max-width: 820px) {
	.dt-contact-page .dt-contact-bottom__inner {
		width: calc(100vw - 32px) !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;

		gap: 2rem !important;

		padding:
			2.5rem
			2rem !important;

		text-align: center !important;
	}

	.dt-contact-page .dt-contact-bottom__copy {
		max-width: 650px !important;
	}

	.dt-contact-page .dt-contact-bottom__copy .dt-eyebrow,
	.dt-contact-page .dt-contact-bottom__copy h2,
	.dt-contact-page .dt-contact-bottom__copy p {
		text-align: center !important;
	}

	.dt-contact-page .dt-contact-bottom__actions {
		justify-content: center !important;
	}
}

/* Mobile */
@media (max-width: 560px) {
	.dt-contact-page .dt-contact-main {
		padding-bottom: 1.25rem !important;
	}

	.dt-contact-page .dt-contact-bottom {
		padding-bottom: 2rem !important;
	}

	.dt-contact-page .dt-contact-bottom__inner {
		width: calc(100vw - 24px) !important;

		padding:
			2rem
			1.4rem !important;

		border-radius: 24px !important;
	}

	.dt-contact-page .dt-contact-bottom__copy h2 {
		font-size:
			clamp(
				2.15rem,
				11vw,
				3.15rem
			) !important;
	}

	.dt-contact-page .dt-contact-buttons,
	.dt-contact-page .dt-contact-bottom__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.dt-contact-page
		.dt-contact-buttons
		.wp-block-button,
	.dt-contact-page
		.dt-contact-buttons
		.wp-block-button__link,
	.dt-contact-page
		.dt-contact-bottom__actions
		.wp-block-button,
	.dt-contact-page
		.dt-contact-bottom__actions
		.wp-block-button__link {
		width: 100% !important;
	}

	.dt-contact-page .dt-contact-hotlines {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.2rem;
	}

	.dt-contact-page .dt-contact-hotlines__separator {
		display: none;
	}
}

/* =========================================================

/* =========================================================
   ABOUT PAGE — FINAL CLEAN DESIGN V3
   ========================================================= */

.dt-about-page {
	--dt-about-width: 1280px;

	position: relative;
	left: 50%;

	width: 100vw;
	max-width: none;
	margin: 0;
	transform: translateX(-50%);

	overflow-x: hidden;
	background: var(--dt-cream);
	color: var(--dt-text);
}

.dt-about-page > .alignfull,
.dt-about-page > .dt-about-hero,
.dt-about-page > .dt-about-story,
.dt-about-page > .dt-about-direction,
.dt-about-page > .dt-about-values,
.dt-about-page > .dt-about-cta {
	position: relative;
	left: auto;

	width: 100%;
	max-width: none;
	margin: 0;
	transform: none;
}

.dt-about-page,
.dt-about-page > *,
.dt-about-page .wp-block-group {
	--wp--style--block-gap: 0;
}

.dt-about-container {
	width: min(calc(100% - 64px), var(--dt-about-width)) !important;
	max-width: var(--dt-about-width) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}

.dt-about-page .is-layout-constrained > *,
.dt-about-page .wp-block-group-is-layout-constrained > * {
	max-width: none;
}

/* Shared typography */
.dt-about-section-heading {
	max-width: 900px;
	margin: 0 auto clamp(2.25rem, 3.8vw, 3.5rem);
	text-align: center;
}

.dt-about-section-title {
	margin: 0;
	font-size: clamp(2.55rem, 4vw, 4.35rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-about-section-description {
	max-width: 730px;
	margin: 1rem auto 0;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.16rem);
	line-height: 1.72;
	color: var(--dt-text-muted);
}

/* =========================================================
   Hero
   ========================================================= */

.dt-about-hero {
	padding-block: clamp(3.5rem, 5.5vw, 5.25rem);

	background:
		radial-gradient(
			circle at 12% 26%,
			rgba(213, 164, 49, 0.17),
			transparent 34%
		),
		radial-gradient(
			circle at 88% 40%,
			rgba(159, 29, 32, 0.09),
			transparent 36%
		),
		linear-gradient(
			135deg,
			#fff6dc 0%,
			#fffaf1 54%,
			#f6e1da 100%
		);
}

.dt-about-hero__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	align-items: center;
	gap: clamp(3rem, 5vw, 5rem);
}

.dt-about-hero__inner > * {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-about-hero__copy {
	max-width: 610px !important;
}

.dt-about-hero__title {
	max-width: 12.5ch !important;
	margin: 0.7rem 0 1.25rem !important;

	font-size: clamp(3.15rem, 4.65vw, 5.15rem) !important;
	font-weight: 650 !important;
	line-height: 1.03 !important;
	letter-spacing: -0.038em !important;

	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-about-hero__title span {
	display: block;
	margin-top: 0.05em;
	font-weight: 650;
	color: var(--dt-gold-dark);
}

.dt-about-hero__description {
	max-width: 55ch;
	margin: 0;

	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.18rem);
	line-height: 1.72;
	color: var(--dt-text-muted);
}

.dt-about-hero__actions {
	gap: 0.9rem;
	margin-top: 1.6rem;
}

.dt-about-hero__image {
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 27px;
	box-shadow: 0 24px 52px rgba(76, 42, 24, 0.11);
}

.dt-about-hero__image img {
	display: block;
	width: 100%;
	height: clamp(470px, 39vw, 610px);
	object-fit: cover;
	object-position: center;
	transition: transform 750ms var(--dt-ease);
}

@media (hover: hover) {
	.dt-about-hero__visual:hover .dt-about-hero__image img {
		transform: scale(1.025);
	}
}

/* =========================================================
   Brand story
   ========================================================= */

.dt-about-story {
	padding-block: clamp(3.75rem, 5.5vw, 5.25rem);
	background: rgba(255, 255, 255, 0.5);
}

.dt-about-story__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	align-items: center;
	gap: clamp(3rem, 5.5vw, 5.5rem);
}

.dt-about-story__inner > * {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-about-story__visual {
	position: relative;
	max-width: 520px !important;
}

/* Remove the decorative frame around the image */
.dt-about-story__visual::before,
.dt-about-story__visual::after {
	content: none !important;
	display: none !important;
}

.dt-about-story__image {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;

	border: 0 !important;
	border-radius: 25px;
	background: transparent !important;
	box-shadow: 0 20px 44px rgba(76, 42, 24, 0.09);
}

.dt-about-story__image::before,
.dt-about-story__image::after {
	content: none !important;
	display: none !important;
}

.dt-about-story__image img {
	display: block;
	width: 100%;
	height: clamp(410px, 34vw, 530px);
	object-fit: cover;
	object-position: center;
	border: 0;
	border-radius: inherit;
}

.dt-about-story__content {
	max-width: 610px !important;
}

.dt-about-story__content .dt-about-section-title {
	margin-top: 0.8rem;
}

.dt-about-story__lead {
	margin: 1.35rem 0 0.8rem;
	font-size: clamp(1.15rem, 1.05rem + 0.25vw, 1.42rem);
	font-weight: 650;
	line-height: 1.55;
	color: var(--dt-red-dark);
}

.dt-about-story__content > p:not(.dt-eyebrow):not(.dt-about-story__lead) {
	margin: 0.85rem 0 0;
	font-size: 1.02rem;
	line-height: 1.8;
	color: var(--dt-text-muted);
}

/* =========================================================
   Product direction
   ========================================================= */

.dt-about-direction {
	padding-block: clamp(3.9rem, 5.8vw, 5.4rem);
	background: linear-gradient(180deg, #fffaf0 0%, #fffdf8 100%);
}

.dt-about-product-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.45rem);
}

.dt-about-product-grid > * {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-about-product-card {
	position: relative;
	min-height: 440px !important;
	overflow: hidden;

	border-radius: 24px;
	background: #d8c0a7;
	box-shadow: 0 17px 36px rgba(65, 33, 18, 0.09);
	isolation: isolate;

	transition:
		transform 330ms var(--dt-ease),
		box-shadow 330ms var(--dt-ease);
}

.dt-about-product-card__image {
	position: absolute;
	z-index: 0;
	inset: 0;

	width: 100% !important;
	height: 100% !important;
	min-height: 440px !important;
	margin: 0 !important;
}

.dt-about-product-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 750ms var(--dt-ease);
}

/* Show more of the tall incense sticks in the first card */
.dt-about-product-card:first-child .dt-about-product-card__image img {
	object-position: center 20%;
}

.dt-about-product-card::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(40, 8, 8, 0.94) 0%,
			rgba(40, 8, 8, 0.78) 30%,
			rgba(40, 8, 8, 0.28) 60%,
			rgba(40, 8, 8, 0.02) 84%
		);

	pointer-events: none;
}

.dt-about-product-card__overlay {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;

	padding: clamp(1.45rem, 2.4vw, 2rem);
	color: #fffaf1;
	text-shadow: 0 2px 12px rgba(25, 5, 4, 0.5);
}

.dt-about-product-card__eyebrow {
	margin: 0 0 0.55rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dt-gold-light) !important;
}

.dt-about-product-card h3 {
	margin: 0;
	font-size: clamp(2rem, 2.7vw, 2.75rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: #ffffff !important;
}

.dt-about-product-card__overlay > p:not(.dt-about-product-card__eyebrow) {
	margin: 0.75rem 0 0.9rem;
	font-size: 0.98rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92) !important;
}

.dt-about-product-card__overlay a {
	font-weight: 750;
	color: #ffffff !important;
	text-decoration: none;
}

@media (hover: hover) {
	.dt-about-product-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 27px 48px rgba(65, 33, 18, 0.14);
	}

	.dt-about-product-card:hover .dt-about-product-card__image img {
		transform: scale(1.045);
	}

	.dt-about-product-card__overlay a:hover {
		color: var(--dt-gold-light) !important;
	}
}

/* =========================================================
   Values
   ========================================================= */

.dt-about-values {
	padding-block: clamp(3.9rem, 5.8vw, 5.4rem);
	background: rgba(255, 255, 255, 0.45);
}

.dt-about-values-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.95rem, 1.5vw, 1.25rem);
}

.dt-about-values-grid > * {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-about-value-card {
	position: relative;
	min-height: 235px;
	padding: clamp(1.45rem, 2vw, 1.8rem);
	overflow: hidden;

	border: 1px solid rgba(104, 19, 23, 0.09);
	border-radius: 22px;
	background:
		linear-gradient(
			145deg,
			rgba(255, 250, 239, 0.99),
			rgba(250, 234, 217, 0.76)
		);
	box-shadow: 0 12px 28px rgba(70, 32, 17, 0.06);
}

.dt-about-value-card::before {
	content: "";
	position: absolute;
	top: -72px;
	right: -72px;

	width: 145px;
	height: 145px;
	border-radius: 50%;
	background: rgba(219, 168, 33, 0.11);
}

.dt-about-value-card__number {
	margin: 0 0 clamp(2.7rem, 4vw, 3.8rem);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--dt-gold-dark);
}

.dt-about-value-card h3 {
	margin: 0 0 0.7rem;
	font-size: clamp(1.25rem, 1.08rem + 0.35vw, 1.55rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--dt-red-dark);
}

.dt-about-value-card p:last-child {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--dt-text-muted);
}

/* =========================================================
   CTA
   ========================================================= */

.dt-about-cta {
	padding-block: clamp(2.7rem, 4.5vw, 4rem);
	background:
		linear-gradient(
			135deg,
			#fff0bf,
			#fff9ed 55%,
			#f4ddd5
		);
}

.dt-about-cta__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);

	width: 100% !important;
	padding: clamp(2.1rem, 3.5vw, 2.9rem);

	border: 1px solid rgba(104, 19, 23, 0.08);
	border-radius: 25px;
	background: rgba(255, 250, 239, 0.86);
	box-shadow: 0 18px 42px rgba(79, 38, 18, 0.08);
}

.dt-about-cta__inner > * {
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-about-cta__copy {
	max-width: 720px !important;
}

.dt-about-cta__copy h2 {
	max-width: 14ch;
	margin: 0.75rem 0 0.85rem;

	font-size: clamp(2.35rem, 3.5vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-about-cta__copy p:last-child {
	max-width: 660px;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--dt-text-muted);
}

.dt-about-cta__actions {
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0.9rem;
}

/* =========================================================
   Scroll reveal
   ========================================================= */

html.js .dt-reveal,
html.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition:
		opacity 720ms var(--dt-ease),
		transform 720ms var(--dt-ease);
	will-change: opacity, transform;
}

html.js .dt-reveal.is-visible,
html.js [data-reveal].is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

html.js .dt-about-product-card:nth-child(2),
html.js .dt-about-value-card:nth-child(2) {
	transition-delay: 90ms;
}

html.js .dt-about-product-card:nth-child(3),
html.js .dt-about-value-card:nth-child(3) {
	transition-delay: 180ms;
}

html.js .dt-about-value-card:nth-child(4) {
	transition-delay: 270ms;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1180px) {
	.dt-about-container {
		width: min(calc(100% - 44px), 1080px) !important;
	}

	.dt-about-values-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dt-about-cta__inner {
		grid-template-columns: 1fr;
	}

	.dt-about-cta__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 900px) {
	.dt-about-hero__inner,
	.dt-about-story__inner {
		grid-template-columns: 1fr;
	}

	.dt-about-hero__copy {
		max-width: 730px !important;
	}

	.dt-about-hero__title {
		max-width: 13ch !important;
		font-size: clamp(3rem, 7vw, 4.7rem) !important;
	}

	.dt-about-story__content {
		order: 1;
	}

	.dt-about-story__visual {
		order: 2;
		margin-inline: auto !important;
	}

	.dt-about-product-grid {
		grid-template-columns: 1fr;
	}

	.dt-about-product-card {
		min-height: 500px !important;
	}

	.dt-about-product-card__image {
		min-height: 500px !important;
	}
}

@media (max-width: 782px) {
	.dt-about-container {
		width: calc(100% - 26px) !important;
	}

	.dt-about-hero,
	.dt-about-story,
	.dt-about-direction,
	.dt-about-values {
		padding-block: 3.3rem;
	}

	.dt-about-hero__title {
		max-width: 12.5ch !important;
		font-size: clamp(2.65rem, 11vw, 3.8rem) !important;
		line-height: 1.04 !important;
	}

	.dt-about-hero__image img,
	.dt-about-story__image img {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.dt-about-values-grid {
		grid-template-columns: 1fr;
	}

	.dt-about-value-card {
		min-height: auto;
	}

	.dt-about-cta {
		padding-block: 2.25rem;
	}

	.dt-about-cta__inner {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		padding: 1.55rem;
	}

	.dt-about-cta__actions {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 520px) {
	.dt-about-hero__actions,
	.dt-about-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dt-about-hero__actions .wp-block-button,
	.dt-about-hero__actions .wp-block-button__link,
	.dt-about-cta__actions .wp-block-button,
	.dt-about-cta__actions .wp-block-button__link {
		width: 100%;
	}

	.dt-about-product-card,
	.dt-about-product-card__image {
		min-height: 445px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.js .dt-reveal,
	html.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =========================================================
   ABOUT CTA — COMPACT & BALANCED
   ========================================================= */

.dt-about-cta {
	padding:
		clamp(2.25rem, 3.5vw, 3.25rem)
		0 !important;
}

.dt-about-cta__inner {
	width: min(calc(100% - 64px), 1280px) !important;
	max-width: 1280px !important;

	display: grid !important;
	grid-template-columns:
		minmax(0, 1fr)
		auto !important;

	align-items: center !important;

	gap: clamp(2rem, 4vw, 4rem) !important;

	margin:
		0
		auto !important;

	padding:
		clamp(2rem, 3vw, 2.75rem)
		clamp(2rem, 3.5vw, 3.25rem) !important;

	min-height: 0 !important;

	border-radius: 26px !important;
}

.dt-about-cta__copy {
	width: 100% !important;
	max-width: 720px !important;
}

.dt-about-cta__copy .dt-eyebrow {
	margin:
		0
		0
		0.65rem !important;
}

.dt-about-cta__copy h2 {
	max-width: 13ch !important;

	margin:
		0
		0
		0.7rem !important;

	font-size:
		clamp(
			2.35rem,
			3.3vw,
			3.6rem
		) !important;

	font-weight: 680 !important;
	line-height: 1 !important;
	letter-spacing: -0.045em !important;

	text-wrap: balance;
}

.dt-about-cta__copy p:last-child {
	max-width: 650px !important;

	margin: 0 !important;

	font-size:
		clamp(
			0.98rem,
			0.94rem + 0.15vw,
			1.08rem
		) !important;

	line-height: 1.6 !important;
}

.dt-about-cta__actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex-wrap: nowrap !important;

	gap: 0.85rem !important;
	margin: 0 !important;
}

.dt-about-cta__actions .wp-block-button {
	margin: 0 !important;
}

.dt-about-cta__actions .wp-block-button__link {
	min-width: 165px !important;

	padding:
		0.9rem
		1.35rem !important;

	font-size: 1rem !important;
	white-space: nowrap !important;
}


/* Tablet */
@media (max-width: 900px) {
	.dt-about-cta__inner {
		grid-template-columns: 1fr !important;
		gap: 1.6rem !important;
	}

	.dt-about-cta__actions {
		justify-content: flex-start !important;
	}
}


/* Mobile */
@media (max-width: 600px) {
	.dt-about-cta {
		padding:
			1.75rem
			0 !important;
	}

	.dt-about-cta__inner {
		width: calc(100% - 24px) !important;

		padding:
			1.65rem
			1.35rem !important;

		border-radius: 22px !important;
	}

	.dt-about-cta__copy h2 {
		max-width: none !important;

		font-size:
			clamp(
				2rem,
				10vw,
				2.8rem
			) !important;
	}

	.dt-about-cta__actions {
		width: 100% !important;

		flex-direction: column !important;
		align-items: stretch !important;
	}

	.dt-about-cta__actions .wp-block-button,
	.dt-about-cta__actions .wp-block-button__link {
		width: 100% !important;
	}
}

/* =========================================================
   ABOUT PAGE — REDUCE VERTICAL SPACING
   ========================================================= */

/* Giảm khoảng trống đầu trang */
.dt-about-hero {
	padding-top: 2.5rem !important;
	padding-bottom: 3rem !important;
}

/* Giảm khoảng trống giữa Hero và Story */
.dt-about-story {
	padding-top: 2.75rem !important;
	padding-bottom: 3rem !important;
}

/* Giảm khoảng trống quanh phần sản phẩm */
.dt-about-direction {
	padding-top: 2.75rem !important;
	padding-bottom: 3rem !important;
}

/* Giảm khoảng trống quanh phần giá trị */
.dt-about-values {
	padding-top: 2.75rem !important;
	padding-bottom: 3rem !important;
}

/* Giảm khoảng trống phần CTA cuối */
.dt-about-cta {
	padding-top: 2rem !important;
	padding-bottom: 2.5rem !important;
}

/* Giảm khoảng cách giữa title section và nội dung bên dưới */
.dt-about-section-heading {
	margin-bottom: 2rem !important;
}

/* Hero: giảm khoảng cách nội bộ */
.dt-about-hero__title {
	margin-bottom: 0.9rem !important;
}

.dt-about-hero__actions {
	margin-top: 1.2rem !important;
}

/* Story: giảm khoảng cách nội bộ */
.dt-about-story__lead {
	margin-top: 1rem !important;
	margin-bottom: 0.65rem !important;
}

.dt-about-story__content > p:not(.dt-eyebrow):not(.dt-about-story__lead) {
	margin-top: 0.65rem !important;
}

/* Product cards: giảm khoảng cách phía trên */
.dt-about-product-grid {
	margin-top: 0 !important;
}

/* Values cards: giảm khoảng cách phía trên */
.dt-about-values-grid {
	margin-top: 0 !important;
}

/* CTA card gọn hơn */
.dt-about-cta__inner {
	padding-top: 1.75rem !important;
	padding-bottom: 1.75rem !important;
}

/* Tablet */
@media (max-width: 900px) {
	.dt-about-hero,
	.dt-about-story,
	.dt-about-direction,
	.dt-about-values {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	.dt-about-section-heading {
		margin-bottom: 1.75rem !important;
	}
}

/* Mobile */
@media (max-width: 782px) {
	.dt-about-hero,
	.dt-about-story,
	.dt-about-direction,
	.dt-about-values {
		padding-top: 1 rem !important;
		padding-bottom: 1 rem !important;
	}

	.dt-about-cta {
		padding-top: 1.5rem !important;
		padding-bottom: 1.75rem !important;
	}

	.dt-about-section-heading {
		margin-bottom: 1.5rem !important;
	}
}

/* =========================================================
   ABOUT HERO — MOBILE/TABLET COMPACT FIX
   Menu mobile của site kích hoạt trước 782px,
   nên dùng breakpoint rộng hơn.
   ========================================================= */

@media (max-width: 960px) {

	/* Giảm khoảng trống ngay dưới header */
	.dt-about-page .dt-about-hero {
		padding-top: 1.75rem !important;
		padding-bottom: 2.5rem !important;
	}

	.dt-about-page .dt-about-hero__inner {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;

		gap: 2.25rem !important;
	}

	/* Không để Gutenberg thêm khoảng trống */
	.dt-about-page .dt-about-hero__copy,
	.dt-about-page .dt-about-hero__visual {
		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.dt-about-page .dt-about-hero__copy {
		text-align: left !important;
	}

	.dt-about-page .dt-about-hero__copy .dt-eyebrow {
		margin:
			0
			0
			1rem !important;
	}

	/* Tiêu đề nhỏ và thoáng hơn */
	.dt-about-page .dt-about-hero__title {
		max-width: 11.5ch !important;

		margin:
			0
			0
			1rem !important;

		font-size:
			clamp(
				2.85rem,
				8.5vw,
				4.25rem
			) !important;

		font-weight: 650 !important;
		line-height: 1.02 !important;
		letter-spacing: -0.04em !important;
	}

	.dt-about-page .dt-about-hero__title span {
		margin-top: 0 !important;
	}

	.dt-about-page .dt-about-hero__description {
		max-width: 38rem !important;

		margin: 0 !important;

		font-size:
			clamp(
				1rem,
				2.3vw,
				1.15rem
			) !important;

		line-height: 1.65 !important;
	}

	/* Nút gọn hơn, chưa chuyển thành full width */
	.dt-about-page .dt-about-hero__actions {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: wrap !important;

		gap: 0.75rem !important;

		margin:
			1.35rem
			0
			0 !important;
	}

	.dt-about-page
		.dt-about-hero__actions
		.wp-block-button {
		width: auto !important;
		flex: 0 0 auto !important;
	}

	.dt-about-page
		.dt-about-hero__actions
		.wp-block-button__link {
		width: auto !important;
		min-width: 132px !important;

		padding:
			0.8rem
			1.25rem !important;
	}

	/* Ảnh không cách nút quá xa */
	.dt-about-page .dt-about-hero__image {
		margin-top: 0 !important;
	}

	.dt-about-page .dt-about-hero__image img {
		width: 100% !important;
		height: auto !important;

		aspect-ratio: 4 / 3 !important;

		object-fit: cover !important;
		object-position: center !important;
	}
}


/* Điện thoại nhỏ */
@media (max-width: 600px) {

	.dt-about-page .dt-about-container {
		width: calc(100% - 24px) !important;
	}

	.dt-about-page .dt-about-hero {
		padding-top: 0rem !important;
		padding-bottom: 2rem !important;
	}

	.dt-about-page .dt-about-hero__inner {
		gap: 1.75rem !important;
	}

	.dt-about-page .dt-about-hero__title {
		max-width: none !important;

		font-size:
			clamp(
				2.55rem,
				11vw,
				3.45rem
			) !important;

		line-height: 1.04 !important;
	}

	.dt-about-page .dt-about-hero__description {
		font-size: 1rem !important;
		line-height: 1.62 !important;
	}

	/* Hai nút full width chỉ trên màn hình nhỏ */
	.dt-about-page .dt-about-hero__actions {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.7rem !important;
	}

	.dt-about-page
		.dt-about-hero__actions
		.wp-block-button,
	.dt-about-page
		.dt-about-hero__actions
		.wp-block-button__link {
		width: 100% !important;
	}

	.dt-about-page
		.dt-about-hero__actions
		.wp-block-button__link {
		min-height: 52px !important;
	}

	.dt-about-page .dt-about-hero__image img {
		aspect-ratio: 4 / 4.5 !important;
	}
}


/* =========================================================
   PRODUCT PAGE — MODERN CATALOG
   ========================================================= */

.dt-products-page {
	--dt-products-width: 1280px;

	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin: 0;
	transform: translateX(-50%);
	overflow-x: hidden;

	background: var(--dt-cream);
	color: var(--dt-text);
}

.dt-products-page,
.dt-products-page > *,
.dt-products-page .wp-block-group {
	--wp--style--block-gap: 0;
}

.dt-products-page > .alignfull,
.dt-products-page > section,
.dt-products-page > .wp-block-group {
	width: 100%;
	max-width: none;
	margin: 0;
}

.dt-products-container {
	width: min(calc(100% - 64px), var(--dt-products-width)) !important;
	max-width: var(--dt-products-width) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}

.dt-products-page .is-layout-constrained > *,
.dt-products-page .wp-block-group-is-layout-constrained > * {
	max-width: none;
}

/* Hero */
.dt-products-hero {
	padding-block: clamp(3.25rem, 5.5vw, 5rem);

	background:
		radial-gradient(circle at 12% 26%, rgba(213, 164, 49, 0.17), transparent 35%),
		radial-gradient(circle at 88% 38%, rgba(159, 29, 32, 0.09), transparent 36%),
		linear-gradient(135deg, #fff5d9 0%, #fffaf1 55%, #f6e1da 100%);
}

.dt-products-hero__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	align-items: center;
	gap: clamp(3rem, 5.5vw, 5.5rem);
}

.dt-products-hero__inner > * {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-products-hero__copy {
	max-width: 640px !important;
}

.dt-products-hero__title {
	max-width: 12ch;
	margin: 0.75rem 0 1.2rem;

	font-size: clamp(3.3rem, 5vw, 5.45rem);
	font-weight: 660;
	line-height: 1;
	letter-spacing: -0.045em;

	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-products-hero__title span {
	display: block;
	color: var(--dt-gold-dark);
}

.dt-products-hero__description {
	max-width: 56ch;
	margin: 0;

	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.18rem);
	line-height: 1.72;
	color: var(--dt-text-muted);
}

.dt-products-hero__actions {
	margin-top: 1.55rem;
	gap: 0.9rem;
}

.dt-products-hero__image {
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;

	border-radius: 28px;
	box-shadow: 0 25px 55px rgba(76, 42, 24, 0.11);
}

.dt-products-hero__image img {
	display: block;
	width: 100%;
	height: clamp(470px, 39vw, 620px);
	object-fit: cover;
	object-position: center;
	transition: transform 750ms var(--dt-ease);
}

@media (hover: hover) {
	.dt-products-hero__visual:hover .dt-products-hero__image img {
		transform: scale(1.025);
	}
}

/* Category navigation */
.dt-products-filter-section {
	position: relative;
	z-index: 5;
	padding: 1.25rem 0;
	background: rgba(255, 253, 248, 0.94);
	border-top: 1px solid rgba(104, 19, 23, 0.06);
	border-bottom: 1px solid rgba(104, 19, 23, 0.07);
	backdrop-filter: blur(14px);
}

.dt-products-filter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-products-filter__button {
	appearance: none;
	border: 1px solid rgba(105, 19, 23, 0.14);
	border-radius: 999px;
	background: #fffaf0;
	color: var(--dt-red-dark);
	padding: 0.72rem 1.15rem;

	font: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;

	transition:
		transform 220ms var(--dt-ease),
		background-color 220ms ease,
		color 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease;
}

.dt-products-filter__button:hover {
	transform: translateY(-2px);
	border-color: rgba(105, 19, 23, 0.3);
}

.dt-products-filter__button.is-active {
	background: var(--dt-red);
	border-color: var(--dt-red);
	color: #fffaf1;
	box-shadow: 0 9px 20px rgba(148, 20, 25, 0.17);
}

/* Intro */
.dt-products-intro {
	padding: clamp(3.7rem, 5.5vw, 5.25rem) 0 clamp(2.4rem, 4vw, 3.5rem);
	text-align: center;
	background: #fffdf8;
}

.dt-products-section-heading {
	max-width: 880px;
	margin: 0 auto;
}

.dt-products-section-heading h2 {
	margin: 0.8rem 0 0;

	font-size: clamp(2.65rem, 4.2vw, 4.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-products-section-heading p:last-child {
	max-width: 720px;
	margin: 1rem auto 0;
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.15rem);
	line-height: 1.7;
	color: var(--dt-text-muted);
}

/* Catalog */
.dt-products-catalog {
	padding: 0 0 clamp(4rem, 7vw, 6rem);
	background: #fffdf8;
}

.dt-products-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.1rem, 2vw, 1.65rem);
}

.dt-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;

	border: 1px solid rgba(104, 19, 23, 0.08);
	border-radius: 24px;
	background: #fffaf0;
	box-shadow: 0 14px 34px rgba(70, 32, 17, 0.07);

	transition:
		transform 320ms var(--dt-ease),
		box-shadow 320ms var(--dt-ease),
		opacity 240ms ease;
}

.dt-product-card[hidden] {
	display: none !important;
}

.dt-product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #ead8c5;
}

.dt-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 700ms var(--dt-ease);
}

.dt-product-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;

	padding: 0.48rem 0.72rem;
	border-radius: 999px;
	background: rgba(255, 249, 235, 0.91);
	color: var(--dt-red-dark);

	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.dt-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(1.35rem, 2vw, 1.75rem);
}

.dt-product-card__title {
	margin: 0;
	font-size: clamp(1.4rem, 1.18rem + 0.45vw, 1.8rem);
	font-weight: 720;
	line-height: 1.13;
	letter-spacing: -0.03em;
	color: var(--dt-red-dark);
}

.dt-product-card__description {
	margin: 0.8rem 0 1.25rem;
	font-size: 0.96rem;
	line-height: 1.62;
	color: var(--dt-text-muted);
}

.dt-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(104, 19, 23, 0.08);
}

.dt-product-card__link {
	color: var(--dt-red);
	font-size: 0.92rem;
	font-weight: 750;
	text-decoration: none;
}

.dt-product-card__arrow {
	flex: 0 0 auto;
	font-size: 1.2rem;
	color: var(--dt-gold-dark);
	transition: transform 220ms var(--dt-ease);
}

@media (hover: hover) {
	.dt-product-card:hover {
		transform: translateY(-7px);
		box-shadow: 0 26px 50px rgba(70, 32, 17, 0.12);
	}

	.dt-product-card:hover .dt-product-card__media img {
		transform: scale(1.045);
	}

	.dt-product-card:hover .dt-product-card__arrow {
		transform: translateX(4px);
	}
}

/* Help section */
.dt-products-guide {
	padding: clamp(4rem, 6.5vw, 6rem) 0;
	background: linear-gradient(135deg, #580f14 0%, #82161c 100%);
	color: #fff9ec;
}

.dt-products-guide__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(3rem, 6vw, 6rem);
}

.dt-products-guide__inner > * {
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-products-guide__visual {
	overflow: hidden;
	border-radius: 27px;
	box-shadow: 0 30px 75px rgba(24, 3, 5, 0.28);
}

.dt-products-guide__visual img {
	display: block;
	width: 100%;
	height: clamp(430px, 38vw, 590px);
	object-fit: cover;
}

.dt-products-guide__copy .dt-eyebrow {
	color: var(--dt-gold-light);
}

.dt-products-guide__copy h2 {
	max-width: 13ch;
	margin: 0.75rem 0 1rem;
	font-size: clamp(2.75rem, 4.3vw, 4.55rem);
	font-weight: 680;
	line-height: 1;
	letter-spacing: -0.045em;
	color: #fff9ec;
	text-wrap: balance;
}

.dt-products-guide__copy > p:not(.dt-eyebrow) {
	max-width: 660px;
	margin: 0;
	font-size: 1.03rem;
	line-height: 1.72;
	color: rgba(255, 249, 236, 0.73);
}

.dt-products-guide-list {
	margin-top: 1.7rem;
}

.dt-products-guide-item {
	display: grid !important;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 1rem;
	padding: 1.15rem 0;
	border-top: 1px solid rgba(255, 249, 236, 0.13);
}

.dt-products-guide-item__number {
	margin: 0;
	padding-top: 0.2rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--dt-gold-light);
}

.dt-products-guide-item h3 {
	margin: 0 0 0.3rem;
	font-size: 1.28rem;
	color: #fff9ec;
}

.dt-products-guide-item p {
	margin: 0;
	line-height: 1.55;
	color: rgba(255, 249, 236, 0.66);
}

/* CTA */
.dt-products-cta {
	padding: clamp(2.6rem, 4.5vw, 4rem) 0;
	background:
		linear-gradient(135deg, #fff0bf 0%, #fff9ed 55%, #f4ddd5 100%);
}

.dt-products-cta__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);

	padding: clamp(2rem, 3.4vw, 2.8rem);
	border: 1px solid rgba(104, 19, 23, 0.08);
	border-radius: 25px;
	background: rgba(255, 250, 239, 0.87);
	box-shadow: 0 18px 42px rgba(79, 38, 18, 0.08);
}

.dt-products-cta__inner > * {
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
}

.dt-products-cta__copy h2 {
	max-width: 15ch;
	margin: 0.75rem 0 0.8rem;
	font-size: clamp(2.3rem, 3.5vw, 3.75rem);
	font-weight: 690;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--dt-red-dark);
	text-wrap: balance;
}

.dt-products-cta__copy p:last-child {
	max-width: 650px;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--dt-text-muted);
}

.dt-products-cta__actions {
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0.9rem;
}

/* Reveal */
html.js .dt-products-page .dt-reveal,
html.js .dt-products-page [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition:
		opacity 700ms var(--dt-ease),
		transform 700ms var(--dt-ease);
	will-change: opacity, transform;
}

html.js .dt-products-page .dt-reveal.is-visible,
html.js .dt-products-page [data-reveal].is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

html.js .dt-products-grid .dt-product-card:nth-child(3n + 2) {
	transition-delay: 70ms;
}

html.js .dt-products-grid .dt-product-card:nth-child(3n + 3) {
	transition-delay: 140ms;
}

/* Responsive */
@media (max-width: 1080px) {
	.dt-products-container {
		width: min(calc(100% - 44px), 1000px) !important;
	}

	.dt-products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dt-products-guide__inner {
		grid-template-columns: 1fr;
	}

	.dt-products-guide__visual {
		max-width: 720px !important;
	}

	.dt-products-cta__inner {
		grid-template-columns: 1fr;
	}

	.dt-products-cta__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 900px) {
	.dt-products-hero__inner {
		grid-template-columns: 1fr;
	}

	.dt-products-hero__copy {
		max-width: 730px !important;
	}

	.dt-products-hero__title {
		max-width: 13ch;
		font-size: clamp(3rem, 7vw, 4.7rem);
	}

	.dt-products-hero__image img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 782px) {
	.dt-products-container {
		width: calc(100% - 26px) !important;
	}

	.dt-products-hero {
		padding-block: 2.4rem;
	}

	.dt-products-hero__title {
		max-width: none;
		font-size: clamp(2.55rem, 10.5vw, 3.65rem);
		line-height: 1.04;
	}

	.dt-products-filter-section {
		padding-block: 0.85rem;
	}

	.dt-products-filter {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0 0.15rem 0.3rem;
		scrollbar-width: none;
	}

	.dt-products-filter::-webkit-scrollbar {
		display: none;
	}

	.dt-products-filter__button {
		flex: 0 0 auto;
	}

	.dt-products-intro {
		padding-top: 3rem;
	}

	.dt-products-grid {
		grid-template-columns: 1fr;
	}

	.dt-product-card__media {
		aspect-ratio: 4 / 3.2;
	}

	.dt-products-guide,
	.dt-products-cta {
		padding-block: 2.6rem;
	}

	.dt-products-guide__visual img {
		height: auto;
		aspect-ratio: 4 / 3.3;
	}

	.dt-products-cta__inner {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		padding: 1.55rem;
	}

	.dt-products-cta__actions {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 520px) {
	.dt-products-hero__actions,
	.dt-products-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dt-products-hero__actions .wp-block-button,
	.dt-products-hero__actions .wp-block-button__link,
	.dt-products-cta__actions .wp-block-button,
	.dt-products-cta__actions .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.js .dt-products-page .dt-reveal,
	html.js .dt-products-page [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Product page CTA — compact */
.dt-products-cta {
	padding-top: 2rem !important;
	padding-bottom: 2.5rem !important;
}

.dt-products-cta__inner {
	grid-template-columns: minmax(0, 1fr) auto !important;
	gap: 2rem !important;

	padding: 1.75rem 2rem !important;
	border-radius: 22px !important;
}

.dt-products-cta__copy h2 {
	max-width: 15ch !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.6rem !important;

	font-size: clamp(2rem, 3vw, 3.2rem) !important;
	line-height: 1.02 !important;
}

.dt-products-cta__copy p:last-child {
	margin: 0 !important;
	font-size: 1rem !important;
}

.dt-products-cta__actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;

	gap: 0.75rem !important;
}

.dt-products-cta__actions .wp-block-button {
	width: auto !important;
}

.dt-products-cta__actions .wp-block-button__link {
	width: auto !important;
	min-width: 165px !important;
	padding: 0.8rem 1.25rem !important;
}

/* Tablet */
@media (max-width: 900px) {
	.dt-products-cta__inner {
		grid-template-columns: 1fr !important;
	}

	.dt-products-cta__actions {
		justify-content: flex-start !important;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.dt-products-cta {
		padding-top: 1.5rem !important;
		padding-bottom: 2rem !important;
	}

	.dt-products-cta__inner {
		padding: 1.4rem !important;
	}

	.dt-products-cta__copy h2 {
		font-size: clamp(2rem, 9vw, 2.75rem) !important;
	}

	.dt-products-cta__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.dt-products-cta__actions .wp-block-button,
	.dt-products-cta__actions .wp-block-button__link {
		width: 100% !important;
	}
}

/* =========================================================
   PRODUCT PAGE — COMPACT SPACING
   ========================================================= */

/* Thanh lọc */
.dt-products-filter-section {
	padding-top: 0.7rem !important;
	padding-bottom: 0.7rem !important;
}

/* Giảm khoảng cách giữa filter và tiêu đề danh mục */
.dt-products-intro {
	padding-top: 2rem !important;
	padding-bottom: 1.75rem !important;
}

/* Heading danh mục */
.dt-products-section-heading {
	margin-bottom: 0 !important;
}

.dt-products-section-heading .dt-eyebrow {
	margin-bottom: 0.65rem !important;
}

.dt-products-section-heading h2 {
	margin-top: 0 !important;
	margin-bottom: 0.75rem !important;
}

.dt-products-section-heading p:last-child {
	margin-top: 0 !important;
}

/* Grid sản phẩm */
.dt-products-catalog {
	padding-top: 0 !important;
	padding-bottom: 2.5rem !important;
}

.dt-products-grid {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Giảm khoảng trắng sau card cuối */
.dt-products-grid > .dt-product-card:last-child {
	margin-bottom: 0 !important;
}

/* Section hướng dẫn */
.dt-products-guide {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.dt-products-guide__inner {
	gap: 3rem !important;
}

/* CTA */
.dt-products-cta {
	padding-top: 1.75rem !important;
	padding-bottom: 1.75rem !important;
}

.dt-products-cta__inner {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

/* Loại bỏ margin Gutenberg dư */
.dt-products-page .wp-block-group,
.dt-products-page .wp-block-image,
.dt-products-page figure {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Mobile */
@media (max-width: 782px) {
	.dt-products-filter-section {
		padding-top: 0.55rem !important;
		padding-bottom: 0.55rem !important;
	}

	.dt-products-intro {
		padding-top: 1.75rem !important;
		padding-bottom: 1.5rem !important;
	}

	.dt-products-catalog {
		padding-bottom: 2rem !important;
	}

	.dt-products-guide {
		padding-top: 2.25rem !important;
		padding-bottom: 2.25rem !important;
	}

	.dt-products-guide__inner {
		gap: 2rem !important;
	}

	.dt-products-cta {
		padding-top: 1.25rem !important;
		padding-bottom: 1.5rem !important;
	}
}

/* =========================================================
   PRODUCT GUIDE IMAGE — SHOW FULL ON TABLET & MOBILE
   ========================================================= */

@media (max-width: 1080px) {

	.dt-products-guide__visual {
		background: #7a151b;
	}

	.dt-products-guide__visual img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;

		aspect-ratio: auto !important;

		object-fit: contain !important;
		object-position: center top !important;
	}
}

@media (max-width: 782px) {

	.dt-products-guide__visual {
		border-radius: 22px !important;
	}

	.dt-products-guide__visual img {
		display: block !important;

		width: 100% !important;
		height: auto !important;

		aspect-ratio: auto !important;

		object-fit: contain !important;
		object-position: center top !important;
	}
}


/* =========================================================
   PRODUCT GUIDE — IPAD PRO RESPONSIVE FINAL
   Keep two columns in landscape; stack only in portrait.
   ========================================================= */

/* iPad Pro 12.9 landscape and similar touch tablets */
@media
	(min-width: 1081px)
	and (max-width: 1366px)
	and (orientation: landscape)
	and (hover: none)
	and (pointer: coarse) {

	.dt-products-guide__inner {
		grid-template-columns:
			minmax(0, 0.88fr)
			minmax(0, 1.12fr) !important;

		align-items: center !important;
		gap: clamp(2rem, 4vw, 3.5rem) !important;
	}

	.dt-products-guide__visual {
		width: 100% !important;
		max-width: 520px !important;
		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		justify-self: end !important;
		overflow: hidden !important;
	}

	.dt-products-guide__visual img {
		display: block !important;

		width: 100% !important;
		height: auto !important;
		max-height: 610px !important;
		min-height: 0 !important;

		aspect-ratio: auto !important;

		object-fit: contain !important;
		object-position: center top !important;
	}

	.dt-products-guide__copy {
		align-self: center !important;
	}
}


/* iPad portrait and tablets up to 1080px */
@media
	(min-width: 783px)
	and (max-width: 1080px) {

	.dt-products-guide__inner {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}

	.dt-products-guide__visual {
		width: min(100%, 620px) !important;
		max-width: 620px !important;
		height: auto !important;
		min-height: 0 !important;

		margin-inline: auto !important;
		justify-self: center !important;
		overflow: hidden !important;
	}

	.dt-products-guide__visual img {
		display: block !important;

		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;

		aspect-ratio: auto !important;

		object-fit: contain !important;
		object-position: center top !important;
	}
}


/* Mobile */
@media (max-width: 782px) {

	.dt-products-guide__inner {
		grid-template-columns: 1fr !important;
		gap: 1.75rem !important;
	}

	.dt-products-guide__visual {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;

		margin-inline: auto !important;
		border-radius: 22px !important;
		overflow: hidden !important;
	}

	.dt-products-guide__visual img {
		display: block !important;

		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;

		aspect-ratio: auto !important;

		object-fit: contain !important;
		object-position: center top !important;
	}
}

/* =========================================================
   MOBILE HEADER — CENTER BRAND NAME
   ========================================================= */

@media (max-width: 782px) {

	.dt-header__inner {
		position: relative !important;
	}

	.dt-header__inner::before {
		content: "NHANG ĐẠI THÀNH";

		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;

		transform: translate(-50%, -50%);

		max-width: calc(100% - 150px);

		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		font-size: clamp(1.2rem, 3.5vw, 2.05rem);
		font-weight: 750;
		line-height: 1;
		letter-spacing: 0.09em;

		color: var(--dt-red-dark);

		pointer-events: none;
	}

	/* Đảm bảo logo và hamburger nằm phía trên */
	.dt-header__logo,
	.dt-navigation {
		position: relative;
		z-index: 3;
	}
}
/* =========================================================
   FINAL MOBILE HEADER OVERRIDE
   Fixed header + scroll-state classes + clickable site title
   Requires the companion JavaScript to add/remove:
   .dt-header-hidden and .dt-header-scrolled
   ========================================================= */

@media (max-width: 782px) {
	:root {
		--dt-header-height: 68px;
	}

	/* Reserve space because the mobile header is fixed. */
	body {
		padding-top: var(--dt-header-height);
	}

	/* WordPress admin toolbar offset on mobile. */
	body.admin-bar {
		padding-top: calc(var(--dt-header-height) + 46px);
	}

	body.admin-bar .dt-header {
		top: 46px;
	}

	/* Fixed mobile header. */
	.dt-header {
		position: fixed !important;
		top: 0;
		right: 0;
		left: 0;
		z-index: 10000;
		width: 100%;
		min-height: var(--dt-header-height);
		transform: translate3d(0, 0, 0);
		background: rgba(255, 248, 232, 0.96);
		border-bottom: 1px solid rgba(159, 29, 32, 0.12);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		backdrop-filter: saturate(180%) blur(18px);
		box-shadow: 0 1px 0 rgba(213, 164, 49, 0.16);
		transition:
			transform 280ms var(--dt-ease),
			background-color 220ms var(--dt-ease),
			box-shadow 220ms var(--dt-ease);
		will-change: transform;
	}

	/* Additional depth after the page has moved away from the top. */
	.dt-header.dt-header-scrolled,
	.dt-header.is-scrolled {
		background: rgba(255, 248, 232, 0.98);
		box-shadow:
			0 10px 28px rgba(100, 19, 22, 0.1),
			0 1px 0 rgba(213, 164, 49, 0.18);
	}

	/* Added by JavaScript while scrolling downward. */
	.dt-header.dt-header-hidden {
		transform: translate3d(0, -110%, 0);
	}

	/* Keep the header visible whenever Gutenberg's mobile menu is open. */
	.dt-header:has(
		.wp-block-navigation__responsive-container.is-menu-open
	) {
		transform: translate3d(0, 0, 0) !important;
	}

	.dt-header__inner {
		position: relative;
		width: min(100% - 28px, 100%) !important;
		min-height: var(--dt-header-height);
		display: flex !important;
		align-items: center;
		justify-content: space-between !important;
		margin-inline: auto !important;
		padding: 0 !important;
		gap: 1rem !important;
	}

	/* Remove any older CSS-generated wordmark. */
	.dt-header__inner::before {
		content: none !important;
		display: none !important;
	}

	/* Keep logo on the left. */
	.dt-brand {
		position: relative;
		z-index: 3;
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		flex: 0 0 58px;
		width: 58px;
		min-width: 58px;
		margin: 0 !important;
	}

	.dt-header__logo {
		position: relative;
		z-index: 3;
		flex: 0 0 58px;
		width: 58px;
		height: 44px;
		margin: 0 !important;
	}

	.dt-header__logo img {
		display: block;
		width: 58px !important;
		height: 44px !important;
		max-width: none !important;
		object-fit: contain;
	}

	/*
	 * Reuse Gutenberg's real Site Title block as the centered brand.
	 * Its existing anchor remains fully clickable and returns home.
	 */
	.dt-header .wp-block-site-title {
		position: absolute !important;
		top: 50%;
		left: 50%;
		z-index: 2;
		display: block !important;
		width: auto;
		max-width: calc(100% - 150px);
		margin: 0 !important;
		transform: translate(-50%, -50%);
		font-size: clamp(0.72rem, 3.4vw, 0.92rem);
		font-weight: 750;
		line-height: 1.15;
		letter-spacing: 0.07em;
		text-align: center;
		white-space: nowrap;
	}

	.dt-header .wp-block-site-title a {
		display: block;
		padding: 0.55rem 0.25rem;
		color: var(--dt-red-dark) !important;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
	}

	.dt-header .wp-block-site-title a:hover,
	.dt-header .wp-block-site-title a:focus-visible {
		color: var(--dt-red) !important;
	}

	/* Keep the menu trigger on the right. */
	.dt-navigation {
		position: relative;
		z-index: 3;
		flex: 0 0 auto;
		margin: 0 0 0 auto !important;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container-open {
		position: relative;
		z-index: 3;
	}

	/* The full-screen menu must remain above the fixed header bar. */
	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open {
		z-index: 99999;
	}
}

@media (max-width: 420px) {
	.dt-header .wp-block-site-title {
		max-width: calc(100% - 132px);
		font-size: clamp(0.68rem, 3.5vw, 0.82rem);
		letter-spacing: 0.055em;
	}

	.dt-brand,
	.dt-header__logo {
		flex-basis: 52px;
		width: 52px;
		min-width: 52px;
	}

	.dt-header__logo {
		height: 40px;
	}

	.dt-header__logo img {
		width: 52px !important;
		height: 40px !important;
	}
}

/* Respect users who prefer reduced animation. */
@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
	.dt-header {
		transition: none !important;
	}
}

/* =========================================================
   MOBILE HEADER FINAL FIX
   Fixed header + injected clickable branding + auto-hide
   ========================================================= */

@media (max-width: 782px) {
	:root {
		--dt-header-height: 68px;
	}

	body {
		padding-top: var(--dt-header-height);
	}

	.dt-header {
		position: fixed !important;
		top: 0;
		right: 0;
		left: 0;
		z-index: 10000;

		width: 100%;
		min-height: var(--dt-header-height);

		transform: translate3d(0, 0, 0);

		background: rgba(255, 248, 232, 0.96);
		border-bottom: 1px solid rgba(159, 29, 32, 0.12);

		-webkit-backdrop-filter: saturate(180%) blur(18px);
		backdrop-filter: saturate(180%) blur(18px);

		box-shadow: 0 1px 0 rgba(213, 164, 49, 0.16);

		transition:
			transform 280ms var(--dt-ease),
			background-color 220ms var(--dt-ease),
			box-shadow 220ms var(--dt-ease);

		will-change: transform;
	}

	body.admin-bar .dt-header {
		top: 46px;
	}

	.dt-header.dt-header-scrolled {
		background: rgba(255, 248, 232, 0.98);

		box-shadow:
			0 10px 28px rgba(100, 19, 22, 0.1),
			0 1px 0 rgba(213, 164, 49, 0.18);
	}

	/* JavaScript adds this class while scrolling down */
	.dt-header.dt-header-hidden {
		transform: translate3d(0, -110%, 0);
	}

	.dt-header__inner {
		position: relative;

		width: min(100% - 28px, 100%) !important;
		min-height: var(--dt-header-height);

		display: flex !important;
		align-items: center;
		justify-content: space-between !important;

		margin-inline: auto !important;
		padding: 0 !important;
		gap: 1rem !important;
	}

	/* Disable the old non-clickable CSS wordmark */
	.dt-header__inner::before {
		content: none !important;
		display: none !important;
	}

	.dt-brand,
	.dt-header__logo,
	.dt-navigation {
		position: relative;
		z-index: 3;
	}

	.dt-brand {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;

		flex: 0 0 58px;
		width: 58px;
		min-width: 58px;

		margin: 0 !important;
	}

	.dt-header__logo {
		flex: 0 0 58px;

		width: 58px;
		height: 44px;

		margin: 0 !important;
	}

	.dt-header__logo img {
		display: block;

		width: 58px !important;
		height: 44px !important;
		max-width: none !important;

		object-fit: contain;
	}

	/* Clickable branding injected by JavaScript */
	.dt-mobile-brand {
		position: absolute;

		top: 50%;
		left: 50%;
		z-index: 2;

		max-width: calc(100% - 150px);

		display: block;

		padding: 0.55rem 0.25rem;

		transform: translate(-50%, -50%);

		color: var(--dt-red-dark) !important;
		text-decoration: none !important;

		font-size: clamp(0.72rem, 3.4vw, 0.92rem);
		font-weight: 750;
		line-height: 1.15;
		letter-spacing: 0.07em;

		text-align: center;
		white-space: nowrap;

		-webkit-tap-highlight-color: transparent;
	}

	.dt-mobile-brand:hover,
	.dt-mobile-brand:focus-visible {
		color: var(--dt-red) !important;
	}

	.dt-navigation {
		flex: 0 0 auto;
		margin: 0 0 0 auto !important;
	}

	.dt-navigation
		.wp-block-navigation__responsive-container.is-menu-open {
		z-index: 99999;
	}
}

@media (max-width: 420px) {
	.dt-mobile-brand {
		max-width: calc(100% - 132px);
		font-size: clamp(0.68rem, 3.5vw, 0.82rem);
		letter-spacing: 0.055em;
	}

	.dt-brand,
	.dt-header__logo {
		flex-basis: 52px;
		width: 52px;
		min-width: 52px;
	}

	.dt-header__logo {
		height: 40px;
	}

	.dt-header__logo img {
		width: 52px !important;
		height: 40px !important;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
	.dt-header {
		transition: none !important;
	}
}

/* =========================================================
   Mobile branding visibility
   ========================================================= */

.dt-mobile-brand {
	display: none;
}

@media (max-width: 782px) {
	.dt-mobile-brand {
		display: block;

		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;

		max-width: calc(100% - 150px);
		padding: 0.55rem 0.25rem;

		transform: translate(-50%, -50%);

		color: var(--dt-red-dark) !important;
		text-decoration: none !important;

		font-size: clamp(0.72rem, 3.4vw, 0.92rem);
		font-weight: 750;
		line-height: 1.15;
		letter-spacing: 0.07em;

		text-align: center;
		white-space: nowrap;
	}
}

/* =========================================================
   PRODUCTS PAGE — SCROLL AND IMAGE STABILITY FIX
   ========================================================= */

/*
 * Prevent .dt-products-page from becoming a second
 * vertical scrolling container.
 */
.dt-products-page {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/*
 * Older browser fallback.
 */
@supports not (overflow: clip) {
	.dt-products-page {
		overflow: visible !important;
		clip-path: inset(0);
	}
}

/*
 * Reserve space for the hero image before it loads.
 */
.dt-products-hero__image {
	position: relative;
	width: 100% !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.dt-products-hero__image img {
	display: block;
	width: 100%;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: center;
}

/*
 * Product cards already use aspect-ratio, but keep the
 * dimensions explicit for lazy-loaded images.
 */
.dt-product-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.dt-product-card__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/*
 * Reserve space for the lower guide image.
 */
.dt-products-guide__visual {
	position: relative;
	width: 100%;
	min-height: 430px !important;
	aspect-ratio: 4 / 5;
	overflow: hidden !important;
}

.dt-products-guide__visual img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center top !important;
}

/*
 * Avoid permanent GPU layers on every product reveal item.
 */
html.js .dt-products-page .dt-reveal,
html.js .dt-products-page [data-reveal] {
	will-change: auto !important;
}

html.js .dt-products-page .dt-reveal.is-visible,
html.js .dt-products-page [data-reveal].is-visible {
	transform: none;
}

/* Tablet */
@media (min-width: 783px) and (max-width: 1080px) {
	.dt-products-guide__visual {
		width: min(100%, 620px) !important;
		min-height: 520px !important;
		aspect-ratio: 4 / 5;
		margin-inline: auto !important;
	}
}

/* Mobile */
@media (max-width: 782px) {
	.dt-products-hero__image {
		aspect-ratio: 4 / 3;
	}

	.dt-product-card__media {
		aspect-ratio: 4 / 3.2;
	}

	.dt-products-guide__visual {
		width: 100% !important;
		min-height: 360px !important;
		aspect-ratio: 4 / 5;
	}

	.dt-products-guide__visual img {
		height: 100% !important;
		object-fit: contain !important;
	}
}