/*
 * Handifable – Long Vertical Editorial Homepage
 * All rules are scoped under .handifable-* classes used by the
 * handifable/* collection patterns. Loaded on the front end and in
 * the Site Editor (see inc/scripts.php).
 */

body {
	overflow-x: hidden;
}

body:has(section.handifable-collection-section),
body:has(section.handifable-home-closing) {
	background-color: #fff9f0;
}

.handifable-collection-section {
	--handifable-ink: #5d4a3f;
	--handifable-ink-soft: #8a776a;
	--handifable-accent: #d98e73;
	--handifable-accent-soft: rgba(217, 142, 115, 0.14);
	--handifable-paper: #fffdf8;
	--handifable-radius: 30px;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: clamp(72px, 9vw, 128px) 0;
	background-color: var(--handifable-bg, #fff9f0);
}

.handifable-collection-section--magical {
	--handifable-bg: #f4effa;
	--handifable-accent: #9c7fc0;
	--handifable-accent-soft: rgba(156, 127, 192, 0.16);
}

.handifable-collection-section--friendship {
	--handifable-bg: #fbefea;
	--handifable-accent: #e08d7e;
	--handifable-accent-soft: rgba(224, 141, 126, 0.16);
}

.handifable-collection-section--little-joy {
	--handifable-bg: #fdf4e1;
	--handifable-accent: #d99c46;
	--handifable-accent-soft: rgba(217, 156, 70, 0.16);
}

.handifable-collection-section--playful {
	--handifable-bg: #edf2ec;
	--handifable-accent: #7fa487;
	--handifable-accent-soft: rgba(127, 164, 135, 0.16);
}

.handifable-collection-section--custom {
	--handifable-bg: #fff6eb;
	--handifable-accent: #d98e73;
	--handifable-accent-soft: rgba(217, 142, 115, 0.16);
}

.handifable-collection-section--seasonal {
	--handifable-bg: #edf1f9;
	--handifable-accent: #8aa2c9;
	--handifable-accent-soft: rgba(138, 162, 201, 0.16);
}

.handifable-collection-section--playful,
.handifable-collection-section--seasonal {
	padding: clamp(64px, 8vw, 112px) 0;
}

.handifable-collection-section::before {
	content: "";
	position: absolute;
	top: -18%;
	right: -12%;
	width: min(44vw, 640px);
	height: min(44vw, 640px);
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--handifable-accent-soft), transparent 72%);
	pointer-events: none;
}

.handifable-collection-section--media-left::before {
	right: auto;
	left: -12%;
}

.handifable-collection-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: clamp(20px, 4vw, 48px);
}

.handifable-collection-grid {
	align-items: center;
	gap: clamp(36px, 5vw, 72px);
}

.handifable-collection-text {
	min-width: 0;
}

.handifable-collection-section .handifable-collection-kicker {
	margin: 0 0 14px;
	font-family: "Poppins", ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--handifable-accent);
}

.handifable-collection-section .handifable-collection-title {
	margin: 0 0 18px;
	font-family: "Satisfy", "Segoe Print", "Bradley Hand", cursive;
	font-weight: 500;
	font-size: clamp(36px, 4.6vw, 54px);
	line-height: 1.2;
	color: var(--handifable-ink);
}

.handifable-collection-section .handifable-collection-description {
	margin: 0;
	max-width: 46ch;
	font-family: "Poppins", ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, sans-serif;
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 400;
	line-height: 1.85;
	color: var(--handifable-ink-soft);
}

.handifable-collection-actions {
	margin: 26px 0 0;
}

.handifable-collection-section .handifable-collection-button .wp-block-button__link {
	padding: 14px 30px;
	border-radius: 999px;
	background-color: var(--handifable-accent);
	color: #fffdf9;
	font-family: "Poppins", ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(93, 74, 63, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.handifable-collection-section .handifable-collection-button .wp-block-button__link:hover,
.handifable-collection-section .handifable-collection-button .wp-block-button__link:focus {
	color: #fffdf9;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(93, 74, 63, 0.22);
}

.handifable-collection-media {
	display: flex;
	min-width: 0;
}

.handifable-collection-product {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 2vw, 28px);
	min-height: clamp(300px, 38vw, 540px);
	padding: clamp(24px, 3vw, 40px);
	background-color: var(--handifable-paper);
	border: 2px dashed rgba(93, 74, 63, 0.28);
	border-color: color-mix(in srgb, var(--handifable-accent) 55%, transparent);
	border-radius: var(--handifable-radius);
	box-shadow: 0 24px 48px rgba(93, 74, 63, 0.08);
}

.handifable-media-placeholder {
	width: 100%;
	margin: 0;
	font-family: "Satisfy", "Segoe Print", "Bradley Hand", cursive;
	font-size: clamp(22px, 2.4vw, 30px);
	color: var(--handifable-accent);
	opacity: 0.75;
	text-align: center;
}

.handifable-collection-product--duo {
	flex-wrap: wrap;
	gap: clamp(16px, 2.4vw, 32px);
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.handifable-collection-product--duo .handifable-product-slot {
	flex: 1 1 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(220px, 26vw, 380px);
	padding: clamp(18px, 2.4vw, 28px);
	background-color: var(--handifable-paper);
	border: 2px dashed rgba(93, 74, 63, 0.28);
	border-color: color-mix(in srgb, var(--handifable-accent) 55%, transparent);
	border-radius: 24px;
	box-shadow: 0 18px 36px rgba(93, 74, 63, 0.08);
}

.handifable-product-slot .handifable-media-placeholder {
	font-size: clamp(19px, 1.8vw, 24px);
}

.handifable-collection-product:has(img),
.handifable-product-slot:has(img) {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	padding: 0;
}

.handifable-collection-product > .wp-block-image,
.handifable-product-slot > .wp-block-image {
	width: 100%;
}

.handifable-collection-product img,
.handifable-product-slot img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: clamp(320px, 42vw, 560px);
	object-fit: contain;
	filter: drop-shadow(0 22px 30px rgba(93, 74, 63, 0.18));
}

.handifable-product-slot img {
	max-height: clamp(200px, 24vw, 340px);
}

.handifable-collection-decor {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.handifable-collection-decor .handifable-decoration {
	position: absolute;
	margin: 0;
	line-height: 1;
	font-size: clamp(20px, 2.4vw, 32px);
	color: var(--handifable-accent);
	opacity: 0.55;
	pointer-events: none;
}

.handifable-collection-decor .handifable-decoration--bloom::before {
	content: "✿";
	content: "✿" / "";
}

.handifable-collection-decor .handifable-decoration--daisy::before {
	content: "❀";
	content: "❀" / "";
}

.handifable-collection-decor .handifable-decoration--heart::before {
	content: "♡";
	content: "♡" / "";
}

.handifable-collection-decor .handifable-decoration--sparkle::before {
	content: "✦";
	content: "✦" / "";
}

.handifable-collection-decor .handifable-decoration--star::before {
	content: "✧";
	content: "✧" / "";
}

.handifable-collection-decor .handifable-decoration--leaf::before {
	content: "❧";
	content: "❧" / "";
}

.handifable-collection-decor .handifable-decoration--pos-a {
	top: 4.5%;
	left: 4%;
}

.handifable-collection-decor .handifable-decoration--pos-b {
	top: 5%;
	right: 4%;
	transform: rotate(12deg);
}

.handifable-collection-decor .handifable-decoration--pos-c {
	bottom: 5%;
	left: 4%;
	transform: rotate(-10deg);
}

.handifable-collection-decor .handifable-decoration--pos-d {
	bottom: 4.5%;
	right: 4.5%;
	transform: rotate(8deg);
}

.handifable-home-closing {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: clamp(110px, 14vw, 190px) clamp(24px, 6vw, 64px);
	background-color: #fff9f0;
	text-align: center;
}

.handifable-home-closing::before {
	content: "";
	position: absolute;
	bottom: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: min(60vw, 820px);
	height: min(60vw, 820px);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(217, 142, 115, 0.12), transparent 72%);
	pointer-events: none;
}

.handifable-home-closing-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
}

.handifable-home-closing .handifable-closing-title {
	margin: 0 0 20px;
	font-family: "Poppins", ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, sans-serif;
	font-size: clamp(19px, 2.4vw, 30px);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.6;
	color: #5d4a3f;
}

.handifable-home-closing .handifable-closing-subtitle {
	margin: 0;
	font-family: "Satisfy", "Segoe Print", "Bradley Hand", cursive;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 400;
	color: #d98e73;
}

.handifable-home-closing .handifable-decoration {
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	position: absolute;
	color: #d98e73;
}

@media (min-width: 782px) {

	.handifable-collection-grid {
		flex-wrap: nowrap;
	}

	.handifable-collection-section--media-left .handifable-collection-grid > .handifable-collection-media {
		order: -1;
	}
}

@media (min-width: 1024px) {

	.handifable-collection-section {
		min-height: 650px;
		display: flex;
		align-items: center;
	}

	.handifable-collection-section .handifable-collection-inner {
		width: 100%;
	}
}

@media (max-width: 781px) {

	.handifable-collection-grid {
		flex-direction: column;
		gap: 32px;
	}

	.handifable-collection-grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	.handifable-collection-section {
		padding: clamp(56px, 12vw, 88px) 0;
	}

	.handifable-collection-media {
		margin-top: 4px;
	}

	.handifable-collection-product {
		min-height: min(72vw, 420px);
	}

	.handifable-collection-product img {
		max-height: min(72vw, 420px);
	}

	.handifable-product-slot {
		min-height: min(48vw, 300px);
	}

	.handifable-product-slot img {
		max-height: min(48vw, 300px);
	}

	.handifable-collection-decor .handifable-decoration {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.handifable-collection-section .handifable-collection-button .wp-block-button__link {
		transition: none;
	}
}