/* =============================================================
   ADORNCROFT – SITE-WIDE HEADER
   Loaded on every page (inc/header.php) — self-contained, doesn't
   depend on any other stylesheet being present.
   ============================================================= */

.ac-site-header {
	--ac-header-cream : #F7F3EE;
	--ac-header-dark  : #2B2A29;
	--ac-header-blush : #E8CFCF;
	--ac-header-green : #E3E8D6;

	position    : sticky;
	top         : 0;
	z-index     : 100;
	font-family : 'Satoshi Variable', system-ui, sans-serif;
}

/* !important: beats more-specific selectors elsewhere (e.g. Astra's own
   #colophon/nav link styles) that would otherwise leak a different font in
   — same fix already applied to the footer for the same reason. */
.ac-site-header * {
	box-sizing  : border-box;
	font-family : 'Satoshi Variable', system-ui, sans-serif !important;
}

/* ── USP banner — part of the sticky header (see .ac-site-header) ── */
.ac-site-header-usp {
	width      : 100%;
	background : var(--ac-header-blush);
	padding    : 8px clamp(20px, 11vw, 160px);
	text-align : center;
}

.ac-site-header-usp p {
	margin      : 0;
	font-size   : 12px;
	font-weight : 700;
	line-height : 17px;
	color       : var(--ac-header-dark);
}

/* ── Nav bar ─────────────────────────────────────────────────── */
.ac-site-header-nav {
	width      : 100%;
	background : rgba(247, 243, 238, 0.98);
	border-bottom : 1px solid var(--ac-header-dark);
	padding    : 0 20px;
}

.ac-site-header-nav-inner {
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	justify-content : space-between;
	gap             : 24px;
	max-width       : 1400px;
	margin          : 0 auto;
	padding         : 18px 0;
}

.ac-site-header-left {
	display     : flex;
	align-items : center;
	gap         : 24px;
	min-width   : 0;
}

.ac-site-header-logo {
	flex-shrink : 0;
	display     : block;
	line-height : 0;
}

.ac-site-header-logo svg { display : block; }

/* ── Primary menu ────────────────────────────────────────────── */
.ac-site-header-menu {
	display   : flex;
	flex-wrap : wrap;
	list-style: none;
	margin    : 0;
	padding   : 0;
}

/* Static (not relative) so the nested .ac-nav-overlay panel's containing
   block stays .ac-site-header-nav — keeping the desktop mega-menu full-width
   even though the panel now lives inside its <li>. */
.ac-site-header-menu-item { position : static; }

.ac-site-header-menu-item > a {
	display         : flex;
	align-items     : center;
	gap             : 4px;
	padding         : 4px 8px;
	border-radius   : 4px;
	font-size       : 12px;
	font-weight     : 700;
	line-height     : 14px;
	text-transform  : uppercase;
	text-decoration : none;
	white-space     : nowrap;
	color           : var(--ac-header-dark);
}

.ac-site-header-menu-item > a:hover,
.ac-site-header-menu-item.is-open > a {
	text-decoration : underline;
}

.ac-site-header-menu-chevron {
	flex-shrink : 0;
	transition  : transform 0.15s ease;
}

.ac-site-header-menu-item.is-open .ac-site-header-menu-chevron {
	transform : rotate(180deg);
}

/* ── Buttons + icons ─────────────────────────────────────────── */
.ac-site-header-right {
	display     : flex;
	align-items : center;
	gap         : 16px;
	min-width   : 0;
}

.ac-site-header .ac-btn {
	display          : inline-flex;
	align-items      : center;
	justify-content  : center;
	padding          : 11px 16px;
	background       : var(--ac-header-cream);
	color            : var(--ac-header-dark);
	border           : 1px solid var(--ac-header-dark);
	font-size        : 12px;
	font-weight      : 700;
	line-height      : 14px;
	text-align       : center;
	text-transform   : uppercase;
	text-decoration  : none;
	letter-spacing   : .5px;
	white-space      : nowrap;
	transition       : background 0.2s ease, color 0.2s ease;
}

.ac-site-header .ac-btn--dark {
	background   : var(--ac-header-dark);
	color        : var(--ac-header-cream);
	border-color : var(--ac-header-cream);
}

.ac-site-header .ac-btn:hover {
	background   : var(--ac-header-green) !important;
	color        : var(--ac-header-dark) !important;
	border-color : var(--ac-header-dark) !important;
}

.ac-site-header-icons {
	display     : flex;
	align-items : center;
	gap         : 8px;
}

.ac-site-header-icon-btn {
	display         : flex;
	align-items     : center;
	justify-content : center;
	padding         : 8px 4px;
	background      : none;
	border          : none;
	cursor          : pointer;
	color           : var(--ac-header-dark);
	position        : relative;
	line-height     : 0;
}

.ac-site-header-basket-count {
	position      : absolute;
	top           : -2px;
	right         : -4px;
	min-width     : 15px;
	height        : 15px;
	padding       : 0 3px;
	border-radius : 50%;
	background    : var(--ac-header-dark);
	color         : var(--ac-header-cream);
	font-size     : 10px;
	font-weight   : 700;
	line-height   : 15px;
	text-align    : center;
}

/* Always in the DOM (so AJAX cart fragments can target it), but invisible
   when the cart is empty. */
.ac-site-header-basket-count:empty { display : none; }

/* ── Search (toggled by JS, state class on .ac-site-header-nav) ─────
   While searching, EVERYTHING on the right side (both buttons, the search
   icon, and the basket) is replaced by one bordered search bar occupying
   that same flex slot, with the magnifier and X icons inside the bar. */
.ac-site-header-right-default {
	display     : flex;
	align-items : center;
	gap         : 16px;
	min-width   : 0;
}

.ac-site-header-nav.is-searching .ac-site-header-right-default { display : none; }

.ac-site-header-search-panel {
	display     : none;
	align-items : center;
	gap         : 12px;
	width       : min(419px, 60vw);
	min-height  : 38px;
	padding     : 1px 16px; /* 34px input + 1px + 1px borders = the 38px bar from Figma */
	background  : var(--ac-header-cream);
	border      : 1px solid var(--ac-header-dark);
}

.ac-site-header-nav.is-searching .ac-site-header-search-panel { display : flex; }

/* input[type=...] (element + attribute) so it out-ranks Astra's own
   `input[type=search]` rules — a bare class selector loses that specificity
   fight and Astra's border, 2px radius, #666 color, .75em padding,
   comment-input background, box-shadow, and 34px height all leak through. */
input[type="search"].ac-site-header-search-input {
	flex          : 1 1 auto;
	min-width     : 0;
	height        : 34px;
	padding       : 0;
	border        : none;
	border-radius : 0;
	background    : transparent;
	box-shadow    : none;
	font-family   : inherit;
	font-size     : 12px;
	line-height   : 17px;
	text-align    : left;
	color         : var(--ac-header-dark);
}

.ac-site-header-search-input::placeholder { color : var(--ac-header-dark); opacity : 1; }
.ac-site-header-search-input:focus { outline : none; }

.ac-site-header-search-submit,
.ac-site-header-search-close {
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-shrink     : 0;
	padding         : 0;
	background      : none;
	border          : none;
	cursor          : pointer;
	color           : var(--ac-header-dark);
	line-height     : 0;
}

/* Astra paints its accent blue onto button:hover/:focus — that pseudo-class
   rule out-ranks the base class rules above during hover, so every icon
   button in the header needs its own explicit hover/focus reset. */
.ac-site-header .ac-site-header-search-submit:hover,
.ac-site-header .ac-site-header-search-submit:focus,
.ac-site-header .ac-site-header-search-close:hover,
.ac-site-header .ac-site-header-search-close:focus,
.ac-site-header .ac-site-header-icon-btn:hover,
.ac-site-header .ac-site-header-icon-btn:focus,
.ac-site-header .ac-site-header-hamburger:hover,
.ac-site-header .ac-site-header-hamburger:focus {
	background : transparent !important;
	color      : var(--ac-header-dark) !important;
	border     : none !important;
	box-shadow : none !important;
	outline    : none;
}

/* ── Overlay (mega-menu) panels ──────────────────────────────── */
/* Rendered as siblings inside .ac-site-header-nav (which is the
   position:sticky, position:relative anchor) rather than nested inside
   each <li> — that way the panel can span the full nav width regardless
   of where its trigger item sits in the row. JS toggles .is-open. */
.ac-nav-overlay {
	display    : none;
	position   : absolute;
	top        : 100%;
	left       : 0;
	width      : 100%;
	background : var(--ac-header-cream);
	max-height : calc(100vh - 120px);
	overflow-y : auto;
}

/* While a mega-menu is open the panel merges seamlessly with the nav bar —
   no dividing line between them (JS toggles .has-open-overlay). transparent,
   not none, so the bar doesn't jump 1px. Desktop only: the mobile accordion
   keeps the bar's border above the dropdown. */
@media (min-width: 1101px) {
	.ac-site-header-nav.has-open-overlay { border-bottom-color : transparent; }
}

.ac-nav-overlay.is-open { display : block; }

.ac-nav-overlay-inner {
	display         : flex;
	flex-wrap       : wrap;
	align-items     : stretch;
	gap             : 24px;
	max-width       : 1400px;
	margin          : 0 auto;
	padding         : 32px 20px;
}

/* ── Links column ────────────────────────────────────────────── */
.ac-nav-col {
	display        : flex;
	flex-direction : column;
	gap            : 24px;
	flex           : 0 1 225px;
	min-width      : 160px;
}

.ac-nav-group {
	display        : flex;
	flex-direction : column;
	gap            : 24px;
}

.ac-nav-group-heading {
	margin      : 0;
	font-size   : 16px;
	font-weight : 700;
	line-height : 26px;
	color       : var(--ac-header-dark);
}

.ac-nav-group-links {
	display        : flex;
	flex-direction : column;
	gap            : 12px;
	list-style     : none;
	margin         : 0;
	padding        : 0;
}

.ac-nav-group-links a {
	font-size       : 16px;
	font-weight     : 400;
	line-height     : 26px;
	color           : var(--ac-header-dark);
	text-decoration : none;
}

.ac-nav-group-links a:hover { text-decoration : underline; }

/* ── Image cards ─────────────────────────────────────────────── */
/* Grouped by ac_header_overlay_content() into one .ac-nav-cards row (like
   Figma's category-heros-container) so they wrap as a unit below the link
   columns instead of each card wrapping independently. */
.ac-nav-cards {
	display   : flex;
	flex-wrap : nowrap; /* stay on one row, shrinking the cards, rather than wrapping (re-enabled on mobile below) */
	gap       : 24px;
	flex      : 999 1 550px; /* claims the row's remaining space ahead of the fixed-ish link columns */
	min-width : 0;
}

.ac-nav-card {
	display        : flex;
	flex-direction : column;
	flex           : 1 1 275px;
	min-width      : 0;
	max-width      : 350px;
	text-decoration: none;
	background     : var(--ac-header-cream);
}

.ac-nav-card-img {
	width      : 100%;
	flex       : 1 1 290px; /* grow to fill the card's full height (stretched to match the tallest link column) instead of leaving empty space below the title */
	min-height : 290px;
	background-size     : cover;
	background-position : center;
	background-color    : #C4C4C4;
}

.ac-nav-card-title {
	margin      : 0;
	padding     : 20px 10px;
	font-size   : 16px;
	font-weight : 700;
	line-height : 26px;
	color       : var(--ac-header-dark);
	white-space : nowrap;
	overflow    : hidden;
	text-overflow : ellipsis;
}

/* ── Mobile nav ──────────────────────────────────────────────────────
   Below 1100px the horizontal menu collapses into a full-width accordion
   that drops out of the hamburger, matching the mobile Figma. */
.ac-site-header-hamburger { display : none; }
.ac-site-header-hamburger-icon { display : block; }
.ac-site-header-menu-wrap { display : contents; } /* no box on desktop; the <ul> flexes as a direct child of .ac-site-header-left */
.ac-site-header-menu-ctas { display : none; }     /* the two CTAs only appear inside the open mobile menu */

@media (max-width: 1100px) {
	/* Header bar: logo on the left; hamburger + search + basket grouped
	   together on the right. */
	.ac-site-header-nav-inner { gap : 8px; }
	.ac-site-header-left { margin-right : auto; }
	.ac-site-header-menu-wrap,       /* collapsed by default */
	.ac-site-header-right .ac-btn {  /* the two top-bar buttons move into the menu */
		display : none;
	}

	.ac-site-header-hamburger {
		display         : flex;
		align-items     : center;
		justify-content : center;
		width           : 36px;
		height          : 36px;
		padding         : 0; /* Astra gives every <button> 14px 28px on mobile; with border-box that leaves a 0px content area, collapsing the img (max-width:100%) to 0×0 */
		background      : none;
		border          : none;
		cursor          : pointer;
		color           : var(--ac-header-dark);
	}

	/* Open state: the whole menu drops as a full-width panel below the bar
	   (absolute, anchored to the sticky nav like the desktop mega-menu). */
	.ac-site-header-menu-wrap.is-mobile-open {
		display        : flex;
		flex-direction : column;
		gap            : 24px;
		position       : absolute;
		top            : 100%;
		left           : 0;                     /* anchored to the nav's padding box = full nav width */
		width          : 100%;
		padding        : 20px;                  /* real left/right (and top/bottom) breathing room */
		background     : var(--ac-header-cream);
		border-top     : 1px solid var(--ac-header-dark);
		box-shadow     : 0 12px 24px rgba(0, 0, 0, 0.08);
		max-height     : calc(100vh - 120px);
		overflow-y     : auto;
		z-index        : 90;
	}

	.ac-site-header-menu {
		flex-direction : column;
		width          : 100%;
		gap            : 0;
	}

	.ac-site-header-menu-item {
		width         : 100%;
		border-bottom : 1px solid var(--ac-header-dark);
	}

	.ac-site-header-menu-item > a {
		justify-content : space-between;
		width           : 100%;
		padding         : 12px 0;
		font-size       : 16px;
		line-height     : 21px;
		border-radius   : 0;
	}
	.ac-site-header-menu-item > a:hover,
	.ac-site-header-menu-item.is-open > a { text-decoration : none; }

	/* Chevron SVG → a drawn +/- toggle (plus when collapsed, minus open). */
	.ac-site-header-menu-chevron {
		position   : relative;
		width      : 16px;
		height     : 16px;
		flex-shrink: 0;
		transform  : none;
		transition : none;
	}
	.ac-site-header-menu-chevron svg { display : none; }
	.ac-site-header-menu-chevron::before,
	.ac-site-header-menu-chevron::after {
		content    : "";
		position   : absolute;
		top        : 50%;
		left       : 50%;
		width      : 16px;
		height     : 2px;
		background : var(--ac-header-dark);
		transform  : translate(-50%, -50%);
	}
	.ac-site-header-menu-chevron::after { transform : translate(-50%, -50%) rotate(90deg); }
	.ac-site-header-menu-item.is-open .ac-site-header-menu-chevron { transform : none; }
	.ac-site-header-menu-item.is-open .ac-site-header-menu-chevron::after { display : none; }

	/* Accordion panels flow inline under their row instead of floating. */
	.ac-nav-overlay {
		position   : static;
		box-shadow : none;
		border-top : none;
		width      : 100%;
		max-height : none;
	}
	.ac-nav-overlay-inner { padding : 20px 0; gap : 24px; max-width : none; }

	/* Each link group is its own .ac-nav-col — sit them two per row (instead
	   of full-width stacking), with tighter link spacing and a separator rule
	   under each heading (per the mobile Figma). */
	.ac-nav-col {
		flex      : 1 1 calc(50% - 12px); /* two columns per row within the 24px inner gap */
		min-width : 0;
	}
	.ac-nav-group { gap : 12px; }
	.ac-nav-group-heading {
		padding-bottom : 10px;
		border-bottom  : 1px solid rgba(43, 42, 41, 0.68);
		font-size      : 14px;
		line-height    : 19px;
	}
	.ac-nav-group-links { gap : 10px; }
	.ac-nav-group-links a { font-size : 14px; line-height : 19px; }

	/* CTAs at the foot of the open menu. */
	.ac-site-header-menu-ctas {
		display        : flex;
		flex-direction : column;
		gap            : 16px;
		width          : 100%;
	}
	.ac-site-header-menu-ctas .ac-btn { width : 100%; }
}

@media (max-width: 600px) {
	.ac-site-header-usp { padding : 8px 20px; }
	.ac-nav-cards { flex-wrap : wrap; }
	.ac-nav-card { flex : 0 1 calc(50% - 12px); max-width : none; min-width : 0; } /* two image cards per row, per the Figma */
	.ac-nav-card-img { min-height : 200px; flex-basis : 200px; }
}

/* ── Mini-cart drawer ─────────────────────────────────────────
   Slides in from the right when the basket icon is clicked. 320px panel
   per the Figma export, capped to the viewport on small screens.
   Rendered as a sibling of .ac-site-header, so it declares its own colour
   vars rather than inheriting the header's. */
.ac-mini-cart-overlay {
	position   : fixed;
	inset      : 0;
	z-index    : 200;
	background : rgba(43, 42, 41, 0.4);
	opacity    : 0;
	transition : opacity 0.25s ease;
}

.ac-mini-cart-overlay.is-open { opacity : 1; }

.ac-mini-cart {
	--ac-header-cream : #F7F3EE;
	--ac-header-dark  : #2B2A29;
	--ac-header-sand  : #EDE3D7;
	--ac-header-green : #E3E8D6;

	position       : fixed;
	top            : 0;
	right          : 0;
	z-index        : 201;
	display        : flex;
	flex-direction : column;
	width          : min(320px, 100vw);
	height         : 100%;
	background     : var(--ac-header-cream);
	box-shadow     : -8px 0 24px rgba(0, 0, 0, 0.12);
	transform      : translateX(100%);
	transition     : transform 0.25s ease;
	font-family    : 'Satoshi Variable', system-ui, sans-serif;
}

.ac-mini-cart.is-open { transform : translateX(0); }

/* ── Head (title + close) ─────────────────────────────────────── */
.ac-mini-cart-head {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	flex-shrink     : 0;
	padding         : 16px 20px;
}

.ac-mini-cart-title {
	margin      : 0;
	font-family : 'Cormorant Garamond', Georgia, serif;
	font-size   : 24px;
	font-weight : 700;
	line-height : 26px;
	color       : var(--ac-header-dark);
}

.ac-mini-cart-close {
	display     : flex;
	flex-shrink : 0;
	padding     : 3px;
	background  : none;
	border      : none;
	cursor      : pointer;
	line-height : 0;
}

/* The drawer is outside .ac-site-header, so the header's hover reset doesn't
   reach it — kill Astra's accent-blue button:hover/:focus here too. */
.ac-mini-cart-close:hover,
.ac-mini-cart-close:focus {
	background : transparent !important;
	border     : none !important;
	box-shadow : none !important;
	outline    : none;
}

/* ── Body: items scroll, summary pinned at the bottom ─────────── */
.ac-mini-cart-body {
	display        : flex;
	flex-direction : column;
	flex           : 1 1 auto;
	min-height     : 0;
}

.ac-mini-cart-items {
	flex           : 1 1 auto;
	overflow-y     : auto;
	display        : flex;
	flex-direction : column;
	gap            : 24px;
	padding        : 0 16px 24px 20px;
}

.ac-mini-cart-divider {
	flex-shrink : 0;
	height      : 1px;
	background  : rgba(43, 42, 41, 0.68);
}

.ac-mini-cart-item {
	display        : flex;
	flex-direction : column;
	gap            : 24px;
}

.ac-mini-cart-item-top {
	display     : flex;
	align-items : center;
}

.ac-mini-cart-item-img {
	flex-shrink : 0;
	width       : 100px;
	height      : 100px;
	overflow    : hidden;
	line-height : 0;
}

.ac-mini-cart-item-img img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
}

.ac-mini-cart-item-name {
	flex        : 1;
	min-width   : 0;
	margin      : 0;
	padding     : 0 16px;
	font-size   : 12px;
	font-weight : 400;
	line-height : 17px;
	color       : var(--ac-header-dark);
}

.ac-mini-cart-item-name a { color : inherit; text-decoration : none; }
.ac-mini-cart-item-name a:hover { text-decoration : underline; }

/* Remove (trash) button — mirrors the cart page's .ac-remove-btn (muted, darkens on hover). */
.ac-mini-cart-item-remove {
	flex-shrink     : 0;
	display         : flex;
	align-items     : center;
	justify-content : center;
	padding         : 4px;
	background      : none;
	border          : none;
	cursor          : pointer;
	color           : var(--ac-header-dark);
	opacity         : 0.5;
	line-height     : 0;
	transition      : opacity 0.2s ease;
}
.ac-mini-cart-item-remove:hover { opacity : 1; }

.ac-mini-cart-item-meta {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 20px;
}

/* Quantity — same bordered number box as the cart page (.ac-cart-qty .quantity). */
.ac-mini-cart-qty {
	display     : flex;
	align-items : center;
	gap         : 4px;
	height      : 38px;
	padding     : 0 10px;
	background  : var(--ac-header-cream);
	border      : 1px solid var(--ac-header-dark);
}

.ac-mini-cart-qty-label {
	font-size   : 14px;
	line-height : 17px;
	color       : var(--ac-header-dark);
	white-space : nowrap;
}

/* A plain typeable value (text input, no spinner arrows). element+attribute+
   class so it out-ranks Astra's global input[type=text] styling (border,
   background, height, box-shadow all leak otherwise). */
input[type="text"].ac-mini-cart-qty-input {
	width         : 52px;
	height        : auto;
	padding       : 0;
	border        : none;
	border-radius : 0;
	background    : transparent;
	box-shadow    : none;
	text-align    : center;
	font-family   : inherit;
	font-size     : 14px;
	line-height   : 17px;
	color         : var(--ac-header-dark);
}
.ac-mini-cart-qty-input:focus { outline : none; }

/* Kill Astra's accent-blue button hover on the trash button (the drawer is
   outside .ac-site-header, so the header's reset doesn't reach it). */
.ac-mini-cart-item-remove:hover,
.ac-mini-cart-item-remove:focus {
	color      : var(--ac-header-dark) !important;
	background : transparent !important;
	border     : none !important;
	box-shadow : none !important;
	outline    : none;
}

/* Dim + lock the drawer while a cart update is in flight. */
.ac-mini-cart.is-loading { opacity : 0.6; pointer-events : none; }

.ac-mini-cart-item-price {
	font-size   : 12px;
	line-height : 17px;
	text-align  : right;
	color       : var(--ac-header-dark);
	white-space : nowrap;
}

/* ── Summary ──────────────────────────────────────────────────── */
.ac-mini-cart-summary {
	flex-shrink    : 0;
	display        : flex;
	flex-direction : column;
	gap            : 24px;
	padding        : 20px;
	background     : var(--ac-header-sand);
}

.ac-mini-cart-summary-title {
	margin      : 0;
	font-family : 'Cormorant Garamond', Georgia, serif;
	font-size   : 18px;
	font-weight : 700;
	line-height : 23px;
	color       : var(--ac-header-dark);
}

.ac-mini-cart-summary-row {
	display         : flex;
	align-items     : flex-start;
	justify-content : space-between;
	gap             : 24px;
}

.ac-mini-cart-summary-left {
	display        : flex;
	flex-direction : column;
	gap            : 4px;
}

.ac-mini-cart-summary-label {
	margin      : 0;
	font-size   : 16px;
	font-weight : 700;
	line-height : 26px;
	color       : var(--ac-header-dark);
}

.ac-mini-cart-summary-note {
	margin      : 0;
	font-size   : 14px;
	font-weight : 400;
	line-height : 17px;
	color       : var(--ac-header-dark);
}

.ac-mini-cart-summary-total {
	margin      : 0;
	font-size   : 16px;
	font-weight : 700;
	line-height : 26px;
	color       : var(--ac-header-dark);
	white-space : nowrap;
}

.ac-mini-cart-summary .ac-btn {
	align-self       : flex-start;
	display          : inline-flex;
	align-items      : center;
	justify-content  : center;
	padding          : 11px 16px;
	background       : var(--ac-header-dark);
	color            : var(--ac-header-cream);
	border           : 1px solid var(--ac-header-cream);
	font-size        : 12px;
	font-weight      : 700;
	line-height      : 14px;
	text-transform   : uppercase;
	text-decoration  : none;
	letter-spacing   : .5px;
	transition       : background 0.2s ease, color 0.2s ease;
}

.ac-mini-cart-summary .ac-btn:hover {
	background   : var(--ac-header-green) !important;
	color        : var(--ac-header-dark) !important;
	border-color : var(--ac-header-dark) !important;
}

/* ── Empty state ──────────────────────────────────────────────── */
.ac-mini-cart-empty {
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	gap            : 20px;
	padding        : 24px 20px;
}

.ac-mini-cart-empty p {
	margin    : 0;
	font-size : 14px;
	color     : var(--ac-header-dark);
}

.ac-mini-cart-empty .ac-btn {
	display         : inline-flex;
	padding         : 11px 16px;
	background      : var(--ac-header-dark);
	color           : var(--ac-header-cream);
	border          : 1px solid var(--ac-header-cream);
	font-size       : 12px;
	font-weight     : 700;
	text-transform  : uppercase;
	text-decoration : none;
	letter-spacing  : .5px;
}

.ac-mini-cart-empty .ac-btn:hover {
	background   : var(--ac-header-green) !important;
	color        : var(--ac-header-dark) !important;
	border-color : var(--ac-header-dark) !important;
}