/* ==============================================================
   Brand logo strip ("Officially Licensed Figures From")
   Ported from the live Shopify theme's sections/ww-trust-logos.liquid,
   as configured for the Figures collection page only.

   Values below are the ACTUAL live values (20px/5px padding,
   #F6F5F6 background, zero label spacing) — not the section's
   schema defaults.
   ============================================================== */

/* This renders as a plain child of <main> (constrained-width, ~740px),
   not inside the alignfull "Archive Header" group it visually sits below —
   so its background needs an explicit full-bleed layer to span edge to
   edge like the title banner above it, rather than showing as a narrow
   inset card. Uses Ollie's own --tertiary token (not Shopify's literal
   #F6F5F6, which is a hair off) so this band, the title banner above, and
   the filter row below all read as one continuous background rather than
   three subtly different shades. */
.ww-trust-logos {
	position: relative;
	padding-top: 20px;
	padding-bottom: 5px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.ww-trust-logos::before {
	content: "";
	position: absolute;
	top: 0;
	/* Extends past this box's own bottom edge to cover the "Product Grid
	   Section" wrapper's top padding + the (usually empty) store-notices
	   gap between here and the filter row below — that space belongs to
	   an ancestor this component can't reach directly, so the two
	   full-bleed layers are overlapped generously rather than measured
	   exactly (the theme's own spacing tokens are fluid/clamp()-based, so
	   an exact gap isn't a fixed number anyway). */
	bottom: -80px;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--tertiary, #f8f7fc);
	z-index: -1;
}

/* Filter row (product type / manufacturer / anime franchise) shares the
   same full-bleed band so title -> logos -> filters reads as one
   unbroken section, matching the live reference. Figures-only: other
   categories don't have the brand-logo strip above their filter row, so
   their own background stays untouched. */
body.term-figures .ww-filter-bar {
	position: relative;
}

body.term-figures .ww-filter-bar::before {
	content: "";
	position: absolute;
	/* Overlaps upward into the same gap .ww-trust-logos::before already
	   extends into from above, so the two layers meet with margin to
	   spare regardless of viewport-driven spacing changes. */
	top: -80px;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--tertiary, #f8f7fc);
	z-index: -1;
}

.ww-trust-logos__label {
	font-size: 11px;
	font-weight: 700;
	color: #9a9aa4;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	margin-bottom: 0;
}

.ww-trust-logos__label--second {
	margin-bottom: 0;
	margin-top: 20px;
}

.ww-trust-logos__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	flex-wrap: wrap;
}

/* Logos sit desaturated by default and come to full color on hover.
   This is the whole visual trick of the section — keep it. */
.ww-trust-logos__row img {
	width: auto;
	height: auto;
	filter: grayscale(65%) opacity(0.8);
	transition: filter 0.25s ease;
}

.ww-trust-logos__row img:hover {
	filter: grayscale(0%) opacity(1);
}

/* Per-logo widths differ on purpose — tuned so the logos appear
   optically balanced, not mathematically equal. Don't normalize. */
.ww-trust-logos__row img.logo-furyu  { width: 124px; }
.ww-trust-logos__row img.logo-bandai { width: 232px; }
.ww-trust-logos__row img.logo-taito  { width: 136px; }

@media screen and (max-width: 749px) {
	.ww-trust-logos__row {
		gap: 28px;
	}
}