/* ==========================================================================
   Wayvo featured brands carousel — [wayvo_featured_brands_carousel]

   Enqueued by shortcodes/wayvoFeaturedBrandsCarousel.php, on pages that use the
   shortcode only. It used to ride the blanket enqueue loop in functions.php and
   download on every page of the site.

   Built from the Figma export for Frame 538, 2026-09-12.

   ── ON THE NUMBERS ──────────────────────────────────────────────────────────
   The export MIXES SCALES, as Figma's "Copy as CSS" always does. The frame
   geometry came from a component instance scaled to 0.861645 — every long
   decimal divides cleanly by it (17.2329 = 20, 6.89317 = 8, 34.4659 = 40,
   13.7863 = 16) — while the type came from the unscaled text style definitions.

   The card is nonetheless built at the LITERAL export values, with no --scale
   multiplier, because the scaled numbers are the ones that are internally
   consistent:

       325 − 2(17.2329) − 17.23 = 273.30  →  two equal columns of 136.65   ✓
       188 − 2(17.2329)         = 153.53  →  the stated column height      ✓
       22 + 6.89 + 54           = 82.89   →  the stated top-group height   ✓

   and the type closes at ITS values in the same frame:

       name  24 × 90%       = 21.6  ≈ the stated 22px box                  ✓
       pill  14 × 140% + 4  = 23.6  ≈ the stated 24px pill                 ✓

   So 325 × 188 is the card as drawn, and the two halves agree. Paul's supplied
   text style (Geist 500 / 24px / 90% / 0% tracking) matches the layer exactly,
   which is the independent confirmation that type is at scale 1.0.

   ONE DELIBERATE ROUNDING: the description is 13.7863px in the export — a 16px
   style caught inside the scaled instance. Built at 14px. A sub-pixel font size
   renders no differently and the third decimal is an artefact, not a decision.

   NOT IN THE EXPORT: the gap BETWEEN cards. 17.2329 is the card's own internal
   gap. The track gap comes from the shortcode's `gap` attribute and is NOT
   scaled — it is not part of Frame 538 and Paul sets it directly.

   ── --fbc-scale ─────────────────────────────────────────────────────────────
   EVERY Figma number below is written as `calc(<literal> * var(--fbc-scale))`
   rather than as a pre-multiplied value. Three reasons, all learned the hard
   way on the header job:

     - the design's proportions stay locked together, so "smaller" cannot
       silently become "smaller, but with the padding slightly wrong";
     - the Figma numbers stay VISIBLE, so any line can still be checked against
       the file without reversing an arithmetic step;
     - "bigger / smaller" is a one-number change instead of a re-derivation
       across thirteen declarations.

   0.825 is Paul's call from the browser, in two steps: the design's own numbers
   rendered correctly but read too large on the page (-25%), then 0.75 read too
   small (+10%). The export was never wrong — the card just wants to be smaller
   here than it is in the frame. Treat what it looks like in a browser as better
   evidence than any inference from the export.
   ========================================================================== */

.wayvo_featured_brands {
	width: 100%;
	overflow: hidden;
	/* Top padding clears the focus ring: a 2px outline at 3px offset needs 5.
	   It was 4 and clipped. */
	padding: 6px 0 16px;
	cursor: grab;
	touch-action: pan-y;            /* let vertical page scroll through */
	overscroll-behavior-x: contain;
}

.wayvo_featured_brands:active {
	cursor: grabbing;
}

/* The gap between cards comes from the shortcode's `gap` attribute, written as
   a custom property. The JS reads the COMPUTED gap rather than the attribute, so
   a CSS change here cannot desynchronise the loop maths from the layout. */
.wayvo_featured_brands_track {
	display: flex;
	gap: var(--wayvo-fbc-gap, 16px);
	width: max-content;
	will-change: transform;
}

.wayvo_featured_brands_set {
	display: flex;
	gap: var(--wayvo-fbc-gap, 16px);
	flex: 0 0 auto;
}

/* Fallback when the animation is skipped (reduced motion, or no JS).
   Behaves as a plain horizontally scrollable row instead. */
.wayvo_featured_brands_static {
	overflow-x: auto;
	cursor: default;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wayvo_featured_brands_static::-webkit-scrollbar {
	display: none;
}

.wayvo_featured_brands_static .wayvo_featured_brands_track {
	transform: none !important;
	will-change: auto;
}

/* --------------------------------------------------------------------------
   Card — Frame 538
   -------------------------------------------------------------------------- */

.wayvo_featured_brand_card {
	/* THE CATEGORY COLOUR, set per card as an inline custom property by the
	   snippet. One declaration feeds both the pill's fill and the card's hover
	   state, so the two can never disagree about what colour this brand is.

	   The fallback is the resting card colour, which makes the no-category case
	   degrade to "hover does nothing" rather than to a colour nobody chose. */
	--wayvo-cat: #f5f5f5;

	/* Everything below multiplies a literal Figma value by this. See the note
	   at the top of the file before changing any of them individually. */
	--fbc-scale: 0.825;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: calc(17.23px * var(--fbc-scale));

	width: calc(325px * var(--fbc-scale));
	height: calc(188px * var(--fbc-scale));

	padding: calc(17.23px * var(--fbc-scale));
	border-radius: calc(6.89px * var(--fbc-scale));
	background-color: #f5f5f5;

	font-family: 'Geist', system-ui, -apple-system, sans-serif;
	text-decoration: none;
	color: #101011;
	transition: background-color 0.2s ease;
}

/* HOVER TAKES THE CATEGORY'S COLOUR, and the pill inverts to white.

   The card's text stays #101011 throughout, which is safe rather than lucky:
   near-black clears 4.5:1 against all twelve category colours (the worst is
   Fashion at 5.75:1). Checked before relying on it — the registry's own `on`
   field would NOT be safe here, failing 4.5:1 on eight of the twelve. */
.wayvo_featured_brand_card:hover,
.wayvo_featured_brand_card:focus-visible {
	background-color: var(--wayvo-cat);
	text-decoration: none;
	color: #101011;
}

.wayvo_featured_brand_card:hover .wayvo_featured_brand_card_pill,
.wayvo_featured_brand_card:focus-visible .wayvo_featured_brand_card_pill {
	background-color: #ffffff;
}

.wayvo_featured_brand_card:focus-visible {
	outline: 2px solid #101011;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Image column — Frame 542

   Half the card, not the 84px strip the previous build used: the export gives
   both columns 136.65 of the 273.30 available, and both `align-self: stretch`.
   flex: 1 1 0 reproduces that without hardcoding a width that only holds at
   exactly 325.
   -------------------------------------------------------------------------- */

.wayvo_featured_brand_card_image {
	position: relative;             /* anchor for the absolute image */
	flex: 1 1 0;
	align-self: stretch;
	min-width: 0;
	border-radius: calc(4px * var(--fbc-scale));
	overflow: hidden;
	background-color: #e2e2e2;
}

/* Pinned to all four edges rather than sized with width/height, so the box gets
   filled even if something else on the site forces `height: auto` on images.
   The !important flags are deliberate — OceanWP and WP core both set img sizing
   rules that otherwise win. */
.wayvo_featured_brand_card_image_file {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 0;

	/* Scales until both dimensions are covered, then trims the overflow evenly
	   from each edge. Never distorts. */
	object-fit: cover;
	object-position: center center;

	pointer-events: none;           /* stops the browser's native drag */
	-webkit-user-drag: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
   Text column — Frame 543

   space-between, so the pill sits on the card's bottom edge however short the
   description runs and pills line up across the row.
   -------------------------------------------------------------------------- */

.wayvo_featured_brand_card_body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex: 1 1 0;
	align-self: stretch;
	min-width: 0;
	user-select: none;              /* so dragging doesn't select text */
}

/* Frame 544 — name and description as one group at the top. */
.wayvo_featured_brand_card_head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: calc(6.89px * var(--fbc-scale));
}

.wayvo_featured_brand_card_name {
	margin: 0;
	font-size: calc(24px * var(--fbc-scale));
	font-weight: 500;
	/* 90%, which is below 1 — the export's "identical to box height, or 22px".
	   Deliberate in the design, not a typo. */
	line-height: 0.9;
	letter-spacing: 0;
	color: #101011;
}

.wayvo_featured_brand_card_text {
	margin: 0;
	/* Export says 13.7863 (14, see the top of the file); 16 since 2026-10-22 —
	   Paul: "two sizes larger". */
	font-size: calc(16px * var(--fbc-scale));
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #101011;

	/* The export gives this box exactly 54px = three lines at 130%. Clamped so a
	   long description cannot push the pill off a fixed-height card. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Frame 527 — the category pill. */
.wayvo_featured_brand_card_pill {
	flex: none;
	align-self: flex-start;
	padding: calc(2px * var(--fbc-scale)) calc(8px * var(--fbc-scale));
	/* Not scaled: the export's 34.4659 just means "fully round". */
	border-radius: 999px;
	background-color: var(--wayvo-cat);

	font-size: calc(14px * var(--fbc-scale));
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	white-space: nowrap;
	/* The DESIGN specifies #101011 here, on every category colour. It is not the
	   registry's `on` value, and that is correct — see the hover note above. */
	color: #101011;
	transition: background-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   The intro and the full-width row (Paul, 2026-10-20)
   See the shortcode header for the measurements. --wvfbci-u is rendered px
   per laptop px (100cqw / 1440, 0.5 -> 1.333), the side padding 40 -> 80 from
   1440 to 1920, as the other new sections.

   The row's own padding (6 top, 16 bottom, see .wayvo_featured_brands) is
   taken off the design's gaps so the cards land where the PNG has them: 80
   above, 120 below.
   -------------------------------------------------------------------------- */

.wv-fbci-wrap {
	container-type: inline-size;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wv-fbci {
	/* --wv-cw, not 100cqw (2026-10-21): the row stays full-bleed, the intro
	   stops at the content width (tokens.css). */
	--wvfbci-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);
	--wvfbci-pad: min(80px, max(calc(40 * var(--wvfbci-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));

	display: flex;
	flex-direction: column;
	gap: calc(80 * var(--wvfbci-u) - 6px);
	box-sizing: border-box;
	padding: calc(120 * var(--wvfbci-u)) 0 calc(120 * var(--wvfbci-u) - 16px);
	background-color: var(--wvfbci-bg, #ffffff);
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

.wv-fbci--no-intro {
	padding-top: 0;
	padding-bottom: 0;
}

.wv-fbci__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(40 * var(--wvfbci-u));
	padding: 0 calc(var(--wvfbci-pad) + var(--wv-content-gutter, 0px));
}

.wv-fbci__copy {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--wvfbci-u));
}

/* "Brands worth / buying from": 377 wide at 56px. */
.wv-fbci h2.wv-fbci__title {
	max-width: 7em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(40px, calc(56 * var(--wvfbci-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* ~686 wide at 24px: four lines, the first ending "gives you the". */
.wv-fbci p.wv-fbci__text {
	max-width: 28.6em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvfbci-u)));
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* Site button system, the export's 46px tier, scaled. */
.wv-fbci .wv-fbci__cta {
	flex: none;
	--wv-btn-pad-y: 0px;
	--wv-btn-pad-x: max(14.22px, calc(20 * var(--wvfbci-u)));
	--wv-btn-min-h: max(36px, calc(46 * var(--wvfbci-u)));
	--wv-btn-size: max(14px, calc(16 * var(--wvfbci-u)));
}

/* Full bleed: the row is the wrapper's full width. The track's left padding
   starts the first card at the gutter, in line with the text; the cards
   then drift out past the screen edge. */
.wv-fbci .wayvo_featured_brands {
	width: 100%;
	box-sizing: border-box;
}

.wv-fbci .wayvo_featured_brands_track {
	padding-left: var(--wvfbci-pad);
}

@media (max-width: 767px) {

	.wv-fbci {
		--wvfbci-pad: 20px;
		gap: 42px;
		padding: 80px 0 64px;
	}

	.wv-fbci--no-intro {
		padding-top: 0;
		padding-bottom: 0;
	}

	.wv-fbci__intro {
		gap: 28px;
	}

	.wv-fbci__copy {
		gap: 12px;
	}

	.wv-fbci h2.wv-fbci__title {
		font-size: 40px;
	}

	.wv-fbci p.wv-fbci__text {
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}

	.wv-fbci .wv-fbci__cta {
		--wv-btn-pad-x: 18px;
		--wv-btn-min-h: 40px;
		--wv-btn-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

	/* One number again, rather than a second set of hardcoded dimensions that
	   would have to be re-derived every time the desktop scale moves. 0.72 is
	   0.825 x 0.877, preserving the ratio the previous build used between the
	   desktop and mobile cards — so a change to the desktop scale carries here
	   proportionally instead of silently widening the gap between the two. */
	.wayvo_featured_brand_card {
		--fbc-scale: 0.72;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wayvo_featured_brands {
		overflow-x: auto;
		cursor: default;
	}

	.wayvo_featured_brands_track {
		transform: none !important;
	}

	.wayvo_featured_brand_card,
	.wayvo_featured_brand_card_pill {
		transition: none;
	}
}

/* ── Phones: no copy under 15px (Paul, 2026-10-21) ───────────────────────────
   The same size as the phone buttons (tokens.css). max() so anything already
   bigger keeps its size; same selectors as above, later, so they win. */
@media (max-width: 767px) {

	.wayvo_featured_brand_card_text {
		font-size: max(15px, calc(16px * var(--fbc-scale)));
	}

	.wayvo_featured_brand_card_pill {
		font-size: max(15px, calc(14px * var(--fbc-scale)));
	}
}