/**
 * Category archive: sub category chips, toolbar, filter sidebar, product grid
 * and quick view. Tokens come from gueta-header.css, loaded first.
 */

.gueta-archive,
.gueta-archive *,
.gueta-quickview-modal,
.gueta-quickview-modal * {
	box-sizing: border-box;
}

.gueta-archive {
	margin: 0 auto;
	max-width: var(--gueta-max);
	padding: 0 var(--gueta-gutter);
}

/* -------------------------------------------------------------------------
 * Sub category chips
 * ---------------------------------------------------------------------- */

.gueta-archive__chips {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0 0 24px;
	overflow-x: auto;
	padding: 0 0 4px;
	scrollbar-width: none;
}

.gueta-archive__chips::-webkit-scrollbar {
	display: none;
}

/*
 * The width was set on the link, but the list item around it is what the
 * flex row actually lays out, and it had nothing to hold it open. So every
 * chip collapsed to whatever its picture would allow, down to 32px, and the
 * names broke over two and three lines.
 */
.gueta-archive__chips > li {
	flex: 0 0 auto;
}

.gueta-archive__chip {
	color: var(--gueta-ink);
	display: block;
	flex: none;
	text-decoration: none;
	width: 140px;
}

.gueta-archive__chip-media {
	background: var(--gueta-sand);
	border-radius: 6px;
	display: block;
	overflow: hidden;
}

.gueta-archive__chip-media img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform .5s ease;
	width: 100%;
}

.gueta-archive__chip:hover .gueta-archive__chip-media img {
	transform: scale(1.05);
}

.gueta-archive__chip-name {
	display: block;
	font-size: 14px;
	padding: 10px 4px 0;
	text-align: center;
}

/*
 * Arrows over the two ends of the row. Where the chips have pictures they sit
 * centred on the pictures rather than on picture and name together, and on a
 * row of names alone on the names. They take no room of their own, so the
 * row does not move when one appears. Every state states its colours, or the
 * parent theme paints a pressed button pink and Elementor's Site Settings
 * turn its chevron black.
 */
.gueta-archive__chips-wrap {
	--gueta-chip-arrow: 40px;
	--gueta-chip-media: 140px;
	position: relative;
}

.gueta-archive .gueta-archive__chips-arrow,
.gueta-archive .gueta-archive__chips-arrow:hover,
.gueta-archive .gueta-archive__chips-arrow:focus {
	background: rgb(255 255 255 / 94%);
	border: 1px solid var(--gueta-rule);
	color: var(--gueta-ink);
}

.gueta-archive .gueta-archive__chips-arrow {
	align-items: center;
	border-radius: 50%;
	box-shadow: var(--gueta-shadow);
	cursor: pointer;
	display: flex;
	height: var(--gueta-chip-arrow);
	inset-block-start: calc(50% - var(--gueta-chip-arrow) / 2);
	justify-content: center;
	padding: 0;
	position: absolute;
	transition: background-color .2s ease;
	width: var(--gueta-chip-arrow);
	z-index: 2;
}

.gueta-archive .gueta-archive__chips-wrap:has(.gueta-archive__chip-media img) .gueta-archive__chips-arrow {
	inset-block-start: calc(var(--gueta-chip-media) / 2 - var(--gueta-chip-arrow) / 2);
}

.gueta-archive .gueta-archive__chips-arrow[hidden] {
	display: none;
}

/*
 * The row fades out under an arrow, so a name is not cut off hard beneath
 * it. The fade is on the list's box, not its content, so it stays at the
 * edge while the chips pass under it.
 */
.gueta-archive__chips-wrap {
	--gueta-chips-fade-end: 0px;
	--gueta-chips-fade-start: 0px;
	--gueta-chips-toward-end: to right;
}

[dir="rtl"] .gueta-archive__chips-wrap {
	--gueta-chips-toward-end: to left;
}

.gueta-archive__chips-wrap.has-before {
	--gueta-chips-fade-start: 72px;
}

.gueta-archive__chips-wrap.has-after {
	--gueta-chips-fade-end: 72px;
}

.gueta-archive__chips-wrap:is(.has-before, .has-after) .gueta-archive__chips {
	-webkit-mask-image: linear-gradient(var(--gueta-chips-toward-end), transparent 0, #000 var(--gueta-chips-fade-start), #000 calc(100% - var(--gueta-chips-fade-end)), transparent 100%);
	mask-image: linear-gradient(var(--gueta-chips-toward-end), transparent 0, #000 var(--gueta-chips-fade-start), #000 calc(100% - var(--gueta-chips-fade-end)), transparent 100%);
}

.gueta-archive .gueta-archive__chips-arrow:hover {
	background: var(--gueta-paper);
}

.gueta-archive .gueta-archive__chips-arrow:focus-visible {
	outline: 2px solid var(--gueta-ink);
	outline-offset: 2px;
}

.gueta-archive__chips-arrow--prev {
	inset-inline-start: -8px;
}

.gueta-archive__chips-arrow--next {
	inset-inline-end: -8px;
}

.gueta-archive__chips-arrow svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 20px;
}

/*
 * One chevron drawn pointing left, as the banners use it. --gueta-slide is
 * -1 in right to left, so "previous" faces its own edge in either direction
 * and "next" the other.
 */
.gueta-archive__chips-arrow--prev svg {
	transform: scaleX(var(--gueta-slide));
}

.gueta-archive__chips-arrow--next svg {
	transform: scaleX(calc(var(--gueta-slide) * -1));
}

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

.gueta-archive__toolbar {
	align-items: center;
	border-block: 1px solid var(--gueta-rule);
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	padding: 12px 0;
}

/* The sidebar is always on screen wide, so the opener is for the drawer only. */
.gueta-archive__filter-button {
	align-items: center;
	background: var(--gueta-ink);
	border: 0;
	border-radius: 8px;
	color: var(--gueta-paper);
	cursor: pointer;
	display: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
}

/* Clearing everything belongs next to the results, not buried in the sidebar. */
.gueta-archive__clear {
	align-items: center;
	background: none;
	border: 1px solid var(--gueta-rule);
	border-radius: 8px;
	color: var(--gueta-muted);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 14px;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	transition: border-color .2s ease, color .2s ease;
}

.gueta-archive__clear:hover {
	border-color: var(--gueta-ink);
	color: var(--gueta-ink);
}

.gueta-archive__clear[hidden] {
	display: none;
}

.gueta-archive__clear svg {
	fill: none;
	height: 13px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2;
	width: 13px;
}

.gueta-archive__filter-button svg {
	fill: none;
	height: 17px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.7;
	width: 17px;
}

.gueta-archive__filter-count {
	background: var(--gueta-paper);
	border-radius: 999px;
	color: var(--gueta-ink);
	font-size: 12px;
	min-width: 20px;
	padding: 1px 6px;
}

.gueta-archive__filter-count[hidden] {
	display: none;
}

.gueta-archive__count {
	color: var(--gueta-muted);
	font-size: 14px;
	margin-inline-start: auto;
	white-space: nowrap;
}

.gueta-archive__sort select {
	background: var(--gueta-paper);
	border: 1px solid var(--gueta-rule);
	border-radius: 8px;
	color: var(--gueta-ink);
	font-family: inherit;
	font-size: 14px;
	min-height: 40px;
	padding: 0 12px;
}

/* The toolbar's compare switch reveals the per card ones. */
.gueta-archive__compare-toggle {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	-webkit-user-select: none;
	user-select: none;
}

.gueta-archive__compare-toggle input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.gueta-archive__compare-text {
	color: var(--gueta-muted);
	font-size: 14px;
}

.gueta-archive__compare-track {
	background: var(--gueta-rule);
	border-radius: 999px;
	display: block;
	flex: none;
	height: 20px;
	position: relative;
	transition: background-color .25s ease;
	width: 36px;
}

.gueta-archive__compare-thumb {
	background: var(--gueta-paper);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
	display: block;
	height: 16px;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	position: absolute;
	transition: transform .25s ease;
	width: 16px;
}

.gueta-archive__compare-toggle input:checked ~ .gueta-archive__compare-track {
	background: var(--gueta-ink);
}

/* The thumb travels toward the inline end: 36 - 16 - 2 - 2 = 16px. */
.gueta-archive__compare-toggle input:checked ~ .gueta-archive__compare-track .gueta-archive__compare-thumb {
	transform: translateX(calc(var(--gueta-slide) * 16px));
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

.gueta-archive__layout {
	display: grid;
	gap: 40px;
	grid-template-columns: 280px minmax(0, 1fr);
}

.gueta-archive__main {
	min-width: 0;
}

.gueta-archive__grid {
	display: grid;
	gap: 40px 30px;
	grid-template-columns: repeat(var(--gueta-archive-columns, 3), minmax(0, 1fr));
}

.gueta-archive__empty {
	color: var(--gueta-muted);
	grid-column: 1 / -1;
	padding: 40px 0;
	text-align: center;
}

.gueta-archive.is-loading .gueta-archive__grid {
	opacity: .45;
	pointer-events: none;
}

.gueta-archive__more {
	display: flex;
	justify-content: center;
	padding: 40px 0 8px;
}

.gueta-archive__more-button {
	background: none;
	border: 1px solid var(--gueta-ink);
	border-radius: 8px;
	color: var(--gueta-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	min-height: 48px;
	padding: 0 40px;
	transition: background-color .2s ease, color .2s ease;
}

.gueta-archive__more-button:hover {
	background: var(--gueta-ink);
	color: var(--gueta-paper);
}

.gueta-archive__more-button[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Sidebar
 * ---------------------------------------------------------------------- */

.gueta-archive__sidebar-head,
.gueta-archive__sidebar-foot {
	display: none;
}

.gueta-archive__backdrop {
	background: rgb(15 15 15 / 45%);
	display: none;
	inset: 0;
	position: fixed;
	z-index: 95;
}

.gueta-filter {
	border-bottom: 1px solid var(--gueta-rule);
}

.gueta-filter__summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 16px 0;
}

.gueta-filter__summary::-webkit-details-marker {
	display: none;
}

.gueta-filter__title {
	font-size: 15px;
	font-weight: 600;
}

.gueta-filter__chevron svg {
	fill: none;
	height: 16px;
	stroke: var(--gueta-ink);
	stroke-linecap: round;
	stroke-width: 1.8;
	transition: transform .25s ease;
	width: 16px;
}

.gueta-filter[open] .gueta-filter__chevron svg {
	transform: rotate(180deg);
}

.gueta-filter__body {
	display: grid;
	gap: 2px;
	max-height: 260px;
	overflow-y: auto;
	padding-bottom: 14px;
}

.gueta-filter__option {
	align-items: center;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 7px 6px;
	transition: background-color .15s ease;
}

.gueta-filter__option:hover {
	background: var(--gueta-sand);
}

.gueta-filter__option input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

/* A box that fills in and shows its tick once checked. */
.gueta-filter__check {
	align-items: center;
	border: 1.5px solid var(--gueta-rule);
	border-radius: 4px;
	display: flex;
	flex: none;
	height: 18px;
	justify-content: center;
	transition: background-color .2s ease, border-color .2s ease;
	width: 18px;
}

.gueta-filter__check svg {
	fill: none;
	height: 12px;
	opacity: 0;
	stroke: var(--gueta-paper);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.4;
	transform: scale(.6);
	transition: opacity .18s ease, transform .18s ease;
	width: 12px;
}

.gueta-filter__option input:checked ~ .gueta-filter__check {
	background: var(--gueta-ink);
	border-color: var(--gueta-ink);
}

.gueta-filter__option input:checked ~ .gueta-filter__check svg {
	opacity: 1;
	transform: scale(1);
}

.gueta-filter__option input:focus-visible ~ .gueta-filter__check {
	outline: 2px solid var(--gueta-ink);
	outline-offset: 2px;
}

.gueta-filter__label {
	font-size: 14px;
}

.gueta-filter__count {
	color: var(--gueta-soft);
	font-size: 12px;
	margin-inline-start: auto;
}

.gueta-filter__body--price {
	display: flex;
	gap: 10px;
}

.gueta-filter__body--price label {
	align-items: center;
	display: flex;
	flex: 1;
	gap: 6px;
}

.gueta-filter__body--price span {
	color: var(--gueta-soft);
	font-size: 13px;
}

.gueta-filter__body--price input {
	background: var(--gueta-paper);
	border: 1px solid var(--gueta-rule);
	border-radius: 6px;
	color: var(--gueta-ink);
	font-family: inherit;
	font-size: 14px;
	min-width: 0;
	padding: 9px 10px;
	width: 100%;
}

.gueta-filter__body--price input:focus {
	border-color: var(--gueta-ink);
	outline: 0;
}

/* -------------------------------------------------------------------------
 * Card
 * ---------------------------------------------------------------------- */

/* Measured against the shop's own product card, so the two match. */
.gueta-card {
	background: var(--gueta-paper);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.gueta-card__media {
	aspect-ratio: 1;
	overflow: hidden;
	padding: 15px;
	position: relative;
}

.gueta-card__link {
	display: block;
	height: 100%;
}

.gueta-card__image,
.gueta-card__media img {
	display: block;
	height: 100%;
	/* Contain, not cover: these are cut out product shots. */
	object-fit: contain;
	transition: transform .6s ease;
	width: 100%;
}

.gueta-card:hover .gueta-card__image {
	transform: scale(1.04);
}

.gueta-card__badges {
	display: flex;
	flex-direction: column;
	gap: 6px;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	position: absolute;
	z-index: 2;
}

.gueta-card__badge {
	background: var(--gueta-ink);
	border-radius: 999px;
	color: var(--gueta-paper);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	width: fit-content;
}

.gueta-card__badge--out {
	background: var(--gueta-muted);
}

/* An out of stock product reads as unavailable at a glance. */
.gueta-card:has(.gueta-card__badge--out) .gueta-card__image {
	opacity: .55;
}

/*
 * The shop's own bar: full width orange, revealed on hover. It stays in the
 * flow and only fades, so the card always reserves its height and the grid
 * never reflows.
 */
.gueta-card__cta {
	align-items: center;
	background: var(--gueta-accent-warm, #f0591d);
	border: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	justify-content: space-between;
	margin-top: auto;
	opacity: 0;
	padding: 12px 15px;
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
	transform: translateY(10px);
	visibility: hidden;
	width: 100%;
}

.gueta-card:hover .gueta-card__cta,
.gueta-card:focus-within .gueta-card__cta {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.gueta-card__cta svg {
	fill: none;
	flex: none;
	height: 22px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	width: 22px;
}

[dir="ltr"] .gueta-card__cta svg {
	transform: scaleX(-1);
}

/*
 * The card switch only appears once the toolbar toggle is on. Both classes are
 * named in the selector so this does not depend on whether the comparison
 * stylesheet, which also sets display on .gueta-compare-switch, loads first.
 */
.gueta-card__compare.gueta-compare-switch {
	background: rgb(255 255 255 / 92%);
	border-radius: 8px;
	display: none;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	margin: 0;
	padding: 6px 10px;
	position: absolute;
	z-index: 2;
}

.gueta-archive.is-comparing .gueta-card__compare.gueta-compare-switch {
	display: inline-flex;
}

.gueta-card__info {
	flex: 1 1 auto;
	padding: 15px 10px 20px;
	text-align: center;
}

.gueta-card__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 10px;
}

.gueta-card__title a {
	color: var(--gueta-ink);
	text-decoration: none;
}

.gueta-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gueta-card__price {
	font-size: 19px;
	font-weight: 400;
}

.gueta-card__price del {
	color: var(--gueta-soft);
	font-weight: 400;
	margin-inline-end: 6px;
}

.gueta-card__price ins {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Quick view
 * ---------------------------------------------------------------------- */

.gueta-quickview-modal {
	inset: 0;
	position: fixed;
	transition: visibility 0s linear .3s;
	visibility: hidden;
	z-index: 115;
}

.gueta-quickview-modal[hidden] {
	display: none;
}

.gueta-quickview-modal.is-open {
	transition-delay: 0s;
	visibility: visible;
}

.gueta-quickview-modal__backdrop {
	background: rgb(15 15 15 / 45%);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity .3s ease;
}

.gueta-quickview-modal.is-open .gueta-quickview-modal__backdrop {
	opacity: 1;
}

.gueta-quickview-modal__panel {
	background: var(--gueta-paper);
	border-radius: 12px;
	box-shadow: 0 32px 60px rgb(0 0 0 / 18%), 0 2px 10px rgb(0 0 0 / 6%);
	inset-block-start: 50%;
	inset-inline-start: 50%;
	max-height: 88vh;
	/* Wider than a plain quick view: it carries the product page's own
	   gallery and accordion. */
	max-width: min(1060px, 94vw);
	opacity: 0;
	overflow: auto;
	position: absolute;
	transform: translate(50%, -46%);
	transition: opacity .3s ease, transform .3s ease;
	width: 100%;
}

[dir="ltr"] .gueta-quickview-modal__panel {
	transform: translate(-50%, -46%);
}

.gueta-quickview-modal.is-open .gueta-quickview-modal__panel {
	opacity: 1;
	transform: translate(50%, -50%);
}

[dir="ltr"] .gueta-quickview-modal.is-open .gueta-quickview-modal__panel {
	transform: translate(-50%, -50%);
}

.gueta-quickview-modal__close {
	inset-block-start: 10px;
	inset-inline-end: 10px;
	position: absolute;
	z-index: 2;
}

.gueta-quickview {
	display: grid;
	gap: 36px;
	/* The buying side leads here: the gallery is the reminder, not the point. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	padding: 34px 32px;
}

/* The gallery inside brings its own frame, so this is only a column. */
.gueta-quickview__media {
	min-width: 0;
	position: sticky;
	top: 0;
}

.gueta-quickview__media .gueta-gallery__thumb {
	flex-basis: 60px;
	height: 60px;
}

.gueta-quickview__info {
	align-content: start;
	display: grid;
	gap: 16px;
}

/* Sizes are pinned: the page's own heading scale is far larger than a modal. */
.gueta-quickview__title {
	font-size: 24px !important;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

/* A modal is not a product page: the image is capped so the buying is above
   the fold, and the price steps down a size with the heading. */
.gueta-quickview .gueta-gallery__image,
.gueta-quickview .gueta-gallery__placeholder img {
	max-height: 400px;
	object-fit: contain;
}

.gueta-quickview .gueta-buy {
	gap: 18px;
	margin: 0;
}

.gueta-quickview .gueta-buy__price {
	font-size: 26px;
}

.gueta-quickview .gueta-buy .quantity,
.gueta-quickview .gueta-buy .single_add_to_cart_button {
	min-height: 50px;
}

.gueta-quickview .gueta-swatch {
	min-height: 42px;
	padding: 0 16px;
}

/* The accordion sits directly under the cart, with no extra rule above it. */
.gueta-quickview .gueta-accordion {
	margin-top: 4px;
}

.gueta-quickview .gueta-accordion__title {
	font-size: 16px;
}

.gueta-quickview .gueta-accordion__content {
	font-size: 14px;
	max-height: 300px;
	overflow-y: auto;
}

.gueta-quickview__full {
	color: var(--gueta-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gueta-quickview__loading {
	color: var(--gueta-muted);
	padding: 60px;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Small laptops
 *
 * The archive is placed by an Elementor template whose section pads the page
 * by 100px a side, and the theme's own gutter was laid on top of that. The
 * two together left the grid 540px of a 1280px screen: three cards 160px
 * wide, with a fifth of the screen empty down each edge. The template's
 * padding is dropped where the archive sits, so the theme's gutter, which
 * the header and everything else line up with, spaces it alone.
 * ---------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.elementor-location-archive .elementor-section.elementor-top-section:has(.gueta-archive) {
		padding-inline: 0;
	}
}

@media (min-width: 1025px) and (max-width: 1599px) {
	/* The band of breadcrumbs above keeps to the same smaller gutter. */
	.elementor-location-archive .elementor-section.elementor-top-section:has(.elementor-widget-breadcrumbs),
	.elementor-location-archive .elementor-section.elementor-top-section:has(.elementor-widget-woocommerce-breadcrumb) {
		padding-inline: var(--gueta-gutter);
	}

	.gueta-archive__layout {
		gap: 28px;
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.gueta-archive__grid {
		gap: 32px 20px;
	}
}

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

@media (max-width: 1024px) {
	.gueta-archive__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gueta-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}

	.gueta-archive__filter-button {
		display: inline-flex;
	}

	/* The sidebar becomes a drawer driven by the toolbar button. */
	.gueta-archive__sidebar {
		background: var(--gueta-paper);
		display: flex;
		flex-direction: column;
		inset-block: 0;
		inset-inline-start: 0;
		max-width: 92vw;
		position: fixed;
		transform: translateX(calc(var(--gueta-slide) * -100%));
		transition: transform .35s cubic-bezier(.32, .72, 0, 1);
		width: 340px;
		z-index: 96;
	}

	.gueta-archive.is-filtering .gueta-archive__sidebar {
		transform: translateX(0);
	}

	.gueta-archive.is-filtering .gueta-archive__backdrop {
		display: block;
	}

	.gueta-archive__sidebar-head {
		align-items: center;
		border-bottom: 1px solid var(--gueta-rule);
		display: flex;
		justify-content: space-between;
		padding: 16px 20px;
	}

	.gueta-archive__sidebar-head h2 {
		font-size: 18px;
		font-weight: 600;
		margin: 0;
	}

	.gueta-archive__filters {
		flex: 1;
		overflow-y: auto;
		padding: 0 20px;
	}

	.gueta-archive__sidebar-foot {
		border-top: 1px solid var(--gueta-rule);
		display: flex;
		gap: 10px;
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	}

	.gueta-archive__reset,
	.gueta-archive__apply {
		border-radius: 8px;
		cursor: pointer;
		flex: 1;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		min-height: 46px;
		padding: 0 12px;
	}

	.gueta-archive__reset {
		background: none;
		border: 1px solid var(--gueta-ink);
		color: var(--gueta-ink);
	}

	.gueta-archive__apply {
		background: var(--gueta-ink);
		border: 0;
		color: var(--gueta-paper);
	}

	.gueta-quickview {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}
}

@media (max-width: 560px) {
	.gueta-archive__toolbar {
		flex-wrap: wrap;
	}

	.gueta-archive__count {
		order: 4;
		width: 100%;
	}

	.gueta-archive__chip {
		flex-basis: 108px;
	}

	/* Touch has no hover, so the bar is simply always shown. */
	.gueta-card__cta {
		font-size: 15px;
		opacity: 1;
		padding: 11px 14px;
		transform: none;
		visibility: visible;
	}

	.gueta-card__title {
		font-size: 15px;
	}

	.gueta-card__price {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gueta-card__image,
	.gueta-card__cta,
	.gueta-archive__sidebar,
	.gueta-quickview-modal__panel {
		transition-duration: .01ms;
	}
}

/* -------------------------------------------------------------------------
 * The category chips on a phone
 *
 * Smaller pictures, smaller wording, and a name that stays on one line. A
 * chip is a glance, and a two line name inside one reads as a paragraph.
 * The chip grows with a long name rather than breaking it, and the row still
 * scrolls sideways.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.gueta-archive__chips {
		gap: 20px;
		margin-bottom: 20px;
	}

	.gueta-archive__chip {
		min-width: 84px;
		width: auto;
	}

	.gueta-archive__chip-media {
		margin-inline: auto;
		width: 84px;
	}

	.gueta-archive__chip-name {
		font-size: 12px;
		padding-top: 8px;
		white-space: nowrap;
	}

	.gueta-archive__chips-wrap {
		--gueta-chip-arrow: 34px;
		--gueta-chip-media: 84px;
	}

	.gueta-archive__chips-arrow svg {
		height: 17px;
		width: 17px;
	}

	.gueta-archive__chips-arrow--prev {
		inset-inline-start: -4px;
	}

	.gueta-archive__chips-arrow--next {
		inset-inline-end: -4px;
	}
}