/**
 * Lenzzberry — header & footer "chrome" styles.
 * Loaded on every page. Pairs with /parts/header.html and /parts/footer.html.
 *
 * Color targets sourced from the live storefront:
 *   - Top bar      #0F8093 (teal, white text)
 *   - Header bg    #FAF6EE (cream)
 *   - Logo / brand #0E7B91
 *   - Footer bg    radial #16718B → #0E5868 → #0A4555
 *   - Sign-up btn  #3FA0B0
 */

/* ====================================================================== */
/* HEADER — announcement bar (single static line)                         */
/* ====================================================================== */

.lenzz-topbar {
	background-color: #0F8093;
	color: #FFFFFF;
	font-weight: 500;
	padding: 6px 0;
}

.lenzz-topbar a {
	color: inherit;
	text-decoration: underline;
}

/* Slider container */
.lenzz-topbar-slider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 0 36px;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.02em;
}

/* Slides stack — only the active one is visible */
.lenzz-topbar-slides {
	position: relative;
	flex: 1 1 auto;
	height: 22px;
	overflow: hidden;
	text-align: center;
}

.lenzz-topbar-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 360ms ease, transform 360ms ease;
	pointer-events: none;
	white-space: nowrap;
	color: inherit;
}

.lenzz-topbar-slide.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Prev / next arrows */
.lenzz-topbar-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 22px;
	line-height: 1;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease;
	border-radius: 50%;
}

.lenzz-topbar-arrow:hover,
.lenzz-topbar-arrow:focus-visible {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
	outline: none;
}

.lenzz-topbar-prev { left: 8px; }
.lenzz-topbar-next { right: 8px; }

/* Reduced-motion: disable transitions but keep slides cycling */
@media (prefers-reduced-motion: reduce) {
	.lenzz-topbar-slide {
		transition: none;
		transform: none;
	}
}

@media (max-width: 781px) {
	.lenzz-topbar-slider {
		font-size: 0.75rem;
		padding: 0 30px;
	}
	.lenzz-topbar-slide {
		white-space: normal;
		line-height: 1.4;
	}
}

@media (max-width: 600px) {
	.lenzz-topbar-slider {
		font-size: 0.6875rem;
		padding: 0 26px;
	}
	.lenzz-topbar-arrow {
		font-size: 18px;
		width: 24px;
		height: 24px;
	}
}

/* ====================================================================== */
/* HEADER — main row (logo / nav / search / icons)                        */
/* ====================================================================== */

.lenzz-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #FAF6EE;
	padding: 14px 0;
	border-bottom: 1px solid rgba(14, 123, 145, 0.08);
}

.lenzz-header-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--60);
}

@media (max-width: 960px) {
	.lenzz-header-row {
		padding-left:  var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	.lenzz-header-row {
		padding-left:  var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}
}

/* Logo sizing */
.lenzz-logo .custom-logo-link img,
.lenzz-logo img {
	max-height: 33px;
	width: auto;
	display: block;
}

/* Logo fallback (text site title) tinted with brand color.
   Targets BOTH the classic theme's .lenzz-site-title and the legacy
   block-theme .wp-block-site-title. */
.lenzz-header .lenzz-site-title,
.lenzz-header .wp-block-site-title a,
.lenzz-header .wp-block-site-title {
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--2xl);
	letter-spacing: -0.01em;
	text-decoration: none;
	display: inline-block;
	line-height: 1.1;
}

.lenzz-header .lenzz-site-title:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Right side group (search + icons) */
.lenzz-header-right {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex: 0 0 auto;
}

/* Search box — pill */
.lenzz-header-search {
	flex: 0 1 280px;
	min-width: 200px;
}

/* Pill wrapper — applies to BOTH the classic theme's plain <form> and
   the block theme's nested .wp-block-search__inside-wrapper. */
.lenzz-header-search,
.lenzz-header-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid #D9D2C2;
	border-radius: 999px;
	background: #FFFFFF;
	overflow: hidden;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lenzz-header-search:focus-within,
.lenzz-header-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(14, 123, 145, 0.12);
}

.lenzz-header-search input[type="search"],
.lenzz-header-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.55rem 0.5rem 0.55rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.lenzz-header-search input[type="search"]::placeholder,
.lenzz-header-search .wp-block-search__input::placeholder {
	color: #9CA3AF;
}

.lenzz-header-search input[type="search"]:focus,
.lenzz-header-search .wp-block-search__input:focus {
	box-shadow: none;
	outline: none;
}

.lenzz-header-search button[type="submit"],
.lenzz-header-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 0;
	padding: 0 0.875rem;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 150ms ease;
}

.lenzz-header-search button[type="submit"]:hover,
.lenzz-header-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--brand);
}

/* Header icons — minimal, ink-colored, no labels.
   Works for BOTH the classic markup (where .lenzz-icon-link IS the <a>)
   and the block markup (where .lenzz-icon-link is a <p> wrapping the <a>). */
.lenzz-icon-link,
.lenzz-icon-link a {
	margin: 0;
	font-size: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 150ms ease;
	position: relative;
}

.lenzz-icon-link:hover,
.lenzz-icon-link a:hover {
	color: var(--wp--preset--color--brand);
}

.lenzz-icon-link .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.lenzz-icon-link svg,
.lenzz-cart-link svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Count badge for wishlist */
.lenzz-icon-with-count .lenzz-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: -2px;
	margin-top: -10px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
}

/* Mini-cart — visual size matched to dashicon icons (22px box) with the
   count badge positioned in the corner so it doesn't add to the icon's
   footprint. */
.lenzz-mini-cart .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 0;
	line-height: 1;
	transition: color 150ms ease;
	width: 22px;
	height: 22px;
	position: relative;
}

.lenzz-mini-cart .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--brand);
	background: transparent;
}

.lenzz-mini-cart .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: inline-flex;
	width: 22px;
	height: 22px;
}

.lenzz-mini-cart .wc-block-mini-cart__icon {
	width: 22px !important;
	height: 22px !important;
	display: block;
}

.lenzz-mini-cart .wc-block-mini-cart__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--white) !important;
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Wishlist count bubble — matched to the cart badge for symmetry */
.lenzz-icon-with-count a {
	position: relative;
}

.lenzz-icon-with-count .lenzz-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin: 0;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ====================================================================== */
/* HEADER — main navigation (inline, no uppercase, regular case)          */
/* ====================================================================== */

.lenzz-main-nav {
	font-family: var(--wp--preset--font-family--body);
	flex: 1 1 auto;
}

/* The new drawer-header (logo + close) and drawer-body wrappers are
   markup-only chrome for the mobile drawer. On desktop the header must
   be invisible and the body must NOT affect the menu's flex layout —
   `display: contents` makes the wrapper element transparent to layout
   so its children (the .lenzz-menu) behave as direct children of the
   nav. The mobile @media block below re-shows the header and turns the
   body into the absolute-positioned slide panel container. */
.lenzz-mobile-drawer-header {
	display: none;
}

.lenzz-mobile-drawer-body {
	display: contents;
}

/* Accordion toggle buttons are injected by JS into every parent menu item.
   On desktop the hover-dropdown handles expansion, so the buttons must be
   hidden — the mobile @media block re-shows them as flex columns. */
.lenzz-submenu-toggle {
	display: none;
}

/* Top-level menu — flex row of items */
.lenzz-main-nav .lenzz-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.lenzz-main-nav .menu-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.lenzz-main-nav .menu-item > a {
	display: inline-block;
	color: var(--wp--preset--color--ink);
	padding: 0.5rem 0;
	transition: color 150ms ease;
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
}

.lenzz-main-nav a:hover,
.lenzz-main-nav .current-menu-item > a,
.lenzz-main-nav .current_page_item > a,
.lenzz-main-nav .current-menu-ancestor > a {
	color: var(--wp--preset--color--brand);
}

/* Chevron for items with submenu (classic) */
.lenzz-main-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.4em;
	vertical-align: 0.18em;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

/* Desktop hover-dropdown sub-menus — scoped to >=961px ONLY.
   Without this guard, the `position: absolute; top: 100%; opacity: 0`
   styling leaks onto the mobile drawer (which uses its own slide-panel
   layout) and the hover/focus-within state shows the dropdown over the
   touch menu when a parent is tapped. */
@media (min-width: 961px) {

	.lenzz-main-nav .sub-menu,
	.lenzz-main-nav .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: #FFFFFF;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 8px;
		box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
		padding: 0.5rem 0;
		margin: 0;
		list-style: none;
		z-index: 50;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
	}

	.lenzz-main-nav .menu-item-has-children:hover > .sub-menu,
	.lenzz-main-nav .menu-item-has-children:focus-within > .sub-menu,
	.lenzz-main-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
	.lenzz-main-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Invisible bridge so the hover never breaks across the gap. */
	.lenzz-main-nav .sub-menu::before,
	.lenzz-main-nav .wp-block-navigation__submenu-container::before {
		content: '';
		position: absolute;
		top: -8px;
		left: 0;
		right: 0;
		height: 8px;
		background: transparent;
	}

	/* Sub-menu items */
	.lenzz-main-nav .sub-menu .menu-item > a,
	.lenzz-main-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > a {
		display: block;
		padding: 0.55rem 1rem;
		font-weight: 500;
		color: var(--wp--preset--color--body);
		text-decoration: none;
		white-space: nowrap;
	}

	.lenzz-main-nav .sub-menu .menu-item > a:hover,
	.lenzz-main-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > a:hover {
		background: #F9F6EE;
		color: var(--wp--preset--color--brand);
	}

	/* Third-level submenus open to the side */
	.lenzz-main-nav .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		margin-left: 4px;
	}

	.lenzz-main-nav .sub-menu .menu-item-has-children > a::after {
		float: right;
		margin-top: 0.45em;
		border-left: 5px solid currentColor;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-right: 0;
	}

	/* Submenu chevron (block-theme markup) */
	.lenzz-main-nav .wp-block-navigation-item__has-submenu > a > svg {
		margin-left: 0.25rem;
		stroke: currentColor;
	}

	/* Block-theme overlay */
	.lenzz-main-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: #FAF6EE;
		color: var(--wp--preset--color--ink);
	}

	.lenzz-main-nav .wp-block-navigation__responsive-container.is-menu-open a {
		color: var(--wp--preset--color--ink);
	}

} /* end @media (min-width: 961px) desktop dropdown */

/* ====================================================================== */
/* HEADER — mobile hamburger / drawer (hidden on desktop)                 */
/* ====================================================================== */

.lenzz-mobile-toggle,
.lenzz-mobile-close,
.lenzz-mobile-backdrop {
	display: none;
}

/* ====================================================================== */
/* HEADER — responsive collapse                                           */
/* ====================================================================== */

@media (max-width: 1100px) {
	.lenzz-header-row {
		gap: var(--wp--preset--spacing--40);
	}

	.lenzz-header-search {
		flex-basis: 200px;
		min-width: 160px;
	}
}

@media (max-width: 960px) {

	/* Show hamburger, push logo to center, keep icons on right */
	.lenzz-mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		border-radius: 8px;
		transition: background-color 150ms ease;
		flex: 0 0 auto;
	}
	.lenzz-mobile-toggle:hover,
	.lenzz-mobile-toggle:focus-visible {
		background: rgba(14, 123, 145, 0.08);
		outline: none;
	}
	.lenzz-mobile-toggle svg {
		display: block;
	}

	.lenzz-header-row {
		justify-content: space-between;
	}

	.lenzz-logo {
		flex: 1 1 auto;
		text-align: center;
	}
	.lenzz-logo .custom-logo-link,
	.lenzz-logo a {
		display: inline-block;
	}

	.lenzz-header-search {
		display: none;
	}

	.lenzz-header-right {
		gap: var(--wp--preset--spacing--30);
		flex: 0 0 auto;
	}

	/* =================================================================== */
	/* Mobile drawer — simple accordion nav. Tap a parent and its         */
	/* sub-menu expands inline below with indentation. Same pattern as    */
	/* Amazon, Walmart, Bootstrap, Storefront — proven and bug-free.      */
	/* =================================================================== */

	.lenzz-main-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(340px, 88vw);
		max-width: 100%;
		background: var(--wp--preset--color--cream);
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
		z-index: 200;
		padding: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform 280ms ease;
		flex: none;
	}

	body.lenzz-nav-open .lenzz-main-nav {
		transform: translateX(0);
	}

	/* Header: logo on the left, close button on the right */
	.lenzz-mobile-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px;
		border-bottom: 1px solid rgba(14, 123, 145, 0.10);
		background: var(--wp--preset--color--cream);
		flex: 0 0 auto;
	}

	.lenzz-mobile-drawer-logo {
		display: flex;
		align-items: center;
		min-width: 0;
		overflow: hidden;
	}
	.lenzz-mobile-drawer-logo img,
	.lenzz-mobile-drawer-logo .custom-logo-link img {
		max-height: 33px;
		width: auto;
		display: block;
	}
	.lenzz-mobile-drawer-logo .lenzz-site-title {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--wp--preset--color--brand);
		text-decoration: none;
		letter-spacing: -0.01em;
	}

	.lenzz-mobile-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: static;
		width: 36px;
		height: 36px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--ink);
		cursor: pointer;
		border-radius: 8px;
		transition: background-color 150ms ease;
		flex: 0 0 auto;
	}
	.lenzz-mobile-close:hover,
	.lenzz-mobile-close:focus-visible {
		background: rgba(14, 123, 145, 0.08);
		outline: none;
	}

	/* Body: simple scrollable container, no positioning tricks */
	.lenzz-mobile-drawer-body {
		display: block;
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--cream);
		padding: 0;
	}

	/* All menus are normal block-flow <ul>s — no absolute, no transform */
	.lenzz-mobile-drawer-body .lenzz-menu,
	.lenzz-mobile-drawer-body .sub-menu {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
		background: transparent;
		gap: 0;
	}

	/* Sub-menus are hidden by default — only show when parent has .is-open */
	.lenzz-mobile-drawer-body .sub-menu {
		display: none;
		background: rgba(14, 123, 145, 0.04);
		border-top: 1px solid rgba(14, 123, 145, 0.08);
	}

	.lenzz-mobile-drawer-body .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	/* Each menu row — flex container so the <a> and the injected toggle
	   button sit side-by-side. The <a> takes all available width on its
	   row; the toggle button is a fixed 44px column on the right. */
	.lenzz-mobile-drawer-body .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(14, 123, 145, 0.08);
	}

	.lenzz-mobile-drawer-body .sub-menu .menu-item {
		border-bottom: 1px solid rgba(14, 123, 145, 0.06);
	}

	.lenzz-mobile-drawer-body .sub-menu .menu-item:last-child {
		border-bottom: 0;
	}

	.lenzz-mobile-drawer-body .menu-item > a {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		gap: 12px;
		padding: 14px 20px;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		transition: background-color 150ms ease;
		line-height: 1.3;
	}

	.lenzz-mobile-drawer-body .menu-item > a:hover,
	.lenzz-mobile-drawer-body .menu-item > a:focus-visible {
		background: rgba(14, 123, 145, 0.06);
		color: var(--wp--preset--color--brand);
		outline: none;
	}

	/* Active row tint when its sub-menu is open */
	.lenzz-mobile-drawer-body .menu-item-has-children.is-open > a,
	.lenzz-mobile-drawer-body .menu-item-has-children.is-open > .lenzz-submenu-toggle {
		color: var(--wp--preset--color--brand);
		background: rgba(14, 123, 145, 0.06);
	}

	/* The injected toggle button — separate tap target with proper hit area.
	   At 44px wide it meets the WCAG / Apple HIG min-touch-target guidance. */
	.lenzz-mobile-drawer-body .lenzz-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 44px;
		width: 44px;
		height: auto;
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		border-left: 1px solid rgba(14, 123, 145, 0.08);
		color: var(--wp--preset--color--muted);
		cursor: pointer;
		transition: background-color 150ms ease, color 150ms ease;
		-webkit-tap-highlight-color: transparent;
	}

	.lenzz-mobile-drawer-body .lenzz-submenu-toggle:hover,
	.lenzz-mobile-drawer-body .lenzz-submenu-toggle:focus-visible {
		background: rgba(14, 123, 145, 0.10);
		color: var(--wp--preset--color--brand);
		outline: none;
	}

	/* SVG chevron — points right by default, rotates 90° when parent is open */
	.lenzz-mobile-drawer-body .lenzz-submenu-toggle svg {
		display: block;
		transition: transform 200ms ease;
	}

	.lenzz-mobile-drawer-body .menu-item-has-children.is-open > .lenzz-submenu-toggle svg {
		transform: rotate(90deg);
		color: var(--wp--preset--color--brand);
	}

	/* Hide the old CSS-only chevron on parent links — we use the SVG button now */
	.lenzz-mobile-drawer-body .menu-item-has-children > a::after {
		content: none;
	}

	/* Indent: level 2 = 36px left padding, level 3 = 52px left padding */
	.lenzz-mobile-drawer-body .sub-menu {
		flex-basis: 100%;
	}

	.lenzz-mobile-drawer-body .sub-menu .menu-item > a {
		padding-left: 36px;
		font-size: 0.9rem;
		font-weight: 400;
		color: var(--wp--preset--color--body);
	}

	.lenzz-mobile-drawer-body .sub-menu .sub-menu .menu-item > a {
		padding-left: 52px;
		font-size: 0.875rem;
		opacity: 0.92;
	}

	/* Backdrop */
	.lenzz-mobile-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(10, 60, 70, 0.45);
		z-index: 150;
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
	}
	.lenzz-mobile-backdrop[hidden] {
		display: none;
	}
	body.lenzz-nav-open .lenzz-mobile-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Lock body scroll while drawer is open */
	body.lenzz-nav-open {
		overflow: hidden;
	}
}

@media (max-width: 600px) {
	.lenzz-logo img {
		max-height: 40px;
	}

	.lenzz-header-row {
		gap: var(--wp--preset--spacing--20);
	}
}

/* ====================================================================== */
/* FOOTER — main 4-column area                                            */
/* ====================================================================== */

.lenzz-footer {
	font-family: var(--wp--preset--font-family--body);
	background-color: #0E5868;
	background-image:
		radial-gradient(ellipse 80% 60% at 100% 0%, rgba(63, 160, 176, 0.35) 0%, transparent 60%),
		linear-gradient(180deg, #0E5868 0%, #0A4555 100%);
	color: #FFFFFF;
	padding: 64px 0 28px;
	margin-top: var(--wp--preset--spacing--60);
}

/* Center each direct child block to a fixed container width — there is no
   shared wrapper, so apply the constraints to siblings individually. */
.lenzz-footer-cols,
.lenzz-foot-separator,
.lenzz-foot-copyright {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
	box-sizing: border-box;
}

@media (max-width: 960px) {
	.lenzz-footer-cols,
	.lenzz-foot-separator,
	.lenzz-foot-copyright {
		padding-left:  var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	.lenzz-footer-cols,
	.lenzz-foot-separator,
	.lenzz-foot-copyright {
		padding-left:  var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}
}

.lenzz-footer a {
	color: #FFFFFF;
	text-decoration: none;
	transition: opacity 150ms ease;
}

.lenzz-footer a:hover {
	opacity: 0.75;
}

.lenzz-footer p {
	margin: 0 0 0.75rem;
}

.lenzz-foot-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #FFFFFF;
	margin: 0 0 1.125rem;
	line-height: 1.3;
}

/* About column — body text */
.lenzz-foot-about-text {
	color: #FFFFFF;
	opacity: 0.95;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.lenzz-foot-about-text strong {
	font-weight: 700;
}

.lenzz-foot-contact {
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
}

.lenzz-foot-contact a {
	color: #FFFFFF;
}

/* List columns */
.lenzz-foot-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lenzz-foot-list li {
	margin: 0 0 0.375rem;
}

.lenzz-foot-list a {
	display: inline-block;
	padding: 0.125rem 0;
	color: #FFFFFF;
	font-size: 0.9375rem;
}

/* ====================================================================== */
/* FOOTER — social icons (outlined white circles)                         */
/* ====================================================================== */

.lenzz-foot-social {
	display: flex;
	gap: 0.625rem;
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	flex-wrap: wrap;
}

.lenzz-foot-social li {
	margin: 0;
	padding: 0;
}

/* Outlined white circles. Targets BOTH the classic theme's plain anchor
   and the legacy block-theme `.wp-social-link` markup. */
.lenzz-foot-social a,
.lenzz-foot-social .wp-social-link,
.lenzz-foot-social .wp-block-social-link {
	background: transparent !important;
	color: #FFFFFF !important;
	border: 1.5px solid #FFFFFF;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 0;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.lenzz-foot-social a:hover,
.lenzz-foot-social .wp-social-link:hover,
.lenzz-foot-social .wp-block-social-link:hover {
	background: #FFFFFF !important;
	color: #0E5868 !important;
	transform: translateY(-2px);
}

.lenzz-foot-social a svg,
.lenzz-foot-social .wp-social-link svg,
.lenzz-foot-social .wp-block-social-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
}

/* ====================================================================== */
/* FOOTER — newsletter form                                               */
/* ====================================================================== */

/* The <form> itself is just a vertical stack: pill row on top, feedback
   line below. Hidden inputs (action, nonce) are display:none by default
   so they don't show up in the layout. */
.lenzz-newsletter {
	display: block;
	margin: 0 0 0.9rem;
}

/* The pill — single row containing input + submit button. Solid white so
   the typing area is clearly visible against the dark teal footer, and so
   any third-party CSS that forces input backgrounds to white doesn't
   conflict with the field text colour. */
.lenzz-newsletter-row {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	padding: 5px 5px 5px 6px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lenzz-newsletter-row:focus-within {
	border-color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.lenzz-newsletter.is-success .lenzz-newsletter-row {
	border-color: #B8F2C7;
	box-shadow: 0 0 0 3px rgba(184, 242, 199, 0.25);
}

.lenzz-newsletter.is-error .lenzz-newsletter-row {
	border-color: #FFD1D1;
	box-shadow: 0 0 0 3px rgba(255, 209, 209, 0.25);
}

.lenzz-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: #FFFFFF;
	color: #1A1A1A;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.65rem 0.5rem 0.65rem 1rem;
	outline: none;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}

.lenzz-newsletter-input::placeholder {
	color: rgba(0, 0, 0, 0.5);
	opacity: 1; /* Firefox dims placeholders by default — force full opacity */
}

.lenzz-newsletter-input:focus {
	box-shadow: none;
	outline: none;
	color: #0E1A1F;
}

/* Kill the ugly Chrome autofill yellow — keep text dark on the white pill. */
.lenzz-newsletter-input:-webkit-autofill,
.lenzz-newsletter-input:-webkit-autofill:hover,
.lenzz-newsletter-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #1A1A1A;
	-webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
	transition: background-color 9999s ease-in-out 0s;
	caret-color: #1A1A1A;
}

.lenzz-newsletter-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-light, #3FA0B0);
	color: #FFFFFF;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.6rem 1.4rem;
	min-height: 40px;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.lenzz-newsletter-button:hover {
	background: #4FB1C1;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(63, 160, 176, 0.35);
}

.lenzz-newsletter-button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.lenzz-newsletter-button[disabled] {
	opacity: 0.75;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

/* Spinner — hidden by default, shown only while .is-loading. */
.lenzz-newsletter-spinner {
	display: none;
	animation: lenzz-newsletter-spin 720ms linear infinite;
}

.lenzz-newsletter.is-loading .lenzz-newsletter-spinner {
	display: inline-block;
}

.lenzz-newsletter.is-loading .lenzz-newsletter-button-label {
	opacity: 0.7;
}

@keyframes lenzz-newsletter-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Honeypot — offscreen but still present in the DOM so bots fill it. */
.lenzz-newsletter-hp {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Feedback line — sits below the pill, never inside it. min-height keeps
   the layout from jumping when a message appears. */
.lenzz-newsletter-feedback {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0.55rem 0 0;
	padding: 0 0.25rem;
	font-size: 0.82rem;
	line-height: 1.45;
	min-height: 1.1em;
	color: rgba(255, 255, 255, 0.92);
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity 200ms ease, transform 200ms ease, color 150ms ease;
}

.lenzz-newsletter.is-success .lenzz-newsletter-feedback,
.lenzz-newsletter.is-error .lenzz-newsletter-feedback,
.lenzz-newsletter.is-loading .lenzz-newsletter-feedback {
	opacity: 1;
	transform: translateY(0);
}

/* Status dot — pure CSS, sits before the message text via ::before. */
.lenzz-newsletter-feedback::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: 0.5em;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.7;
}

.lenzz-newsletter:not(.is-success):not(.is-error):not(.is-loading) .lenzz-newsletter-feedback::before {
	display: none;
}

.lenzz-newsletter.is-success .lenzz-newsletter-feedback {
	color: #B8F2C7;
}

.lenzz-newsletter.is-error .lenzz-newsletter-feedback {
	color: #FFD1D1;
}

.lenzz-newsletter.is-success .lenzz-newsletter-input,
.lenzz-newsletter.is-success .lenzz-newsletter-button {
	pointer-events: none;
}

.lenzz-newsletter-fineprint {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0.75rem 0 0;
	line-height: 1.6;
}

.lenzz-newsletter-fineprint a {
	color: #FFFFFF;
	border-bottom: 0;
}

.lenzz-newsletter-fineprint a strong {
	font-weight: 700;
}

.lenzz-newsletter-fineprint a:hover strong {
	opacity: 0.8;
}

/* ====================================================================== */
/* FOOTER — separator + copyright                                         */
/* ====================================================================== */

.lenzz-foot-separator {
	border: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	margin-top: 36px;
	margin-bottom: 18px;
}

.lenzz-foot-copyright {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	text-align: center;
}

/* ====================================================================== */
/* FOOTER — column layout + responsive                                    */
/* ====================================================================== */

/* Parent grid — 4 equal columns by default. Was missing entirely (column
   layout silently fell back to default block flow), causing the cramped
   stacked look the user reported. */
.lenzz-footer-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.lenzz-footer-col {
	min-width: 0;
}

@media (max-width: 960px) {
	.lenzz-footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50);
	}
	.lenzz-footer-cols .wp-block-column {
		flex-basis: 50% !important;
		margin-bottom: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	.lenzz-footer-cols {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
	.lenzz-footer-cols .wp-block-column {
		flex-basis: 100% !important;
	}

	.lenzz-foot-copyright {
		text-align: center;
	}

	/* Mobile newsletter — the pill turns into a stacked column so the
	   input and the button each get a full-width tap target. */
	.lenzz-newsletter-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		border-radius: 18px;
		padding: 8px;
	}

	.lenzz-newsletter-input {
		width: 100%;
		padding: 0.7rem 1rem;
		text-align: left;
	}

	.lenzz-newsletter-button {
		width: 100%;
		padding: 0.7rem 1rem;
	}
}

/* ====================================================================== */
/* MINI-CART DRAWER                                                       */
/* ====================================================================== */

.lenzz-minicart-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 30, 0.55);
	opacity: 0;
	transition: opacity 260ms ease;
	z-index: 300;
	pointer-events: none;
}

.lenzz-minicart-backdrop[hidden] {
	display: none;
}

body.lenzz-minicart-open .lenzz-minicart-backdrop {
	opacity: 1;
	pointer-events: auto;
}

.lenzz-minicart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: #FFFFFF;
	box-shadow: -8px 0 28px rgba(15, 23, 30, 0.18);
	z-index: 310;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}

.lenzz-minicart[hidden] {
	display: flex; /* override default to allow slide animation */
}

body.lenzz-minicart-open .lenzz-minicart {
	transform: translateX(0);
}

body.lenzz-minicart-open {
	overflow: hidden;
}

/* Header — title + count + close */
.lenzz-minicart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wp--preset--color--border, rgba(14, 123, 145, 0.10));
	flex: 0 0 auto;
}

.lenzz-minicart-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.lenzz-minicart-header-count {
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted, #6B7280);
	font-variant-numeric: tabular-nums;
}

.lenzz-minicart-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	border-radius: 8px;
	transition: background-color 150ms ease;
}

.lenzz-minicart-close:hover,
.lenzz-minicart-close:focus-visible {
	background: rgba(14, 123, 145, 0.08);
	outline: none;
}

/* Drawer body — scrollable content area */
.lenzz-minicart-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* outer body is the layout container */
}

/* Free-shipping progress bar */
.lenzz-minicart-progress {
	flex: 0 0 auto;
	padding: 14px 20px 18px;
	background: rgba(255, 138, 61, 0.06);
	border-bottom: 1px solid rgba(255, 138, 61, 0.15);
}

.lenzz-minicart-progress.is-unlocked {
	background: rgba(37, 194, 110, 0.08);
	border-bottom-color: rgba(37, 194, 110, 0.22);
	color: #1F7A47;
}

.lenzz-minicart-progress-text {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	margin-bottom: 10px;
}

.lenzz-minicart-progress.is-unlocked .lenzz-minicart-progress-text {
	color: #1F7A47;
}

.lenzz-minicart-progress-text svg {
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent, #FF8A3D);
}

.lenzz-minicart-progress.is-unlocked .lenzz-minicart-progress-text svg {
	color: #25C26E;
}

.lenzz-minicart-progress-text strong {
	font-weight: 700;
	color: var(--wp--preset--color--accent, #FF8A3D);
}

.lenzz-minicart-progress.is-unlocked .lenzz-minicart-progress-text strong {
	color: #1F7A47;
}

.lenzz-minicart-progress-bar {
	position: relative;
	height: 6px;
	background: rgba(15, 23, 30, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.lenzz-minicart-progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--accent, #FF8A3D), #FFB37A);
	border-radius: 999px;
	transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 0%;
}

.lenzz-minicart-progress.is-unlocked .lenzz-minicart-progress-fill {
	background: linear-gradient(90deg, #25C26E, #6FE39C);
}

/* Empty state */
.lenzz-minicart-empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: 40px 24px;
	color: var(--wp--preset--color--muted, #6B7280);
}

.lenzz-minicart-empty svg {
	opacity: 0.45;
}

.lenzz-minicart-empty-title {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.lenzz-minicart-empty-subtitle {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	max-width: 28ch;
}

.lenzz-minicart-empty-cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.5rem;
	background: var(--wp--preset--color--brand, #0E7B91);
	color: #FFFFFF !important;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 150ms ease, transform 150ms ease;
}

.lenzz-minicart-empty-cta:hover {
	background: var(--wp--preset--color--brand-light, #3FA0B0);
	transform: translateY(-1px);
}

/* Cart items list */
.lenzz-minicart-items {
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: 4px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lenzz-minicart-item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 12px;
	align-items: stretch;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, rgba(14, 123, 145, 0.08));
	transition: opacity 200ms ease;
}

.lenzz-minicart-item:last-child {
	border-bottom: 0;
}

.lenzz-minicart-item.is-updating {
	opacity: 0.5;
	pointer-events: none;
}

.lenzz-minicart-item.is-removing {
	opacity: 0;
	transform: translateX(20px);
}

.lenzz-minicart-item-image {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	background: #F6F4EE;
	flex: 0 0 72px;
}

.lenzz-minicart-item-image img,
.lenzz-minicart-item-image a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lenzz-minicart-item-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 4px;
}

.lenzz-minicart-item-title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.lenzz-minicart-item-title a {
	color: inherit;
	text-decoration: none;
}

.lenzz-minicart-item-title a:hover {
	color: var(--wp--preset--color--brand, #0E7B91);
}

.lenzz-minicart-item-meta {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #6B7280);
	line-height: 1.4;
}

.lenzz-minicart-item-meta p,
.lenzz-minicart-item-meta dl {
	margin: 0;
}

.lenzz-minicart-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

/* Qty stepper inside the drawer */
.lenzz-minicart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border, rgba(14, 123, 145, 0.15));
	border-radius: 999px;
	background: #FFFFFF;
	overflow: hidden;
}

.lenzz-minicart-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 150ms ease;
}

.lenzz-minicart-qty-btn:hover,
.lenzz-minicart-qty-btn:focus-visible {
	background: rgba(14, 123, 145, 0.08);
	outline: none;
}

.lenzz-minicart-qty-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	padding: 0 4px;
	font-size: 0.85rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.lenzz-minicart-item-price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand, #0E7B91);
	text-align: right;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Strikethrough regular price when on sale. `wc_price()` wraps the
   number in <bdi>, so we target the del wrapper directly. */
.lenzz-minicart-item-price del {
	color: var(--wp--preset--color--muted, #9CA3AF);
	font-weight: 500;
	font-size: 0.78rem;
	text-decoration: line-through;
}

.lenzz-minicart-item-price del bdi {
	color: inherit;
}

/* <ins> wraps the sale price in get_price_html() output — kill the
   default underline so it doesn't look like a link. */
.lenzz-minicart-item-price ins {
	background: transparent;
	text-decoration: none;
	color: var(--wp--preset--color--brand, #0E7B91);
	font-weight: 700;
}

.lenzz-minicart-remove {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 4px 0 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--muted, #9CA3AF);
	cursor: pointer;
	border-radius: 8px;
	transition: color 150ms ease, background-color 150ms ease;
}

.lenzz-minicart-remove:hover,
.lenzz-minicart-remove:focus-visible {
	color: #D04B3E;
	background: rgba(208, 75, 62, 0.08);
	outline: none;
}

/* Footer — subtotal + CTAs */
.lenzz-minicart-footer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
	border-top: 1px solid var(--wp--preset--color--border, rgba(14, 123, 145, 0.10));
	background: #FAF6EE;
}

.lenzz-minicart-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 4px;
}

.lenzz-minicart-subtotal strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--brand, #0E7B91);
	font-variant-numeric: tabular-nums;
}

/* "You saved Rs.X on this order" — small green pill between the
   subtotal and the CTA buttons. Only rendered when at least one cart
   item is on sale, so it doesn't display when total savings are zero. */
.lenzz-minicart-savings {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 6px 12px;
	margin: -2px 0 6px;
	background: rgba(37, 194, 110, 0.12);
	border: 1px solid rgba(37, 194, 110, 0.28);
	border-radius: 999px;
	color: #1F7A47;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.3;
	max-width: 100%;
}

.lenzz-minicart-savings svg {
	flex: 0 0 auto;
	color: #25C26E;
}

.lenzz-minicart-savings strong,
.lenzz-minicart-savings bdi {
	font-weight: 700;
	color: #1F7A47;
	font-variant-numeric: tabular-nums;
}

.lenzz-minicart-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0.85rem 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	min-height: 46px;
	box-sizing: border-box;
}

.lenzz-minicart-cta-outline {
	background: transparent;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--ink);
}

.lenzz-minicart-cta-outline:hover {
	background: var(--wp--preset--color--ink);
	color: #FFFFFF !important;
}

.lenzz-minicart-cta-primary {
	background: var(--wp--preset--color--brand, #0E7B91);
	color: #FFFFFF !important;
	border: 1px solid transparent;
}

.lenzz-minicart-cta-primary:hover {
	background: var(--wp--preset--color--brand-light, #3FA0B0);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(14, 123, 145, 0.25);
}

/* Animate the cart-count badge when it changes */
.lenzz-count.is-bumped {
	animation: lenzz-cart-bump 360ms ease-out;
}

@keyframes lenzz-cart-bump {
	0%   { transform: scale(1);   }
	35%  { transform: scale(1.4); }
	100% { transform: scale(1);   }
}

/* Mobile — full width, no rounded edge, slightly tighter padding */
@media (max-width: 540px) {
	.lenzz-minicart {
		width: 100vw;
		max-width: 100vw;
	}
	.lenzz-minicart-header,
	.lenzz-minicart-progress,
	.lenzz-minicart-items,
	.lenzz-minicart-footer {
		padding-left: 16px;
		padding-right: 16px;
	}
	.lenzz-minicart-item {
		grid-template-columns: 64px 1fr auto;
		gap: 10px;
	}
	.lenzz-minicart-item-image {
		width: 64px;
		height: 64px;
		flex-basis: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lenzz-minicart,
	.lenzz-minicart-backdrop,
	.lenzz-minicart-progress-fill,
	.lenzz-count.is-bumped {
		transition: none;
		animation: none;
	}
}