/* NOVOS Skin Longevity landing page: patterns/lovable-page-novos-skin-longevity.php.
   Loaded only on /novos-skin-longevity/, after assets/css/lovable.css. */

/* ---------- NOVOS Skin Longevity: patterns/lovable-page-novos-skin-longevity.php ---------- */

/* Text sizes come from the design-system layer (.nv-lp-lead / -text /
   -small / -note / -card-title) and the theme h1/h2/h3; rules here are
   layout, surfaces and the purchase cards' controls. */

/* Hero: the photo slot fills the band; the copy clears the fixed header
   through .nv-lp-hero. */

.nv-nsl__hero { position: relative; display: flex; align-items: center; min-height: 560px; overflow: hidden; }

.nv-nsl__hero .nv-lp-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; align-items: flex-end; justify-content: flex-end; padding: 0; border: none; border-radius: 0; }

.nv-nsl__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

.nv-nsl__hero .nv-lp-imgslot span { max-width: 22ch; margin: var(--wp--preset--spacing--20); }

.nv-nsl__hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--nv-ink) 82%, transparent) 0%, color-mix(in srgb, var(--nv-ink) 45%, transparent) 55%, color-mix(in srgb, var(--nv-ink) 15%, transparent) 100%); }

.nv-nsl__hero-inner { position: relative; width: 100%; box-sizing: border-box; }

.nv-nsl__hero-title { max-width: 17ch; margin: 0; text-shadow: 0 10px 44px color-mix(in srgb, var(--nv-ink) 70%, transparent); }

.nv-nsl__hero-sub { max-width: 30ch; margin-top: var(--wp--preset--spacing--30); }

.nv-lp-band--ink .nv-nsl__hero-sub { color: color-mix(in srgb, var(--nv-white) 92%, transparent); }

/* Product lineup: three independent purchase cards. Three columns from
   980px, each card on a shared row grid (subgrid) so the photos and the
   option blocks line up whatever the description length. Below 980px each
   card runs full width; between 620px and 980px it lays out side by side
   (photo left, options right) so the stack stays short and no card sits
   alone on a row. */

.nv-nsl__products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--60); }

.nv-nsl__product-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }

.nv-nsl__product-head { text-align: center; }

.nv-nsl__product-desc { margin-top: var(--wp--preset--spacing--10); }

.nv-nsl__product-media { position: relative; width: 100%; aspect-ratio: 1 / 1.1; margin-top: var(--wp--preset--spacing--20); overflow: hidden; border-radius: var(--nv-radius-lg); }

.nv-nsl__product-media .nv-lp-imgslot { width: 100%; height: 100%; border-radius: inherit; }

.nv-nsl__product-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nv-nsl__product-badge { position: absolute; right: var(--wp--preset--spacing--20); bottom: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border-radius: var(--nv-radius-pill); background: var(--nv-white); font-size: var(--nv-fs-mono); font-weight: 600; color: var(--nv-ink); }

/* The CTA sits on the options block's bottom edge, so the three buttons
   line up whether or not a card has a flavor row. */

.nv-nsl__product-options { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); }

.nv-nsl__product-options .nv-btn { width: 100%; margin-top: auto; }

.nv-nsl__field-label { margin: 0 0 var(--wp--preset--spacing--10); font-family: var(--nv-mono); font-size: var(--nv-fs-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-ink); }

.nv-nsl__flavor-row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); }

.nv-nsl__flavor-pill { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border: 1.5px solid var(--nv-ink-20); border-radius: var(--nv-radius-pill); background: var(--nv-white); font-family: var(--nv-sans); font-size: var(--nv-fs-mono); font-weight: 600; color: var(--nv-ink); cursor: pointer; transition: border-color var(--nv-dur) var(--nv-ease), background var(--nv-dur) var(--nv-ease); }

.nv-nsl__plan-list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }

.nv-nsl__plan-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--wp--preset--spacing--10); align-items: center; width: 100%; padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); border: 1.5px solid var(--nv-ink-20); border-radius: var(--nv-radius-sm); background: var(--nv-white); font-family: var(--nv-sans); text-align: left; cursor: pointer; transition: border-color var(--nv-dur) var(--nv-ease), background var(--nv-dur) var(--nv-ease); }

.nv-nsl__flavor-pill:hover,
.nv-nsl__plan-row:hover { border-color: var(--nv-ink-40); }

.nv-nsl__flavor-pill.is-active,
.nv-nsl__plan-row.is-active { border-color: var(--nv-orange); background: color-mix(in srgb, var(--nv-orange) 6%, var(--nv-white)); }

.nv-nsl__flavor-pill:focus-visible,
.nv-nsl__plan-row:focus-visible,
.nv-nsl__ing-tab:focus-visible { outline: 2px solid var(--nv-orange-soft); outline-offset: 2px; }

.nv-nsl__plan-price-col { display: flex; flex-direction: column; }

.nv-nsl__plan-price { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--nv-ink); }

.nv-nsl__plan-oldprice { font-size: var(--nv-fs-mono); color: var(--nv-ink-60); text-decoration: line-through; }

.nv-nsl__plan-cadence-col { font-size: var(--nv-fs-mono); text-align: center; color: var(--nv-ink); }

.nv-nsl__plan-cadence { display: block; font-weight: 600; }

.nv-nsl__plan-units { display: block; color: var(--nv-ink-80); }

.nv-nsl__plan-save-col { font-size: var(--nv-fs-mono); text-align: right; color: var(--nv-ink); }

.nv-nsl__plan-save { display: block; font-weight: 600; }

.nv-nsl__plan-perunit { display: block; color: var(--nv-ink-80); }

@media (max-width: 979px) {
	.nv-nsl__products-grid { grid-template-columns: minmax(0, 1fr); }

	.nv-nsl__product-card { grid-row: auto; grid-template-rows: none; }
}

@media (min-width: 620px) and (max-width: 979px) {
	.nv-nsl__product-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--wp--preset--spacing--40); }

	.nv-nsl__product-head { grid-column: 1 / -1; margin-bottom: var(--wp--preset--spacing--10); text-align: left; }

	.nv-nsl__product-options { padding-top: var(--wp--preset--spacing--20); }
}

/* Ingredients */

.nv-nsl__ing-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: start; }

.nv-nsl__ing-tabs { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }

.nv-nsl__ing-tab { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); border: 1.5px solid var(--nv-ink-20); border-radius: var(--nv-radius-pill); background: transparent; font-family: var(--nv-sans); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-align: left; color: var(--nv-ink); cursor: pointer; transition: border-color var(--nv-dur) var(--nv-ease), background var(--nv-dur) var(--nv-ease), color var(--nv-dur) var(--nv-ease); }

.nv-nsl__ing-tab:hover { border-color: var(--nv-ink-40); background: var(--nv-ink-05); }

.nv-nsl__ing-tab.is-active { border-color: var(--nv-ink); background: var(--nv-ink); color: var(--nv-white); }

.nv-nsl__ing-panels { padding: var(--wp--preset--spacing--40); border-radius: var(--nv-radius-lg); background: var(--nv-beige); }

.nv-nsl__ing-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); align-items: center; }

.nv-nsl__ing-panel h3 { margin: 0; }

.nv-nsl__ing-amount { margin-top: var(--wp--preset--spacing--10); }

.nv-nsl__ing-how { margin-top: var(--wp--preset--spacing--30); }

.nv-nsl__ing-bullets { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); margin-top: var(--wp--preset--spacing--10); padding: 0; list-style: none; color: var(--nv-ink); }

.nv-nsl__ing-bullets li { display: flex; gap: var(--wp--preset--spacing--10); }

.nv-nsl__ing-bullets li span { color: var(--nv-orange); }

.nv-nsl__ing-panel .nv-lp-imgslot { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--nv-radius-sm); background: var(--nv-white); }

.nv-nsl__ing-panel img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--nv-radius-sm); background: var(--nv-white); }

@media (max-width: 979px) {
	.nv-nsl__ing-grid { grid-template-columns: minmax(0, 1fr); }

	.nv-nsl__ing-tabs { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 619px) {
	.nv-nsl__ing-panels { padding: var(--wp--preset--spacing--30); }

	.nv-nsl__ing-panel { grid-template-columns: minmax(0, 1fr); }
}

/* Press: publication marks (inc/press-logos.php), not links — no pill,
   border or hover. */

.nv-nsl__press-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }

.nv-nsl__press-logo { width: auto; max-width: 120px; height: 22px; object-fit: contain; }

/* Press quotes follow the logo row on the same beige ground: the shared
   testimonial card, hairlined and centred here, its source line without
   the card's rule. */

.nv-nsl__quotes { padding-top: 0; }

.nv-nsl__quotes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }

.nv-nsl .nv-nsl__quote-card { gap: var(--wp--preset--spacing--30); border: 1px solid var(--nv-ink-10); text-align: center; }

.nv-nsl__quote-card .nv-lp-testimonial__foot { justify-content: center; padding-top: 0; border-top: 0; line-height: 1.55; }

.nv-nsl__quotes-disclaimer { text-align: center; }

/* Reviews */

.nv-nsl__reviews-rating { display: flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--10); margin-bottom: var(--wp--preset--spacing--20); }

.nv-nsl__reviews-score { font-family: var(--nv-serif); font-size: var(--nv-fs-h3); font-weight: 600; color: var(--nv-white); }

.nv-nsl__reviews-stars { font-size: var(--wp--preset--font-size--body); letter-spacing: 0.05em; color: var(--nv-orange); }

.nv-nsl__reviews-count { font-size: var(--wp--preset--font-size--body); color: var(--nv-on-dark-muted); }

.nv-nsl__reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }

/* Reviews: the shared testimonial card on the ink band, quote and stars
   only (the page has no reviewer names or photography). */

.nv-nsl .nv-nsl__review-card { padding: var(--wp--preset--spacing--40); }

.nv-nsl .nv-nsl__review-quote { font-family: var(--nv-serif); font-size: var(--nv-fs-lead); font-style: italic; line-height: 1.45; }

@media (max-width: 979px) {
	.nv-nsl__quotes-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 619px) {
	.nv-nsl__reviews-grid { grid-template-columns: minmax(0, 1fr); }
}