/**
 * AestheticX — brand tokens & global styling.
 *
 * Rule: every colour comes from a CSS variable defined in :root below.
 * Do NOT hardcode hex values elsewhere in this file — add/adjust a token instead.
 * Layout is mobile-first: base rules target small screens, @media (min-width)
 * blocks progressively enhance for tablet/desktop.
 */

:root {
	/* ---- Brand colour tokens ---- */
	--ax-base: #FAF7F2;          /* page background — cream off-white */
	--ax-surface: #FFFFFF;       /* cards / panels */
	--ax-text: #1A1A1A;          /* charcoal body text */
	--ax-accent: #8B9D83;        /* muted sage */
	--ax-accent-hover: #74856C;  /* darker sage for interaction states */
	--ax-on-accent: #FFFFFF;     /* text/icons sitting on an accent fill */
	--ax-muted: #6B6B6B;         /* secondary text */
	--ax-border: #ECE7DE;        /* hairline borders on cream */
	--ax-danger: #B85C50;        /* validation / error tone */
	--ax-accent-shadow: rgba(139, 157, 131, 0.28);
	--ax-accent-shadow-hover: rgba(139, 157, 131, 0.36);

	/* ---- Gold curation tokens — GOLD PICK badges/seal/highlights ONLY.
	   Gold is the signature of the "we test, you trust" curation concept;
	   never use it for generic UI (buttons, links, borders). ---- */
	--ax-gold: #C9A24B;
	--ax-gold-deep: #A8842F;     /* darker gold for text-on-cream legibility */
	--ax-gold-soft: rgba(201, 162, 75, 0.14);
	--ax-gold-shadow: rgba(201, 162, 75, 0.30);

	/* ---- Typography tokens ---- */
	--ax-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ax-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* ---- Shape & spacing tokens ---- */
	--ax-radius: 14px;
	--ax-radius-sm: 8px;
	--ax-shadow: 0 6px 20px rgba(26, 26, 26, 0.06);
	--ax-shadow-hover: 0 10px 28px rgba(26, 26, 26, 0.10);
	--ax-space: 1.25rem;         /* base rhythm (mobile) */
	--ax-space-lg: 2rem;
	--ax-transition: 0.2s ease;

	/* ---- Shared layout / scale tokens (site-wide + homepage) ----
	   Promoted to :root (were scoped to .ax-home/.ax-footer in home.css) so the
	   global sticky nav, .ax-container and the site-wide footer resolve them on
	   every page, not just the home template. */
	--ax-maxw: 1200px;           /* content max-width for .ax-container */
	--ax-hero-h: 72px;           /* fixed-nav clearance on the home hero */
	--ax-nav-h: 66px;            /* sticky nav visual height (inner pages) */
	--ax-gap: 1.25rem;
	--ax-sage-soft: rgba(139, 157, 131, 0.14);
	--ax-sage-tint: rgba(139, 157, 131, 0.08);
	--ax-nav-bg: rgba(250, 247, 242, 0.85);   /* frosted cream for the glass nav */
}

/* =========================================================
   Base — background, text, typography (mobile-first)
   ========================================================= */
body {
	background-color: var(--ax-base);
	color: var(--ax-text);
	font-family: var(--ax-font-body);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title {
	font-family: var(--ax-font-heading);
	color: var(--ax-text);
	line-height: 1.25;
	font-weight: 600;
}

p, li, span, label, input, textarea, select, .ast-container {
	font-family: var(--ax-font-body);
}

/* Generous, breathable content rhythm */
.entry-content > * + * {
	margin-top: var(--ax-space);
}

.site-content .ast-container {
	padding-top: var(--ax-space);
	padding-bottom: var(--ax-space);
}

/* =========================================================
   Links
   ========================================================= */
a {
	color: var(--ax-accent);
	text-decoration: none;
	transition: color var(--ax-transition);
}

a:hover,
a:focus {
	color: var(--ax-accent-hover);
}

/* =========================================================
   Buttons — accent fill + hover state
   Covers WP core, Astra and WooCommerce button variants.
   ========================================================= */
button,
input[type="button"],
input[type="submit"],
.button,
.ast-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--ax-accent);
	color: var(--ax-on-accent);
	border: 1px solid var(--ax-accent);
	border-radius: var(--ax-radius-sm);
	padding: 0.7em 1.6em;
	font-family: var(--ax-font-heading);
	font-weight: 500;
	line-height: 1.4;
	transition: background-color var(--ax-transition), box-shadow var(--ax-transition), transform var(--ax-transition);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.ast-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--ax-accent-hover);
	border-color: var(--ax-accent-hover);
	color: var(--ax-on-accent);
	box-shadow: var(--ax-shadow-hover);
}

/* =========================================================
   Product cards — white surface, soft shadow, rounded
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius);
	box-shadow: var(--ax-shadow);
	padding: var(--ax-space);
	transition: box-shadow var(--ax-transition), transform var(--ax-transition);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--ax-shadow-hover);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
	border-radius: var(--ax-radius-sm);
	margin-bottom: var(--ax-space);
}

.woocommerce ul.products li.product .price {
	color: var(--ax-text);
	font-family: var(--ax-font-heading);
	font-weight: 600;
}

/* Generic content cards / widgets on cream get the surface treatment too */
.ax-card,
.wp-block-group.has-background {
	background-color: var(--ax-surface);
	border-radius: var(--ax-radius);
	box-shadow: var(--ax-shadow);
}

/* =========================================================
   Forms — inputs on surface with subtle border
   ========================================================= */
input:not([type="submit"]):not([type="button"]),
textarea,
select {
	background-color: var(--ax-surface);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-sm);
	color: var(--ax-text);
	padding: 0.6em 0.9em;
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--ax-accent);
	outline-offset: 1px;
}

/* Secondary text */
.ax-muted,
.woocommerce .woocommerce-result-count,
.entry-meta {
	color: var(--ax-muted);
}

/* =========================================================
   Tablet — min-width 768px
   ========================================================= */
@media (min-width: 768px) {
	:root {
		--ax-space: 1.75rem;
	}

	.site-content .ast-container {
		padding-top: var(--ax-space-lg);
		padding-bottom: var(--ax-space-lg);
	}

	.woocommerce ul.products li.product {
		padding: var(--ax-space-lg);
	}
}

/* =========================================================
   Brand header wordmark — "AestheticX" as a text logo
   The Brandstore demo hid the site title on small screens in
   favour of a logo image; we use a text wordmark instead, so
   keep it visible on every breakpoint and set the heading font.
   ========================================================= */
.ast-site-identity .site-title,
.ast-site-identity .site-title a {
	font-family: var(--ax-font-heading);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--ax-text);
}

.ast-site-identity .site-title a:hover,
.ast-site-identity .site-title a:focus {
	color: var(--ax-accent);
}

@media (max-width: 921px) {
	.ast-site-identity .site-title {
		display: block !important;
	}
}

/* =========================================================
   Desktop — min-width 1024px
   ========================================================= */
@media (min-width: 1024px) {
	:root {
		--ax-space: 2rem;
	}

	body {
		line-height: 1.7;
	}
}

/* =========================================================
   Page canvas — keep the cream base visible on EVERY page.
   Astra/Woo templates sometimes paint their own surface on the
   content wrappers, leaking a flat white over the brand cream.
   ========================================================= */
#page,
#content,
.site-content,
.ast-container {
	background-color: transparent;
}

/* Force the cream base on EVERY page. Astra's palette body colour IS cream, but
   the Elementor kit (.elementor-kit-1390 on <body>) and the Woo account page
   repaint body flat white with equal specificity + later load order. This is a
   brand-default leak, so override it authoritatively — this only tints the page
   canvas (section/box backgrounds are child elements and stay untouched). */
html body {
	background-color: var(--ax-base) !important;
}

/* Shared content-width helper (used by the site-wide footer + homepage
   sections). Defined globally so the footer centres on inner pages too. */
.ax-container {
	width: 100%;
	max-width: var(--ax-maxw);
	margin-inline: auto;
	padding-inline: 1.25rem;
}
@media (min-width: 768px) {
	.ax-container { padding-inline: 2rem; }
}

/* =========================================================
   Global glassmorphism nav — sticky, frosted cream, branded.
   Applies to every page. The home template (home.css, loaded
   later + more specific via .ax-home-active) overrides this to a
   transparent-over-hero → frosted-on-scroll fixed nav.
   ========================================================= */
.site-header,
#masthead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--ax-nav-bg);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	border-bottom: 1px solid var(--ax-border);
	box-shadow: 0 4px 20px rgba(26, 26, 26, 0.05);
	transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Nav links + wordmark + icons → Poppins charcoal, sage on hover. */
.site-header .ast-nav-menu .menu-link,
.site-header .site-title a {
	font-family: var(--ax-font-heading);
	color: var(--ax-text);
	font-weight: 500;
	transition: color var(--ax-transition);
}
.site-header .ast-nav-menu .menu-link:hover,
.site-header .ast-nav-menu .current-menu-item > .menu-link,
.site-header .site-title a:hover,
.site-header .ast-header-account-link:hover,
.site-header .ast-site-header-cart .cart-container:hover * {
	color: var(--ax-accent);
}
.site-header .ast-header-account-link,
.site-header .ast-site-header-cart .cart-container,
.site-header .ast-cart-menu-wrap .count,
.site-header .ast-icon {
	color: var(--ax-text);
}
/* Cart count bubble → sage. */
.site-header .ast-site-header-cart .ast-cart-menu-wrap .count,
.site-header .ast-cart-menu-wrap .astra-cart-total-price-wrapper .count {
	background-color: var(--ax-accent);
	border-color: var(--ax-accent);
	color: var(--ax-on-accent);
}

/* Header cart: icon + item-COUNT badge only — hide the price/currency total.
   Astra prints the "₹0.00" subtotal/currency inside .ast-woo-header-cart-info-wrap;
   we drop it and render a sage count bubble from the icon's data-cart-total
   (which Woo fragments keep in sync), hidden when the cart is empty. */
.site-header .ast-woo-header-cart-info-wrap { display: none !important; }
.site-header .ast-site-header-cart .cart-container .astra-icon {
	position: relative;
	overflow: visible;
}
.site-header .ast-site-header-cart .cart-container .astra-icon::after {
	content: attr(data-cart-total);
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background-color: var(--ax-accent);
	color: var(--ax-on-accent);
	font-family: var(--ax-font-body);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}
.site-header .ast-site-header-cart .cart-container .astra-icon:not([data-cart-total])::after,
.site-header .ast-site-header-cart .cart-container .astra-icon[data-cart-total="0"]::after {
	content: none;
}
/* Submenu (dropdown) → surface + hairline, sage hover. */
.site-header .ast-nav-menu .sub-menu {
	background-color: var(--ax-surface);
	border-color: var(--ax-border);
	box-shadow: var(--ax-shadow);
}

/* =========================================================
   Mobile hamburger + off-canvas drawer — branded, minimal.
   Astra's HFB trigger is #ast-mobile-popup (drawer) + a
   .main-header-menu-toggle button; its dynamic CSS colours them
   from --ast-global-color-*, so we override with ID/token rules.
   ========================================================= */
/* Clean, minimal hamburger: no heavy fill — charcoal icon on cream. */
.main-header-menu-toggle.ast-mobile-menu-trigger-fill,
.main-header-menu-toggle.ast-mobile-menu-trigger-minimal {
	background-color: transparent;
	color: var(--ax-text);
}
.main-header-menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg,
.main-header-menu-toggle svg { fill: var(--ax-text); }
.main-header-menu-toggle:hover { color: var(--ax-accent); }
.main-header-menu-toggle:hover svg { fill: var(--ax-accent); }

/* Off-canvas drawer surface → brand cream. */
#ast-mobile-popup .ast-mobile-popup-inner,
#ast-mobile-popup.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
	background-color: var(--ax-base);
}
/* Drawer menu links → Poppins charcoal with hairline dividers, sage on
   hover / for the current page. */
#ast-mobile-popup .menu-item .menu-link {
	font-family: var(--ax-font-heading);
	color: var(--ax-text);
	border-bottom: 1px solid var(--ax-border);
}
#ast-mobile-popup .menu-item .menu-link:hover,
#ast-mobile-popup .current-menu-item > .menu-link {
	color: var(--ax-accent);
}
/* Account icon + close button → charcoal, sage on hover. */
#ast-mobile-popup .ast-header-account-wrap svg,
#ast-mobile-popup .menu-toggle-close { color: var(--ax-text); fill: var(--ax-text); }
#ast-mobile-popup .menu-toggle-close:hover { color: var(--ax-accent); }

/* =========================================================
   WooCommerce brand-leak fixes — shop / product / cart /
   checkout / account get the cream+sage boutique treatment.
   ========================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--ax-accent);
	background-color: var(--ax-sage-tint);
	color: var(--ax-text);
}
.woocommerce-error {
	border-top-color: var(--ax-accent-hover);
	background-color: var(--ax-sage-tint);
}
/* Cart + checkout tables / order review on the white surface. */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals {
	background-color: var(--ax-surface);
	border-radius: var(--ax-radius);
	border-color: var(--ax-border);
}
.woocommerce table.shop_table th {
	font-family: var(--ax-font-heading);
	color: var(--ax-text);
}
/* My-account navigation → sage active tab. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border-color: var(--ax-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--ax-accent);
}
/* Price + sale badges. */
.woocommerce span.price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--ax-text);
	font-family: var(--ax-font-heading);
}
.woocommerce span.onsale {
	background-color: var(--ax-accent);
	color: var(--ax-on-accent);
}

/* =========================================================
   Site-wide footer (bespoke, branded) — rendered by the child
   footer.php via ax_render_footer() on EVERY page. Dark charcoal
   panel with cream/sage type. Full-width, stacks on mobile.
   ========================================================= */
.ax-footer {
	background: var(--ax-text);
	color: rgba(255, 255, 255, 0.82);
	padding-top: 3rem;
}
.ax-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-bottom: 2.5rem;
}
.ax-footer__wordmark {
	font-family: var(--ax-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	letter-spacing: 0.01em;
}
.ax-footer__blurb { margin: 0.8rem 0 1rem; max-width: 28rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); }
.ax-footer__social { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ax-accent); font-weight: 500; }
.ax-footer__social:hover { color: #fff; }
.ax-footer__h {
	font-family: var(--ax-font-heading);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 0.9rem;
}
.ax-footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.ax-footer__col a { color: rgba(255, 255, 255, 0.78); }
.ax-footer__col a:hover { color: #fff; }
.ax-footer__muted { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; }
.ax-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ax-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding-block: 1.2rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) {
	.ax-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2.5rem; }
}

/* =========================================================
   Header / nav search (STEP 8) — branded site-wide.
   Astra's header search is a magnifier that reveals a search field
   (desktop dropdown / mobile full-width in the off-canvas drawer).
   ========================================================= */
.site-header .ast-search-icon .astra-search-icon,
.site-header .ast-search-menu-icon .astra-search-icon {
	color: var(--ax-text);
	transition: color var(--ax-transition);
}

.site-header .ast-search-icon:hover .astra-search-icon,
.site-header .ast-search-menu-icon:hover .astra-search-icon,
.site-header .ast-search-menu-icon.ast-dropdown-active .astra-search-icon {
	color: var(--ax-accent-hover);
}

.site-header .ast-search-menu-icon .search-field,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-field {
	border: 1px solid var(--ax-border) !important;
	border-radius: 999px !important;
	background-color: var(--ax-surface) !important;
	color: var(--ax-text) !important;
	font-family: var(--ax-font-body);
	box-shadow: var(--ax-shadow);
}

.site-header .ast-search-menu-icon .search-field::placeholder,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-field::placeholder {
	color: var(--ax-muted);
}

.site-header .ast-search-menu-icon .search-field:focus,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-field:focus {
	outline: none;
	border-color: var(--ax-accent) !important;
	box-shadow: 0 0 0 3px var(--ax-sage-tint);
}

.site-header .ast-search-menu-icon .search-submit,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-submit {
	color: var(--ax-accent-hover);
	background-color: transparent;
	border: 0;
}

.site-header .ast-search-menu-icon .search-submit:hover,
.ast-mobile-popup-drawer .ast-search-menu-icon .search-submit:hover {
	color: var(--ax-accent);
}

/* =========================================================
   GOLD PICK badge system (global — shop loops, related/upsell
   loops, homepage cards, single product). Markup from
   inc/gold-pick.php + ax_gold_picks_grid(). Gold tokens only.
   ========================================================= */
.ax-gold-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-family: var(--ax-font-heading);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1;
	padding: 0.42em 0.75em;
	border-radius: 999px;
	background: linear-gradient(135deg, #D8B45E 0%, var(--ax-gold) 55%, var(--ax-gold-deep) 100%);
	color: #FFFDF6;
	box-shadow: 0 4px 14px var(--ax-gold-shadow);
	text-transform: uppercase;
	white-space: nowrap;
}
.ax-gold-badge__star { font-size: 0.85em; transform: translateY(-0.04em); }

/* Card context: gold pill floats top-left over the product image. */
.ax-gold-badge--card {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
}
/* When a card is BOTH a Gold Pick and on sale, the sage .onsale pill (also
   top-left) drops below the gold badge instead of overlapping it. */
.ax-gold-badge--card ~ span.onsale,
li.product:has(.ax-gold-badge--card) span.onsale {
	top: 2.55rem !important;
}

/* Single-product verdict strip above the title. */
.ax-gold-verdict {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 0.8rem;
}
.ax-gold-badge--single { font-size: 0.72rem; }
.ax-gold-verdict__note {
	font-family: var(--ax-font-heading);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ax-gold-deep);
}

/* Respect reduced-motion for any global transitions above. */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.ax-footer * {
		transition-duration: 0.001ms !important;
	}
}

/* ---------------------------------------------------------------------------
   Shipment tracking card (customer order details — thank-you + My Account).
   Rendered by inc/admin/fulfillment.php when a tracking number is saved.
   --------------------------------------------------------------------------- */
.ax-tracking {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--ax-base, #FAF7F2);
	border: 1px solid #ECE7DE;
	border-left: 3px solid var(--ax-sage, #8B9D83);
	border-radius: 12px;
}
.ax-tracking__title {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
}
.ax-tracking__body {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
}
.ax-tracking__code {
	font-family: monospace;
	background: #fff;
	border: 1px solid #E4DED3;
	border-radius: 6px;
	padding: 0.1rem 0.45rem;
}