/*
 * Shared base for the landing-page variants (variants/<key>/): fonts, reset, mobile/desktop
 * switches and the interactive pieces the claude.ai/design exports draw with inline styles
 * (buttons, scroll rows, FAQ, sticky bar, video modal). Loaded only on variant screens.
 */

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/InstrumentSerif-normal-400.woff2) format("woff2");
}

@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/InstrumentSerif-italic-400.woff2) format("woff2");
}

@font-face {
	font-family: "Sofia Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(fonts/SofiaSans-normal-300_800.woff2) format("woff2");
}

/* The export's page reset. */
html:has(body.sap-lp-page) { scroll-behavior: smooth; }
body.sap-lp-page {
	margin: 0;
	background: #fff;
	color: #1a1a1a;
	font-family: "Sofia Sans", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body.sap-lp-page .wp-site-blocks { padding: 0; }
/* Brand values the shared pages (variants/_shared/pages/) draw with; a variant may redefine them. */
.sap-lp {
	--lp-brand: #223b35;
	--lp-accent: #4c8686;
	--lp-ink: #1a1a1a;
	--lp-muted: #3d4a47;
	--lp-line: #e4e6e3;
	--lp-soft: #f5f5f3;
	--lp-link: #007ea7;
	--lp-serif: "Instrument Serif", serif;
}
.sap-lp, .sap-lp *, .sap-lp *::before, .sap-lp *::after { box-sizing: border-box; }
.sap-lp a { color: #007ea7; }
.sap-lp a:hover { color: #223b35; }
.sap-lp button { font-family: inherit; }
.sap-lp img { max-width: none; }
.sap-lp [data-row] { scrollbar-width: none; }
.sap-lp [data-row]::-webkit-scrollbar { display: none; }

/* Mobile-only / desktop-only blocks: the design switches at 1024 px. !important beats the inline display. */
@media (max-width: 1023.98px) { .sap-lp .lp-d { display: none !important; } }
@media (min-width: 1024px) { .sap-lp .lp-m { display: none !important; } }

/* Buttons drawn as links (add to cart). */
.sap-lp a.lp-btn, .sap-lp a.lp-btn-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}
.sap-lp a.lp-btn, .sap-lp a.lp-btn:hover, .sap-lp a.lp-btn:visited { color: #fff; }
.sap-lp a.lp-btn:hover { background: #16282a !important; }
.sap-lp a.lp-btn-ghost, .sap-lp a.lp-btn-ghost:hover, .sap-lp a.lp-btn-ghost:visited { color: #223b35; }
.sap-lp a.lp-btn-ghost:hover { background: #f5f5f3 !important; }
.sap-lp a.lp-btn:active, .sap-lp a.lp-btn-ghost:active, .sap-lp .lp-press:active { transform: scale(.97); }

/* Header buttons and the menu panel (parts/header.php). */
.sap-lp .lp-hbtn { transition: background-color .15s ease; }
.sap-lp .lp-hbtn:hover { background: #f5f5f3 !important; }
.sap-lp [data-menu] .lp-ico-close,
.sap-lp [data-menu][aria-expanded="true"] .lp-ico-open { display: none; }
.sap-lp [data-menu][aria-expanded="true"] .lp-ico-close { display: block; }
@media (max-width: 479.98px) { .sap-lp .lp-hide-phone { display: none; } }
.sap-lp .lp-menu__grid { display: grid; column-gap: 56px; }
.sap-lp .lp-menu__links { display: grid; margin: 0; padding: 0; list-style: none; }
.sap-lp .lp-menu__links a { transition: color .15s ease; }
.sap-lp .lp-menu__links a:hover,
.sap-lp .lp-menu__links a[aria-current="page"] { color: #4c8686 !important; }
@media (min-width: 1024px) {
	.sap-lp .lp-menu__grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
	.sap-lp .lp-menu__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* Row arrows (desktop, and under the row on phones); dimmed at either end of the row. */
.sap-lp .lp-arrow { transition: background-color .15s ease, opacity .15s ease; }
.sap-lp .lp-arrow:hover:not(:disabled) { background: #fff9e6 !important; }
.sap-lp .lp-arrow:disabled { opacity: .35; cursor: default !important; }

/* Reel and video covers. */
.sap-lp .lp-lift { transition: transform .15s ease; }
.sap-lp .lp-lift:hover { transform: translateY(-2px); }

/* FAQ: <details> styled as the design's rows; one open at a time (lp.js). */
.sap-lp details.lp-faq > summary { list-style: none; }
.sap-lp details.lp-faq > summary::-webkit-details-marker { display: none; }
.sap-lp details.lp-faq .lp-ico-minus { display: none; }
.sap-lp details.lp-faq[open] .lp-ico-minus { display: block; }
.sap-lp details.lp-faq[open] .lp-ico-plus { display: none; }
.sap-lp details.lp-formula > summary { list-style: none; }
.sap-lp details.lp-formula > summary::-webkit-details-marker { display: none; }

/* Sticky buy bar (mobile, after the first screen). */
.sap-lp .lp-sticky {
	transform: translateY(110%);
	transition: transform .2s ease;
}
.sap-lp .lp-sticky.is-on { transform: none; }
@media (min-width: 1024px) { .sap-lp .lp-sticky { display: none !important; } }

/* Gallery dots: a pill for the current photo. */
.sap-lp .lp-dot { display: block; width: 8px; height: 8px; border-radius: 999px; background: #c9cfcc; transition: width .2s ease, background-color .2s ease; }
.sap-lp .is-on > .lp-dot { width: 22px; background: #223b35; }

/* Pack chips: a darker border on hover. */
.sap-lp .lp-chip:hover { border-color: #223b35 !important; }

/* Video modal (lp.js builds it on click; YouTube or Instagram embed). */
.lp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(15, 24, 22, .86);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.lp-modal__box {
	position: relative;
	width: 100%;
	max-width: min(92vw, 520px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lp-modal__box--wide { max-width: min(92vw, 960px); }
.lp-modal__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	color: #223b35;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.lp-modal__frame {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
}
.lp-modal__frame iframe { display: block; width: 100%; border: 0; }
.lp-modal__frame--16x9 iframe { aspect-ratio: 16 / 9; }
.lp-modal__frame--reel iframe { height: min(78vh, 760px); background: #fff; }

/* The admin bar pushes the sticky header down for logged-in users. */
body.admin-bar .sap-lp .lp-header { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .sap-lp .lp-header { top: 46px !important; } }