/* Delulu Tees Homepage Styles */
/* All styles scoped to .delulu-homepage-container */

/* === MAIN CONTAINER === */
/* Break out of Virtue's content wrapper — same technique as About Us page */
.delulu-homepage-container {
	position: relative;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: #1a1a1a;
	background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 40%, #E0F6FF 70%, #FFF8DC 100%);
	overflow-x: hidden;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
}

.delulu-homepage-container * {
	box-sizing: border-box;
}

/* Fixed sky gradient background */
.delulu-homepage-container .delulu-homepage-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 40%, #E0F6FF 70%, #FFF8DC 100%);
	z-index: -1;
	pointer-events: none;
}

/* Text shadow for readability on light gradient background */
.delulu-homepage-container.idp-text-glow-on .delulu-hero p,
.delulu-homepage-container.idp-text-glow-on .delulu-hero span,
.delulu-homepage-container.idp-text-glow-on .delulu-section p,
.delulu-homepage-container.idp-text-glow-on .delulu-section span,
.delulu-homepage-container.idp-text-glow-on .delulu-section div {
	text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

/* Remove text shadow on dark backgrounds and buttons */
.delulu-homepage-container [style*="background: #1a1a1a"] p,
.delulu-homepage-container [style*="background: #1a1a1a"] span,
.delulu-homepage-container [style*="background: #1a1a1a"] div,
.delulu-homepage-container [style*="background: #1a1a1a"] h2,
.delulu-homepage-container .delulu-btn-primary,
.delulu-homepage-container .delulu-btn-primary * {
	text-shadow: none !important;
}

/* Also remove glow from common button/link patterns (prevents blurry hover text on colored buttons) */
.delulu-homepage-container .wp-block-button__link,
.delulu-homepage-container .wp-block-button__link *,
.delulu-homepage-container a.button,
.delulu-homepage-container a.button *,
.delulu-homepage-container button,
.delulu-homepage-container button *,
.delulu-homepage-container input[type="submit"],
.delulu-homepage-container input[type="button"],
.delulu-homepage-container .wc-block-components-button,
.delulu-homepage-container .wc-block-components-button *{
	text-shadow: none !important;
}
/* If glow is disabled, force text-shadow off for hero/sections */
.delulu-homepage-container.idp-text-glow-off .delulu-hero *,
.delulu-homepage-container.idp-text-glow-off .delulu-section *{ text-shadow: none !important; }

/* Rounded corners for core Image blocks (15px) when enabled */
.delulu-homepage-container.idp-round-images-15 .wp-block-image img,
.delulu-homepage-container.idp-round-images-15 .wp-block-gallery img,
.delulu-homepage-container.idp-round-images-15 .wp-block-media-text__media img{ border-radius: 15px; }

.delulu-homepage-container.idp-round-images-15 .wp-block-image.is-style-rounded img,
.delulu-homepage-container.idp-round-images-15 figure.wp-block-image.is-style-rounded img{ border-radius: 9999px !important; }

.delulu-homepage-container.idp-round-images-15 .wp-block-image.idp-no-round img,
.delulu-homepage-container.idp-round-images-15 figure.wp-block-image.idp-no-round img{ border-radius: 0 !important; }


/* Film grain overlay for artistic texture */
.delulu-homepage-container::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: 0.03;
	pointer-events: none;
	z-index: 9999;
	animation: grain 8s steps(10) infinite;
}

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-5%, -10%); }
	20% { transform: translate(-15%, 5%); }
	30% { transform: translate(7%, -25%); }
	40% { transform: translate(-5%, 25%); }
	50% { transform: translate(-15%, 10%); }
	60% { transform: translate(15%, 0%); }
	70% { transform: translate(0%, 15%); }
	80% { transform: translate(3%, 25%); }
	90% { transform: translate(-10%, 10%); }
}

/* === ANIMATED CLOUDS === */
.delulu-clouds {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.delulu-cloud {
	position: absolute;
	background: white;
	border-radius: 100px;
	opacity: 0.9;
	animation: drift linear infinite;
}

.delulu-cloud::before,
.delulu-cloud::after {
	content: '';
	position: absolute;
	background: white;
	border-radius: 100px;
}

.delulu-cloud-1 { width: 140px; height: 45px; top: 3%; left: -200px; animation-duration: 60s; animation-delay: -20s; }
.delulu-cloud-1::before { width: 70px; height: 55px; top: -28px; left: 25px; }
.delulu-cloud-1::after { width: 90px; height: 50px; top: -23px; right: 20px; }

.delulu-cloud-2 { width: 120px; height: 40px; top: 12%; left: -200px; animation-duration: 75s; animation-delay: -40s; }
.delulu-cloud-2::before { width: 60px; height: 50px; top: -25px; left: 20px; }
.delulu-cloud-2::after { width: 80px; height: 45px; top: -20px; right: 15px; }

.delulu-cloud-3 { width: 160px; height: 50px; top: 8%; left: -200px; animation-duration: 68s; animation-delay: -55s; }
.delulu-cloud-3::before { width: 80px; height: 60px; top: -32px; left: 30px; }
.delulu-cloud-3::after { width: 95px; height: 55px; top: -27px; right: 25px; }

.delulu-cloud-4 { width: 110px; height: 38px; top: 19%; left: -200px; animation-duration: 70s; animation-delay: -50s; }
.delulu-cloud-4::before { width: 55px; height: 48px; top: -23px; left: 18px; }
.delulu-cloud-4::after { width: 70px; height: 43px; top: -19px; right: 12px; }

.delulu-cloud-5 { width: 145px; height: 48px; top: 27%; left: -200px; animation-duration: 80s; animation-delay: -12s; }
.delulu-cloud-5::before { width: 72px; height: 58px; top: -30px; left: 28px; }
.delulu-cloud-5::after { width: 88px; height: 53px; top: -25px; right: 22px; }

.delulu-cloud-6 { width: 125px; height: 42px; top: 24%; left: -200px; animation-duration: 72s; animation-delay: -25s; }
.delulu-cloud-6::before { width: 62px; height: 52px; top: -26px; left: 22px; }
.delulu-cloud-6::after { width: 78px; height: 47px; top: -21px; right: 16px; }

.delulu-cloud-7 { width: 135px; height: 44px; top: 36%; left: -200px; animation-duration: 65s; animation-delay: -30s; }
.delulu-cloud-7::before { width: 67px; height: 54px; top: -27px; left: 24px; }
.delulu-cloud-7::after { width: 83px; height: 49px; top: -22px; right: 18px; }

.delulu-cloud-8 { width: 150px; height: 49px; top: 33%; left: -200px; animation-duration: 78s; animation-delay: -65s; }
.delulu-cloud-8::before { width: 75px; height: 59px; top: -31px; left: 29px; }
.delulu-cloud-8::after { width: 92px; height: 54px; top: -26px; right: 23px; }

.delulu-cloud-9 { width: 115px; height: 39px; top: 47%; left: -200px; animation-duration: 67s; animation-delay: -45s; }
.delulu-cloud-9::before { width: 57px; height: 49px; top: -24px; left: 19px; }
.delulu-cloud-9::after { width: 72px; height: 44px; top: -20px; right: 13px; }

.delulu-cloud-10 { width: 155px; height: 51px; top: 44%; left: -200px; animation-duration: 82s; animation-delay: -42s; }
.delulu-cloud-10::before { width: 77px; height: 61px; top: -33px; left: 31px; }
.delulu-cloud-10::after { width: 93px; height: 56px; top: -28px; right: 24px; }

.delulu-cloud-11 { width: 130px; height: 43px; top: 58%; left: -200px; animation-duration: 74s; animation-delay: -35s; }
.delulu-cloud-11::before { width: 65px; height: 53px; top: -28px; left: 23px; }
.delulu-cloud-11::after { width: 80px; height: 48px; top: -23px; right: 17px; }

.delulu-cloud-12 { width: 140px; height: 46px; top: 54%; left: -200px; animation-duration: 69s; animation-delay: -15s; }
.delulu-cloud-12::before { width: 70px; height: 56px; top: -29px; left: 26px; }
.delulu-cloud-12::after { width: 85px; height: 51px; top: -24px; right: 19px; }

.delulu-cloud-13 { width: 120px; height: 41px; top: 69%; left: -200px; animation-duration: 63s; animation-delay: -8s; }
.delulu-cloud-13::before { width: 60px; height: 51px; top: -26px; left: 21px; }
.delulu-cloud-13::after { width: 75px; height: 46px; top: -21px; right: 14px; }

.delulu-cloud-14 { width: 165px; height: 53px; top: 66%; left: -200px; animation-duration: 85s; animation-delay: -55s; }
.delulu-cloud-14::before { width: 82px; height: 63px; top: -34px; left: 33px; }
.delulu-cloud-14::after { width: 97px; height: 58px; top: -29px; right: 26px; }

.delulu-cloud-15 { width: 125px; height: 42px; top: 77%; left: -200px; animation-duration: 71s; animation-delay: -58s; }
.delulu-cloud-15::before { width: 62px; height: 52px; top: -27px; left: 22px; }
.delulu-cloud-15::after { width: 78px; height: 47px; top: -22px; right: 16px; }

@keyframes drift {
	from { transform: translateX(0); }
	to { transform: translateX(calc(100vw + 200px)); }
}

/* === TYPOGRAPHY === */
.delulu-homepage-container h1,
.delulu-homepage-container h2,
.delulu-homepage-container h3 {
	font-weight: 800;
	line-height: 1.1;
}

.delulu-homepage-container h1 {
	font-size: clamp(2.8rem, 7vw, 5.5rem);
	letter-spacing: -0.03em;
	color: #1a1a1a;
	text-shadow: 0 2px 15px rgba(255, 255, 255, 0.6), 0 1px 4px rgba(255, 255, 255, 0.4);
	font-weight: 900;
}

.delulu-homepage-container h2 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	letter-spacing: -0.02em;
	color: #1a1a1a;
	text-shadow: 0 3px 12px rgba(255, 255, 255, 0.8), 0 1px 4px rgba(255, 255, 255, 0.6);
	font-weight: 800;
}

.delulu-homepage-container h3 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: #1a1a1a;
	text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(255, 255, 255, 0.7);
}

/* === LAYOUT === */
.delulu-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.delulu-section {
	padding: 100px 0;
	position: relative;
}

/* Ensure Gutenberg content and other sections sit above the fixed cloud layer */
.delulu-page-content {
	position: relative;
	z-index: 1;
}

/* === HERO === */
@keyframes heroFadeUp {
	0% { opacity: 0; transform: translateY(40px); filter: blur(8px); }
	100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroReveal {
	0% { opacity: 0; transform: translateY(60px) scale(0.9); filter: blur(12px); }
	60% { opacity: 1; transform: translateY(-8px) scale(1.02); filter: blur(0); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes heroGlow {
	0%, 100% { text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); }
	50% { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.1); }
}

@keyframes microSlideIn {
	0% { opacity: 0; transform: translateX(-20px); }
	100% { opacity: 1; transform: translateX(0); }
}

.delulu-hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 20px 60px;
	position: relative;
	z-index: 1;
}

.delulu-hero-content {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.delulu-rotating-tagline {
	font-size: clamp(1rem, 2vw, 1.3rem);
	font-weight: 700;
	color: #2a5a7a;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 20px;
	text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
	transition: opacity 0.3s ease;
	min-height: 1.5em;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 0.3s forwards;
}

.delulu-hero-content h1 {
	opacity: 0;
	animation: heroReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.delulu-hero-subhead {
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	color: #2a2a2a;
	margin-bottom: 40px;
	line-height: 1.6;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9);
	font-weight: 500;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 1.0s forwards;
}

.delulu-hero-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
	opacity: 0;
	animation: heroFadeUp 0.8s ease-out 1.3s forwards;
}

/* === BUTTONS === */
.delulu-btn {
	padding: 18px 40px;
	font-size: 1.1rem;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	letter-spacing: 0.02em;
}

.delulu-btn-primary {
	background: #1a1a1a;
	color: white;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.delulu-btn-primary:hover {
	background: #000;
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.delulu-btn-secondary {
	background: white;
	color: #1a1a1a;
	border: 2px solid #1a1a1a;
}

.delulu-btn-secondary:hover {
	background: #1a1a1a;
	color: white;
	transform: translateY(-2px);
}

/* === BUTTON UX + READABILITY ===
   Goal: keep your current button styling (theme/Slider Rev), but prevent hover fade/blur.
   Optional: add a clean "Lift" hover and/or force text color for contrast.
*/

/* Common button patterns inside the cloud wrapper (Gutenberg Buttons, Woo blocks, Slider Revolution buttons) */
.delulu-homepage-container.idp-btn-readable .wp-block-button__link,
.delulu-homepage-container.idp-btn-readable a.button,
.delulu-homepage-container.idp-btn-readable .wc-block-components-button,
.delulu-homepage-container.idp-btn-readable .rev-btn,
.delulu-homepage-container.idp-btn-readable button,
.delulu-homepage-container.idp-btn-readable input[type="submit"],
.delulu-homepage-container.idp-btn-readable input[type="button"]{
	opacity: 1 !important;
	filter: none !important;
	cursor: pointer;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
}

.delulu-homepage-container.idp-btn-readable .wp-block-button__link:hover,
.delulu-homepage-container.idp-btn-readable a.button:hover,
.delulu-homepage-container.idp-btn-readable .wc-block-components-button:hover,
.delulu-homepage-container.idp-btn-readable .rev-btn:hover,
.delulu-homepage-container.idp-btn-readable button:hover,
.delulu-homepage-container.idp-btn-readable input[type="submit"]:hover,
.delulu-homepage-container.idp-btn-readable input[type="button"]:hover{
	opacity: 1 !important;
	filter: none !important;
}

/* Force button text color (optional) */
.delulu-homepage-container.idp-btn-force-white .wp-block-button__link,
.delulu-homepage-container.idp-btn-force-white a.button,
.delulu-homepage-container.idp-btn-force-white .wc-block-components-button,
.delulu-homepage-container.idp-btn-force-white .rev-btn,
.delulu-homepage-container.idp-btn-force-white button,
.delulu-homepage-container.idp-btn-force-white input[type="submit"],
.delulu-homepage-container.idp-btn-force-white input[type="button"]{
	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.22) !important;
}

.delulu-homepage-container.idp-btn-force-dark .wp-block-button__link,
.delulu-homepage-container.idp-btn-force-dark a.button,
.delulu-homepage-container.idp-btn-force-dark .wc-block-components-button,
.delulu-homepage-container.idp-btn-force-dark .rev-btn,
.delulu-homepage-container.idp-btn-force-dark button,
.delulu-homepage-container.idp-btn-force-dark input[type="submit"],
.delulu-homepage-container.idp-btn-force-dark input[type="button"]{
	color: #0b2239 !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.35) !important;
}


/* Force button text color: Custom */
.delulu-homepage-container.idp-btn-force-custom .wp-block-button__link,
.delulu-homepage-container.idp-btn-force-custom a.button,
.delulu-homepage-container.idp-btn-force-custom .wc-block-components-button,
.delulu-homepage-container.idp-btn-force-custom .rev-btn,
.delulu-homepage-container.idp-btn-force-custom button,
.delulu-homepage-container.idp-btn-force-custom input[type="submit"],
.delulu-homepage-container.idp-btn-force-custom input[type="button"]{
	color: var(--idp-btn-custom-text, #0b2239) !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.35) !important;
}

/* Auto contrast mode: JS sets --idp-btn-fg and --idp-btn-ts per button */
.delulu-homepage-container.idp-btn-force-auto .wp-block-button__link,
.delulu-homepage-container.idp-btn-force-auto a.button,
.delulu-homepage-container.idp-btn-force-auto .wc-block-components-button,
.delulu-homepage-container.idp-btn-force-auto .rev-btn,
.delulu-homepage-container.idp-btn-force-auto button,
.delulu-homepage-container.idp-btn-force-auto input[type="submit"],
.delulu-homepage-container.idp-btn-force-auto input[type="button"]{
	color: var(--idp-btn-fg, currentColor) !important;
	text-shadow: var(--idp-btn-ts, none) !important;
}

/* Ensure Slider Revolution inner spans inherit our computed color in auto mode */
.delulu-homepage-container.idp-btn-force-auto .rev-btn *,
.delulu-homepage-container.idp-btn-force-auto .wp-block-button__link *,
.delulu-homepage-container.idp-btn-force-auto a.button *,
.delulu-homepage-container.idp-btn-force-auto .wc-block-components-button *{
	color: inherit !important;
}

/* Per-button override helper classes */
.delulu-homepage-container .idp-btn-text-white{
	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.22) !important;
}
.delulu-homepage-container .idp-btn-text-dark{
	color: #0b2239 !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.35) !important;
}
.delulu-homepage-container .idp-btn-text-custom{
	color: var(--idp-btn-fg, var(--idp-btn-custom-text, currentColor)) !important;
	text-shadow: var(--idp-btn-ts, none) !important;
}


/* Hover animation: Lift (no scale = no blurry text) */
.delulu-homepage-container.idp-btn-hover-lift .wp-block-button__link:hover,
.delulu-homepage-container.idp-btn-hover-lift a.button:hover,
.delulu-homepage-container.idp-btn-hover-lift .wc-block-components-button:hover,
.delulu-homepage-container.idp-btn-hover-lift button:hover,
.delulu-homepage-container.idp-btn-hover-lift input[type="submit"]:hover,
.delulu-homepage-container.idp-btn-hover-lift input[type="button"]:hover{
	transform: translate3d(0,-2px,0);
	box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

/* Slider Revolution buttons sometimes rely on transforms for positioning. Avoid overriding transform; just add shadow. */
.delulu-homepage-container.idp-btn-hover-lift .rev-btn:hover{
	box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

/* Hover animation: None */
.delulu-homepage-container.idp-btn-hover-none .wp-block-button__link:hover,
.delulu-homepage-container.idp-btn-hover-none a.button:hover,
.delulu-homepage-container.idp-btn-hover-none .wc-block-components-button:hover,
.delulu-homepage-container.idp-btn-hover-none .rev-btn:hover,
.delulu-homepage-container.idp-btn-hover-none button:hover,
.delulu-homepage-container.idp-btn-hover-none input[type="submit"]:hover,
.delulu-homepage-container.idp-btn-hover-none input[type="button"]:hover{
	transform: none !important;
}

/* === HERO MICRO LINE === */
.delulu-hero-microline {
	font-size: 0.95rem;
	color: #3a6a8a;
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

.delulu-hero-microline span {
	opacity: 0;
	animation: microSlideIn 0.5s ease-out forwards;
}

.delulu-hero-microline span:nth-child(1) { animation-delay: 1.6s; }
.delulu-hero-microline span:nth-child(2) { animation-delay: 1.75s; }
.delulu-hero-microline span:nth-child(3) { animation-delay: 1.9s; }
.delulu-hero-microline span:nth-child(4) { animation-delay: 2.05s; }

.delulu-hero-microline span::before {
	content: '\2022';
	margin-right: 15px;
	color: #3a6a8a;
}

.delulu-hero-microline span:first-child::before {
	display: none;
}

/* === CLOUD PHOTO === */
.delulu-cloud-photo {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	animation: heroFadeUp 1s ease-out 2.3s forwards;
}

.delulu-cloud-photo-wrap {
	position: relative;
	width: 400px;
	height: 285px;
	overflow: hidden;
	animation: cloudBob 6s ease-in-out infinite;
	filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.15));
	clip-path: url(#cloudClip1);
}

.delulu-cloud-photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 10% center;
}

.delulu-cloud-photo-caption {
	margin-top: 14px;
	font-size: 0.9rem;
	color: #3a6a8a;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
	animation: cloudBob 6s ease-in-out infinite;
}

@keyframes cloudBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

/* === FLOATING SHIRT CLOUDS === */
.delulu-floating-shirts {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.delulu-shirt-cloud {
	position: absolute;
	overflow: hidden;
	filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
	opacity: 0;
}

.delulu-shirt-cloud img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.delulu-shirt-cloud-1 { clip-path: url(#cloudClip2); }
.delulu-shirt-cloud-2 { clip-path: url(#cloudClip3); }
.delulu-shirt-cloud-3 { clip-path: url(#cloudClip1); }
.delulu-shirt-cloud-4 { clip-path: url(#cloudClip1); }
.delulu-shirt-cloud-5 { clip-path: url(#cloudClip2); }
.delulu-shirt-cloud-6 { clip-path: url(#cloudClip3); }
.delulu-shirt-cloud-7 { clip-path: url(#cloudClip1); }
.delulu-shirt-cloud-8 { clip-path: url(#cloudClip2); }

.delulu-shirt-cloud-2 img { transform: scaleX(-1); }
.delulu-shirt-cloud-4 img { transform: rotate(8deg) scale(1.1); }
.delulu-shirt-cloud-5 img { transform: scaleX(-1); }
.delulu-shirt-cloud-7 img { transform: rotate(-6deg) scale(1.1); }
.delulu-shirt-cloud-8 img { transform: scaleX(-1) rotate(5deg) scale(1.05); }

@keyframes shirtDrift1 {
	0% { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
	5% { opacity: 0.85; }
	90% { opacity: 0.85; }
	100% { transform: translate(calc(100vw + 200px), -30px) rotate(3deg); opacity: 0; }
}

@keyframes shirtDrift2 {
	0% { transform: translate(0, 0) rotate(2deg); opacity: 0; }
	5% { opacity: 0.8; }
	90% { opacity: 0.8; }
	100% { transform: translate(calc(-100vw - 200px), -20px) rotate(-3deg); opacity: 0; }
}

@keyframes shirtDrift3 {
	0% { transform: translate(0, 0) rotate(-1deg); opacity: 0; }
	5% { opacity: 0.75; }
	90% { opacity: 0.75; }
	100% { transform: translate(calc(100vw + 200px), 20px) rotate(2deg); opacity: 0; }
}

@keyframes shirtDrift4 {
	0% { transform: translate(0, 0) rotate(1deg); opacity: 0; }
	5% { opacity: 0.8; }
	90% { opacity: 0.8; }
	100% { transform: translate(calc(-100vw - 200px), 15px) rotate(-2deg); opacity: 0; }
}

@keyframes shirtDrift5 {
	0% { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
	5% { opacity: 0.75; }
	90% { opacity: 0.75; }
	100% { transform: translate(calc(100vw + 200px), -25px) rotate(2deg); opacity: 0; }
}

.delulu-shirt-cloud-1 { width: 180px; height: 150px; top: 8%; left: -200px; animation: shirtDrift1 25s linear -10s infinite; }
.delulu-shirt-cloud-2 { width: 160px; height: 130px; top: 55%; right: -200px; animation: shirtDrift2 30s linear -18s infinite; }
.delulu-shirt-cloud-3 { width: 140px; height: 120px; top: 30%; left: -200px; animation: shirtDrift3 28s linear -20s infinite; }
.delulu-shirt-cloud-4 { width: 155px; height: 130px; top: 70%; right: -200px; animation: shirtDrift4 32s linear -22s infinite; }
.delulu-shirt-cloud-5 { width: 135px; height: 115px; top: 15%; left: -200px; animation: shirtDrift5 26s linear -5s infinite; }
.delulu-shirt-cloud-6 { width: 150px; height: 125px; top: 45%; right: -200px; animation: shirtDrift4 35s linear -8s infinite; }
.delulu-shirt-cloud-7 { width: 130px; height: 110px; top: 80%; left: -200px; animation: shirtDrift5 29s linear -15s infinite; }
.delulu-shirt-cloud-8 { width: 145px; height: 120px; top: 62%; left: -200px; animation: shirtDrift1 33s linear -28s infinite; }

/* === SECTION HEADERS === */
.delulu-section-header {
	text-align: center;
	margin-bottom: 60px;
}

.delulu-section-subline {
	font-size: 1.5rem;
	color: #1a1a1a;
	text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(255, 255, 255, 0.7);
	font-weight: 600;
	line-height: 1.4;
}

/* === WARDROBE GRID === */
.delulu-wardrobe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 50px;
}

.delulu-wardrobe-tile {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 60px 30px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.delulu-wardrobe-tile:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
	background: white;
}

.delulu-wardrobe-tile h3 {
	font-size: 1.8rem;
	margin-bottom: 10px;
	color: #1a1a1a;
}

.delulu-wardrobe-tile p {
	color: #666;
	font-size: 0.95rem;
}

/* === PRODUCT GRID === */
.delulu-drop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	margin-top: 50px;
}

.delulu-product-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: pointer;
	position: relative;
}

.delulu-product-card:hover {
	transform: translateY(-12px) rotate(-2deg) scale(1.02);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
	background: white;
	z-index: 10;
}

.delulu-product-card:nth-child(even):hover {
	transform: translateY(-12px) rotate(2deg) scale(1.02);
}

.delulu-product-image {
	width: 100%;
	aspect-ratio: 1;
	background: #f5f5f5;
	position: relative;
	overflow: hidden;
}

.delulu-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.delulu-product-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #e8a435;
	color: white;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
}

.delulu-product-info {
	padding: 20px;
}

.delulu-product-name {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 8px;
	color: #1a1a1a;
}

.delulu-product-artist {
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 12px;
}

.delulu-product-price {
	font-size: 1.3rem;
	font-weight: 700;
	color: #1a1a1a;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
	.delulu-section {
		padding: 60px 0;
	}

	.delulu-hero {
		min-height: auto;
		padding: 80px 20px 60px;
	}

	.delulu-hero-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.delulu-cloud-photo-wrap {
		width: 280px;
		height: 200px;
	}

	.delulu-shirt-cloud-1 { width: 120px; height: 100px; }
	.delulu-shirt-cloud-2 { width: 110px; height: 90px; }
	.delulu-shirt-cloud-3 { width: 100px; height: 85px; }
	.delulu-shirt-cloud-4 { width: 115px; height: 95px; }
	.delulu-shirt-cloud-5 { width: 100px; height: 85px; }
	.delulu-shirt-cloud-6 { width: 110px; height: 90px; }
	.delulu-shirt-cloud-7 { width: 95px; height: 80px; }
	.delulu-shirt-cloud-8 { width: 105px; height: 88px; }
}
