/*
Theme Name:     Astra Child — Freaura
Theme URI:
Description:    Astra child theme for the Freaura wireframe migration. Design tokens live in assets/css/design-tokens.css (loaded before this file). Shared animations in assets/js/site-interactions.js. Do not edit the parent Astra theme directly.
Author:         Freaura
Author URI:
Template:       astra
Version:        0.1.0
*/

/* ------------------------------------------------------------
   Component styles are added per-template in later migration
   steps. Always reference the tokens from design-tokens.css
   (var(--cream), var(--emerald), var(--font-display), ...) — never
   hard-code hex/font values here.
   ------------------------------------------------------------ */

/* ============================================================
   GLOBAL TYPOGRAPHY & COLOR BASE
   Astra's global settings force body + headings to Cormorant
   Garamond (weight 600) on a #f6f6f6-ish palette. The wireframe
   base is: body = Inter 300 on --cream, headings = Playfair.
   We enforce the wireframe base here so every template inherits
   the correct fonts/colors without changing Astra's DB settings.
   ============================================================ */
body,
.ast-container,
button,
input,
select,
textarea {
	font-family: var(--font-sans);          /* Inter */
	font-weight: 300;
	color: var(--ink);
}
body { background-color: var(--cream); }

/* Headings default to Playfair Display (wireframe --display).
   Component classes may override size/weight, but the family is
   correct everywhere Astra would otherwise inject Cormorant. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-single-post-order {
	font-family: var(--font-display);
	color: var(--ink);
	font-weight: 400;
}

/* Astra sets link color to its global palette; wireframe links
   are --ink and shift to --brass on hover (component-specific
   rules refine this further). */
a { color: var(--ink); }
a:hover { color: var(--brass); }


/* ============================================================
   STEP 4a — HEADER
   Curtain intro, scroll-progress, announcement marquee, and the
   sticky / shrink-on-scroll / centered-logo nav. Wireframe styles
   ported from freaura-spa.html and adapted to Astra's real
   header selectors (.site-header / .main-header-bar / .menu-link).
   ============================================================ */

/* ---- Curtain intro (front page only) ---------------------- */
.curtain {
	position: fixed;
	inset: 0;
	background: var(--midnight);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	pointer-events: none;
	animation: curtainOut 1.6s cubic-bezier(.76, 0, .24, 1) 1.6s forwards;
}
.curtain-mark {
	font-family: var(--font-display);
	color: var(--cream);
	font-size: clamp(40px, 6vw, 76px);
	letter-spacing: 0.32em;
	font-weight: 400;
	font-style: italic;
	/* Explicit line-height + bottom padding so the italic Playfair
	   descenders/swashes clear the divider below instead of the
	   brass line crossing the glyphs. Also offsets the trailing
	   letter-spacing so the word stays optically centered. */
	line-height: 1.3;
	padding-left: 0.32em; /* balance trailing letter-spacing */
	/* keep "Freaura" on ONE line — with 0.32em tracking at the 40px floor the
	   word is ~240px wide and was wrapping ("ur" dropping to a 2nd line) on
	   320px screens. nowrap + a slightly smaller floor/tracking below keeps it
	   intact and centered. */
	white-space: nowrap;
}
.curtain-mark span {
	display: inline-block;
	opacity: 0;
	transform: translateY(36px);
	animation: letterIn 0.8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.curtain-divider {
	width: 0;
	height: 0.5px;
	background: var(--brass);
	margin-top: 30px;
	animation: lineGrow 0.9s cubic-bezier(.2, .7, .2, 1) 0.9s forwards;
}
.curtain-sub {
	font-family: var(--font-sans);
	color: var(--brass-pale);
	font-size: 10px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	margin-top: 16px;
	opacity: 0;
	animation: fadeIn 0.6s ease 1.2s forwards;
}
@keyframes letterIn { to { opacity: 1; transform: none; } }
@keyframes fadeIn  { to { opacity: 1; } }
@keyframes lineGrow { to { width: 100px; } }
@keyframes curtainOut { to { transform: translateY(-100%); } }
body.loading { overflow: hidden; }

/* ---- Scroll progress bar ---------------------------------- */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--brass);
	z-index: 60;
	transition: width 0.15s ease-out;
}

/* ---- Announcement marquee --------------------------------- */
.announce {
	background: var(--midnight);
	color: var(--cream);
	padding: 12px 20px;
	font-family: var(--font-sans);
	font-size: 10px;
	line-height: 1.65; /* wireframe inherits body 1.65 → bar ≈ 40px */
	letter-spacing: 0.36em;
	text-transform: uppercase;
	overflow: hidden;
	white-space: nowrap;
}
.announce-track {
	display: inline-flex;
	gap: 80px;
	animation: announceScroll 60s linear infinite;
	will-change: transform;
}
.announce-item { display: inline-flex; gap: 80px; align-items: center; flex-shrink: 0; }
.announce-item span { display: inline-flex; align-items: center; gap: 14px; }
.announce-item .diamond { color: var(--brass-pale); font-size: 7px; }
/* JS duplicates the track content once, so -50% = one full loop. */
@keyframes announceScroll { to { transform: translateX(-50%); } }

/* ---- Sticky / shrink header (Astra selectors) -------------
   Astra's transparent-header module sets the header to
   position:absolute with a transparent bar. We override it so
   the header is a solid, sticky cream bar. Selectors are scoped
   to .ast-theme-transparent-header for enough specificity to win
   without !important where avoidable. */
.site-header,
.ast-theme-transparent-header .site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.main-header-bar,
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
	background: rgba(244, 237, 224, 0.96); /* --cream @ .96 */
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 0.5px solid var(--line);
	transition: padding 0.4s ease, box-shadow 0.4s ease;
}
/* Sticky-header separator on MOBILE (all pages). At <=921px Astra renders
   #ast-mobile-header, whose visible bar/wrap didn't carry the divider. Force
   a bottom border on the mobile header + its bar so the separator line under
   the sticky header is consistent with desktop everywhere. */
@media (max-width: 921px) {
	#ast-mobile-header,
	#ast-mobile-header .ast-mobile-header-wrap,
	#ast-mobile-header .main-header-bar,
	#ast-mobile-header .ast-primary-header-bar {
		border-bottom: 0.5px solid var(--line);
	}
	/* avoid a double line: keep the border only on the outermost mobile wrap */
	#ast-mobile-header .main-header-bar,
	#ast-mobile-header .ast-primary-header-bar { border-bottom: 0; }

	/* Hamburger icon: dark ink on the cream header (Astra defaults it to white,
	   which was nearly invisible). Colors the trigger border + the menu SVG. */
	#ast-mobile-header .main-header-menu-toggle {
		color: var(--ink);
		border-color: var(--ink);
	}
	#ast-mobile-header .main-header-menu-toggle .ast-mobile-svg,
	#ast-mobile-header .main-header-menu-toggle svg {
		fill: var(--ink);
		color: var(--ink);
	}
}
/* Neutralize transparent-header's absolute overlay + inherited
   light logo/link colors so content isn't hidden under the bar. */
.ast-theme-transparent-header .main-header-bar-wrap,
.ast-theme-transparent-header .ast-above-header-wrap,
.ast-theme-transparent-header .ast-below-header-wrap {
	position: static;
}
.ast-primary-header-bar .site-primary-header-wrap,
.main-header-bar .ast-container {
	padding-top: 22px;   /* wireframe .nav-inner padding: 22px 50px */
	padding-bottom: 22px;
	min-height: 0; /* remove Astra's 80px min so the bar is only as tall as needed */
	/* widen to the wireframe's 1600px with 50px side padding so the nav sits at
	   the far-left and the icons at the far-right edge of the header */
	max-width: 1600px;
	padding-left: 50px;
	padding-right: 50px;
	transition: padding 0.4s ease;
}
/* Header height collapse — DESKTOP ONLY (min-width:922px).
   These min-height:0 / height:auto overrides shrink Astra's tall desktop
   header to track the logo. They must NOT apply on mobile: the mobile menu
   lives inside .ast-builder-layout-element / .site-header-focus-item, and
   zeroing those collapses Astra's off-canvas/inline menu container so the
   hamburger opens nothing. Below 922px we leave Astra's mobile header +
   native menu toggle completely untouched. */
@media (min-width: 922px) {
	.main-header-bar .ast-container .site-header-section,
	.main-header-bar .site-header-primary-section-center,
	.main-header-bar .ast-builder-grid-row,
	.main-header-bar .site-primary-header-wrap { min-height: 0 !important; }
	/* Astra sets a fixed height:80px on the header grid row, its sections, AND
	   the builder layout elements. Collapse all to content height so the header
	   tracks the logo (wireframe ≈ 56px). */
	.main-header-bar .site-primary-header-wrap .ast-builder-grid-row,
	.main-header-bar .site-header-section,
	.main-header-bar .ast-builder-layout-element,
	.main-header-bar .ast-builder-layout-element.site-header-focus-item {
		height: auto !important; min-height: 0 !important;
	}
}
/* nav hard-left, icons hard-right within their columns */
.site-header-primary-section-left { justify-content: flex-start; }
.site-header-primary-section-right { justify-content: flex-end; }
/* Shrink-on-scroll driven by body.scrolled (site JS). */
body.scrolled .ast-primary-header-bar .site-primary-header-wrap,
body.scrolled .main-header-bar .ast-container {
	padding-top: 12px;   /* wireframe body.scrolled .nav-inner: 12px 50px */
	padding-bottom: 12px;
}
body.scrolled .main-header-bar {
	box-shadow: 0 1px 30px rgba(10, 9, 8, 0.06);
}

/* ---- Centered TEXT logo (wireframe .logo-mark / .logo-sub) - */
.site-branding.ast-site-identity,
.freaura-logo-wrap { text-align: center; }
/* Astra's .site-branding adds ~14px top/bottom padding that inflated the
   header to ~96px; remove it so the bar tracks the logo height (wireframe
   header ≈ 62px). */
.main-header-bar .site-branding.ast-site-identity { padding-top: 0; padding-bottom: 0; }
.freaura-logo { display: inline-block; text-align: center; text-decoration: none; }
.freaura-logo .logo-mark {
	font-family: var(--font-display);
	font-size: 30px;   /* wireframe .logo-mark */
	font-style: italic;
	letter-spacing: 0.04em;
	display: block;
	line-height: 1;
	color: var(--ink);
	transition: font-size 0.4s ease; /* smooth shrink on scroll */
}
.freaura-logo .logo-sub {
	font-family: var(--font-sans);
	font-size: 9px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--brass);
	margin-top: 6px;   /* wireframe .logo-sub margin-top */
	line-height: 2;
	display: block;
	transition: margin-top 0.4s ease; /* keep the shrink smooth on scroll */
}

/* ---- Nav links: uppercase + center-out underline ----------
   Selectors match Astra's .ast-builder-menu-1 .menu-item > .menu-link
   specificity so the wireframe colors win without !important.
   Base color = --ink (#1a1815, inherited from body in wireframe),
   weight 300 (wireframe nav inherits body font-weight:300). */
/* wireframe nav-links gap: 36px between items */
.main-header-menu { gap: 36px; }
.main-header-menu > .menu-item { margin: 0; }
.ast-builder-menu-1 .main-header-menu .menu-link,
.main-header-menu .menu-item > .menu-link {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.2; /* Astra forces 80px line-height → huge box + underline gap; reset it */
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	position: relative;
	padding: 6px 0; /* wireframe: line sits 6px below the text */
	transition: color 0.3s ease;
}
.main-header-menu .menu-item, .main-header-menu .ast-menu-toggle { line-height: 1.2; }
.main-header-menu .menu-item > .menu-link::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0; /* wireframe underline sits at the link's bottom edge */
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background: var(--brass);
	transition: width 0.4s cubic-bezier(.2, .7, .2, 1);
}
.ast-builder-menu-1 .main-header-menu .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu .current-menu-item > .menu-link,
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .menu-item > .menu-link[aria-current="page"] {
	color: var(--brass);
}
.main-header-menu .menu-item > .menu-link:hover::after,
.main-header-menu .current-menu-item > .menu-link::after,
.main-header-menu .menu-item > .menu-link[aria-current="page"]::after {
	width: 24px;
}

/* ---- Header right area: TEXT links (Account / Bag) instead of icons ----
   Wireframe shows text links, not the Astra bag/user icons. We hide the
   icon glyphs and render uppercase text labels via ::after, keeping Astra's
   real links (so cart + account still work). */
.ast-header-account .ast-header-account-wrap,
.ast-header-woo-cart .ast-cart-menu-wrap {
	position: relative;
}
/* hide the account (user) SVG/icon, show "Account" text.
   The label goes on the <a> (.ast-header-account-link) — NOT the outer wrap —
   so the visible text is inside the clickable anchor and navigates to
   /my-account/. (Putting it on the wrap left the link 0x0 / unclickable.) */
.ast-header-account .ast-header-account-wrap svg,
.ast-header-account .ahfb-svg-iconset { display: none !important; }
.ast-header-account .ast-header-account-link {
	display: inline-flex; align-items: center;
}
.ast-header-account .ast-header-account-link::after {
	content: 'Account';
	font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--ink); transition: color 0.3s ease;
}
.ast-header-account .ast-header-account-link:hover::after { color: var(--brass); }

/* Contact link (header-html-1) — wireframe nav-icons order: Contact, Account, Bag.
   Kept separate from the existing primary-menu Contact item (left side) per client
   request — that one stays as-is for now and will be removed later. */
.site-header-primary-section-right .frx-header-contact-link {
	font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--ink); text-decoration: none;
	transition: color 0.3s ease; display: inline-flex; align-items: center;
}
.site-header-primary-section-right .frx-header-contact-link:hover { color: var(--brass); }

/* Order: Search · Contact · Account · Bag.
   NOTE: the flex item class for the html builder slot is `.ast-header-html-1`
   (the wrapper Astra renders around the component) — NOT `.ast-builder-html-element`
   (that's an inner div and isn't a flex child, so `order` on it has no effect). */
.site-header-primary-section-right .ast-header-woo-cart { order: 4; }
.site-header-primary-section-right .ast-header-account { order: 3; }
.site-header-primary-section-right .ast-header-html-1 { order: 2; }
.site-header-primary-section-right .ast-header-search { order: 1; }
/* The last icon element (bag) carries a trailing 10px padding that made the
   right edge inset 10px more than the left nav (asymmetric). Zero it so the
   icons sit flush to the 50px container edge, matching the wireframe's
   symmetric 1fr auto 1fr nav. */
.site-header-primary-section-right .ast-builder-layout-element:last-child,
.site-header-primary-section-right .ast-header-woo-cart {
	padding-right: 0 !important; margin-right: 0 !important;
}

/* hide the cart (bag) SVG/icon, show "Bag" text + emerald count badge.
   Astra markup: .cart-container > .ast-addon-cart-wrap > i.ast-icon-shopping-bag[data-cart-total] */
.ast-header-woo-cart .cart-container .icon-bag,
.ast-header-woo-cart .cart-container .ast-icon svg,
.ast-header-woo-cart .cart-container i.astra-icon > .ast-icon { display: none !important; }
.ast-header-woo-cart .cart-container i.ast-icon-shopping-bag {
	display: inline-flex; align-items: center; gap: 6px; font-style: normal;
	line-height: 1; vertical-align: middle; height: auto !important; overflow: visible;
}
.ast-header-woo-cart .cart-container i.ast-icon-shopping-bag::before {
	content: 'Bag';
	display: inline-flex; align-items: center;
	font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--ink); font-style: normal; line-height: 1;
	transition: color 0.3s ease;
}
/* emerald circular count badge, parallel to the "Bag" text (wireframe .bag-count).
   position:static !important overrides Astra's absolute-positioned count so the
   badge flows inline beside "Bag" instead of overlapping it. */
.ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total]::after {
	content: attr(data-cart-total);
	position: static !important;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; box-sizing: border-box;
	min-width: 18px; width: auto; height: 18px; padding: 0 5px; margin: 0; inset: auto;
	background: var(--emerald); color: var(--cream); border-radius: 50%;
	font-family: var(--font-sans); font-size: 9px; letter-spacing: 0; font-style: normal; line-height: 1;
	transform: none;
}
.ast-header-woo-cart .cart-container:hover i.ast-icon-shopping-bag::before { color: var(--brass); }
/* hide Astra's own bubble count */
.ast-header-woo-cart .cart-container .ast-cart-menu-wrap .count,
.ast-header-woo-cart .cart-container .astra-cart-drawer-title { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HEADER BAG — FOUR VARIATIONS (keep exactly ONE active at a time)
   ═══════════════════════════════════════════════════════════════════════
   - VARIATION 1 (ACTIVE)     → bag ICON + corner badge, logo CENTER
   - VARIATION 2 (commented)  → "Bag" TEXT + badge,     logo CENTER
   - VARIATION 3 (commented)  → "Bag" TEXT + badge,     logo LEFT
   - VARIATION 4 (commented)  → bag ICON + corner badge, logo LEFT

   NOTE ON LOGO POSITION: logo-center (Var 1/2) vs logo-left (Var 3/4) is an
   Astra header-CONFIG setting, not CSS. Current config = logo CENTER. To use a
   logo-LEFT variation (3 or 4), set logo → primary_left, primary_center empty.
   Switching between Var 1 and Var 2 needs NO config change (both logo-center);
   likewise Var 3 ↔ Var 4 (both logo-left).
   ─────────────────────────────────────────────────────────────────────── */

/* VARIATION 1 — ACTIVE (bag ICON + corner badge, logo CENTER).
   Same bag icon + badge as Variation 4, but the logo stays CENTERED (default
   config: logo → primary_center). */
/* re-enable pointer events (Astra flyout mode disables the cart link) */
#ast-mobile-header .ast-header-woo-cart .cart-container,
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag,
#ast-mobile-header .ast-header-woo-cart .cart-container .ast-icon {
	pointer-events: auto !important;
}
/* show Astra's real bag SVG, hide the desktop "Bag" text label */
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag::before {
	content: none !important;
	display: none !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container .ast-icon.icon-bag,
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag svg {
	display: inline-block !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag svg {
	width: 22px; height: 22px;
	fill: var(--ink);
	transition: fill 0.3s ease;
}
#ast-mobile-header .ast-header-woo-cart .cart-container:hover i.ast-icon-shopping-bag svg {
	fill: var(--brass);
}
/* circular count badge on the icon's top-right corner (cream ring). */
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total]::after {
	content: attr(data-cart-total);
	position: absolute !important;
	top: -8px !important; right: -9px !important;
	bottom: auto !important; left: auto !important;
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; min-width: 20px; padding: 0; box-sizing: border-box;
	background: var(--emerald); color: var(--cream); border-radius: 50%;
	border: 1.5px solid var(--cream);
	font-family: var(--font-sans); font-size: 10px; font-weight: 500;
	letter-spacing: 0; line-height: 1; font-style: normal; transform: none !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total="0"]::after {
	display: none;
}
/* order: bag before hamburger, small gap */
#ast-mobile-header .site-header-primary-section-right {
	display: flex; align-items: center;
}
#ast-mobile-header .site-header-primary-section-right .ast-header-woo-cart {
	order: 1;
	margin-right: 8px !important;
	padding: 0 !important;
}
#ast-mobile-header .site-header-primary-section-right .ast-mobile-menu-buttons,
#ast-mobile-header .site-header-primary-section-right .ast-button-wrap,
#ast-mobile-header .site-header-primary-section-right [data-section="section-header-mobile-trigger"] {
	order: 2;
}
/* ═══════════════════════ END VARIATION 1 ═══════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HEADER BAG — VARIATION 2 (INACTIVE): "Bag" TEXT + badge, logo CENTER
   ═══════════════════════════════════════════════════════════════════════
   "Bag" text label + circular emerald count badge, logo centered. To activate:
   un-comment this block, comment the others, and restore the centered-logo
   config (logo → primary_center, primary_left empty).
   ─────────────────────────────────────────────────────────────────────── */
/*
#ast-mobile-header .ast-header-woo-cart .cart-container,
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag,
#ast-mobile-header .ast-header-woo-cart .cart-container .ast-icon {
	pointer-events: auto !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container {
	display: inline-flex; align-items: center;
	white-space: nowrap;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag {
	position: static;
	display: inline-flex; align-items: center;
	width: auto; height: auto; white-space: nowrap;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag svg {
	display: none !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag::before {
	content: 'Bag';
	white-space: nowrap;
	display: inline-flex; align-items: center;
	font-family: var(--font-sans); font-size: 11px; font-weight: 400;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink); font-style: normal; line-height: 1;
	transition: color 0.3s ease;
}
#ast-mobile-header .ast-header-woo-cart .cart-container:hover i.ast-icon-shopping-bag::before {
	color: var(--brass);
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total]::after {
	content: attr(data-cart-total);
	position: static !important;
	margin-left: 3px; inset: auto; transform: none !important;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; box-sizing: border-box;
	min-width: 18px; width: auto; height: 18px; padding: 0 5px;
	background: var(--emerald); color: var(--cream); border-radius: 50%;
	font-family: var(--font-sans); font-size: 9px; font-weight: 400;
	letter-spacing: 0; line-height: 1; font-style: normal;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total="0"]::after {
	display: none;
}
#ast-mobile-header .site-header-primary-section-right {
	display: flex; align-items: center;
}
#ast-mobile-header .site-header-primary-section-right .ast-header-woo-cart {
	order: 1;
	margin-right: 4px !important;
	padding: 0 !important;
}
#ast-mobile-header .site-header-primary-section-right .ast-mobile-menu-buttons,
#ast-mobile-header .site-header-primary-section-right .ast-button-wrap,
#ast-mobile-header .site-header-primary-section-right [data-section="section-header-mobile-trigger"] {
	order: 2;
}
*/
/* ═══════════════════════ END VARIATION 2 ═══════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HEADER — VARIATION 3 (INACTIVE): LOGO LEFT + "Bag" TEXT + badge
   ═══════════════════════════════════════════════════════════════════════
   Logo moved to the LEFT; bag shows "Bag" text + circular badge on the right,
   before the hamburger. The logo move is a header-CONFIG change (Astra:
   logo → primary_left, primary_center empty), applied via wp-cli — NOT this
   CSS. Backup of the centered-logo config:
   migration-docs/working-notes/header-mobile-items.var2.json.

   To ACTIVATE Variation 3: un-comment this block, comment out Variation 4,
   and keep the logo-left config. (The logo-left config is shared with Var 4,
   so no config change is needed when switching between Var 3 and Var 4.)
   ─────────────────────────────────────────────────────────────────────── */
/*
#ast-mobile-header .ast-header-woo-cart .cart-container,
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag,
#ast-mobile-header .ast-header-woo-cart .cart-container .ast-icon {
	pointer-events: auto !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container {
	display: inline-flex; align-items: center;
	white-space: nowrap;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag {
	position: static;
	display: inline-flex; align-items: center;
	width: auto; height: auto; white-space: nowrap;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag svg {
	display: none !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag::before {
	content: 'Bag';
	white-space: nowrap;
	display: inline-flex; align-items: center;
	font-family: var(--font-sans); font-size: 11px; font-weight: 400;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink); font-style: normal; line-height: 1;
	transition: color 0.3s ease;
}
#ast-mobile-header .ast-header-woo-cart .cart-container:hover i.ast-icon-shopping-bag::before {
	color: var(--brass);
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total]::after {
	content: attr(data-cart-total);
	position: static !important;
	margin-left: 3px; inset: auto; transform: none !important;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; box-sizing: border-box;
	min-width: 18px; width: auto; height: 18px; padding: 0 5px;
	background: var(--emerald); color: var(--cream); border-radius: 50%;
	font-family: var(--font-sans); font-size: 9px; font-weight: 400;
	letter-spacing: 0; line-height: 1; font-style: normal;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total="0"]::after {
	display: none;
}
#ast-mobile-header .site-header-primary-section-right {
	display: flex; align-items: center;
}
#ast-mobile-header .site-header-primary-section-right .ast-header-woo-cart {
	order: 1;
	margin-right: 4px !important;
	padding: 0 !important;
}
#ast-mobile-header .site-header-primary-section-right .ast-mobile-menu-buttons,
#ast-mobile-header .site-header-primary-section-right .ast-button-wrap,
#ast-mobile-header .site-header-primary-section-right [data-section="section-header-mobile-trigger"] {
	order: 2;
}
#ast-mobile-header .site-header-primary-section-left {
	justify-content: flex-start;
}
#ast-mobile-header .site-header-primary-section-left .site-branding,
#ast-mobile-header .site-header-primary-section-left .ast-site-identity {
	text-align: left;
}
*/
/* ═══════════════════════ END VARIATION 3 ═══════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE HEADER — VARIATION 4 (INACTIVE): LOGO LEFT + bag ICON + badge
   ═══════════════════════════════════════════════════════════════════════
   Logo on the LEFT; the bag shows Astra's real bag SVG icon with an emerald
   circular count badge on its top-right corner, before the hamburger.

   To ACTIVATE: un-comment this block, comment out Variation 1, and set the
   logo-LEFT config (logo → primary_left, primary_center empty).
   ─────────────────────────────────────────────────────────────────────── */
/* VARIATION 4 — INACTIVE (bag ICON + corner badge, logo LEFT). */
/*

#ast-mobile-header .ast-header-woo-cart .cart-container,
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag,
#ast-mobile-header .ast-header-woo-cart .cart-container .ast-icon {
	pointer-events: auto !important;
}

#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag::before {
	content: none !important;
	display: none !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container .ast-icon.icon-bag,
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag svg {
	display: inline-block !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag svg {
	width: 22px; height: 22px;
	fill: var(--ink);
	transition: fill 0.3s ease;
}
#ast-mobile-header .ast-header-woo-cart .cart-container:hover i.ast-icon-shopping-bag svg {
	fill: var(--brass);
}

#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total]::after {
	content: attr(data-cart-total);
	position: absolute !important;
	top: -8px !important; right: -9px !important;
	bottom: auto !important; left: auto !important;
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; min-width: 20px; padding: 0; box-sizing: border-box;
	background: var(--emerald); color: var(--cream); border-radius: 50%;
	border: 1.5px solid var(--cream);
	font-family: var(--font-sans); font-size: 10px; font-weight: 500;
	letter-spacing: 0; line-height: 1; font-style: normal; transform: none !important;
}
#ast-mobile-header .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total="0"]::after {
	display: none;
}

#ast-mobile-header .site-header-primary-section-right {
	display: flex; align-items: center;
}
#ast-mobile-header .site-header-primary-section-right .ast-header-woo-cart {
	order: 1;
	margin-right: 8px !important;
	padding: 0 !important;
}
#ast-mobile-header .site-header-primary-section-right .ast-mobile-menu-buttons,
#ast-mobile-header .site-header-primary-section-right .ast-button-wrap,
#ast-mobile-header .site-header-primary-section-right [data-section="section-header-mobile-trigger"] {
	order: 2;
}

#ast-mobile-header .site-header-primary-section-left {
	justify-content: flex-start;
}
#ast-mobile-header .site-header-primary-section-left .site-branding,
#ast-mobile-header .site-header-primary-section-left .ast-site-identity {
	text-align: left;
}
*/
/* ═══════════════════════ END VARIATION 4 ═══════════════════════ */


/* ---- MOBILE POPUP: Account + Bag on the dark drawer ----
   The Account/Bag labels above are --ink (dark) for the cream desktop header;
   on the dark #ast-mobile-popup they were invisible. Here we:
   (1) recolor the labels + badge to cream so they read on the dark drawer, and
   (2) make the Account link fill its row so the whole "Account" area is
       clickable (its <a> was collapsing to 0x0 with the icon hidden). */
#ast-mobile-popup .ast-header-account .ast-header-account-link::after,
#ast-mobile-popup .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag::before {
	color: var(--cream);
}
#ast-mobile-popup .ast-header-account .ast-header-account-link:hover::after,
#ast-mobile-popup .ast-header-woo-cart .cart-container:hover i.ast-icon-shopping-bag::before {
	color: var(--brass-pale);
}
/* Account: center the label + give the link a real tap target (>=44px). */
#ast-mobile-popup .ast-header-account .ast-header-account-wrap,
#ast-mobile-popup .ast-header-account .ast-header-account-inner-wrap {
	display: flex; justify-content: center; align-items: center; width: 100%;
}
#ast-mobile-popup .ast-header-account .ast-header-account-link {
	justify-content: center; width: auto; min-height: 44px; padding: 10px 16px;
}

/* Contact (html-1) in the mobile drawer — same treatment as Account/Bag:
   cream label on the dark drawer, brass-pale on hover/tap, centered, real
   tap target. Sits directly under the Shop/Journal/The House menu items. */
#ast-mobile-popup .ast-header-html-1 .frx-header-contact-link {
	display: flex; justify-content: center; align-items: center; width: 100%;
	min-height: 0; padding: 0;
	font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--cream); text-decoration: none;
	transition: color 0.3s ease;
}
#ast-mobile-popup .ast-header-html-1 .frx-header-contact-link:hover {
	color: var(--brass-pale);
}
#ast-mobile-popup .ast-header-html-1 p { margin: 0; width: 100%; }
/* keep the emerald count badge legible on the dark drawer */
#ast-mobile-popup .ast-header-woo-cart .cart-container i.ast-icon-shopping-bag[data-cart-total]::after {
	background: var(--emerald); color: var(--cream);
}

/* ---- Even vertical rhythm: match Bag/Account to the menu-item pitch ----
   Menu items (Shop…Contact) sit on a ~61px pitch (25px row + ~36px gap). The
   Bag/Account widgets shipped with 15px padding and taller inner wrappers, so
   the Contact→Bag→Account gaps looked tighter/uneven. Normalize ONLY the two
   widgets to the same row rhythm (leave the menu items as-is). */
#ast-mobile-popup .ast-header-woo-cart,
#ast-mobile-popup .ast-header-account,
#ast-mobile-popup .ast-header-html-1 {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	margin: 0 !important;
}
/* the first widget (Bag) sits directly under Contact, which has less trailing
   space than the menu-item gap — add a little top margin so Contact→Bag matches
   the ~61px rhythm of the other rows. */
#ast-mobile-popup .ast-header-woo-cart { margin-top: 16px !important; }
/* Contact (html-1) sits directly under The House with no gap contributed by
   the menu wrapper (unlike the 36px flex-gap between menu items), and its
   box was shorter than the ~61px menu pitch. margin-top closes the gap up to
   The House; the extra 4px of padding-bottom closes the gap down to Account.
   Measured via getBoundingClientRect center-to-center: Shop→Journal→The House
   = 61.19px each; with these values The House→Contact→Account also = ~61.1px. */
#ast-mobile-popup .ast-header-html-1 {
	margin-top: 20px !important;
	padding-bottom: 22px !important;
}
/* zero the widgets' inner wrappers so the row padding above is the ONLY thing
   controlling their height (keeps them the same height as menu rows). */
#ast-mobile-popup .ast-header-woo-cart .ast-cart-menu-wrap,
#ast-mobile-popup .ast-header-woo-cart .cart-container,
#ast-mobile-popup .ast-header-account .ast-header-account-wrap,
#ast-mobile-popup .ast-header-account .ast-header-account-inner-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
}
#ast-mobile-popup .ast-header-account .ast-header-account-link {
	min-height: 0; padding: 0;
}

/* Respect reduced-motion: kill the marquee + curtain animation. */
@media (prefers-reduced-motion: reduce) {
	.announce-track { animation: none; }
	.curtain { animation: none; display: none; }
	.curtain-mark span,
	.curtain-divider,
	.curtain-sub { animation: none; opacity: 1; transform: none; }
	body.loading { overflow: visible; }
}


/* ============================================================
   STEP 4b — FOOTER
   Custom 5-column footer (The House / Shop / About / Service /
   Follow) rendered by the child theme's freaura_render_footer()
   which replaces Astra's default footer output. Ported from
   freaura-spa.html, tokenized.
   ============================================================ */
.freaura-footer {
	background: var(--midnight);
	color: var(--cream);
	padding: 100px 50px 40px;
	font-family: var(--font-sans);
}
.freaura-footer .footer-inner {
	max-width: 1400px;
	margin: 0 auto;
}

/* Top brand mark */
.freaura-footer .footer-top {
	text-align: center;
	margin-bottom: 80px;
	padding-bottom: 60px;
	border-bottom: 0.5px solid rgba(244, 237, 224, 0.1);
}
.freaura-footer .footer-mark {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 62px;
	color: var(--cream);
	line-height: 1.15;   /* room for italic descenders above the sub */
	letter-spacing: 0.02em;
}
.freaura-footer .footer-mark-sub {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--brass-pale);
	margin-top: 14px;   /* a touch more breathing room from the title */
}

/* 5-column grid: 2fr for "The House" text + 4× link columns */
.freaura-footer .footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 60px;
	margin: 0 auto 60px;
}
.freaura-footer .footer-about p {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 19px;
	color: rgba(244, 237, 224, 0.6);
	line-height: 1.8;
	max-width: 320px;
}
.freaura-footer .footer-col h4 {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	margin-bottom: 22px;
	color: var(--brass-pale);
	font-weight: 500;
}
.freaura-footer .footer-col ul { list-style: none; margin: 0; padding: 0; }
.freaura-footer .footer-col li { margin-bottom: 12px; }
.freaura-footer .footer-col a {
	color: rgba(244, 237, 224, 0.65);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	transition: color 0.3s ease;
}
.freaura-footer .footer-col a:hover { color: var(--brass-pale); }

/* Bottom bar */
.freaura-footer .footer-bottom {
	border-top: 0.5px solid rgba(244, 237, 224, 0.1);
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	font-family: var(--font-sans);   /* Inter — matches wireframe */
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: rgba(244, 237, 224, 0.5);
}
.freaura-footer .footer-bottom-links { display: flex; gap: 28px; }
.freaura-footer .footer-bottom-links a {
	font-family: var(--font-sans);   /* Inter, not the inherited serif */
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(244, 237, 224, 0.65);
	text-decoration: none;
	transition: color 0.3s ease;
}
.freaura-footer .footer-bottom-links a:hover { color: var(--brass-pale); }

/* Responsive: two-column footer, centered as a group (tablet/mobile).
   Enterprise-standard mobile footer: the link columns are centered within the
   viewport (balanced left/right margins) while the link TEXT stays left-aligned
   inside each column. Content-sized columns + justify-content:center achieves
   this without hard-coding widths. */
@media (max-width: 921px) {
	.freaura-footer { padding: 70px 24px 32px; }
	.freaura-footer .footer-grid {
		width: 100%;               /* fill the footer so justify-content can center */
		grid-template-columns: repeat(2, max-content);
		justify-content: center;   /* center the 2-column block horizontally */
		gap: 44px 72px;            /* row gap / column gap between the two columns */
	}
	/* "The House" spans the full width and is centered above the link columns */
	.freaura-footer .footer-about {
		grid-column: 1 / -1;
		text-align: center;
	}
	.freaura-footer .footer-about p { margin-left: auto; margin-right: auto; }
	.freaura-footer .footer-mark { font-size: 40px; }
	/* link text remains left-aligned within each centered column
	   (but NOT "The House" — that column stays centered, set above) */
	.freaura-footer .footer-col:not(.footer-about) { text-align: left; }
}
@media (max-width: 544px) {
	/* keep the two centered link columns on phones (do NOT collapse to one).
	   Use two EQUAL columns that fill the width so the block is truly centered
	   (max-content columns left a lopsided block hugging the left on 320px). */
	.freaura-footer .footer-grid {
		width: 100%;
		grid-template-columns: 1fr 1fr;
		justify-content: stretch; justify-items: center;
		gap: 40px 24px;
	}
	/* link columns: center each column's block, keep link text left-aligned */
	.freaura-footer .footer-col:not(.footer-about) { text-align: left; }
	.freaura-footer .footer-bottom { flex-direction: column; text-align: center; }
}

/* Small phones (320–375px) — shrink the logo tagline so "Luxury Sleepwear"
   sits comfortably under the wordmark without crowding the header. */
@media (min-width: 320px) and (max-width: 375px) {
	.freaura-logo .logo-sub {
		font-size: 8px;
	}
	/* curtain intro "Freaura": trim the size + tracking so the (nowrap) word
	   fits one line inside a 320px viewport without touching the edges. */
	.curtain-mark {
		font-size: 34px;
		letter-spacing: 0.24em;
		padding-left: 0.24em;
	}
	/* curtain-sub tagline ("Luxury Sleepwear · est. MMXXVI") was wrapping to
	   two lines at 320px because of the 0.5em letter-spacing — tighten
	   tracking + size and force it onto one line. */
	.curtain-sub {
		font-size: 9px;
		letter-spacing: 0.2em;
		white-space: nowrap;
	}
}