/**
 * BAS Vendor Showcase — the step-by-step walkthrough (BAS_VS_Walkthrough).
 *
 * Shared by Brand Studio — Catalog and the Label Walkthrough (2.11.0). A
 * section passes copy and pictures; every rule for the tab row, the panels,
 * the browser window, the phone frame and the loop lives here, once.
 *
 * 🔴 THE LOOP IS CSS. Panels share one grid cell and take turns. 4 steps run
 *    30s (7.5s each), 6 steps run 42s (7s each). Delays are NEGATIVE (slot
 *    start minus the cycle) — a positive delay parks a tab on its 0% keyframe,
 *    which is the LIT state, so every tab lit up until its turn came round.
 *    bas-brand-studio.js adds `.bas-walk--manual` on the first click; the loop
 *    stops for good and `.is-active` picks the panel.
 *
 * 🔴 PHONES (≤760px) AND REDUCED MOTION: no loop, no tabs, steps in flow.
 *
 * 🟠 Colours are the BAS brand tokens, declared on .bas-walk itself so the
 *    component works inside any section, Brand Studio or not.
 *
 * @package BAS_Vendor_Showcase
 * @since   2.11.0
 */

.bas-walk {
	--bas-walk-cream:    #fffbef;
	--bas-walk-cream-2:  #fff6de;
	--bas-walk-ink:      #313131;
	--bas-walk-ink-soft: #4a4a4a;
	--bas-walk-rule:     #ece7d7;
	--bas-walk-rule-2:   #ded8c6;
	--bas-walk-green:    #70ac43;
	--bas-walk-green-dk: #1d741b;
	--bas-walk-orange:   #ff4c25;
	--bas-walk-yellow:   #ffda3d;
	--bas-walk-panel:    #ffffff;
	--bas-walk-edge:     #d9d2be;
	--bas-walk-cast:     0 22px 48px rgba(20, 30, 10, .20), 0 2px 6px rgba(20, 30, 10, .07);

	container-type: inline-size;
	container-name: baswalk;
	margin-top: clamp(26px, 3.4vw, 40px);
	color: var(--bas-walk-ink);
	font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bas-walk *, .bas-walk *::before, .bas-walk *::after { box-sizing: border-box; }

/* ── The tab row ── */
.bas-walk__tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: clamp(20px, 2.6vw, 30px);
}
.bas-walk .bas-walk__tab {
	appearance: none;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 12px 14px 10px;
	text-align: left;
	border: 1px solid var(--bas-walk-edge);
	border-radius: 12px;
	background: var(--bas-walk-panel);
	color: var(--bas-walk-ink);
	font: 700 15px/1.25 'Lato', system-ui, sans-serif;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.bas-walk .bas-walk__tab:hover { border-color: var(--bas-walk-green); }
.bas-walk .bas-walk__tab:focus-visible { outline: 3px solid var(--bas-walk-green-dk); outline-offset: 2px; }
.bas-walk__tabnum {
	width: 26px; height: 26px;
	border-radius: 999px;
	display: grid; place-items: center;
	background: var(--bas-walk-cream-2);
	color: var(--bas-walk-green-dk);
	font: 900 13px/1 'Lato', system-ui, sans-serif;
}
.bas-walk__tabbar {
	grid-column: 1 / -1;
	height: 3px;
	border-radius: 3px;
	background: var(--bas-walk-rule);
	overflow: hidden;
}
.bas-walk__tabfill {
	display: block;
	height: 100%;
	background: var(--bas-walk-green);
	transform-origin: left center;
	transform: scaleX(0);
}

/* ── The stack: every panel in one cell ── */
.bas-walk__stack { display: grid; }
.bas-walk__panel {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, clamp(280px, 30%, 400px)) minmax(0, 1fr);
	gap: clamp(24px, 3.6vw, 56px);
	align-items: center;
	min-width: 0;
}
.bas-walk__panel--wide { grid-template-columns: minmax(0, clamp(240px, 24%, 330px)) minmax(0, 1fr); }

/* ── The copy column ── */
.bas-walk .bas-walk__eyebrow {
	margin: 0;
	font: 900 12px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bas-walk-orange);
}
.bas-walk .bas-walk__title {
	margin: 12px 0 0;
	padding: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.15;
	color: var(--bas-walk-ink);
	text-wrap: balance;
}
.bas-walk .bas-walk__body {
	margin: 14px 0 0;
	padding: 0;
	font: 400 16.5px/1.6 'Lato', system-ui, sans-serif;
	color: var(--bas-walk-ink-soft);
	text-wrap: pretty;
}
.bas-walk .bas-walk__facts {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bas-walk .bas-walk__facts li {
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--bas-walk-cream-2);
	border: 1px solid var(--bas-walk-rule-2);
	font: 700 13px/1.3 'Lato', system-ui, sans-serif;
	color: var(--bas-walk-green-dk);
}

/* ── A real screen in a browser window ── */
.bas-walk__show { min-width: 0; }
.bas-walk__device {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--bas-walk-edge);
	background: var(--bas-walk-panel);
	box-shadow: var(--bas-walk-cast);
}
.bas-walk__chrome {
	height: 34px;
	background: #f2eee1;
	border-bottom: 1px solid #e7e2d2;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 13px;
}
.bas-walk__dot { width: 9px; height: 9px; flex: none; border-radius: 999px; }
.bas-walk__dot--red    { background: #ff7660; }
.bas-walk__dot--yellow { background: var(--bas-walk-yellow); }
.bas-walk__dot--green  { background: var(--bas-walk-green); }
.bas-walk__url {
	margin-left: 12px;
	flex: 1 1 auto;
	min-width: 0;
	height: 19px;
	border-radius: 999px;
	background: var(--bas-walk-panel);
	border: 1px solid var(--bas-walk-edge);
	padding: 0 10px;
	font: 400 10px/17px 'Lato', system-ui, sans-serif;
	color: #79746a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bas-walk__shot { display: block; aspect-ratio: var(--bas-walk-desk, 1400 / 950); background: var(--bas-walk-cream); }
.bas-walk__shot img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
}

/* ── A finished piece on a white board (a label, a sign) ── */
.bas-walk__board {
	display: block;
	padding: clamp(8px, 1vw, 14px);
	border-radius: 12px;
	background: var(--bas-walk-panel);
	border: 1px solid var(--bas-walk-edge);
	box-shadow: var(--bas-walk-cast);
}
.bas-walk__board img { display: block; width: 100%; height: auto; max-width: none; border-radius: 3px; }

/* ── The loop (desktop only) ── */
@media (min-width: 761px) {
	.bas-walk__panel.bas-walk__anim { opacity: 0; visibility: hidden; }
	.bas-walk--4 .bas-walk__panel.bas-walk__anim { animation: bas-walk-panel-4 30.0s linear infinite both; }
	.bas-walk--4 .bas-walk__tab.bas-walk__anim   { animation: bas-walk-tab-4 30.0s linear infinite both; }
	.bas-walk--4 .bas-walk__tabfill.bas-walk__anim { animation: bas-walk-fill-4 30.0s linear infinite both; }
	.bas-walk--4 .bas-walk__anim.bas-walk__anim--2 { animation-delay: -22.5s; }
	.bas-walk--4 .bas-walk__anim.bas-walk__anim--3 { animation-delay: -15s; }
	.bas-walk--4 .bas-walk__anim.bas-walk__anim--4 { animation-delay: -7.5s; }
	/* 2.13.0 — five steps (the Label Walkthrough lost its "Save it" step): 35s, 7s each. */
	.bas-walk--5 .bas-walk__panel.bas-walk__anim { animation: bas-walk-panel-5 35s linear infinite both; }
	.bas-walk--5 .bas-walk__tab.bas-walk__anim   { animation: bas-walk-tab-5 35s linear infinite both; }
	.bas-walk--5 .bas-walk__tabfill.bas-walk__anim { animation: bas-walk-fill-5 35s linear infinite both; }
	.bas-walk--5 .bas-walk__anim.bas-walk__anim--2 { animation-delay: -28s; }
	.bas-walk--5 .bas-walk__anim.bas-walk__anim--3 { animation-delay: -21s; }
	.bas-walk--5 .bas-walk__anim.bas-walk__anim--4 { animation-delay: -14s; }
	.bas-walk--5 .bas-walk__anim.bas-walk__anim--5 { animation-delay: -7s; }
	.bas-walk--6 .bas-walk__panel.bas-walk__anim { animation: bas-walk-panel-6 42s linear infinite both; }
	.bas-walk--6 .bas-walk__tab.bas-walk__anim   { animation: bas-walk-tab-6 42s linear infinite both; }
	.bas-walk--6 .bas-walk__tabfill.bas-walk__anim { animation: bas-walk-fill-6 42s linear infinite both; }
	.bas-walk--6 .bas-walk__anim.bas-walk__anim--2 { animation-delay: -35s; }
	.bas-walk--6 .bas-walk__anim.bas-walk__anim--3 { animation-delay: -28s; }
	.bas-walk--6 .bas-walk__anim.bas-walk__anim--4 { animation-delay: -21s; }
	.bas-walk--6 .bas-walk__anim.bas-walk__anim--5 { animation-delay: -14s; }
	.bas-walk--6 .bas-walk__anim.bas-walk__anim--6 { animation-delay: -7s; }

	/* 🔴 2.12.1 — the delay rules MUST out-rank the `animation` shorthand above.
	   They were `.bas-walk--6 .bas-walk__anim--2` (0,2,0) against the shorthand's
	   `.bas-walk--6 .bas-walk__panel.bas-walk__anim` (0,3,0); the shorthand resets
	   animation-delay to 0 and won, so every panel ran at once — all six steps on
	   top of each other, every tab filling together, then all blank for the rest
	   of the cycle (Amy, on staging). Two classes + the variant = (0,3,0), later
	   in the file, wins. */
	/* Manual mode: the visitor picked a step. Loop off, one panel on. */
	.bas-walk--manual .bas-walk__anim { animation: none !important; }
	.bas-walk--manual .bas-walk__panel { opacity: 0; visibility: hidden; }
	.bas-walk--manual .bas-walk__panel.is-active { opacity: 1; visibility: visible; }
	.bas-walk--manual .bas-walk__tab[aria-pressed="true"] { border-color: var(--bas-walk-green-dk); background: var(--bas-walk-cream-2); }
	.bas-walk--manual .bas-walk__tab[aria-pressed="true"] .bas-walk__tabfill { transform: scaleX(1); }
	.bas-walk--manual .bas-walk__tab[aria-pressed="true"] .bas-walk__tabnum { background: var(--bas-walk-green-dk); color: #fff; }
}

/* 🔴 visibility rides with opacity so a hidden panel is out of reach of a
   click or a screen reader, not just invisible. */
@keyframes bas-walk-panel-4 {
	0%       { opacity: 0; visibility: visible; }
	1.2%     { opacity: 1; visibility: visible; }
	24.00%   { opacity: 1; visibility: visible; }
	25.30%   { opacity: 0; visibility: hidden; }
	100%     { opacity: 0; visibility: hidden; }
}
@keyframes bas-walk-tab-4 {
	0%, 25.00%      { border-color: var(--bas-walk-green-dk); background-color: var(--bas-walk-cream-2); }
	25.10%, 100% { border-color: var(--bas-walk-edge); background-color: var(--bas-walk-panel); }
}
@keyframes bas-walk-fill-4 {
	0%          { transform: scaleX(0); }
	25.00%      { transform: scaleX(1); }
	25.10%, 100% { transform: scaleX(0); }
}
@keyframes bas-walk-panel-5 {
	0%       { opacity: 0; visibility: visible; }
	1.2%     { opacity: 1; visibility: visible; }
	19.00%   { opacity: 1; visibility: visible; }
	20.30%   { opacity: 0; visibility: hidden; }
	100%     { opacity: 0; visibility: hidden; }
}
@keyframes bas-walk-tab-5 {
	0%, 20.00%      { border-color: var(--bas-walk-green-dk); background-color: var(--bas-walk-cream-2); }
	20.10%, 100% { border-color: var(--bas-walk-edge); background-color: var(--bas-walk-panel); }
}
@keyframes bas-walk-fill-5 {
	0%          { transform: scaleX(0); }
	20.00%      { transform: scaleX(1); }
	20.10%, 100% { transform: scaleX(0); }
}
@keyframes bas-walk-panel-6 {
	0%       { opacity: 0; visibility: visible; }
	1.2%     { opacity: 1; visibility: visible; }
	15.67%   { opacity: 1; visibility: visible; }
	16.97%   { opacity: 0; visibility: hidden; }
	100%     { opacity: 0; visibility: hidden; }
}
@keyframes bas-walk-tab-6 {
	0%, 16.67%      { border-color: var(--bas-walk-green-dk); background-color: var(--bas-walk-cream-2); }
	16.77%, 100% { border-color: var(--bas-walk-edge); background-color: var(--bas-walk-panel); }
}
@keyframes bas-walk-fill-6 {
	0%          { transform: scaleX(0); }
	16.67%      { transform: scaleX(1); }
	16.77%, 100% { transform: scaleX(0); }
}

/* ── A narrow column folds each step to words-above-picture first ── */
@container baswalk (max-width: 980px) {
	.bas-walk__panel,
	.bas-walk__panel--wide { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
	.bas-walk__copy { max-width: 640px; }
}

/* ── Phones and no-loop: steps in flow ── */
@media (max-width: 760px) {
	.bas-walk__tabs { display: none; }
	.bas-walk__stack { gap: 56px; }
	.bas-walk__panel { grid-area: auto; }

	/* The phone capture, in a phone. */
	.bas-walk__device:not(.bas-walk__device--nophone) {
		max-width: 300px;
		margin: 0 auto;
		border-radius: 34px;
		border: 8px solid #2b2b2b;
		box-shadow: 0 22px 44px rgba(20, 30, 10, .22);
	}
	.bas-walk__device:not(.bas-walk__device--nophone) .bas-walk__chrome { display: none; }
	.bas-walk__device:not(.bas-walk__device--nophone) .bas-walk__shot { aspect-ratio: var(--bas-walk-phone, 1 / 2); }
	.bas-walk .bas-walk__body { font-size: 16px; }
}
.bas-walk--flow .bas-walk__tabs { display: none; }
.bas-walk--flow .bas-walk__stack { gap: 56px; }
.bas-walk--flow .bas-walk__panel { grid-area: auto; }

@media (prefers-reduced-motion: reduce) {
	.bas-walk .bas-walk__tabs { display: none; }
	.bas-walk .bas-walk__stack { gap: 56px; }
	.bas-walk .bas-walk__panel { grid-area: auto; animation: none !important; opacity: 1 !important; visibility: visible !important; }
}

/* ── Show one thing on a computer and another on a phone ── */
.bas-walk__phone-only { display: none; }
@media (max-width: 760px) {
	.bas-walk__desk-only  { display: none; }
	.bas-walk__phone-only { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LABEL WALKTHROUGH SECTION (2.11.0) — module bas/label-walkthrough, .bas-blw
 * The walkthrough inside it is the component above; this is only the
 * section's own header, Bea and the closing plan line.
 * ═══════════════════════════════════════════════════════════════════════════ */

.bas-blw {
	position: relative;
	overflow: hidden;                       /* clips Bea's wing; nothing slides sideways */
	max-width: 100%;
	padding: clamp(48px, 6.5vw, 80px) 0 clamp(52px, 7vw, 86px);
	background: #fffbef;
	color: #313131;
	font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* 2.12.0 — Label Shortcuts (bas/label-shortcuts) reuses this whole section on
   a white ground, so the two label sections read as two when they sit one
   after the other on the free label maker page. */
.bas-blw.bas-blw--mix { background: #ffffff; }
.bas-blw *, .bas-blw *::before, .bas-blw *::after { box-sizing: border-box; }
.bas-blw__inner {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 64px);
	padding-right: clamp(20px, 4vw, 64px);
}

.bas-blw__head {
	display: grid;
	grid-template-columns: minmax(0, 760px) auto;
	justify-content: space-between;
	align-items: end;
	gap: 24px;
}
.bas-blw .bas-blw__eyebrow {
	margin: 0;
	font: 900 12px/1.35 'Lato', system-ui, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #ff4c25;
}
.bas-blw .bas-blw__headline {
	margin: 16px 0 0;
	padding: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(28px, 4.4vw, 46px);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: #313131;
	text-wrap: balance;
}
.bas-blw__headline i { font-style: italic; color: #1d741b; }
.bas-blw .bas-blw__lede {
	margin: 16px 0 0;
	padding: 0;
	font: 400 17px/1.62 'Lato', system-ui, sans-serif;
	color: #4a4a4a;
	text-wrap: pretty;
}
.bas-blw__bea {
	width: clamp(96px, 11vw, 150px);
	height: auto;
	max-width: none;
	filter: drop-shadow(0 10px 18px rgba(20, 30, 10, .18));
	pointer-events: none;
	user-select: none;
}

.bas-blw__label { margin: 0; }
.bas-blw .bas-blw__label figcaption {
	margin: 8px 2px 0;
	font: 400 12.5px/1.35 'Lato', system-ui, sans-serif;
	color: #6b6e60;
}
.bas-blw .bas-blw__label figcaption b { color: #313131; }

.bas-blw .bas-blw__note {
	margin: clamp(30px, 4vw, 48px) 0 0;
	padding: 16px 20px;
	border-radius: 12px;
	background: #fff6de;
	border: 1px solid #ded8c6;
	font: 400 15.5px/1.6 'Lato', system-ui, sans-serif;
	color: #4a4a4a;
}
.bas-blw .bas-blw__note b { color: #1d741b; }

@media (max-width: 640px) {
	.bas-blw__head { grid-template-columns: minmax(0, 1fr); }
	.bas-blw__bea { display: none; }
}

/* Step 6: the finished label lifts off the screen, readable. */
.bas-blw__lift { position: relative; padding-bottom: 6%; }
.bas-blw__pop {
	position: absolute;
	right: -1%;
	bottom: 0;
	width: 44%;
	transform: rotate(2.5deg);
	box-shadow: 0 26px 50px rgba(20, 30, 10, .28), 0 3px 8px rgba(20, 30, 10, .1);
}

/* 2.14.0 — "Choose your style": one bake in four house styles, side by side. */
.bas-blw__styles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 22px);
}
.bas-blw__style { margin: 0; min-width: 0; }
.bas-blw .bas-blw__style figcaption {
	margin-top: 8px;
	font: 400 13px/1.4 'Lato', system-ui, sans-serif;
	color: #6a655a;
}
.bas-blw .bas-blw__style figcaption b { color: #313131; }
@media (max-width: 760px) {
	.bas-blw__styles { gap: 12px; }
}