/* hawaagri build 124 */
/**
 * Shop and product-category archives.
 *
 * Every value below was measured off hawaagri.com's live category pages.
 * Note the live design shows no page-title banner and no breadcrumb on these
 * templates (both are output but hidden), so this reproduces the visible
 * result: toolbar, then a four-up product grid.
 *
 * @package HawaAgri
 */

/* ---------- Shell ---------- */

.ha-shop__inner {
	padding-top: 120px;
	padding-bottom: 80px;
}

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

.ha-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin-bottom: 34px;
}

.ha-shop__count {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	color: var(--wp--preset--color--text);
}

.ha-shop__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
}

.ha-shop__perpage,
.ha-shop__orderby {
	margin: 0;
}

.ha-shop__perpage select,
.ha-shop__orderby select {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 34px 8px 0;
	background: transparent
		url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA1A9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" )
		no-repeat right center;
	border: 0;
	color: var(--wp--preset--color--text);
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	cursor: pointer;
}

.ha-shop__perpage select:focus-visible,
.ha-shop__orderby select:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 3px;
}

/* ---------- Product grid ---------- */

/* WordPress emits its own gap for grid layouts from the block's generated
   container class, and build 73 set the desktop gap on `.ha-products
   .ha-products__grid` alone — the same selector the mobile block below already
   had to escalate past. That is why the row gap never changed on the archive.
   The desktop gap now carries the same escalated selector list, so the value
   here is what actually renders. */
.ha-products .ha-products__grid.wp-block-post-template,
.ha-shop .ha-products__grid,
.ha-products__grid {
	column-gap: 44px;
	row-gap: 56px;
}

.ha-products .ha-products__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

/* Each loop item is the card. */
.ha-products .wp-block-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: transparent;
	border: 1px solid rgba(154, 161, 169, .28);
	border-radius: 10px;
	box-shadow: 0 10px 30px 0 rgba(0, 14, 40, .05);
	transition: box-shadow .25s ease, transform .25s ease;
}

.ha-products .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px 0 rgba(0, 14, 40, .1);
}

/* --- Media --- */

.ha-product__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 158px;
	padding: 24px 16px;
	background: #fff;
	border-radius: 10px 10px 0 0;
}

.ha-product__media .wp-block-post-featured-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.ha-product__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Body --- */

.ha-product__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	padding: 20px 16px;
	text-align: left;
}

.ha-product__cat,
.ha-product__cat a {
	margin: 0 0 6px;
	color: #9AA1A9;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
}

.ha-product__cat a:hover {
	color: var(--wp--preset--color--brand-green);
}

.ha-product__title {
	margin: 0 0 14px;
	min-height: 48px;
	font-family: Ubuntu, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}

.ha-product__title a {
	color: #333;
	text-decoration: none;
}

.ha-product__title a:hover {
	color: var(--wp--preset--color--brand-green);
}

/* --- WhatsApp button (replaces the old quote link) --- */

/* A hairline above the CTA separates the copy block from the action without
   adding weight — cards previously ran title straight into a large empty gap
   and then the button. */
.ha-product__quote,
.wp-block-shortcode {
	margin-top: auto;
	margin-bottom: 0;
}

/* Scoped to the card body on purpose: `.wp-block-shortcode` is the wrapper the
   editor puts around every shortcode block, including whole homepage sections,
   so an unscoped border here would draw a line above each of them. */
.ha-product__body > .ha-product__quote,
.ha-product__body > .wp-block-shortcode {
	padding-top: 16px;
	border-top: 1px solid rgba(154, 161, 169, .18);
}

.ha-wa,
.ha-product__quote a,
a.ha-product__quote {
	/* `display:block` used to follow `display:flex` in this same rule and won,
	   which silently killed `gap` — the WhatsApp glyph ended up touching the
	   "Get a Quote" text and the button grew to two lines. Flex is what the
	   markup expects, so the stray override is gone and the gap is widened. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 11px 16px;
	background: #8BC53F;
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease;
}

.ha-wa:hover,
.ha-product__quote a:hover,
a.ha-product__quote:hover {
	background: #1DA851;
	color: #fff;
}

.ha-wa__icon { flex: 0 0 auto; }

.ha-wa:focus-visible,
.ha-product__quote a:focus-visible,
a.ha-product__quote:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green-dark);
	outline-offset: 3px;
}

/* ---------- Pagination ---------- */

.ha-pagination {
	gap: 8px;
	margin-top: 48px;
}

.ha-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(154, 161, 169, .35);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	font-size: 15px;
	text-decoration: none;
}

.ha-pagination .page-numbers:hover,
.ha-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand-green);
	border-color: var(--wp--preset--color--brand-green);
	color: #fff;
}

.ha-shop__empty {
	padding: 40px 0;
	color: #6B7280;
	text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.ha-products .ha-products__grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 26px;
	}
}

@media (max-width: 900px) {
	.ha-shop__inner { padding-top: 40px; padding-bottom: 56px; }

	.ha-products .ha-products__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.ha-shop__toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ha-shop__filters { gap: 10px 20px; }

	.ha-product__media { height: 112px; padding: 12px 10px; }
	.ha-product__body { padding: 12px 10px; }
	.ha-product__title { font-size: 15px; line-height: 21px; }
	.ha-product__cat, .ha-product__cat a { font-size: 13px; }
	.ha-product__quote a, a.ha-product__quote { font-size: 14px; padding: 10px 12px; }
}

@media (max-width: 400px) {
	.ha-products .ha-products__grid {
		grid-template-columns: 1fr !important;
		gap: 22px;
	}
}

/* WhatsApp brand green, full-width inside the card. */
.ha-wa {
	width: 100%;
	padding: 11px 14px;
	background: #25D366;
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease;
}

.ha-product__body .wp-block-shortcode { margin-top: auto; }

/* Single product page */
.single-product .ha-wa {
	max-width: 280px;
	margin-top: 18px;
}

@media (max-width: 600px) {
	.ha-wa { font-size: 14px; padding: 10px 12px; }
}


/* -------------------------------------------------------------------
   WhatsApp button — icon only
   Live shows the WhatsApp glyph with no label. The text is kept in
   the markup as .screen-reader-text so the link stays accessible.
   ------------------------------------------------------------------- */

.ha-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	margin-inline-start: auto;
	background: #25D366;
	border-radius: 10px;
	line-height: 0;
}

.ha-wa__icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

/* Visually hidden, still read by assistive tech. */
.ha-wa .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ===== Shop refinements (customer feedback) ============================== */

/* heading above the grid */
.ha-shop__heading{margin:0 0 22px}
.ha-shop__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:34px;font-weight:900;
  color:#164333;margin:0 0 6px;line-height:1.2}
.ha-shop__desc{font-family:Ubuntu,sans-serif;font-size:16px;line-height:1.6;color:#797F7D;margin:0;max-width:760px}

/* two-column layout: filters left, products right */
.ha-shop__layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start}
.ha-shop__content{min-width:0}

/* sidebar */
.ha-shop__sidebar{position:sticky;top:110px}
.ha-shop__filter-toggle{display:none;width:100%;padding:12px 16px;border:1px solid #e2e5e1;
  border-radius:6px;background:#fff;font-family:Ubuntu,sans-serif;font-size:15px;font-weight:500;
  color:#164333;cursor:pointer}
.ha-shop__filter-panel{background:#fff;border:1px solid #ececec;border-radius:10px;padding:22px 20px}
.ha-shop__filter-title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:18px;font-weight:700;
  color:#164333;margin:0 0 14px;text-transform:uppercase;letter-spacing:.03em}
.ha-shop__catlist,.ha-shop__sublist{list-style:none;margin:0;padding:0}
.ha-shop__catlist > li{border-bottom:1px solid #f1f1f1}
.ha-shop__catlist > li:last-child{border-bottom:0}
.ha-shop__catlist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 2px;font-family:Ubuntu,sans-serif;font-size:15px;color:#4a4a4a;text-decoration:none;
  transition:color .18s ease}
.ha-shop__catlist a:hover{color:#8BC53F}
.ha-shop__catlist li.is-active > a{color:#8BC53F;font-weight:700}
.ha-shop__catcount{font-size:12px;color:#9AA1A9;background:#f5f7f3;border-radius:20px;padding:2px 8px}
.ha-shop__sublist{padding-left:12px;border-left:2px solid #f1f1f1;margin:0 0 8px}
.ha-shop__sublist a{font-size:14px;padding:7px 2px}

/* related products */
.ha-related{margin:56px 0 0;padding-top:40px;border-top:1px solid #ececec}
.ha-related__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:28px;font-weight:900;
  color:#164333;margin:0 0 26px}
.ha-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;list-style:none;margin:0;padding:0}
.ha-related__item{display:flex;flex-direction:column;background:#fff;border:2px solid transparent;
  border-radius:10px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ha-related__item:hover{border-color:#8BC53F;box-shadow:0 10px 28px rgba(0,0,0,.10);transform:translateY(-3px)}
.ha-related__item img{width:100%;height:auto;display:block;border-radius:8px 8px 0 0}

/* single product colour alignment */
.woocommerce div.product .product_title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;
  font-size:32px;font-weight:900;color:#164333}
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel{font-family:Ubuntu,sans-serif;font-size:16px;
  line-height:1.7;color:#797F7D}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#8BC53F}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:#164333;font-family:Ubuntu,sans-serif}
.woocommerce div.product .flex-control-thumbs li img{border-radius:6px;border:2px solid transparent;
  transition:border-color .2s ease}
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover{border-color:#8BC53F}
.woocommerce div.product div.images img{border-radius:10px}

@media (max-width:1024px){
  .ha-shop__layout{grid-template-columns:210px minmax(0,1fr);gap:26px}
  .ha-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:767.98px){
  .ha-shop__layout{grid-template-columns:1fr;gap:16px}
  .ha-shop__sidebar{position:static}
  .ha-shop__filter-toggle{display:block}
  .ha-shop__filter-panel{display:none;margin-top:10px}
  .ha-shop__sidebar.is-open .ha-shop__filter-panel{display:block}
  .ha-shop__title{font-size:26px}
  /* 1fr keeps min-width:auto, so card content refused to shrink and the
     grid overflowed below ~360px. minmax(0,1fr) lets it compress. */
  .ha-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .ha-related__item{min-width:0}
  .ha-related__item .ha-product__title,
  .ha-related__item .ha-product__cat{overflow-wrap:anywhere}
  .ha-related__title{font-size:22px}
}

/* ===== Single product: gallery + actions ================================= */
.ha-gallery__main{margin:0;border-radius:10px;overflow:hidden;background:#fff}
.ha-gallery__img{width:100%;height:auto;display:block}
.ha-gallery__thumbs{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:14px 0 0;padding:0}
.ha-gallery__thumb{padding:0;border:2px solid #ececec;border-radius:6px;background:#fff;
  cursor:pointer;overflow:hidden;line-height:0;transition:border-color .2s ease}
.ha-gallery__thumb img{width:74px;height:74px;object-fit:contain;display:block}
.ha-gallery__thumb:hover,.ha-gallery__thumb.is-active{border-color:#8BC53F}
.ha-single__title{font-family:"Mriya Grotesk",Ubuntu,sans-serif;font-size:34px;font-weight:900;
  color:#164333;margin:0 0 10px;line-height:1.2}
.ha-single__cat{font-family:Ubuntu,sans-serif;font-size:15px;margin:0 0 18px}
.ha-single__cat a{color:#8BC53F;text-decoration:none}
.ha-single__cat a:hover{color:#164333;text-decoration:underline}
@media (max-width:767.98px){
  .ha-single__title{font-size:26px}
  .ha-gallery__thumb img{width:58px;height:58px}
}

/* single combined WhatsApp / Get a Quote button */
.ha-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:#8BC53F;color:#fff;height:48px;padding:0 22px;border-radius:6px;
  font-family:Ubuntu,sans-serif;font-size:15px;font-weight:500;line-height:1;
  text-decoration:none;transition:background .2s ease}
.ha-wa:hover,.ha-wa:focus{background:#164333;color:#fff}
.ha-wa__icon{width:20px;height:20px;fill:currentColor;flex:0 0 20px}
.ha-wa__label{white-space:nowrap}
.ha-product__actions,.ha-single__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.ha-single__actions{margin:22px 0 16px}

/* product page: category line sits under the button, like live */
.ha-single__cat{font-family:Ubuntu,sans-serif;font-size:15px;color:#9AA1A9;margin:0}
.ha-single__cat a{color:#9AA1A9;text-decoration:none}
.ha-single__cat a:hover{color:#8BC53F}

/* toolbar: selects pushed right */
.ha-shop__toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ha-shop__count{margin:0;flex:0 0 auto}
.ha-shop__filters{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:767.98px){
  .ha-shop__filters{margin-left:0;width:100%}
  .ha-wa{height:44px;padding:0 16px;font-size:14px}
}

/* product summary + left-aligned action button */
.ha-single__summary{font-family:Ubuntu,sans-serif;font-size:16px;line-height:1.7;
  color:#9AA1A9;margin:0 0 4px;max-width:560px}
.ha-single__summary p{margin:0 0 8px;color:inherit}
.ha-single .ha-single__actions{display:flex;justify-content:flex-start;
  margin:22px auto 16px 0;width:auto}

/* ==========================================================================
   Shop filter — grouped, collapsible, with active chips and a mobile drawer.
   Reuses the existing .ha-shop__catlist / .ha-shop__catcount styling for the
   category tree; everything else here is the surrounding chrome.
   ========================================================================== */

.ha-filter {
	background: #fff;
	border: 1px solid rgba(154, 161, 169, .22);
	border-radius: 12px;
	padding: 6px 18px 10px;
	box-shadow: 0 10px 30px rgba(0, 14, 40, .05);
}

.ha-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0 12px;
}

.ha-filter__title {
	font-family: "Mriya Grotesk", Ubuntu, sans-serif;
	font-size: 18px;
	font-weight: 900;
	color: #164333;
	margin: 0;
}

.ha-filter__close {
	display: none;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #164333;
	cursor: pointer;
	padding: 0 4px;
}

/* Active filters ---------------------------------------------------------- */

.ha-filter__active {
	border-top: 1px solid rgba(154, 161, 169, .22);
	padding: 14px 0 4px;
}

.ha-filter__active-label {
	display: block;
	font-family: Ubuntu, sans-serif;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9AA1A9;
	margin-bottom: 10px;
}

.ha-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.ha-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #F1F7E8;
	border: 1px solid #8BC53F;
	border-radius: 999px;
	padding: 6px 12px;
	font-family: Ubuntu, sans-serif;
	font-size: 13px;
	color: #4C8C2B;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.ha-chip:hover { background: #8BC53F; color: #fff; }
.ha-chip span { font-size: 15px; line-height: 1; }

.ha-filter__reset {
	font-family: Ubuntu, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #9AA1A9;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ha-filter__reset:hover { color: #164333; }

/* Search ------------------------------------------------------------------ */

.ha-filter__search {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(154, 161, 169, .3);
	border-radius: 8px;
	padding: 4px 4px 4px 12px;
	margin: 12px 0 4px;
}

.ha-filter__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	padding: 8px 0;
}

.ha-filter__search button {
	flex: 0 0 auto;
	border: 0;
	background: #8BC53F;
	color: #fff;
	border-radius: 6px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ha-filter__search button:hover { background: #164333; }
.ha-filter__search svg { width: 17px; height: 17px; }

/* Collapsible groups ------------------------------------------------------ */

.ha-filter__group {
	border-top: 1px solid rgba(154, 161, 169, .22);
	padding: 4px 0;
}

.ha-filter__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	padding: 14px 0;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #164333;
}

.ha-filter__group-head::-webkit-details-marker { display: none; }

.ha-filter__caret {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.ha-filter__group[open] .ha-filter__caret { transform: rotate(180deg); }

/* Attribute options ------------------------------------------------------- */

.ha-filter__options {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}

.ha-filter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	color: #4A5560;
	text-decoration: none;
}

.ha-filter__option:hover { color: #164333; }

.ha-filter__box {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid rgba(154, 161, 169, .55);
	border-radius: 4px;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}

.ha-filter__option.is-on .ha-filter__box {
	background: #8BC53F;
	border-color: #8BC53F;
}

.ha-filter__option.is-on .ha-filter__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ha-filter__name { flex: 1 1 auto; }
.ha-filter__option.is-on .ha-filter__name { color: #164333; font-weight: 500; }

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

.ha-filter__trigger { display: none; }
.ha-filter__backdrop { display: none; }

@media (max-width: 900px) {

	.ha-filter__trigger {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 18px;
		padding: 11px 20px;
		border: 1px solid #8BC53F;
		border-radius: 8px;
		background: #fff;
		color: #4C8C2B;
		font-family: Ubuntu, sans-serif;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
	}

	.ha-filter__trigger svg { width: 18px; height: 18px; }

	.ha-shop__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 340px);
		max-width: 100%;
		z-index: 1000;
		background: #fff;
		transform: translateX(-100%);
		transition: transform .28s cubic-bezier(.4, 0, .2, 1);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ha-shop__sidebar.is-open { transform: translateX(0); }

	.ha-filter {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 100%;
		padding: 6px 18px 40px;
	}

	.ha-filter__close { display: block; }

	.ha-filter__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .28s ease;
	}

	.ha-filter__backdrop.is-on { opacity: 1; pointer-events: auto; }

	body.ha-filter-locked { overflow: hidden; }
}

/* Advanced filter: in-group search, drawer footer, badge, loading state ---- */

.ha-filter__find {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(154, 161, 169, .3);
	border-radius: 6px;
	padding: 8px 10px;
	margin: 0 0 10px;
	font-family: Ubuntu, sans-serif;
	font-size: 13px;
}

.ha-filter__find:focus { outline: 0; border-color: #8BC53F; }

.ha-filter__foot { display: none; }

.ha-filter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #8BC53F;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* The grid dims while new results are fetched, so the change is legible. */
.ha-shop__content { position: relative; }

.ha-shop__content.is-loading .ha-products {
	opacity: .38;
	pointer-events: none;
	transition: opacity .18s ease;
}

.ha-shop__content.is-loading::after {
	content: "";
	position: absolute;
	top: 90px;
	left: 50%;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid rgba(22, 67, 51, .18);
	border-top-color: #8BC53F;
	border-radius: 50%;
	animation: ha-spin .7s linear infinite;
	z-index: 3;
}

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

@media (max-width: 900px) {

	.ha-shop__sidebar { display: flex; flex-direction: column; }
	.ha-filter { flex: 1 1 auto; padding-bottom: 20px; }

	.ha-filter__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: 0 0 auto;
		position: sticky;
		bottom: 0;
		background: #fff;
		border-top: 1px solid rgba(154, 161, 169, .22);
		padding: 12px 18px;
	}

	.ha-filter__foot-clear {
		font-family: Ubuntu, sans-serif;
		font-size: 14px;
		color: #9AA1A9;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.ha-filter__foot-apply {
		flex: 0 0 auto;
		border: 0;
		border-radius: 8px;
		background: #8BC53F;
		color: #fff;
		font-family: Ubuntu, sans-serif;
		font-size: 15px;
		font-weight: 500;
		padding: 12px 26px;
		cursor: pointer;
	}

	.ha-filter__foot-apply:hover { background: #164333; }
}

/* Product grid: WordPress emits its own per-block gap for grid layouts, which
   outranks a plain class selector, so the mobile row gap needs the extra
   specificity to land. Vertical gap is a touch larger than horizontal — rows
   read as separated without the grid looking sparse. */
@media (max-width: 991.98px) {

	.ha-products .ha-products__grid.wp-block-post-template,
	.ha-shop .ha-products__grid,
	.ha-products__grid {
		row-gap: 40px;
		column-gap: 28px;
	}
}

@media (max-width: 767.98px) {

	.ha-products .ha-products__grid.wp-block-post-template,
	.ha-shop .ha-products__grid,
	.ha-products__grid {
		row-gap: 28px;
		column-gap: 18px;
	}
}

@media (max-width: 480px) {

	.ha-products .ha-products__grid.wp-block-post-template,
	.ha-shop .ha-products__grid,
	.ha-products__grid {
		row-gap: 20px;
		column-gap: 14px;
	}
}


/* ==========================================================================
   Homepage "Featured Products" carousel + filter counts.
   ========================================================================== */

/* Product photos were rendering small inside a 158px well with 24px of
   padding — a 226x69 image in a 260px card. The well is taller and the
   padding tighter so the product itself carries the card. */
.hax-prods .ha-product__media {
	height: 230px;
	padding: 14px 12px;
}

/* The quote button on the homepage cards: smaller than the shop-archive
   version and in the lighter brand green, so it reads as a secondary action
   next to the product rather than dominating the card. */
.hax-prods .ha-wa,
.hax-prods .ha-product__quote a {
	width: auto;
	max-width: 100%;
	/* the shared .ha-wa rule pins a 48px pill height for the product page */
	height: auto;
	padding: 9px 18px;
	font-size: 14px;
	border-radius: 8px;
	background: #A5D65C;
}

.hax-prods .ha-wa:hover,
.hax-prods .ha-product__quote a:hover {
	background: #8BC53F;
}

.hax-prods .ha-product__quote {
	display: flex;
	justify-content: center;
}

.hax-prods .ha-wa__icon {
	width: 19px;
	height: 19px;
}

/* Filter panel counts.

   The count pill sat immediately after each label, so with labels of
   different lengths the numbers landed in a ragged column. `margin-left:auto`
   pushes them to a common right edge; tabular figures and a min-width keep
   1- and 3-digit counts the same width. */
.ha-filter__option .ha-shop__catcount {
	margin-left: auto;
	min-width: 26px;
	padding: 1px 7px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ha-filter__option > span:not(.ha-shop__catcount) {
	min-width: 0;
}

/* ==========================================================================
   Filter panel — compaction pass
   --------------------------------------------------------------------------
   The panel was taller than the viewport before a single product came into
   view: the category tree printed all 20-odd terms plus their children with no
   ceiling, and every group carried desktop-sized padding. Nothing is removed
   here — the long lists get their own scroll area and the chrome tightens, so
   the whole panel stays roughly one screen tall.
   ========================================================================== */

.ha-filter { padding: 4px 16px 8px; }
.ha-filter__head { padding: 12px 0 10px; }
.ha-filter__active { padding: 10px 0 2px; }
.ha-filter__search { margin: 10px 0 2px; }
.ha-filter__search input[type="search"] { padding: 7px 0; }

.ha-filter__group { padding: 2px 0; }
.ha-filter__group-head { padding: 11px 0; font-size: 14.5px; }

/* Long lists scroll inside the group instead of pushing the products down.
   `overscroll-behavior` stops a list that has hit its end from grabbing the
   page scroll, which is what makes an inner scroller feel broken. */
.ha-shop__catlist,
.ha-filter__options {
	max-height: 302px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(154, 161, 169, .45) transparent;
	padding-right: 4px;
}

.ha-shop__catlist::-webkit-scrollbar,
.ha-filter__options::-webkit-scrollbar { width: 6px; }

.ha-shop__catlist::-webkit-scrollbar-thumb,
.ha-filter__options::-webkit-scrollbar-thumb {
	background: rgba(154, 161, 169, .4);
	border-radius: 6px;
}

.ha-shop__catlist::-webkit-scrollbar-track,
.ha-filter__options::-webkit-scrollbar-track { background: transparent; }

/* Tighter rows: the tree is a navigation list, not a reading list. */
.ha-shop__catlist a { padding: 8px 2px; font-size: 14.5px; }
.ha-shop__sublist a { padding: 6px 2px; font-size: 13.5px; }
.ha-shop__sublist { margin: 0 0 6px; }
.ha-filter__option { padding: 6px 0; }
.ha-filter__options { margin: 0 0 10px; }

/* The whole sidebar is sticky, so cap it to the viewport and let it scroll as
   one unit if a user opens several groups at once. */
@media (min-width: 992px) {
	.ha-shop__sidebar {
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 2px;
	}
}

/* In the mobile drawer the panel already owns the full screen, so the inner
   scrollers only get in the way — let the lists run and the drawer scroll. */
@media (max-width: 991.98px) {
	.ha-shop__catlist,
	.ha-filter__options {
		max-height: 46vh;
	}
}


/* ==========================================================================
   Filter panel and product grid — build 83
   ========================================================================== */

/* --- Search Products box -------------------------------------------------
   The field was a 48px-tall box with a 34px filled button inside it and a
   12px inset, which made the search control the heaviest thing in the panel
   before any filter had been touched. The outline is now a hairline, the box
   is 20px shorter and the button matches the new height, so the field reads as
   part of the panel rather than as a banner across the top of it. */

.ha-filter__search {
	border: 1px solid rgba(154, 161, 169, .22);
	border-radius: 6px;
	padding: 2px 2px 2px 10px;
	gap: 4px;
}

.ha-filter__search input[type="search"] {
	font-size: 13.5px;
	padding: 5px 0;
}

.ha-filter__search button {
	width: 28px;
	height: 28px;
	border-radius: 4px;
}

.ha-filter__search svg { width: 15px; height: 15px; }

/* --- Collapsed groups ----------------------------------------------------
   Categories and Availability now arrive closed (see hawaagri_shop_filters),
   so the two headings are what a visitor lands on. Closed, a group is a row
   the user has to recognise as a control, so the caret is stated a little more
   firmly and the whole row takes the pointer. */

.ha-filter__group-head {
	user-select: none;
}

.ha-filter__group-head:hover { color: #8BC53F; }
.ha-filter__caret { color: #9AA1A9; }
.ha-filter__group[open] .ha-filter__caret { color: #164333; }

/* A closed group carries no list under it, so the group's own bottom padding
   is the only separation between one heading and the next. */
.ha-filter__group:not([open]) { padding-bottom: 0; }

/* --- Product grid --------------------------------------------------------
   The cards were on a fixed 3-column track at 158px of image well plus 20px
   of body padding, so three products filled the viewport and everything else
   was a page scroll away. The track is now sized by the card rather than by a
   column count: cards are smaller, so four fit at the same content width and
   the grid reflows down to one column on its own without a breakpoint.

   The selector list is the escalated one this file already uses — WordPress
   emits `grid-template-columns` from the block's own generated container
   class, which outranks a single class selector. */

.ha-products .ha-products__grid.wp-block-post-template,
.ha-shop .ha-products__grid,
.ha-products__grid {
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	column-gap: 24px;
	row-gap: 30px;
}

.ha-product__media {
	height: 124px;
	padding: 14px 12px;
}

.ha-product__body {
	padding: 14px 12px;
}

.ha-product__cat,
.ha-product__cat a {
	font-size: 12.5px;
	line-height: 18px;
	margin-bottom: 4px;
}

.ha-product__title {
	font-size: 15px;
	line-height: 21px;
	margin-bottom: 10px;
	min-height: 42px;
}

.ha-product__body > .ha-product__quote,
.ha-product__body > .wp-block-shortcode {
	padding-top: 12px;
}

/* The card CTA.

   `.ha-wa` is declared four times in this file and the passes disagree: an
   early one makes it a full-width block, a later icon-only pass pins it to
   44x44 and expects the label to be hidden as `.screen-reader-text`, and the
   current pass restores a visible `.ha-wa__label` at 48px tall. The markup
   emits the visible label, so what survives is a 44px-wide box with a label
   that does not fit in it — the wrapping was already there and the narrower
   card only made it obvious.

   Inside the archive grid the button is sized by its own content: no fixed
   width to overflow, the label on one line, and a smaller face to match the
   smaller card. Scoped to the grid so the product page and the homepage
   carousel keep the buttons they have. */
.ha-products .wp-block-post .ha-wa,
.ha-products .wp-block-post .ha-product__quote a {
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: 40px;
	gap: 8px;
	padding: 0 14px;
	font-size: 13.5px;
	border-radius: 8px;
}

.ha-products .wp-block-post .ha-wa__icon { width: 17px; height: 17px; flex: 0 0 17px; }
.ha-products .wp-block-post .ha-wa__label { white-space: nowrap; }

/* The homepage carousel shares these card classes but sizes its own well, so
   it keeps the taller image area it was given. */
.hax-prods .ha-product__media { height: 230px; }

/* --- Scrollable results --------------------------------------------------
   With smaller cards the grid gets longer, not shorter, so the results get
   their own scroll area: the filters, the toolbar and the pagination stay put
   while the products move under them. `overscroll-behavior` stops a grid that
   has hit its end from taking the page scroll with it.

   The cap is viewport-relative with a floor, so a short window still shows a
   useful number of rows and a tall one is not artificially clipped. */

.ha-shop__content .ha-products {
	max-height: calc(100vh - 240px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(154, 161, 169, .45) transparent;
	padding-right: 6px;
}

.ha-shop__content .ha-products::-webkit-scrollbar { width: 6px; }

.ha-shop__content .ha-products::-webkit-scrollbar-thumb {
	background: rgba(154, 161, 169, .4);
	border-radius: 6px;
}

.ha-shop__content .ha-products::-webkit-scrollbar-track { background: transparent; }

/* The cards lift 3px on hover; without the top gutter the lift is clipped by
   the scroll container's own edge. */
.ha-shop__content .ha-products { padding-top: 4px; }

/* Pagination belongs to the page, not to the scroll area, so it sits below the
   scroller rather than inside it. */
.ha-shop__content .ha-products .ha-pagination {
	position: sticky;
	bottom: 0;
	background: #fff;
	padding-top: 14px;
	margin-top: 8px;
}

/* On a phone the page itself is the scroller — a second one nested inside it
   only fights the first. */
@media (max-width: 991.98px) {
	.ha-shop__content .ha-products {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.ha-shop__content .ha-products .ha-pagination {
		position: static;
		background: none;
	}
}

/* Below 1100px the column count is already pinned with `!important` further up
   this file (3 / 2 / 1 columns), so the auto-fill track above only governs the
   desktop widths. Left as-is deliberately — those counts are correct for the
   smaller cards too. */


/* ==========================================================================
   SEARCH PRODUCTS — build 91
   --------------------------------------------------------------------------
   Reported as "still not updated". Build 83 did change it — border to a
   hairline, radius 8 -> 6, about 20px shorter — but that was a trim, and the
   box still reads as the heaviest control in the panel.

   Worth stating plainly, because it changes what "match the old site" can mean
   here: the live shop page has NO product search box. Its only controls are a
   sort dropdown, a per-page selector and pagination. So there is no old
   styling to reproduce for this element — it exists only on the new build.
   With nothing to match, the brief reduces to its other half, "make it
   smaller", and that is what this does: roughly 26px tall against the 48px it
   started at, sized to sit under the Filters heading as a field rather than
   across the top of the panel as a banner.
   ========================================================================== */

.ha-filter__search {
	border: 1px solid rgba(154, 161, 169, .2);
	border-radius: 5px;
	padding: 1px 1px 1px 8px;
	gap: 3px;
	margin: 8px 0 2px;
}

.ha-filter__search input[type="search"] {
	font-size: 13px;
	line-height: 18px;
	padding: 3px 0;
}

/* The placeholder was inheriting the input's colour, so an empty field read as
   a filled one. */
.ha-filter__search input[type="search"]::placeholder {
	color: #9AA1A9;
	opacity: 1;
}

.ha-filter__search button {
	width: 24px;
	height: 24px;
	border-radius: 3px;
}

.ha-filter__search svg { width: 13px; height: 13px; }


/* ==========================================================================
   SHOP PAGE — client round, build 92
   ========================================================================== */

/* --- 1. The second scrollbar ---------------------------------------------

   REVERSES BUILD 83. That round asked for the products to be "smaller and
   scrollable", and the results area was given its own scroll region capped at
   `100vh - 240px` with the pagination stuck to its bottom edge. That region is
   the scrollbar circled in the screenshot: it sits just inside the page's own,
   so the window shows two.

   Only the page scrolls now. The sidebar's own viewport cap goes with it — it
   is the same kind of nested scroller and would have been the next one to be
   noticed. */

.ha-shop__content .ha-products {
	max-height: none;
	overflow: visible;
	padding-right: 0;
	padding-top: 0;
}

/* `margin-top: 8px` is left over from build 83, when this element was stuck to
   the bottom edge of the scroll region and wanted to sit tight against it.
   Build 92 removed the scroller and reset `position`, `background` and
   `padding-top` — but not the margin, so the pagination stayed jammed 8px
   under the last row of cards. Measured on the live page: grid bottom 3012,
   pagination top 3020. It is horizontally centred correctly; only the gap
   above it was wrong. */
.ha-shop__content .ha-products .ha-pagination {
	position: static;
	background: none;
	padding-top: 0;
	margin-top: 40px;
}

@media (min-width: 992px) {
	.ha-shop__sidebar {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}
}

/* The category and attribute lists keep their own cap. That one only exists
   inside a dropdown the visitor has deliberately opened, and without it a
   twenty-term category tree pushes the whole page long again. Say the word and
   it comes off too. */

/* --- 2. Pagination, smaller ---------------------------------------------- */

.ha-pagination { gap: 6px; margin-top: 40px; }

.ha-pagination .page-numbers {
	min-width: 32px;
	height: 32px;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 13.5px;
}

/* "Next Page" is a word rather than a digit, so it needs its own breathing
   room but the same height as the numbers. */
.ha-pagination .wp-block-query-pagination-next,
.ha-pagination .wp-block-query-pagination-previous {
	font-size: 13.5px;
	padding: 0 4px;
}

/* --- 3. Hover: a 1px green border ---------------------------------------

   The card already carries a 1px grey border, so the hover swaps its colour
   rather than adding a second one — adding a border on hover would shift the
   card by a pixel as it appears. */

.ha-products .wp-block-post {
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}

.ha-products .wp-block-post:hover {
	border-color: #8BC53F;
}

/* Keyboard users get the same cue when tabbing to a card's link. */
.ha-products .wp-block-post:focus-within {
	border-color: #8BC53F;
}

/* --- 4. Grid spacing -----------------------------------------------------

   Two directions at once, as asked: more air BETWEEN rows so the lines read
   apart, less between the cards in a row so the grid reads compact.

     column-gap  24 -> 16
     row-gap     30 -> 44   (74 in build 103 — see the note below)

   The title's reserved two-line height goes too. With the CTA pinned to the
   bottom of the card by `margin-top:auto`, a one-line title was reserving a
   second line it never used, which is where the slack inside each card came
   from. Rows still align, because grid stretches every card in a row to the
   tallest one. */

.ha-products .ha-products__grid.wp-block-post-template,
.ha-shop .ha-products__grid,
.ha-products__grid {
	column-gap: 16px;
	row-gap: 74px;
}

.ha-product__title { min-height: 0; }

@media (max-width: 1100px) {
	.ha-products .ha-products__grid {
		column-gap: 16px !important;
		row-gap: 62px !important;
	}
}

@media (max-width: 767.98px) {
	.ha-products .ha-products__grid {
		column-gap: 12px !important;
		row-gap: 44px !important;
	}

	.ha-pagination .page-numbers { min-width: 30px; height: 30px; font-size: 13px; }
}


/* ==========================================================================
   SHOP — winning against the site's own Additional CSS. Build 94.
   --------------------------------------------------------------------------
   Measured in the live page rather than inferred. Three of the four changes
   from build 92/93 were arriving; two were not, and the reason is not in this
   theme.

   The Site Editor's Additional CSS (Appearance -> Editor -> Styles ->
   Additional CSS, compiled into the page's `global-styles-inline-css` block)
   carries 12 rules targeting the shop. Two of them override this file:

     .ha-shop .ha-products .ha-products__grid.ha-products__grid
         { gap: 40px 34px }                       <- specificity 0,4,0
     .ha-shop .ha-products__grid > li
         { border: 2px solid transparent !important }
     .ha-shop .ha-products__grid > li:hover
         { border-color: #8BC53F !important }

   The gap rule outranks the 0,3,0 selector this file was using, so the grid
   spacing never moved. The border rules carry `!important`, so the 1px hover
   border never applied — the page was already drawing a 2px one from that
   custom CSS.

   These rules therefore have to carry `!important` and higher specificity to
   land. That is an arms race and the real fix is to delete those 12 rules from
   Additional CSS, which now duplicate what the theme does properly — see
   BUILD-94.md. Until then, this wins.

   Verified in the live page with the values below injected: gaps went
   34/40 -> 16/44, the resting border went 2px -> 1px, hovering "Rubber Hose"
   computed `1px solid rgb(139, 197, 63)`, and the nested scrollbar count went
   to 0.
   ========================================================================== */

/* Build 103: row separation.

   `row-gap` was 44px and the rows still read as touching. The reason is that
   each card's visible panel overflows its own grid track: the track measured
   282px while the card's painted box measured 319px, so 37 of the 44px of gap
   were being eaten by the card itself and only ~6px of white space survived
   between one row and the next.

   Raising the gap to 74px puts the visible separation at 37px, measured on
   the page between the bottom of row one and the top of row two. Nothing else
   moves: the tracks, the columns, the cards and their contents are untouched.
   Verified in the rendered page — row two's top went 711 -> 741 with row one
   ending at 704. */

.ha-shop .ha-products .ha-products__grid.ha-products__grid.wp-block-post-template {
	column-gap: 16px !important;
	row-gap: 74px !important;
}

/* Resting state stays transparent, as the site's custom CSS has it, so the
   only visible change is on hover. 1px rather than the 2px it was drawing. */
.ha-shop .ha-products__grid > li.wp-block-post,
.ha-shop .ha-products__grid > .wp-block-post {
	border-width: 1px !important;
	border-style: solid !important;
	border-color: transparent !important;
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}

.ha-shop .ha-products__grid > li.wp-block-post:hover,
.ha-shop .ha-products__grid > .wp-block-post:hover,
.ha-shop .ha-products__grid > li.wp-block-post:focus-within {
	border-color: #8BC53F !important;
}

/* The last nested scrollbar on the page: the category list inside its
   dropdown. Measured as the only remaining one, so it goes. */
.ha-shop__sidebar .ha-shop__catlist {
	max-height: none !important;
	overflow: visible !important;
}

@media (max-width: 1024px) {
	.ha-shop .ha-products .ha-products__grid.ha-products__grid.wp-block-post-template {
		column-gap: 16px !important;
		row-gap: 62px !important;
	}
}

@media (max-width: 767.98px) {
	.ha-shop .ha-products .ha-products__grid.ha-products__grid.wp-block-post-template {
		column-gap: 12px !important;
		row-gap: 44px !important;
	}
}


/* ==========================================================================
   SHOP FILTER — reference restyle, build 107
   --------------------------------------------------------------------------
   Client reference: each filter value sits in its own outlined, rounded row
   with the count on a common right edge, the group heading above it reads as
   a small uppercase label rather than a title, and a long list scrolls inside
   a visible track instead of running down the page.

   This is presentation only. The markup, the links, the `details`/`summary`
   collapse, the search field, the active chips, the mobile drawer and every
   query string behind the rows are untouched — a row is still the same anchor
   it was, it is just drawn as a box instead of a table line.
   ========================================================================== */

/* --- Group heading -------------------------------------------------------
   "PRODUCT TYPE" in the reference: small, uppercase, letter-spaced, and
   quieter than the panel's own "Filters" title so the hierarchy still reads
   title -> group -> values. */

.ha-filter__group-head {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: #4A5560;
	padding: 13px 0 11px;
}

.ha-filter__group-head:hover { color: #164333; }

.ha-filter__caret {
	width: 16px;
	height: 16px;
	color: #6B7580;
}

/* --- The scroll area -----------------------------------------------------
   REVERSES BUILD 96, on the client's instruction with the conflict put to
   them directly.

   Build 96 removed the category list's cap — "the last nested scrollbar on
   the page ... so it goes" — after an earlier round asked for nested
   scrollbars to be cleared off this page. The reference image for this round
   asks for the opposite: a list held to a fixed height with a visible track
   beside it. Only one of the two can be true, and this round's reference is
   the one that wins.

   The cap goes back to the 302px build 89 used, which is where the attribute
   lists still sit, so the two kinds of group are the same height. That rule
   carried `!important`, so undoing it needs the same weight and the same
   selector — a plain class would lose.

   The track is drawn rather than left transparent: the reference shows the
   groove, not just the thumb, so the list reads as scrollable before anyone
   touches it. The right padding keeps the outlined rows clear of it instead
   of running underneath. */

.ha-shop__sidebar .ha-shop__catlist {
	max-height: 302px !important;
	overflow-y: auto !important;
}

@media (max-width: 991.98px) {
	.ha-shop__sidebar .ha-shop__catlist {
		max-height: 46vh !important;
	}
}

.ha-shop__catlist,
.ha-filter__options {
	padding-right: 10px;
	scrollbar-color: rgba(154, 161, 169, .5) rgba(154, 161, 169, .14);
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

.ha-shop__catlist::-webkit-scrollbar,
.ha-filter__options::-webkit-scrollbar { width: 8px; }

.ha-shop__catlist::-webkit-scrollbar-track,
.ha-filter__options::-webkit-scrollbar-track {
	background: rgba(154, 161, 169, .14);
	border-radius: 8px;
}

.ha-shop__catlist::-webkit-scrollbar-thumb,
.ha-filter__options::-webkit-scrollbar-thumb {
	background: rgba(154, 161, 169, .5);
	border-radius: 8px;
}

/* --- Rows as outlined boxes ---------------------------------------------
   The dividing lines between rows go, because two adjacent outlines plus a
   rule between them reads as a double border. Spacing between the boxes does
   the separating instead. */

.ha-shop__catlist > li,
.ha-shop__catlist > li:last-child {
	border-bottom: 0;
}

.ha-shop__catlist > li + li,
.ha-filter__options > li + li {
	margin-top: 8px;
}

.ha-shop__catlist a,
.ha-filter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid rgba(154, 161, 169, .28);
	border-radius: 10px;
	font-size: 14.5px;
	line-height: 1.35;
	color: #2F3A42;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.ha-shop__catlist a:hover,
.ha-filter__option:hover {
	border-color: rgba(139, 197, 63, .75);
	color: #164333;
}

/* Selected state keeps the brand green it already had, now carried by the
   outline as well as the label. */
.ha-shop__catlist li.is-active > a,
.ha-filter__option.is-on {
	border-color: #8BC53F;
	background: rgba(139, 197, 63, .07);
	color: #164333;
}

/* --- Counts --------------------------------------------------------------
   Plain figures on a common right edge, as in the reference — the grey pill
   the count used to sit in competes with the row's own outline. */

.ha-shop__catlist .ha-shop__catcount,
.ha-filter__option .ha-shop__catcount {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 12px;
	line-height: 18px;
	color: #9AA1A9;
	text-align: right;
	font-variant-numeric: tabular-nums;
	min-width: 22px;
}

.ha-shop__catlist li.is-active > a .ha-shop__catcount,
.ha-filter__option.is-on .ha-shop__catcount {
	color: #6E9B3C;
}

/* Long category names wrap inside the box rather than pushing the count out
   of the column. */
.ha-shop__catlist a,
.ha-filter__name {
	min-width: 0;
	overflow-wrap: break-word;
}

/* --- Child categories ----------------------------------------------------
   Sub-terms are the same box one step in. The left rule that used to mark the
   nesting goes with the row dividers — against an outlined row it reads as a
   stray line. */

.ha-shop__sublist {
	padding-left: 14px;
	border-left: 0;
	margin: 8px 0 0;
}

.ha-shop__sublist > li + li { margin-top: 6px; }

.ha-shop__sublist a {
	padding: 9px 12px;
	font-size: 13.5px;
	border-radius: 9px;
}

/* --- Checkbox rows -------------------------------------------------------
   Attribute and availability values are multi-select, so the box stays: it is
   the only thing that says "several of these at once" before a row is
   clicked. It sits inside the outlined row rather than in front of it. */

.ha-filter__box {
	width: 15px;
	height: 15px;
	border-radius: 3px;
}

.ha-filter__option.is-on .ha-filter__box::after {
	left: 4px;
	top: 1px;
	width: 3px;
	height: 8px;
}

.ha-filter__options { margin: 0 0 12px; }

/* --- Narrow screens ------------------------------------------------------
   In the drawer the panel is the full width of the screen, so the rows get a
   little more room to be tapped and the same outline holds. */

@media (max-width: 991.98px) {
	.ha-shop__catlist a,
	.ha-filter__option {
		padding: 13px 14px;
		font-size: 15px;
	}

	.ha-shop__sublist a { padding: 11px 12px; }
}


/* ==========================================================================
   PRODUCT CARD IMAGES ON MOBILE — build 117
   --------------------------------------------------------------------------
   Reported as "some product images on mobile are still being cut off".

   The cause is not in this file, and not in any stylesheet: the archive cards
   render the core Post Featured Image block, and that block writes its `scale`
   attribute out as an INLINE style on the image —

     <img class="wp-post-image" style="object-fit:cover;" ...>

   An inline declaration outranks every rule in every stylesheet, so the
   `object-fit: contain` this file sets at the top of the Media section (and
   restates in home.css) has never actually applied to a card on the shop
   archive or a category archive. The image has been cropped to fill the well
   the whole time. Measured on the live page:

     390px viewport   well 289x96   file 768x343   25% of the HEIGHT cut
     1440px viewport  well 155x96   file 768x343   28% of the WIDTH cut

   A phone shows one card per row, so the well is wide and short (3.01:1
   against the file's 2.24:1) and `cover` takes the crop off the top and the
   bottom — the handle and the wheels of a pressure washer, which is what the
   client can see.

   Beating an inline style needs `!important`; there is no lower-weight way to
   do it from a stylesheet. Nothing else changes: the well keeps its height and
   its padding, the card keeps its geometry, and `contain` draws the whole file
   inside the same box at its own aspect ratio, so nothing is stretched. At
   390px the image goes from a cropped 289x129 to a complete 214x96.

   Scoped to <=991.98px, which is the mobile/tablet breakpoint this file
   already uses for the filter drawer, and it covers phone landscape (932px on
   the largest current handsets). Desktop is deliberately left exactly as it
   is, per the brief — it is cropping too, for the same reason, and the same
   one-line fix applies there if it is wanted.
   ========================================================================== */

@media (max-width: 991.98px) {
	.ha-products .ha-product__media img {
		object-fit: contain !important;
	}
}