/* ============================================================
   flair/product-grid: a responsive grid of WooCommerce products.

   The title and link markup matches the product carousel, with this block's
   own class names. The grid has no scrolling and no JavaScript.
   ============================================================ */
.flair-product-grid-header{
	display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--flair-companion-space-sm);
	margin-bottom:var(--flair-companion-space-md);
}
/* Title: the same eyebrow-style label as the product carousel. */
.flair-product-grid-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-grid-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: the same quiet text link as the product carousel. It sits at the
   end of the row. */
.flair-product-grid-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 use fallbacks, for the same reason as the
	   product carousel. */
	transition:gap var(--flair-motion-fast, .18s) var(--flair-motion-ease, ease);
}
.flair-product-grid-link:hover{text-decoration:underline;gap:.55em}
.flair-product-grid-link:focus-visible{outline:0.125rem solid var(--flair-companion-color-primary);outline-offset:0.125rem}
.flair-product-grid-link:after{content:"\2192"}
.flair-product-grid-items{
	display:grid;grid-template-columns:repeat(var(--flair-product-grid-columns,4),1fr);
	gap:var(--flair-companion-space-lg) var(--flair-companion-space-md);
	list-style:none;margin:0;padding:0;
}
@media (max-width:75em){
	.flair-product-grid-items{grid-template-columns:repeat(min(3,var(--flair-product-grid-columns,4)),1fr)}
}
@media (max-width:48em){
	.flair-product-grid-items{grid-template-columns:repeat(min(2,var(--flair-product-grid-columns,4)),1fr)}
}
.flair-product-grid-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-grid-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-grid-card:hover .flair-product-grid-card-image img,
.flair-product-grid-card:focus-within .flair-product-grid-card-image img{filter:var(--flair-companion-image-filter-hover,var(--flair-companion-image-filter,none))}
.flair-product-grid-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-grid-card-title a{color:var(--flair-companion-color-foreground);text-decoration:none}
.flair-product-grid-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-grid-card-price del{font-size:.6em;font-weight:400;opacity:.6;margin-right:.4em}
.flair-product-grid-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)}

/* ---- Pagination ----
   Numbered links with rounded shapes, like the theme's pagination. The product
   grid and the blog archive look like one system. Shown when "Show pagination"
   is on. */
.flair-product-grid-pagination{
	display:flex;justify-content:center;flex-wrap:wrap;
	gap:var(--flair-companion-space-2xs);margin-top:var(--flair-companion-space-lg);
}
.flair-product-grid-pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:2.25rem;height:2.25rem;padding:0 .75rem;border-radius:var(--flair-companion-radius-button,62.4375rem);
	border:0.0625rem solid transparent;text-decoration:none;
	font-family:var(--flair-companion-font-headings);font-weight:600;
	font-size:var(--flair-companion-font-size-small);color:var(--flair-companion-color-foreground);
}
.flair-product-grid-pagination a.page-numbers:hover{border-color:var(--flair-companion-color-border);background:var(--flair-companion-color-background-alt)}
.flair-product-grid-pagination a.page-numbers:focus-visible{outline:0.125rem solid var(--flair-companion-color-primary);outline-offset:0.125rem}
.flair-product-grid-pagination span.page-numbers.current{background:var(--flair-companion-color-primary);color:var(--flair-companion-color-background)}
.flair-product-grid-pagination span.page-numbers.dots{border:none;background:none;color:var(--flair-companion-color-muted);min-width:0;padding:0 .25em}

/* 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-grid{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-grid.is-style-gallery .flair-product-grid-card{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--flair-companion-radius-small,.75rem)}
.flair-product-grid.is-style-gallery .flair-product-grid-card-image{position:absolute;inset:0;border-radius:0}
.flair-product-grid.is-style-gallery .flair-product-grid-card-image img{width:100%;height:100%;aspect-ratio:auto;transition:transform .4s ease,filter .45s ease}
.flair-product-grid.is-style-gallery .flair-product-grid-card:hover .flair-product-grid-card-image img,
.flair-product-grid.is-style-gallery .flair-product-grid-card:focus-within .flair-product-grid-card-image img{transform:scale(1.05)}
.flair-product-grid.is-style-gallery .flair-product-grid-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-grid.is-style-gallery .flair-product-grid-card-title,
.flair-product-grid.is-style-gallery .flair-product-grid-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-grid.is-style-gallery .flair-product-grid-card-price{bottom:1rem}
.flair-product-grid.is-style-gallery .flair-product-grid-card-title{bottom:2.6rem;font-size:1.0625rem}
.flair-product-grid.is-style-gallery .flair-product-grid-card-title a,
.flair-product-grid.is-style-gallery .flair-product-grid-card-price,
.flair-product-grid.is-style-gallery .flair-product-grid-card-price *{color:#fff}
/* The price keeps the store treatment: the old price small and struck through, the current one plain. */
.flair-product-grid.is-style-gallery .flair-product-grid-card-price del{text-decoration:line-through}
.flair-product-grid.is-style-gallery .flair-product-grid-card-price ins{text-decoration:none}
.flair-product-grid.is-style-gallery .flair-product-grid-card:hover:after,
.flair-product-grid.is-style-gallery .flair-product-grid-card:focus-within:after,
.flair-product-grid.is-style-gallery .flair-product-grid-card:hover .flair-product-grid-card-title,
.flair-product-grid.is-style-gallery .flair-product-grid-card:hover .flair-product-grid-card-price,
.flair-product-grid.is-style-gallery .flair-product-grid-card:focus-within .flair-product-grid-card-title,
.flair-product-grid.is-style-gallery .flair-product-grid-card:focus-within .flair-product-grid-card-price{opacity:1}
.flair-product-grid.is-style-gallery .flair-product-swatches{display:none}
@media (hover:none){
	.flair-product-grid.is-style-gallery .flair-product-grid-card:after,
	.flair-product-grid.is-style-gallery .flair-product-grid-card-title,
	.flair-product-grid.is-style-gallery .flair-product-grid-card-price{opacity:1}
	.flair-product-grid.is-style-gallery .flair-product-grid-card:after{background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 55%)}
}
.flair-product-grid.is-style-gallery .flair-product-grid-items{gap:.5rem}