/* ==========================================================================
   Area: HOMEPAGE sections (body.yb.home) — pixel pass against lululemon.co.nz/en-nz/home
   Overrides style.css §2, §15f, §15l, §15m, §17. Measured at 1440px (desktop) and 390px (mobile).
   Hero on ≤1024px is owned by mobile.css (loads after this file) — not touched here.
   Sections are WPBakery rows (siblings), one [yb_*] section per row:
     hero2 → What's New grid → tiles → grid (no title) → tiles → UGC → Must Haves grid
   ========================================================================== */

/* wpautop leaves a <br> (17px) between every row */
.yb.home .wpb-content-wrapper > br { display: none; }

/* ---------- Section rhythm (desktop: gaps copied from the reference) ---------- */
.yb.home .yb-sec:has(.yb-grid--home),
.yb.home .yb-sec:has(.yb-tiles),
.yb.home .yb-sec:has(.yb-ugc) { padding: 0; background: transparent; }

.yb.home .yb-sec--hero2 { padding: 0; }
/* hero caption → "What's New": 80px */
.yb.home .yb-sec:has(.yb-grid--home) { padding-top: 40px; }
.yb.home :is(.vc_row:has(.yb-sec--hero2) + .vc_row, .vc_row:has(.yb-sec--hero2) + br + .vc_row) .yb-sec:has(.yb-grid--home) { padding-top: 80px; }
/* grid without a title follows tiles: 48px under the button */
.yb.home .yb-sec:has(.yb-grid--home):not(:has(.yb-head)) { padding-top: 48px; }
/* grid → tiles: 88px */
.yb.home .yb-sec:has(.yb-tiles) { padding-top: 88px; }
/* tiles → "Wear it. Share it.": 72px; mosaic → "Must Haves": 40px */
.yb.home .yb-sec:has(.yb-ugc) { padding-top: 72px; }
/* last grid → newsletter band: 77px on the reference (36px here + ~40px WoodMart content bottom gap) */
.yb.home .vc_row:last-of-type .yb-sec:has(.yb-grid--home) { padding-bottom: 36px; }

/* ---------- Hero (desktop) ---------- */
@media (min-width: 1025px) {
	.yb.home .yb-sec--hero2 .yb-hero2__media { aspect-ratio: 1322 / 692; background: #E9E9E9; }
	.yb.home .yb-hero2__media .yb-hero2__inbtn { right: 24px; bottom: 24px; gap: 12px; }
	.yb.home .yb-hero2__inbtn .yb-btn {
		min-height: 55px;
		padding: 16px;
		border: 1px solid #000;
		border-radius: 4px;
		background: #fff;
		color: #000;
		font-size: 16px;
		font-weight: 600;
		line-height: 20.8px;
		letter-spacing: 1.2px;
		text-transform: uppercase;
	}
	.yb.home .yb-hero2__inbtn .yb-btn:hover { background: #000; color: #fff; }
	.yb.home .yb-sec--hero2 .yb-hero2__copy { padding: 16px 10px 5px 0; margin: 0 0 16px; }
	.yb.home .yb-sec--hero2 .yb-hero2__eyebrow { margin: 0 0 4px; font-size: 16px; font-weight: 400; }
	.yb.home .yb-sec--hero2 .yb-hero2__title { margin: 0; font-size: 36px; font-weight: 400; line-height: 43px; letter-spacing: 0; }
	.yb.home .yb-sec--hero2 .yb-hero2__text { margin: 8px 0 0; font-size: 19px; line-height: 25px; }
}

/* ---------- Section titles ("What's New", "Must Haves") ---------- */
.yb.home .yb-center .yb-head { display: block; margin: 0 0 32px; text-align: center; }
.yb.home .yb-center .yb-head__title { margin: 0; font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: 0; text-align: center; color: #000; }
.yb.home .yb-center .yb-head .yb-link { display: none; }

/* ---------- 8-product grid ---------- */
.yb.home .yb-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 54px 20px; }

/* ---------- Product card (yb-card) ---------- */
.yb.home .yb-card { font-size: 16px; line-height: 1.25; }
.yb.home .yb-card__media { aspect-ratio: 316 / 378; margin: 0; border-radius: 0; background: #F5F5F5; }
.yb.home .yb-card__img { width: 100%; height: 100%; object-fit: cover; }
.yb.home .yb-card__img.yb-ph { background: #F0F0F0; }

/* badge: white, bottom-left inside the image */
.yb.home .yb-card__badge {
	top: auto;
	left: 12px;
	bottom: 12px;
	padding: 2px 8px 0;
	border-radius: 4px;
	background: #fff;
	color: #323232;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	text-transform: none;
	letter-spacing: 0;
}

/* heart: 32px white circle, 10px from the top-right corner */
.yb.home .yb-card__wish { top: 10px; right: 10px; }
.yb.home .yb-card__wish .wd-wishlist-btn,
.yb.home .yb-card__wish .wd-action-btn { margin: 0; }
.yb.home .yb-card__wish .wd-wishlist-icon > a {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	color: #000;
	line-height: 1;
}
.yb.home .yb-card__wish .wd-wishlist-icon > a::before { font-size: 16px; line-height: 1; }
.yb.home .yb-card__wish .wd-wishlist-icon > a > span { display: none; }

/* swatches: 24px circles in a 32px hit box, 11px apart, 12px under the image */
.yb.home .yb-card__dots { display: flex; flex-wrap: wrap; gap: 11px; margin: 12px 0 0; min-height: 32px; align-items: center; }
.yb.home .yb-card__dot {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 4px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 50%;
	box-shadow: 0 0 0 3px transparent, 0 0 0 4px transparent;
	transition: box-shadow .15s ease-in-out;
}
.yb.home .yb-card__dot:hover,
.yb.home .yb-card__dot.is-selected { box-shadow: 0 0 0 3px #F9F9F9, 0 0 0 4px #000; }
.yb.home .yb-card__dots { margin-left: -4px; }
.yb.home .yb-card__dots + .yb-card__title { margin-top: 12px; }

/* name / price */
.yb.home .yb-card__title { margin: 12px 0 0; font-size: 17px; font-weight: 500; line-height: 22px; letter-spacing: 0; }
.yb.home .yb-card__media + .yb-card__title,
.yb.home .yb-card__wish + .yb-card__title { margin-top: 16px; }
.yb.home .yb-card__title a { color: #222; }
.yb.home .yb-card__sub { margin: 2px 0 0; color: #57585B; font-size: 14px; line-height: 18px; }
.yb.home .yb-card__price { margin: 16px 0 0; color: #2C282E; font-size: 17px; font-weight: 400; line-height: 23px; }
.yb.home .yb-card__price del { margin-right: 6px; color: #57585B; }
.yb.home .yb-card__price ins { color: #D31334; background: none; }

/* Quick Shop: bag icon + text with a grey 1px underline (4px below) */
.yb.home .yb-card__quick {
	display: inline-flex;
	align-items: flex-end;
	gap: 7px;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #000;
	font-size: 17px;
	font-weight: 400;
	line-height: 19px;
	text-align: left;
	text-transform: capitalize;
	text-decoration: none;
	box-shadow: none;
	min-height: 0;
	letter-spacing: 0;
}
/* underline sits under the text only (not the icon) */
.yb.home .yb-card__quick {
	background-image: linear-gradient(#8D9196, #8D9196);
	background-repeat: no-repeat;
	background-size: calc(100% - 23px) 1px;
	background-position: right bottom;
	padding-bottom: 5px;
}
.yb.home .yb-card__quick:hover { background-color: transparent; background-image: linear-gradient(#D31334, #D31334); color: #000; }
.yb.home .yb-card__quick::before {
	content: "";
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-bottom: 3px;
	background: #000;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.2' d='M2.6 4.6h10.8l-.8 10.8H3.4zM5.4 4.6V3.4a2.6 2.6 0 015.2 0v1.2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.2' d='M2.6 4.6h10.8l-.8 10.8H3.4zM5.4 4.6V3.4a2.6 2.6 0 015.2 0v1.2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.yb.home .yb-card__quick::after { content: none; }

/* ---------- Two tall tiles ---------- */
.yb.home .yb-tiles { grid-template-columns: 1fr 1fr; gap: 20px; }
.yb.home .yb-tile { color: #000; }
.yb.home .yb-tile__media { aspect-ratio: 651 / 772 !important; margin: 0; border-radius: 0; background: #EDEDED; }
.yb.home .yb-tile__title { margin: 10px 0 0; font-size: 30px !important; font-weight: 600; line-height: 36px; letter-spacing: 0; color: #000; }
.yb.home .yb-tile__text { max-width: none; margin: 14px 0 0; color: #000; font-size: 19px; line-height: 25px; }
.yb.home .yb-tile .yb-btn--outline,
.yb.home .yb-tile .yb-link {
	display: inline-block;
	min-height: 55px;
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid #000;
	border-radius: 4px;
	background: #fff;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	line-height: 20.8px;
	letter-spacing: 1.2px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
.yb.home .yb-tile:hover .yb-btn--outline,
.yb.home .yb-tile:hover .yb-link { background: #000; border-color: #000; color: #fff; }

/* ---------- "Wear it. Share it." mosaic ---------- */
.yb.home .yb-ugc__head { margin: 0; text-align: center; }
.yb.home .yb-ugc__head h2 { margin: 0 0 8px; font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: 0; color: #000; }
.yb.home .yb-ugc__head p { margin: 0; padding: 8px 0 24px; font-size: 19px; line-height: 24px; color: #000; }
.yb.home .yb-ugc__head p a { color: #000; text-decoration: none; }

/* 6 × 156px columns, 8px gaps = 976px. Pattern (reference): big | 2 small over 1 big | big,
   then 2 small under each outer big. */
.yb.home .yb-wrap:has(> .yb-ugc) { container-type: inline-size; }
.yb.home .yb-ugc {
	--cell: calc((min(976px, 100cqw) - 40px) / 6);
	display: grid;
	grid-template-columns: repeat(6, var(--cell));
	grid-auto-rows: var(--cell);
	gap: 8px;
	justify-content: center;
	max-width: 976px;
	margin: 0 auto;
}
.yb.home .yb-ugc a { display: block; background: #E9E9E9; }
.yb.home .yb-ugc a:nth-child(n) { display: block; grid-column: auto; grid-row: auto; }
.yb.home .yb-ugc a:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.yb.home .yb-ugc a:nth-child(2) { grid-column: 3; grid-row: 1; }
.yb.home .yb-ugc a:nth-child(3) { grid-column: 4; grid-row: 1; }
.yb.home .yb-ugc a:nth-child(4) { grid-column: 5 / span 2; grid-row: 1 / span 2; }
.yb.home .yb-ugc a:nth-child(5) { grid-column: 3 / span 2; grid-row: 2 / span 2; }
.yb.home .yb-ugc a:nth-child(6) { grid-column: 1; grid-row: 3; }
.yb.home .yb-ugc a:nth-child(7) { grid-column: 2; grid-row: 3; }
.yb.home .yb-ugc a:nth-child(8) { grid-column: 5 / span 2; grid-row: 3; }
.yb.home .yb-ugc a:nth-child(n+9) { display: none; }
.yb.home .yb-ugc img { width: 100%; height: 100%; object-fit: cover; }

.yb.home .yb-ugc__badge {
	gap: 10px;
	min-width: 66px;
	height: 48px;
	padding: 0 16px;
	background: #fff;
	color: #000;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
}
.yb.home .yb-ugc__badge svg { width: 18px; height: 18px; stroke: #000; stroke-width: 1.4; }
.yb.home .yb-ugc__cta { font-size: 14px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }

/* ---------- Tablet (768–1024) ---------- */
@media (max-width: 1024px) {
	.yb.home .yb-center .yb-head__title,
	.yb.home .yb-ugc__head h2 { font-size: 34px; line-height: 40px; }
	.yb.home .yb-grid--home { gap: 40px 16px; }
	.yb.home .yb-tile__title { font-size: 26px !important; line-height: 32px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.yb.home .yb-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.yb.home .yb-tiles { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------- Mobile (≤767) ---------- */
@media (max-width: 767px) {
	.yb.home .yb-sec:has(.yb-grid--home) .yb-wrap,
	.yb.home .yb-sec:has(.yb-tiles) .yb-wrap,
	.yb.home .yb-sec:has(.yb-ugc) .yb-wrap { padding-left: 10px; padding-right: 10px; }

	/* rhythm */
	.yb.home .yb-sec:has(.yb-grid--home) { padding-top: 40px; }
	.yb.home :is(.vc_row:has(.yb-sec--hero2) + .vc_row, .vc_row:has(.yb-sec--hero2) + br + .vc_row) .yb-sec:has(.yb-grid--home) { padding-top: 64px; }
	.yb.home .yb-sec:has(.yb-grid--home):not(:has(.yb-head)) { padding-top: 40px; }
	.yb.home .yb-sec:has(.yb-tiles) { padding-top: 56px; }
	.yb.home .yb-sec:has(.yb-ugc) { padding-top: 56px; }
	.yb.home .vc_row:last-of-type .yb-sec:has(.yb-grid--home) { padding-bottom: 16px; }

	/* titles: 30px/600 */
	.yb.home .yb-center .yb-head { margin-bottom: 16px; }
	.yb.home .yb-center .yb-head__title,
	.yb.home .yb-ugc__head h2 { font-size: 30px; line-height: 32px; }

	/* grid: 2 columns, 20px / 32px */
	.yb.home .yb-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }

	/* card */
	.yb.home .yb-card__badge { left: 10px; bottom: 10px; font-size: 14px; }
	.yb.home .yb-card__wish { top: 8px; right: 8px; }
	.yb.home .yb-card__dots { gap: 6px; margin-top: 8px; }
	.yb.home .yb-card__dot { width: 22px; height: 22px; margin: 4px; }
	.yb.home .yb-card__dot:nth-child(n+5) { display: none; }
	.yb.home .yb-card__title { font-size: 17px; line-height: 22px; }
	.yb.home .yb-card__price { margin-top: 12px; font-size: 17px; }
	.yb.home .yb-card__quick { font-size: 16px; }

	/* tiles: stacked, full-width button */
	.yb.home .yb-tiles { grid-template-columns: 1fr; gap: 40px; }
	.yb.home .yb-tile__media { aspect-ratio: 351 / 351 !important; }
	.yb.home .yb-tile__title { margin-top: 12px; font-size: 28px !important; line-height: 34px; }
	.yb.home .yb-tile__text { margin-top: 12px; font-size: 17px; line-height: 27px; }
	.yb.home .yb-tile .yb-btn--outline,
	.yb.home .yb-tile .yb-link { display: block; width: 100%; margin-top: 20px; }

	/* mosaic: same pattern, scrolls sideways; cells = half the screen */
	.yb.home .yb-ugc__head { padding: 0 10px; }
	.yb.home .yb-ugc__head p { font-size: 17px; line-height: 26px; padding: 8px 0 20px; }
	.yb.home .yb-ugc {
		--cell: calc((100vw - 28px) / 2);
		max-width: none;
		margin: 0 -10px;
		padding: 0 10px;
		justify-content: start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 10px;
		scrollbar-width: none;
	}
	.yb.home .yb-ugc::-webkit-scrollbar { display: none; }
	.yb.home .yb-ugc a { scroll-snap-align: start; }
	.yb.home .yb-ugc a:nth-child(1),
	.yb.home .yb-ugc a:nth-child(5),
	.yb.home .yb-ugc a:nth-child(4) { grid-row: 1 / span 2; }
	.yb.home .yb-ugc a:nth-child(5) { grid-row: 2 / span 2; }
	.yb.home .yb-ugc__badge { height: 40px; min-width: 56px; padding: 0 12px; gap: 8px; }
	.yb.home .yb-ugc__cta { display: none; }
}