/* ============================================================
   flair/product-carousel: a horizontal row of WooCommerce products.

   A title and link sit above a scrolling track of cards, with previous and
   next buttons (assets/js/product-carousel.js). The track uses native CSS
   scroll snapping.
   ============================================================ */
.flair-product-carousel-header{
	display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--flair-companion-space-sm);
	margin-bottom:var(--flair-companion-space-md);
}
/* Title: an eyebrow-style label, not a heading. It is a section label such as
   "New arrivals", so it uses the same style as the eyebrow elsewhere. */
.flair-product-carousel-title{margin:0}
/* The label also carries the theme's Eyebrow style (is-style-eyebrow), so it follows the Eyebrow settings. The look below is only the
   fallback for a theme without that style: :where() gives it no specificity, so the theme's style always wins. */
:where(.flair-product-carousel-title){
	font-family:var(--flair-companion-font-headings);font-weight:700;
	font-size:var(--flair-companion-font-size-lead);letter-spacing:.1em;text-transform:uppercase;
	color:var(--flair-companion-color-secondary);
}
/* Link: a quiet text link with an arrow. It is not styled like a heading, so
   it does not look like a stray title when there is no title above it. */
.flair-product-carousel-link{
	margin-left:auto;
	display:inline-flex;align-items:center;gap:.35em;
	font-family:var(--flair-companion-font-body);font-weight:700;
	font-size:var(--flair-companion-font-size-small);
	text-decoration:none;color:var(--flair-companion-color-primary);
	white-space:nowrap;
	/* The Motion and Shadow tokens (--flair-motion-* and --flair-shadow-*) come
	   from the Flair Theme. Under another theme they are undefined, so each use
	   has a fallback. */
	transition:gap var(--flair-motion-fast, .18s) var(--flair-motion-ease, ease);
}
.flair-product-carousel-link:hover{text-decoration:underline;gap:.55em}
.flair-product-carousel-link:focus-visible{outline:0.125rem solid var(--flair-companion-color-primary);outline-offset:0.125rem}
.flair-product-carousel-link:after{content:"\2192"}
.flair-product-carousel-track-wrap{position:relative}
.flair-product-carousel-track{
	position:relative;display:flex;gap:var(--flair-companion-space-md);overflow-x:auto;scroll-snap-type:x proximity;
	list-style:none;margin:0;padding:0 0 var(--flair-companion-space-xs);
	scrollbar-width:none;
}
.flair-product-carousel-track::-webkit-scrollbar{display:none}
.flair-product-carousel-card{flex:0 0 auto;width:15rem;scroll-snap-align:start}
.flair-product-carousel-card-image{display:block;background:var(--flair-companion-color-background-alt);border-radius:min(.5rem,var(--flair-companion-radius-card,.5rem));overflow:hidden}
.flair-product-carousel-card-image img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:var(--flair-companion-image-filter,none);transition:filter .45s ease}
.flair-product-carousel-card:hover .flair-product-carousel-card-image img,
.flair-product-carousel-card:focus-within .flair-product-carousel-card-image img{filter:var(--flair-companion-image-filter-hover,var(--flair-companion-image-filter,none))}
.flair-product-carousel-card-title{
	margin:var(--flair-companion-space-xs) 0 var(--flair-companion-space-3xs);
	font-family:var(--flair-companion-font-body);font-weight:600;
	font-size:var(--flair-companion-font-size-small);line-height:1.3;
}
.flair-product-carousel-card-title a{color:var(--flair-companion-color-foreground);text-decoration:none}
.flair-product-carousel-card-price{
	font-family:var(--flair-companion-font-body);font-size:var(--flair-companion-font-size-small);
	color:var(--flair-companion-color-muted);
}
.flair-product-carousel-card-price del{font-size:.6em;font-weight:400;opacity:.6;margin-right:.4em}
.flair-product-carousel-card-price ins{text-decoration:none;color:var(--flair-companion-color-foreground)}
.flair-product-swatches{display:flex;gap:.35rem;margin-top:.4rem}
.flair-product-swatch{
	width:1.1rem;height:1.1rem;border-radius:50%;border:0.0625rem solid var(--flair-companion-color-border);
	background-size:cover;background-position:center;display:inline-block;
}
.flair-product-swatch--blank{background:var(--flair-companion-color-background-alt)}
.flair-product-carousel-arrow{
	position:absolute;top:35%;transform:translateY(-50%);
	width:2.5rem;height:2.5rem;border-radius:50%;border:0.0625rem solid var(--flair-companion-color-border);
	background:var(--flair-companion-color-background);color:var(--flair-companion-color-foreground);
	font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
	box-shadow:var(--flair-shadow-sm, 0 0.125rem 0.5rem rgba(40,46,51,.10));
}
.flair-product-carousel-prev{left:-1.25rem}
.flair-product-carousel-next{right:-1.25rem}
.flair-product-carousel-arrow:disabled{opacity:.35;cursor:default}
.flair-product-carousel-arrow:focus-visible{outline:0.125rem solid var(--flair-companion-color-primary);outline-offset:0.125rem}
@media (max-width:60em){
	.flair-product-carousel-arrow{display:none}
}

/* In a page with a narrow reading column, the product rows take the wide width of the site,
   like the sections around them (the wide size is WordPress's own variable). */
.is-layout-constrained > .flair-product-carousel{max-width:var(--wp--style--global--wide-size,75rem)}

/* Gallery style: square pictures, like a photo feed. The name and the price show on hover or
   focus (always on a phone, where there is no hover). */
.flair-product-carousel.is-style-gallery .flair-product-carousel-card{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--flair-companion-radius-small,.75rem)}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-image{position:absolute;inset:0;border-radius:0}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-image img{width:100%;height:100%;aspect-ratio:auto;transition:transform .4s ease,filter .45s ease}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:hover .flair-product-carousel-card-image img,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:focus-within .flair-product-carousel-card-image img{transform:scale(1.05)}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:after{
	content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
	background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.1) 70%);
}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-title,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price{position:absolute;left:1rem;right:1rem;z-index:1;margin:0;opacity:0;transition:opacity .25s ease;color:#fff;text-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,.45)}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price{bottom:1rem}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-title{bottom:2.6rem;font-size:1.0625rem}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-title a,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price *{color:#fff}
/* The price keeps the store treatment: the old price small and struck through, the current one plain. */
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price del{text-decoration:line-through}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price ins{text-decoration:none}
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:hover:after,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:focus-within:after,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:hover .flair-product-carousel-card-title,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:hover .flair-product-carousel-card-price,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:focus-within .flair-product-carousel-card-title,
.flair-product-carousel.is-style-gallery .flair-product-carousel-card:focus-within .flair-product-carousel-card-price{opacity:1}
.flair-product-carousel.is-style-gallery .flair-product-swatches{display:none}
@media (hover:none){
	.flair-product-carousel.is-style-gallery .flair-product-carousel-card:after,
	.flair-product-carousel.is-style-gallery .flair-product-carousel-card-title,
	.flair-product-carousel.is-style-gallery .flair-product-carousel-card-price{opacity:1}
	.flair-product-carousel.is-style-gallery .flair-product-carousel-card:after{background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 55%)}
}
.flair-product-carousel.is-style-gallery .flair-product-carousel-track{gap:.5rem}