/* =========================================================================
   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.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Tokens — one spacing scale shared by hero, sidebar, grid, card and modal
   so the rhythm stays consistent across all four.
   ---------------------------------------------------------------------- */
.isd-hero,
.isd-shop,
.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-gold: #d0a54a;

	--isd-sans: var(--global-body-font-family, "Archivo", sans-serif);
	--isd-serif: var(--global-heading-font-family, "Newsreader", serif);

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

/* -------------------------------------------------------------------------
   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-sans);
	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: #fff;
	color: var(--isd-ink);
	transition: color 0.34s var(--isd-ease);
}

.isd-btn--light::before {
	background: var(--isd-ink);
}

.isd-btn--light:hover,
.isd-btn--light:focus-visible {
	color: #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: #fff;
	border: 1px solid var(--isd-hairline);
	color: var(--isd-ink);
	transition: color 0.34s var(--isd-ease), border-color 0.34s var(--isd-ease);
}

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

.isd-btn--outline:hover,
.isd-btn--outline:focus-visible {
	color: #fff;
	border-color: var(--isd-ink);
}

/* -------------------------------------------------------------------------
   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(--isd-ink);
	color: #fff;
}

.isd-hero__bg {
	position: absolute;
	inset: 0;
	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 {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.isd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(26, 32, 44, 0.9) 0%,
		rgba(26, 32, 44, 0.78) 55%,
		rgba(26, 32, 44, 0.58) 100%
	);
}

.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(255, 255, 255, 0.35);
}

.isd-hero .custom-woo-breadcrumb {
	font-family: var(--isd-sans);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.isd-hero .custom-woo-breadcrumb a {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 400;
	text-decoration: none;
}

.isd-hero .custom-woo-breadcrumb a:hover,
.isd-hero .custom-woo-breadcrumb a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

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

.isd-hero__sub {
	margin: var(--isd-s6) 0 0;
	max-width: 46ch;
	font-family: var(--isd-sans);
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
}

/* Nothing entered for this category yet — collapse rather than leave a gap.
   Matching on :empty rather than a server-side class means the node starts
   showing the moment the AJAX category switcher fills it in. */
.isd-hero__sub:empty {
	display: none;
}

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

/* Either body field may be the one that is filled, so both are in the DOM
   for the AJAX category switcher to maintain. Collapse an empty one, and
   stand the legacy field down whenever the rich field has content. */
.isd-hero__body:empty {
	display: none;
}

.isd-hero__inner:has(.isd-hero__body--rich:not(:empty)) .isd-hero__body--legacy {
	display: none;
}

.isd-hero__body p {
	margin: 0;
	font-family: var(--isd-sans);
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
}

.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-sans);
	font-size: 16px;
	color: var(--isd-muted);
}

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

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

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

.isd-facet__toggle {
	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-sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--isd-ink);
	cursor: pointer;
}

/* 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-sans);
	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-hairline);
}

.isd-shop__search .wp-block-kadence-search {
	margin: 0;
}

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

.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-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--isd-ink);
}

/* 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);
}

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

.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-sans);
	font-size: 15px;
	line-height: 44px;
	text-align: center;
	color: var(--isd-ink);
	box-shadow: 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, so the tree keeps the look and the gold
   current-item accent it already had. 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-gold);
}

.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-sans);
	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-gold);
}

.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-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-sans);
	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: rgba(208, 165, 74, 0.45);
	color: var(--isd-gold);
}

.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;
}

/* -------------------------------------------------------------------------
   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-sans);
	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-sans);
	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-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.34s var(--isd-ease);
}

.isd-card__cta-label {
	position: relative;
	z-index: 1;
}

.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::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-sans);
	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-sans);
	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-sans);
	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);
}

/* The quote prompt substituted for the 254 products with no price. */
.isd-card__price .isd-quote-price {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	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-sans);
	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-sans);
	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-sans);
	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-sans);
	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-sans);
	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-sans);
	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-sans);
	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-sans);
	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-shop {
		grid-template-columns: 260px minmax(0, 1fr);
		column-gap: var(--isd-s6);
	}

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

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

@media (max-width: 880px) {
	.isd-shop {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"bar"
			"side"
			"main";
	}

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

	.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) {
	.woocommerce .isd-shop__main ul.products.isd-grid,
	.woocommerce .isd-shop.is-filters-collapsed .isd-shop__main ul.products.isd-grid {
		grid-template-columns: 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-card__cta,
	.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-card__media img {
		transform: none !important;
	}
}

/* ---------------------------------------------------------------- *
 * Category bottom description
 *
 * Owned by the storefront plugin, placed by archive-product.php below the
 * whole two column body. Shop Kit printed this from woocommerce_after_shop_loop,
 * which on this layout lands inside the grid column; this is the full content
 * width, which is what the long-form SEO copy was written for.
 * ---------------------------------------------------------------- */

.isupply-category-description {
	max-width: 100%;
	margin: 40px 0 10px;
	padding-top: 30px;
	border-top: 1px solid #e5eaf2;
}

.isupply-category-description > *:first-child {
	margin-top: 0;
}

.isupply-category-description > *:last-child {
	margin-bottom: 0;
}

.isupply-category-description h2 {
	margin: 28px 0 12px;
	font-size: 1.5rem;
	line-height: 1.25;
	text-wrap: balance;
}

.isupply-category-description h3 {
	margin: 22px 0 10px;
	font-size: 1.15rem;
	line-height: 1.3;
}

.isupply-category-description p,
.isupply-category-description li {
	max-width: 78ch;
	line-height: 1.65;
}

.isupply-category-description ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.isupply-category-description li {
	margin-bottom: 8px;
}

/* 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;
}