/* Canonical output for Blocks 1.2. Values originate only from modeled attributes. */
.dcpt-v-display-block { display: block !important; }
.dcpt-v-display-flex { display: flex !important; }
.dcpt-v-display-grid { display: grid !important; }
.dcpt-v-visibility-hidden { display: none !important; }
.dcpt-v-position-sticky { position: sticky !important; }
.dcpt-v-position-static { position: static !important; }

.is-style-dcpt-vanilla-section {
	padding-block: clamp(2.5rem, 7vw, 6rem);
}

.is-style-dcpt-vanilla-card {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--vanilla-line, #d8ddd8);
	border-radius: var(--vanilla-radius, .75rem);
	background: var(--vanilla-surface, #fff);
	box-shadow: 0 .2rem 1rem rgba(23, 42, 36, .06);
}

.wp-block-button.is-style-dcpt-vanilla-secondary .wp-block-button__link {
	border-color: currentColor;
	background: transparent;
	color: var(--vanilla-accent, #25634a);
}

.wp-block-image.is-style-dcpt-vanilla-framed img {
	padding: .5rem;
	border: 1px solid var(--vanilla-line, #d8ddd8);
	background: var(--vanilla-surface, #fff);
	box-shadow: var(--vanilla-shadow, 0 1rem 3rem rgba(23, 42, 36, .1));
}

.dcpt-vanilla-content-reference,
.dcpt-vanilla-content-slot {
	min-width: 0;
}

.dcpt-vanilla-hero {
	--dcpt-vanilla-hero-min-height: clamp(28rem, 64vh, 46rem);
	position: relative;
	width: 100%;
	min-width: 0;
	min-height: var(--dcpt-vanilla-hero-min-height);
	overflow: clip;
	border: 1px solid var(--vanilla-line, #d8ddd8);
	border-radius: var(--vanilla-radius, .75rem);
	background: var(--vanilla-surface-alt, #f2f0e9);
	color: var(--vanilla-ink, #172a24);
}

.dcpt-vanilla-hero--height-auto { --dcpt-vanilla-hero-min-height: 0; }
.dcpt-vanilla-hero--height-compact { --dcpt-vanilla-hero-min-height: 22rem; }
.dcpt-vanilla-hero--height-large { --dcpt-vanilla-hero-min-height: clamp(38rem, 78vh, 58rem); }
.dcpt-vanilla-hero--height-viewport { --dcpt-vanilla-hero-min-height: 100dvh; }

.dcpt-vanilla-hero--tone-accent {
	border-color: color-mix(in srgb, var(--vanilla-accent, #25634a) 30%, transparent);
	background: color-mix(in srgb, var(--vanilla-accent, #25634a) 13%, var(--vanilla-surface, #fffdf8));
}

.dcpt-vanilla-hero--tone-dark {
	border-color: var(--vanilla-ink, #172a24);
	background: var(--vanilla-ink, #172a24);
	color: var(--vanilla-surface, #fffdf8);
}

.dcpt-vanilla-hero--tone-dark :is(.dcpt-vanilla-hero__heading, .dcpt-vanilla-hero__eyebrow) { color: inherit; }

.dcpt-vanilla-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr);
	align-items: stretch;
	min-height: inherit;
}

.dcpt-vanilla-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	padding: clamp(2rem, 6vw, 5.5rem);
}

.dcpt-vanilla-hero--align-center .dcpt-vanilla-hero__content { align-items: center; text-align: center; }
.dcpt-vanilla-hero--align-end .dcpt-vanilla-hero__content { align-items: flex-end; text-align: end; }
.dcpt-vanilla-hero--media-left .dcpt-vanilla-hero__content { order: 2; }
.dcpt-vanilla-hero--media-left .dcpt-vanilla-hero__media { order: 1; }
.dcpt-vanilla-hero--centered .dcpt-vanilla-hero__inner,
.dcpt-vanilla-hero--text-only .dcpt-vanilla-hero__inner { grid-template-columns: minmax(0, 1fr); }
.dcpt-vanilla-hero--centered .dcpt-vanilla-hero__content,
.dcpt-vanilla-hero--text-only .dcpt-vanilla-hero__content { align-items: center; width: min(100%, 58rem); margin-inline: auto; text-align: center; }
.dcpt-vanilla-hero--centered .dcpt-vanilla-hero__media { min-height: clamp(14rem, 34vw, 28rem); }

.dcpt-vanilla-hero__eyebrow {
	margin: 0 0 .75rem;
	color: var(--vanilla-accent, #25634a);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dcpt-vanilla-hero__heading {
	max-width: 16ch;
	margin: 0;
	font-size: clamp(2.2rem, 5vw, 5.75rem);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.dcpt-vanilla-hero__text { max-width: 43rem; margin-top: 1.25rem; }
.dcpt-vanilla-hero__text > :last-child { margin-bottom: 0; }

.dcpt-vanilla-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

.dcpt-vanilla-hero__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .7rem 1.1rem;
	border: 2px solid currentColor;
	border-radius: var(--vanilla-radius-small, .35rem);
	font-weight: 750;
	line-height: 1.2;
	text-decoration: none;
}

.dcpt-vanilla-hero__action--primary { border-color: var(--vanilla-accent, #25634a); background: var(--vanilla-accent, #25634a); color: #fff; }
.dcpt-vanilla-hero--tone-dark .dcpt-vanilla-hero__action--primary { border-color: var(--vanilla-highlight, #e4a853); background: var(--vanilla-highlight, #e4a853); color: var(--vanilla-ink, #172a24); }
.dcpt-vanilla-hero__action--secondary { background: transparent; color: inherit; }

.dcpt-vanilla-hero__media {
	min-width: 0;
	min-height: 100%;
	margin: 0;
	background: linear-gradient(145deg, color-mix(in srgb, var(--vanilla-accent, #25634a) 75%, #fff), var(--vanilla-highlight, #e4a853));
}

.dcpt-vanilla-hero__media img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.dcpt-vanilla-hero__media--placeholder { background-image: radial-gradient(circle at 72% 28%, rgba(255,255,255,.62), transparent 24%), linear-gradient(145deg, var(--vanilla-accent, #25634a), var(--vanilla-highlight, #e4a853)); }

body.dcpt-vanilla-document-width-narrow .vanilla-entry-header,
body.dcpt-vanilla-document-width-narrow .vanilla-entry-content {
	width: min(100% - (2 * var(--vanilla-gutter, 1.5rem)), 36rem);
	max-width: 36rem;
	margin-inline: auto;
}

body.dcpt-vanilla-document-width-wide .vanilla-entry-header,
body.dcpt-vanilla-document-width-wide .vanilla-entry-content {
	width: min(100% - (2 * var(--vanilla-gutter, 1.5rem)), var(--vanilla-wide, 72rem));
	max-width: var(--vanilla-wide, 72rem);
	margin-inline: auto;
}

body.dcpt-vanilla-document-width-full .vanilla-entry-header,
body.dcpt-vanilla-document-width-full .vanilla-entry-content {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--vanilla-gutter, 1.5rem);
}

body.dcpt-vanilla-document-spacing-compact .vanilla-main { padding-block: clamp(2rem, 5vw, 4rem); }
body.dcpt-vanilla-document-spacing-spacious .vanilla-main { padding-block: clamp(5rem, 12vw, 11rem); }
body.dcpt-vanilla-document-spacing-none .vanilla-main { padding-block: 0; }
body.dcpt-vanilla-document-header-transparent .vanilla-site-header {
	border-color: transparent;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.dcpt-vanilla-document-header-hidden .vanilla-site-header { display: none; }

@media (max-width: 60rem) {
	.dcpt-v-t-height { height: var(--dcpt-v-t-height) !important; }
	.dcpt-v-t-min-height { min-height: var(--dcpt-v-t-min-height) !important; }
	.dcpt-v-t-margin-top { margin-top: var(--dcpt-v-t-margin-top) !important; }
	.dcpt-v-t-margin-right { margin-right: var(--dcpt-v-t-margin-right) !important; }
	.dcpt-v-t-margin-bottom { margin-bottom: var(--dcpt-v-t-margin-bottom) !important; }
	.dcpt-v-t-margin-left { margin-left: var(--dcpt-v-t-margin-left) !important; }
	.dcpt-v-t-padding-top { padding-top: var(--dcpt-v-t-padding-top) !important; }
	.dcpt-v-t-padding-right { padding-right: var(--dcpt-v-t-padding-right) !important; }
	.dcpt-v-t-padding-bottom { padding-bottom: var(--dcpt-v-t-padding-bottom) !important; }
	.dcpt-v-t-padding-left { padding-left: var(--dcpt-v-t-padding-left) !important; }
	.dcpt-v-t-gap { gap: var(--dcpt-v-t-gap) !important; }
	.dcpt-v-t-sticky-top { top: var(--dcpt-v-t-sticky-top) !important; }
	.dcpt-v-t-display-default { display: var(--dcpt-v-native-display) !important; }
	.dcpt-v-t-display-block { display: block !important; }
	.dcpt-v-t-display-flex { display: flex !important; }
	.dcpt-v-t-display-grid { display: grid !important; }
	.dcpt-v-t-visibility-hidden { display: none !important; }
	.dcpt-v-t-visibility-visible { display: var(--dcpt-v-t-display, var(--dcpt-v-base-display, var(--dcpt-v-native-display))) !important; }
	.dcpt-v-t-position-default,
	.dcpt-v-t-position-static { position: static !important; }
	.dcpt-v-t-position-sticky { position: sticky !important; }
	.dcpt-v-t-direction { flex-direction: var(--dcpt-v-t-direction) !important; }
	.dcpt-v-t-wrap { flex-wrap: var(--dcpt-v-t-wrap) !important; }
	.dcpt-v-t-justify { justify-content: var(--dcpt-v-t-justify) !important; }
	.dcpt-v-t-align { align-items: var(--dcpt-v-t-align) !important; }
	.dcpt-v-t-grid-columns { grid-template-columns: repeat(var(--dcpt-v-t-grid-columns), minmax(0, 1fr)) !important; }
}

@media (max-width: 48rem) {
	.dcpt-vanilla-hero { --dcpt-vanilla-hero-min-height: auto; }
	.dcpt-vanilla-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.dcpt-vanilla-hero__content { order: 1; padding: clamp(1.5rem, 8vw, 3rem); }
	.dcpt-vanilla-hero__media { order: 2; min-height: clamp(13rem, 62vw, 22rem); }
	.dcpt-vanilla-hero__actions { width: 100%; }
	.dcpt-vanilla-hero__action { flex: 1 1 12rem; }

	.dcpt-v-m-height { height: var(--dcpt-v-m-height) !important; }
	.dcpt-v-m-min-height { min-height: var(--dcpt-v-m-min-height) !important; }
	.dcpt-v-m-margin-top { margin-top: var(--dcpt-v-m-margin-top) !important; }
	.dcpt-v-m-margin-right { margin-right: var(--dcpt-v-m-margin-right) !important; }
	.dcpt-v-m-margin-bottom { margin-bottom: var(--dcpt-v-m-margin-bottom) !important; }
	.dcpt-v-m-margin-left { margin-left: var(--dcpt-v-m-margin-left) !important; }
	.dcpt-v-m-padding-top { padding-top: var(--dcpt-v-m-padding-top) !important; }
	.dcpt-v-m-padding-right { padding-right: var(--dcpt-v-m-padding-right) !important; }
	.dcpt-v-m-padding-bottom { padding-bottom: var(--dcpt-v-m-padding-bottom) !important; }
	.dcpt-v-m-padding-left { padding-left: var(--dcpt-v-m-padding-left) !important; }
	.dcpt-v-m-gap { gap: var(--dcpt-v-m-gap) !important; }
	.dcpt-v-m-sticky-top { top: var(--dcpt-v-m-sticky-top) !important; }
	.dcpt-v-m-display-default { display: var(--dcpt-v-native-display) !important; }
	.dcpt-v-m-display-block { display: block !important; }
	.dcpt-v-m-display-flex { display: flex !important; }
	.dcpt-v-m-display-grid { display: grid !important; }
	.dcpt-v-m-visibility-hidden { display: none !important; }
	.dcpt-v-m-visibility-visible { display: var(--dcpt-v-m-display, var(--dcpt-v-t-display, var(--dcpt-v-base-display, var(--dcpt-v-native-display)))) !important; }
	.dcpt-v-m-position-default,
	.dcpt-v-m-position-static { position: static !important; }
	.dcpt-v-m-position-sticky { position: sticky !important; }
	.dcpt-v-m-direction { flex-direction: var(--dcpt-v-m-direction) !important; }
	.dcpt-v-m-wrap { flex-wrap: var(--dcpt-v-m-wrap) !important; }
	.dcpt-v-m-justify { justify-content: var(--dcpt-v-m-justify) !important; }
	.dcpt-v-m-align { align-items: var(--dcpt-v-m-align) !important; }
	.dcpt-v-m-grid-columns { grid-template-columns: repeat(var(--dcpt-v-m-grid-columns), minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dcpt-vanilla-hero *,
	.dcpt-vanilla-hero *::before,
	.dcpt-vanilla-hero *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (forced-colors: active) {
	.is-style-dcpt-vanilla-card,
	.wp-block-image.is-style-dcpt-vanilla-framed img,
	.dcpt-vanilla-hero { border: 1px solid CanvasText; }
	.dcpt-vanilla-hero__action { border: 2px solid LinkText; }
}

/* Canonical reveal: never hide server-rendered content until the observer is ready. */
.dcpt-v-reveal { transition: opacity 700ms ease, translate 850ms cubic-bezier(.2,.65,.3,1); }
.dcpt-v-reveal-pending { opacity: 0; translate: 0 20px; }
@media (prefers-reduced-motion: reduce) {
 .dcpt-v-reveal, .dcpt-v-reveal-pending { opacity: 1; translate: none; transition: none; }
}
.vanilla-theme-motion-reduced .dcpt-v-reveal { opacity: 1; translate: none; transition: none; }
.is-style-dcpt-vanilla-product-stage img { object-fit: contain; filter: drop-shadow(0 24px 22px rgb(0 0 0 / .1)); }
.is-style-dcpt-vanilla-editorial-image { overflow: hidden; }
.is-style-dcpt-vanilla-editorial-image img { transition: transform 900ms cubic-bezier(.2,.65,.3,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
 .is-style-dcpt-vanilla-editorial-image:has(a):hover img { transform: scale(1.025); }
}
