/**
 * Alcli Filter.
 * Palette matches the rest of the site: red #CD4547, ink #14110F, beige #F4EFE3.
 *
 * As with Alcli Product Search, selectors here are chained and the properties
 * Elementor's global button and input styles fight over are marked important.
 * Without that, buttons in this plugin render as the theme's black slabs.
 */

.alcli-af,
.alcli-af-brands,
.alcli-af-strip {
	--af-red: #cd4547;
	--af-red-dark: #b23a3c;
	--af-ink: #14110f;
	--af-soft: #57514a;
	--af-mute: #9a938a;
	--af-beige: #f4efe3;
	--af-line: rgba(20, 17, 15, 0.12);
	--af-radius: 14px;
	--af-pill: 999px;
}

/* ======================================================== page container */

/* Line the page up with the header.
 *
 * The Alcli header is an Elementor boxed container: 1320px wide with 24px of
 * side padding (16px on mobile). Hello Elementor caps a plain page at 1140px
 * via `body:not([class*=elementor-page-]) .site-main`, so the filter sat inset
 * from the header above it.
 *
 * That theme rule scores 0,2,1. `html body.alcli-af-page .site-main` scores
 * 0,2,2, so it wins on specificity and does not depend on which stylesheet the
 * browser loaded last. Widening .site-main rather than the shortcode itself
 * also brings the page title along, which a wider shortcode alone would leave
 * behind at the old width.
 */
html body.alcli-af-page .site-main {
	max-width: 1320px;
	padding-inline: 24px;
}

@media (max-width: 767px) {
	html body.alcli-af-page .site-main {
		padding-inline: 16px;
	}
}

/* The theme's page title is removed on the filter page, and its margin was the
   only thing separating the content from the header. The filter supplies that
   gap itself now. */
.alcli-af {
	margin-top: 26px;
}

@media (max-width: 767px) {
	.alcli-af {
		margin-top: 16px;
	}
}

.alcli-af *,
.alcli-af *::before,
.alcli-af *::after,
.alcli-af-brands *,
.alcli-af-brands *::before,
.alcli-af-brands *::after {
	box-sizing: border-box;
}

.alcli-af .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =============================================================== the lock */

/* The band that says which brand you are inside. It is the visible half of the
   feature — everything else could work perfectly and the shopper would still be
   lost without this. */
.alcli-af__lock {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	margin-bottom: 20px;
	background: linear-gradient(100deg, var(--af-ink), #2a2422);
	border-radius: var(--af-radius);
	color: #fff;
	animation: alcli-af-drop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.alcli-af__lockmark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.alcli-af__lockmark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 5px;
}

.alcli-af__lockmark--initials {
	background: var(--af-red);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.5px;
}

.alcli-af__locktext {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}

.alcli-af__lockeyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: rgba(255, 255, 255, 0.6);
}

.alcli-af__lockbrand {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

.alcli-af__lockcount {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.65);
}

.alcli-af .alcli-af__lockexit {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	color: #fff !important;
	border-radius: var(--af-pill) !important;
	padding: 9px 18px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.alcli-af .alcli-af__lockexit:hover {
	background: var(--af-red) !important;
	border-color: var(--af-red) !important;
}

/* ================================================================ the bar */

.alcli-af__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.alcli-af__searchwrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--af-line);
	border-radius: var(--af-pill);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alcli-af__searchwrap:focus-within {
	border-color: var(--af-red);
	box-shadow: 0 0 0 4px rgba(205, 69, 71, 0.13);
}

.alcli-af__searchicon {
	display: flex;
	padding-inline-start: 18px;
	pointer-events: none;
}

.alcli-af__searchicon svg {
	width: 18px;
	height: 18px;
	fill: var(--af-mute);
}

.alcli-af__searchwrap:focus-within .alcli-af__searchicon svg {
	fill: var(--af-red);
}

.alcli-af .alcli-af__search {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	padding: 14px !important;
	font-size: 15px;
	color: var(--af-ink);
}

.alcli-af .alcli-af__search::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.alcli-af .alcli-af__sort {
	flex: 0 0 auto;
	border: 1px solid var(--af-line) !important;
	border-radius: var(--af-pill) !important;
	background: #fff !important;
	padding: 12px 16px !important;
	font-size: 13.5px !important;
	color: var(--af-ink) !important;
	cursor: pointer;
}

.alcli-af .alcli-af__facetstoggle {
	display: none;
	border: 1px solid var(--af-line) !important;
	border-radius: var(--af-pill) !important;
	background: var(--af-ink) !important;
	color: #fff !important;
	padding: 12px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

/* ============================================================= the layout */

.alcli-af__layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* ================================================================ facets */

.alcli-af__facets {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.alcli-af__facetgroup {
	background: #fff;
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	padding: 16px;
}

.alcli-af__facettitle {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--af-soft);
}

.alcli-af__facetlist,
.alcli-af__facetsub,
.alcli-af__brandlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.alcli-af__facetsub {
	margin: 2px 0 6px 14px;
	padding-inline-start: 10px;
	border-inline-start: 1px solid var(--af-line);
}

.alcli-af__facetlabel {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	border-radius: 9px;
	font-size: 14px;
	color: var(--af-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.alcli-af__facetlabel:hover {
	background: var(--af-beige);
}

.alcli-af__facetlabel.is-active {
	background: rgba(205, 69, 71, 0.09);
	color: var(--af-red);
	font-weight: 600;
}

.alcli-af__facetlabel input {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	accent-color: var(--af-red);
	margin: 0;
}

.alcli-af__facetlabel--sub {
	font-size: 13.5px;
	color: var(--af-soft);
}

.alcli-af__facetname {
	flex: 1 1 auto;
	min-width: 0;
}

.alcli-af__facetcount {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--af-mute);
	background: var(--af-beige);
	border-radius: var(--af-pill);
	padding: 1px 8px;
}

.alcli-af__facetempty {
	margin: 0;
	font-size: 13px;
	color: var(--af-mute);
}

.alcli-af .alcli-af__brandlink {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px;
	border-radius: 9px;
	font-size: 14px;
	color: var(--af-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.alcli-af .alcli-af__brandlink:hover {
	background: var(--af-beige);
}

.alcli-af .alcli-af__brandlink.is-active {
	background: var(--af-red);
	color: #fff;
	font-weight: 600;
}

.alcli-af .alcli-af__brandlink.is-active .alcli-af__facetcount {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* =============================================================== results */

.alcli-af__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 14px;
	color: var(--af-soft);
}

.alcli-af .alcli-af__clear {
	background: transparent !important;
	border: 0 !important;
	padding: 4px 2px !important;
	color: var(--af-red) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.alcli-af__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 18px;
	/* Rows share a height so cards with a longer title still line up. */
	grid-auto-rows: 1fr;
}

.alcli-af__card {
	display: flex;
	background: #fff;
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s ease, border-color 0.22s ease;
	/* Staggered by position, capped so a full page never crawls in. */
	transition-delay: calc(min(var(--alcli-af-i, 0), 11) * 34ms);
}

.alcli-af__card.is-in {
	opacity: 1;
	transform: none;
}

.alcli-af__card:hover {
	border-color: rgba(205, 69, 71, 0.4);
	box-shadow: 0 18px 34px -22px rgba(20, 17, 15, 0.55);
}

.alcli-af .alcli-af__cardlink {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.alcli-af__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--af-beige);
	overflow: hidden;
}

.alcli-af__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.alcli-af__card:hover .alcli-af__thumb img {
	transform: scale(1.045);
}

.alcli-af__thumbfallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.alcli-af__thumbfallback svg {
	width: 34px;
	height: 34px;
	fill: rgba(20, 17, 15, 0.16);
}

.alcli-af__flag {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	padding: 3px 9px;
	border-radius: var(--af-pill);
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #fff;
}

.alcli-af__flag--sale {
	background: var(--af-red);
}

.alcli-af__flag--out {
	inset-inline-start: auto;
	inset-inline-end: 10px;
	background: rgba(20, 17, 15, 0.78);
}

.alcli-af__cardbody {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 13px 14px 15px;
	flex: 1 1 auto;
}

.alcli-af__cardbrand {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--af-red);
}

.alcli-af__cardtitle {
	margin: 0;
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.32;
	color: var(--af-ink);
	/* Two lines, so every card in a row keeps the same rhythm. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alcli-af__cardsku {
	font-size: 12px;
	color: var(--af-soft);
}

.alcli-af__cardskulabel {
	color: var(--af-mute);
}

.alcli-af__cardcats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12px;
	color: var(--af-soft);
}

.alcli-af__cardsep {
	color: var(--af-mute);
}

.alcli-af__cardsub {
	color: var(--af-mute);
}

.alcli-af__cardprice {
	margin-top: auto;
	padding-top: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--af-red);
}

.alcli-af__cardprice del {
	font-weight: 500;
	font-size: 13px;
	color: var(--af-mute);
	margin-inline-end: 5px;
}

.alcli-af__cardprice ins {
	text-decoration: none;
}

/* Signed out, the price gate replaces the number with a sign in link. */
.alcli-af__cardprice .alcli-price-locked {
	font-size: 13px;
	font-weight: 600;
}

/* ========================================================= loading state */

.alcli-af.is-loading .alcli-af__grid {
	opacity: 0.45;
	filter: saturate(0.6);
	transition: opacity 0.15s ease, filter 0.15s ease;
}

.alcli-af.is-loading .alcli-af__meta::after {
	content: "";
	width: 13px;
	height: 13px;
	margin-inline-start: 8px;
	border: 2px solid var(--af-line);
	border-top-color: var(--af-red);
	border-radius: 50%;
	animation: alcli-af-spin 0.65s linear infinite;
}

.alcli-af.is-loading .alcli-af__meta {
	display: flex;
	align-items: center;
}

/* =========================================================== empty state */

.alcli-af__empty {
	padding: 46px 24px;
	text-align: center;
	background: #fff;
	border: 1px dashed var(--af-line);
	border-radius: var(--af-radius);
	animation: alcli-af-fade 0.3s ease both;
}

.alcli-af__emptytitle {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--af-ink);
}

.alcli-af__emptynote {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--af-soft);
}

.alcli-af .alcli-af__emptybtn {
	display: inline-block;
	background: var(--af-red) !important;
	color: #fff !important;
	border-radius: var(--af-pill) !important;
	padding: 11px 24px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.alcli-af .alcli-af__emptybtn:hover {
	background: var(--af-red-dark) !important;
}

/* ================================================================= pager */

.alcli-af__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 26px;
}

.alcli-af .alcli-af__page {
	min-width: 38px;
	padding: 9px 12px !important;
	border: 1px solid var(--af-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--af-ink) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.alcli-af .alcli-af__page:hover {
	border-color: var(--af-red) !important;
	color: var(--af-red) !important;
}

.alcli-af .alcli-af__page.is-current {
	background: var(--af-red) !important;
	border-color: var(--af-red) !important;
	color: #fff !important;
}

/* ====================================================== brand directory */

/* A fixed four column track, not auto-fill. Feature brands span two columns or
   the full row, and auto-fill decides the column count from the container
   width — so a span could land mid row and leave a hole beside it. A fixed
   count makes the spans predictable. */
.alcli-af-brands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

/* The theme underlines every link inside page content:
   .page-content a { text-decoration: underline }  (0,1,1)
   These tiles are links wrapping whole blocks, where an underline reads as
   damage rather than as a link. Chained to 0,2,0 so it wins on specificity. */
.alcli-af-brands .alcli-af-brands__item,
.alcli-af-brands .alcli-af-brands__item:hover,
.alcli-af-brands .alcli-af-brands__chip,
.alcli-af-brands .alcli-af-brands__chip:hover,
.alcli-af-brands__seeall .alcli-af-brands__seealllink,
.alcli-af-brands__seeall .alcli-af-brands__seealllink:hover {
	text-decoration: none;
}

.alcli-af-brands__item {
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	text-decoration: none;
	color: inherit;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s ease, border-color 0.25s ease;
	transition-delay: calc(min(var(--alcli-af-i, 0), 8) * 45ms);
}

.alcli-af-brands__item.is-in {
	opacity: 1;
	transform: none;
}

.alcli-af-brands__item:hover {
	border-color: rgba(205, 69, 71, 0.45);
	box-shadow: 0 22px 44px -26px rgba(20, 17, 15, 0.6);
}

/* Alcli's own brands get more room. Set per brand under Products > Brands. */
.alcli-af-brands__item--wide {
	grid-column: span 2;
}

.alcli-af-brands__item--hero {
	grid-column: 1 / -1;
}

.alcli-af-brands__banner {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 0;
}

.alcli-af-brands__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.alcli-af-brands__item:hover .alcli-af-brands__banner img {
	transform: scale(1.05);
}

/* Scrim so the name stays readable whatever the banner is. */
.alcli-af-brands__item.has-banner .alcli-af-brands__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 17, 15, 0.15), rgba(20, 17, 15, 0.82));
}

/* A normal tile stacks: logo band, then name, tagline and count, with the
   arrow pinned bottom right. Feature tiles switch to a row so the extra width
   goes into a bigger logo rather than a longer line of text. */
.alcli-af-brands__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	min-height: 188px;
	height: 100%;
}

.alcli-af-brands__item--wide .alcli-af-brands__inner,
.alcli-af-brands__item--hero .alcli-af-brands__inner {
	flex-direction: row;
	align-items: center;
	gap: 26px;
}

.alcli-af-brands__item--wide .alcli-af-brands__inner {
	min-height: 172px;
	padding: 24px;
}

.alcli-af-brands__item--hero .alcli-af-brands__inner {
	min-height: 196px;
	padding: 30px 34px;
}

.alcli-af-brands__item.has-banner .alcli-af-brands__inner {
	justify-content: flex-end;
}

/* The logo sits on a tinted band the full width of the tile. The artwork is
   landscape, so a square well would waste most of the space and shrink the
   mark to nothing — which is exactly what it was doing. */
.alcli-af-brands__logo {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--af-beige);
	overflow: hidden;
}

.alcli-af-brands__item--wide .alcli-af-brands__logo,
.alcli-af-brands__item--hero .alcli-af-brands__logo {
	width: auto;
	flex: 0 0 44%;
	max-width: 320px;
	padding: 18px 20px;
}

.alcli-af-brands__item.has-banner .alcli-af-brands__logo {
	background: #fff;
}

.alcli-af-brands__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 56px;
	object-fit: contain;
}

.alcli-af-brands__item--wide .alcli-af-brands__logo img {
	max-height: 74px;
}

.alcli-af-brands__item--hero .alcli-af-brands__logo img {
	max-height: 92px;
}

.alcli-af-brands__initials {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--af-red);
}

.alcli-af-brands__item--hero .alcli-af-brands__initials {
	font-size: 30px;
}

.alcli-af-brands__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	flex: 1 1 auto;
	/* Room for the arrow, which is pinned to the corner. */
	padding-inline-end: 42px;
}

.alcli-af-brands__item--wide .alcli-af-brands__text,
.alcli-af-brands__item--hero .alcli-af-brands__text {
	padding-inline-end: 52px;
}

.alcli-af-brands__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--af-ink);
}

.alcli-af-brands__item--wide .alcli-af-brands__name {
	font-size: 21px;
}

.alcli-af-brands__item--hero .alcli-af-brands__name {
	font-size: 26px;
}

.alcli-af-brands__item.has-banner .alcli-af-brands__name,
.alcli-af-brands__item.has-banner .alcli-af-brands__tagline,
.alcli-af-brands__item.has-banner .alcli-af-brands__count {
	color: #fff;
}

.alcli-af-brands__tagline {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--af-soft);
}

.alcli-af-brands__item--hero .alcli-af-brands__tagline {
	font-size: 15px;
}

.alcli-af-brands__count {
	margin-top: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.9px;
	color: var(--af-mute);
}

/* Pinned to the corner rather than sitting in the flow, so it lands in the
   same place on every tile whatever the tagline length. */
.alcli-af-brands__go {
	position: absolute;
	z-index: 2;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--af-beige);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.alcli-af-brands__item--wide .alcli-af-brands__go,
.alcli-af-brands__item--hero .alcli-af-brands__go {
	inset-block-end: 24px;
	inset-inline-end: 24px;
}

.alcli-af-brands__go svg {
	width: 17px;
	height: 17px;
	fill: var(--af-ink);
}

.alcli-af-brands__item:hover .alcli-af-brands__go {
	background: var(--af-red);
	transform: translateX(3px);
}

.alcli-af-brands__item:hover .alcli-af-brands__go svg {
	fill: #fff;
}

/* ------------------------------------------------------- compact strip */

/* Logos only, fixed columns, for the home page. A brand row there is a signal
   of range rather than something to browse, so it stays quiet: no cards, no
   shadows, just the marks on a light tile. */
.alcli-af-brands--compact {
	grid-template-columns: repeat(var(--alcli-af-cols, 6), minmax(0, 1fr));
	gap: 16px;
}

.alcli-af-brands__chip {
	position: relative;
	display: grid;
	place-items: center;
	/* A landscape rectangle. The logo is the tile's whole content, so the box
	   only needs to be tall enough to hold it plus breathing room. */
	min-height: 124px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--af-line);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.22s ease, box-shadow 0.22s ease;
	transition-delay: calc(min(var(--alcli-af-i, 0), 12) * 35ms);
}

.alcli-af-brands__chip.is-in {
	opacity: 1;
	transform: none;
}

/* A red rule that draws itself across the top on hover. Cheaper to read than a
   colour change, and it gives twelve otherwise static tiles somewhere for the
   eye to land. */
.alcli-af-brands__chip::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--af-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.alcli-af-brands__chip:hover {
	border-color: rgba(205, 69, 71, 0.42);
	box-shadow: 0 22px 40px -24px rgba(20, 17, 15, 0.55);
	transform: translateY(-4px);
}

.alcli-af-brands__chip:hover::before {
	transform: scaleX(1);
}

.alcli-af-brands__chip:focus-visible {
	outline: 2px solid var(--af-red);
	outline-offset: 3px;
}

.alcli-af-brands__chiplogo {
	display: block;
	width: 100%;
}

.alcli-af-brands__chiplogo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 88px;
	object-fit: contain;
	/* Held back a little so a wall of twelve marks does not compete with the
	   headline above it, then brought fully up on hover. */
	filter: grayscale(0.3);
	opacity: 0.9;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.alcli-af-brands__chip:hover .alcli-af-brands__chiplogo img {
	filter: none;
	opacity: 1;
	transform: scale(1.04);
}

/* Fallback when a brand has no artwork at all. */
.alcli-af-brands__chipname {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: var(--af-ink);
}

.alcli-af-brands__seeall {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.alcli-af-brands__seealllink {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 15px 32px;
	border: 1px solid var(--af-ink);
	border-radius: var(--af-pill);
	background: var(--af-ink);
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.alcli-af-brands__seealllink:hover {
	background: var(--af-red);
	border-color: var(--af-red);
	color: #fff;
	transform: translateY(-2px);
}

.alcli-af-brands__seeallicon svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.alcli-af-brands__seealllink:hover .alcli-af-brands__seeallicon svg {
	transform: translateX(3px);
}

/* Steps down a column at a time so the tiles never get too narrow for the
   wordmark inside the artwork. */
@media (max-width: 1024px) {
	.alcli-af-brands--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.alcli-af-brands--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.alcli-af-brands__chip {
		min-height: 104px;
		padding: 14px 16px;
	}
}

@media (max-width: 480px) {
	.alcli-af-brands--compact {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.alcli-af-brands__chip {
		min-height: 96px;
		padding: 14px 18px;
	}

	.alcli-af-brands__chiplogo img {
		max-height: 72px;
	}

	.alcli-af-brands__seealllink {
		padding: 13px 24px;
		font-size: 12.5px;
	}
}

/* ==================================================== breadcrumb + strip */

/* The brand route is marked so it never reads as the all products route. */
.alcli-af-crumbs--brand {
	--af-red: #cd4547;
	position: relative;
	padding-inline-start: 11px;
	border-inline-start: 3px solid var(--af-red);
}

.alcli-af-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 10px 0 4px;
	padding: 10px 14px;
	background: var(--af-beige);
	border: 1px solid var(--af-line);
	border-radius: var(--af-pill);
	animation: alcli-af-fade 0.35s ease both;
}

.alcli-af-strip__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.alcli-af-strip__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
}

.alcli-af-strip__mark--initials {
	background: var(--af-red);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
}

.alcli-af-strip__text {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}

.alcli-af-strip__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--af-mute);
}

.alcli-af-strip__brand {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--af-ink);
}

.alcli-af-strip__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.alcli-af-strip__back,
.alcli-af-strip__exit {
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--af-pill);
	padding: 7px 14px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alcli-af-strip__back {
	background: var(--af-red);
	color: #fff;
}

.alcli-af-strip__back:hover {
	background: var(--af-red-dark);
	color: #fff;
}

.alcli-af-strip__exit {
	background: transparent;
	color: var(--af-soft);
	border: 1px solid var(--af-line);
}

.alcli-af-strip__exit:hover {
	color: var(--af-ink);
	border-color: var(--af-ink);
}

/* ============================================================ animations */

@keyframes alcli-af-drop {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes alcli-af-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

/* ============================================================ responsive */

@media (max-width: 980px) {
	.alcli-af__layout {
		grid-template-columns: 1fr;
	}

	.alcli-af__facets {
		position: static;
		display: none;
	}

	.alcli-af.is-facets-open .alcli-af__facets {
		display: flex;
		animation: alcli-af-fade 0.25s ease both;
	}

	.alcli-af .alcli-af__facetstoggle {
		display: block;
	}

	.alcli-af-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.alcli-af-brands__item--wide {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.alcli-af__bar {
		flex-wrap: wrap;
	}

	.alcli-af__searchwrap {
		flex: 1 1 100%;
		order: -1;
	}

	.alcli-af .alcli-af__search {
		/* 16px stops iOS zooming the page on focus. */
		font-size: 16px;
	}

	.alcli-af__grid {
		grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
		gap: 12px;
	}

	.alcli-af__lock {
		flex-wrap: wrap;
	}

	.alcli-af .alcli-af__lockexit {
		flex: 1 1 100%;
		text-align: center;
	}

	.alcli-af-brands {
		grid-template-columns: 1fr;
	}

	/* Below this width the row layout squeezes the logo into a sliver, so
	   every tile falls back to the stacked one. */
	.alcli-af-brands__item--wide .alcli-af-brands__inner,
	.alcli-af-brands__item--hero .alcli-af-brands__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		min-height: 0;
		padding: 18px;
	}

	.alcli-af-brands__item--wide .alcli-af-brands__logo,
	.alcli-af-brands__item--hero .alcli-af-brands__logo {
		width: 100%;
		flex: 0 0 auto;
		max-width: none;
		padding: 14px 16px;
	}

	.alcli-af-brands__item--wide .alcli-af-brands__logo img,
	.alcli-af-brands__item--hero .alcli-af-brands__logo img {
		max-height: 60px;
	}

	.alcli-af-brands__item--hero .alcli-af-brands__name {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alcli-af__card,
	.alcli-af-brands__item,
	.alcli-af-brands__chip,
	.alcli-af-brands__chip::before,
	.alcli-af-brands__chiplogo img,
	.alcli-af-brands__seealllink,
	.alcli-af__lock,
	.alcli-af-strip,
	.alcli-af__empty {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

	.alcli-af__thumb img,
	.alcli-af-brands__banner img,
	.alcli-af-brands__go {
		transition: none !important;
	}
}