/* 19-home-lattice-gap-atc — Home [vs_home_menus] only (2026-10-05, Leo/Ludwig lock). Child theme, no !important.
   Loads BEFORE vs-home-menus.css (patches enqueue at prio 20, component at 25), so every rule here wins on
   specificity, not order. Money path (shop / PDP / cart / checkout) untouched: all selectors sit under .vs-hm.
   1) Lattice: 14 blades in one row (markup + sizes in vs_hm_lattice_html inline style). The legacy phone rule
      ".vs-sword-lattice__blade:nth-child(n+7){display:none}" still lives in 000-wp-custom-css-CLEAN and in WP
      Additional CSS (0,2,0); re-show blades 7-14 here at (0,3,0).
   2) Shop pane -> lattice: tighter but never flush.
   3) Home pane ATC: under-image "Add to cart" text button becomes a small wheeled-cart glyph on the image's top-right corner.
      Hover-reveal on fine pointers, always on for touch / phones. Added -> check mark (JS sets SR labels).
   4) Under-card name + tagline (text from assets/vibes/{slug}/text.txt). */

/* ——— 1) Lattice ——— */
.vs-hm__lattice .vs-sword-lattice__blade:nth-child(n+7) {
	display: block;
}

/* ——— 2) Gaps ——— */
/* Root column gap is 20px; pull the lattice up so pane -> lattice air is ~8px + the lattice's own .3rem. */
.vs-hm.vs-hm--under > .vs-hm__slot--shop + .vs-hm__lattice {
	margin-top: -12px;
}

/* Product panes: Woo's li margin-bottom 2.992em + ul margin 1em were the dead band under the old ATC row. */
.vs-hm .vs-hm__pane > .vs-pane-products > .woocommerce > ul.products {
	margin-bottom: 0;
}
.vs-hm .vs-hm__pane > .vs-pane-products > .woocommerce > ul.products > li.product {
	margin-bottom: 0;
}
.vs-hm .vs-hm__pane > .vs-hm__more {
	margin-top: 0.75rem;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	/* Phones stack products one per row: keep air between stacked tiles, none after the last. */
	.vs-hm .vs-hm__pane > .vs-pane-products > .woocommerce > ul.products {
		row-gap: 1.5rem;
	}
	/* Woo's clearfix ::before/::after become empty grid rows in the phone grid; drop them so row-gap
	   doesn't add a phantom band under the last tile. */
	.vs-hm .vs-hm__pane > .vs-pane-products > .woocommerce > ul.products::before,
	.vs-hm .vs-hm__pane > .vs-pane-products > .woocommerce > ul.products::after {
		display: none;
	}
}

/* ——— 3) Home pane ATC wheeled-cart glyph ——— */
.vs-hm .vs-pane-products ul.products > li.product {
	position: relative;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.25rem;
	height: 2.25rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(232, 220, 200, 0.35);
	border-radius: 0;
	background: rgba(10, 10, 10, 0.82);
	box-shadow: none;
	color: #F2E8D5;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	text-indent: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button::before {
	content: "";
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: 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%20aria-hidden%3D%22true%22%3E%0A%20%20%3Cpath%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20d%3D%22M4%205.5h1.6l1.55%209.2h9.9l1.4-6.4H7.1%22/%3E%0A%20%20%3Ccircle%20cx%3D%229.2%22%20cy%3D%2217.6%22%20r%3D%221.15%22%20fill%3D%22currentColor%22/%3E%0A%20%20%3Ccircle%20cx%3D%2215.3%22%20cy%3D%2217.6%22%20r%3D%221.15%22%20fill%3D%22currentColor%22/%3E%0A%3C/svg%3E%0A") center / contain no-repeat;
	mask: 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%20aria-hidden%3D%22true%22%3E%0A%20%20%3Cpath%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20d%3D%22M4%205.5h1.6l1.55%209.2h9.9l1.4-6.4H7.1%22/%3E%0A%20%20%3Ccircle%20cx%3D%229.2%22%20cy%3D%2217.6%22%20r%3D%221.15%22%20fill%3D%22currentColor%22/%3E%0A%20%20%3Ccircle%20cx%3D%2215.3%22%20cy%3D%2217.6%22%20r%3D%221.15%22%20fill%3D%22currentColor%22/%3E%0A%3C/svg%3E%0A") center / contain no-repeat;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button::after {
	display: none;
	content: none;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button:hover,
.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button:focus-visible {
	background: rgba(155, 92, 255, 0.9);
	border-color: #9B5CFF;
	color: #fff;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button:focus-visible {
	outline: 1px dashed #9B5CFF;
	outline-offset: 2px;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button.loading {
	opacity: 0.6;
}

.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button.added::before {
	width: auto;
	height: auto;
	background: none;
	-webkit-mask: none;
	mask: none;
	content: "\2713";
	font-size: 1.05rem;
	line-height: 1;
}

/* Woo appends a "View cart" text link after an AJAX add; no under-image text on Home panes. */
.vs-hm .vs-pane-products ul.products > li.product > a.added_to_cart {
	display: none;
}

/* Fine pointer (desktop): hidden until the tile is hovered or the + has focus; stays once added. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button {
		opacity: 0;
	}
	.vs-hm .vs-pane-products ul.products > li.product:hover > a.button.add_to_cart_button,
	.vs-hm .vs-pane-products ul.products > li.product:focus-within > a.button.add_to_cart_button,
	.vs-hm .vs-pane-products ul.products > li.product > a.button.add_to_cart_button.added {
		opacity: 1;
	}
}

/* ——— 4) Under-card name + tagline (Shop Vibes pane) ——— */
.vs-hm .vs-hm__cards > .vs-hm__card > .vs-hm__card-title {
	display: block;
	margin: 0.6rem 0 0;
	color: #F2E8D5;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.25;
	letter-spacing: 0.04em;
}

.vs-hm .vs-hm__cards > .vs-hm__card > .vs-hm__card-tagline {
	margin: 0.2rem 0 0;
	padding: 0;
	color: rgba(242, 232, 213, 0.72);
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.4;
}