/*
Theme Name: BROEA — Luxury
Theme URI: https://broea.com
Description: BROEA luxury child theme for Blocksy. A warm, editorial, gallery-grade identity built around cream, ink, champagne gold and clay. Cormorant Garamond display, EB Garamond body, Jost labels, square corners and generous whitespace — tuned for floral bath balls and handmade soaps.
Author: BROEA
Template: blocksy
Version: 2.0.0
Text Domain: broea-child
*/

/* =============================================================
   DESIGN TOKENS
   ============================================================= */
:root,
body {
	/* Surfaces */
	--cream:        #F7F1E8; /* primary background */
	--cream-deep:   #EFE7D9; /* alternating sections */
	--white:        #FDFBF6; /* cards */
	--champagne:    #D9C19A; /* accent block background */
	--champagne-lt: #E7D7B8;

	/* Ink */
	--ink:          #1F1D1B; /* headings + text */
	--ink-soft:     #2A2622;
	--stone:        #7A736A; /* secondary text */
	--mist:         #B3A99C; /* muted */
	--line:         #DDD3C4; /* hairlines */

	/* Accents */
	--gold:         #B6914F;
	--gold-deep:    #9A7838;
	--clay:         #B1564D;

	/* Map onto Blocksy palette so the whole site follows */
	--theme-palette-color-1: #1F1D1B;
	--theme-palette-color-2: #B6914F;
	--theme-palette-color-3: #1F1D1B;
	--theme-palette-color-4: #2A2622;
	--theme-palette-color-5: #DDD3C4;
	--theme-palette-color-6: #EFE7D9;
	--theme-palette-color-7: #F7F1E8;
	--theme-palette-color-8: #FDFBF6;
	--theme-text-color: var(--ink-soft);
	--theme-headings-color: var(--ink);
	--theme-link-initial-color: var(--ink);
	--theme-link-hover-color: var(--gold);

	/* Type — matched to b2b.broea.com (Cormorant Garamond + Noto Serif TC) */
	--serif-display: "Cormorant Garamond", "Noto Serif TC", Georgia, "Times New Roman", serif;
	--serif-body:    "Noto Serif TC", Georgia, "Times New Roman", serif;
	--sans:          "Cormorant Garamond", "Noto Serif TC", Georgia, serif; /* used for tracked uppercase labels */
	--gold-grad:     linear-gradient(100deg, #9A7838 0%, #CAA45F 22%, #F3E3BD 38%, #CAA45F 54%, #9A7838 72%, #CAA45F 100%);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--container: 1280px;
	--container-narrow: 860px;
}

/* =============================================================
   BASE & TYPOGRAPHY
   ============================================================= */
body {
	font-family: var(--serif-body) !important;
	font-weight: 400;
	font-size: 1.06rem;
	color: var(--ink);
	background-color: var(--cream);
	/* b2b ambient lighting: warm light poured from the top-centre */
	background-image: radial-gradient(135% 80% at 50% -8%, #FFFEFB 0%, #F8F2E9 46%, #EFE7D9 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	line-height: 1.72;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .ct-block-title,
.woocommerce-loop-product__title, .product_title,
.stk-block-heading__text {
	font-family: var(--serif-display) !important;
	color: var(--ink);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: 0.005em;
}
h1, .entry-title, .product_title { font-weight: 400; }

p { color: var(--ink-soft); }

a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.35s var(--ease);
}
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: #fff; }
img { border-radius: 0; }
html { scroll-behavior: smooth; }

/* Shared helpers */
.broea-eyebrow,
.broea-section__eyebrow {
	font-family: var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--gold);
	display: inline-block;
}

/* =============================================================
   BUTTONS — square, letter-spaced, ink fill / gold hover
   ============================================================= */
.wp-block-button__link, .wp-element-button,
button.button, a.button, .button, .ct-button,
input[type="submit"], .stk-button,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .added_to_cart,
.broea-btn {
	font-family: var(--sans) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.76rem !important;
	line-height: 1.2;
	padding: 1.05em 2.4em !important;
	border-radius: 0 !important;
	background-color: var(--ink) !important;
	color: var(--cream) !important;
	border: 1px solid var(--ink) !important;
	box-shadow: none !important;
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
				border-color 0.4s var(--ease), transform 0.4s var(--ease) !important;
}
.wp-block-button__link:hover, .wp-element-button:hover,
button.button:hover, a.button:hover, .button:hover, .ct-button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover,
.woocommerce #respond input#submit:hover, .broea-btn:hover {
	background-color: var(--gold) !important;
	border-color: var(--gold) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* Outline variant */
.is-style-outline .wp-block-button__link,
.broea-btn--ghost {
	background-color: transparent !important;
	color: var(--ink) !important;
	border: 1px solid var(--ink) !important;
}
.is-style-outline .wp-block-button__link:hover,
.broea-btn--ghost:hover {
	background-color: var(--ink) !important;
	color: var(--cream) !important;
}

/* =============================================================
   HEADER / NAVIGATION
   ============================================================= */
#header.ct-header {
	transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease),
				backdrop-filter 0.5s var(--ease);
}
body.broea-scrolled #header.ct-header {
	background-color: rgba(247, 241, 232, 0.85) !important;
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 var(--line), 0 14px 34px -26px rgba(31, 29, 27, 0.6);
}
#header .site-logo-container img, #header .ct-logo-container img {
	transition: transform 0.5s var(--ease);
}
body.broea-scrolled #header .site-logo-container img,
body.broea-scrolled #header .ct-logo-container img { transform: scale(0.86); }

.ct-main-navigation ul li a, .menu li a {
	font-family: var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.8rem;
	font-weight: 400;
}
.ct-main-navigation > ul > li > a::after { background-color: var(--gold) !important; }

/* =============================================================
   GENERIC BLOCK / STACKABLE PAGES (About, Contact, etc.)
   ============================================================= */
.entry-content .stk-block-heading__text {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 500;
}
.stk-block-heading:has(.has-text-align-center)::after {
	content: ""; display: block; width: 58px; height: 1px;
	background: var(--gold); margin: 1.1rem auto 0;
}
.entry-content .stk-block-text:has(.has-text-align-center) .stk-block-text__text {
	color: var(--stone);
}

/* =============================================================
   WOOCOMMERCE — PRODUCT LOOP (shop / archives)
   ============================================================= */
.woocommerce ul.products, ul.products { gap: 2.6rem 2rem; }

.woocommerce ul.products li.product, .products .product {
	text-align: center; background: transparent;
}
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure {
	position: relative; display: block; overflow: hidden; border-radius: 0;
}
.woocommerce ul.products li.product .ct-media-container img,
.products .product img {
	width: 100%; aspect-ratio: 1/1; object-fit: contain;
	background: transparent !important;
	transition: transform 1.1s var(--ease), filter 1.1s var(--ease) !important;
}
.woocommerce ul.products li.product:hover .ct-media-container img,
.products .product:hover img { transform: scale(1.07); filter: brightness(0.97); }

/* (VIEW PRODUCT overlay removed — caused a dark bar on press/hover) */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products .product .woocommerce-loop-product__title {
	font-family: var(--serif-display) !important;
	font-size: 1.4rem; font-weight: 500; color: var(--ink);
	padding: 1.1rem 0 0.3rem; display: inline-block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title::after {
	content: ""; display: block; width: 0; height: 1px; background: var(--gold);
	margin: 0.5rem auto 0; transition: width 0.55s var(--ease);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title::after { width: 36px; }

.woocommerce ul.products li.product .price, .products .product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
	font-family: var(--sans) !important; color: var(--stone) !important;
	font-weight: 400; font-size: 1rem; letter-spacing: 0.05em;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--gold) !important; }
.woocommerce ul.products li.product .price del { opacity: 0.5; }

.woocommerce ul.products li.product .button, .products .product .button {
	background-color: transparent !important; color: var(--ink) !important;
	border: 1px solid var(--line) !important; margin-top: 0.9rem;
}
.woocommerce ul.products li.product:hover .button, .products .product:hover .button {
	background-color: var(--ink) !important; border-color: var(--ink) !important; color: var(--cream) !important;
}

/* =============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================= */
.woocommerce div.product .product_title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin-bottom: 0.35em; }
.woocommerce div.product div.images img { border-radius: 0; background: transparent; }
.woocommerce div.product div.summary { padding-left: 1rem; }
.woocommerce div.product .summary .price { font-size: 1.5rem !important; color: var(--ink) !important; margin: 0.6em 0 1.2em; }
.woocommerce .quantity input.qty {
	border: 1px solid var(--line); border-radius: 0; padding: 0.7em 0.4em;
	background: var(--white); font-family: var(--sans);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { border: none; background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
	font-size: 0.8rem; color: var(--stone);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--line); }

/* =============================================================
   FORMS
   ============================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], textarea, select,
.wpforms-field input, .wpforms-field textarea {
	border: 1px solid var(--line) !important; border-radius: 0 !important;
	background: var(--white) !important; padding: 0.9em 1em !important;
	font-family: var(--sans) !important; color: var(--ink) !important;
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--gold) !important;
	box-shadow: 0 0 0 3px rgba(182, 145, 79, 0.14) !important; outline: none !important;
}
::placeholder { color: var(--mist) !important; }

/* =============================================================
   CART & CHECKOUT
   ============================================================= */
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: 0; background: var(--white); }
.woocommerce table.shop_table thead th {
	font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
	font-size: 0.74rem; color: var(--stone); border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--line); }
.cart_totals h2, .cross-sells h2, .woocommerce-checkout h3 { font-family: var(--serif-display) !important; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
	background: var(--cream-deep) !important; border: 1px solid var(--line); border-radius: 0; padding: 1.6rem;
}
.woocommerce .cart input.button[name="update_cart"] {
	background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
}
.woocommerce-checkout h3 { border-bottom: 1px solid var(--line); padding-bottom: 0.5em; margin-bottom: 1em; }
.woocommerce-checkout #payment div.payment_box { background: var(--white) !important; border-radius: 0; }
.woocommerce-checkout #place_order { width: 100%; margin-top: 1rem; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--gold) !important; border-radius: 0; font-family: var(--sans);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gold) !important; }

/* =============================================================
   FOOTER
   ============================================================= */
.ct-footer { background: var(--ink) !important; padding-block: clamp(3rem,6vw,5rem) 0; border-top: 1px solid rgba(182,145,79,0.4); }
.ct-footer, .ct-footer p, .ct-footer li { color: #C9C0B4 !important; }
.ct-footer a { color: #E6DDD0 !important; }
.ct-footer a:hover { color: var(--champagne) !important; }
.ct-footer h1, .ct-footer h2, .ct-footer h3, .ct-footer h4, .ct-footer h5 { color: var(--cream) !important; font-family: var(--serif-display) !important; }
.ct-footer h6, .ct-footer .widget-title {
	text-transform: uppercase !important; letter-spacing: 0.22em !important;
	font-family: var(--sans) !important; font-size: 0.74rem !important; font-weight: 500 !important;
	color: var(--champagne) !important; margin-bottom: 1.1em;
}

/* Footer copyright — centred, legible, with a gold "BROEA" */
div:has(> .ct-footer-copyright) { justify-content: center !important; }
.ct-footer-copyright {
	width: 100%;
	text-align: center !important;
	color: #CDBFA8 !important;
	font-family: var(--serif-body) !important;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
}
.ct-footer-copyright a {
	background: var(--gold-grad);
	background-size: 220% auto;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent !important;
	font-weight: 500;
	animation: broeaShimmer 7s linear infinite;
}

/* =============================================================
   MISC
   ============================================================= */
hr, .wp-block-separator { border: none; border-top: 1px solid var(--line); opacity: 1; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream-deep); }
::-webkit-scrollbar-thumb { background: var(--gold); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* =============================================================
   SCROLL REVEAL (enabled by broea.js, with failsafe)
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
	body.broea-anim-ready .broea-reveal {
		opacity: 0; transform: translateY(28px);
		transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
		will-change: opacity, transform;
	}
	body.broea-anim-ready .broea-reveal.is-visible { opacity: 1; transform: none; }
}


/* =============================================================
   ★ CUSTOM HOMEPAGE (front-page.php)
   ============================================================= */
.broea-home { overflow-x: clip; }
.broea-container { max-width: var(--container); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); }
.broea-container--narrow { max-width: var(--container-narrow); }

/* --- Hero --- */
.broea-hero {
	position: relative; min-height: 85vh; display: flex; align-items: center;
	background-size: cover; background-position: center; overflow: hidden; color: var(--cream);
}
.broea-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(95deg, rgba(20,16,12,0.66) 0%, rgba(20,16,12,0.4) 44%, rgba(20,16,12,0.08) 74%, rgba(20,16,12,0) 100%);
}
.broea-hero__inner { position: relative; z-index: 2; max-width: 720px; }
.broea-hero__eyebrow { color: var(--champagne); letter-spacing: 0.44em; }
.broea-hero__title {
	font-family: var(--serif-display); font-weight: 400; color: var(--cream) !important;
	font-size: clamp(3rem, 7.5vw, 6.4rem); line-height: 1.02; margin: 0.18em 0 0.3em;
	text-shadow: 0 2px 36px rgba(0,0,0,0.28);
}
.broea-hero__lead { font-size: 1.18rem; font-weight: 400; color: #EFE8DB; max-width: 34ch; }
.broea-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.broea-hero .broea-btn--ghost { background: transparent !important; color: var(--cream) !important; border-color: rgba(247,241,232,0.75) !important; }
.broea-hero .broea-btn--ghost:hover { background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important; }
.broea-hero__cue {
	position: absolute; left: 50%; bottom: 26px; width: 1px; height: 54px; z-index: 3;
	transform: translateX(-50%);
	background: linear-gradient(to bottom, rgba(247,241,232,0) 0%, rgba(247,241,232,0.85) 100%);
	animation: broeaCue 2.4s var(--ease) infinite;
}
@keyframes broeaCue {
	0% { opacity: 0; transform: translateX(-50%) scaleY(0.3); transform-origin: top; }
	50% { opacity: 1; transform: translateX(-50%) scaleY(1); transform-origin: top; }
	100% { opacity: 0; transform: translateX(-50%) scaleY(1); transform-origin: bottom; }
}

/* --- Ethos marquee strip --- */
.broea-strip {
	background: var(--ink); color: var(--cream);
	padding: 1.1rem 0; overflow: hidden; white-space: nowrap;
}
.broea-strip__track { display: inline-flex; gap: 3.5rem; animation: broeaMarquee 28s linear infinite; }
.broea-strip__track span {
	font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.34em;
	font-size: 0.78rem; color: var(--champagne); display: inline-flex; align-items: center; gap: 3.5rem;
}
.broea-strip__track span::after { content: "✦"; color: var(--gold); }
@keyframes broeaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Section scaffolding --- */
.broea-section { padding-block: clamp(4rem, 9vw, 8rem); }
.broea-section--cream { background: transparent; }
.broea-section--deep { background: var(--cream-deep); }
.broea-section--ink { background: var(--ink); }
.broea-section--ink .broea-section__title { color: var(--cream); }
.broea-section--ink .broea-section__sub { color: #C9C0B4; }
.broea-section--ink .broea-section__eyebrow { color: var(--champagne); }
.broea-section--ink .broea-card__title { color: var(--cream); }
.broea-section--ink .broea-card__cta { color: var(--champagne); }
.broea-section--ink .broea-btn--ghost { color: var(--cream) !important; border-color: rgba(247,241,232,0.5) !important; }
.broea-section--ink .broea-btn--ghost:hover { background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important; }
.broea-section__head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.broea-section__title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 500; margin: 0.5rem 0 0.7rem; }
.broea-section__title::after { content: ""; display: block; width: 58px; height: 1px; background: var(--gold); margin: 1.2rem auto 0; }
.broea-section__sub { color: var(--stone); font-size: 1.08rem; }

/* --- Intro statement --- */
.broea-statement { text-align: center; }
.broea-statement p {
	font-family: var(--serif-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.4; color: var(--ink); font-weight: 400; font-style: italic;
}
.broea-statement .broea-eyebrow { font-style: normal; margin-bottom: 1.4rem; }

/* --- Featured product grid --- */
.broea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); }
.broea-card { display: block; text-align: center; color: var(--ink); }
.broea-card__media { position: relative; display: block; overflow: hidden; background: var(--cream-deep); aspect-ratio: 1/1; }
.broea-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
.broea-card:hover .broea-card__media img { transform: scale(1.07); filter: brightness(0.97); }
/* (VIEW PRODUCT overlay removed — caused a dark bar on press/hover) */
.broea-card__title { display: block; font-family: var(--serif-display); font-size: 1.4rem; font-weight: 500; margin-top: 1.1rem; }
.broea-card__cta { display: inline-block; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.68rem; color: var(--gold); margin-top: 0.5rem; position: relative; }
.broea-card__cta::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 0; height: 1px; background: var(--gold); transform: translateX(-50%); transition: width 0.5s var(--ease); }
.broea-card:hover .broea-card__cta::after { width: 100%; }
.broea-card__noimg { display: block; width: 100%; height: 100%; background: var(--champagne-lt); }
.broea-center { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Category split --- */
.broea-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.broea-split__cell {
	position: relative; min-height: 60vh; display: flex; align-items: flex-end;
	padding: clamp(2rem, 4vw, 3.5rem); overflow: hidden; color: var(--cream);
	background-size: cover; background-position: center;
}
.broea-split__cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,0.7) 0%, rgba(20,16,12,0.15) 60%, rgba(20,16,12,0) 100%); transition: background 0.5s var(--ease); }
.broea-split__cell:hover::after { background: linear-gradient(to top, rgba(20,16,12,0.78) 0%, rgba(20,16,12,0.3) 70%, rgba(20,16,12,0.08) 100%); }
.broea-split__inner { position: relative; z-index: 2; }
.broea-split__title { font-family: var(--serif-display); color: var(--cream) !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 400; margin: 0.4rem 0 0.8rem; }
.broea-split__cell .broea-eyebrow { color: var(--champagne); }
.broea-split__link { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; color: var(--cream); border-bottom: 1px solid var(--champagne); padding-bottom: 4px; }

/* --- Brand story --- */
.broea-story { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.broea-story__media { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; }
.broea-story__media::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(247,241,232,0.5); pointer-events: none; }
.broea-story__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin: 0.6rem 0 1.2rem; }
.broea-story__body p { color: var(--ink-soft); margin-bottom: 1.1rem; }

/* --- Ritual steps --- */
.broea-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.broea-step { text-align: center; }
.broea-step__num { font-family: var(--serif-display); font-size: 3rem; color: var(--gold); line-height: 1; }
.broea-step__title { font-family: var(--serif-display); font-size: 1.5rem; margin: 0.6rem 0 0.5rem; }
.broea-step__text { color: var(--stone); font-size: 1rem; }
.broea-step__rule { width: 1px; height: 40px; background: var(--line); margin: 1rem auto 0; }

/* --- CTA band --- */
.broea-cta { background: var(--champagne); text-align: center; }
.broea-cta__title { font-family: var(--serif-display); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 400; color: var(--ink); margin-bottom: 0.6rem; }
.broea-cta__sub { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 2rem; }
.broea-cta .broea-btn { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--cream) !important; }
.broea-cta .broea-btn:hover { background: var(--white) !important; border-color: var(--white) !important; color: var(--ink) !important; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
	.broea-grid { grid-template-columns: repeat(2, 1fr); }
	.broea-steps { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 880px) {
	body { font-size: 1.04rem; line-height: 1.75; }
	.broea-split { grid-template-columns: 1fr; }
	.broea-story { grid-template-columns: 1fr; }
	.broea-story__media { aspect-ratio: 16/10; }
	.broea-hero { min-height: 86vh; }
	.woocommerce ul.products, ul.products { gap: 1.8rem 1.1rem; }
}
@media (max-width: 560px) {
	.broea-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
	.broea-card__title { font-size: 1.15rem; }
	.broea-hero__actions { flex-direction: column; }
	.broea-hero__actions .broea-btn { width: 100%; text-align: center; }
}


/* =============================================================
   ★★ GLOBAL FX LAYER (site-wide) ★★
   ============================================================= */

/* Remove the mobile tap-highlight black flash when pressing product cards/links */
html, body, a, button, span, div, img, li,
.broea-card, .broea-card *,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product * {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
	-webkit-touch-callout: none;
}
.broea-card:focus, .broea-card:active, .broea-card:focus-within,
.broea-card:active .broea-card__media, .broea-card:focus .broea-card__media,
.woocommerce ul.products li.product a:focus,
.woocommerce ul.products li.product a:active { background: transparent !important; outline: none; }

/* Page-enter fade */
@media (prefers-reduced-motion: no-preference) {
	body { animation: broeaEnter 0.7s var(--ease) both; }
	@keyframes broeaEnter { from { opacity: 0; } to { opacity: 1; } }
}

/* Scroll-progress bar */
.broea-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
	background: transparent; pointer-events: none;
}
.broea-progress i {
	display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--gold), var(--clay));
}

/* Falling petals (ported from b2b.broea.com) */
.broea-fx {
	position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden;
}
.broea-petal {
	position: absolute; top: -8%; opacity: 0;
	will-change: transform, opacity;
	animation: broeaFall linear infinite;
}
@keyframes broeaFall {
	0%   { transform: translateY(-12vh) translateX(0) rotate(0deg); }
	10%  { opacity: 0.5; }
	50%  { opacity: 0.45; }
	90%  { opacity: 0.3; }
	100% { transform: translateY(112vh) translateX(40px) rotate(320deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .broea-fx { display: none; } }

/* Film-grain texture overlay */
.broea-grain {
	position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

/* Animated underline for in-content links */
.entry-content a:not(.button):not(.wp-block-button__link):not(.broea-btn),
.broea-story__body a {
	background-image: linear-gradient(var(--gold), var(--gold));
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size 0.5s var(--ease), color 0.3s var(--ease);
	padding-bottom: 1px;
}
.entry-content a:not(.button):not(.wp-block-button__link):not(.broea-btn):hover,
.broea-story__body a:hover { background-size: 100% 1px; color: var(--gold); }

/* Card transform transition so the JS tilt is smooth */
.broea-card { transition: transform 0.5s var(--ease); }

/* Decorative oversized watermark word (used in templates) */
.broea-watermark {
	position: absolute; z-index: 0; pointer-events: none; user-select: none;
	font-family: var(--serif-display); font-weight: 500; line-height: 0.8;
	font-size: clamp(7rem, 22vw, 20rem); color: var(--ink); opacity: 0.04;
	letter-spacing: 0.02em; white-space: nowrap;
}

/* =============================================================
   TRANSPARENT HEADER OVER HERO (front page + hero templates)
   ============================================================= */
.broea-has-hero #header.ct-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	background: transparent !important; box-shadow: none !important;
}
/* Keep the fixed hero header clear of the WP admin bar (logged-in) */
body.admin-bar.broea-has-hero #header.ct-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar.broea-has-hero #header.ct-header { top: 46px; } }
/* Inner header rows carry their own cream background — make them see-through
   while over the hero so the white logo/nav are visible on the image. */
.broea-has-hero:not(.broea-scrolled) #header.ct-header div,
.broea-has-hero:not(.broea-scrolled) #header.ct-header .ct-header-row,
.broea-has-hero:not(.broea-scrolled) #header.ct-header [data-row] {
	background-color: transparent !important;
}

.broea-has-hero.broea-scrolled #header.ct-header {
	position: fixed;
	background: rgba(247, 241, 232, 0.92) !important;
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 var(--line), 0 14px 34px -26px rgba(31,29,27,0.6);
	animation: broeaHeaderDrop 0.5s var(--ease) both;
}
.broea-has-hero.broea-scrolled #header.ct-header div[data-row],
.broea-has-hero.broea-scrolled #header.ct-header .ct-header-row {
	background-color: transparent !important; /* let the blurred wrapper show */
}
/* Keep the fixed header below the WP admin bar for logged-in users */
body.admin-bar.broea-has-hero.broea-scrolled #header.ct-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.broea-has-hero.broea-scrolled #header.ct-header { top: 46px; }
}
@keyframes broeaHeaderDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Light nav + links while transparent over the hero */
.broea-has-hero:not(.broea-scrolled) #header.ct-header a,
.broea-has-hero:not(.broea-scrolled) #header.ct-header .ct-main-navigation a {
	color: var(--cream) !important;
}
.broea-has-hero:not(.broea-scrolled) #header.ct-header .ct-toggle-close,
.broea-has-hero:not(.broea-scrolled) #header.ct-header svg { color: var(--cream) !important; fill: currentColor; }

/* Dark wordmark would vanish on the dark hero — render it white while transparent */
.broea-has-hero:not(.broea-scrolled) #header.ct-header .site-logo-container img,
.broea-has-hero:not(.broea-scrolled) #header.ct-header .ct-logo-container img {
	filter: brightness(0) invert(1);
	transition: filter 0.4s var(--ease);
}

/* =============================================================
   PAGE HERO (About / Contact bespoke templates)
   ============================================================= */
.broea-pagehero {
	position: relative; min-height: 64vh; display: flex; align-items: center; justify-content: center;
	text-align: center; color: var(--cream); overflow: hidden;
	background-size: cover; background-position: center;
}
/* Top-weighted dark overlay for title legibility (lighter toward the bottom) */
.broea-pagehero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.28) 45%, rgba(20,16,12,0.10) 75%, transparent 100%);
}
/* Bottom fade melts the hero image into the cream page — no hard seam */
.broea-pagehero::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 42%; z-index: 1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(247,241,232,0) 0%, rgba(247,241,232,0.55) 55%, var(--cream) 100%);
}
.broea-pagehero__inner { position: relative; z-index: 2; }
.broea-pagehero__eyebrow { color: var(--champagne); letter-spacing: 0.44em; }
.broea-pagehero__title {
	font-family: var(--serif-display); font-weight: 400; color: var(--cream) !important;
	font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.05; margin: 0.2em 0 0;
	text-shadow: 0 2px 36px rgba(0,0,0,0.3);
}

/* Designed wrapper for page content — solid cream so the hero fade matches exactly */
.broea-pagebody { position: relative; background: var(--cream) !important; padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); margin-top: -2px; }
.broea-pagebody .entry-content,
.broea-pagebody__inner { max-width: var(--container-narrow); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); position: relative; z-index: 1; }

/* Editorial About/Contact content: centred text, full-width blended images */
.broea-pagebody .entry-content { text-align: center; }
.broea-pagebody .entry-content h1,
.broea-pagebody .entry-content h2,
.broea-pagebody .entry-content h3 {
	font-size: clamp(1.8rem, 3.8vw, 2.9rem);
	text-align: center; margin: 0 0 0.6em;
}
.broea-pagebody .entry-content p {
	max-width: 62ch; margin: 0 auto 1.3em; color: var(--ink-soft);
	font-size: 1.08rem; line-height: 1.85;
}
.broea-pagebody .entry-content img {
	display: block; width: 100%; height: auto; margin: clamp(2.5rem, 6vw, 4.5rem) auto;
	object-fit: cover;
}
/* Only TOP-LEVEL images break out wide (nested column images stay in place) */
.broea-pagebody .entry-content > figure,
.broea-pagebody .entry-content > .wp-block-image {
	width: 100vw; max-width: 1100px; margin-left: 50%; transform: translateX(-50%);
}
.broea-pagebody .entry-content > figure img,
.broea-pagebody .entry-content > .wp-block-image img { margin: 0; }

/* Contact page (id 630): remove the bottom "Trending Now" products section */
body.page-id-630 .broea-pagebody .entry-content > *:nth-child(n+3) { display: none !important; }
/* Give the remaining contact details room to breathe (About-like) */
body.page-id-630 .broea-pagebody { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 8rem); }
body.page-id-630 .broea-pagebody .entry-content { font-size: 1.1rem; }
body.page-id-630 .broea-pagebody .entry-content .stk-block-heading__text {
	font-size: clamp(2rem, 5vw, 3.4rem) !important;
}

/* Tidy product blocks embedded in About/Contact content (e.g. "Trending Now") */
.broea-pagebody .entry-content ul.products li.product .entry-meta,
.broea-pagebody .entry-content li.product .entry-meta { display: none !important; }
.broea-pagebody .entry-content ul.products { justify-content: center; gap: clamp(1rem, 3vw, 2rem); }

/* About/Contact: stack Stackable columns into one centred column (tidy + mobile-safe) */
.broea-pagebody .entry-content .stk-row.stk-inner-blocks {
	flex-direction: column !important;
	align-items: center !important;
	gap: clamp(1.5rem, 4vw, 2.5rem) !important;
}
.broea-pagebody .entry-content .wp-block-stackable-column,
.broea-pagebody .entry-content .stk-block-column {
	width: 100% !important; max-width: 600px !important; flex: 0 1 auto !important;
}
.broea-pagebody .entry-content .stk-column-wrapper { text-align: center !important; }
/* Centre any image inside the columns, sized sensibly */
.broea-pagebody .entry-content .wp-block-stackable-column img,
.broea-pagebody .entry-content .stk-img-wrapper img {
	display: block !important; margin: 0 auto !important;
	width: 100% !important; max-width: 600px !important; height: auto !important;
}

/* About page: remove the duplicate model image above the BROEA heading (it's now the cover) */
.broea-pagebody .entry-content > figure.wp-block-image:first-child { display: none !important; }

/* About page: oversized luminous gold "BROEA" heading */
.broea-pagebody .entry-content > .wp-block-stackable-heading:nth-child(2) .stk-block-heading__text {
	font-family: var(--serif-display) !important;
	font-size: clamp(3.5rem, 12vw, 8.5rem) !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	line-height: 1 !important;
	text-indent: 0.14em;
	background: var(--gold-grad) !important;
	background-size: 220% auto !important;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important; color: transparent !important;
	animation: broeaShimmer 7s linear infinite;
}

/* =============================================================
   SHOP / ARCHIVE EDITORIAL HEADER (injected via hook)
   ============================================================= */
.broea-shophead {
	position: relative; text-align: center; padding: clamp(3.5rem, 7vw, 6rem) 1.25rem clamp(2rem, 4vw, 3rem);
	overflow: hidden;
}
.broea-shophead__eyebrow { color: var(--gold); letter-spacing: 0.44em; }
.broea-shophead__title { font-family: var(--serif-display); font-weight: 400; font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin: 0.3rem 0 0.6rem; }
.broea-shophead__title::after { content: ""; display: block; width: 58px; height: 1px; background: var(--gold); margin: 1.2rem auto 0; }
.broea-shophead__sub { color: var(--stone); max-width: 52ch; margin: 0 auto; }
.broea-shophead .broea-watermark { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* WooCommerce default page title becomes redundant with our header */
.woocommerce-products-header { display: none; }
/* Remove the catalog ordering dropdown (Default sorting / Sort by…) */
.woocommerce .woocommerce-ordering, form.woocommerce-ordering { display: none !important; }


/* =============================================================
   ★★ REFINEMENTS v2 — product tiles & single product ★★
   ============================================================= */

/* Studio tile for product media: white photo backgrounds merge into a soft
   vignette tile, with a hairline frame + depth shadow. Works for the brand's
   white-background product photography. */
/* Transparent product floats on a soft champagne spotlight (image bg is now transparent) */
.broea-card__media,
.woocommerce ul.products li.product .ct-media-container {
	background: radial-gradient(circle at 50% 50%,
		rgba(231, 207, 155, 0.16) 0%,
		rgba(231, 207, 155, 0.05) 42%,
		transparent 68%) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 19% !important;          /* more breathing room → smaller, refined product */
	transition: background 0.6s var(--ease) !important;
}
/* Equal-height cards so the Read More buttons line up across each row */
.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
	text-align: center;            /* centre title + meta + button (matches b2b) */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { text-align: center; }
.woocommerce ul.products li.product .ct-woo-card-actions,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
}
.woocommerce ul.products li.product .entry-meta { margin-top: 0.5rem; }

/* Reset the wrapping <figure> so it doesn't create a second box behind the tile */
.woocommerce ul.products li.product figure {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 1rem !important;
}
/* The de-backgrounded product floats on the champagne glow (no dark shadow —
   a black drop-shadow reads as an ugly blob on the dark section) */
.broea-card__media img,
.woocommerce ul.products li.product .ct-media-container img {
	width: 100% !important; height: 100% !important;
	object-fit: contain !important;
	mix-blend-mode: normal;
	filter: none;
	transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
}
/* Hover: lift the product and brighten the spotlight */
.broea-card:hover .broea-card__media,
.woocommerce ul.products li.product:hover .ct-media-container {
	background: radial-gradient(circle at 50% 47%,
		rgba(231, 207, 155, 0.30) 0%,
		rgba(231, 207, 155, 0.08) 48%,
		transparent 70%) !important;
}
.broea-card:hover .broea-card__media img,
.woocommerce ul.products li.product:hover .ct-media-container img {
	transform: scale(1.07) translateY(-5px);
	filter: drop-shadow(0 32px 38px rgba(0, 0, 0, 0.5)) brightness(1.04);
}
/* Remove the old "VIEW PRODUCT" overlay bar — not needed for floating products */
.broea-card__media::after,
.woocommerce ul.products li.product .ct-media-container::after { content: none !important; display: none !important; }

/* A touch tighter vertical rhythm between intro and the grid */
.broea-statement { padding-bottom: 0; }
.broea-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* ---- Single product: gallery + sticky summary + trust row ---- */
.single-product .ct-container, .single-product .entry-content { padding-top: 1rem; }

/* Single hero product: clean, airy float (no box) reads best for white-bg photography */
.single-product div.product .woocommerce-product-gallery { width: 100% !important; }
.single-product div.product .woocommerce-product-gallery .ct-media-container { background: transparent; border: none; box-shadow: none; padding: 0; }
.single-product div.product .woocommerce-product-gallery img { mix-blend-mode: normal; background: transparent; }
.single-product div.product .summary > .product_title { margin-top: 0; }
@media (min-width: 900px) {
	.single-product div.product div.summary {
		position: sticky; top: 120px; align-self: start;
	}
}
.single-product div.product .summary > .price { letter-spacing: 0.04em; }
.single-product .woocommerce-product-details__short-description { color: var(--stone); font-size: 1.08rem; }

/* Trust badges injected under the add-to-cart */
.broea-trust {
	list-style: none; margin: 1.8rem 0 0; padding: 1.4rem 0 0;
	border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
}
.broea-trust li {
	font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
	font-size: 0.66rem; color: var(--stone); display: inline-flex; align-items: center; gap: 0.5rem;
}
.broea-trust li::before { content: "✦"; color: var(--gold); font-size: 0.7rem; }


/* =============================================================
   ★★★ v3 — REFERENCE MATCH: type, gold light, glow, shop, split, mobile ★★★
   ============================================================= */

/* ---- Typography: Fraunces, more substantial & luxe ---- */
h1, h2, h3, h4, h5, h6,
.broea-hero__title, .broea-section__title, .broea-pagehero__title,
.broea-shophead__title, .broea-cta__title, .broea-story__title,
.woocommerce div.product .product_title {
	font-family: var(--serif-display) !important;
	letter-spacing: 0.012em;
	font-weight: 500;
}
body { font-weight: 400; }
.broea-statement p { font-style: italic; }

/* ---- Luminous gold text (the reference's signature) ---- */
.broea-goldtext,
.broea-hero__eyebrow, .broea-section__eyebrow, .broea-shophead__eyebrow,
.broea-pagehero__eyebrow, .broea-cta .broea-eyebrow, .broea-split .broea-eyebrow,
.broea-section--ink .broea-section__title,
.post-type-archive-product .broea-shophead__title,
.tax-product_cat .broea-shophead__title,
.broea-cta__title {
	background: var(--gold-grad);
	background-size: 220% auto;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: broeaShimmer 7s linear infinite;
}
@keyframes broeaShimmer { to { background-position: 220% center; } }

/* ---- Soft ambient lighting (光暈) ---- the body radial provides it globally;
   keep cream sections transparent so the light flows through. ---- */
.broea-section--cream, .broea-pagebody, .broea-home { background-color: transparent; }
.broea-section--cream { position: relative; }
.broea-section--cream > * { position: relative; z-index: 1; }

/* Dark sections: top glow + cursor spotlight */
.broea-section--ink { position: relative; overflow: hidden; }
.broea-section--ink::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(62% 48% at 50% -4%, rgba(217, 193, 154, 0.18), transparent 70%);
}
.broea-section--ink::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 35%), rgba(231, 207, 155, 0.16), transparent 60%);
	opacity: 0; transition: opacity 0.5s var(--ease);
}
.broea-section--ink:hover::after { opacity: 1; }
.broea-section--ink > * { position: relative; z-index: 1; }

/* (Product card hover shadow removed — it cast a dark "layer" under the product) */

/* =============================================================
   SHOP / ARCHIVE — DARK GALLERY
   ============================================================= */
/* Declutter cards: hide the repetitive category meta (every product shares the same cats) */
.woocommerce ul.products li.product .entry-meta { display: none !important; }

/* Two columns on phones so products aren't oversized in a single column */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.post-type-archive-product ul.products,
	.tax-product_cat ul.products {
		grid-template-columns: 1fr 1fr !important;
		gap: 1rem !important;
	}
	.woocommerce ul.products li.product .ct-media-container,
	.woocommerce ul.products li.product .broea-card__media { padding: 12% !important; }
}

/* Centre the Read More button under each card */
.woocommerce ul.products li.product .ct-woo-card-actions {
	text-align: center;
	display: flex; justify-content: center;
}
.woocommerce ul.products li.product .ct-woo-card-actions .button { display: inline-block; }

/* Dark header on the (dark) shop & category pages — a light header looked off */
/* Dark glow lives on the wrapper that holds BOTH header + content, so the top
   champagne glow is continuous and there's no seam between them. */
body.post-type-archive-product #main-container,
body.tax-product_cat #main-container,
body.tax-product_tag #main-container {
	background: var(--ink) radial-gradient(75% 42% at 50% 0%, rgba(217, 193, 154, 0.16), transparent 70%) no-repeat;
}
body.post-type-archive-product #header.ct-header,
body.tax-product_cat #header.ct-header,
body.tax-product_tag #header.ct-header,
body.post-type-archive-product.broea-scrolled #header.ct-header,
body.tax-product_cat.broea-scrolled #header.ct-header {
	background-color: transparent !important;
	box-shadow: none !important;
}
body.post-type-archive-product #header.ct-header [data-row],
body.post-type-archive-product #header.ct-header > div,
body.tax-product_cat #header.ct-header [data-row],
body.tax-product_cat #header.ct-header > div {
	background-color: transparent !important;
}
body.post-type-archive-product #header .menu a,
body.post-type-archive-product #header .ct-main-navigation a,
body.tax-product_cat #header .menu a,
body.tax-product_cat #header .ct-main-navigation a {
	color: var(--cream) !important;
}
body.post-type-archive-product #header .ct-main-navigation a:hover,
body.tax-product_cat #header .ct-main-navigation a:hover { color: var(--champagne) !important; }
body.post-type-archive-product #header svg,
body.post-type-archive-product #header svg path,
body.post-type-archive-product #header .ct-toggle svg,
body.post-type-archive-product #header .ct-toggle svg path,
body.tax-product_cat #header svg,
body.tax-product_cat #header svg path {
	fill: var(--cream) !important;
	color: var(--cream) !important;
}

/* Hide Blocksy's default "Product" page-title hero — our editorial header replaces it */
.post-type-archive-product .hero-section,
.tax-product_cat .hero-section,
.tax-product_tag .hero-section,
.post-type-archive-product .page-title,
.tax-product_cat .page-title { display: none !important; }

.post-type-archive-product main, .tax-product_cat main, .tax-product_tag main {
	background: transparent;          /* dark + glow now provided by #main-container */
}
.post-type-archive-product .broea-shophead__title,
.tax-product_cat .broea-shophead__title { -webkit-text-fill-color: transparent; }
.post-type-archive-product .broea-shophead__sub,
.tax-product_cat .broea-shophead__sub { color: #C9C0B4; }
.post-type-archive-product .broea-watermark { color: var(--champagne); opacity: 0.06; }
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title a,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title a {
	color: var(--cream) !important;
}
/* Category labels (ct-term-*) under each product */
body.post-type-archive-product ul.products li.product [class*="ct-term-"],
body.tax-product_cat ul.products li.product [class*="ct-term-"],
body.post-type-archive-product ul.products li.product .ct-woo-card-extra,
body.post-type-archive-product ul.products li.product .ct-woocommerce-extra {
	color: var(--champagne) !important;
}
body.post-type-archive-product ul.products li.product [class*="ct-term-"] a,
body.tax-product_cat ul.products li.product [class*="ct-term-"] a {
	color: var(--champagne) !important;
}
.post-type-archive-product .price, .tax-product_cat .price { color: var(--champagne) !important; }
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering select,
.post-type-archive-product .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb a { color: #C9C0B4 !important; }
.post-type-archive-product .woocommerce-ordering select { background: transparent; border-color: rgba(247,241,232,0.25); }
.post-type-archive-product ul.products li.product .button,
.tax-product_cat ul.products li.product .button {
	color: var(--cream) !important; border-color: rgba(247, 241, 232, 0.4) !important;
}
.post-type-archive-product ul.products li.product:hover .button {
	background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important;
}
.post-type-archive-product .page-numbers,
.post-type-archive-product .woocommerce-pagination a { color: var(--cream) !important; }
.post-type-archive-product .page-numbers.current { color: var(--champagne) !important; }
/* (shop card hover shadow removed — cast a dark layer under the product) */

/* =============================================================
   CATEGORY SPLIT — lifestyle + ken-burns + glow + text motion
   ============================================================= */
.broea-split__cell {
	background-size: cover; background-position: center;
}
.broea-split__cell::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(circle at 50% 46%, rgba(231, 207, 155, 0.3), transparent 62%);
	opacity: 0; transition: opacity 0.7s var(--ease); mix-blend-mode: screen;
}
.broea-split__cell:hover::before { opacity: 1; }
.broea-split__inner { transition: transform 0.6s var(--ease); z-index: 2; }
.broea-split__cell:hover .broea-split__inner { transform: translateY(-10px); }
.broea-split__link { position: relative; }
.broea-split__link::after {
	content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
	background: var(--champagne); transition: width 0.5s var(--ease);
}
.broea-split__cell:hover .broea-split__link::after { width: 100%; }

/* =============================================================
   MOBILE PASS
   ============================================================= */
@media (max-width: 880px) {
	.broea-hero__title { font-size: clamp(2.6rem, 11vw, 4rem); }
	.broea-section__title { font-size: clamp(2rem, 7vw, 2.8rem); }
	.broea-statement p { font-size: clamp(1.35rem, 5vw, 1.9rem); }
	.broea-pagehero { min-height: 52vh; }
	.broea-pagehero__title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
	.broea-shophead__title { font-size: clamp(2rem, 8vw, 3rem); }
	.broea-split__cell { min-height: 52vh; }
	.broea-story__media::before { inset: 10px; }
}
@media (max-width: 560px) {
	.broea-hero { min-height: 86vh; }
	.broea-hero__lead { font-size: 1.05rem; }
	.broea-section { padding-block: clamp(2.8rem, 9vw, 4.2rem); }
	.broea-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
	.broea-card__media { padding: 9%; }
	.broea-card__title { font-size: 1.08rem; }
	.broea-card__cta { font-size: 0.6rem; }
	.broea-trust { gap: 0.4rem 1rem; }
	.broea-strip__track span, .broea-strip__track span::after { gap: 2rem; }
	.broea-step__num { font-size: 2.6rem; }
}


/* =============================================================
   v4 — Gold serif wordmark logo (text site-title, matching b2b)
   ============================================================= */
#header .site-branding .site-title,
#header .site-branding .site-title a,
#header .site-title,
#header .site-title a {
	font-family: "Cormorant Garamond", serif !important;
	font-weight: 500 !important;
	font-size: 1.5rem !important;
	letter-spacing: 0.34em !important;
	text-indent: 0.34em;                 /* balance trailing tracking */
	text-transform: none;
	background: var(--gold-grad);
	background-size: 220% auto;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important; color: transparent !important;
	animation: broeaShimmer 7s linear infinite;
}
@media (max-width: 560px) {
	#header .site-title, #header .site-title a {
		font-size: 1.3rem !important; letter-spacing: 0.3em !important; text-indent: 0.3em;
	}
}


/* =============================================================
   LUXURY MOBILE MENU (offcanvas drawer)
   ============================================================= */
.ct-panel.ct-header .ct-panel-inner {
	background: #1C1916 radial-gradient(85% 55% at 50% 0%, rgba(217,193,154,0.20), transparent 70%) no-repeat !important;
}
/* Centre the menu in the drawer */
.ct-panel.ct-header .ct-panel-content { display: flex; align-items: center; }
.ct-panel.ct-header .ct-panel-content-inner { width: 100%; }
.ct-panel.ct-header nav.mobile-menu { width: 100%; }
.ct-panel.ct-header .mobile-menu > ul,
.ct-panel.ct-header .menu {
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(1.1rem, 4.2vh, 2.3rem); text-align: center; padding: 0; margin: 0;
}
.ct-panel.ct-header .mobile-menu li { width: auto; border: none !important; }
.ct-panel.ct-header .mobile-menu a {
	font-family: var(--serif-display) !important;
	font-size: clamp(2rem, 9vw, 2.9rem) !important;
	font-weight: 400 !important;
	color: var(--cream) !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
	position: relative; display: inline-block; padding: 0.1em 0.2em !important;
	transition: color 0.4s var(--ease);
}
.ct-panel.ct-header .mobile-menu a::after {
	content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px;
	background: var(--gold-grad); transform: translateX(-50%); transition: width 0.45s var(--ease);
}
.ct-panel.ct-header .mobile-menu a:hover,
.ct-panel.ct-header .mobile-menu .current-menu-item > a { color: var(--champagne) !important; }
.ct-panel.ct-header .mobile-menu a:hover::after,
.ct-panel.ct-header .mobile-menu .current-menu-item > a::after { width: 42px; }

/* A small gold ornament above the menu */
.ct-panel.ct-header .ct-panel-content-inner::before {
	content: "✦"; display: block; text-align: center; color: var(--gold);
	font-size: 1rem; margin-bottom: clamp(1.5rem, 5vh, 2.5rem); opacity: 0.9;
}

/* Refined close button */
.ct-panel.ct-header .ct-panel-actions { padding: 1.4rem 1.4rem 0; }
.ct-panel.ct-header .ct-toggle-close {
	width: 44px !important; height: 44px !important; border: 1px solid rgba(231,207,155,0.35) !important;
	border-radius: 50% !important; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease) !important;
}
.ct-panel.ct-header .ct-toggle-close:hover { border-color: var(--champagne) !important; transform: rotate(90deg); }
.ct-panel.ct-header .ct-toggle-close svg { color: var(--champagne) !important; fill: var(--champagne) !important; width: 14px; height: 14px; }

/* Social / extra items in the drawer */
.ct-panel.ct-header .ct-header-socials a,
.ct-panel.ct-header [class*="social"] a { color: var(--champagne) !important; fill: var(--champagne) !important; }


/* =============================================================
   v5 — FULL MOBILE OPTIMISATION
   ============================================================= */

/* Header icons (search / hamburger) use SVG fill — make them light when the
   header is transparent over a hero, too (not just on the dark shop). */
.broea-has-hero:not(.broea-scrolled) #header.ct-header svg,
.broea-has-hero:not(.broea-scrolled) #header.ct-header svg path,
.broea-has-hero:not(.broea-scrolled) #header.ct-header .ct-toggle svg path {
	fill: var(--cream) !important;
	color: var(--cream) !important;
}

@media (max-width: 768px) {
	/* iOS ignores fixed backgrounds and it can jitter — use scroll on mobile */
	body { background-attachment: scroll; }

	/* Header */
	#header .site-title, #header .site-title a { font-size: 1.28rem !important; letter-spacing: 0.28em !important; }

	/* Hero — a touch shorter, stronger overlay for text legibility, bigger tap targets */
	.broea-hero { min-height: 80vh; }
	.broea-hero::after {
		background: linear-gradient(180deg, rgba(20,16,12,0.5) 0%, rgba(20,16,12,0.38) 45%, rgba(20,16,12,0.66) 100%) !important;
	}
	.broea-hero__inner { max-width: 100%; }
	.broea-hero__title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
	.broea-hero__lead { font-size: 1rem; max-width: 92%; }
	.broea-hero__actions { flex-direction: column; gap: 0.7rem; width: 100%; }
	.broea-hero__actions .broea-btn { width: 100%; text-align: center; }

	/* Section rhythm + headings */
	.broea-section { padding-block: clamp(2.6rem, 9vw, 4rem); }
	.broea-section__head { margin-bottom: 2rem; }
	.broea-section__title { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
	.broea-statement p { font-size: clamp(1.3rem, 5.6vw, 1.85rem); }

	/* Category split + story stack and tighten */
	.broea-split { grid-template-columns: 1fr; }
	.broea-split__cell { min-height: 46vh; }
	.broea-story { grid-template-columns: 1fr; gap: 1.6rem; }
	.broea-story__media { aspect-ratio: 4/3; }
	.broea-steps { grid-template-columns: 1fr; gap: 2rem; }

	/* Shop editorial header */
	.broea-shophead { padding: 5.5rem 1.1rem 1.6rem; }
	.broea-shophead__title { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }
	.broea-shophead__sub { font-size: 0.95rem; }
	.broea-watermark { font-size: clamp(5rem, 30vw, 10rem); }

	/* Footer breathing room */
	.ct-footer { padding-block: 2.5rem 0; }

	/* Slightly fewer, gentler petals feel handled in JS; keep them subtle */
	.broea-petal svg { opacity: 0.9; }
}

@media (max-width: 480px) {
	.broea-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
	.broea-hero { min-height: 78vh; }
	.broea-section__title::after { margin-top: 0.9rem; }
	.broea-step__num { font-size: 2.4rem; }
	.broea-cta__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
}


/* =============================================================
   v6 — CLEAN PRODUCT HOVER (no zoom, no hover "frame", no spotlight box)
   ============================================================= */
/* No zoom / brightness change on hover */
.broea-card:hover .broea-card__media img,
.woocommerce ul.products li.product:hover .ct-media-container img,
.products .product:hover img {
	transform: none !important;
	filter: none !important;
}
/* Keep the soft static glow on hover (don't brighten into a rectangle), and
   remove ALL hover shadows/borders that cast a dark "layer" under the product */
.broea-card:hover .broea-card__media,
.woocommerce ul.products li.product:hover .ct-media-container,
.broea-section--ink .broea-card:hover .broea-card__media,
.post-type-archive-product ul.products li.product:hover .ct-media-container,
.tax-product_cat ul.products li.product:hover .ct-media-container {
	background: radial-gradient(circle at 50% 50%,
		rgba(231, 207, 155, 0.16) 0%,
		rgba(231, 207, 155, 0.05) 42%,
		transparent 68%) !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
/* Remove the cursor-follow spotlight on dark sections (read as a box) */
.broea-section--ink::after { display: none !important; }


/* =============================================================
   v7 — SINGLE PRODUCT: dark scheme (matches shop) + sized gallery
   ============================================================= */
/* Dark backdrop + top champagne glow on the wrapper (covers header too) */
body.single-product #main-container {
	background: var(--ink) radial-gradient(72% 40% at 50% 0%, rgba(217, 193, 154, 0.15), transparent 70%) no-repeat;
}
body.single-product main { background: transparent; }

/* Header: transparent over the dark page, light nav + icons (same as shop) */
body.single-product #header.ct-header { background-color: transparent !important; box-shadow: none !important; }
body.single-product #header.ct-header [data-row],
body.single-product #header.ct-header > div { background-color: transparent !important; }
body.single-product #header .menu a,
body.single-product #header .ct-main-navigation a { color: var(--cream) !important; }
body.single-product #header .ct-main-navigation a:hover { color: var(--champagne) !important; }
body.single-product #header svg,
body.single-product #header svg path,
body.single-product #header .ct-toggle svg path { fill: var(--cream) !important; color: var(--cream) !important; }

/* Hide Blocksy's default page-title hero on single product */
body.single-product .hero-section, body.single-product .page-title { display: none !important; }

/* Text colours → light on dark */
body.single-product .product_title { color: var(--cream) !important; }
body.single-product .summary,
body.single-product .summary p,
body.single-product .woocommerce-product-details__short-description,
body.single-product .woocommerce-product-details__short-description p,
body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-Tabs-panel p,
body.single-product #tab-description,
body.single-product #tab-description p,
body.single-product .entry-content,
body.single-product .entry-content p { color: #D2C6B2 !important; }
body.single-product .summary .price,
body.single-product .summary .price ins,
body.single-product .summary .amount { color: var(--champagne) !important; }
body.single-product h1, body.single-product h2, body.single-product h3,
body.single-product h4, body.single-product .woocommerce-Tabs-panel h2 { color: var(--cream) !important; }

/* Attribute list / categories / meta under the title */
body.single-product .summary ul li,
body.single-product .product_meta,
body.single-product .product_meta a,
body.single-product .summary [class*="ct-term-"],
body.single-product .ct-breadcrumbs,
body.single-product .ct-breadcrumbs a,
body.single-product .summary .posted_in,
body.single-product .summary .posted_in a { color: #C7BBA6 !important; }
body.single-product .summary [class*="ct-term-"] { color: var(--champagne) !important; }

/* Tabs */
body.single-product .woocommerce-tabs ul.tabs li a { color: #C7BBA6 !important; }
body.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--champagne) !important; }
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs li { border-color: rgba(231,207,155,0.25) !important; }

/* Trust badges → light on dark */
body.single-product .broea-trust { border-top-color: rgba(231,207,155,0.25) !important; }
body.single-product .broea-trust li { color: #C7BBA6 !important; }

/* Gallery: centred in its column, product floats on a soft glow, never cropped */
body.single-product .product-entry-wrapper { align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); }
body.single-product .woocommerce-product-gallery {
	max-width: 420px !important; width: 100% !important; margin: 0 auto !important;
	background: radial-gradient(circle at 50% 50%,
		rgba(231, 207, 155, 0.16) 0%, rgba(231, 207, 155, 0.05) 42%, transparent 68%) !important;
	border: none !important; box-shadow: none !important; padding: 6% !important;
	overflow: visible !important;
}
body.single-product .woocommerce-product-gallery .ct-media-container,
body.single-product .woocommerce-product-gallery figure,
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	background: transparent !important; overflow: visible !important; aspect-ratio: auto !important;
	width: 100% !important; height: auto !important;
}
/* Show the full square product — no crop, no hover zoom */
body.single-product .woocommerce-product-gallery img,
body.single-product .woocommerce-product-gallery:hover img {
	background: transparent !important; filter: none !important;
	transform: none !important; scale: none !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	width: 100% !important; height: auto !important;
}

/* Quantity / number inputs readable on dark */
body.single-product .quantity input.qty {
	background: rgba(255,255,255,0.06) !important; color: var(--cream) !important;
	border-color: rgba(231,207,155,0.3) !important;
}

/* Related products on the dark single-product page → light text */
body.single-product ul.products li.product .woocommerce-loop-product__title,
body.single-product ul.products li.product .woocommerce-loop-product__title a { color: var(--cream) !important; }
body.single-product ul.products li.product .price { color: var(--champagne) !important; }
body.single-product ul.products li.product .button {
	color: var(--cream) !important; border-color: rgba(247, 241, 232, 0.4) !important;
}
body.single-product ul.products li.product:hover .button {
	background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important;
}

/* ---- Single product mobile ---- */
@media (max-width: 768px) {
	body.single-product .product-entry-wrapper { flex-direction: column; text-align: center; }
	body.single-product .woocommerce-product-gallery { max-width: 250px !important; }
	body.single-product .product_title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
	body.single-product div.product .summary { padding-left: 0 !important; margin-top: 1.2rem; }
	body.single-product .summary ul { list-style-position: inside; padding-left: 0; }
	body.single-product .broea-trust { justify-content: center; }
	body.single-product .woocommerce-tabs ul.tabs { text-align: center; }
}
@media (max-width: 480px) {
	body.single-product .woocommerce-product-gallery { max-width: 210px !important; }
}