/**
 * Lost Naturals — isolated homepage section tweaks.
 *
 * Change 1: Heritage / "Not Sourced. Cultivated." left image inset (desktop only).
 * Change 2: Featured Collections + Watch and Buy spacing only.
 *
 * Loaded after ln-frontend.css on the homepage only.
 */

/* --------------------------------------------------------------------------
   CHANGE 1 — Heritage left image aligns with promo banner above (desktop only)
   Promo banner content starts at var(--ln-sbc-inset-x) from the page edge.
   Tablet (<=1024px) and mobile are excluded via min-width: 1025px.
   The image is absolute-positioned (inset: 0) in ln-frontend.css, so we offset
   its left edge rather than relying on container padding alone.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	body.home .heritage-section .heritage-right,
	body.page-id-18287 .heritage-section .heritage-right {
		box-sizing: border-box;
	}

	body.home .heritage-section .heritage-right .heritage-product-img,
	body.home .heritage-right img.heritage-product-img,
	body.page-id-18287 .heritage-section .heritage-right .heritage-product-img,
	body.page-id-18287 .heritage-right img.heritage-product-img {
		left: var(--ln-sbc-inset-x, 48px) !important;
		width: calc(100% - var(--ln-sbc-inset-x, 48px)) !important;
		max-width: calc(100% - var(--ln-sbc-inset-x, 48px)) !important;
		object-fit: contain !important;
		object-position: left center !important;
	}
}

/* --------------------------------------------------------------------------
   CHANGE 2A — FEATURED COLLECTIONS: slightly less space BELOW the heading
   Typography / margin-top / section position untouched.
   -------------------------------------------------------------------------- */
body.home .lost-featured-collections__title,
body.page-id-18287 .lost-featured-collections__title {
	margin-bottom: 18px;
}

@media (min-width: 768px) {
	body.home .lost-featured-collections__title,
	body.page-id-18287 .lost-featured-collections__title {
		margin-bottom: 22px;
	}
}

@media (min-width: 1025px) {
	body.home .lost-featured-collections__title,
	body.page-id-18287 .lost-featured-collections__title {
		margin-bottom: 24px;
	}
}

/* --------------------------------------------------------------------------
   CHANGE 2B — WATCH AND BUY: reduce space ABOVE the heading
   CHANGE 2C — WATCH AND BUY: increase space BELOW video cards (before specs)
   Uses section padding only — no heading font/size/content changes.
   Inline default: padding 25px 0 64px. Theme had overridden bottom to 38px.
   -------------------------------------------------------------------------- */
body.home .ln-wb-section,
body.page-id-18287 .ln-wb-section {
	padding-top: 12px !important;
	padding-bottom: 52px !important;
}

body.home .elementor-element-a9ee4bb,
body.page-id-18287 .elementor-element-a9ee4bb {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

@media (min-width: 768px) {
	body.home .ln-wb-section,
	body.page-id-18287 .ln-wb-section {
		padding-top: 8px !important;
		padding-bottom: 64px !important;
	}
}

@media (min-width: 1025px) {
	body.home .ln-wb-section,
	body.page-id-18287 .ln-wb-section {
		padding-top: 0 !important;
		padding-bottom: 88px !important;
	}

	/* Trim leftover gap from Featured Collections bottom into Watch and Buy. */
	body.home .lost-featured-collections,
	body.page-id-18287 .lost-featured-collections {
		margin-bottom: 12px !important;
		padding-bottom: 12px !important;
	}
}

/* Heritage heading accent: Gift / Remember use Add to Cart brown. */
body.home .heritage-title em,
body.page-id-18287 .heritage-title em {
	color: #7e4129 !important;
}

/* Gifting eyebrow — slightly larger on all viewports. */
body.home .heritage-section .eyebrow-text,
body.page-id-18287 .heritage-section .eyebrow-text {
	font-size: 13px !important;
}

@media (min-width: 1025px) {
	body.home .heritage-section .eyebrow-text,
	body.page-id-18287 .heritage-section .eyebrow-text {
		font-size: 14px !important;
	}
}

/* Gifting CTA — text size only. */
body.home a.heritage-btn,
body.home .heritage-btn,
body.page-id-18287 a.heritage-btn,
body.page-id-18287 .heritage-btn {
	font-size: 13px !important;
}

/* ==========================================================================
   Watch and Buy — OPENED VIDEO MODAL ONLY
   Fixes: remove like/share (29/46), modern prev/next, visible brown ATC,
   always show 20% off badge. Carousel cards / homepage elsewhere untouched.
   ========================================================================== */

/* Kill like / share chrome entirely (markup removed by JS as well). */
body.home .ln-wb-modal-side,
body.page-id-18287 .ln-wb-modal-side,
body.home .ln-wb-side-btn,
body.page-id-18287 .ln-wb-side-btn,
body.home .ln-wb-side-label,
body.page-id-18287 .ln-wb-side-label {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
}

/* Backdrop — safe inset so ATC never hits viewport/browser UI edges. */
body.home .ln-wb-modal-bg,
body.page-id-18287 .ln-wb-modal-bg {
	align-items: center !important;
	justify-content: center !important;
	padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px)) !important;
	box-sizing: border-box !important;
}

/* Modal shell — column layout so product + ATC stay in view. */
body.home .ln-wb-modal-box,
body.page-id-18287 .ln-wb-modal-box {
	display: flex !important;
	flex-direction: column !important;
	width: min(380px, calc(100vw - 24px)) !important;
	max-width: calc(100vw - 24px) !important;
	max-height: min(96dvh, calc(100vh - 28px)) !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border-radius: 14px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

/* Video stays primary; shrinks if needed so footer (product + ATC) fits. */
body.home .ln-wb-modal-vid,
body.page-id-18287 .ln-wb-modal-vid {
	position: relative !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	aspect-ratio: 9 / 16 !important;
	max-height: calc(96dvh - 168px) !important;
	background: #000 !important;
	overflow: hidden !important;
}

body.home .ln-wb-modal-vid video,
body.page-id-18287 .ln-wb-modal-vid video,
body.home #lnWbModalVideo,
body.page-id-18287 #lnWbModalVideo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	background: #000 !important;
}

/* Close — keep subtle, out of the way. */
body.home .ln-wb-modal-close,
body.page-id-18287 .ln-wb-modal-close {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 12 !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	border: none !important;
	background: rgba(0, 0, 0, 0.45) !important;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Prev / Next — minimal brown arrows, vertically centred on the VIDEO only. */
body.home .ln-wb-modal-prev,
body.home .ln-wb-modal-next,
body.page-id-18287 .ln-wb-modal-prev,
body.page-id-18287 .ln-wb-modal-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 12 !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #7e4129 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-shadow: none !important;
	transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
}

body.home .ln-wb-modal-prev svg,
body.home .ln-wb-modal-next svg,
body.page-id-18287 .ln-wb-modal-prev svg,
body.page-id-18287 .ln-wb-modal-next svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	pointer-events: none !important;
	filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55));
}

body.home .ln-wb-modal-prev,
body.page-id-18287 .ln-wb-modal-prev {
	left: 6px !important;
	right: auto !important;
}

body.home .ln-wb-modal-next,
body.page-id-18287 .ln-wb-modal-next {
	right: 6px !important;
	left: auto !important;
}

@media (hover: hover) and (pointer: fine) {
	body.home .ln-wb-modal-prev:hover,
	body.home .ln-wb-modal-next:hover,
	body.page-id-18287 .ln-wb-modal-prev:hover,
	body.page-id-18287 .ln-wb-modal-next:hover {
		background: rgba(126, 65, 41, 0.1) !important;
		color: #4d2c22 !important;
	}
}

body.home .ln-wb-modal-prev:active,
body.home .ln-wb-modal-next:active,
body.home .ln-wb-modal-prev.is-pressed,
body.home .ln-wb-modal-next.is-pressed,
body.page-id-18287 .ln-wb-modal-prev:active,
body.page-id-18287 .ln-wb-modal-next:active,
body.page-id-18287 .ln-wb-modal-prev.is-pressed,
body.page-id-18287 .ln-wb-modal-next.is-pressed {
	background: rgba(0, 0, 0, 0.28) !important;
	color: #7e4129 !important;
	transform: translateY(-50%) scale(0.96) !important;
}

/* Product strip under video. */
body.home .ln-wb-modal-product,
body.page-id-18287 .ln-wb-modal-product {
	flex: 0 0 auto !important;
	background: #ffffff !important;
	padding: 12px 14px 6px !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Pricing row — breathable gap before the discount badge (cards + modal). */
body.home .ln-wb-prod-pricing,
body.page-id-18287 .ln-wb-prod-pricing,
body.home .ln-wb-modal-pricing,
body.page-id-18287 .ln-wb-modal-pricing {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px 12px !important;
}

body.home .ln-wb-prod-badge,
body.page-id-18287 .ln-wb-prod-badge,
body.home .ln-wb-section [data-prod-badge],
body.page-id-18287 .ln-wb-section [data-prod-badge],
body.home .ln-wb-modal-badge,
body.page-id-18287 .ln-wb-modal-badge,
body.home #lnWbMBadge,
body.page-id-18287 #lnWbMBadge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-left: 4px !important;
	background: #7e4129 !important;
	color: #ffffff !important;
	font-family: "ABCRepro-Regular", "ABC_Repro", Kanit, sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	letter-spacing: 0.04em !important;
	line-height: 1 !important;
	text-transform: none !important;
	/* Squarish tag — equal space above/below "20% OFF" */
	padding: 8px 8px !important;
	min-height: 28px !important;
	border-radius: 4px !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

/* Add to Cart — always fully visible, brand brown, never black / clipped. */
body.home .ln-wb-modal-box > .ln-wb-add-cart,
body.page-id-18287 .ln-wb-modal-box > .ln-wb-add-cart,
body.home #lnWbMBtn,
body.page-id-18287 #lnWbMBtn {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 5 !important;
	width: calc(100% - 28px) !important;
	max-width: calc(100% - 28px) !important;
	min-height: 48px !important;
	height: auto !important;
	margin: 8px 14px max(14px, env(safe-area-inset-bottom, 0px)) !important;
	padding: 14px 16px !important;
	box-sizing: border-box !important;
	border: none !important;
	border-radius: 4px !important;
	background: #7e4129 !important;
	background-color: #7e4129 !important;
	color: #ffffff !important;
	font-family: "ABCRepro-Regular", "ABC_Repro", Kanit, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	overflow: visible !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}

@media (hover: hover) and (pointer: fine) {
	body.home .ln-wb-modal-box > .ln-wb-add-cart:hover,
	body.page-id-18287 .ln-wb-modal-box > .ln-wb-add-cart:hover,
	body.home #lnWbMBtn:hover,
	body.page-id-18287 #lnWbMBtn:hover {
		background: #4d2c22 !important;
		background-color: #4d2c22 !important;
		color: #ffffff !important;
	}
}

/* Mobile / touch — slightly tighter video max so ATC + product always fit. */
@media (max-width: 767px) {
	body.home .ln-wb-modal-bg,
	body.page-id-18287 .ln-wb-modal-bg {
		padding: max(8px, env(safe-area-inset-top, 0px)) 10px max(14px, env(safe-area-inset-bottom, 0px)) !important;
	}

	body.home .ln-wb-modal-box,
	body.page-id-18287 .ln-wb-modal-box {
		width: min(360px, calc(100vw - 20px)) !important;
		max-height: min(94dvh, calc(100vh - 20px)) !important;
	}

	body.home .ln-wb-modal-vid,
	body.page-id-18287 .ln-wb-modal-vid {
		max-height: calc(94dvh - 180px) !important;
	}

	body.home .ln-wb-modal-prev,
	body.home .ln-wb-modal-next,
	body.page-id-18287 .ln-wb-modal-prev,
	body.page-id-18287 .ln-wb-modal-next {
		width: 40px !important;
		height: 40px !important;
		font-size: 0 !important;
	}

	body.home .ln-wb-modal-prev svg,
	body.home .ln-wb-modal-next svg,
	body.page-id-18287 .ln-wb-modal-prev svg,
	body.page-id-18287 .ln-wb-modal-next svg {
		width: 20px !important;
		height: 20px !important;
	}

	body.home .ln-wb-modal-box > .ln-wb-add-cart,
	body.page-id-18287 .ln-wb-modal-box > .ln-wb-add-cart,
	body.home #lnWbMBtn,
	body.page-id-18287 #lnWbMBtn {
		min-height: 46px !important;
		margin-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
	}
}

@media (max-height: 720px) {
	body.home .ln-wb-modal-vid,
	body.page-id-18287 .ln-wb-modal-vid {
		aspect-ratio: auto !important;
		height: auto !important;
		max-height: calc(100dvh - 190px) !important;
		min-height: 220px !important;
	}
}