/* =========================================================================
   iSupply Displays — product archive
   Loaded only on the shop and product taxonomy archives, after style.css
   (and therefore after kadence-global and Kadence's Customizer CSS), so
   plain selectors here beat theme defaults. The few !important marks are
   annotated with the rule they are fighting.
   ====================================================================== */

/* Self-hosted, archive-only typography. Both families are variable fonts so
   the component-specific weights below (including intermediate values such as
   750 and 780) render without synthetic weight substitution. */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/archivo-latin-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/inter-latin-variable.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   Tokens — one spacing scale shared by hero, sidebar, grid, card and modal
   so the rhythm stays consistent across all four.
   ---------------------------------------------------------------------- */
.isd-hero,
.isd-shop,
.isd-catalog-mobile,
.isd-filter-drawer,
.isd-category-description,
.kt-woo-quickview-content {
	--isd-s1: 4px;
	--isd-s2: 8px;
	--isd-s3: 12px;
	--isd-s4: 16px;
	--isd-s5: 24px;
	--isd-s6: 32px;
	--isd-s7: 48px;
	--isd-s8: 64px;
	--isd-s9: 96px;

	--isd-r-card: 16px;
	--isd-r-tile: 12px;
	--isd-r-modal: 20px;
	--isd-r-pill: 999px;

	--isd-tile-bg: #f2f3f5;
	--isd-sale: #c0392b;
	--isd-archive-blue: var(--opt1-blue, #1769ff);
	--isd-archive-blue-dark: var(--opt1-blue-dark, #084fcc);
	--isd-archive-line: var(--opt1-line, #dfe4eb);

	--isd-body-font: "Inter", Arial, sans-serif;
	--isd-heading-font: "Archivo", Arial, sans-serif;

	--isd-ease: cubic-bezier(0.4, 0, 0.2, 1);

	font-family: var(--isd-body-font);
}

/* Keep the typography contract inside archive-owned UI. Site chrome and
   single-product screens continue to use Kadence's global typography. */
:is(
	.isd-hero,
	.isd-shop,
	.isd-catalog-mobile,
	.isd-filter-drawer,
	.kt-woo-quickview-content
) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--isd-heading-font);
	text-transform: uppercase;
}

/* The desktop facet headings place their visible text inside a button. Form
   controls reset text-transform, so carry the heading treatment through. */
.isd-facet__heading button {
	text-transform: uppercase;
}

:is(
	.isd-hero,
	.isd-shop,
	.isd-catalog-mobile,
	.isd-filter-drawer,
	.kt-woo-quickview-content
) :is(button, input, select, textarea) {
	font-family: var(--isd-body-font);
}

/* -------------------------------------------------------------------------
   Shared button
   Fills from the left on hover: a pseudo element scales on the X axis from
   its left edge while the label crossfades. Used by the hero CTA and the
   card's hover control so both read as the same component.
   ---------------------------------------------------------------------- */
.isd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 0;
	border-radius: var(--isd-r-pill);
	font-family: var(--isd-body-font);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
}

.isd-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.34s var(--isd-ease);
}

.isd-btn > * {
	position: relative;
	z-index: 1;
}

.isd-btn:hover::before,
.isd-btn:focus-visible::before {
	transform: scaleX(1);
}

.isd-btn--light {
	background: var(--isd-archive-blue);
	color: var(--opt1-white, #fff);
	transition: background-color 0.22s var(--isd-ease), color 0.22s var(--isd-ease);
}

.isd-btn--light::before {
	background: var(--isd-archive-blue-dark);
}

.isd-btn--light:hover,
.isd-btn--light:focus-visible {
	color: var(--opt1-white, #fff);
}

.isd-btn--dark {
	background: var(--isd-ink);
	color: #fff;
	transition: color 0.34s var(--isd-ease);
}

.isd-btn--dark::before {
	background: var(--isd-blue);
}

.isd-btn--outline {
	background: var(--opt1-white, #fff);
	border: 1px solid var(--opt1-ink, #0b0d12);
	color: var(--opt1-ink, #0b0d12);
	transition: color 0.34s var(--isd-ease), border-color 0.34s var(--isd-ease);
}

.isd-btn--outline::before {
	background: var(--isd-archive-blue);
}

.isd-btn--outline:focus:not(:focus-visible) {
	background: var(--opt1-white, #fff);
	border-color: var(--opt1-ink, #0b0d12);
	color: var(--opt1-ink, #0b0d12);
}

.isd-btn--outline:hover,
.isd-btn--outline:focus-visible,
.isd-btn--outline:active {
	color: var(--opt1-white, #fff);
	border-color: var(--isd-archive-blue);
}

/* -------------------------------------------------------------------------
   Hero
   Full bleed: it is printed before Kadence's content container so it can run
   edge to edge, with its own inner container matching the theme's width.
   ---------------------------------------------------------------------- */
.isd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--opt1-white, #fff);
	color: var(--opt1-ink, #0b0d12);
}

.isd-hero__bg {
	position: absolute;
	inset: 0 0 0 44%;
	z-index: 0;
}

/* No banner image set: the hero falls back to the solid ground above, and
   the scrim still applies so the type contrast is unchanged. */
.isd-hero__bg:empty {
	display: none;
}

.isd-hero__bg img,
.isd-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.isd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--opt1-white, #fff) 0%,
		var(--opt1-white, #fff) 36%,
		rgba(255, 255, 255, 0.96) 48%,
		rgba(23, 105, 255, 0.48) 74%,
		rgba(23, 105, 255, 0.9) 100%
	);
}

.isd-hero__copy {
	max-width: 620px;
}

/* Copy occupies more of the image as the viewport narrows. Keep the same
   left-to-right direction, but retain enough ink at the right edge for text
   that wraps beyond the desktop content measure. */
@media (max-width: 1024px) {
	.isd-hero__scrim {
		background: linear-gradient(
			90deg,
			var(--opt1-white, #fff) 0%,
			var(--opt1-white, #fff) 52%,
			rgba(255, 255, 255, 0.92) 68%,
			rgba(23, 105, 255, 0.86) 100%
		);
	}

	.isd-hero__bg {
		inset-inline-start: 38%;
	}

	.isd-hero__copy {
		max-width: min(68%, 620px);
	}
}

@media (max-width: 560px) {
	.isd-hero__scrim {
		background: linear-gradient(
			90deg,
			var(--opt1-white, #fff) 0%,
			var(--opt1-white, #fff) 78%,
			rgba(255, 255, 255, 0.94) 88%,
			rgba(23, 105, 255, 0.84) 100%
		);
	}

	.isd-hero__bg {
		inset-inline-start: 20%;
	}

	.isd-hero__copy {
		max-width: 90%;
	}
}

.isd-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding: clamp(48px, 6vw, 80px) var(--global-content-edge-padding, 1.5rem);
}

/* Breadcrumb, with the hairline the reference shows beneath it. */
.isd-hero .isupply-ajax-breadcrumbs {
	display: inline-block;
	padding-bottom: var(--isd-s3);
	border-bottom: 1px solid rgba(11, 13, 18, 0.24);
}

.isd-hero .custom-woo-breadcrumb {
	font-family: var(--isd-body-font);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	color: var(--opt1-ink, #0b0d12);
}

/* The current crumb owns the page H1 while remaining visually inline. */
.isd-hero .isd-breadcrumb__current {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
	text-transform: none;
	color: inherit;
}

.isd-hero .custom-woo-breadcrumb a {
	color: var(--opt1-muted, #5e6572);
	font-weight: 400;
	text-decoration: none;
}

.isd-hero .custom-woo-breadcrumb a:hover,
.isd-hero .custom-woo-breadcrumb a:focus-visible {
	color: var(--isd-archive-blue);
	text-decoration: underline;
}

.isd-hero__title {
	margin: var(--isd-s5) 0 0;
	max-width: 16em;
	font-family: var(--isd-heading-font);
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 1.06;
	font-weight: 700;
	color: var(--opt1-ink, #0b0d12);
}

.isd-hero__body {
	margin: var(--isd-s5) 0 0;
	max-width: 62ch;
}

/* Empty descriptions collapse without leaving a gap beneath the hero title. */
.isd-hero__body:empty {
	display: none;
}

.isd-hero__body p {
	margin: 0;
	font-family: var(--isd-body-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--opt1-muted, #5e6572);
}

.isd-hero__body p + p {
	margin-top: 1em;
}

.isd-hero__cta {
	margin-top: var(--isd-s7);
	height: 64px;
	padding-inline: var(--isd-s6);
	font-size: 17px;
}

/* -------------------------------------------------------------------------
   Two column body
   ---------------------------------------------------------------------- */
.isd-shop {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	grid-template-areas:
		"bar bar"
		"side main";
	column-gap: var(--isd-s7);
	align-items: start;
	margin-block: var(--isd-s7);
}

.isd-shop__bar {
	grid-area: bar;
	display: flex;
	align-items: center;
	gap: var(--isd-s5);
	margin-bottom: var(--isd-s6);
	padding-bottom: var(--isd-s5);
	border-bottom: 1px solid var(--isd-hairline);
}

.isd-shop__side {
	grid-area: side;
}

.isd-shop__main {
	grid-area: main;
}

/* Retracted: the sidebar leaves the layout entirely and the grid takes the
   full width. The bar stays put so the control can be found again. */
.isd-shop.is-filters-collapsed {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"bar"
		"main";
}

.isd-shop.is-filters-collapsed .isd-shop__side {
	display: none;
}

.isd-filter-toggle {
	gap: var(--isd-s3);
	height: 48px;
	padding: 0 var(--isd-s5);
	font-size: 16px;
}

.isd-filter-toggle__icon {
	display: inline-flex;
}

/* Points up while the filters are showing, down once they are retracted. */
.isd-filter-toggle__chevron {
	width: 8px;
	height: 8px;
	margin-left: var(--isd-s1);
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(2px) rotate(-135deg);
	transition: transform 0.2s var(--isd-ease);
}

.isd-filter-toggle[aria-expanded="false"] .isd-filter-toggle__chevron {
	transform: translateY(-2px) rotate(45deg);
}

.isd-shop__count {
	display: inline-flex;
	align-items: center;
	gap: var(--isd-s5);
	font-family: var(--isd-body-font);
	font-size: 16px;
	color: var(--isd-muted);
}

.isd-shop__count::before {
	content: "";
	width: 1px;
	height: 24px;
	background: var(--isd-hairline);
}

/* Mobile catalogue controls are rendered server-side but only enter the
   layout at the block-header breakpoint. */
.isd-catalog-mobile {
	display: none;
}

/* -------------------------------------------------------------------------
   Mobile filter dialog
   ---------------------------------------------------------------------- */
body.isd-filter-drawer-open {
	overflow: hidden;
}

.isd-filter-drawer {
	box-sizing: border-box;
	width: min(720px, calc(100% - 32px));
	max-width: none;
	height: min(860px, calc(100dvh - 32px));
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: #fff;
	color: var(--isd-ink);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.isd-filter-drawer:not([open]) {
	display: none;
}

.isd-filter-drawer::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

.isd-filter-drawer__surface {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.isd-filter-drawer__form {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	flex-direction: column;
}

.isd-filter-drawer__header {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	min-height: 96px;
	padding: 0 40px;
	border-bottom: 1px solid var(--isd-archive-line);
}

.isd-filter-drawer__header h2 {
	margin: 0;
	font-family: var(--isd-heading-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

button.isd-filter-drawer__close {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--isd-ink);
	cursor: pointer;
}

button.isd-filter-drawer__close:hover,
button.isd-filter-drawer__close:focus-visible {
	background: var(--isd-ground);
	color: var(--isd-ink);
}

button.isd-filter-drawer__close .kadence-svg-iconset,
button.isd-filter-drawer__close svg {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--isd-ink);
	fill: currentColor;
}

.isd-filter-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 24px 40px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.isd-filter-drawer__sort {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding-bottom: 32px;
}

.isd-filter-drawer__sort label {
	margin: 0;
	font-family: var(--isd-body-font);
	font-size: 21px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
}

.isd-filter-drawer__section h3 {
	margin: 0;
	font-family: var(--isd-heading-font);
	font-size: 21px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
}

.isd-filter-drawer__sort select {
	width: 100%;
	height: 56px;
	padding: 0 48px 0 24px;
	border: 1px solid var(--isd-hairline);
	border-radius: var(--isd-r-pill);
	background-color: #fff;
	font-family: var(--isd-body-font);
	font-size: 18px;
	color: var(--isd-ink);
}

.isd-filter-drawer__section {
	padding: 32px 0;
	border-top: 1px solid var(--isd-archive-line);
}

.isd-filter-drawer__choices {
	display: grid;
	gap: 18px;
	margin-top: 24px;
}

.isd-filter-drawer__choices label {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--isd-body-font);
	font-size: 18px;
	line-height: 1.4;
	cursor: pointer;
}

.isd-filter-drawer__choices input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--isd-ink);
}

.isd-filter-drawer__caption {
	margin: 24px 0 0;
	font-family: var(--isd-body-font);
	font-size: 16px;
	color: var(--isd-muted);
}

.isd-mobile-price__range {
	position: relative;
	height: 34px;
	margin: 24px 12px 12px;
	background: linear-gradient(to right,
		var(--isd-hairline) 0 var(--isd-price-start),
		var(--isd-ink) var(--isd-price-start) var(--isd-price-end),
		var(--isd-hairline) var(--isd-price-end) 100%) center / 100% 4px no-repeat;
}

.isd-mobile-price__range input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

.isd-mobile-price__range input[type="range"]:focus {
	outline: 0;
}

.isd-mobile-price__range input[type="range"]::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	border: 2px solid var(--isd-ink);
	border-radius: 50%;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	cursor: grab;
}

.isd-mobile-price__range input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 2px solid var(--isd-ink);
	border-radius: 50%;
	background: #fff;
	pointer-events: auto;
	cursor: grab;
}

.isd-mobile-price__range input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(10, 49, 95, 0.28);
}

.isd-mobile-price__range input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(10, 49, 95, 0.28);
}

.isd-mobile-price__range input[type="range"]::-moz-range-track {
	background: transparent;
}

.isd-mobile-price__values {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

.isd-mobile-price__values label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	font-family: var(--isd-body-font);
	font-size: 18px;
}

.isd-mobile-price__values input {
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--isd-r-pill);
	background: var(--isd-ground);
	font-family: var(--isd-body-font);
	font-size: 18px;
	color: var(--isd-ink);
}

.isd-filter-drawer__footer {
	flex: 0 0 auto;
	padding: 16px 40px max(16px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--isd-archive-line);
	background: #fff;
}

.isd-filter-drawer__apply {
	width: 100%;
	height: 58px;
	font-size: 18px;
}

/* -------------------------------------------------------------------------
   Sidebar facets
   ---------------------------------------------------------------------- */
.isd-facet + .isd-facet {
	margin-top: var(--isd-s6);
	padding-top: var(--isd-s6);
	border-top: 1px solid var(--isd-archive-line);
}

.isd-facet__heading {
	margin: 0;
	font-size: inherit;
}

.isd-facet__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--isd-s3);
	width: 100%;
	padding: 0 0 var(--isd-s4);
	border: 0;
	background: none;
	font-family: var(--isd-body-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--isd-ink);
	cursor: pointer;
}

/* Kadence's global button:hover rule has greater specificity than the base
	button rule above, so it otherwise paints the whole heading blue. Keep the
	button transparent in every interaction state and use this leading-edge
	rule as the hover/focus affordance instead. */
.isd-facet__toggle:hover,
.isd-facet__toggle:focus,
.isd-facet__toggle:active {
	background: transparent;
	color: var(--isd-ink);
	box-shadow: none;
}

.isd-facet__toggle > span {
	position: relative;
	display: inline-block;
}

.isd-facet__toggle > span::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s var(--isd-ease);
}

.isd-facet__toggle:hover > span::after,
.isd-facet__toggle:focus-visible > span::after {
	transform: scaleX(1);
}

/* One pseudo-element drawing both bars: the vertical one has zero height
	while the section is open, so the minus grows into a plus when it closes. */
.isd-facet__toggle::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-image: linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 14px 2px, 2px 0;
	transition: background-size 0.2s var(--isd-ease);
}

.isd-facet__toggle[aria-expanded="false"]::after {
	background-size: 14px 2px, 2px 14px;
}

.isd-facet.is-collapsed .isd-facet__body {
	display: none;
}

.isd-facet .wp-block-woocommerce-product-filters {
	margin: 0;
}


/* A facet whose filter block found nothing to offer would otherwise leave a
   heading with an empty body under it. Both blocks mark themselves hidden in
   that case: ProductFilterPrice when min === max or there is no max, which on
   this store is most categories because their products are all priced at
   zero, and ProductFilterStatus when no status has a non-zero count. */
.isd-facet:has(.wc-block-product-filter--hidden) {
	display: none;
}

.isd-facet__caption {
	margin: 0 0 var(--isd-s5);
	font-family: var(--isd-body-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--isd-muted);
}

/* Search sits above the facet stack rather than inside one. It used to share
   a facet body with the price slider, which is what put the two controls hard
   against each other. */
.isd-shop__search {
	margin-bottom: var(--isd-s6);
	padding-bottom: var(--isd-s6);
	border-bottom: 1px solid var(--isd-archive-line);
}

.isd-catalog-search__form {
	position: relative;
	margin: 0;
}

.isd-catalog-search__icon,
.isd-catalog-search__loader,
.isd-catalog-search__clear {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.isd-catalog-search__icon {
	left: var(--isd-s4);
	display: inline-flex;
	width: 19px;
	height: 19px;
	color: var(--isd-muted);
	pointer-events: none;
}

.isd-catalog-search__icon svg,
.isd-catalog-search__clear svg {
	display: block;
	width: 100%;
	height: 100%;
}

.isd-catalog-search__input,
.isd-catalog-search input[type="search"].isd-catalog-search__input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 48px 0 46px;
	border: 1px solid var(--isd-hairline);
	border-radius: var(--isd-r-pill);
	background: #fff;
	font-family: var(--isd-body-font);
	font-size: 15px;
	line-height: 48px;
	color: var(--isd-ink);
	box-shadow: none;
}

.isd-catalog-search__input::-webkit-search-cancel-button {
	display: none;
}

.isd-catalog-search__input:focus,
.isd-catalog-search input[type="search"].isd-catalog-search__input:focus {
	border-color: var(--isd-ink);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--isd-ink);
}

.isd-catalog-search__clear {
	right: var(--isd-s4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 5px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--isd-muted);
	cursor: pointer;
}

.isd-catalog-search__clear:hover,
.isd-catalog-search__clear:focus-visible {
	background: var(--isd-ground);
	color: var(--isd-ink);
}

.isd-catalog-search__clear[hidden] {
	display: none;
}

.isd-catalog-search__loader {
	right: 18px;
	display: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--isd-hairline);
	border-top-color: var(--isd-ink);
	border-radius: 50%;
	animation: isd-catalog-spin 0.7s linear infinite;
}

.isd-catalog-search.is-searching .isd-catalog-search__loader {
	display: block;
}

.isd-catalog-search__correction {
	margin: 0 0 var(--isd-s5);
	padding: var(--isd-s3) var(--isd-s4);
	border: 1px solid var(--isd-hairline);
	border-radius: var(--isd-r-card);
	background: var(--isd-ground);
	font-family: var(--isd-body-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--isd-ink);
}

.isd-catalog-search__correction[hidden] {
	display: none;
}

.isd-shop__grid-region {
	min-height: 120px;
}

.isd-catalog-empty {
	display: grid;
	place-items: center;
	min-height: 260px;
	padding: var(--isd-s7);
	border: 1px solid var(--isd-hairline);
	border-radius: var(--isd-r-card);
	background: var(--isd-ground);
	text-align: center;
}

.isd-catalog-empty p {
	margin: 0;
	font-family: var(--isd-body-font);
	font-size: 17px;
	color: var(--isd-muted);
}

@keyframes isd-catalog-spin {
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* -------------------------------------------------------------------------
   Availability facet
   ---------------------------------------------------------------------- */
.isd-facet .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: var(--isd-s4);
}

/* WooCommerce's server-rendered wrapper can omit its usual component class,
	so target the stable theme-owned facet boundary rather than depending on
	that optional ancestor. The fieldset remains the semantic filter group. */
.isd-facet--availability fieldset {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.isd-facet .wc-block-product-filter-checkbox-list__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo lays the label out as an inline-flex that shrink-wraps its content, so
   the count sits immediately after the text. Going full width and splitting
   inside the text wrapper is what pushes the count to the right edge. */
.isd-facet .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: var(--isd-s4);
	width: 100%;
	margin: 0;
	cursor: pointer;
}

.isd-facet .wc-block-product-filter-checkbox-list__text-wrapper {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: var(--isd-s4);
	font-family: var(--isd-body-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--isd-ink);
}

/* WooCommerce normally renders this span as display:contents. Restore a real
	text-sized box so the animated rule belongs to the label text only, not the
	checkbox, count or full-width row. */
.isd-facet--availability .wc-block-product-filter-checkbox-list__text {
	position: relative;
	display: inline-block;
}

.isd-facet--availability .wc-block-product-filter-checkbox-list__text::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s var(--isd-ease);
}

.isd-facet--availability .wc-block-product-filter-checkbox-list__item:hover .wc-block-product-filter-checkbox-list__text::after,
.isd-facet--availability .wc-block-product-filter-checkbox-list__item:focus-within .wc-block-product-filter-checkbox-list__text::after {
	transform: scaleX(1);
}

/* The grey rounded square Woo paints behind every box. */
.isd-facet .wc-block-product-filter-checkbox-list__input-wrapper::before {
	content: none;
}

.isd-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	width: 20px;
	height: 20px;
	border: 1px solid var(--isd-ink);
	border-radius: 3px;
	background: #fff;
}

.isd-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: var(--isd-ink);
	border-color: var(--isd-ink);
}

.isd-facet svg.wc-block-product-filter-checkbox-list__mark {
	width: 20px;
	height: 20px;
	color: #fff;
}

/* Woo prints the count as literal "(" and ")" text nodes either side of a
   span, so there is nothing to select and hide. Collapsing the type size on
   the parent and restoring it on the span removes the brackets and keeps the
   number, which is how the reference shows it. */
.isd-facet .wc-block-product-filter-checkbox-list__count {
	font-size: 0;
	color: var(--isd-muted);
}

.isd-facet .wc-block-product-filter-checkbox-list__count > span {
	font-size: 16px;
}

/* -------------------------------------------------------------------------
   Price facet
   ---------------------------------------------------------------------- */
.isd-facet .wc-block-product-filter-price-slider__content {
	column-gap: var(--isd-s4);
	row-gap: var(--isd-s5);
}

/* WooCommerce reserves a flexible middle track and caps each text field at
	60px. This sidebar has no middle control, so let the minimum and maximum
	fields share the row equally while the slider continues to span the row. */
.isd-facet--price .wc-block-product-filter-price-slider__content {
	grid-template-areas:
		"price-slider price-slider"
		"left-input right-input";
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.isd-facet .wc-block-product-filter-price-slider__range {
	margin: var(--isd-s2) 0 0;
}

/* The saved Woo block references Kadence's legacy palette slot inline. Keep
   the block markup intact and replace only the three archive slider roles. */
.isd-facet--price .wc-block-product-filter-price-slider {
	--wc-product-filter-price-slider-handle: var(--isd-archive-blue) !important;
	--wc-product-filter-price-slider-handle-border: var(--isd-archive-blue) !important;
	--wc-product-filter-price-slider: var(--isd-archive-blue) !important;
}

.isd-facet .wc-block-product-filter-price-slider__left,
.isd-facet .wc-block-product-filter-price-slider__right {
	min-width: 0;
}

/* The value bound into these inputs is wc_price() output, so it carries its
   own currency symbol — the reference's separate "$" prefix would double it. */
.isd-facet .wc-block-product-filter-price-slider__content input[type="text"] {
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 var(--isd-s5);
	border: 0;
	border-radius: var(--isd-r-pill);
	background: #eeeeee;
	font-family: var(--isd-body-font);
	font-size: 15px;
	line-height: 44px;
	text-align: center;
	color: var(--isd-ink);
	box-shadow: none;
}

/* Extra facet scoping intentionally beats WooCommerce's later-loading
	`.wc-block-product-filter-price-slider .text input` max-width declaration. */
.isd-facet--price .wc-block-product-filter-price-slider .text input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

.isd-facet .wc-block-product-filter-price-slider__content input[type="text"]:focus {
	outline: 2px solid var(--isd-ink);
	outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   Category tree
   Ported from the Kadence block CSS that used to be attached to the sidebar
   column of Shop Kit template 2357. Markup and behaviour still come from
   the "Expandable Product Categories" snippet and are untouched.
   ---------------------------------------------------------------------- */
.isd-shop__side .isupply-cat-tree,
.isd-shop__side .isupply-cat-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.isd-shop__side .isupply-cat-item {
	margin: 0;
}

.isd-shop__side .isupply-cat-row {
	display: flex;
	align-items: center;
	gap: var(--isd-s3);
	width: 100%;
	min-height: 52px;
	padding: var(--isd-s2) var(--isd-s3) var(--isd-s2)
		calc(var(--isd-s3) + (var(--isupply-cat-depth, 0) * 16px));
	border-left: 3px solid transparent;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.isd-shop__side .isupply-cat-row:hover {
	background: var(--isd-ground);
}

.isd-shop__side .isupply-cat-item.is-open > .isupply-cat-row,
.isd-shop__side .isupply-cat-item.is-current-ancestor > .isupply-cat-row {
	background: var(--isd-ground);
}

.isd-shop__side .isupply-cat-item.is-current > .isupply-cat-row,
.isd-shop__side .isupply-cat-item.is-current-ancestor > .isupply-cat-row {
	border-left-color: var(--isd-archive-blue);
}

.isd-shop__side .isupply-cat-arrow,
.isd-shop__side .isupply-cat-arrow-spacer {
	display: none;
}

.isd-shop__side .isupply-cat-title {
	flex: 1;
	min-width: 0;
	font-family: var(--isd-body-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--isd-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.isd-shop__side .isupply-cat-item.depth-0 > .isupply-cat-row .isupply-cat-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--isd-ink);
}

.isd-shop__side .isupply-cat-item.is-current > .isupply-cat-row .isupply-cat-title {
	font-weight: 700;
	color: var(--isd-archive-blue);
}

.isd-shop__side .isupply-cat-item.is-current-ancestor > .isupply-cat-row .isupply-cat-title {
	font-weight: 700;
	color: var(--isd-ink);
}

.isd-shop__side .isupply-cat-item > .isupply-cat-row:hover .isupply-cat-title,
.isd-shop__side .isupply-cat-item > .isupply-cat-row:focus-within .isupply-cat-title {
	color: var(--isd-archive-blue);
}

.isd-shop__side .isupply-cat-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 var(--isd-s2);
	border: 1px solid transparent;
	border-radius: var(--isd-r-pill);
	background: var(--isd-hairline);
	font-family: var(--isd-body-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--isd-muted);
}

.isd-shop__side .isupply-cat-item.is-current > .isupply-cat-row .isupply-cat-count {
	border-color: var(--isd-archive-blue);
	color: var(--isd-archive-blue);
}

.isd-shop__side .isupply-cat-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--isd-ink);
	font-size: 0;
	cursor: pointer;
}

.isd-shop__side .isupply-cat-toggle::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.isd-shop__side .isupply-cat-item.is-open > .isupply-cat-row .isupply-cat-toggle::before,
.isd-shop__side .isupply-cat-item.is-current-ancestor > .isupply-cat-row .isupply-cat-toggle::before {
	transform: rotate(45deg);
}

.isd-shop__side .isupply-cat-toggle-spacer {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
}

.isd-shop__side .isupply-cat-children {
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Grid
   WooCommerce and Kadence both size loop items with floats and percentage
   widths; the grid owns placement instead, so those are cleared.
   ---------------------------------------------------------------------- */
/* Every declaration in this section is marked because it is answering an
   !important rule. The site carries a body of Customizer "Additional CSS"
   written for the old Kadence card — it sizes the grid with
   `repeat(auto-fill, minmax(220px, 1fr))`, forces an 18px gap, and dresses
   every li.product as a bordered white box with a gold hover ring and a lift.
   That styling still applies to the Shop Kit cards on single product pages,
   so it is left in place and answered here instead, scoped to this grid. */
.woocommerce .isd-shop__main ul.products.isd-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--isd-s7) var(--isd-s5) !important;
	align-items: stretch !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .isd-shop__main ul.products.isd-grid::before,
.woocommerce .isd-shop__main ul.products.isd-grid::after {
	content: none;
}

/* Retracting the sidebar returns 348px (300px column + 48px gap) to the grid.
   Spending it on a fifth column rather than on four wider ones still leaves
   every card larger than before: at the 1290px Kadence content width the card
   goes from (1290 - 348 - 72)/4 = 217px to (1290 - 96)/5 = 239px. */
.woocommerce .isd-shop.is-filters-collapsed .isd-shop__main ul.products.isd-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Fighting Kadence's generated `.woocommerce ul.products li.product` sizing,
   which is inline and wins on load order. */
.woocommerce .isd-shop__main ul.products.isd-grid li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
	/* Strip the legacy card chrome: this design's card is the image tile, not
	   a bordered box around the whole entry. */
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	justify-content: flex-start !important;
	box-shadow: none !important;
}

/* The legacy gold hover ring. */
.woocommerce .isd-shop__main ul.products.isd-grid li.product::after {
	content: none !important;
}

/* The legacy hover lift and shadow. */
.woocommerce .isd-shop__main ul.products.isd-grid li.product:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Live-search placeholder cards preserve the grid geometry while the newest
   bounded AJAX request is in flight. They are decorative and aria-hidden. */
.isd-card--skeleton {
	display: flex;
	flex-direction: column;
}

.isd-skeleton {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--isd-r-pill);
	background: #e8eaed;
}

.isd-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
	transform: translateX(-100%);
	animation: isd-catalog-shimmer 1.1s ease-in-out infinite;
}

.isd-skeleton--tile {
	aspect-ratio: 1 / 1;
	border-radius: var(--isd-r-card);
}

.isd-skeleton--eyebrow {
	width: 38%;
	height: 10px;
	margin-top: var(--isd-s5);
}

.isd-skeleton--title,
.isd-skeleton--title-short {
	height: 16px;
	margin-top: var(--isd-s3);
}

.isd-skeleton--title-short {
	width: 72%;
	margin-top: var(--isd-s2);
}

.isd-skeleton--price {
	width: 45%;
	height: 18px;
	margin-top: var(--isd-s4);
}

@keyframes isd-catalog-shimmer {
	to {
		transform: translateX(100%);
	}
}

/* -------------------------------------------------------------------------
   Card
   ---------------------------------------------------------------------- */
.isd-card {
	display: flex;
	flex-direction: column;
}

.isd-card__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--isd-r-card);
	background: var(--isd-tile-bg);
	overflow: hidden;
}

.isd-card__media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Answering `ul.products li.product img { width:100% !important; transition:
   ... !important }` and its scale(1.07) hover from the legacy sheet. */
.isd-card .isd-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.4s var(--isd-ease) !important;
}

.isd-card:hover .isd-card__media img {
	transform: scale(1.03) !important;
}

.isd-card__badge {
	position: absolute;
	top: var(--isd-s3);
	left: var(--isd-s3);
	z-index: 2;
	padding: 7px 14px;
	border-radius: var(--isd-r-pill);
	font-family: var(--isd-body-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.isd-card__badge--sale {
	background: var(--isd-sale);
}

.isd-card__badge--oos {
	background: var(--isd-muted);
}

/* The hover control.
   Shop Kit styles .kt-woo-quickview-button through a selector that repeats
   the class six times, so the transition below is marked to win; everything
   else it sets (inline-flex, centring, gap) is what we want anyway. */
.isd-card__cta {
	position: absolute;
	right: var(--isd-s5);
	bottom: var(--isd-s5);
	left: var(--isd-s5);
	z-index: 2;
	height: 56px;
	padding: 0 var(--isd-s4);
	border: 0;
	border-radius: var(--isd-r-pill);
	background: #fff;
	font-family: var(--isd-body-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--isd-ink);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.22s var(--isd-ease), transform 0.22s var(--isd-ease),
		color 0.34s var(--isd-ease) !important;
}

.isd-card__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--isd-archive-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.34s var(--isd-ease);
}

.isd-card__cta-label {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--isd-s4);
	color: var(--isd-ink);
	pointer-events: none;
	transition: color 0.34s var(--isd-ease);
}

.isd-card:hover .isd-card__cta,
.isd-card:focus-within .isd-card__cta {
	opacity: 1;
	transform: translateY(0);
}

.isd-card__cta:hover,
.isd-card__cta:focus-visible {
	color: #fff;
}

.isd-card__cta:hover .isd-card__cta-label,
.isd-card__cta:focus-visible .isd-card__cta-label {
	color: #fff;
}

/* Keep the label independent from Shop Kit's high-specificity button colour.
   It spans the full control so its white wipe front shares the black fill's
   coordinate space and the two colours meet at the same point. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.isd-card__cta-label {
		background-image: linear-gradient(to right, #fff 0 50%, var(--isd-ink) 50% 100%);
		background-position: 100% 0;
		background-repeat: no-repeat;
		background-size: 200% 100%;
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		transition: background-position 0.34s var(--isd-ease);
	}

	.isd-card__cta:hover .isd-card__cta-label,
	.isd-card__cta:focus-visible .isd-card__cta-label {
		background-position: 0 0;
		color: transparent;
	}
}

.isd-card__cta:hover::before,
.isd-card__cta:focus-visible::before {
	transform: scaleX(1);
}

/* Without a pointer there is no hover to reveal the control, so it stays. */
@media (hover: none) {
	.isd-card__cta {
		opacity: 1;
		transform: none;
	}
}

.isd-card__eyebrow {
	display: block;
	margin-top: var(--isd-s5);
	font-family: var(--isd-body-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--isd-muted);
}

/* WooCommerce's own stylesheet carries
   `.woocommerce ul.products li.product h3 { padding:.5rem 0; margin:0;
   font-size:1em; font-weight:500 }` at (0,3,2), which out-specifies a bare
   class selector — so the size, weight and margin below need the full grid
   prefix to take effect, and the padding has to be cleared explicitly: it
   sits inside the overflow clip and lets a third line show under the clamp. */
.woocommerce .isd-shop__main ul.products.isd-grid li.product .isd-card__title {
	margin: var(--isd-s3) 0 0;
	padding: 0;
	font-family: var(--isd-heading-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--isd-ink);
	/* Product names here run long. Two lines, with the space for both always
	   reserved, so the price and the options pill share one baseline across a
	   row instead of stepping up and down with the title. The fixed height is
	   what guarantees no third line, independent of the clamp. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: calc(18px * 1.35 * 2);
}

.isd-card__title a {
	color: inherit;
	text-decoration: none;
}

.isd-card__title a:hover,
.isd-card__title a:focus-visible {
	text-decoration: underline;
}

.isd-card__price {
	display: block;
	margin-top: var(--isd-s3);
	font-family: var(--isd-body-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--isd-ink);
}

.isd-card__price ins {
	color: var(--isd-sale);
	text-decoration: none;
}

.isd-card__price del {
	margin-left: var(--isd-s2);
	font-weight: 400;
	color: var(--isd-muted);
}

/* Stands in for the reference design's colour swatches: this catalogue has
   no colour attribute, so the variation count is what that slot can honestly
   carry. */
.isd-card__variants {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: var(--isd-s4);
	padding: 5px 10px;
	border-radius: var(--isd-r-pill);
	background: var(--isd-hairline);
	font-family: var(--isd-body-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--isd-muted);
}

/* -------------------------------------------------------------------------
   Quickview modal
   The shell is Shop Kit's (GLightbox + .kt-quickview-content); these rules
   restyle it and its parts to the reference layout.
   ---------------------------------------------------------------------- */
.quickview-lightbox .kt-woo-quickview-content {
	border-radius: var(--isd-r-modal);
	background: #fff;
	overflow: hidden;
}

.quickview-lightbox .kt-quickview-content {
	grid-template-columns: 52% 48%;
	gap: 0;
}

.quickview-lightbox .kt-quickview-content-left {
	padding: var(--isd-s5);
	background: #fff;
}

/* Shop Kit crops gallery images to fill; this catalogue keeps native aspect
   ratios (woocommerce_thumbnail_cropping is off), so they are letterboxed on
   the tile ground instead of being cut. */
.quickview-lightbox .kt-quickview-content-left .kt-image-slide img {
	height: 100%;
	object-fit: contain;
	background: var(--isd-tile-bg);
	border-radius: var(--isd-r-tile);
}

.quickview-lightbox .kt-quickview-content-right {
	padding: var(--isd-s7) var(--isd-s6);
	overflow-y: auto;
}

.isd-qv__badge {
	display: inline-flex;
	padding: 7px 16px;
	border-radius: var(--isd-r-pill);
	font-family: var(--isd-body-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.isd-qv__badge--sale {
	background: var(--isd-sale);
}

.isd-qv__badge--oos {
	background: var(--isd-muted);
}

.isd-qv__title {
	margin: var(--isd-s4) 0 0;
	font-family: var(--isd-heading-font);
	font-size: clamp(26px, 2.4vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--isd-ink);
}

.isd-qv__title a {
	color: inherit;
	text-decoration: none;
}

.isd-qv__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--isd-s3);
	margin: var(--isd-s4) 0 0;
	font-family: var(--isd-body-font);
	font-size: 15px;
	color: var(--isd-muted);
}

.isd-qv__meta-key {
	color: var(--isd-muted);
}

.isd-qv__meta a {
	color: var(--isd-blue);
	text-decoration: underline;
}

.isd-qv__meta-sep {
	color: var(--isd-hairline);
}

.isd-qv__price {
	margin-top: var(--isd-s5);
	font-family: var(--isd-body-font);
	font-size: clamp(24px, 2vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--isd-ink);
}

.isd-qv__price ins {
	color: var(--isd-sale);
	text-decoration: none;
}

.isd-qv__price del {
	margin-left: var(--isd-s3);
	font-size: 0.72em;
	font-weight: 400;
	color: var(--isd-muted);
}

.isd-qv__price .isd-quote-price {
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--isd-muted);
}

.isd-qv__features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isd-s3) var(--isd-s5);
	margin: var(--isd-s5) 0 0;
	padding: 0;
	list-style: none;
}

.isd-qv__feature {
	display: flex;
	align-items: center;
	gap: var(--isd-s2);
	margin: 0;
	font-family: var(--isd-body-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--isd-ink);
}

.isd-qv__tick {
	width: 16px;
	height: 9px;
	border-left: 2px solid var(--isd-ink);
	border-bottom: 2px solid var(--isd-ink);
	transform: rotate(-45deg) translateY(-2px);
}

.isd-qv__stock {
	margin: var(--isd-s5) 0 0;
	font-family: var(--isd-body-font);
	font-size: 15px;
	font-weight: 700;
}

.isd-qv__stock.is-in-stock {
	color: #1f7a4d;
}

.isd-qv__stock.is-out-of-stock {
	color: var(--isd-sale);
}

.isd-qv__desc {
	margin-top: var(--isd-s5);
}

.isd-qv__desc p {
	margin: 0;
	font-family: var(--isd-body-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--isd-muted);
}

.isd-qv__desc p + p {
	margin-top: 1em;
}

.isd-qv__cart {
	margin-top: var(--isd-s6);
}

.isd-qv__quote {
	height: 56px;
	padding-inline: var(--isd-s6);
	font-size: 16px;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1400px) {
	.woocommerce .isd-shop__main ul.products.isd-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.woocommerce .isd-shop.is-filters-collapsed .isd-shop__main ul.products.isd-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.isd-catalog-mobile {
		position: sticky;
		top: var(--isd-catalog-mobile-top, 0px);
		z-index: 1100;
		display: block;
		box-sizing: border-box;
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding: 16px max(20px, calc((100vw - var(--global-content-width, 1290px)) / 2));
		border-bottom: 1px solid var(--isd-hairline);
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 8px 24px rgba(10, 49, 95, 0.07);
		backdrop-filter: blur(12px);
	}

	.isd-catalog-mobile__search-row {
		display: grid;
		grid-template-columns: minmax(108px, 34%) minmax(0, 1fr);
		min-height: 56px;
		border: 1px solid var(--isd-hairline);
		border-radius: var(--isd-r-pill);
		background: var(--isd-ground);
	}

	.isd-mobile-category {
		position: relative;
		display: flex;
		min-width: 0;
		align-items: center;
		border-right: 1px solid var(--isd-hairline);
	}

	.isd-mobile-category__select {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 54px;
		margin: 0;
		padding: 0 42px 0 22px;
		border: 0;
		background: transparent;
		-webkit-appearance: none;
		appearance: none;
		font-family: var(--isd-body-font);
		font-size: 16px;
		font-weight: 700;
		color: var(--isd-ink);
		text-overflow: ellipsis;
		cursor: pointer;
	}

	.isd-mobile-category__chevron {
		position: absolute;
		right: 18px;
		top: 50%;
		display: inline-flex;
		width: 16px;
		height: 16px;
		transform: translateY(-50%) rotate(180deg);
		pointer-events: none;
	}

	.isd-mobile-category__chevron svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.isd-catalog-mobile__search {
		min-width: 0;
	}

	.isd-catalog-mobile__search .isd-catalog-search__input,
	.isd-catalog-mobile__search .isd-catalog-search input[type="search"].isd-catalog-search__input {
		height: 54px;
		padding-left: 22px;
		border: 0;
		border-radius: 0 var(--isd-r-pill) var(--isd-r-pill) 0;
		background: transparent;
		font-size: 16px;
		line-height: 54px;
	}

	.isd-catalog-mobile__search .isd-catalog-search__input:focus,
	.isd-catalog-mobile__search .isd-catalog-search input[type="search"].isd-catalog-search__input:focus {
		outline: 2px solid var(--isd-ink);
		outline-offset: 1px;
		box-shadow: none;
	}

	.isd-catalog-mobile__search .isd-catalog-search__icon {
		display: none;
	}

	.isd-catalog-mobile__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin-top: 14px;
	}

	.isd-shop__count--mobile {
		font-size: 16px;
	}

	.isd-shop__count--mobile::before {
		display: none;
	}

	.isd-filter-drawer-trigger {
		display: none;
		gap: 10px;
		height: 48px;
		padding: 0 24px;
		border-color: var(--opt1-ink, #0b0d12);
		background: var(--opt1-white, #fff);
		font-size: 16px;
	}

	.isd-archive-enhanced .isd-filter-drawer-trigger {
		display: inline-flex;
	}

	.isd-filter-drawer-trigger .isd-filter-toggle__icon,
	.isd-filter-drawer-trigger .isd-filter-toggle__icon svg {
		width: 20px;
		height: 20px;
	}

	.isd-shop {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"side"
			"main";
		margin-top: var(--isd-s5);
	}

	.isd-shop__bar {
		display: none;
	}

	.isd-shop__side {
		margin-bottom: var(--isd-s6);
	}

	.isd-archive-enhanced .isd-shop__side,
	.isd-archive-enhanced .isd-shop__main .kadence-shop-top-row {
		display: none;
	}

	.isd-archive-enhanced .isd-shop {
		grid-template-areas: "main";
	}

	.quickview-lightbox .kt-quickview-content {
		grid-template-columns: 1fr;
	}

	.quickview-lightbox .kt-quickview-content-right {
		padding: var(--isd-s5);
	}
}

@media (max-width: 880px) {
	.woocommerce .isd-shop__main ul.products.isd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--isd-s6) var(--isd-s4) !important;
	}

	.woocommerce .isd-shop.is-filters-collapsed .isd-shop__main ul.products.isd-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	.isd-catalog-mobile {
		padding-inline: 16px;
	}

	.isd-catalog-mobile__search-row {
		grid-template-columns: minmax(94px, 36%) minmax(0, 1fr);
	}

	.isd-mobile-category__select {
		padding-left: 18px;
		font-size: 15px;
	}

	.isd-catalog-mobile__search .isd-catalog-search__input,
	.isd-catalog-mobile__search .isd-catalog-search input[type="search"].isd-catalog-search__input {
		padding-right: 40px;
		padding-left: 16px;
		font-size: 15px;
	}

	.isd-filter-drawer {
		width: 100%;
		height: calc(100dvh - 12px);
		margin: 12px 0 0;
		border-radius: 24px 24px 0 0;
	}

	.isd-filter-drawer__header {
		min-height: 82px;
		padding: 0 24px;
	}

	.isd-filter-drawer__header h2 {
		font-size: 26px;
	}

	.isd-filter-drawer__body {
		padding: 20px 24px 32px;
	}

	.isd-filter-drawer__sort {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.isd-filter-drawer__footer {
		padding-right: 24px;
		padding-left: 24px;
	}

	.isd-mobile-price__values {
		gap: 10px;
	}

	.isd-mobile-price__values label {
		gap: 6px;
	}

	.isd-mobile-price__values input {
		padding-inline: 14px;
	}

	.woocommerce .isd-shop__main ul.products.isd-grid,
	.woocommerce .isd-shop.is-filters-collapsed .isd-shop__main ul.products.isd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.isd-card__cta {
		right: var(--isd-s4);
		bottom: var(--isd-s4);
		left: var(--isd-s4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.isd-btn::before,
	.isd-filter-toggle__chevron,
	.isd-facet__toggle > span::after,
	.isd-facet--availability .wc-block-product-filter-checkbox-list__text::after,
	.isd-card__cta,
	.isd-card__cta-label,
	.isd-card__cta::before,
	.isd-card__media img,
	.isd-shop__side .isupply-cat-row,
	.isd-shop__side .isupply-cat-toggle::before {
		transition: none !important;
	}

	.isd-catalog-search__loader,
	.isd-skeleton::after {
		animation: none;
	}

	.isd-card__media img {
		transform: none !important;
	}
}

@media (forced-colors: active) {
	.isd-card__cta-label,
	.isd-card__cta:hover .isd-card__cta-label,
	.isd-card__cta:focus-visible .isd-card__cta-label {
		background: none;
		color: ButtonText;
		-webkit-text-fill-color: currentColor;
	}
}

/* -------------------------------------------------------------------------
   Native product-category description

   WooCommerce formats and sanitizes the built-in taxonomy Description field.
   This layer adds only readable WYSIWYG typography below the catalogue.
   ---------------------------------------------------------------------- */
.isd-category-description {
	width: min(100%, 88ch);
	margin: clamp(40px, 5vw, 72px) auto var(--isd-s6);
	font-family: var(--isd-body-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--isd-body);
}

.isd-category-description .term-description {
	margin: 0;
}

.isd-category-description > .term-description > :first-child {
	margin-top: 0;
}

.isd-category-description > .term-description > :last-child {
	margin-bottom: 0;
}

.isd-category-description :is(h2, h3, h4) {
	margin: 1.6em 0 0.6em;
	font-family: var(--isd-heading-font);
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	color: var(--isd-ink);
}

.isd-category-description h2 {
	font-size: clamp(1.45rem, 2.2vw, 1.75rem);
}

.isd-category-description h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
}

.isd-category-description h4 {
	font-size: 1.1rem;
}

.isd-category-description :is(p, ul, ol, blockquote) {
	margin: 0 0 1em;
}

.isd-category-description :is(ul, ol) {
	padding-left: 1.4em;
}

.isd-category-description li + li {
	margin-top: 0.4em;
}

.isd-category-description a {
	color: var(--isd-blue);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.isd-category-description strong {
	font-weight: 700;
}

.isd-category-description blockquote {
	padding-left: 1em;
	border-left: 3px solid var(--isd-hairline);
}

/* Card control when no quickview implementation is present: same look, real link. */
.isd-card__cta--link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}