/**
 * v3.css — v3.0 design layer
 *
 * WHY THIS FILE EXISTS
 * The v2.9.2 audit found no design system: 97 colours, 53 font sizes,
 * 24 corner radii and 27 shadows, picked separately by each component.
 * v3.0 introduces one small set of named tokens (below) and restyles the
 * components that matter most with them. Blue leftovers were fixed where
 * they were written (custom.css, modern.css, cards.css); this file holds
 * the new tokens and the v3 component rules.
 *
 * LOAD ORDER (functions.php): theme.min.css → custom.min.css → cards.css
 * → modern.css (30) → schemes.css (31) → v3.css (35) → mobile.css (40).
 * So this file overrides the older layers, and mobile.css (phones and
 * tablets only) still has the last word on small screens, which keeps the
 * approved Design 10 phone look.
 *
 * TOKENS live on `body`, not `:root`: the colour scheme sets
 * --anubc-blue etc. on <body>, and a token declared on :root would be
 * resolved before the scheme applies (that bug kept "Anu" blue under
 * Crimson until v3.0).
 *
 * Rule for later edits: use the tokens. A new hex value or a new font
 * size here is a step back towards the problem this file solves.
 */

/* ── 0. Self-hosted Inter (v3.0; was a Google Fonts request) ──── */
/* One variable font covers every weight the theme uses (400–800).
   Inter by Rasmus Andersson, SIL Open Font License 1.1. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1. Tokens ─────────────────────────────────────────────────── */
body {
	/* Colour: brand (from the active scheme) */
	--color-primary: var(--anubc-blue, #1d4ed8);
	--color-primary-dark: var(--anubc-blue-dark, #1e3a8a);
	--color-primary-tint: var(--anubc-tint, #eff6ff);
	--color-primary-tint-strong: var(--anubc-tint-strong, #dbeafe);
	--color-cta: var(--anubc-cta, var(--anubc-blue, #1d4ed8));
	--color-cta-dark: var(--anubc-cta-dark, var(--anubc-blue-dark, #1e3a8a));
	--color-on-cta: var(--anubc-cta-text, #ffffff);

	/* Colour: neutrals (one grey family) */
	--color-heading: #111827;
	--color-text: #1f2937;
	--color-text-muted: #6b7280;      /* 4.8:1 on white */
	--color-border: #e5e7eb;
	--color-border-strong: #d1d5db;
	--color-surface: #ffffff;
	--color-surface-muted: #f9fafb;

	/* Colour: status */
	--color-success: #047857;
	--color-success-bg: #ecfdf5;
	--color-warning-fg: #92400e;
	--color-warning-bg: #fef3c7;
	--color-danger: #b91c1c;
	--color-danger-bg: #fef2f2;
	--color-price: var(--color-heading);

	/* Type scale (7 steps) */
	--fs-xs: 0.75rem;     /* 12px — the minimum */
	--fs-sm: 0.8125rem;   /* 13px */
	--fs-md: 0.875rem;    /* 14px */
	--fs-base: 0.9375rem; /* 15px — body */
	--fs-lg: 1.125rem;    /* 18px */
	--fs-xl: 1.375rem;    /* 22px — section titles */
	--fs-2xl: 1.75rem;    /* 28px — page titles */

	/* Shape */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
	--shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
	--shadow-3: 0 12px 28px rgba(16, 24, 40, 0.12);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ── 2. Base ───────────────────────────────────────────────────── */
body {
	font-size: var(--fs-base);
	font-weight: 400;   /* was 500: body text read heavy */
	line-height: 1.6;
	color: var(--color-text);
}

:root {
	color-scheme: light; /* stop phone "auto dark" from inverting the design */
}

h1, h2, h3, h4 {
	color: var(--color-heading);
	text-wrap: balance;
}

/* WordPress / WooCommerce visually-hidden text (was not defined). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Skip link: hidden until a keyboard user tabs to it. */
.anubc-skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--color-surface);
	color: var(--color-heading);
	font-weight: 600;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-3);
	text-decoration: none;
}
.anubc-skip-link:focus {
	top: 1rem;
}
main[tabindex="-1"]:focus {
	outline: none;
}

/* Safety net: the purged theme.css no longer carries this reset. */
[hidden] {
	display: none !important;
}

/* The light logo variant is for the filled phone header only. This rule
   used to live in mobile.css; since v3.0 that file loads with
   media="(max-width: 1023px)", so the desktop hide lives here. */
.anubc-logo-img--light {
	display: none;
}

/* ── 3. Focus: visible for keyboard users everywhere ───────────── */
/* There were no :focus-visible styles, and two rules removed the outline. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
/* On the coloured header bar and menu bar a brand-colour ring disappears. */
.anubc-header--filled :where(a, button, input):focus-visible,
.anubc-nav-blue .anubc-topnav :where(a, button):focus-visible,
.bg-blue-700 :where(a, button):focus-visible,
.anubc-footer :where(a, button):focus-visible {
	outline-color: #ffffff;
}

/* Form controls follow the scheme (Tailwind forms made them blue). */
input[type="checkbox"],
input[type="radio"] {
	color: var(--color-primary);
	accent-color: var(--color-primary);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
	--tw-ring-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
	border-color: var(--color-primary);
}
.anubc-search-input:focus {
	box-shadow: var(--focus-ring) !important;
	border-color: var(--color-primary) !important;
}

/* ── 4. Top menu: "More" dropdown (see assets/js/main.js) ──────── */
@media (min-width: 1024px) {
	/* No-JS fallback: wrap onto a second row instead of running off-screen. */
	.anubc-topnav .navbar-nav {
		flex-wrap: wrap;
	}
	/* With JS, show one row only until the "More" script has run, so the
	   header does not open to two rows and then jump back on page load.
	   (anubc-js is set on <html> by a one-line script in the <head>.) */
	.anubc-js .anubc-topnav:not(.anubc-nav-ready) .navbar-nav {
		max-height: 52px;
		overflow: hidden;
	}
	.anubc-nav-more-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		background: none;
		border: 0;
		cursor: pointer;
		font: inherit;
		color: inherit;
	}
	.anubc-nav-more-btn::after {
		content: '\ea5f'; /* ti-chevron-down */
		font-family: tabler-icons;
		font-size: 0.8rem;
		opacity: 0.8;
	}
	.anubc-nav-more {
		margin-left: auto;
		position: relative;
	}
	/* Open on click too (touch laptops), not only on hover. */
	.anubc-topnav .anubc-nav-more.is-open > .sub-menu {
		display: block;
	}
	/* The More list sits at the right edge: open it leftwards. */
	.anubc-topnav .anubc-nav-more > .sub-menu {
		left: auto;
		right: 0;
	}
	.anubc-topnav .anubc-nav-more .sub-menu .sub-menu {
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-right: 0.25rem;
	}
	/* The chevron caret custom.css draws on parents is replaced above. */
	.anubc-topnav .anubc-nav-more > .nav-link::before {
		content: none;
	}
}

/* ── 5. Section headers (homepage) ─────────────────────────────── */
.anubc-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
}
.anubc-section-title {
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}
.anubc-section-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	white-space: nowrap;
}
.anubc-section-link:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}
.anubc-main-col > section,
.anubc-main-col > .anubc-home-section {
	margin-bottom: 3rem;
}

/* Category tiles: icons and hover follow the scheme (were fixed blue). */
.anubc-main-col .grid > a > .ti { /* the tiles only, not product-card buttons */
	color: var(--color-primary);
}

/* ── 6. Product cards ──────────────────────────────────────────── */
/* On a category page every card repeated the category's own name. */
.tax-product_cat .anubc-card-category {
	display: none;
}

.anubc-card-title {
	font-size: var(--fs-md);
	line-height: 1.4;
}
.anubc-price {
	color: var(--color-price);
}

/* Badges: one colour system, all readable. */
.anubc-badge-pill.bg-blue-600,
.anubc-badge-pill.bg-red-600 {
	background: var(--anubc-sale-bg, var(--color-primary-tint)) !important;
	color: var(--anubc-sale-text, var(--color-primary-dark)) !important;
}
.anubc-badge-pill.bg-amber-500 {
	background: var(--color-warning-bg) !important;
	color: var(--color-warning-fg) !important;   /* was white on amber, 2.2:1 */
}

/* Tablet and desktop: a softer card button. Solid crimson on every card
   (plus the red header, menu and prices) meant nothing stood out; the
   card button is now a tinted button that turns solid on hover, and
   solid crimson is kept for the product page's main button. Phones keep
   the Design 10 icon button from mobile.css. */
@media (min-width: 641px) {
	body .anubc-product-card .anubc-card-cta .anubc-btn {
		background-color: var(--color-primary-tint) !important;
		border-color: transparent !important;
		color: var(--color-primary-dark) !important;
		box-shadow: none !important;
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	body .anubc-product-card .anubc-card-cta .anubc-btn:hover,
	body .anubc-product-card .anubc-card-cta .anubc-btn:focus-visible {
		background-color: var(--color-cta) !important;
		color: var(--color-on-cta) !important;
	}
	body .anubc-product-card .anubc-card-cta .anubc-btn.loading {
		opacity: 0.7;
	}
}

/* Quick actions appeared on mouse hover only; keyboard users now see them. */
.anubc-product-card:focus-within .anubc-card-actions {
	opacity: 1;
	visibility: visible;
}

/* Readable small grey text (axe: 3.1:1 and 4.46:1 before). */
.text-gray-500,
.anubc-card-category,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	color: var(--color-text-muted) !important;
}
.woocommerce-breadcrumb a:hover {
	color: var(--color-primary) !important;
}

/* ── 7. Product page ───────────────────────────────────────────── */
/* Full width since v3.0 (no sidebar), so keep the product readable. */
.single-product .anubc-layout-full main {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* Square photo frame so every product sits the same way. */
.single-product .woocommerce-product-gallery__image {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.single-product .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--color-surface);
}

/* Stock: a small label next to the price area, not a full-width bar. */
.anubc-stock-section {
	display: inline-flex !important;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1rem !important;
	padding: 0.3rem 0.75rem !important;
	border-radius: var(--radius-pill) !important;
	font-size: var(--fs-sm);
	animation: none !important;
}
.anubc-stock-section .anubc-stock-label {
	font-size: var(--fs-sm);
	font-weight: 600;
}
.anubc-stock-section .anubc-stock-dot {
	width: 8px;
	height: 8px;
}
.anubc-stock-section--in        { background: var(--color-success-bg) !important; }
.anubc-stock-section--in .anubc-stock-label { color: var(--color-success); }
.anubc-stock-section--in .anubc-stock-dot   { background: var(--color-success); }
.anubc-stock-section--low       { background: var(--color-warning-bg) !important; }
.anubc-stock-section--low .anubc-stock-label { color: var(--color-warning-fg); }
.anubc-stock-section--low .anubc-stock-dot   { background: #d97706; }
.anubc-stock-section--backorder { background: var(--color-primary-tint) !important; }
.anubc-stock-section--backorder .anubc-stock-label { color: var(--color-primary-dark); }
.anubc-stock-section--backorder .anubc-stock-dot   { background: var(--color-primary); }
.anubc-stock-section--out       { background: var(--color-danger-bg) !important; }
.anubc-stock-section--out .anubc-stock-label { color: var(--color-danger); }
.anubc-stock-section--out .anubc-stock-dot   { background: var(--color-danger); }

/* Product meta: SKU and category stay (small); the tag list was noise. */
.single-product .product_meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}
.single-product .product_meta .tagged_as {
	display: none;
}

/* Delivery card: scheme tint, one icon style (one row used to be a solid
   red circle while the others were outlines). */
.anubc-delivery-card {
	background: var(--color-primary-tint) !important;
	border-color: var(--color-primary-tint-strong) !important;
	border-radius: var(--radius-lg) !important;
}
.anubc-delivery-row--accent .anubc-delivery-txt strong {
	color: var(--color-primary-dark) !important; /* crimson on the pink tint was 4.45:1 */
}
.anubc-delivery-row--accent .anubc-delivery-ic {
	background: var(--color-surface) !important;
	border-color: var(--color-primary-tint-strong) !important;
	color: var(--color-primary) !important;
}

/* Wishlist + Share row */
.anubc-actions-section {
	justify-content: space-between;
	gap: 0.75rem 1.5rem !important;
}
.anubc-actions-section .anubc-wishlist-btn {
	flex: 0 0 auto;
	border-width: 1px;
	border-radius: var(--radius-md);
	color: var(--color-text);
}
.anubc-share {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.anubc-share-label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	margin-right: 0.25rem;
}
.anubc-share .anubc-share-btn {
	flex: 0 0 auto;
	min-width: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	font-size: 1.25rem;
}
.anubc-share .anubc-share-whatsapp:hover { background: #25d366 !important; border-color: #25d366 !important; color: #0b3d1e !important; }
.anubc-share .anubc-share-facebook:hover { background: #1877f2 !important; border-color: #1877f2 !important; color: #ffffff !important; }

/* ── 8. Floating chat button ───────────────────────────────────── */
/* It used to sit bottom-LEFT, 200px wide, over the sidebar column, and
   covered the last categories ("Party & Celebration" in testing). On
   desktop it is now a round WhatsApp button bottom-right (the usual place
   for chat) with the social icons as small circles above it; the label
   stays for screen readers and shows as a tooltip. Phones and tablets
   never show it: the bottom bar has its own WhatsApp tab. */
@media (max-width: 1023px) {
	.anubc-sidebar-social {
		display: none !important;
	}
}
@media (min-width: 1024px) {
	.anubc-sidebar-social {
		left: auto !important;
		right: 0.5rem;
		bottom: 1rem;
		width: auto !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	.anubc-sidebar-social .anubc-whatsapp-btn {
		width: 56px;
		height: 56px;
		padding: 0;
		border-radius: 50%;
		font-size: 1.75rem;
		box-shadow: var(--shadow-3);
	}
	.anubc-sidebar-social .anubc-whatsapp-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.anubc-sidebar-social .anubc-social-icons {
		order: -1;
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	.anubc-sidebar-social .anubc-social-icons__item {
		box-shadow: var(--shadow-2);
	}
}

/* ── 9. Store notices and the delivery bar ─────────────────────── */
/* The delivery bar was orange/green, which clashed with crimson. */
.anubc-delivbar {
	background: var(--color-primary-tint) !important;
	border-color: var(--color-primary-tint-strong) !important;
	border-radius: var(--radius-md) !important;
}
.anubc-delivbar .anubc-delivbar-msg { color: var(--color-heading) !important; }
.anubc-delivbar .anubc-delivbar-msg i { color: var(--color-primary); }
.anubc-delivbar .anubc-delivbar-track { background: color-mix(in srgb, var(--color-primary) 15%, #ffffff) !important; }
.anubc-delivbar .anubc-delivbar-fill { background: var(--color-primary) !important; }
.anubc-delivbar.is-unlocked {
	background: var(--color-success-bg) !important;
	border-color: #a7f3d0 !important;
}
.anubc-delivbar.is-unlocked .anubc-delivbar-msg i { color: var(--color-success); }
.anubc-delivbar.is-unlocked .anubc-delivbar-track { background: #c7f0dd !important; }
.anubc-delivbar.is-unlocked .anubc-delivbar-fill { background: var(--color-success) !important; }
.anubc-wa-or { color: var(--color-text-muted) !important; } /* was 2.5:1 */

/* ── 10. Category sidebar: keyboard users can open subcategories ── */
.anubc-cat-item.has-children:focus-within > .anubc-cat-submenu {
	display: block;
}

/* ── 11. 404 page ──────────────────────────────────────────────── */
.anubc-404 {
	margin-block: 3rem;
}
.anubc-404-inner {
	max-width: 44rem;
	margin: 0 auto;
	text-align: center;
}
.anubc-404-code {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--color-primary);
	margin: 0 0 0.5rem;
}
.anubc-404-title {
	font-size: var(--fs-2xl);
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.anubc-404-text {
	color: var(--color-text-muted);
	margin: 0 0 1.5rem;
}
.anubc-404-search {
	display: flex;
	gap: 0.5rem;
	max-width: 32rem;
	margin: 0 auto 1.5rem;
}
.anubc-404-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-size: 1rem;
}
.anubc-404-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.anubc-404-cats a {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-md);
	text-decoration: none;
}
.anubc-404-cats a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.anubc-404-home {
	color: var(--color-primary);
	font-weight: 600;
}

/* ── 12. Page content (`prose` was purged from theme.css) ──────── */
/* Normal pages and blog posts had no paragraph spacing or list bullets. */
.prose {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text);
}
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-xl); font-weight: 700; margin-top: 1.75em; }
.prose h3 { font-size: var(--fs-lg); font-weight: 600; margin-top: 1.5em; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose a:not([class]) { color: var(--color-primary); text-decoration: underline; } /* plain text links only, never buttons */
.prose img { border-radius: var(--radius-md); height: auto; }
.prose table { display: block; overflow-x: auto; }

/* Policy page tables could push the page sideways on phones. */
.anubc-policy-content table {
	display: block;
	overflow-x: auto;
}

/* ── 13. Minimum text size: 12px ───────────────────────────────── */
.anubc-fg-badge,
.anubc-stock-pill,
.anubc-badge-pill {
	font-size: max(var(--fs-xs), 0.7rem) !important;
}

/* ── 14. Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.anubc-product-card:hover,
	.anubc-subcat-tile:hover {
		transform: none !important;
	}
}