/*
Theme Name: Kadence Child
Theme URI: https://ayurvedaholic.com/
Description: Child theme for the Ayurveda Holic Kadence rebuild.
Author: Ayurveda Holic
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* Brand palette, read off design-reference/Homepage v2 (preview).html:
   #2E7D32 is the dominant green, #4CAF50 the accent/hover, #1D5620 the
   dark card green. */
:root {
	--ahnl-green: #2e7d32;
	--ahnl-green-accent: #4caf50;
	--ahnl-green-dark: #1d5620;
	--ahnl-gold: #c89b3c;
	--ahnl-page: #fafaf5;
	--ahnl-line: #ecebe1;
	--ahnl-ink: #333333;
	--ahnl-muted: #5c6157;
	/* Every section's content is centred in this width; the background
	   still runs full-bleed. */
	--ahnl-container: 1320px;

	/* Footer is its own dark scale, read off the design's <footer>. */
	--ahnl-footer-bg: #1f2b1e;
	--ahnl-footer-text: #d8ded4;
	--ahnl-footer-line: #32402f;
	--ahnl-footer-muted: #a7afa1;
	--ahnl-footer-chip: #c3cbbd;
	--ahnl-footer-gold: #e9c97c;
	--ahnl-footer-dim: #8e9789;
}

/* Kadence prints its own :root font variables inline, AFTER this file, and
   its body / heading rules read them. So the plain `body { font-family }`
   below lost everywhere except elements styled directly: header, nav, footer
   and every non-homepage page were rendering in the system font. Overriding
   the variables with a more specific selector (html:root beats :root) hands
   the self-hosted fonts to everything Kadence renders. Free Kadence has no
   Customizer option for a custom font family, so this has to be CSS. */
html:root {
	--global-body-font-family: "AH Inter", sans-serif;
	--global-heading-font-family: "AH Poppins", sans-serif;
}

/* My Account (login/register/lost-password/orders — WooCommerce's own classic
   templates, not yet rebuilt, see CLAUDE.md STATUS) and the default blog
   search results (inc/search.php is a different thing: the header's live
   suggest dropdown) both render through Kadence's generic page/entry-header
   flow, so they never pick up our component CSS and were left on Kadence's
   default blue (--global-palette-btn-bg etc: Customizer "Global Palette",
   #2B6CB0). Overriding those variables, scoped to just these two page types
   via their own body classes, retints every default-styled button/link/title
   -bar there to the brand palette without touching any other page — the same
   technique as the font override above, just scoped instead of site-wide. */
body.woocommerce-account,
body.search {
	--global-palette-btn-bg: var( --ahnl-green );
	--global-palette-btn-bg-hover: var( --ahnl-green-accent );
	--global-palette-btn: #fff;
	--global-palette1: var( --ahnl-green );
	--global-palette-highlight: var( --ahnl-green );
	--global-palette7: var( --ahnl-page );
}

/* Typography — Poppins for headings, Inter for everything else, matching
   the design. Both are self-hosted (see fonts.css). */
body,
.ahnl-sec,
#ahnl-homepage {
	font-family: "AH Inter", sans-serif;
	background: var( --ahnl-page );
	color: var( --ahnl-ink );
}

#ahnl-homepage h1,
#ahnl-homepage h2,
#ahnl-homepage h3,
.ahnl-hero__headline,
.ahnl-sec__title,
.ahnl-banner__title,
.ahnl-newsletter__title {
	font-family: "AH Poppins", sans-serif;
}

/* Section 1 — shipping marquee ticker (functions.php: ahnl_shipping_marquee) */

.ahnl-marquee {
	background: var( --ahnl-green );
	overflow: hidden;
	white-space: nowrap;
}

.ahnl-marquee__track {
	display: inline-flex;
	width: max-content;
	animation: ahnl-marquee-scroll 28s linear infinite;
}

.ahnl-marquee__item {
	display: inline-block;
	padding: 10px 40px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
}

@keyframes ahnl-marquee-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

.ahnl-marquee:hover .ahnl-marquee__track,
.ahnl-marquee:focus-within .ahnl-marquee__track {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.ahnl-marquee__track {
		animation: none;
	}

	.ahnl-marquee {
		overflow-x: auto;
	}
}

/* Section 2 — header (inc/header.php, parts/header.php, js/header.js)
 *
 * The header is built in code, not from Kadence's Customizer, so everything
 * here styles our own markup and class names; nothing targets Kadence's.
 * Values are read off design-reference Shop.dc.html. Most rules are written as
 * `.ahnl-header .x` (two classes) on purpose: WooCommerce prints rules such as
 * `.woocommerce-page img { height: auto }` on cart, checkout and shop pages,
 * and a single class loses to them there (this is what blew up the footer
 * logo on those pages). */

.ahnl-header,
.ahnl-header *,
.ahnl-header *::before,
.ahnl-header *::after {
	box-sizing: border-box;
}

/* Author `display` rules beat the UA's [hidden], so restate it. */
.ahnl-header [hidden] {
	display: none !important;
}

.ahnl-header {
	position: relative;
	z-index: 60;
	background: #ffffff;
	border-bottom: 1px solid var( --ahnl-line );
	font-family: "AH Inter", sans-serif;
}

.ahnl-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ahnl-header a {
	text-decoration: none;
}

/* Kadence hides focus rings for mouse users with a body class; keyboard users
   still need them everywhere in the header. */
.ahnl-header :focus-visible {
	outline: 2px solid var( --ahnl-green ) !important;
	outline-offset: 2px;
}

/* Row 1 — logo, search, account, cart */

.ahnl-header__top {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: 14px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.ahnl-header .ahnl-header__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.ahnl-header .ahnl-header__logo-img {
	display: block;
	height: 50px;
	width: auto;
	max-width: none;
}

.ahnl-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ahnl-header .ahnl-header__account {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var( --ahnl-ink );
}

.ahnl-header .ahnl-header__account:hover,
.ahnl-header .ahnl-header__account:focus-visible {
	color: var( --ahnl-green );
}

.ahnl-header__account-icon {
	display: none;
}

/* Cart pill: "Cart · ₹1,330" and a small translucent count, no icon. */
.ahnl-header .ahnl-cartpill {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	border-radius: 99px;
	background: var( --ahnl-gold );
	/* a11y: the design's white on #C89B3C is 2.6:1; dark ink on the same gold is ~6:1. */
	color: #1f2b1e;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.ahnl-header .ahnl-cartpill:hover,
.ahnl-header .ahnl-cartpill:focus-visible {
	background: #b8892f;
	color: #1f2b1e;
}

.ahnl-cartpill__count {
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	background: rgba( 31, 43, 30, 0.14 );
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.ahnl-header .ahnl-header__burger {
	display: none;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --ahnl-line );
	border-radius: 14px;
	background: #ffffff;
	box-shadow: none;
	color: var( --ahnl-green );
	cursor: pointer;
}

.ahnl-header .ahnl-header__burger:hover,
.ahnl-header .ahnl-header__burger[aria-expanded="true"] {
	background: #f1f5ef;
	color: var( --ahnl-green );
}

/* Inline search (inc/header.php: ahnl_inline_search) */

.ahnl-header .ahnl-search {
	flex: 1 1 300px;
	min-width: 180px;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 6px 0 18px;
	background: var( --ahnl-page );
	border: 1px solid var( --ahnl-line );
	border-radius: 99px;
}

/* Kadence styles search inputs with their own border, background, padding and
   focus shadow, which showed as a box inside the pill — reset all of it. */
.ahnl-header .ahnl-search input[type="search"].ahnl-search__input,
.ahnl-header .ahnl-search input[type="search"].ahnl-search__input:focus,
.ahnl-header .ahnl-search input[type="search"].ahnl-search__input:hover {
	flex: 1;
	align-self: stretch; /* the whole 50px pill height is tappable, not a 20px strip */
	min-width: 0;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var( --ahnl-ink );
}

.ahnl-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Keyboard focus lives on the pill, not on a box inside it. The header-wide
   `:focus-visible { outline … !important }` rule above also matched the text
   field the moment anyone typed, drawing a second rectangle inside the pill. */
.ahnl-header .ahnl-search .ahnl-search__input:focus-visible {
	outline: none !important;
}

.ahnl-header .ahnl-search:focus-within {
	border-color: var( --ahnl-green );
	box-shadow: 0 0 0 3px rgba( 46, 125, 50, 0.18 );
}

.ahnl-header .ahnl-search__submit {
	flex: 0 0 auto;
	min-height: 38px;
	margin: 0;
	padding: 0 20px;
	border: none;
	border-radius: 99px;
	background: var( --ahnl-green );
	box-shadow: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.ahnl-header .ahnl-search__submit:hover,
.ahnl-header .ahnl-search__submit:focus-visible {
	background: var( --ahnl-green-accent );
	color: #ffffff;
}

/* Row 2 — nav pills (desktop) */

.ahnl-nav {
	position: relative;
	border-top: 1px solid var( --ahnl-line );
}

.ahnl-nav__inner {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: 0 22px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.ahnl-header .ahnl-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 7px 0;
}

.ahnl-nav__item {
	margin: 0;
}

/* A plain dropdown hangs under its own pill; the mega panels span the row. */
.ahnl-nav__item--dropdown {
	position: relative;
}

.ahnl-header .ahnl-nav__link {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	margin: 0;
	padding: 0 15px;
	border: 0;
	border-radius: 99px;
	background: transparent;
	box-shadow: none;
	color: var( --ahnl-ink );
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.ahnl-header .ahnl-nav__link:hover,
.ahnl-header .ahnl-nav__link:focus-visible,
.ahnl-header .ahnl-nav__link[aria-expanded="true"] {
	background: #f1f5ef;
	color: var( --ahnl-green );
}

.ahnl-nav__caret {
	font-size: 8px;
	opacity: 0.55;
}

/* Panels */

@keyframes ahnl-header-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.ahnl-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 0 22px 22px;
}

.ahnl-header .ahnl-panel--menu {
	right: auto;
	top: calc( 100% + 7px );
	min-width: 290px;
	padding: 0 0 22px;
}

.ahnl-panel__inner {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid var( --ahnl-line );
	border-radius: 22px;
	box-shadow: 0 26px 60px rgba( 31, 43, 30, 0.18 );
	overflow: hidden;
	animation: ahnl-header-in 0.16s ease-out;
}

.ahnl-panel__bar {
	height: 3px;
	background: linear-gradient( 90deg, var( --ahnl-green ), var( --ahnl-green-accent ) 45%, var( --ahnl-gold ) );
}

.ahnl-panel__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
}

.ahnl-panel__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 22px;
	border-right: 1px solid #f2f1e8;
}

.ahnl-panel__colhead {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px 10px;
}

.ahnl-panel__title {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ahnl-green );
}

.ahnl-panel__count {
	padding: 4px 7px;
	border-radius: 99px;
	background: #faf6ec;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	color: var( --ahnl-gold );
}

.ahnl-header .ahnl-panel__links,
.ahnl-header .ahnl-panel__menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ahnl-header .ahnl-panel__menu {
	gap: 2px;
	padding: 10px;
}

.ahnl-header .ahnl-panel__link {
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var( --ahnl-ink );
}

.ahnl-header .ahnl-panel__link:hover,
.ahnl-header .ahnl-panel__link:focus-visible {
	background: #f1f5ef;
	color: var( --ahnl-green );
}

.ahnl-header .ahnl-panel__all {
	margin-top: 6px;
	padding: 8px 10px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --ahnl-green );
}

.ahnl-header .ahnl-panel__all:hover {
	color: var( --ahnl-green-dark );
}

/* Brand chips */

.ahnl-panel__brands {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}

.ahnl-panel__brandhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.ahnl-panel__sub {
	font-size: 12.5px;
	line-height: 1;
	color: #6b7265;
}

.ahnl-panel__chips {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 12px;
}

.ahnl-header .ahnl-panel__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	padding: 12px;
	border: 1px solid var( --ahnl-line );
	border-radius: 14px;
	background: #ffffff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	color: var( --ahnl-ink );
}

.ahnl-header .ahnl-panel__chip:hover,
.ahnl-header .ahnl-panel__chip:focus-visible {
	border-color: var( --ahnl-green-accent );
	background: #f8fbf7;
	color: var( --ahnl-green );
}

.ahnl-header .ahnl-panel__pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 20px;
	border: 1.5px solid var( --ahnl-green );
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var( --ahnl-green );
}

.ahnl-header .ahnl-panel__pill:hover,
.ahnl-header .ahnl-panel__pill:focus-visible {
	background: var( --ahnl-green );
	color: #ffffff;
}

/* Reassurance strip along the bottom of every mega panel */

.ahnl-panel__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	padding: 14px 24px;
	background: var( --ahnl-page );
	border-top: 1px solid #f2f1e8;
}

.ahnl-panel__strip span {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var( --ahnl-muted );
}

/* Fourth column of the Shop by Category panel — Product of the Week */

.ahnl-header .ahnl-potw {
	gap: 12px;
	padding: 22px;
	border-right: 0;
	background: #fafaf5;
}

.ahnl-potw__kicker {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ahnl-gold );
}

.ahnl-header .ahnl-potw__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: #efeee6;
}

.ahnl-header .ahnl-potw__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ahnl-header .ahnl-potw__name {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var( --ahnl-ink );
}

.ahnl-header .ahnl-potw__name:hover {
	color: var( --ahnl-green );
}

.ahnl-potw__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 6px;
	font-family: "AH Poppins", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var( --ahnl-green );
}

.ahnl-potw__price ins {
	background: none;
	text-decoration: none;
}

.ahnl-potw__price del {
	order: 2;
	font-family: "AH Inter", sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #6b7265;
	opacity: 1;
}

.ahnl-header .ahnl-potw__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 99px;
	background: var( --ahnl-green );
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
}

.ahnl-header .ahnl-potw__cta:hover,
.ahnl-header .ahnl-potw__cta:focus-visible {
	background: var( --ahnl-green-dark );
	color: #ffffff;
}

/* Mobile drawer */

.ahnl-drawer {
	max-height: 70vh;
	overflow-y: auto;
	border-top: 1px solid var( --ahnl-line );
	background: #ffffff;
	animation: ahnl-header-in 0.18s ease-out;
}

.ahnl-drawer__item {
	margin: 0;
	border-bottom: 1px solid #f2f1e8;
}

.ahnl-header .ahnl-drawer__toggle,
.ahnl-header .ahnl-drawer__link {
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var( --ahnl-ink );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.ahnl-header .ahnl-drawer__toggle:hover,
.ahnl-header .ahnl-drawer__link:hover,
.ahnl-header .ahnl-drawer__toggle:focus-visible,
.ahnl-header .ahnl-drawer__link:focus-visible {
	background: #f8fbf7;
	color: var( --ahnl-green );
}

.ahnl-drawer__sign {
	font-size: 16px;
	color: var( --ahnl-green-accent );
}

.ahnl-header .ahnl-drawer__sub {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 22px 16px;
}

.ahnl-header .ahnl-drawer__sublink {
	min-height: 44px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #fafaf5;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --ahnl-ink );
}

.ahnl-header .ahnl-drawer__sublink:hover,
.ahnl-header .ahnl-drawer__sublink:focus-visible {
	color: var( --ahnl-green );
}

@media ( prefers-reduced-motion: reduce ) {
	.ahnl-panel__inner,
	.ahnl-drawer {
		animation: none;
	}
}

/* Below 1060px (the design's breakpoint): the nav row goes, the burger opens
   the drawer, and the search drops to its own full-width row under
   logo / Account / Cart / menu. */
@media ( min-width: 1060px ) {
	.ahnl-header .ahnl-drawer {
		display: none;
	}
}

@media ( max-width: 1059px ) {
	.ahnl-header .ahnl-nav {
		display: none;
	}

	.ahnl-header__top {
		gap: 12px 8px;
	}

	.ahnl-header .ahnl-header__logo {
		order: 1;
	}

	.ahnl-header__actions {
		order: 2;
		margin-left: auto;
	}

	.ahnl-header .ahnl-search {
		order: 3;
		flex: 1 1 100%;
		min-width: 0;
	}

	.ahnl-header .ahnl-header__burger {
		display: inline-flex;
	}
}

/* Phones. A 360px screen has 316px to share between the logo, Account, a cart
   pill that can read "Cart · ₹1,330 (3)" and the menu button, so each shrinks a
   little and Account becomes an icon (its text stays for screen readers). */
@media ( max-width: 480px ) {
	.ahnl-header__top {
		padding: 12px 22px;
		gap: 10px 6px;
	}

	.ahnl-header .ahnl-header__logo-img {
		height: 38px;
	}

	.ahnl-header__actions {
		gap: 4px;
	}

	.ahnl-header .ahnl-header__account {
		width: 40px;
		padding: 0;
	}

	.ahnl-header__account-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.ahnl-header__account-icon {
		display: block;
	}

	.ahnl-header .ahnl-cartpill {
		gap: 6px;
		padding: 0 12px;
		font-size: 12.5px;
	}

	.ahnl-header .ahnl-header__burger {
		width: 44px;
		height: 44px;
	}
}

/* 320px phones (iPhone SE 1st gen): a little more room so logo and actions
   usually stay on one row; a long cart total still wraps cleanly. */
@media ( max-width: 359px ) {
	.ahnl-header__top {
		padding: 12px 16px;
	}

	.ahnl-header .ahnl-header__logo-img {
		height: 32px;
	}

	.ahnl-header .ahnl-cartpill {
		gap: 4px;
		padding: 0 10px;
	}
}

/* Section 3 — hero banner carousel (functions.php: ahnl_hero_carousel)
   Slides are stacked and cross-fade on opacity, matching the design — not a
   sliding track. Arrows and dots sit together at bottom centre. */

.ahnl-hero {
	position: relative;
	width: 100%;
	height: clamp( 400px, 44vw, 580px );
	overflow: hidden;
	background: #0f2b12;
}

.ahnl-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 1;
	transition: opacity 0.9s ease-in-out;
	pointer-events: none;
}

.ahnl-hero__slide.is-active {
	opacity: 1;
	z-index: 2;
}

.ahnl-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Main left-to-right scrim, so the headline holds contrast over the art. */
.ahnl-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba( 15, 43, 18, 0.94 ) 0%,
		rgba( 18, 52, 22, 0.9 ) 40%,
		rgba( 23, 66, 28, 0.78 ) 62%,
		rgba( 46, 125, 50, 0.34 ) 76%,
		rgba( 76, 175, 80, 0.06 ) 88%,
		rgba( 76, 175, 80, 0 ) 96%
	);
}

/* Bottom fade, which keeps the controls legible. */
.ahnl-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	pointer-events: none;
	background: linear-gradient( to top, rgba( 15, 43, 18, 0.72 ), rgba( 15, 43, 18, 0 ) );
}

.ahnl-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.ahnl-hero__content {
	width: 100%;
	max-width: var( --ahnl-container );
	margin: 0 auto;
	padding: 0 clamp( 22px, 5vw, 60px );
	color: #ffffff;
}

.ahnl-hero__content > * {
	max-width: 560px;
}

.ahnl-hero__kicker {
	display: inline-block;
	margin-bottom: 14px;
	padding: 8px 14px;
	border-radius: 99px;
	background: var( --ahnl-gold );
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ahnl-hero__headline {
	margin: 0 0 14px;
	font-size: clamp( 28px, 4vw, 48px );
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: #ffffff;
	text-wrap: pretty;
}

.ahnl-hero__sub {
	margin: 0;
	max-width: 46ch;
	font-size: clamp( 14px, 1.3vw, 17px );
	line-height: 1.65;
	color: #edf1e9;
	text-wrap: pretty;
}

.ahnl-hero__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 20px;
	pointer-events: auto;
}

.ahnl-hero__btn {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	border-radius: 99px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ahnl-hero__btn--primary {
	padding: 0 30px;
	background: var( --ahnl-green );
	color: #ffffff;
}

.ahnl-hero__btn--primary:hover {
	background: var( --ahnl-green-dark );
	color: #ffffff;
}

.ahnl-hero__btn--secondary {
	padding: 0 28px;
	border: 1.5px solid rgba( 255, 255, 255, 0.7 );
	color: #ffffff;
}

.ahnl-hero__btn--secondary:hover {
	border-color: #ffffff;
	color: #ffffff;
}

/* Arrows and dots share one bottom-centre row. */
/* One slide left: no arrows or dots to show. */
.ahnl-hero.is-single .ahnl-hero__controls {
	display: none;
}

.ahnl-hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 6;
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.ahnl-hero__arrow {
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --ahnl-green );
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.ahnl-hero__dots {
	display: flex;
	gap: 8px;
	align-items: center;
}

.ahnl-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 99px;
	background: rgba( 255, 255, 255, 0.45 );
	cursor: pointer;
	position: relative;
}

/* An invisible 16×24 tap area around each 8px dot (no overlap with its neighbours). */
.ahnl-hero__dot::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

.ahnl-hero__dot.is-active {
	width: 30px;
	background: #ffffff;
}

/* Phones and tablets. A fixed 400–450px box cannot hold the kicker, a long
   headline and the buttons, so the content was clipped at the top and the
   controls sat on a button (phones and iPad widths alike). Here every slide
   shares one grid cell, the tallest slide sets the height (no jump between
   slides), and the content keeps clear of the controls row. */
@media ( max-width: 1059px ) {
	.ahnl-hero {
		display: grid;
		height: auto;
		min-height: clamp( 400px, 44vw, 580px );
	}

	.ahnl-hero__slide {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
	}

	.ahnl-hero__inner {
		position: relative;
		inset: auto;
		height: 100%;
		padding: 28px 0 84px;
	}

	.ahnl-hero.is-single .ahnl-hero__inner {
		padding-bottom: 28px;
	}
}

@media ( max-width: 640px ) {
	/* Slide 1's long H1 + 3-line subtext made it ~110px taller than the rest, and
	   the tallest slide sets the whole carousel's height. The subtext repeats the
	   ticker / badges, so phones drop it (user's call, 2026-09-28). */
	.ahnl-hero__slide:first-child .ahnl-hero__sub {
		display: none;
	}

	/* Both buttons on one row (fits down to 320px); wraps only if a long label
	   ever needs it. */
	.ahnl-hero__ctas {
		gap: 10px;
	}

	.ahnl-hero__btn--primary,
	.ahnl-hero__btn--secondary {
		padding: 0 20px;
	}
}

/* Section 4 — trust badges (functions.php: ahnl_trust_badges) */

.ahnl-trust {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
	padding: 40px max( 22px, calc( ( 100% - var( --ahnl-container ) ) / 2 ) ) 6px;
}

.ahnl-trust__card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #ecebe1;
	border-radius: 18px;
}

.ahnl-trust__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #f1f5ef;
	color: var( --ahnl-green );
}

.ahnl-trust__icon svg {
	width: 22px;
	height: 22px;
}

.ahnl-trust__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
}

.ahnl-trust__text strong {
	font-weight: 600;
	color: #222222;
}

.ahnl-trust__text span:last-child {
	color: #666666;
	font-size: 13px;
}

@media ( max-width: 900px ) {
	.ahnl-trust {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.ahnl-trust {
		grid-template-columns: 1fr;
	}
}

/* Phones: get the first products onto the first screen (user's call,
   2026-09-28). Only "100% genuine" + "Free delivery" badges stay, and the
   category tile grid goes — the menu drawer and the hero's "All Categories"
   button still reach every category. */
@media ( max-width: 640px ) {
	.ahnl-trust__card:nth-child( n + 3 ),
	.ahnl-sec--category {
		display: none;
	}

	.ahnl-trust {
		gap: 10px;
		padding-top: 22px;
	}
}

/* Sections 5–16 — shared section furniture */

/* Full-bleed background with the content centred at the container width.
   The gutter is done with padding rather than a max-width on each child:
   a child that carries its own max-width (the brand blurb's 72ch, say) then
   still starts at the container's left edge instead of being centred inside
   it. */
.ahnl-sec {
	padding: 52px max( 22px, calc( ( 100% - var( --ahnl-container ) ) / 2 ) );
	background: var( --ahnl-page );
}

/* Sections the design puts on white rather than the page colour. */
.ahnl-sec--white {
	background: #ffffff;
}

/* Per-section padding overrides taken from the design. */
.ahnl-sec--about {
	padding-block: 64px;
}

.ahnl-sec--faq {
	padding-block: 20px 64px;
}

.ahnl-sec--faq .ahnl-sec__title {
	margin-bottom: 26px;
}

.ahnl-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.ahnl-sec__head--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ahnl-sec__kicker {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ahnl-gold );
}

.ahnl-sec__title {
	margin: 0;
	font-size: clamp( 24px, 3vw, 34px );
	font-weight: 600;
	line-height: 1.2;
	color: #333333;
}

.ahnl-sec__sub {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #5c6157;
}

.ahnl-sec__sub--wide {
	max-width: 72ch;
	margin-bottom: 20px;
}

.ahnl-sec__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ahnl-sec__link {
	font-size: 13px;
	font-weight: 600;
	color: var( --ahnl-green );
	text-decoration: none;
	white-space: nowrap;
}

.ahnl-sec__empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed #ecebe1;
	border-radius: 16px;
	color: #5c6157;
	font-size: 14px;
}

/* Phones: tighter vertical rhythm, same for every homepage section, so the
   first products come up sooner (user's call, 2026-09-29). Must stay AFTER
   the base .ahnl-sec rules above or they win on source order. */
@media ( max-width: 640px ) {
	.ahnl-sec {
		padding-block: 34px;
	}

	.ahnl-sec--about {
		padding-block: 44px;
	}

	.ahnl-sec--faq {
		padding-block: 14px 44px;
	}

	.ahnl-sec__head {
		gap: 8px;
		margin-bottom: 16px;
	}
}

/* Horizontal scroll rails (category, bestsellers, deals, featured brand) */

.ahnl-rail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* A scrolling box clips on both axes, which would cut off the 3px hover
	   lift of .ahnl-card. The top padding gives it room; the negative margin
	   keeps the rail where it was. */
	margin-top: -4px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.ahnl-rail::-webkit-scrollbar {
	display: none;
}

.ahnl-rail > * {
	scroll-snap-align: start;
}

.ahnl-rail__item {
	flex: 0 0 220px;
}

.ahnl-rail__nav {
	display: flex;
	gap: 8px;
}

.ahnl-rail__arrow {
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ecebe1;
	border-radius: 50%;
	background: #ffffff;
	color: var( --ahnl-green );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ahnl-rail__arrow:hover {
	border-color: var( --ahnl-green-accent );
}

/* Product cards */

.ahnl-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 220px ), 1fr ) );
	gap: 16px;
}

/* Built to ProductCardV2.dc.html. Every value below is read off that
   component's markup; the out-of-stock wash comes from Shop.dc.html, which is
   the only design that draws that state. */

/* position:relative matters: WooCommerce's price and button carry absolutely
   positioned .screen-reader-text spans. Without a positioned card they escape
   the rail's overflow clipping, and the off-screen cards of a scroll rail
   widen the whole page on mobile. */
.ahnl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #ffffff;
	border: 1px solid var( --ahnl-line );
	border-radius: 18px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ahnl-card:hover {
	box-shadow: 0 14px 34px rgba( 46, 125, 50, 0.12 );
	transform: translateY( -3px );
}

@media ( prefers-reduced-motion: reduce ) {
	.ahnl-card {
		transition: none;
	}

	.ahnl-card:hover {
		transform: none;
	}
}

.ahnl-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient( 160deg, #f8f9f6, #f1f0e9 );
	overflow: hidden;
}

/* contain, not cover: product packshots must never be cropped. */
.ahnl-card__media .ahnl-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px;
	box-sizing: border-box;
	object-fit: contain;
}

.ahnl-card__noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9aa394;
}

.ahnl-card__badge,
.ahnl-card__low {
	position: absolute;
	left: 10px;
	padding: 5px 9px;
	border-radius: 99px;
	font-size: 10.5px;
	line-height: 1;
}

.ahnl-card__badge {
	top: 10px;
	background: #c0392b;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.ahnl-card__low {
	bottom: 10px;
	background: rgba( 31, 43, 30, 0.9 );
	color: #f3e7c9;
	font-weight: 600;
}

.ahnl-card__oos {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.72 );
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ahnl-muted );
}

.ahnl-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 14px 14px 16px;
	border-top: 1px solid #f2f1e8;
}

.ahnl-card__brand {
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ahnl-gold );
}

.ahnl-card__title {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var( --ahnl-ink );
	text-decoration: none;
	text-wrap: pretty;
}

.ahnl-card__title:hover {
	color: var( --ahnl-gold );
}

/* WooCommerce's price HTML: <del> (MRP) then <ins> (price) for a sale, a
   plain amount otherwise, or "₹x – ₹y" for a variable product. margin-top:auto
   pushes the price and button to the bottom so cards in a row line up. */
.ahnl-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 8px;
	margin-top: auto;
	font-family: "AH Poppins", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --ahnl-green );
}

.ahnl-card__price ins {
	background: none;
	text-decoration: none;
}

.ahnl-card__price del {
	order: 2;
	font-family: "AH Inter", sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	color: #9aa394;
	opacity: 1;
}

.ahnl-card__price--none {
	font-family: "AH Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6b7265;
}

.ahnl-card__cta {
	margin-top: 4px;
}

/* The button is WooCommerce's own loop link (.button), which Kadence styles
   globally, so these rules are scoped under .ahnl-card to win on specificity.
   Outline at rest, filled once added — as the design's add/added states. */
.ahnl-card .ahnl-card__cta .button,
.ahnl-card .ahnl-card__cta .ahnl-card__notify {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 6px 12px;
	border: 1.5px solid var( --ahnl-green );
	border-radius: 99px;
	background: #ffffff;
	box-shadow: none;
	color: var( --ahnl-green );
	font-family: "AH Inter", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}

.ahnl-card .ahnl-card__cta .button:hover,
.ahnl-card .ahnl-card__cta .button:focus-visible,
.ahnl-card .ahnl-card__cta .button.added {
	background: var( --ahnl-green );
	color: #ffffff;
}

.ahnl-card .ahnl-card__cta .button.added::after {
	content: "\00a0✓";
}

.ahnl-card .ahnl-card__cta .button.loading {
	opacity: 0.65;
	pointer-events: none;
}

/* WooCommerce appends a "View cart" link after a successful AJAX add. The
   design has none on the card; the header cart count updates instead. */
.ahnl-card .ahnl-card__cta .added_to_cart {
	display: none;
}

/* Out of stock: the Shop design's muted "Notify me" button, which here opens
   WhatsApp with the product name and link already typed in. */
.ahnl-card .ahnl-card__cta .ahnl-card__notify {
	border-color: #efeee6;
	background: #efeee6;
	color: var( --ahnl-muted );
}

.ahnl-card .ahnl-card__cta .ahnl-card__notify:hover,
.ahnl-card .ahnl-card__cta .ahnl-card__notify:focus-visible {
	border-color: var( --ahnl-green );
	background: #ffffff;
	color: var( --ahnl-green );
}

/* Two-row product grid — bestsellers, new arrivals, under ₹499.
   Always exactly two rows: the column count drops with the viewport and the
   products that no longer fit are hidden rather than wrapping into a third
   row. */

.ahnl-two-row {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 16px;
}

.ahnl-two-row > :nth-child( n + 13 ) {
	display: none;
}

@media ( max-width: 1200px ) {
	.ahnl-two-row {
		grid-template-columns: repeat( 4, 1fr );
	}

	.ahnl-two-row > :nth-child( n + 9 ) {
		display: none;
	}
}

@media ( max-width: 680px ) {
	.ahnl-two-row {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ahnl-two-row > :nth-child( n + 5 ) {
		display: none;
	}
}

/* Single-row product row (featured brand). Same column counts as the
   bestsellers grid, but one row only — anything that doesn't fit is hidden
   rather than wrapping. */

.ahnl-single-row {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 16px;
}

.ahnl-single-row > :nth-child( n + 7 ) {
	display: none;
}

@media ( max-width: 1200px ) {
	.ahnl-single-row {
		grid-template-columns: repeat( 4, 1fr );
	}

	.ahnl-single-row > :nth-child( n + 5 ) {
		display: none;
	}
}

@media ( max-width: 680px ) {
	.ahnl-single-row {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ahnl-single-row > :nth-child( n + 3 ) {
		display: none;
	}
}

/* Section 6b — promo banners */

.ahnl-banners {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 330px ), 1fr ) );
	gap: 20px;
}

.ahnl-banner {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var( --ahnl-line );
	border-radius: 24px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s;
}

.ahnl-banner:hover {
	box-shadow: 0 14px 34px rgba( 46, 125, 50, 0.13 );
}

.ahnl-banner__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	/* Shows while the image loads (and if it ever fails to). */
	background: linear-gradient( 135deg, #f1f5ef, #dfe9dd );
}

/* Two classes so a theme/WooCommerce `img { height: auto }` can't win. */
.ahnl-banner .ahnl-banner__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ahnl-banner__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: 24px;
	border-top: 1px solid var( --ahnl-line );
}

.ahnl-banner__kicker {
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ahnl-gold );
}

.ahnl-banner__title {
	font-family: "AH Poppins", sans-serif;
	font-size: clamp( 20px, 2.2vw, 26px );
	font-weight: 600;
	line-height: 1.3;
	color: var( --ahnl-ink );
	text-wrap: pretty;
}

.ahnl-banner__sub {
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --ahnl-muted );
}

.ahnl-banner__cta {
	margin-top: 8px;
	align-self: flex-start;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 22px;
	border-radius: 99px;
	background: var( --ahnl-green );
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}

.ahnl-banner:hover .ahnl-banner__cta {
	background: var( --ahnl-green-dark );
}

/* Section 5 — category tiles */

/* Six tiles across the container (5 gaps x 16px = the 80px subtracted). */
.ahnl-cat-tile {
	flex: 0 0 max( 140px, calc( ( 100% - 80px ) / 6 ) );
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
	text-decoration: none;
}

.ahnl-cat-tile__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	/* Shows while the image loads (and if it ever fails to). */
	background: linear-gradient( 135deg, #f1f5ef, #dfe9dd );
	border: 1px solid var( --ahnl-line );
}

.ahnl-cat-tile .ahnl-cat-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ahnl-cat-tile__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --ahnl-ink );
}

/* Section 7 — deals countdown chip + per-card stock bar */

.ahnl-countdown {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var( --ahnl-page );
	border: 1px solid var( --ahnl-line );
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 600;
	color: #a8631c;
}

.ahnl-rail__item--deal {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 10px;
	align-items: stretch;
}

.ahnl-deal-stock {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 4px;
}

.ahnl-deal-stock__track {
	height: 6px;
	border-radius: 99px;
	background: #efeee4;
	overflow: hidden;
}

.ahnl-deal-stock__fill {
	height: 100%;
	background: var( --ahnl-gold );
}

.ahnl-deal-stock__label {
	font-size: 11.5px;
	font-weight: 500;
	color: var( --ahnl-muted );
}

/* Section 8 — health concern grid (dark green block) */

/* Full-bleed green band, as in the design — not a rounded floating block. */
.ahnl-sec--concern {
	padding: 56px max( 22px, calc( ( 100% - var( --ahnl-container ) ) / 2 ) );
	background: var( --ahnl-green );
	color: #ffffff;
}

.ahnl-sec--concern .ahnl-sec__title {
	color: #ffffff;
}

.ahnl-sec--concern .ahnl-sec__sub {
	color: #dcebdb;
	font-size: 14.5px;
}

/* Six tiles on one line at desktop; below 900px it becomes a swipeable
   rail showing ~2.2 tiles, which keeps the long concern labels readable
   instead of squeezing three across a phone. */
.ahnl-concern-grid {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 14px;
}

.ahnl-concern-tile {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.26 );
	border-radius: 16px;
	text-decoration: none;
}

@media ( max-width: 900px ) {
	.ahnl-concern-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.ahnl-concern-grid::-webkit-scrollbar {
		display: none;
	}

	.ahnl-concern-tile {
		flex: 0 0 45%;
		scroll-snap-align: start;
	}
}

.ahnl-concern-tile:hover {
	background: rgba( 255, 255, 255, 0.12 );
}

.ahnl-concern-tile__name {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
}

.ahnl-concern-tile__sub {
	font-size: 12.5px;
	color: #eaf3e9;
}

/* Section 12 — blog teaser */

/* Scrollable single line of compact article tiles. The tile width is
   fixed, so a wider screen simply fits more of them before the rail starts
   scrolling. The image frame is 16:9 — the same as the blog index cards and
   the ratio our featured images are made in — so `cover` trims almost
   nothing. (It was 1:1, which cut the sides off every wide image.) */
.ahnl-guides {
	gap: 20px;
}

.ahnl-guide {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	background: #fafaf5;
	border: 1px solid #ecebe1;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	scroll-snap-align: start;
}

.ahnl-guide__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient( 135deg, #f1f5ef, #dfe9dd );
}

/* The image is pinned inside the frame rather than left in the flow. In the
   flow, WordPress's own width/height attributes on the <img> (300x240,
   300x300…) stretch the frame to that image's ratio, so tiles came out at
   different heights whenever an article's image wasn't 16:9. */
.ahnl-guide__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ahnl-guide__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
}

.ahnl-guide__tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ahnl-gold );
}

.ahnl-guide__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #333333;
}

.ahnl-guide__links {
	font-size: 13px;
	color: #5c6157;
}

.ahnl-guide__more {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ahnl-green );
}

/* Section 13 — about + stats. Two columns: photo with an overlapping
   "practising since" badge on the left, copy/stats/CTAs on the right. */

.ahnl-about {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 40px;
	align-items: center;
}

.ahnl-about__media {
	position: relative;
}

.ahnl-about__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	border: 1px solid #ecebe1;
}

.ahnl-about__badge {
	position: absolute;
	right: -8px;
	bottom: -18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 22px;
	border-radius: 18px;
	background: var( --ahnl-green );
	color: #ffffff;
	box-shadow: 0 14px 30px rgba( 46, 125, 50, 0.28 );
}

.ahnl-about__badge strong {
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.ahnl-about__badge span {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: #dcebdb;
}

.ahnl-about__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ahnl-about__kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ahnl-gold );
}

.ahnl-about__text {
	max-width: 72ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	color: #4a4f46;
}

.ahnl-about__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ahnl-about__btn {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	padding: 0 26px;
	border-radius: 99px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.ahnl-about__btn--primary {
	background: var( --ahnl-green );
	color: #ffffff;
}

.ahnl-about__btn--primary:hover {
	background: var( --ahnl-green-dark );
	color: #ffffff;
}

.ahnl-about__btn--secondary {
	border: 1.5px solid #dcdbd0;
	color: #333333;
}

.ahnl-about__btn--secondary:hover {
	border-color: var( --ahnl-green );
	color: #333333;
}

@media ( max-width: 900px ) {
	.ahnl-about {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

.ahnl-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 160px ), 1fr ) );
	gap: 1px;
	background: #ecebe1;
	border: 1px solid #ecebe1;
	border-radius: 16px;
	overflow: hidden;
	max-width: 640px;
}

.ahnl-stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 18px;
	background: #fafaf5;
}

.ahnl-stat__value {
	font-size: 21px;
	font-weight: 700;
	color: var( --ahnl-green );
}

.ahnl-stat__label {
	font-size: 12px;
	color: #5c6157;
}

/* Section 14 — brand wall */

.ahnl-brands {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 158px ), 1fr ) );
	gap: 14px;
}

.ahnl-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	padding: 18px;
	background: #ffffff;
	border: 1px solid #ecebe1;
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ahnl-brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ahnl-brand:hover {
	border-color: var( --ahnl-green-accent );
	box-shadow: 0 8px 20px rgba( 46, 125, 50, 0.1 );
}

/* Section 15 — newsletter */

/* Design puts this section on the page colour with the green as an inner
   block, so the padding sits on the section and the colour on the grid. */
.ahnl-newsletter {
	padding: 56px max( 22px, calc( ( 100% - var( --ahnl-container ) ) / 2 ) );
}

.ahnl-newsletter > .ahnl-newsletter__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 28px;
	align-items: center;
	padding: 40px;
	background: var( --ahnl-green );
	border-radius: 24px;
}

.ahnl-newsletter__title {
	margin: 0 0 10px;
	font-size: clamp( 23px, 2.8vw, 32px );
	font-weight: 600;
	line-height: 1.25;
	color: #ffffff;
}

.ahnl-newsletter__text {
	margin: 0;
	max-width: 58ch;
	font-size: 14px;
	line-height: 1.65;
	color: #ffffff;
}

.ahnl-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ahnl-newsletter__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ahnl-newsletter__input {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 50px;
	padding: 0 20px;
	border: none;
	border-radius: 99px;
	font-size: 14px;
}

.ahnl-newsletter__submit {
	min-height: 50px;
	padding: 0 28px;
	border: none;
	border-radius: 99px;
	background: #ffffff;
	color: var( --ahnl-green );
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ahnl-newsletter__whatsapp {
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: underline;
}

/* Section 16 — FAQ */

.ahnl-faqs {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ahnl-faq {
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #ecebe1;
	border-radius: 18px;
}

.ahnl-faq__q {
	font-size: 15px;
	font-weight: 600;
	color: #333333;
	cursor: pointer;
}

.ahnl-faq__a {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #5c6157;
}

@media ( max-width: 768px ) {
	.ahnl-newsletter {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Footer (functions.php: ahnl_footer, swapped onto Kadence's kadence_footer
 * action). Values are the design's <footer>, not eyeballed.
 * ---------------------------------------------------------------------- */

.ahnl-footer {
	background: var( --ahnl-footer-bg );
	color: var( --ahnl-footer-text );
	padding: 40px 22px 0;
}

/* Kadence has no global `a { text-decoration: none }` — it only clears the
   underline inside its own nav and widget contexts, so footer links fell back
   to the browser default. The design has no underlines anywhere here. */
.ahnl-footer a {
	text-decoration: none;
}

/* auto-fit rather than a fixed 4-up: the contact column and the three link
   columns collapse on their own as the viewport narrows, and min(100%,230px)
   stops the track overflowing on a narrow phone. */
.ahnl-footer__grid {
	max-width: var( --ahnl-container );
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 230px ), 1fr ) );
	gap: 30px;
}

.ahnl-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ahnl-footer__col--contact {
	gap: 10px;
}

/* The brand mark is dark, so the design sets it on a white rounded plate. */
.ahnl-footer__logo {
	align-self: flex-start;
	padding: 7px;
	border-radius: 12px;
	background: #ffffff;
	line-height: 0;
}

/* Scoped under .ahnl-footer on purpose: Kadence's woocommerce.min.css has
   `.woocommerce-page img { height: auto; max-width: 100% }`, which has the same
   specificity as `.ahnl-footer__logo img`, loads later, and so blew the logo
   up to ~128px on the cart and checkout pages only. */
.ahnl-footer .ahnl-footer__logo img {
	display: block;
	height: 54px;
	width: auto;
}

.ahnl-footer__blurb {
	font-size: 13.5px;
	line-height: 1.7;
	text-wrap: pretty;
}

.ahnl-footer__address {
	font-size: 13.5px;
	line-height: 1.8;
}

.ahnl-footer__contact {
	color: var( --ahnl-footer-gold );
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
}

.ahnl-footer__contact:hover,
.ahnl-footer__contact:focus {
	color: #ffffff;
}

.ahnl-footer__gstin {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var( --ahnl-footer-muted );
}

.ahnl-footer__coltitle {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff;
}

/* wp_nav_menu() output — reset the list, the columns do the spacing.
   The font has to be set HERE, not only on the <a>: each <li> otherwise
   builds its line box from the inherited body type (a ~27px strut) instead of
   the 13.5px link inside it, pushing the rows ~5px apart. */
.ahnl-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.6;
}

.ahnl-footer__links li {
	margin: 0;
}

.ahnl-footer__links a {
	color: var( --ahnl-footer-text );
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.6;
}

.ahnl-footer__links a:hover,
.ahnl-footer__links a:focus {
	color: #ffffff;
}

.ahnl-footer__bottom {
	max-width: var( --ahnl-container );
	margin: 24px auto 0;
	padding: 18px 0;
	border-top: 1px solid var( --ahnl-footer-line );
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ahnl-footer__about {
	margin: 0;
	max-width: 92ch;
	font-size: 12.5px;
	line-height: 1.7;
	color: var( --ahnl-footer-muted );
	text-wrap: pretty;
}

.ahnl-footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
}

.ahnl-footer__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

.ahnl-footer__chip {
	padding: 7px 11px;
	border: 1px solid var( --ahnl-footer-line );
	border-radius: 8px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	color: var( --ahnl-footer-chip );
}

/* Social icon row (functions.php ahnl_social_icons) — footer, shop sidebar. */
ul.ahnl-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.ahnl-social li {
	margin: 0;
}

ul.ahnl-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-decoration: none;
}

.ahnl-footer ul.ahnl-footer__social a {
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: var( --ahnl-footer-text );
}

.ahnl-footer ul.ahnl-footer__social a:hover,
.ahnl-footer ul.ahnl-footer__social a:focus-visible {
	border-color: var( --ahnl-footer-gold );
	color: var( --ahnl-footer-gold );
}

ul.ahnl-social--light a {
	background: #f1f5ef;
	color: var( --ahnl-green );
}

ul.ahnl-social--light a:hover,
ul.ahnl-social--light a:focus-visible {
	background: var( --ahnl-green );
	color: #fff;
}

.ahnl-footer__copy {
	font-size: 12.5px;
	line-height: 1;
	color: var( --ahnl-footer-dim );
}


/* Page background. Kadence prints `body { background: var(--global-palette8) }`
   (#F7FAFC) inline; the design's page colour is #FAFAF5. `html:root body`
   out-specifies it without touching the palette variable other rules use.
   (Per-template CSS lives in css/<template>.css and loads only where it is used.) */
html:root body {
	background: var( --ahnl-page );
}


/* Small pill link used for filters (archives) and category chips (product page). */
.ahnl-chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 13px;
	border: 1px solid var( --ahnl-line );
	border-radius: 99px;
	background: var( --ahnl-page );
	color: var( --ahnl-muted );
	font: 600 11.5px/1.2 "AH Inter", system-ui, sans-serif;
	white-space: nowrap;
	text-decoration: none;
}

.ahnl-chip:hover,
.ahnl-chip:focus {
	border-color: var( --ahnl-green-accent );
	color: var( --ahnl-green );
}

.ahnl-chip.is-active {
	border-color: var( --ahnl-green );
	background: #f1f5ef;
	color: var( --ahnl-green );
}


/* WooCommerce notices ("added to cart", errors, info) — wherever they are printed (the notices
   wrapper, or straight into a template like the ₹199 minimum-order error). Kadence paints them
   in its default blue with a stacked button; this makes them match the store. */
html:root .woocommerce-message,
html:root .woocommerce-info,
html:root .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 16px;
	padding: 14px 18px;
	border: 1px solid var( --ahnl-line );
	border-left: 4px solid var( --ahnl-green );
	border-radius: 14px;
	background: #f1f5ef;
	color: var( --ahnl-ink );
	font: 500 14px/1.5 "AH Inter", system-ui, sans-serif;
	list-style: none;
}

html:root .woocommerce-error {
	border-left-color: #c0392b;
	background: #fdf1ee;
}

html:root .woocommerce-error li {
	margin: 0;
}

html:root .woocommerce-message .button {
	order: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 99px;
	background: var( --ahnl-green );
	color: #fff;
	font: 600 13px/1 "AH Inter", system-ui, sans-serif;
	text-decoration: none;
}

html:root .woocommerce-message .button:hover,
html:root .woocommerce-message .button:focus-visible {
	background: #256628;
	color: #fff;
}


/* Quantity stepper — WooCommerce's number input wrapped in − / + buttons (product page + cart). */
.ahnl-pdp .quantity,
.ahnl-cart .quantity {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: #fff;
	border: 1px solid var( --ahnl-line );
	border-radius: 99px;
}

.ahnl-pdp .quantity input.qty,
.ahnl-cart .quantity input.qty {
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font: 600 15px/1 "AH Inter", system-ui, sans-serif;
	color: var( --ahnl-ink );
	-moz-appearance: textfield;
}

.ahnl-pdp .quantity input.qty,
.ahnl-cart .quantity input.qty::-webkit-outer-spin-button,
.ahnl-pdp .quantity input.qty,
.ahnl-cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ahnl-qty__btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ahnl-page );
	color: var( --ahnl-green );
	font: 400 18px/1 "AH Inter", system-ui, sans-serif;
	cursor: pointer;
}

.ahnl-qty__btn:hover,
.ahnl-qty__btn:focus-visible {
	background: #f1f5ef;
}



/* --- Free-shipping progress ------------------------------------------------------- */
.ahnl-ship {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px 14px;
	background: #f1f5ef;
	border: 1px solid #dce6d9;
	border-radius: 16px;
}

.ahnl-ship__msg {
	margin: 0;
	font: 600 13.5px/1.5 "AH Inter", system-ui, sans-serif;
	color: #2e5e2a;
}

.ahnl-ship__bar {
	position: relative;
	height: 8px;
	margin: 0 7px;
	border-radius: 99px;
	background: #dce6d9;
}

.ahnl-ship__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 99px;
	background: linear-gradient( 90deg, var( --ahnl-green ), #7cb342 );
	transition: width 0.4s ease;
}

.ahnl-ship__mark {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #c9d8c5;
}

/* One threshold: the bar is full at ₹999, so its marker and label sit at the end
   (the old ₹999/₹1999 layout put them at 50%, which read as "past ₹999"). */
.ahnl-ship__mark--1 { left: 100%; }
.ahnl-ship__mark.is-on { background: var( --ahnl-green ); }

.ahnl-ship__legend {
	font: 500 11.5px/1.4 "AH Inter", system-ui, sans-serif;
	color: #4a6a45;
	text-align: right;
}

.ahnl-ship__terms {
	margin: 6px 0 0;
	font: 500 11.5px/1.4 "AH Inter", system-ui, sans-serif;
	color: #5a6b57;
}

.ahnl-ship__terms a {
	color: inherit;
	text-decoration: underline;
}



/* Search suggestions (js/search.js, inc/search.php) ------------------------- */
.ahnl-header .ahnl-search {
	position: relative;
}

.ahnl-suggest {
	position: absolute;
	top: calc( 100% + 10px );
	left: 0;
	right: 0;
	z-index: 90;
	padding: 8px;
	background: #fff;
	border: 1px solid var( --ahnl-line );
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba( 31, 43, 30, 0.16 );
	max-height: min( 70vh, 520px );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ahnl-suggest[hidden] {
	display: none;
}

.ahnl-suggest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ahnl-suggest__opt {
	margin: 0;
	border-radius: 12px;
}

.ahnl-suggest__opt.is-active,
.ahnl-suggest__opt:hover {
	background: #f1f5ef;
}

.ahnl-header .ahnl-suggest__link {
	display: grid;
	grid-template-columns: 44px minmax( 0, 1fr ) auto;
	gap: 12px;
	align-items: center;
	min-height: 60px;
	padding: 8px 10px;
	color: var( --ahnl-ink );
	text-decoration: none;
}

.ahnl-suggest__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: linear-gradient( 160deg, #f8f9f6, #f1f0e9 );
	overflow: hidden;
}

.ahnl-suggest__thumb img {
	display: block;
	width: 44px;
	height: 44px;
	padding: 3px;
	object-fit: contain;
}

.ahnl-suggest__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* a11y: brand label in the darker gold (the light gold is 2.3:1 on white). */
.ahnl-suggest__brand {
	font: 600 10px/1 "AH Inter", system-ui, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8a5a12;
}

.ahnl-suggest__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: 500 13.5px/1.35 "AH Inter", system-ui, sans-serif;
}

.ahnl-suggest__name mark {
	background: none;
	color: var( --ahnl-green );
	font-weight: 700;
}

.ahnl-suggest__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font: 700 13.5px/1.2 "AH Poppins", sans-serif;
	color: var( --ahnl-green );
	white-space: nowrap;
}

.ahnl-suggest__was {
	font: 400 11.5px/1 "AH Inter", system-ui, sans-serif;
	color: #6b7265;
	text-decoration: line-through;
}

.ahnl-suggest__oos {
	font: 600 11px/1 "AH Inter", system-ui, sans-serif;
	color: #a8371f;
}

.ahnl-suggest__opt.is-cat .ahnl-suggest__link {
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	min-height: 48px;
}

.ahnl-suggest__catlabel {
	padding: 5px 9px;
	border-radius: 99px;
	background: #faf6ec;
	font: 600 10px/1 "AH Inter", system-ui, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8a5a12;
}

.ahnl-suggest__catname {
	font: 600 13.5px/1.3 "AH Inter", system-ui, sans-serif;
}

.ahnl-suggest__catcount {
	font: 400 12px/1 "AH Inter", system-ui, sans-serif;
	color: #6b7265;
}

.ahnl-header .ahnl-suggest__all {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin-top: 6px;
	border-top: 1px solid #f2f1e8;
	border-radius: 0 0 12px 12px;
	color: var( --ahnl-green );
	font: 600 13px/1 "AH Inter", system-ui, sans-serif;
	text-decoration: none;
}

.ahnl-header .ahnl-suggest__all:hover,
.ahnl-header .ahnl-suggest__all:focus-visible {
	background: #f1f5ef;
}

.ahnl-suggest__empty {
	margin: 0;
	padding: 18px 14px;
	font: 400 13.5px/1.6 "AH Inter", system-ui, sans-serif;
	color: var( --ahnl-muted );
}

/* --- Safe-checkout payment-icon row (ahnl_safe_checkout_badges(), functions.php) --- */
/* Live's layout: one strip image (images/payment/payment-strip.webp) in a bordered box,
   caption centred under it. `html:root` prefix so WooCommerce's `.woocommerce-page img` rule can't win. */
html:root .ahnl-safepay {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	padding: 12px 0;
}

html:root .ahnl-safepay__icons {
	display: flex;
	justify-content: center;
	padding: 14px 12px;
	border: 1px solid var( --ahnl-line );
	border-radius: 12px;
	background: #fff;
}

html:root .ahnl-safepay__icons img {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	aspect-ratio: 498 / 60;
}

html:root .ahnl-safepay__text {
	font: 500 12.5px/1.3 "AH Inter", system-ui, sans-serif;
	color: #6b7265;
	text-align: center;
}

/* Touch screens: iOS Safari zooms the page into any text field under 16px the
   moment it is focused (search, checkout, account, contact, coupon, sort). The
   per-template form styles use 12–15px shorthands, so one rule here lifts every
   field to 16px on touch devices only; desktop keeps the design's sizes. */
@media ( hover: none ) and ( pointer: coarse ) {
	html:root input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="submit"] ):not( [type="button"] ):not( [type="hidden"] ),
	html:root select,
	html:root textarea {
		font-size: 16px !important;
	}
}

/* Mini cart drawer (inc/minicart.php, js/minicart.js). Opens after an add to cart. */
.ahnl-mc {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.ahnl-mc[hidden] {
	display: none;
}

html.ahnl-mc-lock {
	overflow: hidden;
}

.ahnl-mc__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 31, 43, 30, 0.45 );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ahnl-mc__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 400px, 92vw );
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var( --ahnl-ink );
	box-shadow: -8px 0 32px rgba( 0, 0, 0, 0.18 );
	transform: translateX( 100% );
	transition: transform 0.25s ease;
	outline: none;
}

.ahnl-mc.is-open .ahnl-mc__backdrop {
	opacity: 1;
}

.ahnl-mc.is-open .ahnl-mc__panel {
	transform: none;
}

.ahnl-mc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 20px;
	border-bottom: 1px solid #e6e8df;
}

.ahnl-mc__title {
	margin: 0;
	font-family: "AH Poppins", sans-serif;
	font-size: 18px;
	font-weight: 600;
}

.ahnl-mc .ahnl-mc__close {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --ahnl-ink );
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.ahnl-mc .ahnl-mc__close:hover {
	background: #f1f3ec;
}

.ahnl-mc__body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.ahnl-mc__added {
	margin: 0;
	padding: 10px 20px;
	background: #e8f5e9;
	color: #1d5620;
	font-size: 14px;
	font-weight: 600;
}

.ahnl-mc__count {
	margin: 12px 20px 4px;
	font-size: 13px;
	color: #6b7265;
}

.ahnl-mc__empty {
	margin: 24px 20px;
}

.ahnl-mc .ahnl-mc__list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0 20px;
	list-style: none;
}

.ahnl-mc__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid #eef0e8;
}

.ahnl-mc__thumb {
	position: relative;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 8px;
	background: #f4f5ef;
}

.ahnl-mc .ahnl-mc__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ahnl-mc__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ahnl-mc .ahnl-mc__name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var( --ahnl-ink );
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ahnl-mc a.ahnl-mc__name:hover {
	color: var( --ahnl-green );
	text-decoration: underline;
}

.ahnl-mc__badge {
	align-self: flex-start;
	padding: 1px 8px;
	border-radius: 999px;
	background: #e8f5e9;
	color: #1d5620;
	font-size: 11px;
	font-weight: 600;
}

.ahnl-mc__qty {
	font-size: 13px;
	color: #6b7265;
}

.ahnl-mc__line {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.ahnl-mc__foot {
	padding: 14px 20px 18px;
	border-top: 1px solid #e6e8df;
	background: var( --ahnl-page );
}

.ahnl-mc__subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0 0 6px;
	font-size: 16px;
}

.ahnl-mc__note {
	margin: 0 0 12px;
	font-size: 13px;
	color: #1d5620;
}

.ahnl-mc__ship {
	margin: 0 0 12px;
}

.ahnl-mc__ship .ahnl-mc__note {
	margin-bottom: 6px;
}

.ahnl-mc__bar {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #e6e8df;
}

.ahnl-mc__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var( --ahnl-gold, #c89b3c );
	transition: width 0.4s ease;
}

.ahnl-mc__ship.is-done .ahnl-mc__fill {
	background: var( --ahnl-green );
}

.ahnl-mc__note.is-warn {
	color: #9a3412;
	font-weight: 600;
}

.ahnl-mc .ahnl-mc__note a {
	color: inherit;
	text-decoration: underline;
}

.ahnl-mc__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ahnl-mc__empty + .ahnl-mc__actions {
	grid-template-columns: 1fr;
	padding: 0 20px;
}

.ahnl-mc .ahnl-mc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 12px;
	border: 1.5px solid var( --ahnl-green );
	border-radius: 999px;
	background: #fff;
	color: var( --ahnl-green );
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ahnl-mc .ahnl-mc__btn--primary {
	background: var( --ahnl-green );
	color: #fff;
}

.ahnl-mc .ahnl-mc__btn:hover,
.ahnl-mc .ahnl-mc__btn:focus-visible {
	background: #1d5620;
	border-color: #1d5620;
	color: #fff;
}

.ahnl-mc .ahnl-mc__btn:disabled {
	border-color: #c9ccc2;
	background: #e6e8df;
	color: #6b7265;
	cursor: not-allowed;
}

.ahnl-mc .ahnl-mc__continue {
	display: block;
	width: 100%;
	min-height: 40px;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --ahnl-ink );
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

@media ( prefers-reduced-motion: reduce ) {
	.ahnl-mc__backdrop,
	.ahnl-mc__panel {
		transition: none;
	}
}


/* Rank Math FAQ/HowTo list spacing — moved here from Kadence's one-rule
   rankmath.min.css, which inc/performance.php no longer loads. */
.rank-math-list-item {
	margin-bottom: 2em;
}