/* ==========================================================================
   StylishTrendz Premium Homepage — v2
   Palette: --st-primary (#FF1493) / --st-black (ink only) / --st-white
   Rule: backgrounds are ALWAYS either primary or white — never black.
   Sections alternate color down the page. No hover-triggered effects
   anywhere. One signature motion moment: the hero's orbit + rising model,
   both driven by CSS animation on load, not by interaction.
   ========================================================================== */

.st-home {
	--st-ink: var(--st-black);
	font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--st-ink);
	background: var(--st-white);
	overflow-x: hidden;
}

.st-home * { box-sizing: border-box; }

.st-home h1, .st-home h2 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 .35em;
}

.st-eyebrow {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	margin-bottom: .9em;
}

.st-btn {
	display: inline-block;
	padding: .9em 2.3em;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--st-black);
	color: var(--st-white);
	border: 1.5px solid var(--st-black);
}
.st-btn-outline {
	background: transparent;
	color: var(--st-black);
	border: 1.5px solid var(--st-black);
}
.st-btn-outline-white {
	background: transparent;
	color: var(--st-white);
	border: 1.5px solid var(--st-white);
}

/* ---------- HERO ---------- */
.st-hero {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 620px;
	background: var(--st-primary);
	overflow: hidden;
	isolation: isolate;
}
.st-hero-text {
	position: relative;
	z-index: 3;
	flex: 0 0 100%;
	max-width: 460px;
	padding: 3rem 6vw 1rem;
	text-align: left;
}
.st-hero-text .st-eyebrow { color: var(--st-white); }
.st-hero-heading { color: var(--st-white); font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.st-hero-subheading { color: color-mix(in srgb, var(--st-white) 85%, transparent); font-size: 1.02rem; max-width: 42ch; margin-bottom: 1.7em; line-height: 1.6; font-family: 'Jost', sans-serif; }
.st-hero-text .st-btn { background: var(--st-white); color: var(--st-black); border-color: var(--st-white); }

.st-hero-visual {
	position: relative;
	flex: 1 1 320px;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Orbit text ring */
.st-orbit {
	position: absolute;
	left: 50%; top: 50%;
	width: 560px; height: 560px;
	transform: translate(-50%, -50%);
	z-index: 1;
	pointer-events: none;
	animation: stOrbitRotate 22s linear infinite;
}
.st-orbit svg { width: 100%; height: 100%; overflow: visible; }
.st-orbit-text {
	fill: var(--st-white);
	font-family: 'Jost', sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 4px;
}
@keyframes stOrbitRotate {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Rising model image — animates once on load, not on hover */
.st-model {
	position: relative;
	z-index: 2;
	height: 92%;
	max-height: 560px;
	width: auto;
	animation: stModelRise 1.8s cubic-bezier(.16,1,.3,1) both;
}
.st-model img {
	display: block;
	height: 100%;
	width: auto;
	max-width: 80vw;
	object-fit: contain;
	object-position: center bottom;
}
@keyframes stModelRise {
	0%   { transform: translateY(70px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* ---------- ALTERNATING FLAT-COLOR PANELS ---------- */
.st-bg-white { background: var(--st-white); color: var(--st-black); }
.st-bg-pink  { background: var(--st-primary); color: var(--st-white); }

.st-panel { padding: 4rem 6vw; }
.st-panel-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: 3.5rem;
	align-items: center;
}
.st-panel-reverse .st-panel-inner { direction: rtl; }
.st-panel-reverse .st-panel-text,
.st-panel-reverse .st-panel-visual { direction: ltr; }

.st-panel-text { text-align: left; }
.st-bg-white .st-eyebrow { color: var(--st-primary); }
.st-bg-pink .st-eyebrow { color: var(--st-white); }
.st-panel-heading { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.st-panel-sub { font-size: .98rem; line-height: 1.65; max-width: 44ch; margin-bottom: 1.7em; font-family: 'Jost', sans-serif; }
.st-bg-pink .st-panel-sub { color: color-mix(in srgb, var(--st-white) 88%, transparent); }
.st-bg-white .st-panel-sub { color: color-mix(in srgb, var(--st-black) 68%, transparent); }

/* ---------- CATEGORY TILES ---------- */
.st-tiles-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
}
.st-tile {
	position: relative;
	display: block;
	text-decoration: none;
	aspect-ratio: 3/4;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--st-black) 12%, transparent);
}
.st-tile-media { display: block; width: 100%; height: 100%; background: color-mix(in srgb, var(--st-primary) 8%, var(--st-white)); }
.st-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-tile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 60%);
}
.st-tile-label {
	position: absolute;
	left: .9rem; bottom: .8rem;
	z-index: 2;
	color: var(--st-white);
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 1.05rem;
}

/* ---------- CATEGORY SHELVES ---------- */
.st-shelf-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.3rem;
}
.st-card {
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.st-card-media { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; background: color-mix(in srgb, var(--st-primary) 6%, var(--st-white)); }
.st-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card-placeholder { display: block; width: 100%; height: 100%; background: color-mix(in srgb, var(--st-primary) 12%, var(--st-white)); }
.st-card-title { font-family: 'Jost', sans-serif; font-weight: 600; font-size: .95rem; padding: .9rem .9rem 1.05rem; line-height: 1.4; }
.st-card-title a { color: inherit; text-decoration: none; }

/* ---------- NEWSLETTER FORM WRAPPER ---------- */
.st-subscribe-form {
	background: var(--st-white);
	border: 1.5px solid var(--st-black);
	padding: 1.8rem;
}
.st-bg-white .st-subscribe-form { border-color: var(--st-primary); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
	.st-panel-inner { grid-template-columns: 1fr; }
	.st-panel-reverse .st-panel-inner { direction: ltr; }
	.st-tiles-row { grid-template-columns: repeat(3, 1fr); }
	.st-hero { min-height: 680px; }
}
@media (max-width: 640px) {
	.st-hero { flex-direction: column; min-height: 660px; padding-top: 1rem; }
	.st-hero-text { max-width: 100%; text-align: center; padding: 2.2rem 6vw 0; }
	.st-hero-text .st-eyebrow::before,
	.st-hero-text .st-eyebrow { text-align: center; }
	.st-hero-visual { min-height: 380px; width: 100%; }
	.st-orbit { width: 380px; height: 380px; }
	.st-orbit-text { font-size: 15px; letter-spacing: 2.5px; }
	.st-model { height: 78%; }
	.st-tiles-row { grid-template-columns: repeat(2, 1fr); }
	.st-shelf-row { grid-template-columns: 1fr; }
	.st-panel { padding: 3rem 6vw; }
}

@media (prefers-reduced-motion: reduce) {
	.st-orbit, .st-model { animation: none !important; }
}

.st-home a:focus-visible,
.st-home button:focus-visible {
	outline: 2px solid var(--st-black);
	outline-offset: 2px;
}