/* ==========================================================================
   Header, navigation, mobile menu, cart drawer, footer
   ========================================================================== */

/* --------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--lcbm-color-bg);
	box-shadow: none;
	transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: var(--lcbm-shadow-sm); }

.header-container {
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding: 0.9rem var(--lcbm-space-sm);
	display: flex;
	align-items: center;
	gap: var(--lcbm-space-sm);
	min-height: var(--lcbm-header-height);
}

.site-branding {
	flex: 1;
	display: flex;
	align-items: center;
}
.site-branding img { max-height: var(--lcbm-logo-height, 56px); width: auto; }
.site-title-link {
	font-family: var(--lcbm-font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--lcbm-color-text);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.header-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--lcbm-color-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.header-icon-btn:hover { background: var(--lcbm-color-bg-light); color: var(--lcbm-color-primary); }

.lcbm-cart-count,
.lcbm-wishlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 50%;
	background: var(--lcbm-color-secondary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: transparent;
	border: none;
	border-radius: 50%;
}
.mobile-menu-toggle:hover { background: var(--lcbm-color-bg-light); }
.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--lcbm-color-text);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; }
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); top: 0; }

/* Primary nav: hidden on mobile, shown from desktop breakpoint */
.main-navigation { display: none; }

@media (min-width: 1024px) {
	.mobile-menu-toggle { display: none; }
	.main-navigation { display: block; flex: 2; }
	#primary-menu { display: flex; justify-content: flex-end; gap: 0.25rem; }
	#primary-menu > li { position: relative; }
	#primary-menu .menu-link {
		display: inline-flex;
		padding: 0.6rem 1rem;
		font-weight: 600;
		border-radius: var(--lcbm-radius-pill);
	}
	#primary-menu .menu-link:hover,
	#primary-menu li.current-menu-item > .menu-link { background: var(--lcbm-color-bg-light); color: var(--lcbm-color-primary); }

	.has-mega-menu > .menu-link::after {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 0.4rem;
		margin-bottom: 2px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		opacity: 0.6;
	}

	/* Mega menu panel */
	.mega-menu-panel {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(8px);
		min-width: 560px;
		background: var(--lcbm-color-bg);
		border-radius: var(--lcbm-radius-md);
		box-shadow: var(--lcbm-shadow-lg);
		padding: var(--lcbm-space-sm);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		z-index: 950;
	}
	.has-mega-menu:hover .mega-menu-panel,
	.has-mega-menu:focus-within .mega-menu-panel {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
	.mega-menu-panel-inner .sub-menu {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 0.25rem 1.5rem;
	}
	.mega-menu-panel .menu-link {
		display: block;
		padding: 0.55rem 0.75rem;
		border-radius: var(--lcbm-radius-sm);
		font-weight: 500;
	}
	.mega-menu-panel .menu-link:hover { background: var(--lcbm-color-bg-light); color: var(--lcbm-color-primary); }
}

/* --------------------------------------------------------------------
   Header search panel
   -------------------------------------------------------------------- */
.header-search-panel {
	background: var(--lcbm-color-bg-light);
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}
.header-search-panel:not([hidden]) { max-height: 100px; }
.header-search-panel-inner { max-width: 640px; margin-inline: auto; padding: var(--lcbm-space-sm); }
.lcbm-search-form { display: flex; gap: 0.5rem; }
.lcbm-search-form .search-field { flex: 1; }
.lcbm-search-form .search-submit {
	background: var(--lcbm-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--lcbm-radius-sm);
	width: 46px;
}

/* --------------------------------------------------------------------
   Mobile slide menu
   -------------------------------------------------------------------- */
.mobile-menu { position: fixed; inset: 0; z-index: 1200; visibility: hidden; }
.mobile-menu[aria-hidden="false"] { visibility: visible; }

.mobile-menu-overlay {
	position: absolute; inset: 0;
	background: rgba(34, 34, 34, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.mobile-menu[aria-hidden="false"] .mobile-menu-overlay { opacity: 1; }

.mobile-menu-panel {
	position: absolute;
	top: 0; left: 0;
	width: min(85vw, 360px);
	height: 100%;
	background: var(--lcbm-color-bg);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	padding: var(--lcbm-space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--lcbm-space-sm);
}
.mobile-menu[aria-hidden="false"] .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-title { font-family: var(--lcbm-font-heading); font-weight: 700; }
.mobile-menu-close { background: none; border: none; font-size: 1.75rem; line-height: 1; }

#mobile-primary-menu li { border-bottom: 1px solid var(--lcbm-color-border); }
#mobile-primary-menu .menu-link { display: block; padding: 0.9rem 0.25rem; font-weight: 600; }
#mobile-primary-menu .sub-menu { padding-left: 1rem; }

.mobile-menu-footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; padding-top: var(--lcbm-space-sm); border-top: 1px solid var(--lcbm-color-border); }
.mobile-menu-socials { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; }

/* --------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------- */
.cart-drawer { position: fixed; inset: 0; z-index: 1300; visibility: hidden; }
.cart-drawer[aria-hidden="false"] { visibility: visible; }

.cart-drawer-overlay {
	position: absolute; inset: 0;
	background: rgba(34, 34, 34, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.cart-drawer[aria-hidden="false"] .cart-drawer-overlay { opacity: 1; }

.cart-drawer-panel {
	position: absolute;
	top: 0; right: 0;
	width: min(90vw, 420px);
	height: 100%;
	background: var(--lcbm-color-bg);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}
.cart-drawer[aria-hidden="false"] .cart-drawer-panel { transform: translateX(0); }

.cart-drawer-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--lcbm-space-sm);
	border-bottom: 1px solid var(--lcbm-color-border);
}
.cart-drawer-title { font-family: var(--lcbm-font-heading); font-weight: 700; font-size: 1.1rem; }
.cart-drawer-close { background: none; border: none; font-size: 1.75rem; line-height: 1; }
.cart-drawer-content { flex: 1; overflow-y: auto; padding: var(--lcbm-space-sm); }

.cart-drawer-content .woocommerce-mini-cart { display: flex; flex-direction: column; gap: 0.75rem; }
.cart-drawer-content .woocommerce-mini-cart-item {
	/* WooCommerce wraps the thumbnail + product name in a single <a>,
	   followed by a sibling <span class="quantity">, and the remove link
	   before both — so this is flex, not a fixed 3-column grid. */
	display: flex;
	align-items: center;
	gap: 0.75rem;
	position: relative;
	padding-right: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--lcbm-color-border);
}
.cart-drawer-content .woocommerce-mini-cart-item > a:not(.remove) {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	min-width: 0;
	color: var(--lcbm-color-text);
	font-size: 0.9rem;
	font-weight: 600;
}
.cart-drawer-content .woocommerce-mini-cart-item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--lcbm-radius-sm);
	flex-shrink: 0;
}
.cart-drawer-content .woocommerce-mini-cart-item .quantity {
	flex-shrink: 0;
	font-size: 0.85rem;
	color: var(--lcbm-color-text-muted);
	white-space: nowrap;
}
.cart-drawer-content .woocommerce-mini-cart-item a.remove {
	position: absolute; top: 0; right: 0;
	color: var(--lcbm-color-text-muted);
	line-height: 1;
}
.cart-drawer-content .total { font-weight: 700; padding-block: var(--lcbm-space-sm); border-top: 2px solid var(--lcbm-color-border); margin-top: 0.5rem; }
.cart-drawer-content .buttons { display: flex; flex-direction: column; gap: 0.6rem; }
.cart-drawer-content .buttons a { text-align: center; padding: 0.85rem 1.9rem; border-radius: var(--lcbm-radius-pill); font-weight: 600; }
.cart-drawer-content a.button:not(.checkout) { border: 2px solid var(--lcbm-color-text); }
.cart-drawer-content a.checkout { background: var(--lcbm-color-primary); color: #fff; }
.cart-drawer-content .woocommerce-mini-cart__empty-message { text-align: center; color: var(--lcbm-color-text-muted); }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer {
	--footer-bg: var(--lcbm-footer-bg, #23112F);
	--footer-bg-alt: #1A0C23;
	--footer-text: #f7f1e8;
	--footer-text-muted: #cbb79e;
	--footer-border: rgba(255, 255, 255, 0.14);
	background: var(--footer-bg);
	color: var(--footer-text-muted);
	margin-top: var(--lcbm-space-xl);
}

.footer-trust-strip { background: var(--footer-bg-alt); border-bottom: 1px solid var(--footer-border); }
.footer-trust-strip-inner {
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding: var(--lcbm-space-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: center;
}
.footer-trust-strip-inner span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--footer-text-muted); }
.footer-trust-strip-inner svg { color: var(--lcbm-color-accent); flex-shrink: 0; }

.footer-main-inner {
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding: var(--lcbm-space-xl) var(--lcbm-space-sm);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lcbm-space-lg);
}
@media (min-width: 768px) {
	.footer-main-inner { grid-template-columns: repeat(2, 1fr); }
}
/* Column count varies (Shop and Hair Concerns only render once there's
   real content) — footer.php adds a .lcbm-footer-cols-{n} class so the
   grid template always matches what's actually rendered, instead of a
   fixed template leaving a stray empty column on the right. */
@media (min-width: 1024px) {
	.lcbm-footer-cols-3 { grid-template-columns: 1.4fr repeat(2, 1fr); }
	.lcbm-footer-cols-4 { grid-template-columns: 1.4fr repeat(3, 1fr); }
	.lcbm-footer-cols-5 { grid-template-columns: 1.4fr repeat(4, 1fr); }
}

.footer-column-brand .custom-logo-link { display: inline-block; }
.footer-column-brand .custom-logo { max-height: 40px; width: auto; margin-bottom: 0.5rem; filter: brightness(0) invert(1); }
.footer-brand-name { font-family: var(--lcbm-font-heading); font-weight: 800; font-size: 1.3rem; color: var(--footer-text); }
.footer-tagline { color: var(--footer-text-muted); max-width: 320px; }
.footer-socials { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--footer-border);
	color: var(--footer-text);
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social-icon:hover { color: var(--lcbm-color-accent); border-color: var(--lcbm-color-accent); transform: translateY(-2px); }

.footer-widget-title { font-family: var(--lcbm-font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--footer-text); margin-bottom: 1rem; }
.footer-newsletter-title { margin-top: var(--lcbm-space-md); }

.footer-nap { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.85rem; margin: 0 0 var(--lcbm-space-md); color: var(--footer-text-muted); }
.footer-nap-item { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer-nap-item svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--lcbm-color-accent); }
.footer-nap-item address { font-style: normal; }
.footer-newsletter-sub { font-size: 0.85rem; color: var(--footer-text-muted); margin: -0.5rem 0 0.75rem; }
.footer-links li,
.footer-column ul li { margin-bottom: 0.6rem; }
.footer-links a,
.footer-column a { color: var(--footer-text-muted); }
.footer-links a:hover,
.footer-column a:hover { color: var(--lcbm-color-accent); }

.footer-bottom { border-top: 1px solid var(--footer-border); }
.footer-bottom-inner {
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding: var(--lcbm-space-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--footer-text-muted);
}
.footer-payment-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer-payment-icons span {
	display: inline-flex;
	color: var(--footer-text-muted);
}
.footer-payment-icons svg { display: block; }
.footer-payment-icons svg rect { color: var(--footer-border); }