/* ============================================================
   CATEGORY / ARCHIVE PAGES
   ============================================================

   Figma "Category Page" file (tWIC4iiiKdgCbUMpqpz86w) → "Standard Category Page".
   Desktop frame (1:1251) at 1920: content column 1608 wide, 156px side margins.
     breadcrumbs 14/22 Source Sans SemiBold, Text/Secondary-Text, 80px from the top
     category name Inegale 36/38 in Text/Primary
     a 2px Neutral-Accent rule under it
     the filter row: count 16/26 Text/Secondary-Text beside the sort control
     product grid: 4 columns, 24px apart, rows 24px apart, cards 384 wide
     card: image 384x316 with 4px corners, chips over the top-left, then 24px to the
     details — price (CTA-Text SemiBold 16/26, regular price 14/22 struck through in
     Secondary-Text), name Inegale 29.12/32, description 16/26, 16px apart.

   This file loads after style.css, whose older archive rules it replaces; a few
   selectors therefore carry !important where style.css used it. */

/* ---- Header: breadcrumbs + name + rule (no hero band) ---- */
body #wwg_archive_header.wwg_archive_header_plain {
	padding: 24px 0;  /* 24 under the nav, 24 from the rule down to the filter row */
	background: none !important;
	color: var(--wwg-color-text-primary);
	min-height: 0;
}
body #wwg_archive_header.wwg_archive_header_plain .wwg_row_sitewidth {
	width: calc(100% - 80px);
	max-width: 1608px;
	margin: 0 auto;
}
body #wwg_archive_header.wwg_archive_header_plain h1 {
	margin: 0;
	padding: 0;
	color: var(--wwg-color-text-primary);
	font-family: var(--wwg-font-display);
	font-size: var(--wwg-h4-size) !important;   /* Figma 36/38 */
	line-height: 38px !important;
	letter-spacing: var(--wwg-h4-tracking) !important;
}
/* Figma's header is breadcrumbs, the category name and the rule — no description. */
body #wwg_archive_header.wwg_archive_header_plain .wwg_archive_desc {
	display: none;
}

/* Breadcrumbs — WooCommerce's own markup, restyled */
.wwg-breadcrumbs {
	margin: 0 0 24px;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	font-weight: var(--wwg-btn-weight);
	color: var(--wwg-color-text-secondary);
}
.wwg-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.wwg-breadcrumbs a:hover {
	text-decoration: underline;
}
.wwg-breadcrumb-sep {
	margin: 0 8px;
	font-weight: 400;
}

/* The rule under the header (Figma "Line 2": 2px Neutral-Accent, content width) */
body #wwg_archive_content {
	position: relative;
	max-width: 1608px;
	padding-top: 0;  /* the filter row above it carries the 24px */
}
/* As a block column, the template's whitespace becomes stray line boxes above the grid. */
body #wwg_archive_col_results {
	display: flex;
	flex-direction: column;
}
/* ---- Chips — Figma "Frame 21" (107:2666) styling, carried onto the filter row: a Clear All
   text button, then the selected filters as pills 16px apart and 40px along. They stay on one
   line; wwg-category.js hides whatever will not fit and counts it in an "and X more". ---- */
body .wwg_archive_info_left {
	gap: 40px;
	flex: 1 1 auto;
	min-width: 0;
}
body .wwg_chips {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
body .wwg_chips .wwg_chip_name {
	white-space: nowrap;
}
body .wwg_chips_more {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	color: var(--wwg-color-text-secondary);
}
body .wwg_chips_more[hidden] {
	display: none;
}
body .wwg_chips ul.wwg_chips_list {
	margin: 0 !important;
	overflow: hidden !important;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body .wwg_chips ul.wwg_chips_list li.wwg_chip {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
}
body .wwg_chips ul.wwg_chips_list li.wwg_chip[hidden] {
	display: none;
}
/* A selected filter: 14/22 in Button-Primary-Text on a Secondary-Background pill, 4/4/4/16,
   then the close glyph exported from the file. */
body .wwg_chips li.wwg_chip:not(.wwg_chip_clear) > a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 32px;
	padding: 4px 4px 4px 16px;
	border: 0 !important;
	border-radius: var(--wwg-radius-pill);
	background: var(--wwg-color-bg-secondary) !important;
	color: var(--wwg-color-text-strong) !important;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size) !important;
	line-height: var(--wwg-text-sm-line);
	font-weight: 400 !important;
	text-decoration: none;
}
body .wwg_chips .wwg_chip_content {
	display: flex;
	align-items: center;
	gap: 16px;
}
body .wwg_chips .wwg_chip_remove {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	font-size: 0;  /* the plugin prints a multiplication sign */
	background-color: var(--wwg-color-text-secondary);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z'/></svg>") center / 14px 14px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z'/></svg>") center / 14px 14px no-repeat;
}
/* "Clear All" is a borderless button — underlined, per the Design System PDF — and sits 40px
   from the first pill (16 of list gap plus 24). */
body .wwg_chips ul.wwg_chips_list li.wwg_chip_clear {
	margin-right: 24px !important;  /* 24 + the list's 16 gap = Figma's 40 */
}
body .wwg_chips li.wwg_chip.wwg_chip_clear > a {
	display: flex;
	align-items: center;
	height: 32px;
	padding: 7px 16px 7px 0;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-sm-size) !important;
	line-height: 18px;
	font-weight: var(--wwg-btn-weight) !important;
	color: var(--wwg-color-text-strong) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}
body .wwg_chips li.wwg_chip.wwg_chip_clear > a:hover {
	color: var(--wwg-color-text-strong-hover) !important;
}
body .wwg_chips li.wwg_chip_clear .wwg_chip_remove,
body .wwg_chips li.wwg_chip_clear .wwg_chip_content {
	gap: 0;
}
body .wwg_chips li.wwg_chip_clear .wwg_chip_remove {
	display: none;  /* Figma's Clear All carries no close glyph */
}
body #wwg_archive_header.wwg_archive_header_plain::after {
	content: '';
	display: block;
	width: calc(100% - 80px);
	max-width: 1608px;
	height: 2px;
	margin: 4px auto 0;  /* Figma: the rule sits 4px under the name */
	background: var(--wwg-color-accent-neutral);
}

/* ---- Filter row: count + sort, as in Figma's "Filter Container" ---- */
body div.wwg_archive_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 16px 24px;
	box-sizing: border-box;
	width: calc(100% - 80px);
	max-width: 1608px;
	min-height: 40px;
	margin: 0 auto 24px;
}
body .wwg_archive_info_left {
	display: flex;
	align-items: center;  /* keeps the button on the sort control's centre line */
	overflow: hidden;
}
body .wwg_archive_info_right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;  /* the chips shrink, not the count and sort */
	gap: 32px;
	margin-left: auto;
}
body p.wwg_archive_info_showing {
	margin: 0;
	white-space: nowrap;
	padding: 0;
	color: var(--wwg-color-text-secondary);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	font-weight: 400;
}
/* Sort control: 2px Neutral-Accent border, 4px corners, 16/26 label + value */
body .wwg_archive_sort {
	display: flex;
	align-items: center;
	gap: 8px;
}
body .wwg_archive_sort_label {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	font-weight: var(--wwg-btn-weight);
	color: var(--wwg-color-text-strong);
	white-space: nowrap;
}
body .wwg_archive_info select {
	min-width: 208px;
	height: 34px;
	padding: 4px 8px 4px 16px !important;
	border: 2px solid var(--wwg-color-accent-neutral) !important;
	border-radius: var(--wwg-radius-lg) !important;
	background-color: var(--wwg-color-bg-primary) !important;
	color: var(--wwg-color-text-strong) !important;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size) !important;
	line-height: var(--wwg-text-md-line);
}

/* ---- Grid — Figma runs 384px cards 24px apart: four across the 1608 content width when
   there is no filter column (Product List, 11:1159), three across the 1200 that is left
   beside one (Frame 36, 142:4021). ---- */
body .wwg_archive_results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 72px 24px; /* Figma: 24px between rows plus the card's own 48px bottom padding */
	align-items: start;
}
/* Beside the filter column there is room for three, not four. */
@media (min-width: 1025px) {
	body:not(.wwg_filters_hidden) #wwg_archive_col_sidebar ~ #wwg_archive_col_results .wwg_archive_results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
body .wwg_archive_results .wwg_grid_item {
	width: auto !important;
	margin: 0;
	background: none;
	overflow: visible;
}

/* ---- Card ---- */
body .wwg_grid_item_product {
	border: 0;
	border-radius: 0;
}
body .wwg_grid_item_product > a {
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-decoration: none;
}
body .wwg_grid_item_product .wwg_grid_item_imglink {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--wwg-radius-lg);
}
body .wwg_grid_item_product .wwg_grid_item_imglink img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 384 / 316;
	object-fit: cover;
}
/* Chips over the image. The card's chip is the Style Guide button component: the file has it
   as Theme=Fixed, Color / Use=Visibility, Size=md, and this is the same component in the CTA
   colour use — #8CCECA behind #2B2929, which is exactly what the CTA fill and on-fill tokens
   carry, so a Signature page recolours it without another rule. The rest of the variant is
   unchanged and already matched: 8/16 padding, pill radius, Source Sans 600 16/20, 0.28. */
.wwg_grid_item_chips {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: calc(100% - 16px);
}
.wwg_grid_item_chip {
	display: inline-block;
	padding: 8px 16px;
	background: var(--wwg-btn-cta-fill);
	border-radius: var(--wwg-radius-pill);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-md-size);
	line-height: var(--wwg-btn-md-line);
	font-weight: var(--wwg-btn-weight);
	letter-spacing: var(--wwg-btn-tracking);
	color: var(--wwg-btn-cta-on-fill);
}
/* Figma "Product Pricing" sets 4px between the price and the name; "Product Info" 8px between
   that pair and the description. */
body .wwg_grid_item_info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}
/* Price: CTA-Text SemiBold; any struck-through regular price beside it in Secondary-Text */
/* Figma: a normal price is Source Sans 400 16/26 in Text/Primary; a sale price is CTA-Text
   SemiBold with the old price struck through beside it. */
body p.wwg_grid_item_price {
	order: 1;
	margin: 0;
	padding: 0;
	color: var(--wwg-color-text-primary);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	font-weight: 400;
}
body p.wwg_grid_item_price:has(.wwg_grid_item_regprice),
body p.wwg_grid_item_price:has(del) {
	color: var(--wwg-color-text-cta);
	font-weight: var(--wwg-btn-weight);
}
/* The old price beside a sale price: "reg. $175" in Secondary-Text 14/22, no strikethrough
   (Figma "Product Regular Price"). A <del> from WooCommerce elsewhere reads the same way. */
body p.wwg_grid_item_price .wwg_grid_item_regprice,
body p.wwg_grid_item_price del {
	margin-left: 8px;
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	font-weight: 400;
	color: var(--wwg-color-text-secondary);
	text-decoration: none;
}
body p.wwg_grid_item_price del::before {
	content: 'reg. ';
}
body p.wwg_grid_item_price .wwg_grid_item_regprice .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
body p.wwg_grid_item_price ins {
	text-decoration: none;
	color: inherit;
}
/* Figma's card name is Inegale 29.12/32 Regular. wwg-base.css gives card titles the Source
   Sans SemiBold "product name" role with !important, so this has to answer in kind. */
body .wwg_archive_results .wwg_grid_item_product h2,
body .wwg_archive_results .wwg_grid_item_product h2 .wwg_grid_item_info_title {
	order: 2;
	margin: 0;
	padding: 0;
	font-family: var(--wwg-font-display) !important;
	font-size: var(--wwg-h5-size) !important;  /* Figma 29.12/32 */
	line-height: var(--wwg-h5-line) !important;
	letter-spacing: var(--wwg-h5-tracking) !important;
	font-weight: 400 !important;
	color: var(--wwg-color-text-primary);
}
body .wwg_grid_item_product h2 .wwg_grid_item_info_title {
	color: inherit;
}
body p.wwg_grid_item_desc {
	order: 3;
	margin: 4px 0 0;  /* 4px gap + 4px margin = Figma 8 */
	padding: 0;
	color: var(--wwg-color-text-primary);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}

/* ---- Narrower screens: the same grid, fewer columns ---- */
@media (max-width: 1366px) {
	body .wwg_archive_results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Figma draws only the desktop grid; while the filter column is still beside the grid a
   column comes out at each step so the cards stay near 384 rather than shrinking. */
@media (min-width: 1025px) and (max-width: 1366px) {
	body:not(.wwg_filters_hidden) #wwg_archive_col_sidebar ~ #wwg_archive_col_results .wwg_archive_results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 1024px) {
	body .wwg_archive_results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 72px 16px;  /* Figma's 412px frame: 16px between columns, the same 24+48 down */
	}
	body #wwg_archive_header.wwg_archive_header_plain h1 {
		font-size: var(--wwg-h4-size-mobile) !important;
		line-height: var(--wwg-h4-line-mobile) !important;
	}
	body .wwg_grid_item_product h2 {
		font-size: var(--wwg-h5-size-mobile) !important;
		line-height: var(--wwg-h5-line-mobile) !important;
	}
}
@media (max-width: 600px) {
	body .wwg_archive_results {
		grid-template-columns: minmax(0, 1fr);
	}
	body div.wwg_archive_info {
		flex-wrap: wrap;
	}
	body .wwg_archive_info_right {
		flex-wrap: wrap;
		gap: 16px;
	}
}

/* ---- Filter panel — Figma "Standard Category Page - Filtered Some" > Main Container
   (39:1708). A 384px column, 40px between sections. Each section is a 40px header — 4px
   corners, 1px border, 16px side padding, an Inegale 22.25/32 title and a 24px chevron —
   over options 16px apart. Open: Secondary-Background fill, Focus-Accent border, chevron
   up in Button-Primary-Text. Closed: page background, Neutral-Accent border, chevron down
   in Secondary-Text. An option is a 24px toggle, 16px, the label in Source Sans 16/26,
   then its count 8px further on in Secondary-Text. ---- */
body #wwg_archive_col_sidebar {
	flex: 0 0 384px;
	width: 384px;
	margin-right: 24px;
}
/* Figma's "Filter" button above the groups (39:3795): 40px tall, the tune glyph at 24px,
   then the label at 20/32. */
body .wwg_filter_header {
	display: flex;
	align-items: center;
	flex: 0 0 auto;  /* never squeezed by the chips beside it */
	gap: 24px;
	box-sizing: border-box;
	height: 40px;
	width: fit-content;
	margin: 0;  /* the theme's legacy button rule adds 40px underneath */
	padding: 4px 16px 4px 8px;
	border-radius: var(--wwg-radius-lg);
	background: var(--wwg-color-bg-primary);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-lg-size);
	line-height: var(--wwg-text-lg-line);
	font-weight: 400;
	color: var(--wwg-color-text-strong);
	border: 0;
	cursor: pointer;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
}
body .wwg_filter_header:focus-visible {
	outline: 2px solid var(--wwg-color-accent-focus);
	outline-offset: 2px;
}
body.wwg_filters_hidden #wwg_archive_col_sidebar {
	display: none;
}
body .wwg_filter_header_icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	fill: var(--wwg-color-text-secondary);
}
body .wwg_filter_group {
	margin: 0 0 40px;
}
body .wwg_filter_group:last-child {
	margin-bottom: 0;
}
body #wwg_archive_col_sidebar .wwg_filter_group .wwg_filter_group_title {
	border: 0;  /* it is a <button>: only the rule underneath is wanted */
	appearance: none;
	-webkit-appearance: none;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0 0 16px;
	padding: 0 16px;
	border-bottom: 4px solid var(--wwg-color-accent-focus);
	border-radius: var(--wwg-radius-lg);
	background: var(--wwg-color-bg-secondary);
	font-family: var(--wwg-font-display) !important;
	font-size: var(--wwg-h5-size-mobile) !important;  /* Figma 22.25/32 */
	line-height: 32px !important;
	letter-spacing: var(--wwg-h5-tracking) !important;
	font-weight: 400 !important;
	color: var(--wwg-color-text-primary);
	cursor: pointer;
}
body #wwg_archive_col_sidebar .wwg_filter_group .wwg_filter_group_title::after {
	content: '';
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	transform: rotate(180deg);  /* the open group points up */
	background-color: var(--wwg-color-text-strong);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") center / 24px 24px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") center / 24px 24px no-repeat;
}
body #wwg_archive_col_sidebar .wwg_filter_group.wwg_filter_closed .wwg_filter_group_title {
	margin-bottom: 0;
	border-bottom: 2px solid var(--wwg-color-accent-neutral);
	background: var(--wwg-color-bg-primary);
}
body #wwg_archive_col_sidebar .wwg_filter_group.wwg_filter_closed .wwg_filter_group_title::after {
	transform: none;
	background-color: var(--wwg-color-text-secondary);
}
body .wwg_filter_group.wwg_filter_closed .wwg_filter_group_content {
	display: none;
}
body .wwg_filter_group .wwg_filter_group_content ul {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	/* indented like the mobile drawer's sub-items (Figma "Product Link", 32px in) */
	padding: 0 0 0 32px;
	list-style: none;
}
body .wwg_filter_group li.wwg_filter_option {
	margin: 0;
	padding: 0;
}
body .wwg_filter_group .wwg_filter_option_row {
	display: flex;
	align-items: center;
	gap: 16px;
}
body .wwg_filter_group label,
body .wwg_filter_group .wwg_filter_count {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	font-weight: 400;
	color: var(--wwg-color-text-primary);
	text-decoration: none;
}
body .wwg_filter_group .wwg_filter_count {
	margin-left: 8px;
	color: var(--wwg-color-text-secondary);
}
/* Figma's toggle is the Material "toggle_on" / "toggle_off" glyph (instances 62:3356 and
   62:3359): an outlined 22x12 pill with a small solid knob, drawn inside a 24px box. These
   are those vectors exported from the file and used as a mask, so the colour stays ours —
   Button-Primary-Text when on, Secondary-Text when off. */
body .wwg_filter_group input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: var(--wwg-color-text-secondary);
	transition: background-color 0.15s ease;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18C5.33333 18 3.91667 17.4167 2.75 16.25C1.58333 15.0833 1 13.6667 1 12C1 10.3333 1.58333 8.91667 2.75 7.75C3.91667 6.58333 5.33333 6 7 6H17C18.6667 6 20.0833 6.58333 21.25 7.75C22.4167 8.91667 23 10.3333 23 12C23 13.6667 22.4167 15.0833 21.25 16.25C20.0833 17.4167 18.6667 18 17 18H7ZM7 16H17C18.1 16 19.0417 15.6083 19.825 14.825C20.6083 14.0417 21 13.1 21 12C21 10.9 20.6083 9.95833 19.825 9.175C19.0417 8.39167 18.1 8 17 8H7C5.9 8 4.95833 8.39167 4.175 9.175C3.39167 9.95833 3 10.9 3 12C3 13.1 3.39167 14.0417 4.175 14.825C4.95833 15.6083 5.9 16 7 16ZM7 15C7.83333 15 8.54167 14.7083 9.125 14.125C9.70833 13.5417 10 12.8333 10 12C10 11.1667 9.70833 10.4583 9.125 9.875C8.54167 9.29167 7.83333 9 7 9C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15Z'/></svg>") center / 24px 24px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18C5.33333 18 3.91667 17.4167 2.75 16.25C1.58333 15.0833 1 13.6667 1 12C1 10.3333 1.58333 8.91667 2.75 7.75C3.91667 6.58333 5.33333 6 7 6H17C18.6667 6 20.0833 6.58333 21.25 7.75C22.4167 8.91667 23 10.3333 23 12C23 13.6667 22.4167 15.0833 21.25 16.25C20.0833 17.4167 18.6667 18 17 18H7ZM7 16H17C18.1 16 19.0417 15.6083 19.825 14.825C20.6083 14.0417 21 13.1 21 12C21 10.9 20.6083 9.95833 19.825 9.175C19.0417 8.39167 18.1 8 17 8H7C5.9 8 4.95833 8.39167 4.175 9.175C3.39167 9.95833 3 10.9 3 12C3 13.1 3.39167 14.0417 4.175 14.825C4.95833 15.6083 5.9 16 7 16ZM7 15C7.83333 15 8.54167 14.7083 9.125 14.125C9.70833 13.5417 10 12.8333 10 12C10 11.1667 9.70833 10.4583 9.125 9.875C8.54167 9.29167 7.83333 9 7 9C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15Z'/></svg>") center / 24px 24px no-repeat;
}
body .wwg_filter_group input[type='checkbox']:checked {
	background-color: var(--wwg-color-text-strong);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18C5.33333 18 3.91667 17.4167 2.75 16.25C1.58333 15.0833 1 13.6667 1 12C1 10.3333 1.58333 8.91667 2.75 7.75C3.91667 6.58333 5.33333 6 7 6H17C18.6667 6 20.0833 6.58333 21.25 7.75C22.4167 8.91667 23 10.3333 23 12C23 13.6667 22.4167 15.0833 21.25 16.25C20.0833 17.4167 18.6667 18 17 18H7ZM7 16H17C18.1 16 19.0417 15.6083 19.825 14.825C20.6083 14.0417 21 13.1 21 12C21 10.9 20.6083 9.95833 19.825 9.175C19.0417 8.39167 18.1 8 17 8H7C5.9 8 4.95833 8.39167 4.175 9.175C3.39167 9.95833 3 10.9 3 12C3 13.1 3.39167 14.0417 4.175 14.825C4.95833 15.6083 5.9 16 7 16ZM17 15C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9C16.1667 9 15.4583 9.29167 14.875 9.875C14.2917 10.4583 14 11.1667 14 12C14 12.8333 14.2917 13.5417 14.875 14.125C15.4583 14.7083 16.1667 15 17 15Z'/></svg>") center / 24px 24px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18C5.33333 18 3.91667 17.4167 2.75 16.25C1.58333 15.0833 1 13.6667 1 12C1 10.3333 1.58333 8.91667 2.75 7.75C3.91667 6.58333 5.33333 6 7 6H17C18.6667 6 20.0833 6.58333 21.25 7.75C22.4167 8.91667 23 10.3333 23 12C23 13.6667 22.4167 15.0833 21.25 16.25C20.0833 17.4167 18.6667 18 17 18H7ZM7 16H17C18.1 16 19.0417 15.6083 19.825 14.825C20.6083 14.0417 21 13.1 21 12C21 10.9 20.6083 9.95833 19.825 9.175C19.0417 8.39167 18.1 8 17 8H7C5.9 8 4.95833 8.39167 4.175 9.175C3.39167 9.95833 3 10.9 3 12C3 13.1 3.39167 14.0417 4.175 14.825C4.95833 15.6083 5.9 16 7 16ZM17 15C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9C16.1667 9 15.4583 9.29167 14.875 9.875C14.2917 10.4583 14 11.1667 14 12C14 12.8333 14.2917 13.5417 14.875 14.125C15.4583 14.7083 16.1667 15 17 15Z'/></svg>") center / 24px 24px no-repeat;
}
/* The toggle is drawn as a mask over background-color, so anything that restyles a hovered
   checkbox blanks the switch under the cursor. These id-scoped pairs outrank that and hold
   the colour through hover. */
body #wwg_archive_col_sidebar .wwg_filter_group input[type='checkbox'],
body #wwg_archive_col_sidebar .wwg_filter_group input[type='checkbox']:hover {
	background-color: var(--wwg-color-text-secondary);
}
body #wwg_archive_col_sidebar .wwg_filter_group input[type='checkbox']:checked,
body #wwg_archive_col_sidebar .wwg_filter_group input[type='checkbox']:checked:hover {
	background-color: var(--wwg-color-text-strong);
}
body .wwg_filter_group input[type='checkbox']:focus-visible {
	outline: 2px solid var(--wwg-color-accent-focus);
	outline-offset: 2px;
}
@media (max-width: 768px) {
	body div.wwg_archive_info {
		flex-wrap: wrap;  /* the count and sort take their own line rather than crowd the button */
	}
}
@media (max-width: 1024px) {
	body #wwg_archive_content {
		flex-wrap: wrap;  /* the filter column is full width here and must not squeeze the grid */
	}
	body #wwg_archive_col_sidebar {
		flex: none;
		width: 100%;
		margin-right: 0;
	}
}

/* Card text never underlines — the card itself is the link. */
body .wwg_grid_item_product .wwg_grid_item_info a,
body .wwg_grid_item_product .wwg_grid_item_info a:hover {
	color: inherit;
	text-decoration: none;
}
/* Figma shows each count in brackets — the widget prints the bare number. */
body .wwg_filter_group .wwg_filter_count::before {
	content: '(';
}
body .wwg_filter_group .wwg_filter_count::after {
	content: ')';
}

/* A run of clicks is folded into one request, so from the first click the panel is already out
   of date: it steps back rather than sitting there looking clickable. */
body .wwg_filters.wwg_filters_applying {
	opacity: 0.6;
	pointer-events: none;
}
/* Only ever seen with the script blocked, where the toggles cannot apply themselves. */
body .wwg_filters_apply {
	margin-top: 24px;
}