/**
 * Ezyhut Grocery — WooCommerce stylesheet.
 *
 * Loaded only on WooCommerce screens (shop, product, cart, checkout, account)
 * so the marketing pages stay light. All colours inherit the brand tokens
 * declared in style.css.
 *
 * @package Ezyhut_Grocery
 */

/* ==========================================================================
   1. SHOP LAYOUT
   ========================================================================== */

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

@media (min-width: 1024px) {
	.ezy-shop { grid-template-columns: 286px minmax(0, 1fr); }
	.ezy-shop--sidebar-right { grid-template-columns: minmax(0, 1fr) 286px; }
	.ezy-shop--sidebar-right .ezy-shop__aside { order: 2; }
}

.ezy-shop__main { min-width: 0; }

/* --- Toolbar ------------------------------------------------------------ */

.ezy-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 18px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface-alt);
}

.ezy-shop__count {
	margin: 0;
	font-size: var(--ezy-text-sm);
	font-weight: 600;
	color: var(--ezy-body);
}

.ezy-shop__count strong { color: var(--ezy-ink); }

.ezy-shop__toolbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.ezy-shop__orderby {
	height: 40px;
	padding: 0 34px 0 14px;
	border-radius: var(--ezy-radius-pill);
	border-color: var(--ezy-line-strong);
	background-color: var(--ezy-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5A52' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px;
	appearance: none;
	-webkit-appearance: none;
	font-size: var(--ezy-text-sm);
	font-weight: 600;
	width: auto;
	min-width: 200px;
	cursor: pointer;
}

.ezy-shop__view {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface);
}

.ezy-shop__view button {
	width: 34px;
	height: 32px;
	border: 0;
	border-radius: var(--ezy-radius-pill);
	background: transparent;
	color: var(--ezy-muted);
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	transition: background var(--ezy-transition), color var(--ezy-transition);
}

.ezy-shop__view button.is-active { background: var(--ezy-green); color: #fff; }
.ezy-shop__view button svg { width: 16px; height: 16px; }

.ezy-shop__filter-toggle { display: inline-flex; }

@media (min-width: 1024px) {
	.ezy-shop__filter-toggle { display: none; }
}

/* ==========================================================================
   2. LAYERED FILTER SIDEBAR
   ========================================================================== */

.ezy-shop__aside { min-width: 0; }

/* Sticky has to live on the GRID ITEM, not on the inner form.
   `.ezy-shop-filters` and its parent `.ezy-shop__aside` are the same height
   (the parent wraps it tightly), and a sticky box can only travel inside its
   own containing block -- so with sticky on the form there was zero room and
   it never engaged at all. `.ezy-shop__aside` is a grid item, so its
   containing block is the whole grid row (~3400px on a full shop page). */
@media (min-width: 1024px) {
	.ezy-shop__aside {
		position: sticky;
		top: calc(var(--ezy-sticky-offset) + 16px);
	}

	.admin-bar .ezy-shop__aside { top: calc(var(--ezy-sticky-offset) + 48px); }
}

.ezy-shop-filters {
	max-height: calc(100vh - var(--ezy-sticky-offset) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--ezy-line-strong) transparent;
}

.ezy-shop-filters::-webkit-scrollbar { width: 6px; }
.ezy-shop-filters::-webkit-scrollbar-thumb {
	background: var(--ezy-line-strong);
	border-radius: var(--ezy-radius-pill);
}


.ezy-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

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

.ezy-filters__close {
	display: none;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-sm);
	background: transparent;
	color: var(--ezy-ink);
	cursor: pointer;
	place-items: center;
}

/* Active chips */
.ezy-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 16px;
}

.ezy-filters__active:empty { display: none; }

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

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

.ezy-filter-chip__x {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgba(var(--ezy-green-rgb), 0.18);
	font-size: 13px;
	line-height: 1;
}

.ezy-filter-chip:hover .ezy-filter-chip__x { background: rgba(255, 255, 255, 0.28); }

.ezy-filters__clear {
	border: 0;
	background: transparent;
	color: var(--ezy-danger);
	font-family: inherit;
	font-size: var(--ezy-text-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	padding: 4px 6px;
}

.ezy-filters__clear:hover { text-decoration: underline; }

/* Filter group (details/summary — works without JS) */
.ezy-filter-group {
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface);
	margin-bottom: 10px;
	overflow: hidden;
}

.ezy-filter-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	color: var(--ezy-ink);
	font-size: var(--ezy-text-base);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.ezy-filter-group > summary::-webkit-details-marker { display: none; }

.ezy-filter-group > summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--ezy-muted);
	border-bottom: 2px solid var(--ezy-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--ezy-transition);
}

.ezy-filter-group[open] > summary::after {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.ezy-filter-group[open] > summary { border-bottom: 1px solid var(--ezy-line); }

.ezy-filter-group__body {
	padding: 14px 16px 16px;
	max-height: 268px;
	overflow-y: auto;
}

.ezy-filter-group__body::-webkit-scrollbar { width: 5px; }
.ezy-filter-group__body::-webkit-scrollbar-thumb {
	background: var(--ezy-line-strong);
	border-radius: var(--ezy-radius-pill);
}

/* Checkbox / radio rows */
.ezy-filter-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }

.ezy-filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var(--ezy-radius-sm);
	cursor: pointer;
	font-size: var(--ezy-text-base);
	font-weight: 500;
	color: var(--ezy-body);
	transition: background var(--ezy-transition), color var(--ezy-transition);
}

.ezy-filter-option:hover { background: var(--ezy-green-50); color: var(--ezy-ink); }

.ezy-filter-option input[type="checkbox"],
.ezy-filter-option input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: 5px;
	background: var(--ezy-surface);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: relative;
	transition: background var(--ezy-transition), border-color var(--ezy-transition);
}

.ezy-filter-option input[type="radio"] { border-radius: 50%; }

.ezy-filter-option input:checked {
	background: var(--ezy-green);
	border-color: var(--ezy-green);
}

.ezy-filter-option input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(42deg);
}

.ezy-filter-option input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #fff;
}

.ezy-filter-option__label { flex: 1; min-width: 0; }

.ezy-filter-option__count {
	flex: none;
	font-size: var(--ezy-text-xs);
	font-weight: 700;
	color: var(--ezy-muted);
}

.ezy-filter-option input:disabled { opacity: 0.4; cursor: not-allowed; }
.ezy-filter-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Swatches (colour / size attributes) */
.ezy-swatches { display: flex; flex-wrap: wrap; gap: 7px; }

.ezy-swatch {
	min-width: 40px;
	padding: 6px 12px;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-sm);
	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-swatch:hover { border-color: var(--ezy-green-300); }

.ezy-swatch[aria-pressed="true"] {
	border-color: var(--ezy-green);
	background: var(--ezy-green);
	color: #fff;
}

/* Price range slider */
.ezy-price-filter { display: grid; gap: 14px; }

.ezy-price-filter__inputs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
}

.ezy-price-filter__inputs span { color: var(--ezy-muted); font-weight: 700; }

.ezy-price-filter__inputs input {
	padding: 8px 10px;
	text-align: center;
	font-weight: 700;
	font-size: var(--ezy-text-sm);
}

.ezy-range {
	position: relative;
	height: 26px;
	display: flex;
	align-items: center;
}

.ezy-range__track {
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface-sunken);
}

.ezy-range__fill {
	position: absolute;
	height: 4px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-green);
}

.ezy-range input[type="range"] {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	box-shadow: none;
}

.ezy-range input[type="range"]:focus { box-shadow: none; outline: none; }

.ezy-range input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ezy-surface);
	border: 3px solid var(--ezy-green);
	box-shadow: var(--ezy-shadow-sm);
	cursor: grab;
}

.ezy-range input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ezy-surface);
	border: 3px solid var(--ezy-green);
	box-shadow: var(--ezy-shadow-sm);
	cursor: grab;
}

.ezy-range input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(var(--ezy-green-rgb), 0.24);
}

/* Star-rating filter rows */
.ezy-rating-option { display: flex; align-items: center; gap: 8px; }
.ezy-rating-option .ezy-stars { width: 74px; }

/* Mobile drawer behaviour */
@media (max-width: 1023px) {
	.ezy-shop__aside {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1000;
		width: min(90vw, 340px);
		padding: 18px;
		background: var(--ezy-surface);
		box-shadow: var(--ezy-shadow-md);
		transform: translateX(-100%);
		transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
		overflow-y: auto;
	}

	.ezy-shop__aside.is-open { transform: translateX(0); }
	.ezy-shop-filters { position: static; max-height: none; overflow: visible; }
	.ezy-filters__close { display: grid; }
}

/* ==========================================================================
   3. PRODUCT GRID / LIST VIEW
   ========================================================================== */

.ezy-shop__results { position: relative; min-height: 300px; }

.ezy-shop__grid.is-list { grid-template-columns: minmax(0, 1fr); }

.ezy-shop__grid.is-list .ezy-product-card {
	flex-direction: row;
	align-items: stretch;
}

.ezy-shop__grid.is-list .ezy-product-card__media {
	flex: 0 0 min(34%, 220px);
	aspect-ratio: auto;
}

.ezy-shop__grid.is-list .ezy-product-card__body { padding: 20px 24px; }

.ezy-shop__grid.is-list .ezy-product-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--ezy-text-sm);
	color: var(--ezy-muted);
	margin: 0;
}

.ezy-shop__grid:not(.is-list) .ezy-product-card__excerpt { display: none; }

@media (max-width: 560px) {
	.ezy-shop__grid.is-list .ezy-product-card { flex-direction: column; }
	.ezy-shop__grid.is-list .ezy-product-card__media { flex: none; aspect-ratio: 1 / 1; }
}

/* Unit-price emphasis inside archive cards */
.ezy-unit-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.ezy-unit-metric {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface-sunken);
	font-size: 11px;
	font-weight: 700;
	color: var(--ezy-body);
}

.ezy-unit-metric--primary { background: var(--ezy-green-50); color: var(--ezy-green-700); }

/* ==========================================================================
   4. SINGLE PRODUCT
   ========================================================================== */

.ezy-single { padding-block: clamp(22px, 3vw, 38px); }

.ezy-single__top {
	display: grid;
	gap: clamp(24px, 3.4vw, 52px);
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: clamp(34px, 4vw, 56px);
	/* Without this the columns stretch to the row height, which means the
	   sticky gallery below fills its own containing block and can never
	   travel. `start` makes both columns content-height so the shorter one
	   (usually the gallery) has somewhere to stick. */
	align-items: start;
}

@media (min-width: 900px) {
	.ezy-single__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* --- Gallery ------------------------------------------------------------ */

.ezy-gallery { position: sticky; top: calc(var(--ezy-sticky-offset) + 16px); }

@media (max-width: 899px) {
	.ezy-gallery { position: static; }
}

.ezy-gallery__stage {
	position: relative;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface-alt);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.ezy-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ezy-gallery__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.ezy-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 10px;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}

.ezy-gallery__thumb {
	padding: 0;
	border: 1.5px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface-alt);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	transition: border-color var(--ezy-transition);
}

.ezy-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ezy-gallery__thumb:hover { border-color: var(--ezy-green-300); }
.ezy-gallery__thumb[aria-current="true"] { border-color: var(--ezy-green); }

/* --- Summary ------------------------------------------------------------ */

.ezy-single__summary { display: flex; flex-direction: column; gap: 14px; }

.ezy-single__cat {
	font-size: var(--ezy-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ezy-green);
}

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

.ezy-single__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ezy-line);
	font-size: var(--ezy-text-sm);
	color: var(--ezy-muted);
}

.ezy-single__meta-row .ezy-product-card__rating { font-size: var(--ezy-text-sm); }

.ezy-single__price .ezy-price { font-size: var(--ezy-text-3xl); }

.ezy-single__savings {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-yellow-100);
	color: var(--ezy-yellow-700);
	font-size: var(--ezy-text-sm);
	font-weight: 800;
}

.ezy-single__excerpt { color: var(--ezy-body); margin: 0; }
.ezy-single__excerpt > *:last-child { margin-bottom: 0; }

/* Stock & unit conversion panel */
.ezy-spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--ezy-line);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	overflow: hidden;
}

.ezy-spec {
	padding: 12px 15px;
	background: var(--ezy-surface);
}

.ezy-spec__label {
	display: block;
	font-size: var(--ezy-text-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ezy-muted);
	margin-bottom: 3px;
}

.ezy-spec__value { display: block; font-weight: 700; color: var(--ezy-ink); }

.ezy-conversions {
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border-radius: var(--ezy-radius);
	background: var(--ezy-green-50);
	border: 1px solid var(--ezy-green-100);
}

.ezy-conversions__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ezy-text-xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ezy-green-700);
}

.ezy-conversions__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ezy-conversions__list li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: var(--ezy-text-sm);
	color: var(--ezy-body);
}

.ezy-conversions__list strong { color: var(--ezy-ink); font-weight: 800; }

/* Stock meter */
.ezy-stock-meter { display: grid; gap: 6px; }

.ezy-stock-meter__bar {
	height: 7px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-surface-sunken);
	overflow: hidden;
}

.ezy-stock-meter__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ezy-green);
	transition: width 400ms ease;
}

.ezy-stock-meter.is-low .ezy-stock-meter__bar span { background: var(--ezy-yellow); }

.ezy-stock-meter__text { font-size: var(--ezy-text-sm); font-weight: 600; }

/* Add-to-cart block */
.ezy-single .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.ezy-single .cart .quantity { margin: 0; }

.ezy-single .cart .ezy-qty { height: 50px; }
.ezy-single .cart .ezy-qty__btn { width: 42px; font-size: 20px; }
.ezy-single .cart .ezy-qty__input { width: 52px; font-size: var(--ezy-text-md); }

.ezy-single .cart .single_add_to_cart_button {
	flex: 1 1 220px;
	height: 50px;
	font-size: var(--ezy-text-md);
}

.ezy-single__buynow { flex: 1 1 180px; height: 50px; }

.ezy-single .variations { width: 100%; margin: 0 0 6px; }

.ezy-single .variations tr { display: grid; gap: 6px; margin-bottom: 12px; }
.ezy-single .variations th,
.ezy-single .variations td { border: 0; padding: 0; }

.ezy-single .variations label { font-size: var(--ezy-text-sm); }

.ezy-single .woocommerce-variation-price { margin-bottom: 12px; }
.ezy-single .reset_variations { font-size: var(--ezy-text-sm); font-weight: 700; }

.ezy-single__metafoot {
	display: grid;
	gap: 6px;
	font-size: var(--ezy-text-sm);
	color: var(--ezy-muted);
}

.ezy-single__metafoot a { font-weight: 600; }

/* --- Tabs --------------------------------------------------------------- */

.ezy-tabs { margin-bottom: clamp(34px, 4vw, 56px); }

.ezy-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 0 0 2px;
	list-style: none;
	border-bottom: 1px solid var(--ezy-line);
}

.ezy-tabs__nav li { margin: 0; }

.ezy-tabs__nav a,
.ezy-tabs__nav button {
	display: inline-block;
	padding: 12px 20px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--ezy-muted);
	font-family: inherit;
	font-size: var(--ezy-text-md);
	font-weight: 700;
	cursor: pointer;
	transition: color var(--ezy-transition), border-color var(--ezy-transition);
}

.ezy-tabs__nav a:hover,
.ezy-tabs__nav button:hover { color: var(--ezy-ink); }

.ezy-tabs__nav .is-active a,
.ezy-tabs__nav button.is-active,
.ezy-tabs__nav li.active a {
	color: var(--ezy-green-700);
	border-bottom-color: var(--ezy-green);
}

.ezy-tabs__panel[hidden] { display: none; }
.ezy-tabs__panel > h2:first-child { display: none; }
.ezy-tabs__panel > *:last-child { margin-bottom: 0; }

.ezy-tabs__panel .shop_attributes th { width: 220px; }

/* Reviews inside tabs */
.ezy-tabs__panel #reviews .commentlist {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.ezy-tabs__panel #reviews .comment_container {
	display: flex;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface-alt);
}

.ezy-tabs__panel #reviews .comment_container img { border-radius: 50%; flex: none; }
.ezy-tabs__panel #reviews .meta { margin-bottom: 6px; font-size: var(--ezy-text-sm); }

/* --- Upsells / related -------------------------------------------------- */

.ezy-related { margin-bottom: clamp(28px, 3.4vw, 48px); }

/* ==========================================================================
   5. WOOCOMMERCE CORE OVERRIDES
   ========================================================================== */

/* WooCommerce's `woocommerce-layout.css` still lays the product page out with
   floats -- `div.product div.summary { float: right; width: 48% }` -- and the
   summary keeps the `summary` class for core's JS and hooks, so that rule
   matches. This theme uses a grid (`.ezy-single__top`) where the track already
   sets the column width, and a percentage on a grid item resolves against the
   grid *area*, so the 48% halves the summary a second time: ~23% of the row at
   >=900px, with the remainder left as dead space. Between 769px and 899px the
   grid is single-column and the same rule pins the summary to 48% of the full
   width; below 769px `woocommerce-smallscreen.css` already resets it to 100%.
   `float` does not apply to grid items, so only the width needs undoing.
   Core's selector is (0,3,2); this is (0,4,2) and wins on specificity rather
   than on this file happening to load later. The `#content`-scoped variant
   core also ships is (1,3,2), but no `#content` wrapper exists in this theme. */
.woocommerce div.product div.summary.ezy-single__summary {
	width: 100%;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--ezy-green-100);
	border-left: 4px solid var(--ezy-green);
	border-radius: var(--ezy-radius);
	background: var(--ezy-green-50);
	color: var(--ezy-ink);
	font-weight: 600;
	list-style: none;
}

.woocommerce-info {
	border-color: var(--ezy-yellow-300);
	border-left-color: var(--ezy-yellow);
	background: var(--ezy-yellow-50);
}

.woocommerce-error {
	border-color: #f3cdc9;
	border-left-color: var(--ezy-danger);
	background: var(--ezy-danger-bg);
	color: #7e2119;
	flex-direction: column;
	align-items: flex-start;
}

/* WooCommerce prints these notice icons with its legacy icon font: a glyph
   absolutely positioned at `left: 1.5em`, which only works because core also
   sets `padding: 1em 2em 1em 3.5em` on the notice to reserve a gutter for it.
   The rule above replaces that padding with `14px 18px`, so the gutter no
   longer exists and the glyph was landing on top of the first word -- and its
   hard-coded #1e85be fought the themed panel it sits in.

   Swap the font glyph for a themed mask icon that is a real flex item, so the
   notice's own `gap` places it and it takes a palette colour. Masking rather
   than embedding a coloured SVG keeps a single asset per shape and lets
   `background-color` do the theming. */
.woocommerce-message::before,
.woocommerce-info::before {
	content: "";
	position: static;
	flex: none;
	width: 20px;
	height: 20px;
	font: inherit;
	background-color: var(--ezy-green);
	-webkit-mask: var(--ezy-notice-icon) center / 20px 20px no-repeat;
	mask: var(--ezy-notice-icon) center / 20px 20px no-repeat;
	--ezy-notice-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m8.2 12.4 2.6 2.5 5-5.3'/></svg>");
}

.woocommerce-info::before {
	background-color: var(--ezy-yellow-700);
	--ezy-notice-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11.2v5'/><path d='M12 7.7h.01'/></svg>");
}

/* The error notice stacks its <li> messages in a column, which leaves no row
   for an icon to sit in; its red border and text colour already carry the
   meaning. Just stop core's stray absolute glyph from overlapping the text. */
.woocommerce-error::before { content: none; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { margin-left: auto; }

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 14px;
	font-size: var(--ezy-text-sm);
	color: var(--ezy-muted);
}

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

.woocommerce span.onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	margin: 0;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.woocommerce .star-rating { color: var(--ezy-yellow); }

/* Cart & checkout tables */
.woocommerce table.shop_table {
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th { background: var(--ezy-surface-alt); }
.woocommerce table.shop_table td { border-color: var(--ezy-line); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: var(--ezy-text-xl); }

.woocommerce #payment,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface-alt);
	padding: 20px;
}

.woocommerce form .form-row { display: grid; gap: 5px; margin-bottom: 14px; }
.woocommerce form .form-row label { font-size: var(--ezy-text-sm); }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--ezy-radius-sm);
	color: var(--ezy-body);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--ezy-green);
	color: #fff;
}

/* WooCommerce's own loops (related, upsells, [products] shortcode) render the
   theme card via woocommerce/content-product.php, so they only need the grid. */
.woocommerce ul.products,
ul.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;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

.related.products > h2,
.up-sells.products > h2,
.woocommerce ul.products + h2 {
	margin-bottom: clamp(16px, 2vw, 24px);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.related.products,
.up-sells.products { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* The theme's own toolbar replaces these on the archive. */
.ezy-shop .woocommerce-result-count,
.ezy-shop .woocommerce-ordering { display: none; }

/* ==========================================================================
   6. MINI-CART DRAWER
   ========================================================================== */

.ezy-cart-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 1010;
	display: flex;
	flex-direction: column;
	width: min(94vw, 400px);
	background: var(--ezy-surface);
	box-shadow: var(--ezy-shadow-md);
	transform: translateX(100%);
	transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ezy-cart-drawer.is-open { transform: translateX(0); }

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

.ezy-cart-drawer__head h2 { margin: 0; font-size: var(--ezy-text-lg); }

.ezy-cart-drawer__close {
	width: 38px;
	height: 38px;
	border: 1px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius-sm);
	background: transparent;
	color: var(--ezy-ink);
	cursor: pointer;
	display: inline-grid;
	place-items: center;
}

.ezy-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

.ezy-cart-drawer__body .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.ezy-cart-drawer__body .woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ezy-line);
	font-size: var(--ezy-text-sm);
}

.ezy-cart-drawer__body .woocommerce-mini-cart-item img {
	grid-row: span 2;
	width: 60px;
	height: 60px;
	border-radius: var(--ezy-radius-sm);
	object-fit: cover;
	border: 1px solid var(--ezy-line);
}

.ezy-cart-drawer__body .woocommerce-mini-cart-item a { color: var(--ezy-ink); font-weight: 600; }
.ezy-cart-drawer__body .woocommerce-mini-cart-item a.remove_from_cart_button {
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ezy-surface-sunken);
	color: var(--ezy-muted);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}

.ezy-cart-drawer__body .woocommerce-mini-cart-item a.remove_from_cart_button:hover {
	background: var(--ezy-danger);
	color: #fff;
}

.ezy-cart-drawer__body .quantity { color: var(--ezy-muted); font-weight: 600; }

.ezy-cart-drawer__body .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 0;
	padding-top: 12px;
	font-size: var(--ezy-text-md);
	font-weight: 800;
	color: var(--ezy-ink);
	border-top: 0;
}

.ezy-cart-drawer__body .woocommerce-mini-cart__buttons { display: none; }

.ezy-cart-drawer__foot {
	display: grid;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--ezy-line);
	background: var(--ezy-surface-alt);
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.ezy-cart-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--ezy-text-md);
	font-weight: 800;
	color: var(--ezy-ink);
}

.ezy-cart-drawer__empty { padding: 40px 0; text-align: center; color: var(--ezy-muted); }