/*
Theme Name: Ezyhut Grocery
Theme URI: https://ezyhut.us/themes/ezyhut-grocery/
Author: Ezyhut
Author URI: https://ezyhut.us/
Description: Ezyhut Grocery is a premium, lightweight, zero-dependency WordPress theme engineered for high-volume grocery e-commerce. Built for catalogues of 5,000+ SKUs, it ships an AJAX layered-filter shop, unit/weight pricing (per lb, per oz, per kg, per 100g), AJAX quick add-to-cart with quantity steppers, a curated modular homepage (priority hero, taxonomy grid, trending, top sellers, deal of the month, best sellers) and a Grocery FAQ post type with import tooling. No page builder, no framework, no CDN calls -- just native Gutenberg blocks, theme.json design tokens and hand-tuned CSS. EzyHut Grocery theme Built for EzyHut Grocery, the neighbourhood halal grocer founded and owned by <strong>Shifath Bin Syed</strong> &#8212; whose care for bringing fresh produce, halal meat and everyday pantry staples to families close to home shapes every decision in this theme, from the department tiles to the weight-aware pricing. Read more about the founder at <a href="https://www.sifatbsyed.com/">sifatbsyed.com</a>.
Tags: e-commerce, grocery, two-columns, right-sidebar, left-sidebar, custom-colors, custom-logo, custom-menu, featured-images, block-patterns, block-styles, editor-style, translation-ready, rtl-language-support, threaded-comments, wide-blocks, accessibility-ready
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ezyhut-grocery
WC requires at least: 8.0
WC tested up to: 11.0

Ezyhut Grocery, like WordPress, is licensed under the GPL.
*/

/* ==========================================================================
   1. DESIGN TOKENS
   The two brand colours are declared once, here, and every other colour in
   the theme is derived from them. theme.json mirrors these values so the
   block editor renders identically to the front end.
   ========================================================================== */

:root {
	/* --- Brand ------------------------------------------------------- */
	--ezy-green: #388d60;
	--ezy-green-600: #2f7a52;
	--ezy-green-700: #266443;
	--ezy-green-800: #1d4d33;
	--ezy-green-300: #7cb897;
	--ezy-green-100: #d9ecdf;
	--ezy-green-50: #f0f8f3;
	--ezy-green-rgb: 56, 141, 96;

	--ezy-yellow: #f7c519;
	--ezy-yellow-600: #dcac0a;
	--ezy-yellow-700: #b78d06;
	--ezy-yellow-300: #fbdf7d;
	--ezy-yellow-100: #fef6d6;
	--ezy-yellow-50: #fffbeb;
	--ezy-yellow-rgb: 247, 197, 25;

	/* --- Neutrals ---------------------------------------------------- */
	--ezy-ink: #14201a;
	--ezy-body: #4a5a52;
	--ezy-muted: #78877f;
	--ezy-line: #e3e9e5;
	--ezy-line-strong: #ccd6d0;
	--ezy-surface: #ffffff;
	--ezy-surface-alt: #f6f9f7;
	--ezy-surface-sunken: #eef3f0;

	/* --- Status ------------------------------------------------------ */
	--ezy-danger: #c0392b;
	--ezy-danger-bg: #fdeceb;
	--ezy-info: #2f6f9f;
	--ezy-info-bg: #eaf3fa;

	/* --- Typography -------------------------------------------------- */
	--ezy-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--ezy-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
	--ezy-text-xs: 0.75rem;
	--ezy-text-sm: 0.8125rem;
	--ezy-text-base: 0.9375rem;
	--ezy-text-md: 1rem;
	--ezy-text-lg: 1.125rem;
	--ezy-text-xl: 1.375rem;
	--ezy-text-2xl: 1.75rem;
	--ezy-text-3xl: 2.25rem;
	--ezy-text-4xl: 2.875rem;

	/* --- Geometry ---------------------------------------------------- */
	--ezy-radius-sm: 6px;
	--ezy-radius: 12px;
	--ezy-radius-lg: 18px;
	--ezy-radius-pill: 999px;

	--ezy-shadow-sm: 0 1px 2px rgba(20, 32, 26, 0.06);
	--ezy-shadow: 0 4px 16px rgba(20, 32, 26, 0.07);
	--ezy-shadow-md: 0 10px 30px rgba(20, 32, 26, 0.09);
	--ezy-shadow-brand: 0 10px 26px rgba(var(--ezy-green-rgb), 0.24);

	/* --- Layout ------------------------------------------------------ */
	--ezy-container: 1320px;
	--ezy-container-wide: 1560px;
	--ezy-gutter: clamp(16px, 3vw, 32px);
	--ezy-section-gap: clamp(48px, 6vw, 88px);

	/* Height of the branding row only. Consumed as a min-height on
	   .ezy-header__main -- do NOT use it for sticky offsets. */
	--ezy-header-height: 96px;

	/* Height of the ENTIRE sticky header (branding row + navbar + borders).
	   This is what sticky columns and scroll anchors must clear. The header's
	   real height varies by breakpoint -- the navbar is hidden below 992px but
	   the search field wraps to its own row -- so no single constant is right.
	   assets/js/app.js measures #ezy-site-header and overwrites this at
	   runtime; the value here is the no-JS fallback. */
	--ezy-sticky-offset: 140px;

	--ezy-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ezy-sticky-offset) + 16px);
}

body {
	margin: 0;
	font-family: var(--ezy-font-sans);
	font-size: var(--ezy-text-base);
	line-height: 1.65;
	color: var(--ezy-body);
	background: var(--ezy-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ezy-no-scroll {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--ezy-font-display);
	color: var(--ezy-ink);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

h1 { font-size: var(--ezy-text-4xl); }
h2 { font-size: var(--ezy-text-3xl); }
h3 { font-size: var(--ezy-text-2xl); }
h4 { font-size: var(--ezy-text-xl); }
h5 { font-size: var(--ezy-text-lg); }
h6 { font-size: var(--ezy-text-md); }

p { margin: 0 0 1.15em; }

a {
	color: var(--ezy-green);
	text-decoration: none;
	transition: color var(--ezy-transition);
}

a:hover,
a:focus {
	color: var(--ezy-green-700);
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

ul,
ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}

figure { margin: 0 0 1.15em; }

blockquote {
	margin: 0 0 1.5em;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--ezy-yellow);
	background: var(--ezy-surface-alt);
	border-radius: 0 var(--ezy-radius) var(--ezy-radius) 0;
	font-style: italic;
}

code,
pre,
kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: 0.875em;
}

pre {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	background: var(--ezy-ink);
	color: #e8f1ec;
	border-radius: var(--ezy-radius);
}

hr {
	border: 0;
	border-top: 1px solid var(--ezy-line);
	margin: 2rem 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: var(--ezy-text-base);
}

table th,
table td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--ezy-line);
	text-align: left;
}

table th {
	background: var(--ezy-surface-alt);
	color: var(--ezy-ink);
	font-weight: 600;
}

/* --- Accessibility ---------------------------------------------------- */

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

.screen-reader-text:focus {
	background: var(--ezy-surface);
	border-radius: var(--ezy-radius-sm);
	box-shadow: var(--ezy-shadow-md);
	clip: auto !important;
	clip-path: none;
	color: var(--ezy-green-700);
	display: block;
	font-size: var(--ezy-text-md);
	font-weight: 600;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--ezy-green);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.ezy-container {
	width: 100%;
	max-width: var(--ezy-container);
	margin-inline: auto;
	padding-inline: var(--ezy-gutter);
}

.ezy-container--wide { max-width: var(--ezy-container-wide); }
.ezy-container--narrow { max-width: 820px; }

.ezy-section { padding-block: var(--ezy-section-gap); }
.ezy-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.ezy-section--alt { background: var(--ezy-surface-alt); }

.ezy-site-main { min-height: 50vh; }

.ezy-grid {
	display: grid;
	gap: clamp(16px, 2vw, 26px);
}

.ezy-layout {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 992px) {
	.ezy-layout--sidebar-left { grid-template-columns: 288px minmax(0, 1fr); }
	.ezy-layout--sidebar-right { grid-template-columns: minmax(0, 1fr) 288px; }
	.ezy-layout--sidebar-left > .ezy-sidebar { order: -1; }
}

/* --- Section headings -------------------------------------------------- */

.ezy-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(20px, 2.5vw, 34px);
}

.ezy-section-head__text { max-width: 640px; }

.ezy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 5px 14px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
	font-size: var(--ezy-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ezy-eyebrow--accent {
	background: var(--ezy-yellow-50);
	color: var(--ezy-yellow-700);
}

.ezy-section-title {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.ezy-section-subtitle {
	margin: 8px 0 0;
	color: var(--ezy-muted);
	font-size: var(--ezy-text-md);
}

/* ==========================================================================
   4. BUTTONS & CONTROLS
   ========================================================================== */

/* NOTE: do not add `button.ezy-btn` to this list. `.ezy-btn` already matches
   button elements, but the element-qualified form raises this rule to
   specificity (0,1,1) -- which then beats `.ezy-btn--accent` and
   `.ezy-btn--outline` at (0,1,0) for every <button>. That silently painted
   every "Load more" as a solid green primary and every accent button green
   instead of yellow, while the same modifiers worked fine on <a> elements. */
.ezy-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-green);
	color: #fff;
	font-family: inherit;
	font-size: var(--ezy-text-base);
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ezy-transition), color var(--ezy-transition),
		border-color var(--ezy-transition), transform var(--ezy-transition),
		box-shadow var(--ezy-transition);
}

.ezy-btn:hover,
.ezy-btn:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: var(--ezy-green-700);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--ezy-shadow-brand);
}

.ezy-btn:disabled,
.ezy-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.ezy-btn--accent,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--ezy-yellow);
	color: var(--ezy-ink);
}

.ezy-btn--accent:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--ezy-yellow-600);
	color: var(--ezy-ink);
	box-shadow: 0 10px 26px rgba(var(--ezy-yellow-rgb), 0.32);
}

.ezy-btn--outline {
	background: transparent;
	border-color: var(--ezy-line-strong);
	color: var(--ezy-ink);
}

.ezy-btn--outline:hover {
	background: var(--ezy-green-50);
	border-color: var(--ezy-green);
	color: var(--ezy-green-700);
	box-shadow: none;
}

.ezy-btn--ghost {
	background: transparent;
	color: var(--ezy-green-700);
	padding-inline: 10px;
}

.ezy-btn--ghost:hover {
	background: var(--ezy-green-50);
	box-shadow: none;
}

.ezy-btn--block { width: 100%; }
.ezy-btn--sm { padding: 8px 16px; font-size: var(--ezy-text-sm); }
.ezy-btn--lg { padding: 14px 30px; font-size: var(--ezy-text-md); }

/* A step below `--sm`, for controls that live inside dense UI -- data tables,
   toolbars -- rather than acting as page-level CTAs. `--sm` is deliberately
   left alone: it is page furniture at 13px ("View all", the shop filter
   toggle, the FAQ link) and six call sites depend on its current size.
   The order-actions cell is listed here rather than given its own block so
   the size is defined once. That selector is (0,2,1) -- the same weight as
   the `.woocommerce a.button` rule it overrides -- and sits later in this
   file, so it wins on order without needing !important. */
.ezy-btn--xs,
.woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-view-order a.button.invoice {
	min-height: 34px;
	padding: 6px 14px;
	border-radius: var(--ezy-radius-pill);
	font-size: var(--ezy-text-xs);
	font-weight: 600;
	line-height: 1;
}

/* Keep the pair on one line, hard against the right edge of the cell, and
   stop them stretching to the cell width. */
.woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions a.button + a.button {
	margin-left: 8px;
}

/* View is the primary action, Invoice the secondary one. Two identical
   filled buttons side by side give no signal about which is wanted. The
   hover here also has to undo the lift and shadow the shared button rule
   applies, or the "quiet" button animates like the loud one. */
.woocommerce-orders-table__cell-order-actions a.button.invoice {
	background: transparent;
	border-color: var(--ezy-line);
	color: var(--ezy-body);
}

.woocommerce-orders-table__cell-order-actions a.button.invoice:hover {
	background: transparent;
	border-color: var(--ezy-green);
	color: var(--ezy-green-700);
	transform: none;
	box-shadow: none;
}

.ezy-btn--loading { position: relative; color: transparent !important; }

.ezy-btn--loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ezy-spin 0.7s linear infinite;
}

.ezy-btn--accent.ezy-btn--loading::after,
.ezy-btn--outline.ezy-btn--loading::after {
	border-color: rgba(20, 32, 26, 0.25);
	border-top-color: var(--ezy-ink);
}

@keyframes ezy-spin {
	to { transform: rotate(360deg); }
}

/* --- Form fields -------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-sm);
	background: var(--ezy-surface);
	color: var(--ezy-ink);
	font-family: inherit;
	font-size: var(--ezy-text-base);
	line-height: 1.5;
	transition: border-color var(--ezy-transition), box-shadow var(--ezy-transition);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ezy-green);
	box-shadow: 0 0 0 3px rgba(var(--ezy-green-rgb), 0.16);
}

textarea { min-height: 140px; resize: vertical; }

label { font-weight: 600; color: var(--ezy-ink); }

/* ==========================================================================
   5. SITE HEADER
   ========================================================================== */

.ezy-topbar {
	background: var(--ezy-green-800);
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--ezy-text-sm);
}

.ezy-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 40px;
	padding-block: 6px;
}

.ezy-topbar a { color: #fff; }
.ezy-topbar a:hover { color: var(--ezy-yellow); }

.ezy-topbar__promo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ezy-topbar__promo strong { color: var(--ezy-yellow); }

.ezy-topbar__links {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ezy-site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--ezy-surface);
	border-bottom: 1px solid var(--ezy-line);
	transition: box-shadow var(--ezy-transition);
}

.ezy-site-header.is-stuck { box-shadow: var(--ezy-shadow); }

/* Condensed state -- the branding row tightens and the department bar leaves
   the flow, taking the header from ~152px down to ~64px and handing that
   viewport back on long product grids.

   The height step is deliberately NOT transitioned. `syncHeaderOffset()` in
   app.js watches this element with a ResizeObserver and republishes
   `--ezy-sticky-offset`, which seven sticky consumers read (shop filter rail,
   product gallery, FAQ rail, scroll anchors, the third-party sticker fix).
   Animating the height would fire that observer once per frame and drag every
   one of them along for the whole duration; a single instant step means a
   single offset write. It also means `prefers-reduced-motion` has nothing to
   suppress here.

   Scoped to >=992px: below that the navbar is already hidden and the search
   field owns its own row, so there is nothing left to reclaim. */
@media (min-width: 992px) {
	.ezy-site-header.is-condensed .ezy-navbar { display: none; }

	.ezy-site-header.is-condensed .ezy-header__main {
		min-height: 0;
		padding-block: 8px;
	}

	.ezy-site-header.is-condensed .ezy-branding img { max-height: 40px; }
	.ezy-site-header.is-condensed .ezy-branding__title { font-size: var(--ezy-text-lg); }
	.ezy-site-header.is-condensed .ezy-branding__tagline { display: none; }
}

.admin-bar .ezy-site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .ezy-site-header { top: 46px; }
}

.ezy-header__main {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(12px, 2.5vw, 32px);
	min-height: var(--ezy-header-height);
	padding-block: 12px;
}

.ezy-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ezy-branding img { max-height: 72px; width: auto; }

.ezy-branding__title {
	margin: 0;
	font-size: var(--ezy-text-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.ezy-branding__title a { color: var(--ezy-ink); }
.ezy-branding__title a:hover { color: var(--ezy-green); }

.ezy-branding__tagline {
	margin: 0;
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
}

/* --- Header search ------------------------------------------------------ */

/* The pill is capped below the width of its grid track on large screens. As
   a left-aligned block that pushed every leftover pixel to one side -- a
   tight gap after the logo and a ~220px hole before the account links at a
   1320px container. Centring splits the leftover evenly, and the wider cap
   lets search hold the middle of the header the way a grocery catalogue
   wants. Scoped to the header: the same component is rendered by
   get_search_form() in widgets, where centring would be wrong. */
.ezy-header__search { min-width: 0; }

.ezy-header__search .ezy-search-form {
	max-width: 780px;
	margin-inline: auto;
}

.ezy-search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 640px;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface-alt);
	overflow: hidden;
	transition: border-color var(--ezy-transition), box-shadow var(--ezy-transition);
}

.ezy-search-form:hover { border-color: var(--ezy-green-300); }

/* Search is the primary way people shop a grocery catalogue, so its focus
   state is deliberately the loudest in the header. */
.ezy-search-form:focus-within {
	border-color: var(--ezy-green);
	background: var(--ezy-surface);
	box-shadow: 0 0 0 4px rgba(var(--ezy-green-rgb), 0.16);
}

.ezy-search-form__cat {
	flex: 0 0 auto;
	max-width: 190px;
	border: 0;
	border-right: 1px solid var(--ezy-line-strong);
	border-radius: 0;
	background: transparent;
	padding: 0 14px 0 18px;
	font-size: var(--ezy-text-sm);
	font-weight: 600;
	color: var(--ezy-ink);
	cursor: pointer;
}

.ezy-search-form__cat:focus { box-shadow: none; }

/* Same specificity trap as the stepper: `input[type="search"]` is (0,1,1) and
   was drawing a bordered white box inside the rounded search pill. */
.ezy-search-form input.ezy-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 11px 16px;
	box-shadow: none;
}

.ezy-search-form__field:focus { box-shadow: none; }

.ezy-search-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background: var(--ezy-green);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--ezy-transition);
}

.ezy-search-form__submit:hover { background: var(--ezy-green-700); }
.ezy-search-form__submit svg { width: 18px; height: 18px; }

/* On narrow phones the department select squeezes the query field down to a
   couple of visible characters. The full department tree is already reachable
   from the drawer, so drop the select and give the input the whole pill. */
@media (max-width: 575px) {
	.ezy-search-form__cat { display: none; }
	.ezy-search-form__field { padding-inline: 18px; }
}

/* --- Header actions ----------------------------------------------------- */

.ezy-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 16px);
}

.ezy-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* 44px is the minimum comfortable touch target; the icon alone left these
	   at ~38px. */
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: var(--ezy-radius);
	color: var(--ezy-ink);
	font-size: var(--ezy-text-sm);
	font-weight: 600;
	transition: background var(--ezy-transition), color var(--ezy-transition),
		border-color var(--ezy-transition);
}

.ezy-action:hover { background: var(--ezy-green-50); color: var(--ezy-green-700); }

/* The basket is the money control -- it should not read as visually equal to
   the account link sitting next to it. Tinted at rest rather than solid, so
   it stays distinct from the solid-green departments trigger below it. */
.ezy-basket {
	background: var(--ezy-green-50);
	border-color: var(--ezy-green-100);
	cursor: pointer;
	font-family: inherit;
}

.ezy-basket:hover {
	background: var(--ezy-green-100);
	border-color: var(--ezy-green-300);
}
.ezy-action svg { width: 22px; height: 22px; flex: none; }

.ezy-action__meta { display: none; line-height: 1.2; text-align: left; }

/* The running subtotal is the number shoppers track against a budget, so it
   earns its space before the account greeting does. From 992px -- where the
   desktop navbar appears -- the basket keeps its text; the account label
   joins it at 1100px once there is room for both without squeezing search. */
@media (min-width: 992px) {
	.ezy-basket .ezy-action__meta { display: block; }
}

@media (min-width: 1100px) {
	.ezy-action__meta { display: block; }
}

.ezy-action__label {
	display: block;
	font-size: var(--ezy-text-xs);
	font-weight: 500;
	color: var(--ezy-muted);
}

.ezy-action__value { display: block; font-weight: 700; }

/* Icon-only sign-out button beside the account link. */
.ezy-action--logout { padding: 8px; color: var(--ezy-muted); }
.ezy-action--logout:hover { background: var(--ezy-danger-bg); color: var(--ezy-danger); }

/* --- Live basket indicator ---------------------------------------------- */

.ezy-basket__icon { position: relative; }

.ezy-basket__count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-yellow);
	color: var(--ezy-ink);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	border: 2px solid var(--ezy-surface);
}

.ezy-basket.is-bumping .ezy-basket__count {
	animation: ezy-bump 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ezy-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.45); }
	100% { transform: scale(1); }
}

.ezy-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface);
	color: var(--ezy-ink);
	cursor: pointer;
}

.ezy-header__toggle svg { width: 22px; height: 22px; }

@media (min-width: 992px) {
	.ezy-header__toggle { display: none; }
}

/* --- Third-party overlap defence ---------------------------------------- */

/* The Ezyhut Helper plugin pins a promotional sticker at `top: 0; right: 0`
   with `z-index: 9999`. While the promo top bar existed it landed harmlessly
   on that strip; with the bar switched off it sits directly on top of the
   basket button and hides the cart total. Push it clear of the sticky header,
   using the measured offset so it keeps tracking the real header height.
   The plugin already hides the sticker below 1024px itself. */
@media (min-width: 1025px) {
	.ezyhut-sticky-sticker {
		top: calc(var(--ezy-sticky-offset) + 12px);
	}
}

/* ==========================================================================
   6. NAVIGATION / TAXONOMY BAR
   ========================================================================== */

.ezy-navbar {
	border-top: 1px solid var(--ezy-line);
	background: var(--ezy-surface);
}

.ezy-navbar__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 54px;
}

/* Departments (product taxonomy) mega dropdown */
.ezy-departments { position: relative; flex: none; }

.ezy-departments__trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-green);
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--ezy-transition);
}

.ezy-departments__trigger:hover { background: var(--ezy-green-700); }
.ezy-departments__trigger svg { width: 18px; height: 18px; }

.ezy-departments__trigger[aria-expanded="true"] .ezy-departments__chevron {
	transform: rotate(180deg);
}

.ezy-departments__chevron { transition: transform var(--ezy-transition); }

/* The catalogue is a flat list of departments, so this is a multi-column
   panel rather than a mega menu -- a mega menu's columns exist to hold each
   parent's children, and with no children they would read as empty space.
   Two columns put every department on screen at once; a single column ran
   past the max-height and scrolled, which is what made a short list feel
   cluttered. `max-height` stays as a safety net for a much larger taxonomy;
   at the current count it never triggers. */
.ezy-departments__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 950;
	display: none;
	grid-template-columns: repeat(2, minmax(190px, 1fr));
	column-gap: 6px;
	width: min(94vw, 620px);
	max-height: 70vh;
	overflow-y: auto;
	padding: 10px;
	margin: 0;
	list-style: none;
	background: var(--ezy-surface);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	box-shadow: var(--ezy-shadow-md);
}

@media (min-width: 1200px) {
	.ezy-departments__panel {
		grid-template-columns: repeat(3, minmax(190px, 1fr));
		width: min(94vw, 880px);
	}
}

/* Must be `grid`, not `block` -- this rule is what reveals the panel, so it
   also decides its formatting context. */
.ezy-departments.is-open .ezy-departments__panel { display: grid; }

.ezy-departments__panel li { position: relative; }

.ezy-departments__panel a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border-radius: var(--ezy-radius-sm);
	color: var(--ezy-ink);
	font-weight: 600;
}

.ezy-departments__panel a:hover {
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
}

.ezy-departments__count {
	flex: none;
	font-size: var(--ezy-text-xs);
	font-weight: 700;
	color: var(--ezy-muted);
	background: var(--ezy-surface-sunken);
	border-radius: var(--ezy-radius-pill);
	padding: 2px 9px;
}

.ezy-departments__panel .children {
	list-style: none;
	margin: 0 0 6px;
	padding: 0 0 0 14px;
	border-left: 1px dashed var(--ezy-line-strong);
	margin-left: 14px;
}

.ezy-departments__panel .children a {
	padding: 6px 12px;
	font-weight: 500;
	font-size: var(--ezy-text-sm);
}

/* Primary menu */
.ezy-nav { min-width: 0; }

.ezy-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ezy-nav__list li { position: relative; }

/* The secondary nav row sat above the search/account row in the type scale
   (15px/600 against a 13px/700 account value), which inverted the header
   hierarchy. It steps down to 14px/500 so the search field stays the largest
   text in the header. The type scale has no 0.875rem step -- it jumps from
   13px to 15px -- so this size is the one literal value here. */
.ezy-nav__list li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	color: var(--ezy-ink);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Colour alone now carries hover; the pill background is gone from both
   states so the row reads quieter than the primary row above it. */
.ezy-nav__list li > a:hover { color: var(--ezy-green-700); }

.ezy-nav__list .current-menu-item > a,
.ezy-nav__list .current-menu-ancestor > a {
	position: relative;
	color: var(--ezy-green-700);
	font-weight: 600;
}

/* Weight and colour separate the current item from a plain link; the rule
   keeps them apart from hover, which changes colour only. Insets match the
   link's horizontal padding so the bar spans exactly the text. */
.ezy-nav__list .current-menu-item > a::after,
.ezy-nav__list .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--ezy-green);
}

.ezy-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 950;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--ezy-surface);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	box-shadow: var(--ezy-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--ezy-transition), transform var(--ezy-transition),
		visibility var(--ezy-transition);
}

.ezy-nav__list li:hover > .sub-menu,
.ezy-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ezy-nav__list .sub-menu .sub-menu { top: 0; left: 100%; }

/* The top row can drop its hover background because it sits on the open
   page; inside a floating panel a colour-only change reads too weak, so the
   dropdown keeps the tinted hover the shared rule used to provide. */
.ezy-nav__list .sub-menu a {
	display: flex;
	width: 100%;
	border-radius: var(--ezy-radius-sm);
	font-weight: 500;
}

.ezy-nav__list .sub-menu a:hover { background: var(--ezy-green-50); }

.ezy-navbar__aside {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--ezy-text-sm);
	font-weight: 600;
	color: var(--ezy-body);
	white-space: nowrap;
}

/* Reads as a status note, not an actionable link. */
.ezy-navbar__aside .ezy-hot {
	color: var(--ezy-body);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

@media (max-width: 991px) {
	.ezy-navbar { display: none; }
	.ezy-header__main { grid-template-columns: auto auto; row-gap: 10px; }
	.ezy-header__search { grid-column: 1 / -1; order: 3; }
	.ezy-header__actions { margin-left: auto; }
	/* The search field already claims its own row here, so a full-size logo
	   would push the sticky header past a third of a phone screen. */
	.ezy-branding img { max-height: 56px; }
}

/* --- Mobile drawer ------------------------------------------------------ */

.ezy-mobile-nav {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 1000;
	width: min(88vw, 360px);
	background: var(--ezy-surface);
	box-shadow: var(--ezy-shadow-md);
	transform: translateX(-100%);
	transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.ezy-mobile-nav.is-open { transform: translateX(0); }

.ezy-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ezy-line);
}

.ezy-mobile-nav__title { margin: 0; font-size: var(--ezy-text-lg); }

.ezy-mobile-nav__close {
	width: 38px;
	height: 38px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-sm);
	background: transparent;
	cursor: pointer;
	color: var(--ezy-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ezy-mobile-nav__body { padding: 14px 12px 40px; }

.ezy-mobile-nav__body ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.ezy-mobile-nav__body li + li { border-top: 1px solid var(--ezy-line); }

.ezy-mobile-nav__body a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 10px;
	color: var(--ezy-ink);
	font-weight: 600;
}

.ezy-mobile-nav__body .sub-menu { margin: 0; padding-left: 16px; }
.ezy-mobile-nav__body .sub-menu a { font-weight: 500; font-size: var(--ezy-text-sm); }

.ezy-mobile-nav__heading {
	margin: 0 0 6px;
	padding: 0 10px;
	font-size: var(--ezy-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ezy-muted);
}

.ezy-overlay {
	position: fixed;
	inset: 0;
	z-index: 990;
	background: rgba(20, 32, 26, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ezy-transition), visibility var(--ezy-transition);
}

.ezy-overlay.is-active { opacity: 1; visibility: visible; }

/* ==========================================================================
   7. PRODUCT CARD (shared by every loop in the theme)
   ========================================================================== */

.ezy-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ezy-products--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ezy-products--compact { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

.ezy-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ezy-surface);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	overflow: hidden;
	transition: border-color var(--ezy-transition), box-shadow var(--ezy-transition),
		transform var(--ezy-transition);
}

.ezy-product-card:hover {
	border-color: var(--ezy-green-300);
	box-shadow: var(--ezy-shadow-md);
	transform: translateY(-3px);
}

.ezy-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--ezy-surface-alt);
	overflow: hidden;
}

.ezy-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ezy-product-card:hover .ezy-product-card__media img { transform: scale(1.06); }

.ezy-product-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ezy-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--ezy-radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.4;
	background: var(--ezy-green);
	color: #fff;
}

.ezy-badge--sale { background: var(--ezy-danger); color: #fff; }
.ezy-badge--priority { background: var(--ezy-yellow); color: var(--ezy-ink); }
.ezy-badge--new { background: var(--ezy-info); color: #fff; }
.ezy-badge--out { background: var(--ezy-muted); color: #fff; }
.ezy-badge--low { background: var(--ezy-yellow-100); color: var(--ezy-yellow-700); }

/* Priority ribbon (hero / featured products) */
.ezy-ribbon {
	position: absolute;
	top: 14px;
	right: -34px;
	z-index: 3;
	width: 132px;
	padding: 5px 0;
	transform: rotate(45deg);
	background: var(--ezy-yellow);
	color: var(--ezy-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 3px 8px rgba(20, 32, 26, 0.16);
}

.ezy-product-card__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ezy-body);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--ezy-transition), transform var(--ezy-transition),
		color var(--ezy-transition);
}

.ezy-product-card:hover .ezy-product-card__wishlist,
.ezy-product-card__wishlist:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.ezy-product-card__wishlist:hover { color: var(--ezy-danger); }
.ezy-product-card__wishlist svg { width: 17px; height: 17px; }

.ezy-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 14px 15px 16px;
}

.ezy-product-card__cat {
	font-size: var(--ezy-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ezy-green);
}

.ezy-product-card__title {
	margin: 0;
	font-size: var(--ezy-text-base);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

.ezy-product-card__title a { color: var(--ezy-ink); }
.ezy-product-card__title a:hover { color: var(--ezy-green); }

.ezy-product-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
}

.ezy-stars {
	position: relative;
	display: inline-block;
	width: 74px;
	height: 13px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='13' viewBox='0 0 74 13'%3E%3Cpath fill='%23e3e9e5' d='M6.5 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L2.4 12l1-4.4-3.4-3 4.6-.5zM21.3 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L17.2 12l1-4.4-3.4-3 4.6-.5zM36.1 0L38 4.1l4.6.5-3.4 3 1 4.4-4.1-2.3L32 12l1-4.4-3.4-3 4.6-.5zM50.9 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L46.8 12l1-4.4-3.4-3 4.6-.5zM65.7 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L61.6 12l1-4.4-3.4-3 4.6-.5z'/%3E%3C/svg%3E");
	flex: none;
}

.ezy-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='13' viewBox='0 0 74 13'%3E%3Cpath fill='%23F7C519' d='M6.5 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L2.4 12l1-4.4-3.4-3 4.6-.5zM21.3 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L17.2 12l1-4.4-3.4-3 4.6-.5zM36.1 0L38 4.1l4.6.5-3.4 3 1 4.4-4.1-2.3L32 12l1-4.4-3.4-3 4.6-.5zM50.9 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L46.8 12l1-4.4-3.4-3 4.6-.5zM65.7 0l1.9 4.1 4.6.5-3.4 3 1 4.4-4.1-2.3L61.6 12l1-4.4-3.4-3 4.6-.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

/* Price + unit pricing */
.ezy-product-card__pricing { margin-top: auto; }

.ezy-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: var(--ezy-text-lg);
	font-weight: 800;
	color: var(--ezy-ink);
}

.ezy-price del {
	font-size: var(--ezy-text-base);
	font-weight: 500;
	color: var(--ezy-muted);
	text-decoration: line-through;
}

.ezy-price ins { text-decoration: none; color: var(--ezy-green-700); }

.ezy-price .amount { color: inherit; }

.ezy-unit-price {
	display: block;
	margin-top: 2px;
	font-size: var(--ezy-text-xs);
	font-weight: 600;
	color: var(--ezy-muted);
}

.ezy-unit-price strong { color: var(--ezy-green-700); font-weight: 700; }

.ezy-product-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--ezy-text-xs);
	font-weight: 600;
}

.ezy-product-card__stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.ezy-stock--in { color: var(--ezy-green); }
.ezy-stock--low { color: var(--ezy-yellow-700); }
.ezy-stock--out { color: var(--ezy-danger); }
.ezy-stock--backorder { color: var(--ezy-info); }

/* Card footer: qty stepper + quick add */
/* Wrapping, not nowrap: the stepper (92px) + gap + the Add button's
   min-content (~82px) needs ~182px, but a 200px grid column only leaves 168px
   of body content. On narrow cards Add drops to its own full-width row rather
   than being clipped. */
.ezy-product-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.ezy-qty {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 40px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface);
	overflow: hidden;
}

.ezy-qty__btn {
	flex: none;
	width: 28px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--ezy-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--ezy-transition), color var(--ezy-transition);
}

.ezy-qty__btn:hover:not(:disabled) { background: var(--ezy-green-50); color: var(--ezy-green-700); }
.ezy-qty__btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Selector must out-specify the generic `input[type="number"]` rule near the
   top of this file (0,1,1). A bare `.ezy-qty__input` is only (0,1,0) and lost,
   so the field inherited width:100% + 14px padding + a 1px border, blew the
   pill out to ~244px and got the plus button clipped by the card's
   `overflow: hidden`. `.ezy-qty input.ezy-qty__input` is (0,2,1) and wins,
   while still sitting below `.ezy-single .cart .ezy-qty__input` (0,3,0). */
.ezy-qty input.ezy-qty__input {
	width: 34px;
	min-width: 0;
	flex: none;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-size: var(--ezy-text-base);
	font-weight: 700;
	color: var(--ezy-ink);
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none;
}

.ezy-qty__input:focus { box-shadow: none; }

.ezy-qty__input::-webkit-outer-spin-button,
.ezy-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ezy-quick-add {
	flex: 1 1 92px;
	min-width: 0;
	height: 40px;
	padding-inline: 14px;
	white-space: nowrap;
	font-size: var(--ezy-text-sm);
}

.ezy-quick-add svg { width: 17px; height: 17px; }

.ezy-quick-add.is-added {
	background: var(--ezy-green-700) !important;
	color: #fff !important;
}

.ezy-product-card.is-out-of-stock .ezy-product-card__media img { opacity: 0.55; }

/* ==========================================================================
   8. SKELETON / LOADING STATES
   ========================================================================== */

.ezy-loading { position: relative; min-height: 200px; }

.ezy-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.72);
	z-index: 5;
	border-radius: var(--ezy-radius);
}

.ezy-loading::before {
	content: "";
	position: absolute;
	top: 60px;
	left: 50%;
	z-index: 6;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid var(--ezy-green-100);
	border-top-color: var(--ezy-green);
	border-radius: 50%;
	animation: ezy-spin 0.8s linear infinite;
}

.ezy-skeleton {
	background: linear-gradient(
		90deg,
		var(--ezy-surface-sunken) 25%,
		#f7faf8 37%,
		var(--ezy-surface-sunken) 63%
	);
	background-size: 400% 100%;
	animation: ezy-shimmer 1.4s ease infinite;
	border-radius: var(--ezy-radius);
}

@keyframes ezy-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.ezy-skeleton-card { height: 320px; }

/* ==========================================================================
   9. HOMEPAGE ZONES
   ========================================================================== */

/* --- 9.1 Priority hero -------------------------------------------------- */

.ezy-hero {
	padding-block: clamp(28px, 4vw, 56px);
	background: linear-gradient(160deg, var(--ezy-green-50) 0%, #ffffff 62%);
}

.ezy-hero__grid {
	display: grid;
	gap: clamp(16px, 2vw, 26px);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.ezy-hero__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezy-hero__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.ezy-hero__grid--3 { grid-template-columns: 1.35fr 1fr 1fr; }
}

.ezy-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	padding: clamp(22px, 2.6vw, 34px);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
	border: 1px solid var(--ezy-line);
	overflow: hidden;
	isolation: isolate;
}

.ezy-hero__grid--3 .ezy-hero__card:first-child { min-height: 380px; }

.ezy-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ezy-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ezy-hero__card:hover .ezy-hero__bg img { transform: scale(1.05); }

.ezy-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Deeper mid/upper stops: hero titles sit over whatever the product photo
	   happens to show, and a bright packet or a busy seed close-up was winning
	   against the old 0.55/0.08 ramp. */
	background: linear-gradient(
		0deg,
		rgba(20, 32, 26, 0.94) 0%,
		rgba(20, 32, 26, 0.8) 38%,
		rgba(20, 32, 26, 0.5) 68%,
		rgba(20, 32, 26, 0.18) 100%
	);
}

.ezy-hero__card--has-image,
.ezy-hero__card--has-image .ezy-hero__title a,
.ezy-hero__card--has-image .ezy-price,
.ezy-hero__card--has-image .ezy-hero__excerpt {
	color: #fff;
}

.ezy-hero__card--has-image .ezy-price del { color: rgba(255, 255, 255, 0.7); }
.ezy-hero__card--has-image .ezy-price ins { color: var(--ezy-yellow); }
.ezy-hero__card--has-image .ezy-unit-price { color: rgba(255, 255, 255, 0.82); }
.ezy-hero__card--has-image .ezy-unit-price strong { color: var(--ezy-yellow); }

/* --- On-dark component overrides -----------------------------------------
   The `--has-image` colour rule above hand-lists individual descendants, so
   any component that sets its own colour keeps its light-background value.
   `.ezy-btn--outline` sets `color: var(--ezy-ink)` = rgb(20,32,26), which is
   the SAME rgb triplet as the scrim's bottom stop rgba(20,32,26,.88) -- the
   label was drawn in the exact colour it sat on and only became legible when
   :hover painted an opaque background. Scoped to `.ezy-deal` too, the theme's
   other dark surface, so the same trap cannot reappear there. */

.ezy-hero__card--has-image .ezy-btn--outline,
.ezy-deal .ezy-btn--outline {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.ezy-hero__card--has-image .ezy-btn--outline:hover,
.ezy-hero__card--has-image .ezy-btn--outline:focus,
.ezy-deal .ezy-btn--outline:hover,
.ezy-deal .ezy-btn--outline:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ezy-ink);
	box-shadow: none;
}

/* Stock line: --ezy-green (#388D60) is too dark against the scrim, so give it
   a translucent chip and a brighter status dot. */
.ezy-hero__card--has-image .ezy-product-card__stock {
	align-self: flex-start;
	padding: 3px 11px;
	border-radius: var(--ezy-radius-pill);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.ezy-hero__card--has-image .ezy-stock--in::before { background: #7ee2a8; }
.ezy-hero__card--has-image .ezy-stock--low::before { background: var(--ezy-yellow); }
.ezy-hero__card--has-image .ezy-stock--out::before { background: #ff9384; }
.ezy-hero__card--has-image .ezy-stock--backorder::before { background: #8ecbff; }

.ezy-hero__card--has-image .ezy-hero__title { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }

.ezy-hero__tag {
	position: absolute;
	top: clamp(18px, 2vw, 26px);
	left: clamp(18px, 2vw, 26px);
	z-index: 1;
}

.ezy-hero__title {
	margin: 0 0 6px;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.ezy-hero__title a { color: inherit; }
.ezy-hero__title a:hover { color: var(--ezy-yellow); }

.ezy-hero__excerpt {
	margin: 0 0 14px;
	font-size: var(--ezy-text-base);
	color: rgba(255, 255, 255, 0.84);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ezy-hero__card:not(.ezy-hero__card--has-image) .ezy-hero__excerpt { color: var(--ezy-body); }

.ezy-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.ezy-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- 9.2 Trust / USP strip ---------------------------------------------- */

.ezy-usp {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding: clamp(18px, 2.4vw, 26px);
	background: var(--ezy-surface);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	box-shadow: var(--ezy-shadow-sm);
}

.ezy-usp__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-inline: 6px;
}

.ezy-usp__icon {
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ezy-radius);
	background: var(--ezy-green-50);
	color: var(--ezy-green);
}

.ezy-usp__icon svg { width: 22px; height: 22px; }
.ezy-usp__title { display: block; font-weight: 700; color: var(--ezy-ink); }
.ezy-usp__text { display: block; font-size: var(--ezy-text-sm); color: var(--ezy-muted); }

/* --- 9.3 Taxonomy grid + live category switcher ------------------------- */

.ezy-taxonomy__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin-bottom: clamp(22px, 3vw, 34px);
}

.ezy-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 12px 16px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
	color: var(--ezy-ink);
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--ezy-text-base);
	transition: border-color var(--ezy-transition), background var(--ezy-transition),
		transform var(--ezy-transition), box-shadow var(--ezy-transition);
}

.ezy-cat-card:hover {
	border-color: var(--ezy-green-300);
	transform: translateY(-3px);
	box-shadow: var(--ezy-shadow);
}

.ezy-cat-card[aria-selected="true"],
.ezy-cat-card.is-active {
	border-color: var(--ezy-green);
	background: var(--ezy-green-50);
	box-shadow: 0 0 0 2px rgba(var(--ezy-green-rgb), 0.18);
}

.ezy-cat-card__thumb {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ezy-surface-sunken);
	display: grid;
	place-items: center;
}

.ezy-cat-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ezy-cat-card__thumb svg { width: 32px; height: 32px; color: var(--ezy-green-300); }

.ezy-cat-card__name {
	font-weight: 700;
	font-size: var(--ezy-text-sm);
	line-height: 1.35;
}

.ezy-cat-card__count {
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
	font-weight: 600;
}

.ezy-taxonomy__results { position: relative; min-height: 120px; }

.ezy-taxonomy__resulthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ezy-line);
}

.ezy-taxonomy__resulthead h3 { margin: 0; font-size: var(--ezy-text-xl); }

/* --- 9.4 Curated grids + AJAX pagination -------------------------------- */

.ezy-shelf { position: relative; }

.ezy-shelf__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ezy-shelf__tab {
	padding: 8px 18px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface);
	color: var(--ezy-body);
	font-family: inherit;
	font-size: var(--ezy-text-sm);
	font-weight: 700;
	cursor: pointer;
	transition: all var(--ezy-transition);
}

.ezy-shelf__tab:hover { border-color: var(--ezy-green-300); color: var(--ezy-green-700); }

.ezy-shelf__tab.is-active {
	background: var(--ezy-green);
	border-color: var(--ezy-green);
	color: #fff;
}

.ezy-shelf__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(22px, 3vw, 34px);
}

.ezy-loadmore[hidden] { display: none !important; }

/* --- 9.5 Deal of the month ---------------------------------------------- */

.ezy-deal {
	background: linear-gradient(135deg, var(--ezy-green-800) 0%, var(--ezy-green) 100%);
	border-radius: var(--ezy-radius-lg);
	padding: clamp(26px, 3.4vw, 46px);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.ezy-deal::before {
	content: "";
	position: absolute;
	top: -80px;
	right: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(var(--ezy-yellow-rgb), 0.16);
}

.ezy-deal > * { position: relative; z-index: 1; }

.ezy-deal .ezy-section-title,
.ezy-deal .ezy-section-subtitle { color: #fff; }

.ezy-deal .ezy-section-subtitle { color: rgba(255, 255, 255, 0.8); }

.ezy-deal .ezy-eyebrow {
	background: var(--ezy-yellow);
	color: var(--ezy-ink);
}

/* Countdown */
.ezy-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.ezy-countdown__unit {
	min-width: 66px;
	padding: 10px 12px;
	border-radius: var(--ezy-radius);
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
	text-align: center;
	line-height: 1.2;
}

.ezy-countdown__value {
	display: block;
	font-size: var(--ezy-text-xl);
	font-weight: 800;
	color: var(--ezy-yellow);
	font-variant-numeric: tabular-nums;
}

.ezy-countdown__label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

/* Special pricing card used inside the deal zone */
.ezy-deal .ezy-product-card { border-color: transparent; }

.ezy-deal-card__save {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 3px 10px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-yellow-100);
	color: var(--ezy-yellow-700);
	font-size: var(--ezy-text-xs);
	font-weight: 800;
}

.ezy-deal-card__bar {
	margin-top: 8px;
	height: 6px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface-sunken);
	overflow: hidden;
}

.ezy-deal-card__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ezy-yellow) 0%, var(--ezy-green) 100%);
}

.ezy-deal-card__sold {
	margin-top: 6px;
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
	font-weight: 600;
}

/* --- 9.6 CTA banner ----------------------------------------------------- */

.ezy-cta {
	display: grid;
	gap: 24px;
	align-items: center;
	padding: clamp(26px, 3.4vw, 48px);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-yellow-50);
	border: 1px solid var(--ezy-yellow-300);
}

@media (min-width: 860px) {
	.ezy-cta { grid-template-columns: 1.2fr 1fr; }
}

.ezy-cta__title { margin: 0 0 8px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.ezy-cta__text { margin: 0; color: var(--ezy-body); }

.ezy-cta__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ezy-cta__form input[type="email"] { flex: 1 1 220px; border-radius: var(--ezy-radius-pill); padding-inline: 20px; }

/* ==========================================================================
   10. FAQ TEMPLATE
   ========================================================================== */

.ezy-faq__layout {
	display: grid;
	gap: clamp(24px, 3vw, 44px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 992px) {
	.ezy-faq__layout { grid-template-columns: 260px minmax(0, 1fr); }
}

.ezy-faq__nav {
	position: sticky;
	top: calc(var(--ezy-sticky-offset) + 20px);
	padding: 18px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface-alt);
}

.ezy-faq__nav-title {
	margin: 0 0 12px;
	font-size: var(--ezy-text-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ezy-muted);
}

.ezy-faq__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.ezy-faq__nav button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--ezy-radius-sm);
	background: transparent;
	color: var(--ezy-body);
	font-family: inherit;
	font-size: var(--ezy-text-base);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background var(--ezy-transition), color var(--ezy-transition);
}

.ezy-faq__nav button:hover { background: var(--ezy-green-50); color: var(--ezy-green-700); }

.ezy-faq__nav button.is-active {
	background: var(--ezy-green);
	color: #fff;
}

.ezy-faq__nav button.is-active .ezy-faq__nav-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.ezy-faq__nav-count {
	flex: none;
	padding: 1px 9px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface-sunken);
	font-size: var(--ezy-text-xs);
	font-weight: 700;
	color: var(--ezy-muted);
}

.ezy-faq__search { margin-bottom: 22px; position: relative; }

.ezy-faq__search input {
	padding-left: 44px;
	border-radius: var(--ezy-radius-pill);
	height: 50px;
}

.ezy-faq__search svg {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--ezy-muted);
	pointer-events: none;
}

.ezy-faq__group + .ezy-faq__group { margin-top: 34px; }

.ezy-faq__group-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: var(--ezy-text-xl);
}

.ezy-faq__group-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ezy-line);
}

.ezy-accordion { display: grid; gap: 10px; }

.ezy-accordion__item {
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface);
	overflow: hidden;
	transition: border-color var(--ezy-transition), box-shadow var(--ezy-transition);
}

.ezy-accordion__item.is-open {
	border-color: var(--ezy-green-300);
	box-shadow: var(--ezy-shadow-sm);
}

.ezy-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border: 0;
	background: transparent;
	color: var(--ezy-ink);
	font-family: inherit;
	font-size: var(--ezy-text-md);
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.ezy-accordion__trigger:hover { color: var(--ezy-green-700); }

.ezy-accordion__icon {
	flex: none;
	width: 26px;
	height: 26px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
	transition: transform var(--ezy-transition), background var(--ezy-transition);
}

.ezy-accordion__item.is-open .ezy-accordion__icon {
	transform: rotate(45deg);
	background: var(--ezy-green);
	color: #fff;
}

.ezy-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ezy-accordion__item.is-open .ezy-accordion__panel { grid-template-rows: 1fr; }

.ezy-accordion__panel > div { overflow: hidden; }

.ezy-accordion__content {
	padding: 0 20px 18px;
	color: var(--ezy-body);
}

.ezy-accordion__content > *:last-child { margin-bottom: 0; }

.ezy-faq__linked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--ezy-line-strong);
	font-size: var(--ezy-text-sm);
}

.ezy-faq__linked-label { font-weight: 700; color: var(--ezy-muted); }

.ezy-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
	font-size: var(--ezy-text-xs);
	font-weight: 700;
}

a.ezy-chip:hover { background: var(--ezy-green); color: #fff; }

.ezy-faq__empty,
.ezy-empty {
	padding: 44px 24px;
	text-align: center;
	border: 1px dashed var(--ezy-line-strong);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface-alt);
	color: var(--ezy-muted);
}

.ezy-empty__title { margin: 0 0 6px; color: var(--ezy-ink); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.ezy-site-footer {
	margin-top: var(--ezy-section-gap);
	background: var(--ezy-ink);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--ezy-text-base);
}

.ezy-footer__cta {
	background: var(--ezy-green);
	color: #fff;
}

.ezy-footer__cta-inner {
	display: grid;
	gap: 20px;
	align-items: center;
	padding-block: clamp(28px, 3.4vw, 44px);
}

@media (min-width: 860px) {
	.ezy-footer__cta-inner { grid-template-columns: 1fr 1fr; }
}

.ezy-footer__cta h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.ezy-footer__cta p { margin: 0; color: rgba(255, 255, 255, 0.82); }

.ezy-footer__widgets {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-block: clamp(40px, 5vw, 64px);
}

.ezy-site-footer h2,
.ezy-site-footer h3,
.ezy-site-footer .widget-title {
	color: #fff;
	font-size: var(--ezy-text-md);
	margin-bottom: 16px;
	letter-spacing: 0.01em;
}

.ezy-site-footer a { color: rgba(255, 255, 255, 0.78); }
.ezy-site-footer a:hover { color: var(--ezy-yellow); }

.ezy-site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.ezy-footer__about p { max-width: 34ch; }

.ezy-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ezy-footer__contact svg { width: 18px; height: 18px; flex: none; color: var(--ezy-yellow); margin-top: 3px; }

.ezy-social { display: flex; gap: 10px; margin-top: 18px; }

.ezy-social a {
	width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
	transition: background var(--ezy-transition), transform var(--ezy-transition);
}

.ezy-social a:hover { background: var(--ezy-green); transform: translateY(-2px); }
.ezy-social svg { width: 17px; height: 17px; }

.ezy-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--ezy-text-sm);
}

.ezy-footer__bottom p { margin: 0; }

.ezy-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ezy-back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 880;
	width: 46px;
	height: 46px;
	display: inline-grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--ezy-green);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--ezy-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all var(--ezy-transition);
}

.ezy-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ezy-back-to-top:hover { background: var(--ezy-green-700); }
.ezy-back-to-top svg { width: 20px; height: 20px; }

/* Mobile sticky bottom bar */
.ezy-mobile-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 870;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--ezy-surface);
	border-top: 1px solid var(--ezy-line);
	box-shadow: 0 -3px 14px rgba(20, 32, 26, 0.07);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.ezy-mobile-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 4px;
	color: var(--ezy-body);
	font-size: 11px;
	font-weight: 600;
}

.ezy-mobile-bar a.is-active { color: var(--ezy-green); }
.ezy-mobile-bar svg { width: 21px; height: 21px; }

@media (min-width: 768px) {
	.ezy-mobile-bar { display: none; }
}

@media (max-width: 767px) {
	body { padding-bottom: 62px; }
	.ezy-back-to-top { bottom: 74px; }
}

/* ==========================================================================
   12. BLOG / PAGES / COMMENTS
   ========================================================================== */

.ezy-page-header {
	padding-block: clamp(26px, 3.4vw, 46px);
	background: var(--ezy-surface-alt);
	border-bottom: 1px solid var(--ezy-line);
}

/* Collapsed band: `ezyhut_page_header_class()` adds `--bare` when page titles and
   breadcrumbs are both switched off, leaving nothing visible inside. Without this
   the band would still paint an empty strip. The heading stays in the DOM as
   `.screen-reader-text`, which is absolutely positioned and adds no height. */
.ezy-page-header--bare {
	padding-block: 0;
	background: none;
	border-bottom: 0;
}

.ezy-page-header__title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.ezy-page-header__desc { margin: 8px 0 0; color: var(--ezy-muted); max-width: 70ch; }

.ezy-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: var(--ezy-text-sm);
	color: var(--ezy-muted);
}

.ezy-breadcrumb a { color: var(--ezy-muted); }
.ezy-breadcrumb a:hover { color: var(--ezy-green); }
.ezy-breadcrumb .sep { opacity: 0.5; }

.ezy-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
}

.ezy-post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
	overflow: hidden;
	transition: box-shadow var(--ezy-transition), transform var(--ezy-transition);
}

.ezy-post-card:hover { box-shadow: var(--ezy-shadow-md); transform: translateY(-3px); }

.ezy-post-card__media { aspect-ratio: 16 / 10; background: var(--ezy-surface-alt); overflow: hidden; }
.ezy-post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ezy-post-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.ezy-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
	font-weight: 600;
}

.ezy-post-card__title { margin: 0; font-size: var(--ezy-text-lg); }
.ezy-post-card__title a { color: var(--ezy-ink); }
.ezy-post-card__title a:hover { color: var(--ezy-green); }
.ezy-post-card__excerpt { margin: 0; font-size: var(--ezy-text-base); }
.ezy-post-card__more { margin-top: auto; padding-top: 8px; font-weight: 700; }

.ezy-entry { max-width: 100%; }
.ezy-entry__content > *:last-child { margin-bottom: 0; }

.ezy-entry__content h2,
.ezy-entry__content h3,
.ezy-entry__content h4 { margin-top: 1.6em; }

.ezy-entry__thumb { margin-bottom: 26px; border-radius: var(--ezy-radius-lg); overflow: hidden; }

.ezy-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: clamp(28px, 3.4vw, 44px);
}

.ezy-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-sm);
	color: var(--ezy-ink);
	font-weight: 700;
	transition: all var(--ezy-transition);
}

.ezy-pagination .page-numbers:hover {
	border-color: var(--ezy-green);
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
}

.ezy-pagination .page-numbers.current {
	background: var(--ezy-green);
	border-color: var(--ezy-green);
	color: #fff;
}

.ezy-pagination .page-numbers.dots { border-color: transparent; }

/* Sidebar widgets */
.ezy-sidebar { display: grid; gap: 22px; }

.ezy-widget {
	padding: 20px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
}

.ezy-widget .widget-title,
.ezy-widget h2 {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ezy-line);
	font-size: var(--ezy-text-md);
}

.ezy-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ezy-widget ul ul { margin-top: 9px; padding-left: 14px; }
.ezy-widget li a { color: var(--ezy-body); font-weight: 500; }
.ezy-widget li a:hover { color: var(--ezy-green); }

/* Comments */
.ezy-comments { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--ezy-line); }
.ezy-comments__title { margin-bottom: 24px; }
.ezy-comments ol.comment-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 20px; }
.ezy-comments ol.children { list-style: none; margin: 20px 0 0; padding-left: clamp(16px, 3vw, 42px); display: grid; gap: 20px; }

.ezy-comments .comment-body {
	padding: 20px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface-alt);
}

.ezy-comments .comment-author img { border-radius: 50%; display: inline-block; }
.ezy-comments .comment-meta { font-size: var(--ezy-text-sm); color: var(--ezy-muted); margin-bottom: 8px; }
.ezy-comments .comment-reply-link { font-weight: 700; font-size: var(--ezy-text-sm); }

.comment-form { display: grid; gap: 14px; }
.comment-form p { margin: 0; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.comment-form .comment-form-cookies-consent input { width: auto; }

/* ==========================================================================
   13. GUTENBERG BLOCK ALIGNMENT SUPPORT
   ========================================================================== */

.ezy-entry__content > *,
.ezy-block-canvas > * {
	max-width: var(--ezy-content-width, 780px);
	margin-inline: auto;
}

.ezy-entry__content > .alignwide,
.ezy-block-canvas > .alignwide {
	max-width: var(--ezy-wide-width, 1180px);
}

.ezy-entry__content > .alignfull,
.ezy-block-canvas > .alignfull {
	max-width: none;
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--ezy-gutter);
}

.alignleft {
	float: left;
	margin: 0.4em 1.6em 1.2em 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 0.4em 0 1.2em 1.6em;
	max-width: 50%;
}

.aligncenter { margin-inline: auto; text-align: center; }

.wp-caption { max-width: 100%; }

.wp-caption-text,
.wp-block-image figcaption {
	font-size: var(--ezy-text-sm);
	color: var(--ezy-muted);
	text-align: center;
	margin-top: 8px;
}

.wp-block-button__link { border-radius: var(--ezy-radius-pill); }

.wp-block-quote { border-left-color: var(--ezy-yellow); }

.sticky .ezy-post-card { border-color: var(--ezy-yellow); }

/* Custom block styles registered in inc/blocks.php */
.is-style-ezy-brand-card {
	padding: clamp(20px, 2.6vw, 32px);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-green-50);
	border: 1px solid var(--ezy-green-100);
}

.is-style-ezy-accent-heading {
	position: relative;
	padding-bottom: 14px;
}

.is-style-ezy-accent-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-yellow);
}

.is-style-ezy-pill-button .wp-block-button__link,
.wp-block-button.is-style-ezy-pill-button .wp-block-button__link {
	border-radius: var(--ezy-radius-pill);
	padding-inline: 30px;
}

/* ==========================================================================
   14. TOAST NOTIFICATIONS (AJAX feedback)
   ========================================================================== */

.ezy-toasts {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1200;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(92vw, 340px);
	pointer-events: none;
}

@media (max-width: 767px) {
	.ezy-toasts { bottom: 74px; }
}

.ezy-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface);
	border: 1px solid var(--ezy-line);
	border-left: 4px solid var(--ezy-green);
	box-shadow: var(--ezy-shadow-md);
	color: var(--ezy-ink);
	font-size: var(--ezy-text-base);
	font-weight: 600;
	pointer-events: auto;
	animation: ezy-toast-in 260ms cubic-bezier(0.34, 1.3, 0.64, 1);
}

.ezy-toast--error { border-left-color: var(--ezy-danger); }
.ezy-toast--info { border-left-color: var(--ezy-yellow); }
.ezy-toast.is-leaving { animation: ezy-toast-out 200ms ease forwards; }

.ezy-toast__icon { flex: none; width: 20px; height: 20px; color: var(--ezy-green); }
.ezy-toast--error .ezy-toast__icon { color: var(--ezy-danger); }
.ezy-toast--info .ezy-toast__icon { color: var(--ezy-yellow-700); }
.ezy-toast__body { flex: 1; min-width: 0; }
.ezy-toast__link { display: block; margin-top: 3px; font-size: var(--ezy-text-sm); font-weight: 700; }

@keyframes ezy-toast-in {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes ezy-toast-out {
	to { opacity: 0; transform: translateX(24px); }
}

/* ==========================================================================
   15. PRINT
   ========================================================================== */

@media print {
	.ezy-site-header,
	.ezy-site-footer,
	.ezy-mobile-bar,
	.ezy-back-to-top,
	.ezy-toasts,
	.ezy-sidebar,
	.ezy-shop-filters {
		display: none !important;
	}

	body { color: #000; background: #fff; }
	a { color: #000; text-decoration: underline; }
}