/* ═══════════════════════════════════════════════════════════════
   JASIRÉ BEAUTÉ — Maison brand layer
   Palette, header, and homepage editorial system
   ═══════════════════════════════════════════════════════════════ */

body {
	background-color: var(--ivory);
	color: var(--espresso);
}

.btn {
	border-radius: 0;
	letter-spacing: 0.14em;
}
.btn-primary {
	background: var(--cocoa);
	border-color: var(--cocoa);
	color: var(--ivory);
}
.btn-primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
}
.btn-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
}
.btn-accent:hover {
	background: var(--cocoa);
	border-color: var(--cocoa);
}
body.nav-open { overflow: hidden; }

/* ─── Announcement ─────────────────────────────────────────── */
.announcement-bar {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	min-height: var(--announce-height);
	padding: 0;
	background: linear-gradient(90deg, #a4663f 0%, var(--accent) 50%, #c4845c 100%);
	color: var(--ivory);
	overflow: hidden;
	z-index: 220;
}
.announce-sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: announceSheen 7s var(--ease-out) infinite;
	pointer-events: none;
}
.announce-nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: var(--announce-height);
	background: none;
	border: 0;
	color: var(--ivory);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.announce-nav:hover {
	opacity: 1;
	transform: scale(1.12);
}
.announce-viewport {
	position: relative;
	height: var(--announce-height);
	overflow: hidden;
	text-align: center;
}
.announce-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 0.5rem;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ivory);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
	pointer-events: none;
}
.announce-slide.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* ─── Header ───────────────────────────────────────────────── */
.site-header {
	background: rgba(247, 243, 238, 0.92);
	backdrop-filter: blur(18px) saturate(1.15);
	-webkit-backdrop-filter: blur(18px) saturate(1.15);
	border-bottom: 1px solid var(--beige);
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow 0.4s var(--ease-out), background 0.4s ease, min-height 0.4s var(--ease-out);
}
.site-header.scrolled {
	background: rgba(247, 243, 238, 0.98);
	box-shadow: 0 10px 30px rgba(44, 33, 29, 0.06);
}

.header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: auto;
	min-height: var(--header-height);
	gap: 1rem;
	padding: 0.35rem clamp(1.15rem, 4vw, 1.5rem);
}

.nav-cluster {
	display: flex;
	align-items: center;
	gap: 1.85rem;
}
.nav-left { justify-self: start; }
.header-end {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 1.75rem;
}
.nav-right { gap: 1.75rem; }

.nav-cluster > a,
.nav-cluster .nav-item > a {
	position: relative;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--espresso);
	padding: 0.4rem 0;
	transition: color 0.35s var(--ease-out);
}
.nav-cluster > a::after,
.nav-cluster .nav-item > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.4s var(--ease-out);
}
.nav-cluster > a:hover,
.nav-cluster > a.active,
.nav-cluster .nav-item > a:hover,
.nav-cluster .nav-item > a.active {
	color: var(--accent);
}
.nav-cluster > a:hover::after,
.nav-cluster > a.active::after,
.nav-cluster .nav-item > a:hover::after,
.nav-cluster .nav-item > a.active::after {
	transform: scaleX(1);
}

.nav-list a::after { display: none; }

.logo {
	position: relative;
	z-index: 2;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}
.logo-mark {
	position: relative;
	display: block;
}
.logo-mark img {
	display: block;
	height: 82px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(184, 115, 78, 0.16));
	transition: height 0.45s var(--ease-out), transform 0.55s var(--ease-out), filter 0.55s ease;
}
.site-header.scrolled .logo-mark img {
	height: 62px;
}
.logo:hover .logo-mark img {
	transform: scale(1.045);
	filter: drop-shadow(0 14px 26px rgba(184, 115, 78, 0.28));
}
.logo-shine {
	position: absolute;
	inset: -10%;
	background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
	transform: translateX(-140%) skewX(-16deg);
	pointer-events: none;
	mix-blend-mode: screen;
	animation: logoShine 5.5s var(--ease-out) 1.2s infinite;
}
.logo:hover .logo-shine {
	animation: logoShine 0.85s var(--ease-out);
}

.menu-toggle span {
	background: var(--espresso);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}
.icon-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--espresso);
	transition: color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease-out);
}
.icon-btn:hover {
	color: var(--accent);
	background: rgba(184, 115, 78, 0.08);
	transform: translateY(-2px);
}
.cart-count {
	top: 4px;
	right: 4px;
	background: var(--accent);
	color: var(--white);
	font-size: 0.58rem;
	font-weight: 600;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	animation: badgePulse 2.8s ease-in-out infinite;
}

.nav-main {
	display: none;
}

.search-overlay {
	background: rgba(247, 243, 238, 0.98);
	border-bottom: 1px solid var(--beige);
	animation: searchDrop 0.4s var(--ease-out);
}
.search-form input {
	background: var(--white);
	border-color: var(--beige);
	color: var(--espresso);
}
.search-form input:focus { border-color: var(--accent); }

.dropdown {
	background: var(--ivory);
	border-color: var(--beige);
	box-shadow: var(--shadow-md);
}

/* ─── Trust ────────────────────────────────────────────────── */
.page-home .trust-strip {
	background: var(--ivory);
	color: var(--espresso);
	border-top: 1px solid var(--beige);
	border-bottom: 1px solid var(--beige);
}
.page-home .trust-strip-item strong { color: var(--accent); }
.page-home .trust-strip-item span { color: var(--taupe); }
.page-home .trust-strip-divider { background: var(--accent); }

/* ─── Silk sections ────────────────────────────────────────── */
.maison-silk {
	position: relative;
	overflow: hidden;
	background-color: var(--ivory);
	background-image: url('../images/home-section-2.png');
	background-size: cover;
	background-position: center;
}
.maison-silk::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(247,243,238,0.55), rgba(247,243,238,0.78));
	pointer-events: none;
}

.maison-intro {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto 2.75rem;
	text-align: center;
}
.maison-kicker {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 0.85rem;
}
.maison-intro h2,
.maison-copy h2 {
	font-style: italic;
	font-weight: 500;
	margin-bottom: 0.85rem;
}
.maison-intro p,
.maison-copy p {
	color: var(--taupe);
}

/* Spotlight */
.maison-spotlight { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.spotlight-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.maison-copy .lead {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--espresso);
	margin-bottom: 1rem;
}
.maison-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 1.25rem 0 1.75rem;
}
.maison-chip {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--beige);
	color: var(--espresso);
	background: rgba(255,255,255,0.45);
}
.spotlight-media {
	position: relative;
}
.spotlight-media img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 24px 50px rgba(44, 33, 29, 0.14));
	animation: productFloat 7s ease-in-out infinite;
}
.spotlight-glow {
	position: absolute;
	inset: 18% 10% 8%;
	background: radial-gradient(circle, rgba(184,115,78,0.22), transparent 70%);
	filter: blur(18px);
	z-index: -1;
}

/* Manifesto — restyled as .intention-stage in style.css */

/* Rituals */
.maison-rituals { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.ritual-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.15rem;
}
.ritual-card {
	position: relative;
	display: block;
	min-height: 280px;
	overflow: hidden;
	color: var(--ivory);
}
.ritual-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	transition: transform 0.9s var(--ease-out);
}
.ritual-card:hover img { transform: scale(1.08); }
.ritual-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23,19,17,0.05) 20%, rgba(23,19,17,0.62) 100%);
}
.ritual-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
	padding: 1.5rem;
}
.ritual-body span {
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(247,243,238,0.8);
}
.ritual-body h3 {
	color: var(--ivory);
	font-size: 2rem;
	font-style: italic;
	margin: 0.25rem 0 0.35rem;
}
.ritual-body em {
	font-style: normal;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-light);
}

/* Home packages — light maison */
.page-home .section-packages {
	background:
		linear-gradient(180deg, rgba(247,243,238,0.88), rgba(232,213,197,0.45)),
		url('../images/home-section-2.png') center/cover;
	color: var(--espresso);
}
.page-home .pkg-home-intro .section-label { color: var(--accent); }
.page-home .pkg-home-intro h2 { color: var(--espresso); }
.page-home .pkg-home-intro p { color: var(--taupe); }
.page-home .pkg-card {
	background: rgba(255,255,255,0.72);
	border: 1px solid var(--beige);
	color: var(--espresso);
	backdrop-filter: blur(8px);
}
.page-home .pkg-card-body p,
.page-home .pkg-includes li { color: var(--taupe); }
.page-home .pkg-tagline,
.page-home .pkg-link { color: var(--accent); }
.page-home .pkg-card-foot { border-top-color: var(--beige); }
.page-home .pkg-card-media { background: var(--champagne); }
.page-home .section-packages .section-cta .btn-outline {
	color: var(--espresso);
	border-color: var(--espresso);
}
.page-home .section-packages .section-cta .btn-outline:hover {
	background: var(--espresso);
	color: var(--ivory);
}
.page-home .section-packages .section-cta p { color: var(--taupe) !important; }

/* Pillars / collections */
.page-home .section-pillars {
	background: var(--ivory);
}
.page-home .pillar-item:hover { background: var(--champagne); }

.page-home .collection-card-overlay {
	background: linear-gradient(180deg, transparent, rgba(23,19,17,0.72));
}

/* Concerns stay dark cocoa */
.page-home .section-concerns {
	background:
		radial-gradient(ellipse at 12% 0%, rgba(184,115,78,0.18), transparent 45%),
		linear-gradient(180deg, #171311 0%, #241c18 55%, #171311 100%);
}

/* Ingredient + promise floral */
.page-home .section-alt {
	background:
		linear-gradient(180deg, rgba(247,243,238,0.82), rgba(247,243,238,0.9)),
		url('../images/home-section-6.png') center/cover;
}

.page-home .section-community {
	background:
		linear-gradient(180deg, rgba(247,243,238,0.78), rgba(247,243,238,0.88)),
		url('../images/home-section-7.png') center/cover;
}

.page-home .section-voices {
	background:
		radial-gradient(ellipse at 80% 0%, rgba(184,115,78,0.16), transparent 42%),
		linear-gradient(180deg, #171311 0%, #211915 100%);
}

/* ─── Motion ───────────────────────────────────────────────── */
@keyframes announceSheen {
	0%, 62% { transform: translateX(-120%); }
	100% { transform: translateX(120%); }
}
@keyframes logoShine {
	0% { transform: translateX(-140%) skewX(-16deg); }
	18%, 100% { transform: translateX(140%) skewX(-16deg); }
}
@keyframes badgePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}
@keyframes productFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@keyframes searchDrop {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.announce-sheen,
	.logo-shine,
	.spotlight-media img,
	.cart-count,
	.announce-slide { animation: none !important; }
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.nav-cluster { gap: 1.15rem; }
	.spotlight-grid,
	.ritual-grid { grid-template-columns: 1fr; }
	.logo-mark img { height: 70px; }
	.header-inner {
		padding-left: clamp(1.25rem, 5vw, 1.75rem);
		padding-right: clamp(1.25rem, 5vw, 1.75rem);
	}
}

@media (max-width: 900px) {
	:root { --header-height: 76px; }
	.menu-toggle { display: flex; justify-self: start; }
	.nav-cluster { display: none; }
	.nav-main {
		display: block;
		position: fixed;
		top: calc(var(--header-height) + var(--announce-height));
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: var(--ivory);
		padding: var(--space-md) clamp(1.25rem, 5vw, 1.75rem) 2rem;
		transform: translateX(-100%);
		visibility: hidden;
		pointer-events: none;
		transition: transform var(--transition), visibility 0s linear 0.35s;
		z-index: 180;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.nav-main.open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition: transform var(--transition), visibility 0s;
	}
	.header-inner { grid-template-columns: auto 1fr auto; }
	.logo { justify-self: center; }
	.logo-mark img { height: 58px; }
	.site-header.scrolled .logo-mark img { height: 50px; }
	.header-end { gap: 0; }
	.announce-slide { letter-spacing: 0.1em; font-size: 0.62rem; }
}

@media (max-width: 480px) {
	.header-actions { gap: 0; }
	.icon-btn { width: 38px; height: 38px; }
	.header-inner {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}
}