/**
 * BAS Vendor Map — Shop Sections (storefront)
 *
 * Vendor-selectable feature sections on the Dokan vendor store page.
 *
 * 🔴 Rules this file lives by:
 *   - Text on light uses var(--bas-v-ink). NEVER var(--bas-v-primary) for text:
 *     a buttercream-yellow brand becomes unreadable. Tints use var(--bas-v-rgb).
 *   - Styling is template-driven. Vendors pick content, alignment, dark/light
 *     and height; the [data-tpl] attribute on #bas-store-root decides how it
 *     actually looks, exactly like the rest of the storefront.
 *   - Everything reads as finished before the JS runs. No section here depends
 *     on scripting to become visible.
 *   - This file exists so store.php does not grow another 400 lines. Keep new
 *     section CSS here.
 *
 * @since 6.164.0
 */

.bv-ss {
	position: relative;
	background: inherit;
}

/* Shared type. Mirrors .bv-section-title / .bv-section-lede so the new
   sections sit in the same visual system as the page around them. */
.bv-ss-title {
	font-family: var(--bas-v-display);
	font-size: clamp(32px, 4vw, 54px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0;
	color: inherit;
	text-wrap: balance;
}

.bv-ss-lede {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	margin: 16px 0 0;
	max-width: 520px;
	text-wrap: pretty;
}

.bv-ss-eyebrow {
	color: var(--bas-v-ink-strong);
}

.bv-ss-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

/* Bullets — a typographic tick, no icon font, no emoji. */
.bv-ss-bullets {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: grid;
	gap: 10px;
}

.bv-ss-bullets li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.bv-ss-tick {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(var(--bas-v-rgb), .16);
	position: relative;
}

.bv-ss-tick::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 4px;
	width: 4px;
	height: 8px;
	border: solid var(--bas-v-ink);
	border-width: 0 1.8px 1.8px 0;
	transform: rotate(45deg);
}

/* ─── Full-bleed photo / video ─────────────────────────────────────────────── */

.bv-ss--fullbleed {
	height: var(--bv-ss-h, 560px);
	overflow: hidden;
	display: flex;
	align-items: center;
}

.bv-ss-media,
.bv-ss-scrim {
	position: absolute;
	inset: 0;
}

.bv-ss-img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center 40%;
}

.bv-ss-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bv-ss--dark .bv-ss-scrim {
	background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .68) 100%);
}

.bv-ss--brand .bv-ss-scrim {
	background: linear-gradient(180deg, rgba(var(--bas-v-rgb), .20) 0%, var(--bas-v-hover-dark) 100%);
	opacity: .88;
}

.bv-ss--fullbleed .bv-ss-inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
}

.bv-ss--fullbleed .bv-ss-body {
	max-width: 620px;
	color: #fff;
}

.bv-ss--fullbleed .bv-ss-eyebrow {
	color: var(--bas-v-ink-on-dark, #ffe9a8);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

.bv-ss--fullbleed .bv-ss-title {
	text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.bv-ss--fullbleed .bv-ss-lede {
	color: rgba(255, 255, 255, .92);
}

.bv-ss--left .bv-ss-inner { justify-content: flex-start; }
.bv-ss--right .bv-ss-inner { justify-content: flex-end; }
.bv-ss--center .bv-ss-inner { justify-content: center; }
.bv-ss--center .bv-ss-body { text-align: center; }
.bv-ss--center .bv-ss-lede { margin-left: auto; margin-right: auto; }
.bv-ss--center .bv-ss-ctas { justify-content: center; }
.bv-ss--right .bv-ss-body { text-align: right; }
.bv-ss--right .bv-ss-lede { margin-left: auto; }
.bv-ss--right .bv-ss-ctas { justify-content: flex-end; }

/* ─── Split hero ───────────────────────────────────────────────────────────── */

.bv-ss--split {
	padding: 80px 0;
}

.bv-ss--split.bv-ss--light {
	background: var(--bas-v-grad-light);
}

.bv-ss--split.bv-ss--dark {
	background: #1c1a18;
	color: #fffbef;
}

.bv-ss-split-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 56px;
	align-items: stretch;
}

.bv-ss-split-photo {
	min-height: 520px;
	border-radius: 20px;
	background-size: cover;
	background-position: center;
}

.bv-ss-split-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 0;
}

/* Photo on the right — the copy column comes first in source order so a
   screen reader and a one-column phone both get the words before the picture. */
.bv-ss--photo-right .bv-ss-split-photo { order: 2; }
.bv-ss--photo-right .bv-ss-split-copy { order: 1; }

.bv-ss--dark .bv-ss-eyebrow { color: var(--bas-v-ink-on-dark, #ffe9a8); }
.bv-ss--dark .bv-ss-lede { color: rgba(246, 242, 228, .82); }
.bv-ss--dark .bv-ss-bullets li { color: #e9e4d5; }
.bv-ss--dark .bv-ss-tick { background: rgba(255, 233, 168, .2); }
.bv-ss--dark .bv-ss-tick::after { border-color: #ffe9a8; }
.bv-ss--dark .bv-btn--ghost { color: #fffbef; box-shadow: inset 0 0 0 1.5px rgba(255, 251, 239, .6); }

.bv-ss--light .bv-ss-lede { color: #4a4a4a; }
.bv-ss--light .bv-ss-bullets li { color: #3b3b3b; }

/* ─── Product spotlight ────────────────────────────────────────────────────── */

.bv-ss--spotlight {
	padding: 88px 0;
}

.bv-ss--spotlight.bv-ss--dark {
	background: #1c1a18;
	color: #fffbef;
}

.bv-ss-spot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 56px;
	align-items: center;
}

.bv-ss-spot-media {
	position: relative;
}

.bv-ss-spot-photo {
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 22px 48px rgba(20, 30, 10, .18);
}

.bv-ss-lowstock {
	position: absolute;
	top: 18px;
	left: 18px;
	background: #fffbef;
	color: #a8341a;
	border: 1px solid rgba(168, 52, 26, .25);
	border-radius: 999px;
	padding: 6px 12px;
	font-family: 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bv-ss-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: #666;
}

.bv-ss--dark .bv-ss-rating { color: rgba(246, 242, 228, .8); }

/* Star row: one string of glyphs, clipped to the average with a gradient.
   No images, no icon font, and it degrades to five plain stars. */
.bv-ss-stars {
	font-size: 15px;
	letter-spacing: 2px;
	background: linear-gradient(90deg, #f7b500 var(--bv-ss-stars, 100%), rgba(var(--bas-v-rgb), .22) var(--bv-ss-stars, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bv-ss-rating-count { opacity: .85; }

.bv-ss-spot-desc {
	font-family: var(--bas-v-display);
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	margin: 20px 0 0;
	max-width: 500px;
	text-wrap: pretty;
	color: #4a4a4a;
}

.bv-ss--dark .bv-ss-spot-desc { color: rgba(246, 242, 228, .88); }

.bv-ss-buy {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.bv-ss-price {
	font-family: var(--bas-v-display);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: inherit;
}

.bv-ss-price del { opacity: .45; font-size: .6em; margin-right: 6px; }
.bv-ss-price ins { text-decoration: none; }

.bv-ss-qty {
	display: flex;
	align-items: center;
	border: 1.5px solid #e0dbd0;
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
}

.bv-ss--dark .bv-ss-qty { border-color: rgba(255, 251, 239, .4); }

.bv-ss-qty-btn {
	background: none;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: inherit;
	font-family: 'Lato', sans-serif;
	transition: background .15s;
}

.bv-ss-qty-btn:hover { background: rgba(var(--bas-v-rgb), .1); }

.bv-ss-qty-input {
	width: 42px;
	text-align: center;
	border: none;
	font-size: 15px;
	font-weight: 700;
	font-family: 'Lato', sans-serif;
	-moz-appearance: textfield;
	background: transparent;
	color: inherit;
	padding: 0;
}

.bv-ss-qty-input::-webkit-inner-spin-button,
.bv-ss-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bv-ss-details {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bas-v-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
	padding: 6px 2px;
}

.bv-ss--dark .bv-ss-details { color: #ffe9a8; }

/* ─── Template variation ───────────────────────────────────────────────────── */

/* Editorial: hairlines, square corners, lighter display weight. */
[data-tpl="editorial"] .bv-ss-title { font-weight: 500; }
[data-tpl="editorial"] .bv-ss-split-photo,
[data-tpl="editorial"] .bv-ss-spot-photo { border-radius: 2px; box-shadow: none; }
[data-tpl="editorial"] .bv-ss--split.bv-ss--light { background: #f5f1ea; }

/* Bold: heavier display, chunkier shadow. */
[data-tpl="bold"] .bv-ss-title { font-weight: 800; }
[data-tpl="bold"] .bv-ss-spot-photo { box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.bv-ss-split-grid,
	.bv-ss-spot-grid { gap: 36px; }
	.bv-ss-split-photo { min-height: 360px; }
}

@media (max-width: 640px) {
	.bv-ss--fullbleed { height: auto; min-height: 420px; padding: 56px 0; }
	.bv-ss--fullbleed .bv-ss-inner { padding: 0 20px; }
	.bv-ss--split,
	.bv-ss--spotlight { padding: 56px 0; }
	.bv-ss-lede { font-size: 16px; }
	.bv-ss-ctas .bv-btn { width: 100%; justify-content: center; }

	/* One column: the photo goes first whichever side it was on, so the page
	   still reads picture-then-pitch rather than a wall of text. */
	.bv-ss--photo-right .bv-ss-split-photo { order: 1; }
	.bv-ss--photo-right .bv-ss-split-copy { order: 2; }

	.bv-ss-buy { gap: 12px; }
	.bv-ss-buy .bv-btn { flex: 1 1 100%; }
	.bv-ss-price { font-size: 30px; }
}

/* ─── Motion ───────────────────────────────────────────────────────────────── */

/* A reduced-motion visitor gets the poster frame instead of the loop — the
   swap happens in bas-shop-sections.js, because hiding the <video> here would
   leave an empty band where the picture should be. */
@media (prefers-reduced-motion: reduce) {
	.bv-ss-qty-btn { transition: none; }
	.bv-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLING HEADER  (6.166.0)
   Replaces the static hero when the vendor switches it on.

   🔴 The controls are the enhancement, not the content. They ship with the
   `hidden` attribute and the script removes it, because a dot row that does
   nothing for the first few seconds of a logged-out page load reads as broken.
   Slide one is complete without any of this.
   ═══════════════════════════════════════════════════════════════════════════ */

.bv-ssh {
	position: relative;
	padding: calc(var(--bv-nav-h, 88px) + 20px) 32px 0;
	margin-top: calc(var(--bv-nav-h, 88px) * -1);
}

.bv-ssh-frame {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	height: var(--bv-ssh-h, 620px);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(20, 30, 10, .15);
	outline-offset: 3px;
}

.bv-ssh-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease;
}

.bv-ssh-slide.is-on {
	opacity: 1;
	pointer-events: auto;
}

.bv-ssh-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* 6.174.0 — a slide's background video (Bloom). Sits on top of .bv-ssh-media
   and under .bv-ssh-scrim, so the photo is what shows while it buffers or if
   the phone refuses to autoplay it. */
.bv-ssh-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bv-ssh-scrim {
	position: absolute;
	inset: 0;
}

.bv-ssh--dark .bv-ssh-scrim {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .72) 100%);
}

.bv-ssh--brand .bv-ssh-scrim {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 0%, var(--bas-v-hover-dark) 100%);
	opacity: .92;
}

.bv-ssh-inner {
	position: relative;
	width: 100%;
	padding: 56px 56px 96px;
	color: #fffbef;
}

.bv-ssh--center .bv-ssh-inner { text-align: center; }
.bv-ssh--center .bv-ssh-lede,
.bv-ssh--center .bv-ss-ctas { margin-left: auto; margin-right: auto; }
.bv-ssh--center .bv-ss-ctas { justify-content: center; }
.bv-ssh--right .bv-ssh-inner { text-align: right; }
.bv-ssh--right .bv-ssh-lede { margin-left: auto; }
.bv-ssh--right .bv-ss-ctas { justify-content: flex-end; }

/* ─── Brand colour on a dark ground (6.168.0) ──────────────────────────────
   🔴 Amy: "the eyebrow above the header has my brand color but on a dark
   background is [not] legible. Same as we did for light colored brand colors
   we need to adapt dark brand colors for dark backgrounds."

   Two separate faults, both fixed here.

   1. THE COLOUR. These rules said `#ffe9a8` — a cream that is not anybody's
      brand colour. --bas-v-ink-on-dark is the vendor's own hue walked UP until
      it clears 4.5:1 on #1c1a18, the mirror of what --bas-v-ink-strong does on
      white. A dark red comes out a light red, not a cream.

   2. THE SPECIFICITY, which is why (1) was invisible anyway. `.bv-eyebrow` is
      declared in store.php's inline <style>, and an inline <style> in <head>
      is read AFTER an enqueued stylesheet. At equal specificity the later one
      wins, so this file's single-class `.bv-ssh-eyebrow` lost to it every
      time and the eyebrow rendered in --bas-v-ink-strong — brand colour,
      deepened for WHITE, printed on a photograph. Every rule below is now two
      classes deep so it outranks the inline sheet whatever order they load in.
      The same trap already bit the second CTA in 6.167.0; that comment is
      forty lines down. It is the trap of this file. */

.bv-ssh .bv-ssh-eyebrow {
	color: var(--bas-v-ink-on-dark, #ffe9a8);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

.bv-ssh-title {
	font-family: var(--bas-v-display);
	font-size: clamp(38px, 6vw, 82px);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.02em;
	margin: 10px 0 0;
	max-width: 900px;
	color: #fffbef;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
	text-wrap: balance;
}

.bv-ssh--center .bv-ssh-title { margin-left: auto; margin-right: auto; }
.bv-ssh--right .bv-ssh-title { margin-left: auto; }

.bv-ssh-lede {
	font-family: var(--bas-v-display);
	font-style: italic;
	font-size: 21px;
	line-height: 1.4;
	max-width: 560px;
	margin: 16px 0 0;
	color: rgba(255, 251, 239, .92);
	text-wrap: pretty;
}

/* ─── Controls ─────────────────────────────────────────────────────────────── */

.bv-ssh-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #1c1a18;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 3;
}

.bv-ssh-arrow:hover { background: #fff; }
.bv-ssh-arrow--prev { left: 20px; }
.bv-ssh-arrow--next { right: 20px; }

.bv-ssh-ctl {
	position: absolute;
	left: 56px;
	right: 56px;
	bottom: 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	z-index: 3;
}

.bv-ssh-dots { display: flex; gap: 8px; }

.bv-ssh-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.bv-ssh-dot.is-on { width: 34px; background: #fffbef; }

.bv-ssh-count {
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .85);
	font-variant-numeric: tabular-nums;
}

.bv-ssh-prog {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .25);
	z-index: 3;
}

.bv-ssh-prog i {
	display: block;
	height: 100%;
	width: 0;
	background: #fff;
}

.bv-ssh-prog.is-running i { animation: bv-ssh-prog var(--bv-ssh-int, 6s) linear forwards; }
.bv-ssh-prog.is-paused i { width: 100%; opacity: .45; animation: none; }

@keyframes bv-ssh-prog { from { width: 0; } to { width: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE HEADER TAKES THE SHAPE OF THE HERO IT REPLACES (6.167.0)

   Amy: "The scrolling header needs to adopt the layout the vendor had chosen —
   either Banner Overlay, product flood, or marquee (if they are on marquee the
   scrolling header should stay full bleed, if on overlay it stays as the
   rounded rectangle)."

   The four hero layouts are really two chassis: Banner Overlay and Asymmetric
   are INSET cards with the page showing around them; Marquee and Product Flood
   run edge to edge. A rounded box floating inside a shop built full-bleed reads
   as a different shop — which is what the 6.166.0 header did on three of the
   four layouts, because it was always the Banner Overlay shape.

   The class comes from PHP (render_header() reads $ctx['hero_layout']).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inset chassis — Banner Overlay keeps its 24px card; Asymmetric is the
   squarer of the two, so it gets the tighter radius its own hero uses. */
.bv-ssh--lay-asymmetric .bv-ssh-frame { border-radius: 20px; }

/* Full-bleed chassis — no page gutter, no radius, no lifted shadow. The type
   inside keeps its own inset so nothing runs into the screen edge. */
.bv-ssh--lay-marquee,
.bv-ssh--lay-product-flood {
	padding-left: 0;
	padding-right: 0;
}

.bv-ssh--lay-marquee .bv-ssh-frame,
.bv-ssh--lay-product-flood .bv-ssh-frame {
	max-width: none;
	border-radius: 0;
	box-shadow: none;
}

/* Product Flood's hero is a brand-coloured panel rather than a photograph, so
   its scrim leans on the brand colour instead of black — otherwise the header
   reads as a grey version of the shop underneath it. */
.bv-ssh--lay-product-flood.bv-ssh--brand .bv-ssh-scrim {
	background: linear-gradient(to bottom, rgba(var(--bas-v-rgb), .35) 0%, var(--bas-v-hover-dark) 100%);
	opacity: .95;
}

/* ─── A slide that is a quotation (6.167.0) ────────────────────────────────
   A review is somebody's sentence, not a headline. At the title's 82px a
   two-line quote fills the whole frame and stops reading as a recommendation,
   so it is set smaller and italic and the attribution under it carries the
   small-caps line. */
.bv-ssh-slide--review .bv-ssh-title {
	font-size: clamp(26px, 3.4vw, 46px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.12;
	max-width: 820px;
}

.bv-ssh-slide--review .bv-ssh-lede {
	font-family: 'Lato', sans-serif;
	font-style: normal;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ─── The second button, over a photo (6.167.0) ────────────────────────────
   🔴 Amy: "When I picked dark shade over the photo or left unchecked the
   second button wasn't really visible."

   .bv-btn--ghost is a button for LIGHT backgrounds. Over a photograph it is
   dark text on whatever happens to be behind it, which at the bottom of a
   scrim is very nearly nothing. Over media the second button gets a real
   outline, a slight wash so it holds on a busy photo, and white text. It is
   still clearly secondary to the filled first button; it just exists. */
/* ─── The FIRST button, over a photo (6.168.0) ─────────────────────────────
   🔴 Amy: "The buttons on my scrolling header no longer adopt my brand color."

   This class adds no background and no colour on purpose — .bv-btn already
   paints --bas-v-primary on --bas-v-fg-on, and that is the whole point: the
   button is the vendor's colour, exactly as it is on the One banner hero she
   was comparing it to. All this adds is an edge, because a mid-tone brand
   colour sitting on a mid-tone photograph has no silhouette without one.

   An inset ring rather than a border, for the same reason as --alt below:
   .bv-btn is border:0, so a real border makes this button 3px taller than the
   one beside it. Scoped under .bv-ss-ctas so it outranks store.php's inline
   sheet — see the note at the top of this file. */
.bv-ss-ctas .bv-ss-cta--onmedia {
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 251, 239, .55),
		0 6px 22px rgba(0, 0, 0, .28);
}

.bv-ss-ctas .bv-ss-cta--alt {
	background: rgba(255, 251, 239, .14);
	/* An inset ring, not a border — .bv-btn is border:0 and rings its ghost
	   variant this way, so a real border would make this button 3px taller
	   than the one beside it. */
	box-shadow: inset 0 0 0 1.5px rgba(255, 251, 239, .85);
	color: #fffbef;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.bv-ss-ctas .bv-ss-cta--alt:hover,
.bv-ss-ctas .bv-ss-cta--alt:focus-visible {
	background: rgba(255, 251, 239, .96);
	box-shadow: inset 0 0 0 1.5px #fffbef;
	color: #1c1a18;
	text-shadow: none;
}

/* Template flavours, same as every other section: the vendor picks content,
   the template decides how it sits. */
[data-tpl="editorial"] .bv-ssh { padding-left: 0; padding-right: 0; }
[data-tpl="editorial"] .bv-ssh-frame { max-width: none; border-radius: 4px; box-shadow: none; }
[data-tpl="editorial"] .bv-ssh-title { font-weight: 500; }
[data-tpl="bold"] .bv-ssh-title { font-weight: 800; }

@media (max-width: 900px) {
	.bv-ssh { padding-left: 16px; padding-right: 16px; }
	.bv-ssh-frame { height: min(var(--bv-ssh-h, 620px), 74vh); border-radius: 16px; }
	/* The full-bleed layouts stay full-bleed on a phone — this is where a 16px
	   gutter and a 16px radius would otherwise sneak back in. */
	.bv-ssh--lay-marquee,
	.bv-ssh--lay-product-flood { padding-left: 0; padding-right: 0; }
	.bv-ssh--lay-marquee .bv-ssh-frame,
	.bv-ssh--lay-product-flood .bv-ssh-frame { border-radius: 0; }
	.bv-ssh-slide--review .bv-ssh-title { font-size: clamp(22px, 6vw, 30px); }
	.bv-ssh-inner { padding: 32px 24px 78px; }
	.bv-ssh-ctl { left: 24px; right: 24px; bottom: 24px; }
	/* Arrows are a mouse affordance; a thumb swipes. They also sit right on top
	   of the headline at this width. */
	.bv-ssh-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bv-ssh-slide { transition: none; }
	.bv-ssh-prog { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TICKER  (6.166.0)
   Reuses @keyframes bv-marquee from store.php — which is why the track holds
   exactly two copies of the row: that animation translates -50%.
   ═══════════════════════════════════════════════════════════════════════════ */

.bv-ssk {
	overflow: hidden;
	position: relative;
}

.bv-ssk--dark { background: #1c1a18; color: #fffbef; }
.bv-ssk--color { background: var(--bas-v-primary); color: var(--bas-v-fg-on, #fff); }
.bv-ssk--light { background: rgba(var(--bas-v-rgb), .08); color: var(--bas-v-ink); }

.bv-ssk-track {
	display: flex;
	width: max-content;
	animation: bv-marquee var(--bv-ssk-speed, 34s) linear infinite;
}

.bv-ssk:hover .bv-ssk-track { animation-play-state: paused; }

.bv-ssk-row {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* 🔴 The loop is seamless only if each ROW carries its own trailing gap. With
   the spacing on the flex `gap` instead, the row is one gap short, the track's
   -50% lands half a gap early, and the strip visibly jumps once per lap. So the
   space after every item is a margin, and the row ends with one. */
.bv-ssk--text .bv-ssk-row { padding: 16px 0; }
.bv-ssk--text .bv-ssk-phrase,
.bv-ssk--text .bv-ssk-sep { margin-right: 48px; }

.bv-ssk-phrase {
	font-family: var(--bas-v-display);
	font-style: italic;
	font-size: 24px;
	white-space: nowrap;
}

.bv-ssk-sep { opacity: .4; font-size: 15px; }

.bv-ssk--images .bv-ssk-row { padding: 22px 0; }

.bv-ssk-tile {
	position: relative;
	flex-shrink: 0;
	width: 240px;
	height: 180px;
	margin-right: 18px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background-color: rgba(var(--bas-v-rgb), .18);
	background-size: cover;
	background-position: center;
	display: block;
}

button.bv-ssk-tile { cursor: pointer; }

.bv-ssk-price {
	position: absolute;
	left: 10px;
	bottom: 10px;
	background: #fffbef;
	color: #1c1a18;
	font-family: 'Lato', sans-serif;
	font-size: 12.5px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
}

/* The tile's name is for a screen reader; the picture is the point on screen. */
.bv-ssk-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

[data-tpl="editorial"] .bv-ssk-tile { border-radius: 2px; }

@media (max-width: 640px) {
	.bv-ssk-phrase { font-size: 19px; }
	.bv-ssk-tile { width: 180px; height: 135px; }
}

/* 🔴 A band that never stops moving is an accessibility problem, not a
   flourish. Animation off, and the strip becomes something you scroll. */
@media (prefers-reduced-motion: reduce) {
	.bv-ssk { overflow-x: auto; }
	.bv-ssk-track { animation: none; }
	.bv-ssk-row + .bv-ssk-row { display: none; }
}