/* GENERATED by bas-shield-css.py from bas-brand-studio.css — do not edit; edit the source and re-run release.sh.
   Every BAS selector carries :not(#bas-shield):not(#bas-shield) so Divi's boosted global CSS
   (.et-db #et-boc .et-l …) cannot override it. See CLAUDE.md "Divi boosted CSS". */
/**
 * BAS Brand Studio — sales page sections.
 *
 * Four Divi 5 modules share this one stylesheet: Hero, Your Look, Your Products
 * and Catalog. Each is a standalone module that can be dropped onto any sales
 * page on its own, in any order, or with the other three.
 *
 * Source of truth: brand-generator-mockups/vendor-brand-generator-ui-mockups/
 * project/Brand Studio Sales Page.dc.html — sections 1 to 4. Section 5 ("How it
 * works") and section 6 ("Closing CTA" / the Bloom plan) are deliberately NOT
 * built; Amy builds those herself with stock Divi modules.
 *
 * 🔴 THE MOCKUP IS A FIXED 1440px CANVAS. These sections are not. The mockup's
 * 1200px inner column becomes a max-width with real gutters, its two-column
 * grids collapse at 980px and again at 640px, and every fixed pixel width on a
 * card or a panel is a max-width. A section that is pixel-perfect at 1440 and
 * broken on a phone is not the design; it is half of it.
 *
 * 🔴 EVERY MODULE PREFIXES ITS OWN CLASSES and shares only the tokens below.
 * Two modules on one page must not be able to restyle each other, and a module
 * dropped on a page that already has BAS styles must not leak into them.
 *
 * @package BAS_Vendor_Showcase
 * @since   1.8.0
 */

.bas-bs-hero:not(#bas-shield):not(#bas-shield),
.bas-bs-look:not(#bas-shield):not(#bas-shield),
.bas-bs-prod:not(#bas-shield):not(#bas-shield),
.bas-bs-cat:not(#bas-shield):not(#bas-shield) {
	/* ── BAS design tokens, as the mockup uses them ────────────────────── */
	--bas-bs-cream:    #fffbef;
	--bas-bs-cream-2:  #fff6de;
	--bas-bs-ink:      #313131;
	--bas-bs-ink-soft: #4a4a4a;
	--bas-bs-muted:    #6b6e60;             /* was #7d8073 — under 4.5:1 on cream */
	--bas-bs-rule:     #ece7d7;
	--bas-bs-rule-2:   #ded8c6;
	--bas-bs-green:    #70ac43;
	--bas-bs-green-dk: #1d741b;
	--bas-bs-lime:     #c2e86b;
	--bas-bs-orange:   #ff4c25;
	--bas-bs-teal:     #30b2b4;
	--bas-bs-yellow:   #ffda3d;
	--bas-bs-dark:     #313131;

	/* 🔴 EVERY FAKE WINDOW IS A WHITE OBJECT SITTING ON THE CREAM PAGE. The
	   mockup put cream chrome on a cream canvas, which reads as one flat field
	   on a real screen — you cannot tell where the picture starts. These three
	   are the panel recipe; use them, don't hand-roll a border. */
	--bas-bs-panel:      #ffffff;
	--bas-bs-panel-edge: #d9d2be;
	--bas-bs-panel-cast: 0 22px 48px rgba(20, 30, 10, .20), 0 2px 6px rgba(20, 30, 10, .07);

	/* 🔴 THE INNER COLUMN FOLLOWS THE DIVI ROW, IT DOES NOT FIGHT IT. The
	   mockup's canvas was 1200px, but a module dropped into a full-width Divi
	   row that then pins itself to 1200 reads as "stuck at 80%" next to every
	   other module on the page — which is exactly what it looked like. 1600 is
	   the widest the artboard ladders below have rungs for; past that the
	   section centres instead of leaving a lake of empty cream on one side.
	   Override `--bas-bs-max` on the Divi module for a narrower column, or set
	   it to `none` for true edge-to-edge. */
	--bas-bs-max:      1600px;
	/* 🔴 THE 64px CEILING IS LOAD-BEARING, NOT A ROUND NUMBER. At the 1600px
	   cap, 72px gutters left 1456px of content — four pixels under the Look
	   section's top scale rung, so a 1920px monitor drew the samples SMALLER
	   than a 1600px one. 64 leaves 1472 and the ladder tops out properly. */
	--bas-bs-gutter:   clamp(20px, 4vw, 64px);

	box-sizing: border-box;
	color: var(--bas-bs-ink);
	font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.bas-bs-hero:not(#bas-shield):not(#bas-shield) *,
.bas-bs-look:not(#bas-shield):not(#bas-shield) *,
.bas-bs-prod:not(#bas-shield):not(#bas-shield) *,
.bas-bs-cat:not(#bas-shield):not(#bas-shield) * { box-sizing: border-box; }

/* The inner column every section shares. */
.bas-bs-hero__inner:not(#bas-shield):not(#bas-shield),
.bas-bs-look__inner:not(#bas-shield):not(#bas-shield),
.bas-bs-prod__inner:not(#bas-shield):not(#bas-shield),
.bas-bs-cat__inner:not(#bas-shield):not(#bas-shield) {
	width: 100%;
	max-width: var(--bas-bs-max);
	margin: 0 auto;
	padding-left: var(--bas-bs-gutter);
	padding-right: var(--bas-bs-gutter);
	position: relative;
}

/*
 * 🔴 MOTION IS OPT-OUT, NOT OPT-IN. The mockup's panels animate on a long loop.
 * A vendor who has asked their operating system for less motion gets the final
 * frame of every one of them rather than nothing at all — an animation whose
 * 0% keyframe is `opacity: 0` and which is simply switched off leaves a blank
 * panel, which is worse than a still one.
 */
@media (prefers-reduced-motion: reduce) {
	.bas-bs-hero:not(#bas-shield):not(#bas-shield) [class*="__anim"],
	.bas-bs-look:not(#bas-shield):not(#bas-shield) [class*="__anim"],
	.bas-bs-prod:not(#bas-shield):not(#bas-shield) [class*="__anim"],
	.bas-bs-cat:not(#bas-shield):not(#bas-shield)  [class*="__anim"] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION 1 — HERO
 * module BrandStudioHero · bas/brand-studio-hero · prefix .bas-bsh
 * Root  : .bas-bs-hero.bas-bsh          (shared tokens + own rules)
 * Inner : .bas-bsh__inner.bas-bs-hero__inner   ← BOTH names; the shared
 *         max-width/gutter rule above styles the `bas-bs-hero__inner` half,
 *         everything below hangs off the `bas-bsh__inner` half.
 * Source: "Brand Studio Sales Page.dc.html" lines 36–141.
 *
 * 🔴 2.10.0: the right-hand window is a stack of real screenshots of the
 *    Your Look screen (one per house style), cycling on a CSS loop. It scales
 *    as one picture at any width — there is no inner layout left to fold.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Low specificity on purpose: a Divi background setting on the module should
   still beat this. Amy's page is cream already; this is for the standalone drop. */
.bas-bsh:not(#bas-shield):not(#bas-shield) {
	position: relative;
	overflow: hidden;                       /* clips the produce loop, as the mockup page did */
	padding: clamp(44px, 6vw, 76px) 0 clamp(52px, 7vw, 84px);
	background: var(--bas-bs-cream);
}

/* Decorative produce loop, bleeding off the section's top-right corner. */
.bas-bsh__loop:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	right: -70px;
	top: -40px;
	width: clamp(150px, 21vw, 300px);
	height: auto;
	max-width: none;                        /* themes ship img{max-width:100%} */
	opacity: .16;
	pointer-events: none;
	user-select: none;
}

.bas-bsh__grid:not(#bas-shield):not(#bas-shield) {
	display: grid;
	/* 🔴 THE COPY COLUMN GROWS WITH THE ROW, IT IS NOT PINNED AT 420. A flat
	   420px was the mockup's share of a 1200px canvas (about 37%); in a
	   full-width Divi row it left the pitch in a skinny gutter beside a
	   1000px browser screenshot. The clamp holds that 37% share, with 400 as
	   the floor (the two-column state only exists above a 980px viewport, and
	   the headline needs that much) and 560 as the ceiling (past ~65
	   characters the lede stops being scannable). */
	grid-template-columns: minmax(0, clamp(400px, 37%, 560px)) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

/* ── Left column: the pitch ─────────────────────────────────────────────── */

.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__eyebrow {
	margin: 0;
	font: 900 12px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;              /* copy is sentence case in the PHP so
	                                           screen readers don't spell it out */
	color: var(--bas-bs-orange);
}

.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__headline {
	margin: 20px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: var(--bas-fs-h1, clamp(32px, 4.4vw, 56px)); /* site kit token, 2.16.0 */
	line-height: 1.06;
	letter-spacing: -.02em;
	color: var(--bas-bs-ink);
	text-wrap: balance;
}

.bas-bsh__headline:not(#bas-shield):not(#bas-shield) i {
	font-style: italic;
	color: var(--bas-bs-green-dk);
}

.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__lede {
	margin: 22px 0 0;
	font: 400 clamp(16px, .5vw + 14px, 18px)/1.62 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
	max-width: 520px;                       /* was 430 — the column is wider now */
	text-wrap: pretty;
}

.bas-bsh__actions:not(#bas-shield):not(#bas-shield) {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Buttons (2.16.0): the site kit's .bas-btn — primary is .bas-btn--lg, the
   second is .bas-btn--outline .bas-btn--lg. Only layout lives here. */
.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__btn { text-decoration: none; }

.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__meta {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font: 400 13px/1.4 'Lato', system-ui, sans-serif;
	letter-spacing: .04em;
	color: var(--bas-bs-muted);
}
.bas-bsh__meta:not(#bas-shield):not(#bas-shield) li { position: relative; margin: 0; }
/* Separator dots live in the 18px gap, so they vanish for free when the list wraps. */
.bas-bsh__meta:not(#bas-shield):not(#bas-shield) li + li::before { content: "·"; position: absolute; left: -11px; }

/* ── Right column: the fake browser window ──────────────────────────────── */

.bas-bsh__stage:not(#bas-shield):not(#bas-shield) { position: relative; }

.bas-bsh__frame:not(#bas-shield):not(#bas-shield) {
	container-type: inline-size;            /* everything inside sizes off THIS, not the viewport */
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--bas-bs-panel-edge);
	background: var(--bas-bs-panel);
	box-shadow: var(--bas-bs-panel-cast);
}

.bas-bsh__chrome:not(#bas-shield):not(#bas-shield) {
	height: 34px;
	background: #f2eee1;
	border-bottom: 1px solid #e7e2d2;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 13px;
}
.bas-bsh__dot:not(#bas-shield):not(#bas-shield) { width: 9px; height: 9px; flex: none; border-radius: 999px; }
.bas-bsh__dot--red:not(#bas-shield):not(#bas-shield)    { background: #ff7660; }
.bas-bsh__dot--yellow:not(#bas-shield):not(#bas-shield) { background: var(--bas-bs-yellow); }
.bas-bsh__dot--green:not(#bas-shield):not(#bas-shield)  { background: var(--bas-bs-green); }
.bas-bsh__url:not(#bas-shield):not(#bas-shield) {
	margin-left: 12px;
	flex: 1 1 auto;
	min-width: 0;
	height: 19px;
	border-radius: 999px;
	background: var(--bas-bs-panel);
	border: 1px solid var(--bas-bs-panel-edge);
	padding: 0 10px;
	font: 400 10px/17px 'Lato', system-ui, sans-serif;
	color: #79746a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;                /* needs a block box, not a flex one */
}

/*
 * 2.10.0 — the window holds the REAL Your Look screen, eight frames deep, one
 * per house style. Stamped is the still frame at the bottom of the stack; the
 * other seven fade in over it in turn and the loop lands back on Stamped.
 * 24s: Stamped holds 5.8s, then each of the seven gets 2.6s. Delays are
 * NEGATIVE (start-time minus 24s) so no frame sits on its 0% keyframe while
 * waiting — every animation is running from the first paint.
 *
 * 🔴 The ratio box is the frames' own (1400 × 950). The Stamped frame is a few
 * pixels shorter (no "Not saved yet" line), so every frame is pinned to the
 * top with object-fit: cover rather than stretched.
 */
.bas-bsh__shots:not(#bas-shield):not(#bas-shield) {
	position: relative;
	aspect-ratio: 1400 / 950;
	background: #fffbef;                    /* the dashboard's own ground while a frame loads */
}
.bas-bsh__shot:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.bas-bsh__animshot:not(#bas-shield):not(#bas-shield) {
	opacity: 0;
	animation: bas-bsh-shot 24s linear infinite both;
}
.bas-bsh__animshot--1:not(#bas-shield):not(#bas-shield) { animation-delay: -18.2s; }
.bas-bsh__animshot--2:not(#bas-shield):not(#bas-shield) { animation-delay: -15.6s; }
.bas-bsh__animshot--3:not(#bas-shield):not(#bas-shield) { animation-delay: -13s; }
.bas-bsh__animshot--4:not(#bas-shield):not(#bas-shield) { animation-delay: -10.4s; }
.bas-bsh__animshot--5:not(#bas-shield):not(#bas-shield) { animation-delay: -7.8s; }
.bas-bsh__animshot--6:not(#bas-shield):not(#bas-shield) { animation-delay: -5.2s; }
.bas-bsh__animshot--7:not(#bas-shield):not(#bas-shield) { animation-delay: -2.6s; }

@keyframes bas-bsh-shot {
	0%     { opacity: 0; }
	2%     { opacity: 1; }
	10.8%  { opacity: 1; }
	12.8%  { opacity: 0; }
	100%   { opacity: 0; }
}

/* Reduced motion: the shared rule would force every frame to opacity 1, and
   the last one in the stack (Sprinkle) would win. Hold Stamped instead. */
@media (prefers-reduced-motion: reduce) {
	.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__animshot { opacity: 0 !important; }
}

/* The three numbers under the window — live text, not part of the picture. */
.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__facts {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px 10px;
}
.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__facts li {
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--bas-bs-panel);
	border: 1px solid var(--bas-bs-panel-edge);
	font: 400 13px/1.3 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
}
.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__facts b {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--bas-bs-green-dk);
}

/* Bea, leaning on the bottom-left corner of the window. */
.bas-bsh__bea:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	left: -104px;
	bottom: -46px;
	width: 118px;
	height: auto;
	max-width: none;
	pointer-events: none;
	filter: drop-shadow(0 10px 18px rgba(20, 30, 10, .18));
}

/* ── Viewport breakpoints ───────────────────────────────────────────────── */

/* Two columns become one. The window now has the full inner width, so it keeps
   its wide layout — only Bea has to come in off the edge. */
@media (max-width: 980px) {
	.bas-bsh__grid:not(#bas-shield):not(#bas-shield) { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__lede { max-width: 62ch; }
	.bas-bsh__bea:not(#bas-shield):not(#bas-shield) { left: -6px; bottom: -30px; width: 92px; }
}

@media (max-width: 640px) {
	.bas-bsh__loop:not(#bas-shield):not(#bas-shield) { right: -46px; top: -24px; }
	.bas-bsh__bea:not(#bas-shield):not(#bas-shield) { width: 72px; bottom: -22px; left: -4px; }
	.bas-bsh__actions:not(#bas-shield):not(#bas-shield) { gap: 12px; }
	.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__btn { flex: 1 1 auto; }
	.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__meta { gap: 6px 16px; font-size: 12.5px; }
	.bas-bsh__meta:not(#bas-shield):not(#bas-shield) li + li::before { left: -10px; }
}

@media (max-width: 640px) {
	.bas-bs-hero:not(#bas-shield):not(#bas-shield) .bas-bsh__facts { justify-content: flex-start; margin-left: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION 2 — YOUR LOOK
 * module BrandStudioLook · bas/brand-studio-look · prefix .bas-bsl
 * Root  : .bas-bs-look.bas-bsl               (shared tokens + own rules)
 * Inner : .bas-bsl__inner.bas-bs-look__inner  ← BOTH names; the shared
 *         max-width/gutter rule at the top of this file styles the
 *         `bas-bs-look__inner` half, everything below hangs off the
 *         `bas-bsl__inner` half. It is also the container-query container.
 * Source: "Brand Studio Sales Page.dc.html" lines 143–434 (keyframes 15–34).
 *
 * 🔴 THE THREE HOUSE STYLES ARE STACKED IN ONE GRID CELL and take turns on an
 *    18s loop. That is the section's whole argument — same four assets, three
 *    looks — and also its trap: switch the animation off and three opaque sets
 *    sit on top of each other. So the reduced-motion block at the BOTTOM of
 *    this section un-stacks them into normal flow. Do not delete it.
 *
 * 🔴 ONE SCALE FACTOR, `--bas-bsl-s`, DRIVES EVERYTHING. Each artwork is drawn
 *    at the mockup's own pixel sizes (400×300, 262×336, 340×340) and scaled by
 *    that factor; the card widths and the stage height are derived from it too,
 *    so the row never disagrees with the art inside it. The ladder below steps
 *    the factor down on a CONTAINER query of the inner column — not the
 *    viewport — because Amy can drop this into a narrow Divi column. Four
 *    across becomes two, then one. Browsers with no container queries keep the
 *    single-column default: narrower than intended, never broken.
 *    🔴 Every px inside an artboard is a MOCKUP px. Do not "make it responsive"
 *    by touching those numbers; change the factor.
 *
 * 🟠 The vendor palettes below (#7d8cf0 / #ef5f92 / #ffd34e sorbet, #24201a /
 *    #7a2028 / #f5efe0 stamped, #262420 / #b9873f / #6f7d6e farmhouse) are
 *    FAKE VENDORS' brands inside a picture, not BAS tokens. They must never
 *    become tokens — the point of the picture is that it is somebody else's
 *    palette, three times over.
 *
 * 🟠 The mockup sets the styles in Bodoni Moda/Outfit, Zilla Slab/Archivo
 *    Narrow and EB Garamond/Jost. The site loads Lato and Playfair Display
 *    only, so every display face here is Playfair and every text face is Lato,
 *    separated by weight, tracking and case. The font NAMES stay in the copy.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes, copied from the mockup's shared block and prefixed ───────── */

@keyframes bas-bsl-card {
	0%     { opacity: 0; transform: translateY(18px); }
	3%     { opacity: 1; transform: none; }
	31%    { opacity: 1; transform: none; }
	34.5%  { opacity: 0; transform: translateY(-10px); }
	100%   { opacity: 0; transform: translateY(18px); }
}
/* The pills highlight in step with the loop. Literal hex, not tokens: these are
   keyframe values and must match the mockup exactly. */
@keyframes bas-bsl-tab1 {
	0%, 32.9%    { background: #70ac43; border-color: #70ac43; color: #fffbef; }
	33.1%, 100%  { background: #fffbef; border-color: #ded8c6; color: #7d8073; }
}
@keyframes bas-bsl-tab2 {
	0%, 32.9%    { background: #fffbef; border-color: #ded8c6; color: #7d8073; }
	33.1%, 66.2% { background: #70ac43; border-color: #70ac43; color: #fffbef; }
	66.4%, 100%  { background: #fffbef; border-color: #ded8c6; color: #7d8073; }
}
@keyframes bas-bsl-tab3 {
	0%, 66.2%    { background: #fffbef; border-color: #ded8c6; color: #7d8073; }
	66.4%, 100%  { background: #70ac43; border-color: #70ac43; color: #fffbef; }
}

/* ── Section shell ──────────────────────────────────────────────────────── */

/* Low specificity on purpose: a Divi background setting should still beat it. */
.bas-bsl:not(#bas-shield):not(#bas-shield) {
	position: relative;
	padding: clamp(46px, 6vw, 78px) 0 clamp(52px, 7vw, 84px);
	background: var(--bas-bs-cream-2);
	border-top: 1px solid var(--bas-bs-rule);
	border-bottom: 1px solid var(--bas-bs-rule);
}

/* 🔴 The sample ladder measures THIS, not the viewport. */
.bas-bsl__inner:not(#bas-shield):not(#bas-shield) {
	container-type: inline-size;
	container-name: baslook;
}

/* ── Heading block ──────────────────────────────────────────────────────── */

.bas-bsl__head:not(#bas-shield):not(#bas-shield) { max-width: 720px; }

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__eyebrow {
	margin: 0;
	font: 900 12px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;              /* copy is sentence case in the PHP so
	                                           screen readers don't spell it out */
	color: var(--bas-bs-orange);
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__headline {
	margin: 16px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: var(--bas-fs-h1, clamp(32px, 4.4vw, 56px)); /* site kit token, 2.16.0 */    /* 46px flat overflows a 360px phone */
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--bas-bs-ink);
	text-wrap: balance;
}

.bas-bsl__headline:not(#bas-shield):not(#bas-shield) i {
	font-style: italic;
	color: var(--bas-bs-green-dk);
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__lede {
	margin: 16px 0 0;
	font: 400 17px/1.62 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
	text-wrap: pretty;
}

/* ── The line above the samples, plus the three style pills ─────────────── */

.bas-bsl__lead:not(#bas-shield):not(#bas-shield) {
	margin-top: clamp(28px, 3.6vw, 40px);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 44px);
}

.bas-bsl__leadcopy:not(#bas-shield):not(#bas-shield) {
	flex: 1 1 320px;
	max-width: 600px;
	min-width: 0;
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__kicker {
	margin: 0;
	font: 900 11px/1.4 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bas-bs-green-dk);
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__leadtext {
	margin: 12px 0 0;
	font: 400 15.5px/1.6 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
	text-wrap: pretty;
}

.bas-bsl__tabs:not(#bas-shield):not(#bas-shield) {
	display: flex;
	flex-wrap: wrap;                        /* three 11px pills still wrap on a phone */
	align-items: center;
	gap: 9px;
	flex: none;
}

/* Static state = "not the current style". The keyframes light one at a time;
   with motion off all three read as plain outlined labels, which is honest —
   each set names its own style in live text below.
   🔴 These are <button>s now, so the reset has to be explicit: a theme's
   button styles would otherwise walk right through this rule. */
.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__tab {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1.5px solid var(--bas-bs-rule-2);
	background: var(--bas-bs-panel);        /* white on cream-2, so an unlit pill still reads */
	color: var(--bas-bs-muted);
	font: 900 11px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__tab:focus-visible {
	outline: 2px solid var(--bas-bs-green-dk);
	outline-offset: 2px;
}

.bas-bsl__animtab:not(#bas-shield):not(#bas-shield)     { animation: bas-bsl-tab1 18s linear infinite both; }
.bas-bsl__animtab--2:not(#bas-shield):not(#bas-shield)  { animation-name: bas-bsl-tab2; }
.bas-bsl__animtab--3:not(#bas-shield):not(#bas-shield)  { animation-name: bas-bsl-tab3; }

/*
 * 🔴 MANUAL MODE. The pills auto-rotate until the first click; after that the
 * visitor is driving and the loop is over for good — `.bas-bsl--manual` on the
 * module root, set once by bas-brand-studio.js. Two things have to happen
 * together or the section goes blank: every animation stops, AND the chosen
 * set is forced back to opacity 1. The keyframes' 0% is `opacity: 0`, so
 * cancelling the animation without the second half hides all three.
 */
.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__animtab,
.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__animnote,
.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard {
	animation: none !important;
}

/* 🔴 display, NOT visibility. Under prefers-reduced-motion the three sets
   un-stack into normal block flow further down this file; a hidden-but-present
   set would leave two set-shaped holes in the page. display:none has no hole,
   and the .is-active rule outranks the reduced-motion `display: block` on
   specificity, so it wins wherever it lands in the file. */
.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__set          { display: none; }
.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__set.is-active { display: flex; }

.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__set.is-active .bas-bsl__animnote,
.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__set.is-active .bas-bsl__animcard {
	opacity: 1;
	transform: none;
}

.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__tab[aria-pressed="true"] {
	background: var(--bas-bs-green);
	border-color: var(--bas-bs-green);
	color: var(--bas-bs-cream);
}

.bas-bsl--manual:not(#bas-shield):not(#bas-shield) .bas-bsl__tab[aria-pressed="false"]:hover {
	border-color: var(--bas-bs-green-dk);
	color: var(--bas-bs-green-dk);
}

/* Before the first click the pills are still a picture of a tab bar — but a
   clickable one, so say so on hover without fighting the running keyframes. */
.bas-bs-look:not(#bas-shield):not(#bas-shield):not(.bas-bsl--manual) .bas-bsl__tab:hover {
	border-color: var(--bas-bs-green-dk);
}

/* ── The stack: three house styles sharing one grid cell ────────────────── */

.bas-bsl__stack:not(#bas-shield):not(#bas-shield) {
	margin-top: clamp(22px, 2.6vw, 30px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.bas-bsl__set:not(#bas-shield):not(#bas-shield) {
	grid-area: 1 / 1;                       /* 🔴 all three, on top of each other */
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__note {
	margin: 0;
	font: 400 13.5px/1.5 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-muted);
}

.bas-bsl__notename:not(#bas-shield):not(#bas-shield) {
	margin-right: 8px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bas-bs-green-dk);
}

.bas-bsl__notevendor:not(#bas-shield):not(#bas-shield) { color: var(--bas-bs-ink-soft); }

/* ── The four-up sample row, and the scale ladder ───────────────────────── */

.bas-bsl__row:not(#bas-shield):not(#bas-shield) {
	--bas-bsl-s: .62;                       /* phone default; the ladder raises it */
	display: grid;
	grid-template-columns: auto;
	justify-content: start;
	align-items: end;
	gap: calc(30px * var(--bas-bsl-s));
}

/* Thresholds are (row width at that factor) + a little slack. Row width is
   (400 + 262 + 340 + 340 + 3 gaps) × factor = 1432 × factor for four across,
   and 710 × factor for the widest of the two rows when it wraps to a 2×2. */
@container baslook (min-width: 440px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .74; }
}
@container baslook (min-width: 560px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .62; grid-template-columns: auto auto; }
}
@container baslook (min-width: 700px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .74; grid-template-columns: auto auto; }
}
@container baslook (min-width: 780px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .52; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 900px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .62; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1010px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .70; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1070px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .74; grid-template-columns: auto auto auto auto; }
}
/* 🔴 RUNGS ABOVE .74 EXIST BECAUSE THE COLUMN DOES NOW. The ladder used to
   stop at .74 because the inner column stopped at 1200px; a full-width row
   left the four samples huddled at 1060px with 400px of empty cream beside
   them. 1 is the mockup's own size and the top of the ladder — the artboards
   are drawn at those pixels and there is nothing above them to scale into. */
@container baslook (min-width: 1200px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .82; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1320px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: .90; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1460px) {
	.bas-bsl__row:not(#bas-shield):not(#bas-shield) { --bas-bsl-s: 1;   grid-template-columns: auto auto auto auto; }
}

.bas-bsl__card:not(#bas-shield):not(#bas-shield) {
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
}

.bas-bsl__card--sign:not(#bas-shield):not(#bas-shield)  { width: calc(400px * var(--bas-bsl-s)); }
.bas-bsl__card--price:not(#bas-shield):not(#bas-shield) { width: calc(262px * var(--bas-bsl-s)); }
.bas-bsl__card--menu:not(#bas-shield):not(#bas-shield),
.bas-bsl__card--post:not(#bas-shield):not(#bas-shield)  { width: calc(340px * var(--bas-bsl-s)); }

/* Tallest artboard is 340px, so the stage is 340 × factor and shorter boards
   sit on its floor — exactly the mockup's fixed 252px at factor .74. */
.bas-bsl__stage:not(#bas-shield):not(#bas-shield) {
	position: relative;
	height: calc(340px * var(--bas-bsl-s));
}

.bas-bs-look:not(#bas-shield):not(#bas-shield) .bas-bsl__cap {
	margin: 0;
	font: 400 11px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8a8578;
}

/* ── The artboards ──────────────────────────────────────────────────────── */

.bas-bsl__art:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scale(var(--bas-bsl-s));
	transform-origin: left bottom;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bas-bsl__art--sign:not(#bas-shield):not(#bas-shield)  { width: 400px; height: 300px; }
.bas-bsl__art--price:not(#bas-shield):not(#bas-shield) { width: 262px; height: 336px; }
.bas-bsl__art--menu:not(#bas-shield):not(#bas-shield),
.bas-bsl__art--post:not(#bas-shield):not(#bas-shield)  { width: 340px; height: 340px; }

/* Everything inside an artboard is a <span> so the picture stays one flat,
   semantics-free blob under its role="img". Give them block layout once. */
.bas-bsl__art:not(#bas-shield):not(#bas-shield) span { display: block; }
.bas-bsl__art:not(#bas-shield):not(#bas-shield) i    { font-style: italic; }

/* Photo panels. Nine slots, nine of Amy's own photographs, set inline because
   the stylesheet cannot know the plugin URL. Stamped and Farmhouse share the
   bakehouse's bread and preserves and are told apart by tone (the two filters
   further down), not by subject. Sorbet is a sweets studio and gets sweets. */
.bas-bsl__aphoto:not(#bas-shield):not(#bas-shield) {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Sorbet's panels. The pink is the colour under the photo while it loads, and
   the light touch of desaturation keeps a sweets shot inside the pastel
   palette instead of shouting over it. */
.bas-bsl__aphoto--tint:not(#bas-shield):not(#bas-shield) {
	background-color: #ffd4e1;
	filter: saturate(.92) brightness(1.03);
}

.bas-bsl__aphoto--full:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
}

.bas-bsl__aphoto--side:not(#bas-shield):not(#bas-shield) {
	width: 124px;
	height: auto;
	flex: none;
	align-self: stretch;
}

.bas-bsl__ascallop:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
	background: radial-gradient(circle at 11px 12px, #fffcfa 11px, transparent 11.5px) 0 0/22px 12px repeat-x;
}

.bas-bsl__ascallop--sm:not(#bas-shield):not(#bas-shield) {
	height: 11px;
	background: radial-gradient(circle at 10px 11px, #fffcfa 10px, transparent 10.5px) 0 0/20px 11px repeat-x;
}

.bas-bsl__ashade:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	inset: 0;
	/* Deepened when the placeholder produce shot was replaced by real bakery
	   photography: the stand-in was dark, these loaves are not, and the white
	   title sits about 80% down. Measured on the rendered post at 1440px. */
	background: linear-gradient(180deg, rgba(38, 36, 32, 0) 32%, rgba(38, 36, 32, .62) 68%, rgba(38, 36, 32, .9) 100%);
}

.bas-bsl__acorner:not(#bas-shield):not(#bas-shield) { position: absolute; width: 16px; height: 16px; }

/* ── SORBET · Peony & Pearl (fake vendor palette) ───────────────────────── */

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) {
	--a-bg:     #fffcfa;
	--a-ink:    #35203a;
	--a-accent: #ef5f92;
	--a-alt:    #7d8cf0;
	--a-pop:    #ffd34e;
	background: var(--a-bg);
	border-radius: 26px;
	box-shadow: 0 14px 34px rgba(53, 32, 58, .14);
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--sign {
	background: var(--a-alt);
	align-items: center;
	justify-content: center;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__aplate {
	width: 300px;
	height: 216px;
	padding: 22px;
	background: var(--a-bg);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__amono {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: var(--a-accent);
	color: var(--a-bg);
	font: 500 15px/1 'Playfair Display', Georgia, serif;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__aname {
	font: 500 42px/.96 'Playfair Display', Georgia, serif;
	color: var(--a-ink);
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__ameta {
	font: 700 9px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--a-alt);
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__abar {
	width: 64px;
	height: 5px;
	border-radius: 999px;
	background: var(--a-pop);
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__ahead { position: relative; flex: none; overflow: hidden; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--price .bas-bsl__ahead { height: 94px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu  .bas-bsl__ahead { height: 126px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--post  .bas-bsl__ahead { flex: 1; min-height: 0; }

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__apill {
	position: absolute;
	left: 18px;
	top: 16px;
	display: inline-flex;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--a-accent);
	color: var(--a-bg);
	font: 700 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__apill { left: 22px; top: 18px; padding: 7px 14px; letter-spacing: .18em; }

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__apill--light {
	left: 22px;
	top: 20px;
	background: rgba(255, 252, 250, .94);
	color: var(--a-ink);
	letter-spacing: .2em;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__adisc {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__adisc--mono {
	right: 16px;
	top: 14px;
	width: 34px;
	height: 34px;
	background: var(--a-bg);
	color: var(--a-ink);
	font: 500 11px/1 'Playfair Display', Georgia, serif;
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__adisc--price {
	right: 22px;
	bottom: 26px;
	width: 88px;
	height: 88px;
	background: var(--a-accent);
	color: var(--a-bg);
	font: 500 30px/1 'Playfair Display', Georgia, serif;
	box-shadow: 0 10px 22px rgba(53, 32, 58, .24);
}

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__abody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--price .bas-bsl__abody { padding: 14px 24px 18px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu  .bas-bsl__abody { padding: 14px 26px 0; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--post  .bas-bsl__abody { flex: none; padding: 20px 26px 24px; }

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--post .bas-bsl__aname { font-size: 36px; line-height: 1.02; max-width: 200px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__ameta--alt { margin-top: 12px; letter-spacing: .18em; }

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__atitle {
	font: 500 26px/1 'Playfair Display', Georgia, serif;
	color: var(--a-ink);
}
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__atitle { font-size: 30px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__abody .bas-bsl__abar { width: 48px; margin: 12px 0; }

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__alist { display: flex; flex-direction: column; gap: 9px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__alist { gap: 8px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__arow { display: flex; align-items: center; gap: 8px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__alabel { font: 400 13px/1.1 'Playfair Display', Georgia, serif; color: var(--a-ink); }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__alabel { font-size: 14px; }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__aleader { flex: 1; height: 1px; background: rgba(53, 32, 58, .14); }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__aprice { font: 500 12px/1 'Playfair Display', Georgia, serif; color: var(--a-accent); }
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__aprice { font-size: 13px; }

.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__afoot {
	margin-top: auto;
	font: 700 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(53, 32, 58, .5);
}

/* Full-bleed inside the body's 26px padding. */
.bas-bsl__art--sorbet:not(#bas-shield):not(#bas-shield) .bas-bsl__abanner {
	margin: auto -26px 0;
	padding: 13px 26px;
	background: var(--a-alt);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font: 700 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 252, 250, .95);
}

/* ── STAMPED · Wren & Rye (fake vendor palette) ─────────────────────────── */

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) {
	--a-bg:     #f5efe0;
	--a-ink:    #24201a;
	--a-accent: #7a2028;
	background: var(--a-bg);
	box-shadow: 0 10px 26px rgba(36, 32, 26, .28);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__aphoto--shot { filter: sepia(.42) saturate(.78) contrast(1.02); }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--sign { padding: 14px; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__aframe {
	flex: 1;
	min-height: 0;
	position: relative;
	border: 2px solid var(--a-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acorner--tl { top: 10px; left: 10px;  border-left: 3px solid var(--a-accent); border-top: 3px solid var(--a-accent); }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acorner--tr { top: 10px; right: 10px; border-right: 3px solid var(--a-accent); border-top: 3px solid var(--a-accent); }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acorner--bl { bottom: 10px; left: 10px;  border-left: 3px solid var(--a-accent); border-bottom: 3px solid var(--a-accent); }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acorner--br { bottom: 10px; right: 10px; border-right: 3px solid var(--a-accent); border-bottom: 3px solid var(--a-accent); }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acrest {
	width: 216px;
	height: 216px;
	position: relative;
	border-radius: 50%;
	border: 3px solid var(--a-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
}

.bas-bsl__acrestring:not(#bas-shield):not(#bas-shield) { position: absolute; inset: 9px;  border-radius: 50%; border: 1px solid rgba(36, 32, 26, .5); }
.bas-bsl__acrestdots:not(#bas-shield):not(#bas-shield) { position: absolute; inset: 15px; border-radius: 50%; border: 6px dotted rgba(122, 32, 40, .22); }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__ameta {
	font: 700 8px/1.5 'Lato', system-ui, sans-serif;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--a-accent);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__ameta--soft { letter-spacing: .2em; color: rgba(36, 32, 26, .7); }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__aname {
	font: 700 34px/.92 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	color: var(--a-ink);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acrest .bas-bsl__abar { width: 74px; height: 2px; background: var(--a-ink); }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__atitle {
	font: 700 22px/1 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	color: var(--a-ink);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--price .bas-bsl__ahead { flex: none; padding: 18px 20px 0; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__aheadrow  { display: flex; align-items: flex-start; gap: 12px; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__aheadtext { flex: 1; min-width: 0; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__aheadtext .bas-bsl__ameta { margin-top: 6px; letter-spacing: .22em; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__astamp {
	width: 58px;
	height: 58px;
	flex: none;
	border: 2px solid var(--a-ink);
	padding: 3px;
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__arule--thick { height: 4px; background: var(--a-ink); margin-top: 12px; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__arule--thin  { height: 1px; background: var(--a-ink); margin-top: 2px; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--price .bas-bsl__abody { flex: 1; min-height: 0; padding: 12px 20px 0; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__alist { display: flex; flex-direction: column; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__arow--chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
	border-bottom: 1px solid rgba(36, 32, 26, .18);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__alabel { flex: 1; font: 500 12.5px/1 'Playfair Display', Georgia, serif; color: var(--a-ink); }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__achip {
	flex: none;
	padding: 4px 6px;
	background: var(--a-ink);
	color: var(--a-bg);
	font: 700 10px/1 'Lato', system-ui, sans-serif;
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__astrip { height: 76px; flex: none; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__afootbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 20px;
	background: var(--a-ink);
	font: 700 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(245, 239, 224, .85);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__ahead {
	flex: none;
	display: flex;
	align-items: stretch;
	border-bottom: 4px solid var(--a-ink);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__aheadtext {
	flex: 1;
	min-width: 0;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__atitle { font-size: 32px; line-height: .94; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__aheadtext .bas-bsl__ameta { margin-top: 10px; letter-spacing: .22em; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__abody { flex: 1; min-height: 0; padding: 16px 20px 0; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__arow--chip { padding: 5px 0; border-bottom-color: rgba(36, 32, 26, .2); }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__alabel { font-size: 15px; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__achip  { font-size: 11px; padding: 4px 7px; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__abanner {
	flex: none;
	padding: 12px 20px;
	background: var(--a-accent);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font: 700 9px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--a-bg);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--post { background: #e0cda8; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__atag {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 6px 10px;
	background: var(--a-ink);
	font: 700 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--a-bg);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acard {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	padding: 16px 18px;
	background: var(--a-bg);
	border: 2px solid var(--a-ink);
	display: flex;
	align-items: center;
	gap: 16px;
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__acardtext { flex: 1; min-width: 0; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--post .bas-bsl__aname { font-size: 26px; line-height: 1; }
.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield).bas-bsl__art--post .bas-bsl__ameta--soft { margin-top: 10px; }

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__adisc--price {
	position: relative;
	width: 74px;
	height: 74px;
	flex: none;
	border-radius: 50%;
	background: var(--a-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 26px/1 'Playfair Display', Georgia, serif;
	color: var(--a-bg);
}

.bas-bsl__art--stamped:not(#bas-shield):not(#bas-shield) .bas-bsl__adisc--price::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	border: 1px solid rgba(245, 239, 224, .5);
}

/* ── FARMHOUSE · Wren & Rye (fake vendor palette) ───────────────────────── */

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) {
	--a-bg:     #fbf7ef;
	--a-ink:    #262420;
	--a-accent: #b9873f;
	--a-alt:    #6f7d6e;
	--a-deep:   #2b332c;
	background: var(--a-bg);
	box-shadow: 0 10px 30px rgba(38, 36, 32, .18);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aphoto--shot { filter: sepia(.2) saturate(.9); }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--sign { padding: 12px; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aframe {
	flex: 1;
	min-height: 0;
	padding: 26px;
	border: 1px solid rgba(185, 135, 63, .5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__amono {
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--a-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 14px/1 'Playfair Display', Georgia, serif;
	color: var(--a-ink);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aname {
	font: 400 56px/.95 'Playfair Display', Georgia, serif;
	color: var(--a-ink);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__ameta {
	font: 400 11px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--a-alt);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__arulerow { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__arule { flex: 1; height: 1px; background: rgba(38, 36, 32, .16); }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__arulelabel {
	flex: none;
	font: 300 9px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(38, 36, 32, .5);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__ahead { flex: none; overflow: hidden; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--price .bas-bsl__ahead { height: 104px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu  .bas-bsl__ahead { height: 118px; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__abody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--price .bas-bsl__abody { padding: 20px 26px 16px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu  .bas-bsl__abody { padding: 20px 26px; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aheadrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__atitle { font: 400 24px/1 'Playfair Display', Georgia, serif; color: var(--a-ink); }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--menu .bas-bsl__atitle { font-size: 26px; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aheadrow .bas-bsl__ameta {
	font: 300 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	color: var(--a-accent);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__abody > .bas-bsl__arule { flex: none; height: 1px; margin: 12px 0 10px; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__alist { display: flex; flex-direction: column; gap: 7px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__arow { display: flex; align-items: baseline; gap: 6px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__alabel { font: 400 13px/1 'Playfair Display', Georgia, serif; color: var(--a-ink); }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aleader { flex: 1; height: 0; border-bottom: 1px dotted rgba(38, 36, 32, .3); }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aprice { font: 400 12px/1 'Playfair Display', Georgia, serif; color: var(--a-ink); }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__afoot {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid rgba(38, 36, 32, .14);
	font: 300 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(38, 36, 32, .5);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__abanner {
	margin: auto -26px -20px;
	padding: 12px 26px;
	background: var(--a-deep);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font: 300 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(243, 238, 230, .8);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--post { background: #d9d1c1; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__atag {
	position: absolute;
	top: 26px;
	left: 26px;
	font: 300 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #f3eee6;
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__acard { position: absolute; left: 26px; right: 26px; bottom: 26px; }
.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield).bas-bsl__art--post .bas-bsl__aname { font-size: 36px; line-height: 1.05; color: #f3eee6; }

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__arulerow--split {
	justify-content: space-between;
	align-items: baseline;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(243, 238, 230, .35);
	gap: 10px;
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__arulerow--split .bas-bsl__ameta {
	font: 300 9px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .22em;
	color: rgba(243, 238, 230, .8);
}

.bas-bsl__art--farmhouse:not(#bas-shield):not(#bas-shield) .bas-bsl__aprice--big { font: 400 24px/1 'Playfair Display', Georgia, serif; color: var(--a-accent); }

/* ── The loop: note, then the four cards, staggered; sets 6s apart ──────── */

.bas-bsl__animnote:not(#bas-shield):not(#bas-shield),
.bas-bsl__animcard:not(#bas-shield):not(#bas-shield) { animation: bas-bsl-card 18s cubic-bezier(.22, 1, .36, 1) infinite both; }

.bas-bsl__set--1:not(#bas-shield):not(#bas-shield) .bas-bsl__animnote               { animation-delay: 0s; }
.bas-bsl__set--1:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(1)  { animation-delay: .15s; }
.bas-bsl__set--1:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(2)  { animation-delay: .30s; }
.bas-bsl__set--1:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(3)  { animation-delay: .45s; }
.bas-bsl__set--1:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(4)  { animation-delay: .60s; }

.bas-bsl__set--2:not(#bas-shield):not(#bas-shield) .bas-bsl__animnote               { animation-delay: 6s; }
.bas-bsl__set--2:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(1)  { animation-delay: 6.15s; }
.bas-bsl__set--2:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(2)  { animation-delay: 6.30s; }
.bas-bsl__set--2:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(3)  { animation-delay: 6.45s; }
.bas-bsl__set--2:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(4)  { animation-delay: 6.60s; }

.bas-bsl__set--3:not(#bas-shield):not(#bas-shield) .bas-bsl__animnote               { animation-delay: 12s; }
.bas-bsl__set--3:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(1)  { animation-delay: 12.15s; }
.bas-bsl__set--3:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(2)  { animation-delay: 12.30s; }
.bas-bsl__set--3:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(3)  { animation-delay: 12.45s; }
.bas-bsl__set--3:not(#bas-shield):not(#bas-shield) .bas-bsl__animcard:nth-child(4)  { animation-delay: 12.60s; }

/*
 * 🔴 THIS SECTION NEEDS ITS OWN REDUCED-MOTION RULE, on top of the shared one
 * at the top of the file. The shared rule pins every `__anim` element to
 * opacity 1 — correct everywhere else, fatal here, because all three sets live
 * in ONE grid cell and would print on top of each other. So un-stack them: a
 * vendor who asked for less motion gets all three house styles at once, down
 * the page, which is arguably the better way to compare them anyway.
 */
@media (prefers-reduced-motion: reduce) {
	.bas-bsl__stack:not(#bas-shield):not(#bas-shield) { display: block; }
	.bas-bsl__set:not(#bas-shield):not(#bas-shield)   { display: block; }
	.bas-bsl__set:not(#bas-shield):not(#bas-shield) + .bas-bsl__set { margin-top: clamp(30px, 4vw, 48px); }
	.bas-bsl__set:not(#bas-shield):not(#bas-shield) .bas-bsl__row   { margin-top: 18px; }
}

/* ═══ END SECTION 2 — YOUR LOOK ═════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION 3 — YOUR PRODUCTS
 * module BrandStudioProducts · bas/brand-studio-products · prefix .bas-bsp
 * Root  : .bas-bs-prod.bas-bsp                (shared tokens + own rules)
 * Inner : .bas-bsp__inner.bas-bs-prod__inner   ← BOTH names; the shared
 *         max-width/gutter rule at the top of this file styles the
 *         `bas-bs-prod__inner` half, everything below hangs off the
 *         `bas-bsp__inner` half. It is also a container-query container.
 * Source: "Brand Studio Sales Page.dc.html" lines 436–559 (keyframes 15–34).
 *
 * 🔴 THIS IS THE ONE DARK SECTION OF THE FOUR. The shared token block at the
 *    top of this file sets `color: var(--bas-bs-ink)` on `.bas-bs-prod`; the
 *    `.bas-bsp` rule below re-sets it to cream at the SAME specificity and
 *    wins only on source order. Never move this block above that one, and
 *    never raise the specificity of the shared rule.
 *
 * 🔴 ONE SCALE FACTOR, `--bas-bsp-s`, DRIVES THE THREE ARTBOARDS. Each is
 *    drawn at the mockup's own pixel sizes (262×336, 250×180, 340×340) and
 *    scaled by its own mockup ratio times that factor; the card widths and
 *    the stage height are derived from it too, so the row never disagrees
 *    with the art inside it. Every px inside an artboard is a MOCKUP px — do
 *    not "make it responsive" by touching those numbers; change the factor.
 *    At the mockup's 1440px canvas the three cards plus gaps measure exactly
 *    568px, which is exactly the right column. That coincidence does not
 *    survive a phone, so the row WRAPS: three across becomes two, then one.
 *
 * 🔴 THE STAGE / LIFT / ART SPLIT IS LOAD-BEARING. `__stage` reserves height,
 *    `__lift` is the only animated element, `__art` owns the scale transform.
 *    The shared reduced-motion rule forces `transform: none !important` on
 *    every `__anim` element — if the scale lived on the animated element it
 *    would be thrown away and the artboards would print at full size.
 *
 * 🟠 #ece2d1 / #2b2320 / #9b2340 / #c0a87e / #6d6259 / #cdbfa6 are the FAKE
 *    VENDOR's Stamped palette inside a picture, not BAS tokens. They must not
 *    become tokens — the point of the picture is somebody else's brand.
 *
 * 🟠 The mockup sets the artboards in Zilla Slab / Archivo Narrow. The site
 *    loads Lato and Playfair Display only, so every Zilla Slab here is
 *    Playfair Display and every Archivo Narrow is Lato, separated by weight,
 *    tracking and case. No font link is added.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes, copied from the mockup's shared block and prefixed ───────── */

@keyframes bas-bsp-tick {
	0%          { opacity: 0; transform: scale(.3); }
	2.4%        { opacity: 1; transform: scale(1.14); }
	4%          { transform: scale(1); }
	88%         { opacity: 1; transform: scale(1); }
	93%, 100%   { opacity: 0; transform: scale(.3); }
}
@keyframes bas-bsp-build {
	0%          { opacity: 0; transform: translateY(12px); }
	3.5%        { opacity: 1; transform: none; }
	88%         { opacity: 1; transform: none; }
	93%, 100%   { opacity: 0; transform: translateY(12px); }
}
@keyframes bas-bsp-slide {
	0%          { opacity: 0; transform: translateX(-16px); }
	3.5%        { opacity: 1; transform: none; }
	88%         { opacity: 1; transform: none; }
	93%, 100%   { opacity: 0; transform: translateX(-16px); }
}
@keyframes bas-bsp-pop {
	0%          { opacity: 0; transform: scale(.55); }
	3%          { opacity: 1; transform: scale(1.1); }
	4.6%        { transform: scale(1); }
	88%         { opacity: 1; transform: scale(1); }
	93%, 100%   { opacity: 0; transform: scale(.55); }
}

/* ── Section shell ──────────────────────────────────────────────────────── */

/* Low specificity on purpose: a Divi background setting should still beat it. */
.bas-bsp:not(#bas-shield):not(#bas-shield) {
	position: relative;
	overflow: hidden;                       /* the corner loop bleeds off two edges */
	padding: clamp(48px, 6.5vw, 80px) 0 clamp(52px, 7vw, 86px);
	background: var(--bas-bs-ink);
	color: var(--bas-bs-cream);             /* 🔴 see the dark-ground note above */
}

/* The mockup hangs this off the SECTION edge, not the 1200px column edge, so
   it stays a sibling of the inner column. max-width in vw keeps it from
   swallowing a phone. */
.bas-bsp__loop:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	left: -90px;
	bottom: -70px;
	width: 420px;
	max-width: 46vw;
	height: auto;
	opacity: .22;
	pointer-events: none;
	user-select: none;
}

/* 🔴 The two-column grid measures THIS, not the viewport — Amy can drop the
   module into a narrow Divi column and the viewport would lie about it. */
.bas-bsp__inner:not(#bas-shield):not(#bas-shield) {
	container-type: inline-size;
	container-name: basprod;
	z-index: 1;                             /* above the loop */
}

.bas-bsp__grid:not(#bas-shield):not(#bas-shield) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(34px, 5vw, 64px);
	align-items: center;
}

/* 880px of inner column ≈ a 980px viewport at this gutter — the brief's first
   collapse point, measured where it actually matters. */
@container basprod (min-width: 880px) {
	.bas-bsp__grid:not(#bas-shield):not(#bas-shield) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Left column: the pitch ─────────────────────────────────────────────── */

.bas-bsp__copy:not(#bas-shield):not(#bas-shield) { min-width: 0; }

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__eyebrow {
	margin: 0;
	font: 900 12px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;              /* copy is sentence case in the PHP so
	                                           screen readers don't spell it out */
	color: var(--bas-bs-yellow);
}

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__headline {
	margin: 16px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: var(--bas-fs-h1, clamp(32px, 4.4vw, 56px)); /* site kit token, 2.16.0 */    /* 44px flat overflows a 360px phone */
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--bas-bs-cream);
	text-wrap: balance;
}

.bas-bsp__headline:not(#bas-shield):not(#bas-shield) i {
	font-style: italic;
	color: var(--bas-bs-lime);
}

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__lede {
	margin: 18px 0 0;
	max-width: 470px;
	font: 400 17px/1.62 'Lato', system-ui, sans-serif;
	color: rgba(255, 251, 239, .78);
	text-wrap: pretty;
}

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__points {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 520px;
}

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__point {
	margin: 0;
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.bas-bsp__point:not(#bas-shield):not(#bas-shield)::before { content: none; }  /* some themes bullet every li */

.bas-bsp__dot:not(#bas-shield):not(#bas-shield) {
	width: 7px;
	height: 7px;
	margin-top: 8px;
	flex: none;
	border-radius: 999px;
	background: var(--bas-bs-lime);
}

.bas-bsp__pointtext:not(#bas-shield):not(#bas-shield) {
	font: 400 15.5px/1.6 'Lato', system-ui, sans-serif;
	color: rgba(255, 251, 239, .86);
	text-wrap: pretty;
}

.bas-bsp__pointtext:not(#bas-shield):not(#bas-shield) b {
	font-weight: 700;
	color: var(--bas-bs-cream);
}

/* ── Right column ───────────────────────────────────────────────────────── */

/* 🔴 The artboard row measures THIS — the column it actually lives in — not
   the inner column and not the viewport. Nested container, own name. */
.bas-bsp__panelcol:not(#bas-shield):not(#bas-shield) {
	container-type: inline-size;
	container-name: basprodcol;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Everything inside the two pictures is a <span> so they stay flat,
   semantics-free blobs under their role="img". Give them block layout once,
   then re-flex the handful that need it — at TWO classes, because this rule
   is (0,1,1) and would otherwise beat a single-class override. */
.bas-bsp__panel:not(#bas-shield):not(#bas-shield) span,
.bas-bsp__art:not(#bas-shield):not(#bas-shield) span { display: block; }

.bas-bsp__panel:not(#bas-shield):not(#bas-shield) .bas-bsp__panelhead,
.bas-bsp__panel:not(#bas-shield):not(#bas-shield) .bas-bsp__prow,
.bas-bsp__panel:not(#bas-shield):not(#bas-shield) .bas-bsp__boxtick,
.bas-bsp__art:not(#bas-shield):not(#bas-shield) .bas-bsp__ahead,
.bas-bsp__art:not(#bas-shield):not(#bas-shield) .bas-bsp__abody,
.bas-bsp__art:not(#bas-shield):not(#bas-shield) .bas-bsp__aitemrow,
.bas-bsp__art:not(#bas-shield):not(#bas-shield) .bas-bsp__aplate,
.bas-bsp__art:not(#bas-shield):not(#bas-shield) .bas-bsp__abadge { display: flex; }

/* ── The shop list that ticks itself ────────────────────────────────────── */

.bas-bsp__panel:not(#bas-shield):not(#bas-shield) {
	background: #3a3a3a;
	border: 1px solid var(--bas-bs-ink-soft);
	border-radius: 14px;
	padding: 20px 22px;
	min-width: 0;
}

.bas-bsp__panelhead:not(#bas-shield):not(#bas-shield) {
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bas-bsp__panelttl:not(#bas-shield):not(#bas-shield) {
	font: 700 13px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 251, 239, .6);
}

.bas-bsp__panelcount:not(#bas-shield):not(#bas-shield) {
	flex: none;
	font: 400 12px/1.3 'Lato', system-ui, sans-serif;
	color: rgba(255, 251, 239, .45);
}

.bas-bsp__rows:not(#bas-shield):not(#bas-shield) { margin-top: 14px; }

.bas-bsp__prow:not(#bas-shield):not(#bas-shield) {
	align-items: center;
	gap: 11px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 251, 239, .09);
}

.bas-bsp__prow:not(#bas-shield):not(#bas-shield):last-child { border-bottom: 0; }
.bas-bsp__prow--off:not(#bas-shield):not(#bas-shield)       { opacity: .5; }

.bas-bsp__box:not(#bas-shield):not(#bas-shield) {
	position: relative;
	width: 14px;
	height: 14px;
	flex: none;
}

.bas-bsp__boxout:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	inset: 0;
	border-radius: 4px;
	border: 1.5px solid rgba(255, 251, 239, .4);
}

.bas-bsp__boxtick:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: var(--bas-bs-green);
	color: var(--bas-bs-cream);
	font: 700 10px/1 'Lato', system-ui, sans-serif;
}

.bas-bsp__pname:not(#bas-shield):not(#bas-shield) {
	flex: 1;
	min-width: 0;
	font: 400 14px/1.35 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-cream);
}

.bas-bsp__punit:not(#bas-shield):not(#bas-shield) {
	flex: none;
	font: 400 12px/1.35 'Lato', system-ui, sans-serif;
	color: rgba(255, 251, 239, .5);
}

.bas-bsp__pprice:not(#bas-shield):not(#bas-shield) {
	width: 52px;
	flex: none;
	text-align: right;
	font: 700 14px/1.35 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-lime);
}

/* Narrow column: the unit is the least load-bearing of the four cells, and
   "Brown Butter Shortbread" wrapping to three lines is worse than losing it.
   Two classes so it beats the blanket span rule above. */
@container basprodcol (max-width: 320px) {
	.bas-bsp__panel:not(#bas-shield):not(#bas-shield) { padding: 16px 15px; }
	.bas-bsp__panel:not(#bas-shield):not(#bas-shield) .bas-bsp__punit { display: none; }
	.bas-bsp__panel:not(#bas-shield):not(#bas-shield) .bas-bsp__pname { font-size: 13px; }
}

/* ── The hinge ──────────────────────────────────────────────────────────── */

.bas-bsp__becomes:not(#bas-shield):not(#bas-shield) {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 2px;
}

.bas-bsp__brule:not(#bas-shield):not(#bas-shield) {
	flex: 1;
	height: 1px;
	background: rgba(255, 251, 239, .18);
}

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__bword {
	margin: 0;
	flex: none;
	font: 900 11px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bas-bs-yellow);
}

/* ── The three artboards, their stages and the scale ladder ─────────────── */

.bas-bsp__row:not(#bas-shield):not(#bas-shield) {
	--bas-bsp-s: 1;                         /* 1 = the mockup, exactly */
	display: flex;
	flex-wrap: wrap;                        /* 🔴 three across → two → one */
	align-items: flex-start;
	gap: calc(14px * var(--bas-bsp-s));
}

/* Below ~200px of column even one card is cramped, so step the whole row down
   rather than let an artboard clip. Nothing above that needs a step: the cards
   simply wrap. */
@container basprodcol (max-width: 200px) {
	.bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: .84; }
}

.bas-bsp__card:not(#bas-shield):not(#bas-shield) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.bas-bsp__card--list:not(#bas-shield):not(#bas-shield) { width: calc(168px * var(--bas-bsp-s)); }
.bas-bsp__card--tent:not(#bas-shield):not(#bas-shield),
.bas-bsp__card--post:not(#bas-shield):not(#bas-shield) { width: calc(186px * var(--bas-bsp-s)); }

/* 218px is the mockup's fixed stage; the tallest board (262×336 at .64) is
   215px, so the shorter two sit on its floor. */
.bas-bsp__stage:not(#bas-shield):not(#bas-shield) {
	position: relative;
	height: calc(218px * var(--bas-bsp-s));
}

.bas-bsp__lift:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	left: 0;
	bottom: 0;
}

.bas-bsp__art:not(#bas-shield):not(#bas-shield) {
	transform-origin: left bottom;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.bas-bsp__art--list:not(#bas-shield):not(#bas-shield) {
	width: 262px;
	height: 336px;
	background: #ece2d1;
	transform: scale(calc(.64 * var(--bas-bsp-s)));
}

.bas-bsp__art--tent:not(#bas-shield):not(#bas-shield) {
	width: 250px;
	height: 180px;
	background: #ece2d1;
	transform: scale(calc(.745 * var(--bas-bsp-s)));
}

.bas-bsp__art--post:not(#bas-shield):not(#bas-shield) {
	position: relative;
	width: 340px;
	height: 340px;
	background: #cdbfa6;
	transform: scale(calc(.547 * var(--bas-bsp-s)));
}

.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__cap {
	margin: 0;
	font: 400 11px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 251, 239, .5);
}

/* ── Artboard internals (fake vendor: Honey & Rye, Stamped) ─────────────── */

.bas-bsp__ahead:not(#bas-shield):not(#bas-shield) {
	flex: none;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 12px 18px;
	background: #2b2320;
}

.bas-bsp__attl:not(#bas-shield):not(#bas-shield) {
	font: 600 19px/1 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	color: #ece2d1;
}

.bas-bsp__adate:not(#bas-shield):not(#bas-shield) {
	flex: none;
	font: 400 8px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #c0a87e;
}

.bas-bsp__abody:not(#bas-shield):not(#bas-shield) {
	flex: 1;
	min-height: 0;
	flex-direction: column;
	gap: 6px;
	padding: 12px 18px 11px;
}

.bas-bsp__aitemrow:not(#bas-shield):not(#bas-shield) {
	align-items: center;
	gap: 11px;
}

.bas-bsp__athumb:not(#bas-shield):not(#bas-shield) {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	border: 2px solid #2b2320;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The four thumbs are the four products the list names, each its own photo, so
   the disguise filters that used to keep four identical circles from reading
   as a rendering bug are gone. The slot classes stay — they are what the
   render callback targets, and they are where a per-item tweak would go. */

.bas-bsp__aitemtext:not(#bas-shield):not(#bas-shield) {
	flex: 1;
	min-width: 0;
}

.bas-bsp__aname:not(#bas-shield):not(#bas-shield) {
	font: 600 13px/1 'Playfair Display', Georgia, serif;
	color: #2b2320;
}

.bas-bsp__ameta:not(#bas-shield):not(#bas-shield) {
	margin-top: 4px;
	font: 400 7px/1.2 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(43, 35, 32, .6);
}

.bas-bsp__achip:not(#bas-shield):not(#bas-shield) {
	flex: none;
	padding: 4px 6px;
	background: #9b2340;
	color: #fff;
	font: 700 10px/1 'Lato', system-ui, sans-serif;
}

.bas-bsp__arule:not(#bas-shield):not(#bas-shield) {
	height: 1px;
	margin-top: 6px;
	background: rgba(43, 35, 32, .22);
}

.bas-bsp__aspacer:not(#bas-shield):not(#bas-shield) { flex: 1; }

.bas-bsp__afoot:not(#bas-shield):not(#bas-shield) {
	padding-top: 8px;
	border-top: 2px solid #2b2320;
	font: 400 8px/1.2 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(43, 35, 32, .6);
}

/* Tent card */

.bas-bsp__aband:not(#bas-shield):not(#bas-shield) {
	height: 78px;
	flex: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: brightness(1.02);
}

.bas-bsp__abody--tent:not(#bas-shield):not(#bas-shield) {
	gap: 0;
	padding: 12px 16px;
}

.bas-bsp__aname--tent:not(#bas-shield):not(#bas-shield) { font-size: 19px; line-height: 1.04; }

.bas-bsp__ameta--tent:not(#bas-shield):not(#bas-shield) {
	margin-top: 7px;
	font-size: 8.5px;
	letter-spacing: .14em;
	color: #6d6259;
}

.bas-bsp__aprice:not(#bas-shield):not(#bas-shield) {
	align-self: flex-start;
	padding: 4px 11px;
	background: #9b2340;
	color: #fff;
	font: 600 16px/1.2 'Playfair Display', Georgia, serif;
}

/* Square product post */

.bas-bsp__aphoto:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.bas-bsp__atag:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 6px 12px;
	background: #2b2320;
	font: 600 9px/1 'Playfair Display', Georgia, serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #ece2d1;
}

.bas-bsp__aplate:not(#bas-shield):not(#bas-shield) {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	padding: 18px 18px 16px;
	background: rgba(236, 226, 209, .95);
	border: 1px solid rgba(43, 35, 32, .18);
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
}

.bas-bsp__aplatetext:not(#bas-shield):not(#bas-shield) { min-width: 0; }

.bas-bsp__aname--big:not(#bas-shield):not(#bas-shield) { font-size: 30px; line-height: 1.02; }

.bas-bsp__ameta--big:not(#bas-shield):not(#bas-shield) {
	margin-top: 10px;
	font-size: 9.5px;
	letter-spacing: .14em;
	color: #6d6259;
}

.bas-bsp__abadge:not(#bas-shield):not(#bas-shield) {
	width: 76px;
	height: 76px;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #9b2340;
	color: #fff;
	font: 600 20px/1 'Playfair Display', Georgia, serif;
}

/* ── The loop: ticks, then BECOMES, then the three boards, staggered ─────── */

.bas-bsp__animtick:not(#bas-shield):not(#bas-shield)  { animation: bas-bsp-tick  14s cubic-bezier(.22, 1, .36, 1) infinite both; }
.bas-bsp__animbuild:not(#bas-shield):not(#bas-shield) { animation: bas-bsp-build 14s cubic-bezier(.22, 1, .36, 1) infinite both; }
.bas-bsp__animslide:not(#bas-shield):not(#bas-shield) { animation: bas-bsp-slide 14s cubic-bezier(.22, 1, .36, 1) infinite both; }
.bas-bsp__animpop:not(#bas-shield):not(#bas-shield)   { animation: bas-bsp-pop   14s cubic-bezier(.22, 1, .36, 1) infinite both; }

.bas-bsp__animtick--1:not(#bas-shield):not(#bas-shield) { animation-delay: .5s; }
.bas-bsp__animtick--2:not(#bas-shield):not(#bas-shield) { animation-delay: 1s; }
.bas-bsp__animtick--3:not(#bas-shield):not(#bas-shield) { animation-delay: 1.5s; }
.bas-bsp__animtick--4:not(#bas-shield):not(#bas-shield) { animation-delay: 2s; }

.bas-bsp__animbuild--becomes:not(#bas-shield):not(#bas-shield) { animation-delay: 2.6s; }
.bas-bsp__animbuild--list:not(#bas-shield):not(#bas-shield)    { animation-delay: 2.9s; }
.bas-bsp__animbuild--tent:not(#bas-shield):not(#bas-shield)    { animation-delay: 3.8s; }
.bas-bsp__animbuild--post:not(#bas-shield):not(#bas-shield)    { animation-delay: 4.6s; }
.bas-bsp__animbuild--plate:not(#bas-shield):not(#bas-shield)   { animation-delay: 4.7s; }
.bas-bsp__animbuild--tag:not(#bas-shield):not(#bas-shield)     { animation-delay: 5.1s; }

.bas-bsp__animslide--1:not(#bas-shield):not(#bas-shield) { animation-delay: 3.1s; }
.bas-bsp__animslide--2:not(#bas-shield):not(#bas-shield) { animation-delay: 3.35s; }
.bas-bsp__animslide--3:not(#bas-shield):not(#bas-shield) { animation-delay: 3.6s; }
.bas-bsp__animslide--4:not(#bas-shield):not(#bas-shield) { animation-delay: 3.85s; }

.bas-bsp__animpop:not(#bas-shield):not(#bas-shield) { animation-delay: 5.5s; }

/*
 * 🔴 NO EXTRA REDUCED-MOTION RULE HERE, AND THAT IS DELIBERATE. Unlike "Your
 * Look", nothing in this section is stacked in a shared grid cell — every
 * animated element already occupies its own space in flow. The shared rule at
 * the top of this file pins each `__anim` element to opacity 1 and
 * transform: none, which lands exactly on the final frame: four ticked boxes,
 * a visible BECOMES, three artboards sitting on their stages. The scale
 * transforms survive because they live on `__art`, which is not an `__anim`
 * element. If you ever move a scale onto an animated element, this breaks.
 */

/* Phones: the lede and the bullets are the copy that has to stay readable. */
@media (max-width: 640px) {
	.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__lede      { font-size: 16px; }
	.bas-bs-prod:not(#bas-shield):not(#bas-shield) .bas-bsp__pointtext { font-size: 15px; }
	.bas-bsp__loop:not(#bas-shield):not(#bas-shield)                   { left: -56px; bottom: -40px; }
}

/* ═══ END SECTION 3 — YOUR PRODUCTS ═════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION 3 — YOUR PRODUCTS · the scale ladder
 * 🟠 A SEPARATE APPEND ONLY BECAUSE FOUR AGENTS WERE WRITING THIS FILE AT
 *    ONCE and re-opening the block above would have meant a read-modify-write
 *    that could drop another section. Fold it back into the block above when
 *    the file has one owner again — nothing else depends on it being here.
 *
 * 🔴 WHY IT EXISTS. In the mockup the right column is exactly 568px, which is
 *    exactly what the three cards plus their two gaps measure — so three fit
 *    across with nothing to spare. Real gutters make that column ~415–512px,
 *    so at s: 1 the third card wrapped onto a second row and the section lost
 *    its "one list becomes three things" line. The ladder below scales the
 *    row down to fit instead: three across from ~415px of column upward,
 *    stepping back up to the mockup's own size at 580px.
 *    Below ~368px only one card fits per row anyway, so let each stage hug
 *    its own artboard rather than reserve the tallest board's 218px under a
 *    134px tent card. (Between the two, two cards share a row and keep the
 *    uniform stage, so their captions stay on one line together.)
 *    Measured against .bas-bsp__panelcol — the column the row lives in — not
 *    the viewport. Browsers with no container queries keep s: 1 and wrap:
 *    narrower than intended, never broken.
 * ═══════════════════════════════════════════════════════════════════════════ */

@container basprodcol (min-width: 415px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: .71; } }
@container basprodcol (min-width: 435px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: .75; } }
@container basprodcol (min-width: 465px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: .80; } }
@container basprodcol (min-width: 505px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: .87; } }
@container basprodcol (min-width: 545px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: .94; } }
@container basprodcol (min-width: 580px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: 1; } }

/* 🔴 RUNGS ABOVE 1, FOR THE SAME REASON AS THE OTHER TWO SECTIONS. The three
   artboards plus their gaps are 568 mockup px, which is exactly the panel
   column's width on the mockup's 1200px canvas — s: 1 filled it. A full-width
   Divi row makes that column ~700px and s: 1 leaves the row floating with a
   third of the column empty and every caption wrapping to two lines.
   🔴 EVERY RUNG IS (COLUMN − 20) ÷ 568, NOT COLUMN ÷ 568. The row is
   flex-wrap, so a factor that makes it exactly as wide as its column wraps the
   third card to a second line and the section grows a 300px hole. 1.24 in a
   704px column measured 705px wide and did precisely that. Leave the slack. */
@container basprodcol (min-width: 620px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: 1.05; } }
@container basprodcol (min-width: 660px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: 1.12; } }
@container basprodcol (min-width: 700px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: 1.19; } }
@container basprodcol (min-width: 760px) { .bas-bsp__row:not(#bas-shield):not(#bas-shield) { --bas-bsp-s: 1.30; } }

/* One card per row: the rendered artboard heights are 336×.64, 180×.745 and
   340×.547 — 215, 134 and 186 mockup px. */
@container basprodcol (max-width: 367px) {
	.bas-bsp__card--list:not(#bas-shield):not(#bas-shield) .bas-bsp__stage { height: calc(215px * var(--bas-bsp-s)); }
	.bas-bsp__card--tent:not(#bas-shield):not(#bas-shield) .bas-bsp__stage { height: calc(134px * var(--bas-bsp-s)); }
	.bas-bsp__card--post:not(#bas-shield):not(#bas-shield) .bas-bsp__stage { height: calc(186px * var(--bas-bsp-s)); }
}

/* ═══ END SECTION 3 — YOUR PRODUCTS · scale ladder ══════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION 4 — CATALOG
 * module BrandStudioCatalog · bas/brand-studio-catalog · prefix .bas-bsc
 * Root  : .bas-bs-cat.bas-bsc                 (shared tokens + own rules)
 *         — and `id="catalog"`, set from PHP. The hero links at #catalog.
 * Inner : .bas-bsc__inner.bas-bs-cat__inner    ← BOTH names; the shared
 *         max-width/gutter rule at the top of this file styles the
 *         `bas-bs-cat__inner` half, everything below hangs off the
 *         `bas-bsc__inner` half. It is also a container-query container.
 *
 * 🔴 2.10.0 REPLACED THE DRAWN DASHBOARD with a four-step walkthrough of the
 *    real Brand Generator (colour → style → type → the finished pieces). Every
 *    picture is a real screen or a real document from the shipped renderer;
 *    see the render callback's docblock. The rules are in the block below.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────────────────── */

/* Low specificity on purpose: a Divi background setting should still beat it. */
.bas-bsc:not(#bas-shield):not(#bas-shield) {
	position: relative;
	padding: clamp(48px, 6.5vw, 80px) 0 clamp(52px, 7vw, 86px);
	background: var(--bas-bs-cream);
	/* The hero's "See what it makes" button lands here; leave room for a
	   sticky header rather than parking the eyebrow under it. */
	scroll-margin-top: 90px;
}

/* 🔴 The window's panes measure THIS, not the viewport — Amy can drop the
   module into a narrow Divi column and the viewport would lie about it. */
.bas-bsc__inner:not(#bas-shield):not(#bas-shield) {
	container-type: inline-size;
	container-name: bascat;
}

/* ── The header ─────────────────────────────────────────────────────────── */

.bas-bsc__head:not(#bas-shield):not(#bas-shield) { max-width: 760px; }

.bas-bs-cat:not(#bas-shield):not(#bas-shield) .bas-bsc__eyebrow {
	margin: 0;
	font: 900 12px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;              /* copy is sentence case in the PHP so
	                                           screen readers don't spell it out */
	color: var(--bas-bs-orange);
}

.bas-bs-cat:not(#bas-shield):not(#bas-shield) .bas-bsc__headline {
	margin: 16px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: var(--bas-fs-h1, clamp(32px, 4.4vw, 56px)); /* site kit token, 2.16.0 */    /* 46px flat overflows a 360px phone */
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--bas-bs-ink);
	text-wrap: balance;
}

.bas-bsc__headline:not(#bas-shield):not(#bas-shield) i {
	font-style: italic;
	color: var(--bas-bs-green-dk);
}

.bas-bs-cat:not(#bas-shield):not(#bas-shield) .bas-bsc__lede {
	margin: 16px 0 0;
	font: 400 17px/1.62 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
	text-wrap: pretty;
}

/* ── 2.11.0: the walkthrough itself (tabs, panels, windows, phones, loop) is
   the shared component in assets/css/bas-walkthrough.css. Only what is this
   section's own stays here: step 4's gallery of finished pieces. ── */

/* ── Step 4: the finished pieces ──
   Row 1: the banner across two columns, the sign beside it. Row 2: the three
   posts. Each piece sits on a white board so a cream design does not melt into
   the cream page. */
.bas-bsc__gallery:not(#bas-shield):not(#bas-shield) {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	align-items: center;
}
.bas-bsc__piece:not(#bas-shield):not(#bas-shield) { margin: 0; min-width: 0; }
.bas-bsc__piece--banner:not(#bas-shield):not(#bas-shield)  { grid-column: span 4; }
.bas-bsc__piece--sign:not(#bas-shield):not(#bas-shield)    { grid-column: span 2; }
.bas-bsc__piece--menu:not(#bas-shield):not(#bas-shield),
.bas-bsc__piece--product:not(#bas-shield):not(#bas-shield),
.bas-bsc__piece--soldout:not(#bas-shield):not(#bas-shield) { grid-column: span 2; }
.bas-bsc__piecebox:not(#bas-shield):not(#bas-shield) {
	display: block;
	padding: clamp(6px, .8vw, 10px);
	border-radius: 10px;
	background: var(--bas-bs-panel);
	border: 1px solid var(--bas-bs-panel-edge);
	box-shadow: 0 10px 24px rgba(20, 30, 10, .12), 0 1px 3px rgba(20, 30, 10, .06);
}
.bas-bsc__piecebox:not(#bas-shield):not(#bas-shield) img { display: block; width: 100%; height: auto; max-width: none; border-radius: 3px; }
.bas-bs-cat:not(#bas-shield):not(#bas-shield) .bas-bsc__piece figcaption {
	margin: 8px 2px 0;
	font: 400 12.5px/1.35 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-muted);
}
.bas-bs-cat:not(#bas-shield):not(#bas-shield) .bas-bsc__piece figcaption b { color: var(--bas-bs-ink); font-weight: 700; }

@media (max-width: 760px) {
	.bas-bsc__gallery:not(#bas-shield):not(#bas-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.bas-bsc__piece--banner:not(#bas-shield):not(#bas-shield),
	.bas-bsc__piece--sign:not(#bas-shield):not(#bas-shield) { grid-column: span 2; }
	.bas-bsc__piece--sign:not(#bas-shield):not(#bas-shield) .bas-bsc__piecebox { max-width: 420px; }
	.bas-bsc__piece--menu:not(#bas-shield):not(#bas-shield),
	.bas-bsc__piece--product:not(#bas-shield):not(#bas-shield) { grid-column: span 1; }
	.bas-bsc__piece--soldout:not(#bas-shield):not(#bas-shield) { grid-column: 1 / -1; max-width: calc(50% - 6px); justify-self: center; }
}

/* ═══ END SECTION 4 — CATALOG ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SHARED — CONTAINMENT
   Added after the four sections landed, because all four had the same bug.
   ══════════════════════════════════════════════════════════════════════════

   🔴 EVERY SECTION CLIPS ITS OWN BLEED, AND ALL FOUR NEEDED TELLING.

   The mockup is one 1440px canvas with `overflow:hidden` on its outer div, so
   everything drawn past the edge — the hero's produce loop hanging off the
   top-right, the products section's lifted card, the catalog's preview
   artboards, which are absolutely positioned at their UNSCALED width and only
   then `scale()`d down — was clipped by the page rather than by the section.

   Split into four modules that container is gone, and each one leaked. Measured
   in headless Chromium before this rule: 1510px of scroll width at a 1440px
   viewport, 436px at 390px. On a phone that is the whole page sliding sideways
   under the reader's thumb — the single worst thing a section can do on a site
   whose vendors are mostly on phones, and invisible on the desktop it was
   drawn on.

   A transform does not shrink an element's LAYOUT box and `position: absolute`
   does not take an element out of its scroll container, so neither the scale
   nor the absolute positioning saves you. Only clipping does.

   Each root clips itself, which is also what keeps two of these sections on one
   page from bleeding into each other. */
.bas-bs-hero:not(#bas-shield):not(#bas-shield),
.bas-bs-look:not(#bas-shield):not(#bas-shield),
.bas-bs-prod:not(#bas-shield):not(#bas-shield),
.bas-bs-cat:not(#bas-shield):not(#bas-shield) {
	overflow: hidden;
	/* Belt and braces: a stray wide child cannot widen the section itself. */
	max-width: 100%;
}