/**
 * vs-home-menus.css — [vs_home_menus] component (Home dual-row menus + panes).
 * Chrome carried from child patches 04 (dual-row brackets/dividers/underline/icons),
 * 06 (vibe card grid; its 4:5 crop box is removed, see .vs-hm__card-img) and 09 (phone one-line rows) — re-expressed on vs-hm__* classes.
 * Ludwig rule: every selector is a vs- class or a direct-child (>) chain; no broad descendants;
 * no !important (nothing from WPKoi touches this markup).
 * Values reconciled with Debussy's DUALROW-SPEC.md (2026-09-26) — measured live-replay computed styles.
 * Deliberate deviations from the spec are marked "SPEC-DEVIATION" with the reason.
 * Banner r1 (2026-09-26): + the trust strip (.vs-hm__trust*, moved into the component from Elementor
 * container b85d2dd). Nothing else changed: the component still paints no background of its own; it sits on
 * the page field (#050505, P0), which is exactly the colour [vs_home_banner] fades into at its bottom edge.
 * Attribute modifiers (set by the shortcode): .vs-hm--under / .vs-hm--legacy (root), .vs-hm__row--scroll /
 * .vs-hm__row--wrap (phone), .vs-hm__cards--art / .vs-hm__cards--portrait (vibe cards; portrait = alias of art).
 */

/* Component root: vertical stack; 20px = Elementor container gap between the old widgets (spec §3 chain:
   row -> lattice 31.18 incl. lattice margin, lattice -> row 26.39, row 2 -> shop pane 20). */
.vs-hm {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	min-width: 0;
}

/* layout="under": one menu row + its pane stack; pane 20px under its row (same row->pane gap as live). */
.vs-hm__block {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* layout=under (2026-10-04): dept row, shop row, then ONE pane slot, then trust, then lattice.
   Both pane stacks share the cell, so the slot is as tall as the taller stack and a tab swap
   cannot change page height or move the lattice. data-vs-hm-show paints one stack (default shop,
   the vibe cards). Hidden by visibility, not display, so the other stack still sizes the cell.
   .is-active sets visibility:visible, which would shine through a hidden parent, so the hidden
   stack's panes are forced hidden at higher specificity (no !important). */
.vs-hm__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.vs-hm__stage > .vs-hm__panes {
	grid-area: 1 / 1;
}

.vs-hm[data-vs-hm-show="shop"] > .vs-hm__stage > .vs-hm__panes--dept > .vs-hm__pane,
.vs-hm[data-vs-hm-show="dept"] > .vs-hm__stage > .vs-hm__panes--shop > .vs-hm__pane {
	visibility: hidden;
}

/* Menu row (role=tablist) — 04 .vs-dual-row band: near-black plate, bone hairlines top/bottom. */
.vs-hm__row {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.55rem clamp(3%, 4vw, 5%);
	box-sizing: border-box;
	background: rgba(5, 5, 5, 0.92);
	border-top: 1px solid rgba(242, 232, 213, 0.22);
	border-bottom: 1px solid rgba(242, 232, 213, 0.22);
	border-left: 0;
	border-right: 0;
}

/* Shop row — room on the right for the trailing cross (04). */
.vs-hm__row--shop {
	padding-right: clamp(3.2rem, 7vw, 5rem);
}

/* Dept row — room on the right for crown + cross (04). */
.vs-hm__row--dept {
	padding-right: clamp(4.6rem, 9vw, 6.5rem);
}

/* Shared shape of the row ornaments (shop ::after cross, dept ::before crown, dept ::after cross). */
.vs-hm__row--shop::after,
.vs-hm__row--dept::before,
.vs-hm__row--dept::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1rem;
	height: 1.1rem;
	opacity: 0.9;
	pointer-events: none;
}

/* Trailing gothic cross — shop row right rail and dept row far right (04). */
.vs-hm__row--shop::after,
.vs-hm__row--dept::after {
	right: clamp(3%, 4vw, 5%);
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12%202v20M8%206h8M9%2014h6%22%20stroke%3D%22%23F2E8D5%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%221.1%22%20fill%3D%22%239B5CFF%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Crown — dept row, left of the trailing cross (04). */
.vs-hm__row--dept::before {
	right: calc(clamp(3%, 4vw, 5%) + 1.65rem);
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%2016l2-8%204%204%203-6%203%206%204-4%202%208H3z%22%20stroke%3D%22%23F2E8D5%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M4%2018h16%22%20stroke%3D%22%239B5CFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tab button — resets theme <button> plate (jivatma purple fill/border/19px) to 04 bone uppercase type. */
.vs-hm__row > .vs-hm__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin: 0;
	padding: 0.4rem 0.35rem;
	color: #F2E8D5;
	font-family: var(--jivatma--font-buttons, inherit);
	font-size: clamp(11px, 0.95vw, 13px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	box-shadow: none;
	transform: none;
	cursor: pointer;
}

/* Brackets around every title (04 Leo LOCK). Alt text "" keeps ornaments out of the tab's accessible name. */
.vs-hm__row > .vs-hm__tab::before,
.vs-hm__row > .vs-hm__tab::after {
	display: inline-block;
	font-size: 1.15em;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: rgba(155, 92, 255, 0.72);
}

/* Opening bracket (default). */
.vs-hm__row > .vs-hm__tab::before {
	content: "[";
	content: "[" / "";
	margin-right: 0.35em;
}

/* Closing bracket. */
.vs-hm__row > .vs-hm__tab::after {
	content: "]";
	content: "]" / "";
	margin-left: 0.35em;
}

/* Selected tab — brackets go full purple (04). */
.vs-hm__row > .vs-hm__tab[aria-selected="true"]::before,
.vs-hm__row > .vs-hm__tab[aria-selected="true"]::after {
	color: #9B5CFF;
}

/* Shop Vibes — dagger inside the opening bracket (04). */
.vs-hm__row > .vs-hm__tab--shop-vibes::before {
	content: "[ † ";
	content: "[ † " / "";
	letter-spacing: 0.02em;
}

/* Top Sellers — crown glyph inside the opening bracket (04 residual; stays 85% purple when selected, as live). */
.vs-hm__row > .vs-hm__tab--top-sellers::before,
.vs-hm__row > .vs-hm__tab--top-sellers[aria-selected="true"]::before {
	content: "[ ♛ ";
	content: "[ ♛ " / "";
	color: rgba(155, 92, 255, 0.85);
	letter-spacing: 0.02em;
}

/* Dept tabs — dagger inside the opening bracket (04 residual; stays 85% purple when selected, as live). */
.vs-hm__row--dept > .vs-hm__tab::before,
.vs-hm__row--dept > .vs-hm__tab[aria-selected="true"]::before {
	content: "[ † ";
	content: "[ † " / "";
	color: rgba(155, 92, 255, 0.85);
	letter-spacing: 0.02em;
}

/* Save Big — purple flame drawn before the closing bracket (04). */
.vs-hm__row > .vs-hm__tab--save-big {
	padding-right: 1.15rem;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12%203c2%203%201%205-1%207%203%200%206%202%206%206a7%207%200%201%201-14%200c0-3%202-5%204-7-1%202%200%203%201%204%200-4%202-7%204-10z%22%20stroke%3D%22%239B5CFF%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 0.85rem 0.85rem;
	background-position: right 0.85rem center;
}

/* Hover — soft purple type (04). */
.vs-hm__row > .vs-hm__tab:hover {
	color: #B47CFF;
}

/* Selected tab — bone type + purple underline (04 active state, synced to aria-selected). */
.vs-hm__row > .vs-hm__tab[aria-selected="true"],
.vs-hm__row > .vs-hm__tab[aria-selected="true"]:hover {
	color: #F2E8D5;
	border-bottom-color: #9B5CFF;
}

/* Keyboard focus ring on tabs — :focus-visible ONLY (never on load, click or tap; the JS never calls focus() on load). */
.vs-hm__row > .vs-hm__tab:focus-visible {
	outline: 1px dashed #9B5CFF;
	outline-offset: 2px;
}

/* Bone vertical divider between titles (04). */
.vs-hm__row > .vs-hm__divider {
	display: inline-block;
	flex: 0 0 auto;
	align-self: center;
	width: 1px;
	height: 1.05em;
	margin: 0 0.45rem;
	background: rgba(242, 232, 213, 0.42);
}

/* Pane stack: ONE grid cell for all panes of a row -> height = tallest pane (Leo lock: delta 0). */
.vs-hm__panes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: start;
	overflow-anchor: none;
	min-width: 0;
}

/* Every pane sits in the same cell; inactive panes are hidden but still sized (never display:none).
   Padding 1em (=19px) on EVERY pane: WPKoi padded only the active pane, which moved height ±5–14px
   (±104 on phone) — equal padding = delta 0 (spec §4, Ludwig approved).
   SPEC-DEVIATION: ink bone #F2E8D5 instead of inherited WPKoi #333 (captions were near-invisible on black). */
.vs-hm__panes > .vs-hm__pane {
	grid-area: 1 / 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 1em;
	color: #F2E8D5;
	visibility: hidden;
	overflow-anchor: none;
}

/* Active pane only is painted / hit-testable. */
.vs-hm__panes > .vs-hm__pane.is-active {
	visibility: visible;
}

/* Vibe cards row — three equal-width columns (06 grid); card heights follow each art file's natural ratio. */
.vs-hm__pane > .vs-hm__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.35rem);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One vibe card — column stack, centered type, may shrink (06). */
.vs-hm__cards > .vs-hm__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Card art, BOTH card modes — Leo's hard no-crop rule (QA round 2): the image slot is aspect-agnostic.
   width:100% + height:auto lets each file's own ratio set its height (round 3: Chopin's 1200x1500 4:5 exports;
   the PHP emits width/height so the box is reserved before load). No aspect-ratio box, no object-fit,
   no max-height cap, and no clipping ancestor, so 100% of the art incl. the baked-in titles is always shown.
   max-height:none guards against any theme/Elementor img cap. 1.5em under-gap = old <p> image wrapper margin.
   SPEC-NOTE: spec records 06 §3's 4:5 cover box (427x534 @1440); with the 4:5 files the natural sizing gives
   the same equal 4:5 boxes without any crop box. */
.vs-hm__card > .vs-hm__card-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	margin: 0; /* was 0 0 1.5em to clear the h5; the title is hidden (2026-10-04) */
}

/* Card title — theme h5 type, live inline margin (.6rem top). */
.vs-hm__card > .vs-hm__card-title {
	display: none; /* name is painted on the art; the h5 stays in the markup (2026-10-04) */
	margin: 0.6rem 0 0;
	color: inherit;
}

/* Card title followed by a blurb — live inline h5 margin .6rem 0 .35rem. Inactive since round 3 (Damsel blurb
   dropped; no card has a blurb); kept so a future blurb needs no CSS change. */
.vs-hm__card > .vs-hm__card-title:not(:last-child) {
	margin-bottom: 0.35rem;
}

/* Card blurb — live inline <p style="margin:0">. Inactive since round 3 (Damsel blurb dropped). */
.vs-hm__card > .vs-hm__card-blurb {
	margin: 0;
}

/* Pane subhead (Wagner v2 explore/viewmore copy, 2026-10-05). */
.vs-hm__pane > .vs-hm__sub {
	margin: 0 0 0.85rem;
	padding: 0;
	color: #F2E8D5;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: center;
	opacity: 0.92;
}

/* More / Explore link under each pane — live inline centering. */
.vs-hm__pane > .vs-hm__more {
	margin: 1rem 0 0;
	text-align: center;
}

.vs-hm__pane > .vs-hm__more > a {
	color: #9B5CFF;
	text-decoration: none;
}

.vs-hm__pane > .vs-hm__more > a:hover,
.vs-hm__pane > .vs-hm__more > a:focus-visible {
	text-decoration: underline;
}

/* ——— Vibes hub [vs_vibes_hub] (Wagner v2) ——————————————————————————————————————————————— */
.vs-vibes-hub {
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 2.5rem;
	color: #F2E8D5;
	box-sizing: border-box;
}

.vs-vibes-hub__intro {
	margin: 0 0 1.75rem;
	text-align: center;
}

.vs-vibes-hub__title {
	margin: 0 0 0.6rem;
	color: #F2E8D5;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 600;
	line-height: 1.15;
}

.vs-vibes-hub__lede {
	margin: 0 auto;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.5;
	opacity: 0.92;
}

.vs-vibes-hub__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-vibes-hub__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	text-align: center;
}

.vs-vibes-hub__art {
	display: block;
}

.vs-vibes-hub__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
}

.vs-vibes-hub__name {
	margin: 0.85rem 0 0.4rem;
	color: #F2E8D5;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
}

.vs-vibes-hub__blurb {
	margin: 0 0 0.85rem;
	font-size: 0.92rem;
	line-height: 1.45;
	opacity: 0.9;
}

.vs-vibes-hub__cta {
	margin: auto 0 0;
}

.vs-vibes-hub__cta > a {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	color: #F2E8D5;
	background: #9B5CFF;
	border-radius: 2px;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.vs-vibes-hub__cta > a:hover,
.vs-vibes-hub__cta > a:focus-visible {
	filter: brightness(1.08);
}

@media (max-width: 767px) {
	.vs-vibes-hub__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}
}

/* ——— Trust strip (banner r1) ———————————————————————————————————————————————————————————————————
   Recovered look of the old Elementor HTML widget be42f15 (container b85d2dd): B2 type + band
   (000 / B2 "trust denseness") and patch 06 icons (shield / arrows / lock replace the ◆), re-expressed on
   vs-hm__trust* classes. Differences, both locked by Leo/Ludwig: ONE line at every width (old phone rules
   stacked the three items in a column, 116 px tall @390) and "Fair returns" linked, colour inherited.
   Everything inside the strip is sized in em from ONE font-size that follows the strip width (cqi), so the
   line keeps its proportions and can never wrap or overflow; desktop/tablet sizes equal the old
   clamp(12px, 1.05vw, 14px). Placement: directly under the shop pane stack (height-locked), so its Y never
   moves on a tab swap. */

/* Strip band: near-black plate + purple hairlines (B2 values), one centred nonwrapping row; it is the size
   container for the items' font-size. */
.vs-hm > .vs-hm__trust {
	--vs-hm-trust-size: clamp(12px, 1.05vw, 14px);
	--vs-hm-trust-fit: 2.28cqi;
	--vs-hm-trust-pad-y: 1rem;
	container-type: inline-size;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--vs-hm-trust-pad-y) 5%;
	box-sizing: border-box;
	overflow: hidden;
	background: #0a0a0a;
	border-top: 1px solid rgba(155, 92, 255, 0.35);
	border-bottom: 1px solid rgba(155, 92, 255, 0.35);
}

/* One item (marker + words): bone uppercase B2 type. Font-size = the old clamp, capped by the fit value so
   the three items always fit the strip on one line (7px floor only below ~260px-wide phones).
   Gap between items = 2.57em (= old 2.25rem gap at 14px); inside an item marker->word 0.914em (06 margin
   .35rem + B2 gap .45rem at 14px). */
.vs-hm__trust > .vs-hm__trust-item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.914em;
	margin: 0 1.285em;
	color: #F2E8D5;
	font-size: max(7px, min(var(--vs-hm-trust-size), 2.1vw));
	font-size: max(7px, min(var(--vs-hm-trust-size), var(--vs-hm-trust-fit)));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Marker slot (the old ◆ span; aria-hidden). Default trust_mark="icon": the ◆ glyph is made transparent and
   the slot draws patch 06's SVG icon at 1.15rem-equivalent (1.315em at 14px = 18.4px, old strip height 52.4). */
.vs-hm__trust-item > .vs-hm__trust-mark {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.315em;
	height: 1.315em;
	overflow: hidden;
	color: transparent;
	line-height: 1.315em;
	text-align: center;
	letter-spacing: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* Icon 1 — Austin-founded: shield + check (06). */
.vs-hm__trust--icon > .vs-hm__trust-item--founded > .vs-hm__trust-mark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l7 3v6c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6l7-3z' stroke='%239B5CFF' stroke-width='1.7'/%3E%3Cpath d='M9.5 12l2 2 3.5-4' stroke='%23F2E8D5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Icon 2 — Fair returns: two arrows (06 "Easy returns" icon). */
.vs-hm__trust--icon > .vs-hm__trust-item--returns > .vs-hm__trust-mark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7h9a4 4 0 1 1 0 8h-1' stroke='%239B5CFF' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M7 7l3-3M7 7l3 3' stroke='%23F2E8D5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 17H8a4 4 0 1 1 0-8h1' stroke='%239B5CFF' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M17 17l-3 3M17 17l-3-3' stroke='%23F2E8D5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Icon 3 — Secure checkout: lock (06). */
.vs-hm__trust--icon > .vs-hm__trust-item--checkout > .vs-hm__trust-mark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' stroke='%239B5CFF' stroke-width='1.7'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' stroke='%23F2E8D5' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16' r='1.2' fill='%239B5CFF'/%3E%3C/svg%3E");
}

/* trust_mark="diamond": show the purple ◆ glyph itself (old widget's span colour #9B5CFF), no icon. */
.vs-hm__trust--diamond > .vs-hm__trust-item > .vs-hm__trust-mark {
	width: auto;
	color: #9B5CFF;
}

/* "Fair returns" link: same colour/type as its neighbours, never underlined (Leo lock). Scoped class beats the
   theme's a / a:hover (0,1,1) without !important; the ◆ marker is a sibling, outside the link. */
.vs-hm__trust-item > .vs-hm__trust-link,
.vs-hm__trust-item > .vs-hm__trust-link:hover,
.vs-hm__trust-item > .vs-hm__trust-link:focus {
	color: inherit;
	text-decoration: none;
}

/* Hover/focus: no underline even under the WPKoi parent's ".wpkoi-cld-onhover #content a:hover" (1,2,1, has an
   ID): :not(#vs-no-id) adds ID weight without any ID in the markup -> (1,3,0), no !important. */
.vs-hm__trust-item > .vs-hm__trust-link:hover:not(#vs-no-id),
.vs-hm__trust-item > .vs-hm__trust-link:focus:not(#vs-no-id) {
	text-decoration: none;
}

/* Keyboard focus on the link — visible ring only for keyboard users (same style as the tab focus ring). */
.vs-hm__trust-item > .vs-hm__trust-link:focus-visible {
	outline: 1px dashed #9B5CFF;
	outline-offset: 2px;
}

/* Lattice slot — transparent so the page field shows through (04 kept .vs-sword-lattice transparent). */
.vs-hm__lattice,
.vs-hm__lattice > .vs-sword-lattice {
	background: transparent;
}

/* cards="portrait" = ALIAS of cards="art" (round 3): no rule targets .vs-hm__cards--portrait except the phone
   1-col rule below (redundant with the shared one, kept harmless). Its old <=1024 2-col step is deleted, so
   portrait is 3-up at tablet exactly like art and both render identically at every width. */

/* Product panes 3-up at tablet (round 3, Ludwig sign-off condition). SOURCE of the 2-col: WooCommerce core
   woocommerce-smallscreen.css (enqueued media="only screen and (max-width:768px)") sets
   ".woocommerce ul.products[class*=columns-] li.product {width:48%;float:left;clear:both}" plus
   ":nth-child(2n) {float:right;clear:none!important}" — so at exactly 768 the Home panes drop to 2 columns.
   Override ONLY inside the component with a > chain (0,5,2 beats Woo's 0,4,2); values mirror Woo's own desktop
   columns-3 layout (woocommerce-layout.css: 30.75% / 3.8% gutter / 2.992em), i.e. what 769-1024 already shows.
   No !important needed: Woo's only !important is clear:none on even tiles, which matches what we set.
   Tile images are untouched (no object-fit, no aspect box: Woo's img width:100%/height:auto keeps them whole).
   Phones (<=767) keep Woo's 2-col. Range starts at 768 so only the smallscreen step changes; 769-1024 unaffected. */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Product tile: 3 per row, Woo desktop columns-3 width + right gutter, float left, no forced clear. */
	.vs-hm__pane > .vs-pane-products > .woocommerce > ul.products > li.product {
		width: 30.75%;
		float: left;
		clear: none;
		margin: 0 3.8% 2.992em 0;
	}

	/* First tile of each row (Woo adds .first) starts a new row, as Woo desktop li.first. */
	.vs-hm__pane > .vs-pane-products > .woocommerce > ul.products > li.product.first {
		clear: both;
	}

	/* Last tile of each row (Woo adds .last) drops its gutter, as Woo desktop li.last. */
	.vs-hm__pane > .vs-pane-products > .woocommerce > ul.products > li.product.last {
		margin-right: 0;
	}
}

/* Phone (09): tighter band; rows scroll sideways (phone="scroll", default) or wrap (phone="wrap", parked). */
@media (max-width: 767px) {
	/* Row band on phone: 7.2px / 3% padding, both rows (beats the desktop padding-right rules). */
	.vs-hm__row.vs-hm__row--shop,
	.vs-hm__row.vs-hm__row--dept {
		justify-content: flex-start;
		padding: 0.45rem 3%;
	}

	/* phone="scroll": one line, sideways scroll, scrollbar hidden (09, Ludwig default). */
	.vs-hm__row.vs-hm__row--scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	/* phone="scroll": hide the WebKit scrollbar. */
	.vs-hm__row--scroll::-webkit-scrollbar {
		display: none;
	}

	/* phone="wrap" (parked): items wrap onto a second line, nothing hidden off-screen. */
	.vs-hm__row.vs-hm__row--wrap {
		flex-wrap: wrap;
		row-gap: 0.25rem;
		overflow: visible;
	}

	/* Tabs: fixed size, tighter tracking/type (09). */
	.vs-hm__row > .vs-hm__tab {
		flex: 0 0 auto;
		padding: 0.3rem 0.15rem;
		font-size: 0.72rem;
		letter-spacing: 0.04em;
	}

	/* Save Big keeps flame room on phone (04 save-big padding-right outranks 09 in live cascade). */
	.vs-hm__row > .vs-hm__tab--save-big {
		padding-right: 1.15rem;
	}

	/* Ornaments inline in the row flow instead of absolute (09). */
	.vs-hm__row--shop::after,
	.vs-hm__row--dept::before,
	.vs-hm__row--dept::after {
		position: static;
		display: inline-flex;
		flex: 0 0 auto;
		margin-left: 0.35rem;
	}

	/* Vibe cards 2-up on phones (<768 only; Debussy-approved round 3, replaces 06's 1 col; art + portrait alias).
	   4 equal tracks, each card spans 2, so all three cards share ONE width = (row - gap) / 2, i.e. exactly a
	   Woo phone product tile. Gaps copy the Woo phone product grid: column 4% (= 100% - 2 x 48% tiles),
	   row 2.992em (= li.product margin-bottom). Art stays height:auto / uncropped (card-img rule above).
	   1-col fallback: assets/css/vs-home-menus.css.phone-1col (not for upload). */
	.vs-hm__pane > .vs-hm__cards,
	.vs-hm__pane > .vs-hm__cards--portrait {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 4%;
		row-gap: 2.992em;
	}

	/* Each card spans 2 of the 4 tracks (half the row minus half a gap). */
	.vs-hm__cards > .vs-hm__card {
		grid-column: span 2;
	}

	/* Odd last card (Midnight Choir, card 3) takes the middle two tracks: centred on row 2, same width, not stretched. */
	.vs-hm__cards > .vs-hm__card:last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}

	/* Card title: reserve exactly 2 lines on phone (Round 4b) — why: 2-line reserve so row-1 card bottoms align,
	   per Ludwig QA 7:25 PM. At ~152px cards "Nameless Warrior" wraps to 2 lines while "Damsel" stays on 1, so
	   the title boxes were 40 vs 20px. Measured h5 at 390: font-size 20px, computed line-height 20px (theme
	   --jivatma--heading-5-line-height: 1em -> ratio 1.0), so 2 lines = 2em = 40px. The 2em fallback comes first
	   for browsers without the lh unit; 2lh then tracks the real line-height if the theme value ever changes.
	   Phone only (<768): 768+ titles are one line and stay unchanged. Pre-change copy: vs-home-menus.css.pre-label2
	   (not for upload). */
	.vs-hm__cards > .vs-hm__card > .vs-hm__card-title {
		display: none; /* 2-line phone reserve retired with the visible title (2026-10-04) */
	}

	/* Trust strip on phone (banner r1): slimmer band (old phone padding was .85rem 6%, stacked), 2% sides.
	   The row stays ONE line, so the non-text spacing is tightened (next rule) and the fit value re-derived:
	   the row is ~35.3em wide -> 1em = 2.8cqi of the strip (≈9.6px text @390, 12px cap from ~430px up). */
	.vs-hm > .vs-hm__trust {
		--vs-hm-trust-pad-y: 0.75rem;
		--vs-hm-trust-fit: 2.8cqi;
		padding-left: 2%;
		padding-right: 2%;
	}

	/* Phone items: tighter item margins, marker gap and tracking so the three items fit larger on one line. */
	.vs-hm__trust > .vs-hm__trust-item {
		gap: 0.45em;
		margin: 0 0.4em;
		letter-spacing: 0.03em;
	}

	/* Phone marker: slightly smaller icon box (1.2em). */
	.vs-hm__trust-item > .vs-hm__trust-mark {
		width: 1.2em;
		height: 1.2em;
		line-height: 1.2em;
	}
}

/* ——— Trust strip, small phones (banner r1b, 2026-09-26, Ludwig) ———————————————————————————————————
   Below 480 px the one-line fit shrank the text to 9.5px @390 / 8.75px @360. House floor is 11px, so here the
   strip wraps to TWO lines at a fixed 12px: "Austin-founded · Fair returns" on line 1, "Secure checkout" on
   line 2. Each item stays nowrap, so "Fair returns" never splits. 480+ keeps the one-line rules above.
   Pre-change copy: vs-home-menus.css.pre-2line.bak (not for upload). */
@media (max-width: 479.98px) {
	/* Strip band may wrap; small row gap between the two lines. */
	.vs-hm > .vs-hm__trust {
		flex-wrap: wrap;
		row-gap: 0.4rem;
	}

	/* Items: fixed readable 12px (replaces the width-fit size, which fell under 11px). */
	.vs-hm__trust > .vs-hm__trust-item {
		font-size: 12px;
	}

	/* "Secure checkout" is pushed onto its own centred second line, so the split is always 2 + 1
	   (side margins zeroed so the full-width line doesn't overflow the strip). */
	.vs-hm__trust > .vs-hm__trust-item--checkout {
		flex-basis: 100%;
		justify-content: center;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ——— Step8/9 (2026-10-04): layout="under" = shop row + slot, lattice, dept row + slot, trust ———————————
   Each slot wraps ONE row's pane stack (.vs-hm__panes is already one grid cell) so its height is that
   row's tallest pane; a swap cannot change page height or move the lattice. */
.vs-hm--under > .vs-hm__slot {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	overflow-anchor: none;
}

/* Desktop: tab row = the pane's 3-card grid (same columns, same gap, same 1em pane inset) so each
   tab centres over its card. Ornaments dropped -> symmetric row; dividers would take grid cells. */
.vs-hm--under > .vs-hm__row.vs-hm__row--shop,
.vs-hm--under > .vs-hm__row.vs-hm__row--dept {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(0.75rem, 2vw, 1.35rem);
	justify-items: center;
	padding: 0.55rem 1em;
}

.vs-hm--under > .vs-hm__row--shop::after,
.vs-hm--under > .vs-hm__row--dept::before,
.vs-hm--under > .vs-hm__row--dept::after,
.vs-hm--under > .vs-hm__row > .vs-hm__divider {
	display: none;
}

.vs-hm--under > .vs-hm__row > .vs-hm__tab {
	max-width: 100%;
	justify-content: center;
}

/* Phone (<768): 3 tabs spread evenly over the full width; cards one per row at 100% width, art ratio kept.
   Overrides the 2-up / centred-orphan rule above. */
@media (max-width: 767px) {
	.vs-hm--under > .vs-hm__row.vs-hm__row--shop,
	.vs-hm--under > .vs-hm__row.vs-hm__row--dept {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 0.25rem;
		padding: 0.45rem 3%;
		overflow: visible;
	}

	.vs-hm--under > .vs-hm__row > .vs-hm__tab {
		min-width: 0;
		white-space: normal;
		text-align: center;
	}

	.vs-hm--under .vs-hm__pane > .vs-hm__cards,
	.vs-hm--under .vs-hm__pane > .vs-hm__cards--portrait {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.vs-hm--under .vs-hm__cards > .vs-hm__card,
	.vs-hm--under .vs-hm__cards > .vs-hm__card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		width: 100%;
	}

	.vs-hm--under .vs-hm__cards > .vs-hm__card > .vs-hm__card-img {
		width: 100%;
		height: auto;
	}
}

/* ——— Step11 (2026-10-04): lattice swing room. The inline lattice style clips both axes (overflow:hidden,
   max-height 120px), so a blade at ~90deg (128px tall) was cut. Clip sideways only (no page h-scroll),
   let the swing paint above/below, and sit over the neighbouring row plates. Rotation untouched. */
.vs-hm__lattice > .vs-sword-lattice {
	overflow-x: clip;
	overflow-y: visible;
	max-height: none;
	z-index: 1;
}

/* ——— Step15 (2026-10-05) phones: one-line tabs + full-width cards.
   Leo 2026-10-05: keep tab label icons (cross/crown/bolt/flame); end-of-row ornaments stay off (step9). ——— */
@media (max-width: 767px) {
	.vs-hm--under > .vs-hm__row > .vs-hm__tab,
	.vs-hm--under > .vs-hm__row > .vs-hm__tab--save-big {
		white-space: nowrap;
		letter-spacing: 0.02em;
		font-size: 0.7rem;
		justify-self: stretch;
	}
	/* Pane inset = row inset (row padding 3%), so cards match the tab row's inner width. */
	.vs-hm--under > .vs-hm__slot .vs-hm__pane {
		padding-left: 3%;
		padding-right: 3%;
	}
	.vs-hm--under > .vs-hm__slot .vs-hm__pane ul.products {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin-left: 0;
		margin-right: 0;
	}
	.vs-hm--under > .vs-hm__slot .vs-hm__pane ul.products > li.product {
		width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
		clear: none;
	}
}

/* Hide theme page title on Shop Vibes hub (page 1155) — hub shortcode owns the H1 */
body.page-id-1155 h1.wp-block-post-title {
	display: none;
}