/**
 * 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,
.bas-bs-look,
.bas-bs-prod,
.bas-bs-cat {
	/* ── 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 *,
.bas-bs-look *,
.bas-bs-prod *,
.bas-bs-cat * { box-sizing: border-box; }

/* The inner column every section shares. */
.bas-bs-hero__inner,
.bas-bs-look__inner,
.bas-bs-prod__inner,
.bas-bs-cat__inner {
	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 [class*="__anim"],
	.bas-bs-look [class*="__anim"],
	.bas-bs-prod [class*="__anim"],
	.bas-bs-cat  [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.
 *
 * 🔴 The mockup's right-hand fake browser is 692px wide on a 1440px canvas.
 *    Here it lives in a grid column whose width depends on the viewport AND on
 *    how wide a Divi column Amy drops the module into — so it re-lays-out on
 *    its OWN width with @container, not on the viewport. Below ~600px of frame
 *    the two inner panes stack; below ~460px the sidebar rail goes away.
 *    Browsers without container queries get the stacked layout permanently:
 *    narrower than intended, never broken.
 *
 * 🔴 No @keyframes here. The hero is the one section of the four the mockup
 *    does NOT animate — nothing in lines 36–141 carries an `animation`. Don't
 *    "restore" one; it was never there.
 *
 * 🟠 #9b2340 cranberry, #24201a / #f5efe0 / #ece2d1 stamped-look neutrals and
 *    the card's gradient are the FAKE VENDOR's brand inside the screenshot,
 *    not BAS tokens. They must not become tokens — the whole point of the
 *    picture is that it is somebody else's palette.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 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 {
	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 {
	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 {
	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 .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 .bas-bsh__headline {
	margin: 20px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 48px);
	line-height: 1.06;
	letter-spacing: -.02em;
	color: var(--bas-bs-ink);
	text-wrap: balance;
}

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

.bas-bs-hero .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 {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.bas-bs-hero .bas-bsh__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font: 900 13px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bas-bs-hero .bas-bsh__btn:hover,
.bas-bs-hero .bas-bsh__btn:focus { text-decoration: none; }

.bas-bs-hero .bas-bsh__btn:focus-visible {
	outline: 2px solid var(--bas-bs-green-dk);
	outline-offset: 3px;
}

.bas-bs-hero .bas-bsh__btn--primary {
	padding: 15px 30px;
	background: var(--bas-bs-green);
	color: var(--bas-bs-cream);
	box-shadow: 0 4px 0 rgba(29, 116, 27, .35);
}
.bas-bs-hero .bas-bsh__btn--primary:hover { background: #7fbd4a; color: var(--bas-bs-cream); }
.bas-bs-hero .bas-bsh__btn--primary:active {
	transform: translateY(1px);
	box-shadow: 0 2px 0 rgba(29, 116, 27, .35);
}

.bas-bs-hero .bas-bsh__btn--ghost {
	padding: 15px 26px;
	border: 1.5px solid var(--bas-bs-green-dk);
	color: var(--bas-bs-green-dk);
	background: transparent;
}
.bas-bs-hero .bas-bsh__btn--ghost:hover {
	background: rgba(29, 116, 27, .08);
	color: var(--bas-bs-green-dk);
}

.bas-bs-hero .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 li { position: relative; margin: 0; }
/* Separator dots live in the 18px gap, so they vanish for free when the list wraps. */
.bas-bsh__meta li + li::before { content: "·"; position: absolute; left: -11px; }

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

.bas-bsh__stage { position: relative; }

.bas-bsh__frame {
	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 {
	height: 34px;
	background: #f2eee1;
	border-bottom: 1px solid #e7e2d2;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 13px;
}
.bas-bsh__dot { width: 9px; height: 9px; flex: none; border-radius: 999px; }
.bas-bsh__dot--red    { background: #ff7660; }
.bas-bsh__dot--yellow { background: var(--bas-bs-yellow); }
.bas-bsh__dot--green  { background: var(--bas-bs-green); }
.bas-bsh__url {
	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 */
}

/* Default = narrow frame: no rail, panes stacked. */
.bas-bsh__app { display: block; background: var(--bas-bs-panel); }
.bas-bsh__rail { display: none; }
.bas-bsh__pane { padding: 18px 16px; display: flex; flex-direction: column; min-width: 0; }
.bas-bsh__cols { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; min-width: 0; }
.bas-bsh__setup { display: flex; flex-direction: column; min-width: 0; }
.bas-bsh__preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.bas-bsh__railmark { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--bas-bs-green-dk); }
.bas-bsh__railline { width: 22px; height: 6px;  flex: none; border-radius: 3px; background: var(--bas-bs-rule-2); }
.bas-bsh__railpill { width: 34px; height: 22px; flex: none; border-radius: 7px; background: var(--bas-bs-green); }

.bas-bs-hero .bas-bsh__panetitle {
	margin: 0;
	font: 700 18px/1.2 'Playfair Display', Georgia, serif;
	color: var(--bas-bs-ink);
}
.bas-bs-hero .bas-bsh__panelede {
	margin: 7px 0 0;
	font: 400 12.5px/1.55 'Lato', system-ui, sans-serif;
	color: #6f6a5e;
	max-width: 340px;
}

/* Three setup rows. */
.bas-bsh__step {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 0;
	border-bottom: 1px solid var(--bas-bs-rule);
}
.bas-bsh__stepnum {
	width: 22px; height: 22px; flex: none;
	border-radius: 999px;
	background: var(--bas-bs-green);
	color: #fff;
	font: 700 11px/22px 'Lato', system-ui, sans-serif;
	text-align: center;
}
.bas-bsh__steplabel {
	flex: 1 1 auto; min-width: 0;
	font: 700 13px/1.3 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink);
}
.bas-bsh__stepvalue {
	display: flex; align-items: center; gap: 7px;
	font: 400 12px/1.3 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
	text-align: right;
}
.bas-bsh__swatch { width: 12px; height: 12px; flex: none; border-radius: 999px; background: #9b2340; }

/* The two type samples. */
.bas-bsh__styles {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.bas-bsh__style { border: 1px solid #e7e2d2; border-radius: 10px; overflow: hidden; background: #fff; }
.bas-bsh__style--on { border: 1.5px solid var(--bas-bs-green-dk); }
.bas-bsh__styleart { background: #ece2d1; padding: 11px 11px 13px; }
/* 🟠 Zilla Slab / EB Garamond in the mockup. The site loads Playfair only, so
   the two samples separate on weight and tracking instead of on family. */
.bas-bs-hero .bas-bsh__stylename {
	margin: 0;
	font: 600 15px/1.1 'Playfair Display', Georgia, serif;
	color: #2b2320;
}
.bas-bs-hero .bas-bsh__style--farmhouse .bas-bsh__stylename { font-weight: 400; letter-spacing: .01em; }
.bas-bs-hero .bas-bsh__styleline {
	margin: 6px 0 0;
	font: 400 8.5px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6d6259;
}
.bas-bs-hero .bas-bsh__style--farmhouse .bas-bsh__styleline {
	font-size: 9px; letter-spacing: .02em; text-transform: none;
}
.bas-bsh__stylefoot { padding: 8px 11px 10px; }
.bas-bsh__stylefoot b { display: block; font: 700 11px/1.35 'Lato', system-ui, sans-serif; color: var(--bas-bs-ink); }
.bas-bsh__stylefoot span { display: block; font: 400 9.5px/1.35 'Lato', system-ui, sans-serif; color: #8a8578; }

/* Live preview. */
.bas-bsh__previewhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bas-bs-hero .bas-bsh__kicker {
	margin: 0;
	font: 700 9.5px/1.4 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8578;
}
.bas-bsh__chip {
	display: inline-flex; align-items: center; gap: 5px;
	background: #f6e6e9;
	border-radius: 999px;
	padding: 4px 9px;
	font: 900 8.5px/1.2 'Lato', system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9b2340;
}
.bas-bsh__chipdot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: #9b2340; }

.bas-bsh__card {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	background: #f5efe0;
	box-shadow: 0 10px 22px rgba(20, 30, 10, .18);
}
/* The live-preview card. The photo URL is set inline (the stylesheet cannot
   know the plugin URL); these gradients are the bakery-toned colour that shows
   underneath while it loads. */
.bas-bsh__cardphoto {
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(120% 90% at 30% 18%, #e8c88d 0%, rgba(232, 200, 141, 0) 62%),
		radial-gradient(90% 75% at 78% 82%, #a06a35 0%, rgba(160, 106, 53, 0) 66%),
		linear-gradient(152deg, #cb9c5d 0%, #8c5c2e 100%);
	/* 🔴 These three MUST stay below the `background` shorthand above. The
	   shorthand resets size and position, so declaring them first leaves the
	   inline photo drawn at its natural size in the top-left corner. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.bas-bsh__cardtag {
	position: absolute; left: 11px; top: 11px;
	background: #24201a;
	padding: 5px 8px;
	font: 700 7px/1.2 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #f5efe0;
}
/* Overhangs into the caption block on purpose — the card clips it, not the photo. */
.bas-bsh__cardprice {
	position: absolute; right: 12px; bottom: -24px; z-index: 1;
	width: 62px; height: 62px;
	border-radius: 999px;
	background: #9b2340;
	display: flex; align-items: center; justify-content: center;
	font: 600 21px/1 'Playfair Display', Georgia, serif;
	color: #f5efe0;
	box-shadow: 0 7px 16px rgba(36, 32, 26, .32);
}
.bas-bsh__cardfoot { flex: none; border-top: 3px solid #24201a; padding: 13px 14px 15px; }
.bas-bs-hero .bas-bsh__cardname {
	margin: 0;
	font: 600 clamp(17px, 3.4cqw, 20px)/1.02 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	color: #24201a;
}
.bas-bs-hero .bas-bsh__cardmeta {
	margin: 8px 0 0;
	font: 700 7.5px/1.4 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #9b2340;
}

/* Three "and everything else matches" thumbnails. */
.bas-bsh__thumbs { display: flex; gap: 8px; flex: none; }
.bas-bsh__thumb { flex: 1 1 0; min-width: 0; height: 74px; border-radius: 6px; overflow: hidden; position: relative; }
.bas-bsh__thumb--menu { background: #f5efe0; border: 1px solid #e0d8c2; display: flex; flex-direction: column; }
.bas-bsh__thumbbar { height: 16px; flex: none; background: #24201a; }
.bas-bsh__thumblines { flex: 1 1 auto; padding: 6px 7px; display: flex; flex-direction: column; gap: 5px; }
.bas-bsh__thumbline { display: flex; align-items: center; gap: 4px; }
.bas-bsh__thumbrule { flex: 1 1 auto; height: 2px; background: #c3b49c; }
.bas-bsh__thumbdot  { width: 9px; height: 6px; flex: none; background: #9b2340; }
.bas-bsh__thumb--mark { background: #9b2340; display: flex; align-items: center; justify-content: center; }
.bas-bsh__mark {
	width: 44px; height: 44px;
	border-radius: 999px;
	border: 1.5px solid rgba(245, 239, 224, .75);
	display: flex; align-items: center; justify-content: center;
	font: 600 13px/1 'Playfair Display', Georgia, serif;
	color: #f5efe0;
}
.bas-bsh__thumb--photo { background: #cdd9b8 center / cover no-repeat; }
.bas-bsh__thumbcap {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: #f5efe0;
	padding: 5px 6px;
	font: 600 8px/1.2 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	color: #24201a;
}

/* Bea, leaning on the bottom-left corner of the window. */
.bas-bsh__bea {
	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));
}

/* ── The fake browser sizes off ITSELF, not the viewport ────────────────── */

@container (min-width: 460px) {
	.bas-bsh__app  { display: flex; }
	.bas-bsh__rail {
		display: flex; flex-direction: column; align-items: center;
		width: 54px; flex: none;
		background: #f7f3e6;
		border-right: 1px solid #e7e2d2;
		padding: 14px 0;
		gap: 14px;
	}
	.bas-bsh__pane { flex: 1 1 auto; padding: 22px 24px; }
}

@container (min-width: 600px) {
	/* The mockup's 692 × 620 window, kept as a ratio so it scales with the column. */
	.bas-bsh__app { aspect-ratio: 692 / 620; min-height: 470px; }
	.bas-bsh__cols { flex-direction: row; gap: 20px; flex: 1 1 auto; min-height: 0; margin-top: 18px; }
	.bas-bsh__setup   { flex: 1 1 300px; max-width: 380px; }
	.bas-bsh__preview { flex: 1 1 190px; }
	.bas-bsh__card { flex: 1 1 auto; min-height: 0; }
	.bas-bsh__cardphoto { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
	.bas-bs-hero .bas-bsh__panetitle { font-size: 22px; }
}

/*
 * 🔴 A WIDE FRAME NEEDS A WIDER RATIO, NOT A max-height. In a full-width Divi
 * row this frame reaches ~870px, and 692/620 then demands ~780px of height —
 * a tall white void under the two style cards, because the setup pane has no
 * more content to give. The obvious fix, `max-height`, is a trap: a block box
 * with an aspect-ratio and a capped height shrinks its WIDTH to keep the
 * ratio, so the window pulled in to 714px inside an 871px frame and left a
 * bare strip down the right-hand side. Measured, not guessed. Widening the
 * ratio instead keeps the frame full width and the interior filled.
 */
@container (min-width: 800px) {
	.bas-bsh__app { aspect-ratio: 692 / 500; }
}

/* ── 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 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.bas-bs-hero .bas-bsh__lede { max-width: 62ch; }
	.bas-bsh__bea { left: -6px; bottom: -30px; width: 92px; }
}

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

/* Phones: the two type samples are unreadable side by side at 150px each. */
@media (max-width: 420px) {
	.bas-bsh__styles { grid-template-columns: minmax(0, 1fr); }
	.bas-bsh__step { padding: 11px 0; }
	.bas-bsh__stepvalue { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 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 {
	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 {
	container-type: inline-size;
	container-name: baslook;
}

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

.bas-bsl__head { max-width: 720px; }

.bas-bs-look .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 .bas-bsl__headline {
	margin: 16px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 46px);    /* 46px flat overflows a 360px phone */
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--bas-bs-ink);
	text-wrap: balance;
}

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

.bas-bs-look .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 {
	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 {
	flex: 1 1 320px;
	max-width: 600px;
	min-width: 0;
}

.bas-bs-look .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 .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 {
	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 .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 .bas-bsl__tab:focus-visible {
	outline: 2px solid var(--bas-bs-green-dk);
	outline-offset: 2px;
}

.bas-bsl__animtab     { animation: bas-bsl-tab1 18s linear infinite both; }
.bas-bsl__animtab--2  { animation-name: bas-bsl-tab2; }
.bas-bsl__animtab--3  { 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 .bas-bsl__animtab,
.bas-bsl--manual .bas-bsl__animnote,
.bas-bsl--manual .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 .bas-bsl__set          { display: none; }
.bas-bsl--manual .bas-bsl__set.is-active { display: flex; }

.bas-bsl--manual .bas-bsl__set.is-active .bas-bsl__animnote,
.bas-bsl--manual .bas-bsl__set.is-active .bas-bsl__animcard {
	opacity: 1;
	transform: none;
}

.bas-bsl--manual .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 .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-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 {
	margin-top: clamp(22px, 2.6vw, 30px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

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

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

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

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

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

.bas-bsl__row {
	--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 { --bas-bsl-s: .74; }
}
@container baslook (min-width: 560px) {
	.bas-bsl__row { --bas-bsl-s: .62; grid-template-columns: auto auto; }
}
@container baslook (min-width: 700px) {
	.bas-bsl__row { --bas-bsl-s: .74; grid-template-columns: auto auto; }
}
@container baslook (min-width: 780px) {
	.bas-bsl__row { --bas-bsl-s: .52; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 900px) {
	.bas-bsl__row { --bas-bsl-s: .62; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1010px) {
	.bas-bsl__row { --bas-bsl-s: .70; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1070px) {
	.bas-bsl__row { --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 { --bas-bsl-s: .82; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1320px) {
	.bas-bsl__row { --bas-bsl-s: .90; grid-template-columns: auto auto auto auto; }
}
@container baslook (min-width: 1460px) {
	.bas-bsl__row { --bas-bsl-s: 1;   grid-template-columns: auto auto auto auto; }
}

.bas-bsl__card {
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
}

.bas-bsl__card--sign  { width: calc(400px * var(--bas-bsl-s)); }
.bas-bsl__card--price { width: calc(262px * var(--bas-bsl-s)); }
.bas-bsl__card--menu,
.bas-bsl__card--post  { 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 {
	position: relative;
	height: calc(340px * var(--bas-bsl-s));
}

.bas-bs-look .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 {
	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  { width: 400px; height: 300px; }
.bas-bsl__art--price { width: 262px; height: 336px; }
.bas-bsl__art--menu,
.bas-bsl__art--post  { 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 span { display: block; }
.bas-bsl__art 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 {
	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 {
	background-color: #ffd4e1;
	filter: saturate(.92) brightness(1.03);
}

.bas-bsl__aphoto--full {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
}

.bas-bsl__aphoto--side {
	width: 124px;
	height: auto;
	flex: none;
	align-self: stretch;
}

.bas-bsl__ascallop {
	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 {
	height: 11px;
	background: radial-gradient(circle at 10px 11px, #fffcfa 10px, transparent 10.5px) 0 0/20px 11px repeat-x;
}

.bas-bsl__ashade {
	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 { position: absolute; width: 16px; height: 16px; }

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

.bas-bsl__art--sorbet {
	--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.bas-bsl__art--sign {
	background: var(--a-alt);
	align-items: center;
	justify-content: center;
}

.bas-bsl__art--sorbet .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 .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 .bas-bsl__aname {
	font: 500 42px/.96 'Playfair Display', Georgia, serif;
	color: var(--a-ink);
}

.bas-bsl__art--sorbet .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 .bas-bsl__abar {
	width: 64px;
	height: 5px;
	border-radius: 999px;
	background: var(--a-pop);
}

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

.bas-bsl__art--sorbet .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.bas-bsl__art--menu .bas-bsl__apill { left: 22px; top: 18px; padding: 7px 14px; letter-spacing: .18em; }

.bas-bsl__art--sorbet .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 .bas-bsl__adisc {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.bas-bsl__art--sorbet .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 .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 .bas-bsl__abody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bas-bsl__art--sorbet.bas-bsl__art--price .bas-bsl__abody { padding: 14px 24px 18px; }
.bas-bsl__art--sorbet.bas-bsl__art--menu  .bas-bsl__abody { padding: 14px 26px 0; }
.bas-bsl__art--sorbet.bas-bsl__art--post  .bas-bsl__abody { flex: none; padding: 20px 26px 24px; }

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

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

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

.bas-bsl__art--sorbet .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 .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 {
	--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 .bas-bsl__aphoto--shot { filter: sepia(.42) saturate(.78) contrast(1.02); }

.bas-bsl__art--stamped.bas-bsl__art--sign { padding: 14px; }

.bas-bsl__art--stamped .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 .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 .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 .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 .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 .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 { position: absolute; inset: 9px;  border-radius: 50%; border: 1px solid rgba(36, 32, 26, .5); }
.bas-bsl__acrestdots { position: absolute; inset: 15px; border-radius: 50%; border: 6px dotted rgba(122, 32, 40, .22); }

.bas-bsl__art--stamped .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 .bas-bsl__ameta--soft { letter-spacing: .2em; color: rgba(36, 32, 26, .7); }

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

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

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

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

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

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

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

.bas-bsl__art--stamped .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 .bas-bsl__alabel { flex: 1; font: 500 12.5px/1 'Playfair Display', Georgia, serif; color: var(--a-ink); }

.bas-bsl__art--stamped .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 .bas-bsl__astrip { height: 76px; flex: none; }

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

.bas-bsl__art--stamped .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.bas-bsl__art--post { background: #e0cda8; }

.bas-bsl__art--stamped .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 .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 .bas-bsl__acardtext { flex: 1; min-width: 0; }
.bas-bsl__art--stamped.bas-bsl__art--post .bas-bsl__aname { font-size: 26px; line-height: 1; }
.bas-bsl__art--stamped.bas-bsl__art--post .bas-bsl__ameta--soft { margin-top: 10px; }

.bas-bsl__art--stamped .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 .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 {
	--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 .bas-bsl__aphoto--shot { filter: sepia(.2) saturate(.9); }

.bas-bsl__art--farmhouse.bas-bsl__art--sign { padding: 12px; }

.bas-bsl__art--farmhouse .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 .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 .bas-bsl__aname {
	font: 400 56px/.95 'Playfair Display', Georgia, serif;
	color: var(--a-ink);
}

.bas-bsl__art--farmhouse .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 .bas-bsl__arulerow { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bas-bsl__art--farmhouse .bas-bsl__arule { flex: 1; height: 1px; background: rgba(38, 36, 32, .16); }

.bas-bsl__art--farmhouse .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 .bas-bsl__ahead { flex: none; overflow: hidden; }
.bas-bsl__art--farmhouse.bas-bsl__art--price .bas-bsl__ahead { height: 104px; }
.bas-bsl__art--farmhouse.bas-bsl__art--menu  .bas-bsl__ahead { height: 118px; }

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

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

.bas-bsl__art--farmhouse .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 .bas-bsl__abody > .bas-bsl__arule { flex: none; height: 1px; margin: 12px 0 10px; }

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

.bas-bsl__art--farmhouse .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 .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.bas-bsl__art--post { background: #d9d1c1; }

.bas-bsl__art--farmhouse .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 .bas-bsl__acard { position: absolute; left: 26px; right: 26px; bottom: 26px; }
.bas-bsl__art--farmhouse.bas-bsl__art--post .bas-bsl__aname { font-size: 36px; line-height: 1.05; color: #f3eee6; }

.bas-bsl__art--farmhouse .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 .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 .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,
.bas-bsl__animcard { animation: bas-bsl-card 18s cubic-bezier(.22, 1, .36, 1) infinite both; }

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

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

.bas-bsl__set--3 .bas-bsl__animnote               { animation-delay: 12s; }
.bas-bsl__set--3 .bas-bsl__animcard:nth-child(1)  { animation-delay: 12.15s; }
.bas-bsl__set--3 .bas-bsl__animcard:nth-child(2)  { animation-delay: 12.30s; }
.bas-bsl__set--3 .bas-bsl__animcard:nth-child(3)  { animation-delay: 12.45s; }
.bas-bsl__set--3 .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 { display: block; }
	.bas-bsl__set   { display: block; }
	.bas-bsl__set + .bas-bsl__set { margin-top: clamp(30px, 4vw, 48px); }
	.bas-bsl__set .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 {
	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 {
	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 {
	container-type: inline-size;
	container-name: basprod;
	z-index: 1;                             /* above the loop */
}

.bas-bsp__grid {
	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 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

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

.bas-bsp__copy { min-width: 0; }

.bas-bs-prod .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 .bas-bsp__headline {
	margin: 16px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 44px);    /* 44px flat overflows a 360px phone */
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--bas-bs-cream);
	text-wrap: balance;
}

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

.bas-bs-prod .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 .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 .bas-bsp__point {
	margin: 0;
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.bas-bsp__point::before { content: none; }  /* some themes bullet every li */

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

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

.bas-bsp__pointtext 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 {
	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 span,
.bas-bsp__art span { display: block; }

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

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

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

.bas-bsp__panelhead {
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bas-bsp__panelttl {
	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 {
	flex: none;
	font: 400 12px/1.3 'Lato', system-ui, sans-serif;
	color: rgba(255, 251, 239, .45);
}

.bas-bsp__rows { margin-top: 14px; }

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

.bas-bsp__prow:last-child { border-bottom: 0; }
.bas-bsp__prow--off       { opacity: .5; }

.bas-bsp__box {
	position: relative;
	width: 14px;
	height: 14px;
	flex: none;
}

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

.bas-bsp__boxtick {
	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 {
	flex: 1;
	min-width: 0;
	font: 400 14px/1.35 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-cream);
}

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

.bas-bsp__pprice {
	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 { padding: 16px 15px; }
	.bas-bsp__panel .bas-bsp__punit { display: none; }
	.bas-bsp__panel .bas-bsp__pname { font-size: 13px; }
}

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

.bas-bsp__becomes {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 2px;
}

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

.bas-bs-prod .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 {
	--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 { --bas-bsp-s: .84; }
}

.bas-bsp__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.bas-bsp__card--list { width: calc(168px * var(--bas-bsp-s)); }
.bas-bsp__card--tent,
.bas-bsp__card--post { 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 {
	position: relative;
	height: calc(218px * var(--bas-bsp-s));
}

.bas-bsp__lift {
	position: absolute;
	left: 0;
	bottom: 0;
}

.bas-bsp__art {
	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 {
	width: 262px;
	height: 336px;
	background: #ece2d1;
	transform: scale(calc(.64 * var(--bas-bsp-s)));
}

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

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

.bas-bs-prod .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 {
	flex: none;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 12px 18px;
	background: #2b2320;
}

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

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

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

.bas-bsp__aitemrow {
	align-items: center;
	gap: 11px;
}

.bas-bsp__athumb {
	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 {
	flex: 1;
	min-width: 0;
}

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

.bas-bsp__ameta {
	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 {
	flex: none;
	padding: 4px 6px;
	background: #9b2340;
	color: #fff;
	font: 700 10px/1 'Lato', system-ui, sans-serif;
}

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

.bas-bsp__aspacer { flex: 1; }

.bas-bsp__afoot {
	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 {
	height: 78px;
	flex: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: brightness(1.02);
}

.bas-bsp__abody--tent {
	gap: 0;
	padding: 12px 16px;
}

.bas-bsp__aname--tent { font-size: 19px; line-height: 1.04; }

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

.bas-bsp__aprice {
	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 {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.bas-bsp__atag {
	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 {
	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 { min-width: 0; }

.bas-bsp__aname--big { font-size: 30px; line-height: 1.02; }

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

.bas-bsp__abadge {
	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  { animation: bas-bsp-tick  14s cubic-bezier(.22, 1, .36, 1) infinite both; }
.bas-bsp__animbuild { animation: bas-bsp-build 14s cubic-bezier(.22, 1, .36, 1) infinite both; }
.bas-bsp__animslide { animation: bas-bsp-slide 14s cubic-bezier(.22, 1, .36, 1) infinite both; }
.bas-bsp__animpop   { animation: bas-bsp-pop   14s cubic-bezier(.22, 1, .36, 1) infinite both; }

.bas-bsp__animtick--1 { animation-delay: .5s; }
.bas-bsp__animtick--2 { animation-delay: 1s; }
.bas-bsp__animtick--3 { animation-delay: 1.5s; }
.bas-bsp__animtick--4 { animation-delay: 2s; }

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

.bas-bsp__animslide--1 { animation-delay: 3.1s; }
.bas-bsp__animslide--2 { animation-delay: 3.35s; }
.bas-bsp__animslide--3 { animation-delay: 3.6s; }
.bas-bsp__animslide--4 { animation-delay: 3.85s; }

.bas-bsp__animpop { 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 .bas-bsp__lede      { font-size: 16px; }
	.bas-bs-prod .bas-bsp__pointtext { font-size: 15px; }
	.bas-bsp__loop                   { 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 { --bas-bsp-s: .71; } }
@container basprodcol (min-width: 435px) { .bas-bsp__row { --bas-bsp-s: .75; } }
@container basprodcol (min-width: 465px) { .bas-bsp__row { --bas-bsp-s: .80; } }
@container basprodcol (min-width: 505px) { .bas-bsp__row { --bas-bsp-s: .87; } }
@container basprodcol (min-width: 545px) { .bas-bsp__row { --bas-bsp-s: .94; } }
@container basprodcol (min-width: 580px) { .bas-bsp__row { --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 { --bas-bsp-s: 1.05; } }
@container basprodcol (min-width: 660px) { .bas-bsp__row { --bas-bsp-s: 1.12; } }
@container basprodcol (min-width: 700px) { .bas-bsp__row { --bas-bsp-s: 1.19; } }
@container basprodcol (min-width: 760px) { .bas-bsp__row { --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 .bas-bsp__stage { height: calc(215px * var(--bas-bsp-s)); }
	.bas-bsp__card--tent .bas-bsp__stage { height: calc(134px * var(--bas-bsp-s)); }
	.bas-bsp__card--post .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.
 * Source: "Brand Studio Sales Page.dc.html" lines 561–811 (keyframes 15–34).
 *
 * 🔴 THE WHOLE SECTION IS ONE FAKE DASHBOARD WINDOW with three panes: the
 *    asset library, the editor and the preview. In the mockup they are 236px,
 *    300px and "whatever is left of 1200" — a three-column grid that only
 *    exists above 940px of inner column. Below that the three panes STACK,
 *    full width, and the library's seventeen items go into an auto-filling
 *    grid rather than one very long list. There is no middle two-up state on
 *    purpose: a 620px column split between a 300px editor and a preview would
 *    leave the preview narrower than it gets when everything simply stacks,
 *    so the art would get SMALLER as the screen got WIDER. Don't add one.
 *
 * 🔴 ONE SCALE FACTOR, `--bas-bsc-s`, DRIVES THE ARTBOARDS. Each is drawn at
 *    the mockup's own pixel size (280×360 placard, 480×320 banner, 300×200
 *    signup card, 250×150 business and review cards, 260×260 posts) and
 *    scaled by its own mockup ratio times that factor; the slot width and the
 *    stage height are derived from the same factor, so a 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.
 *    The ladder at the bottom of this block measures the PREVIEW PANE, not
 *    the viewport, because Amy can drop this into a narrow Divi column.
 *    Browsers with no container queries keep s: 1 and the pairs wrap: bigger
 *    than intended on a phone, never broken.
 *
 * 🔴 THE PCARD / PSTAGE / PANCHOR / BOARD SPLIT IS LOAD-BEARING. `__pcard`
 *    sets the slot width, `__pstage` reserves the height, `__panchor` pins
 *    the art to the bottom-left (transform does not affect layout, so the
 *    anchor's un-scaled box is invisible and harmless), and `__board` owns
 *    the scale. The scale must never move onto an `__anim` element: the
 *    shared reduced-motion rule forces `transform: none !important` and every
 *    artboard would print at full mockup size.
 *
 * 🔴 THIS SECTION NEEDS ITS OWN REDUCED-MOTION RULE, at the bottom of this
 *    block, on top of the shared one at the top of the file. Four editor
 *    steps live in ONE grid cell and four preview steps in another; the
 *    shared rule pins every `__anim` element to opacity 1, which here would
 *    print four of each on top of each other. So they un-stack into flow.
 *
 * 🟠 #ece2d1 / #2b2320 / #9b2340 / #ddd3bd / #c3b49c / #5a5049 / #6d6259 /
 *    #cdbfa6 are the FAKE VENDOR's Stamped palette inside a picture, and
 *    #f2eee1 / #f7f3e6 / #faf6ea / #e7e2d2 / #8a8578 / #a09a8c / #ff7660 are
 *    the fake dashboard's own chrome. Neither set may become a token — the
 *    point of the picture is that it is somebody else's product and somebody
 *    else's brand.
 *
 * 🟠 The mockup sets the artboards in Zilla Slab / Archivo Narrow and the URL
 *    bar in DM Sans. The site loads Lato and Playfair Display only, so every
 *    Zilla Slab here is Playfair Display and every Archivo Narrow and DM Sans
 *    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-bsc-step {
	0%          { opacity: 0; transform: translateY(12px); }
	2.5%        { opacity: 1; transform: none; }
	22%         { opacity: 1; transform: none; }
	24.5%, 100% { opacity: 0; transform: translateY(12px); }
}

/* The four library highlights. Each owns a quarter of the same 20s loop, so
   the sidebar, the editor and the preview all point at the same asset. */
@keyframes bas-bsc-nav1 {
	0%, 23%     { background: var(--bas-bs-green-dk); color: var(--bas-bs-cream); }
	24%, 100%   { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
}
@keyframes bas-bsc-nav2 {
	0%, 23%     { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
	25%, 48%    { background: var(--bas-bs-green-dk); color: var(--bas-bs-cream); }
	49%, 100%   { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
}
@keyframes bas-bsc-nav3 {
	0%, 48%     { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
	50%, 73%    { background: var(--bas-bs-green-dk); color: var(--bas-bs-cream); }
	74%, 100%   { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
}
@keyframes bas-bsc-nav4 {
	0%, 73%     { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
	75%, 98%    { background: var(--bas-bs-green-dk); color: var(--bas-bs-cream); }
	99%, 100%   { background: rgba(29, 116, 27, 0);   color: var(--bas-bs-ink-soft); }
}

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

/* Low specificity on purpose: a Divi background setting should still beat it. */
.bas-bsc {
	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 {
	container-type: inline-size;
	container-name: bascat;
}

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

.bas-bsc__head { max-width: 760px; }

.bas-bs-cat .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 .bas-bsc__headline {
	margin: 16px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(28px, 4.4vw, 46px);    /* 46px flat overflows a 360px phone */
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--bas-bs-ink);
	text-wrap: balance;
}

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

.bas-bs-cat .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;
}

/* ── The fake dashboard window ──────────────────────────────────────────── */

.bas-bsc__app {
	margin-top: clamp(28px, 3.6vw, 42px);
	border-radius: 14px;
	overflow: hidden;                       /* clips the panes to the rounded corners */
	border: 1px solid var(--bas-bs-panel-edge);
	box-shadow: var(--bas-bs-panel-cast);
	background: var(--bas-bs-panel);
}

.bas-bsc__chrome {
	height: 34px;
	background: #f2eee1;
	border-bottom: 1px solid #e7e2d2;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 13px;
}

.bas-bsc__dot {
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 999px;
}
.bas-bsc__dot--red    { background: #ff7660; }
.bas-bsc__dot--yellow { background: var(--bas-bs-yellow); }
.bas-bsc__dot--green  { background: var(--bas-bs-green); }

/* Not a flex box: the URL has to be able to ellipsis on a phone. */
.bas-bsc__url {
	margin-left: 12px;
	flex: 1;
	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;
}

/*
 * 🔴 Stacked by default, three columns only above 860px of inner column. See
 * the "no middle two-up state" note in the block header — it is deliberate.
 *
 * 🔴 860, NOT 940. At 940 a 1280px laptop with a scrollbar and this section's
 * gutters landed a few pixels SHORT and fell into the stacked layout, where
 * the seventeen library items fan out across the full width and the whole
 * window stops reading as a dashboard. The three panes are 236 + 300 + a
 * 324px preview at 860, which is still a legible preview — a narrow one beats
 * a stacked one every time here.
 */
.bas-bsc__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--bas-bs-panel);        /* white, so the window reads as an object */
}

@container bascat (min-width: 860px) {
	.bas-bsc__body {
		grid-template-columns: 236px 300px minmax(0, 1fr);
		align-items: stretch;
	}
	.bas-bsc__lib,
	.bas-bsc__editor {
		border-bottom: 0;
		border-right: 1px solid var(--bas-bs-rule);
	}
	.bas-bsc__libitems { display: block; }
	.bas-bsc__step     { max-width: none; }
}

/* ── Pane 1: the asset library ──────────────────────────────────────────── */

.bas-bsc__lib {
	padding: 18px 14px 22px;
	background: #f7f3e6;
	border-bottom: 1px solid var(--bas-bs-rule);
	min-width: 0;
}

.bas-bs-cat .bas-bsc__libttl {
	margin: 0;
	font: 900 10px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8578;
}

.bas-bs-cat .bas-bsc__libgroup {
	margin: 14px 0 7px;
	font: 900 9.5px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8578;
}

/* Stacked, the seventeen items read better across the full width than as one
   very long column. Restored to a plain list in the three-column layout.
   🔴 auto-FIT with a max, not auto-FILL with 1fr: below 860 the widest this
   ever gets is four columns, and an item stretched to 400px of empty row is
   what made the stacked state look broken. */
.bas-bs-cat .bas-bsc__libitems {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
	justify-content: start;
	gap: 2px 10px;
}

.bas-bs-cat .bas-bsc__libitem {
	margin: 0;
	padding: 7px 10px;
	border-radius: 8px;
	font: 400 12.5px/1.35 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink-soft);
}

/* ── Pane 2: the editor ─────────────────────────────────────────────────── */

.bas-bsc__editor {
	padding: 20px 20px 26px;
	border-bottom: 1px solid var(--bas-bs-rule);
	min-width: 0;
	/* 🔴 All four steps share ONE cell and take turns. See the reduced-motion
	   rule at the bottom of this block. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.bas-bsc__step {
	grid-area: 1 / 1;
	min-width: 0;
	max-width: 420px;                       /* full-bleed fields look broken stacked */
}

.bas-bs-cat .bas-bsc__steplabel {
	margin: 0;
	font: 900 10px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8578;
}

.bas-bs-cat .bas-bsc__stepttl {
	margin: 8px 0 0;
	font: 700 20px/1.2 'Playfair Display', Georgia, serif;
	color: var(--bas-bs-ink);
}

.bas-bs-cat .bas-bsc__fieldlabel {
	margin: 16px 0 0;
	font: 900 10px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8578;
}

.bas-bs-cat .bas-bsc__field {
	margin: 8px 0 0;
	border: 1px solid #e7e2d2;
	border-radius: 10px;
	padding: 11px 13px;
	font: 400 13.5px/1.35 'Lato', system-ui, sans-serif;
	color: var(--bas-bs-ink);
	background: #fff;
}

/* The focused field. 1.5px, as the mockup draws it. */
.bas-bs-cat .bas-bsc__field--on {
	border: 1.5px solid var(--bas-bs-green-dk);
}

.bas-bs-cat .bas-bsc__fieldnote {
	margin: 7px 0 0;
	font: 400 11.5px/1.5 'Lato', system-ui, sans-serif;
	color: #8a8578;
}

/* 🟠 These are DRAWN buttons inside a picture of a dashboard, not controls —
   spans, no href, no role, nothing focusable. Do not turn them into links. */
.bas-bs-cat .bas-bsc__btns {
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.bas-bsc__btn {
	display: inline-block;
	border-radius: 999px;
	font: 900 11px/1 'Lato', system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bas-bsc__btn--solid {
	padding: 11px 20px;
	background: var(--bas-bs-green);
	color: var(--bas-bs-cream);
	box-shadow: 0 4px 0 rgba(29, 116, 27, .35);
}

.bas-bsc__btn--ghost {
	padding: 11px 18px;
	border: 1.5px solid var(--bas-bs-green-dk);
	color: var(--bas-bs-green-dk);
}

/* ── Pane 3: the preview ────────────────────────────────────────────────── */

.bas-bsc__preview {
	padding: 20px 24px 26px;
	background: #faf6ea;
	min-width: 0;
	/* 🔴 The scale ladder at the bottom measures THIS pane, not the viewport. */
	container-type: inline-size;
	container-name: bascatprev;
}

.bas-bs-cat .bas-bsc__previewhead {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bas-bsc__previewttl {
	font: 900 10px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8578;
}

.bas-bsc__previewnote {
	font: 400 11.5px/1.3 'Lato', system-ui, sans-serif;
	color: #a09a8c;
}

/* 🔴 All four preview steps share ONE cell. See the reduced-motion rule. */
.bas-bsc__pstack {
	margin-top: 11px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.bas-bsc__pstep {
	grid-area: 1 / 1;
	min-width: 0;
}

/* `--bas-bsc-s` lives here so every card in the frame scales together. */
.bas-bsc__pframe {
	--bas-bsc-s: 1;
	border: 1px solid #e7e2d2;
	border-radius: 10px;
	background: #fff;
	padding: 18px;
	display: flex;
	flex-wrap: wrap;                        /* the pairs drop to one-up rather than clip */
	gap: calc(24px * var(--bas-bsc-s));
	align-items: flex-end;
	/* 🔴 Centred, not left-packed. One placard left-aligned in a 900px preview
	   pane is 500px of empty white pretending to be a design. When the step
	   fills the frame this is identical to flex-start, so it costs nothing. */
	justify-content: center;
}

.bas-bsc__pcard {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: calc(var(--bas-bsc-w) * var(--bas-bsc-s));
	max-width: 100%;
}

/* Mockup slot width / mockup stage height / the mockup's own scale factor. */
.bas-bsc__pcard--placard { --bas-bsc-w: 252px; --bas-bsc-h: 330px; --bas-bsc-sc: .90; }
.bas-bsc__pcard--banner  { --bas-bsc-w: 289px; --bas-bsc-h: 200px; --bas-bsc-sc: .60; }
.bas-bsc__pcard--signup  { --bas-bsc-w: 181px; --bas-bsc-h: 200px; --bas-bsc-sc: .60; }
.bas-bsc__pcard--bizcard { --bas-bsc-w: 221px; --bas-bsc-h: 140px; --bas-bsc-sc: .88; }
.bas-bsc__pcard--review  { --bas-bsc-w: 221px; --bas-bsc-h: 140px; --bas-bsc-sc: .88; }
.bas-bsc__pcard--menu    { --bas-bsc-w: 224px; --bas-bsc-h: 218px; --bas-bsc-sc: .86; }
.bas-bsc__pcard--soldout { --bas-bsc-w: 224px; --bas-bsc-h: 218px; --bas-bsc-sc: .86; }

.bas-bsc__pstage {
	position: relative;
	height: calc(var(--bas-bsc-h) * var(--bas-bsc-s));
}

/* Absolute, so its un-scaled box (up to 480px wide) never pushes the layout. */
.bas-bsc__panchor {
	position: absolute;
	left: 0;
	bottom: 0;
}

.bas-bs-cat .bas-bsc__pcap {
	margin: 0;
	font: 400 10.5px/1.4 'Lato', system-ui, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8a8578;
}

.bas-bs-cat .bas-bsc__note {
	margin: 12px 0 0;
	background: var(--bas-bs-cream-2);
	border-left: 4px solid var(--bas-bs-yellow);
	border-radius: 10px;
	padding: 13px 15px;
	font: 400 12.5px/1.6 'Lato', system-ui, sans-serif;
	color: #5a5a52;
}

.bas-bsc__note b {
	font-weight: 700;
	color: var(--bas-bs-ink);
}

/* ── The artboards ──────────────────────────────────────────────────────── */
/* 🔴 EVERY px BELOW IS A MOCKUP px. The factor is what responds, not these. */

.bas-bsc__board {
	position: relative;
	display: flex;
	overflow: hidden;
	transform: scale(calc(var(--bas-bsc-sc) * var(--bas-bsc-s)));
	transform-origin: left bottom;
}

.bas-bsc__b-spacer { flex: 1; }

.bas-bsc__b-rule {
	display: block;
	margin-top: 14px;
	height: 3px;
	background: #2b2320;
}

.bas-bsc__b-kicker {
	display: block;
	font: 700 8px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #9b2340;
}

/* The drawn QR code: a conic checkerboard with three finder eyes. */
.bas-bsc__qr {
	flex: none;
	display: block;
	position: relative;
	background: #ece2d1;
}
.bas-bsc__qrfill {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: repeating-conic-gradient(#2b2320 0% 25%, #ece2d1 0% 50%) 0 0 / var(--bas-bsc-qr-cell) var(--bas-bsc-qr-cell);
}
.bas-bsc__qreye {
	position: absolute;
	width: var(--bas-bsc-qr-eye);
	height: var(--bas-bsc-qr-eye);
	background: #ece2d1;
	border: var(--bas-bsc-qr-b) solid #2b2320;
}
.bas-bsc__qreye--tl { left: 0;  top: 0; }
.bas-bsc__qreye--tr { right: 0; top: 0; }
.bas-bsc__qreye--bl { left: 0;  bottom: 0; }

.bas-bsc__qr--lg { width: 84px; height: 84px; padding: 7px; --bas-bsc-qr-cell: 11px; --bas-bsc-qr-eye: 24px; --bas-bsc-qr-b: 6px; }
.bas-bsc__qr--md { width: 64px; height: 64px; padding: 5px; --bas-bsc-qr-cell:  8px; --bas-bsc-qr-eye: 18px; --bas-bsc-qr-b: 4px; }
.bas-bsc__qr--sm { width: 50px; height: 50px; padding: 4px; --bas-bsc-qr-cell:  7px; --bas-bsc-qr-eye: 14px; --bas-bsc-qr-b: 4px; }

/* The business card is the one dark board, so its code inverts. */
.bas-bsc__qr--inv { width: 46px; height: 46px; padding: 4px; --bas-bsc-qr-cell: 6px; --bas-bsc-qr-eye: 13px; --bas-bsc-qr-b: 3px; background: #2b2320; }
.bas-bsc__qr--inv .bas-bsc__qrfill { background: repeating-conic-gradient(#ece2d1 0% 25%, #2b2320 0% 50%) 0 0 / 6px 6px; }
.bas-bsc__qr--inv .bas-bsc__qreye  { background: #2b2320; border-color: #ece2d1; }

/* Artboard 1 — the compliance placard, 280 × 360. */
.bas-bsc__board--placard {
	width: 280px;
	height: 360px;
	flex-direction: column;
	padding: 24px 22px;
	background: #ece2d1;
	border: 1px solid #ddd3bd;
	box-shadow: 0 10px 26px rgba(20, 30, 10, .14);
}
.bas-bsc__b-state {
	display: block;
	font: 700 8.5px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #9b2340;
}
.bas-bsc__b-statement {
	display: block;
	margin-top: 14px;
	font: 600 17px/1.28 'Playfair Display', Georgia, serif;
	color: #2b2320;
}
.bas-bsc__b-who {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 14px;
}
.bas-bsc__b-whotext { flex: 1; display: block; min-width: 0; }
.bas-bsc__b-name {
	display: block;
	font: 600 15px/1.16 'Playfair Display', Georgia, serif;
	color: #2b2320;
}
.bas-bsc__b-addr {
	display: block;
	margin-top: 7px;
	font: 400 9px/1.6 'Lato', system-ui, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #5a5049;
}
.bas-bsc__b-foot {
	display: block;
	border-top: 1px solid #c3b49c;
	padding-top: 10px;
	font: 700 8.5px/1.5 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #9b2340;
}

/* Artboard 2 — the booth banner, 480 × 320. */
.bas-bsc__board--banner {
	width: 480px;
	height: 320px;
	background: #ece2d1;
	box-shadow: 0 12px 30px rgba(20, 30, 10, .18);
}
.bas-bsc__b-bannertext {
	width: 262px;
	flex: none;
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.bas-bsc__b-est {
	display: block;
	font: 700 9px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #9b2340;
}
.bas-bsc__b-lockup { display: block; }
.bas-bsc__b-wordmark {
	display: block;
	font: 600 42px/1.02 'Playfair Display', Georgia, serif;
	color: #2b2320;
}
.bas-bsc__b-tick {
	display: block;
	margin-top: 12px;
	width: 56px;
	height: 3px;
	background: #9b2340;
}
.bas-bsc__b-list {
	display: block;
	margin-top: 14px;
	font: 400 10px/1.7 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #6d6259;
}
.bas-bsc__b-handle {
	display: block;
	font: 700 9.5px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #9b2340;
}
.bas-bsc__b-bannerphoto {
	flex: 1;
	display: block;
	background-size: cover;
	background-position: center;
	filter: saturate(.95) contrast(1.02);
}

/* Artboard 3 — the email & text signup card, 300 × 200. */
.bas-bsc__board--signup {
	width: 300px;
	height: 200px;
	background: #ece2d1;
	box-shadow: 0 10px 26px rgba(20, 30, 10, .16);
}
.bas-bsc__b-signupphoto {
	width: 96px;
	flex: none;
	display: block;
	background-size: cover;
	background-position: center;
	filter: saturate(.95) brightness(1.03);
}
.bas-bsc__b-signuptext {
	flex: 1;
	min-width: 0;
	padding: 18px;
	display: flex;
	flex-direction: column;
}
.bas-bsc__b-signupttl {
	display: block;
	margin-top: 8px;
	font: 600 21px/1.06 'Playfair Display', Georgia, serif;
	color: #2b2320;
}
.bas-bsc__b-blurb {
	display: block;
	margin-top: 8px;
	font: 400 9.5px/1.5 'Lato', system-ui, sans-serif;
	color: #5a5049;
}
.bas-bsc__b-scan {
	display: flex;
	align-items: center;
	gap: 11px;
}
.bas-bsc__b-scantext {
	font: 400 9px/1.5 'Lato', system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2b2320;
}
.bas-bsc__b-scantext b { font-weight: 700; }

/* Artboard 4 — the business card, 250 × 150. The one dark board. */
.bas-bsc__board--bizcard {
	width: 250px;
	height: 150px;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	background: #2b2320;
	box-shadow: 0 10px 26px rgba(20, 30, 10, .24);
}
.bas-bsc__b-cardname {
	display: block;
	font: 600 20px/1.1 'Playfair Display', Georgia, serif;
	color: #ece2d1;
}
.bas-bsc__b-cardfoot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
}
.bas-bsc__b-carddetail {
	font: 400 8.5px/1.7 'Lato', system-ui, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(236, 226, 209, .72);
}

/* Artboard 5 — the review request card, 250 × 150. */
.bas-bsc__board--review {
	width: 250px;
	height: 150px;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #ece2d1;
	box-shadow: 0 10px 26px rgba(20, 30, 10, .16);
}
.bas-bsc__b-reviewtext { flex: 1; min-width: 0; display: block; }
.bas-bsc__b-reviewttl {
	display: block;
	margin-top: 7px;
	font: 600 19px/1.06 'Playfair Display', Georgia, serif;
	color: #2b2320;
}
.bas-bsc__b-stars {
	display: block;
	margin-top: 8px;
	font: 600 13px/1 'Playfair Display', Georgia, serif;
	letter-spacing: .14em;
	color: #9b2340;
}
.bas-bsc__b-reviewsub {
	display: block;
	margin-top: 7px;
	font: 400 8.5px/1.45 'Lato', system-ui, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #5a5049;
}

/* Artboard 6 — the weekly menu post, 260 × 260. */
.bas-bsc__board--menu {
	width: 260px;
	height: 260px;
	flex-direction: column;
	background: #ece2d1;
	box-shadow: 0 10px 26px rgba(20, 30, 10, .14);
}
.bas-bsc__b-menuband {
	height: 92px;
	flex: none;
	display: block;
	background-size: cover;
	background-position: center;
	filter: saturate(.9);
}
.bas-bsc__b-menubody {
	flex: 1;
	min-height: 0;
	padding: 14px 18px 0;
	display: flex;
	flex-direction: column;
}
.bas-bsc__b-menuttl {
	display: block;
	font: 600 20px/1 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	color: #2b2320;
}
.bas-bsc__board--menu .bas-bsc__b-rule { margin-top: 6px; }
.bas-bsc__b-menulist {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 10px;
}
.bas-bsc__b-menurow {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font: 400 11px/1.3 'Lato', system-ui, sans-serif;
	color: #2b2320;
}
.bas-bsc__b-menufoot {
	display: block;
	margin: 0 -18px;
	background: #9b2340;
	padding: 10px 18px;
	font: 700 8.5px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
}

/* Artboard 7 — the sold-out post, 260 × 260. */
.bas-bsc__board--soldout {
	width: 260px;
	height: 260px;
	background: #cdbfa6;
	box-shadow: 0 10px 26px rgba(20, 30, 10, .14);
}
.bas-bsc__b-soldphoto {
	position: absolute;
	inset: 0;
	display: block;
	background-size: cover;
	background-position: center;
	filter: saturate(.75) brightness(.95);
}
.bas-bsc__b-soldveil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 35, 32, 0) 40%, rgba(43, 35, 32, .8) 100%);
}
.bas-bsc__b-soldstamp {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 78px;
	background: #9b2340;
	padding: 10px 14px;
	font: 600 22px/1 'Playfair Display', Georgia, serif;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .04em;
	color: #fff;
}
.bas-bsc__b-soldfoot {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
}
.bas-bsc__b-soldttl {
	display: block;
	font: 600 16px/1.2 'Playfair Display', Georgia, serif;
	color: #ece2d1;
}
.bas-bsc__b-soldsub {
	display: block;
	margin-top: 8px;
	font: 700 9px/1.3 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(236, 226, 209, .8);
}

/* ── The loop: library, editor and preview all on the same 20s clock ─────── */

/* No shorthand: the name arrives with the modifier, one per quarter. */
.bas-bsc__animnav {
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}
.bas-bsc__animnav--1 { animation-name: bas-bsc-nav1; }
.bas-bsc__animnav--2 { animation-name: bas-bsc-nav2; }
.bas-bsc__animnav--3 { animation-name: bas-bsc-nav3; }
.bas-bsc__animnav--4 { animation-name: bas-bsc-nav4; }

.bas-bsc__animstep {
	animation: bas-bsc-step 20s cubic-bezier(.22, 1, .36, 1) infinite both;
}

.bas-bsc__editor .bas-bsc__animstep--1 { animation-delay: 0s; }
.bas-bsc__editor .bas-bsc__animstep--2 { animation-delay: 5s; }
.bas-bsc__editor .bas-bsc__animstep--3 { animation-delay: 10s; }
.bas-bsc__editor .bas-bsc__animstep--4 { animation-delay: 15s; }

/* The preview lands a beat after the editor, so it reads as a consequence. */
.bas-bsc__pstack .bas-bsc__animstep--1 { animation-delay: .3s; }
.bas-bsc__pstack .bas-bsc__animstep--2 { animation-delay: 5.3s; }
.bas-bsc__pstack .bas-bsc__animstep--3 { animation-delay: 10.3s; }
.bas-bsc__pstack .bas-bsc__animstep--4 { animation-delay: 15.3s; }

/*
 * 🔴 THIS SECTION NEEDS ITS OWN REDUCED-MOTION RULE, on top of the shared one
 * at the top of this file. The shared rule pins every `__anim` element to
 * opacity 1 — correct for the library items, fatal for the two stacks, because
 * four editor steps live in one grid cell and four preview steps in another
 * and would print on top of each other. So un-stack them into flow: a vendor
 * who asked for less motion gets all four assets down the pane, ruled apart,
 * which is arguably the better way to read a catalogue anyway.
 */
@media (prefers-reduced-motion: reduce) {
	.bas-bsc__editor,
	.bas-bsc__pstack { display: block; }

	.bas-bsc__step,
	.bas-bsc__pstep  { display: block; }

	.bas-bsc__step  + .bas-bsc__step,
	.bas-bsc__pstep + .bas-bsc__pstep {
		margin-top: 24px;
		padding-top: 24px;
		border-top: 1px solid var(--bas-bs-rule);
	}
}

/* Phones: the header copy and the window's padding are what has to give. */
@media (max-width: 640px) {
	.bas-bs-cat .bas-bsc__lede { font-size: 16px; }
	.bas-bsc__lib     { padding: 16px 12px 20px; }
	.bas-bsc__editor  { padding: 18px 14px 22px; }
	.bas-bsc__preview { padding: 16px 14px 20px; }
	.bas-bsc__pframe  { padding: 14px; }
}

/*
 * 🔴 THE SCALE LADDER. The widest preview step is the booth banner plus the
 * signup card: 289 + 24 + 181 = 494 mockup px, plus the frame's 36px of
 * padding = 530. Below that the pair no longer fits side by side, and the
 * whole point of that step is that the two share one photo library — so the
 * factor steps down to keep them together rather than letting them wrap.
 * Each rung is 530 × s rounded down: s = 1 needs 530, .96 needs 509, and so
 * on in ~21px steps. Measured on the PREVIEW PANE's content box (its
 * container-name is `bascatprev`), not the viewport, because Amy can drop the
 * module into a narrow Divi column. Browsers with no container queries keep
 * s: 1 and the pair wraps to one-up: bigger than intended, never broken.
 */
/* 🔴 RUNGS ABOVE 1 EXIST BECAUSE THE PANE IS WIDER THAN THE MOCKUP'S NOW. In
   the mockup the preview pane was whatever was left of 1200 — about 664px —
   and the artboards were drawn to fill roughly 40% of it. A full-width Divi
   row hands this pane 900px+, and an artboard frozen at s: 1 just floats in
   it. These rungs hold the mockup's PROPORTION (roughly pane ÷ 664) rather
   than its pixels. 1.4 is the cap: past that the artboard's own type starts
   out-shouting the section heading above it. */
@container bascatprev (min-width: 600px) { .bas-bsc__pframe { --bas-bsc-s: 1.10; } }
@container bascatprev (min-width: 660px) { .bas-bsc__pframe { --bas-bsc-s: 1.20; } }
@container bascatprev (min-width: 730px) { .bas-bsc__pframe { --bas-bsc-s: 1.30; } }
@container bascatprev (min-width: 800px) { .bas-bsc__pframe { --bas-bsc-s: 1.40; } }

@container bascatprev (max-width: 529px) { .bas-bsc__pframe { --bas-bsc-s: .96; } }
@container bascatprev (max-width: 508px) { .bas-bsc__pframe { --bas-bsc-s: .92; } }
@container bascatprev (max-width: 487px) { .bas-bsc__pframe { --bas-bsc-s: .88; } }
@container bascatprev (max-width: 466px) { .bas-bsc__pframe { --bas-bsc-s: .84; } }
@container bascatprev (max-width: 445px) { .bas-bsc__pframe { --bas-bsc-s: .80; } }
@container bascatprev (max-width: 423px) { .bas-bsc__pframe { --bas-bsc-s: .76; } }
@container bascatprev (max-width: 402px) { .bas-bsc__pframe { --bas-bsc-s: .72; } }
@container bascatprev (max-width: 381px) { .bas-bsc__pframe { --bas-bsc-s: .68; } }
@container bascatprev (max-width: 360px) { .bas-bsc__pframe { --bas-bsc-s: .64; } }
@container bascatprev (max-width: 339px) { .bas-bsc__pframe { --bas-bsc-s: .60; } }
@container bascatprev (max-width: 317px) { .bas-bsc__pframe { --bas-bsc-s: .56; } }
@container bascatprev (max-width: 296px) { .bas-bsc__pframe { --bas-bsc-s: .52; } }
@container bascatprev (max-width: 275px) { .bas-bsc__pframe { --bas-bsc-s: .48; } }
@container bascatprev (max-width: 254px) { .bas-bsc__pframe { --bas-bsc-s: .44; } }

/* ═══ 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,
.bas-bs-look,
.bas-bs-prod,
.bas-bs-cat {
	overflow: hidden;
	/* Belt and braces: a stray wide child cannot widen the section itself. */
	max-width: 100%;
}

/* The catalog's preview stage holds artboards drawn at full size and scaled
   down, so its own box is the honest one — clip there too, or a card that is
   momentarily un-scaled during font load flashes past the stage's edge. */
.bas-bsc__pstage { overflow: hidden; }