/**
 * DX Product Page - front-end styles.
 *
 * Mirrors the Cloudflare-served /product/{ASIN}/ card layout. The block
 * editor renders standard Gutenberg blocks inside .dx-pp-card-inner, so the
 * selectors here target both our own wrapper classes and the block output
 * (h1, .wp-block-image, .wp-block-buttons, etc.) so the freeform editor
 * experience renders into the card design without extra markup.
 */

:root {
	--dx-pp-pink-bg: #ff1493;
	--dx-pp-card-bg: #ffffff;
	--dx-pp-border-radius: 24px;
	--dx-pp-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.18);
	--dx-pp-teal: #00c6c3;
	--dx-pp-text-main: #222222;
	--dx-pp-text-muted: #555555;
	--dx-pp-button-bg: #00c6c3;
	--dx-pp-button-text: #ffffff;
}

body.dx-pp,
body.dx-pp * {
	box-sizing: border-box;
}

html,
body.dx-pp {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--dx-pp-pink-bg);
	color: var(--dx-pp-text-main);
}

body.dx-pp {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

#dx-pp-root {
	width: 100%;
}

.dx-pp-page {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.dx-pp.mobile .dx-pp-page {
	padding-bottom: 80px;
}

.dx-pp-page-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dx-pp-header {
	width: 100%;
	padding: 8px 16px 16px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dx-pp-logo-link {
	display: inline-block;
	text-decoration: none;
	line-height: 0;
}

.dx-pp-logo-img {
	height: 40px;
	width: auto;
	display: block;
}

.dx-pp-logo-text {
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 1;
}

.dx-pp-card-wrapper {
	width: 100%;
	max-width: 620px;
	padding: 0 16px 40px;
}

.dx-pp-card {
	background: var(--dx-pp-card-bg);
	border-radius: var(--dx-pp-border-radius);
	box-shadow: var(--dx-pp-shadow-soft);
	padding: 24px 20px 28px;
}

.dx-pp-card-inner {
	border-radius: 18px;
	border: 4px solid #000;
	padding: 24px 20px 28px;
}

.dx-pp-card-inner > *:first-child {
	margin-top: 0;
}

.dx-pp-card-inner > *:last-child {
	margin-bottom: 0;
}

/* Title — own wrapper class + h1 emitted by core/heading. */
.dx-pp-card-inner h1,
.dx-pp-card-inner h2 {
	font-size: 26px;
	line-height: 1.18;
	margin: 0 0 18px;
	text-align: left;
	color: var(--dx-pp-text-main);
}

.dx-pp-card-inner h1 a,
.dx-pp-card-inner h2 a,
.dx-pp-card-inner .dx-pp-title-link {
	color: inherit;
	text-decoration: none;
	display: inline-block;
}

.dx-pp-card-inner h1 a:hover,
.dx-pp-card-inner h2 a:hover,
.dx-pp-card-inner .dx-pp-title-link:hover {
	text-decoration: underline;
}

/* Image — own wrapper + core/image (figure.wp-block-image). */
.dx-pp-card-inner .dx-pp-image-wrap,
.dx-pp-card-inner .wp-block-image {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
}

.dx-pp-card-inner .dx-pp-image-inner,
.dx-pp-card-inner .wp-block-image > a,
.dx-pp-card-inner .wp-block-image > img {
	max-width: 280px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.dx-pp-card-inner .dx-pp-image-link,
.dx-pp-card-inner .wp-block-image a {
	display: block;
	text-decoration: none;
	color: inherit;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 280px;
}

.dx-pp-card-inner .dx-pp-image-inner img,
.dx-pp-card-inner .wp-block-image img {
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.dx-pp-card-inner .dx-pp-product-image,
.dx-pp-card-inner .wp-block-image img {
	background: #f0f0f0;
	transition: filter 0.5s ease-out, opacity 0.5s ease-out;
}

.dx-pp-card-inner .dx-pp-product-image:not(.loaded) {
	filter: blur(20px);
	opacity: 0.7;
}

.dx-pp-card-inner .dx-pp-product-image.loaded {
	filter: blur(0);
	opacity: 1;
}

.dx-pp-card-inner .dx-pp-image-credit,
.dx-pp-card-inner .wp-block-image figcaption {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 10px;
	color: #ffffff;
	font-style: italic;
	font-weight: 400;
	background: rgba(0, 168, 177, 0.6);
	padding: 2px 6px;
	border-radius: 4px;
	margin: 0;
}

/* Description / paragraphs. */
.dx-pp-card-inner .dx-pp-description,
.dx-pp-card-inner p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--dx-pp-text-muted);
	margin: 0 0 8px;
}

.dx-pp-card-inner a:not(.dx-pp-cta-button):not(.dx-pp-image-link):not(.dx-pp-title-link):not(.wp-block-button__link) {
	color: var(--dx-pp-teal);
	font-weight: 600;
	text-decoration: none;
}

.dx-pp-card-inner a:not(.dx-pp-cta-button):not(.dx-pp-image-link):not(.dx-pp-title-link):not(.wp-block-button__link):hover {
	text-decoration: underline;
}

/* CTA — own wrapper + core/buttons (.wp-block-buttons / .wp-block-button__link). */
.dx-pp-card-inner .dx-pp-cta-wrap,
.dx-pp-card-inner .wp-block-buttons {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.dx-pp-card-inner .dx-pp-cta-button,
.dx-pp-card-inner .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: 999px;
	background: var(--dx-pp-button-bg);
	color: var(--dx-pp-button-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	gap: 8px;
}

.dx-pp-card-inner .dx-pp-cta-button:hover,
.dx-pp-card-inner .wp-block-button__link:hover {
	filter: brightness(1.05);
	color: var(--dx-pp-button-text);
}

.dx-pp-footer {
	width: 100%;
	max-width: 620px;
	padding: 0 16px 32px;
	font-size: 11px;
	color: #f9e9f5;
	text-align: center;
}

.dx-pp-footer a {
	color: #f9e9f5;
}

@media (max-width: 640px) {
	.dx-pp-header {
		padding: 6px 16px 12px;
	}
	.dx-pp-logo-img {
		height: 36px;
	}
	.dx-pp-card-wrapper {
		padding: 0 12px 32px;
	}
	.dx-pp-card,
	.dx-pp-card-inner {
		padding: 18px 14px 22px;
	}
	.dx-pp-card-inner h1,
	.dx-pp-card-inner h2 {
		font-size: 22px;
	}
}