/*
Theme Name: Lightning VPN
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightning-vpn
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Sticky footer: keep the page at least viewport-height and let main grow so
   the footer is always anchored to the bottom, even on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}
.wp-site-blocks main {
	flex: 1;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* ===== Design tokens ===== */
:root {
	--lv-bg: var(--wp--preset--color--background);
	--lv-surface: var(--wp--preset--color--surface);
	--lv-ink: var(--wp--preset--color--text);
	--lv-primary: var(--wp--preset--color--primary);
}

/* ===== Brand & header ===== */
.brand-logo {
	margin: 0;
}
.brand-logo img {
	width: 34px;
	height: auto;
	display: block;
}
.brand-mark {
	font-family: var(--wp--preset--font-family--inter-tight);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	font-size: 1.15rem;
	text-decoration: none;
}
/* Brand lockup: pull the site name close to the logo in header and footer. */
.site-header .wp-block-group:has(.brand-logo):has(.brand-mark),
.site-footer .wp-block-group:has(.brand-logo):has(.brand-mark) {
	gap: 0.4rem !important;
}
.site-header {
	background: var(--lv-bg);
	border-bottom: 1px solid var(--lv-ink);
}
.site-header > .wp-block-group {
	max-width: none;
	padding-left: 48px;
	padding-right: 48px;
	margin-inline: 0;
}
.site-header .alignwide {
	max-width: none;
	width: 100%;
}
.site-header .wp-block-navigation a {
	color: var(--lv-ink);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.site-header .wp-block-navigation a:hover {
	color: var(--lv-primary);
}
.site-header .wp-block-navigation .wp-block-navigation-item__separator,
.site-header .wp-block-navigation .wp-block-page-list {
	color: var(--lv-ink);
}
.wc-block-mini-cart__icon {
	color: var(--lv-ink);
}

/* ===== Mobile: header aligns with the content gutter (20px); one product card per row ===== */
@media (max-width: 600px) {
	.site-header > .wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
	}
	.wp-block-woocommerce-product-template,
	.wp-block-woocommerce-product-template__responsive {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* Footer nav links must stay visible on mobile (the is-responsive overlay hides them) */
	.site-footer .wp-block-navigation__responsive-container,
	.site-footer .wp-block-navigation__responsive-container-content {
		display: block !important;
		position: static !important;
		visibility: visible !important;
		height: auto !important;
		background: transparent !important;
	}
	.site-footer .wp-block-navigation__responsive-container-close,
	.site-footer .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	/* Hero CTA buttons: equal width, centered */
	.wp-block-post-content > .wp-block-group.alignfull:first-child .wp-block-buttons {
		justify-content: center;
	}
	.wp-block-post-content > .wp-block-group.alignfull:first-child .wp-block-buttons .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}
	.wp-block-post-content > .wp-block-group.alignfull:first-child .wp-block-buttons .wp-block-button .wp-block-button__link {
		width: 100%;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* ===== Typography helpers ===== */
.eyebrow {
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lv-primary);
}
.band-label {
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lv-ink);
}

/* ===== Full-bleed band inner gutters =====
   The page is built from alignfull bands that break out to the viewport edge;
   their alignwide children had no horizontal inset because the band carries no
   global padding. Inset the alignwide children so content never touches the
   viewport edge, while the band background stays full-bleed. */
.wp-block-group.alignfull > .alignwide {
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ===== Section head row ===== */
.section-head {
	border-top: 1px solid var(--lv-ink);
	padding-top: var(--wp--preset--spacing--sm);
}
.section-head .wp-block-heading {
	margin-top: 0.25rem;
}

/* ===== Cards (block style) ===== */
.is-style-card {
	border: 1px solid var(--lv-ink);
	padding: 1.5rem;
	background: var(--lv-bg);
}
.is-style-card.has-background {
	padding: 1.5rem;
}
.has-surface-background-color.is-style-card {
	border-color: var(--lv-ink);
}

/* Small vector imagery in cards: testimonial faces and FAQ icons. */
.review-face img {
	width: 60px;
	height: 60px;
	margin-bottom: 1rem;
}

/* TRUSTED BY MILLIONS: review cards fill their (equal) column heights. */
#reviews .wp-block-column {
	display: flex;
}
#reviews .is-style-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
#reviews .is-style-card > p:last-child {
	margin-top: auto;
}
.faq-icon img {
	width: 48px;
	height: auto;
	margin-bottom: 0.75rem;
}
.feature-icon img {
	width: 64px;
	height: 64px;
	margin-bottom: 1.25rem;
}
/* WHY LIGHTNING: all four cards fill their (equal) columns so they read as one height. */
.wp-block-columns:has(.feature-icon) .wp-block-column > .is-style-card {
	height: 100%;
}
.step-icon img {
	width: 48px;
	height: 48px;
	margin-bottom: 1.25rem;
}
.stat-icon img {
	width: 48px;
	height: 48px;
	margin-bottom: 0.75rem;
	background: var(--lv-surface);
}
/* Center the stats band: icon, number, and label in each stat column. */
.wp-block-column:has(> .stat-icon) {
	text-align: center;
	align-items: center;
}
figure.stat-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Center GET STARTED steps: icon, number, title, and text in each step column. */
.wp-block-column:has(> .step-icon) {
	text-align: center;
	align-items: center;
}
figure.step-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Center WHY LIGHTNING feature cards: icon + content in each card. */
.wp-block-column:has(.feature-icon) {
	text-align: center;
}
.wp-block-column:has(.feature-icon) .is-style-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}
figure.feature-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}
.plan-desc {
	font-size: .9rem;
	line-height: 1.55;
	margin: .75rem 0 1rem;
}
.plan-tile .wp-block-buttons {
	margin-top: 1.5rem !important;
	gap: .75rem;
}
.plan-tile .wp-block-buttons .wp-block-button {
	margin-bottom: 0;
}
/* Plan card vertical rhythm: equal space above and below the feature list so
   the action buttons pin to the bottom of every equal-height tile. */
.plan-tile .plan-desc {
	margin-bottom: 1.25rem;
}
.plan-tile .plan-feats {
	flex: 1 1 auto;
	margin: 0 0 1.25rem;
}
/* Product rating: number + review count on the left of a filled star row. */
.plan-rating {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
}
.card-rating {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
}
.plan-rating .plan-stars,
.card-rating .plan-stars {
	order: 3;
}
.plan-rating-num {
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--lv-ink);
}
.plan-rating-count {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--lv-ink);
	opacity: 0.72;
}
.plan-stars {
	position: relative;
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: rgba(38, 31, 46, 0.22);
}
/* Grey track stars come from a ::before on .plan-stars; the violet fill is a
   separate absolutely-positioned span whose own ::before is clipped to the fill
   width. The visible rows must never include literal star text in the markup,
   or the track would double (10 stars). */
.plan-stars::before,
.plan-stars-fill::before {
	content: "★★★★★";
	letter-spacing: 0.08em;
}
.plan-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--lv-primary);
}
/* On the dark featured plan tile, the outline button must be light to show. */
.plan-tile.is-featured .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--lv-bg);
	border-color: var(--lv-bg);
}
.plan-tile.is-featured .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--lv-bg);
	color: var(--lv-text);
}

/* ===== Big stats ===== */
.stat {
	font-family: var(--wp--preset--font-family--inter-tight);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: var(--lv-primary);
	margin: 0 0 0.5rem;
}

/* ===== Plan price card ===== */
.plan-tile {
	border: 1px solid var(--lv-ink);
	padding: 1.75rem;
	background: var(--lv-bg);
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* On the dark featured (Family) card, the rating number + reviews read in white. */
.plan-tile.is-featured .plan-rating-num,
.plan-tile.is-featured .plan-rating-count {
	color: var(--lv-bg);
}
.plan-tile.is-featured .plan-stars {
	color: rgba(250, 249, 251, 0.35);
}
/* On mobile, the stats band becomes a tidy 2x2 grid. */
@media (max-width: 781px) {
	.wp-block-column:has(> .stat-icon) {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}
.plan-tile .wp-block-buttons {
	margin-top: auto !important;
	justify-content: center;
}
.plan-tile .wp-block-button__link {
	width: auto;
	padding: 1rem 1.25rem;
	white-space: nowrap;
}
.plan-tile .wp-block-image {
	margin: -0.25rem 0 1.25rem;
	background: var(--lv-bg);
}
.plan-tile .wp-block-image img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	background: var(--lv-bg);
}

/* Contained section vector graphics: keep the flat illustrations centered
   and moderate in size instead of giant full-bleed blocks. */
figure.wp-block-image.alignwide {
	max-width: 42rem;
	margin-inline: auto;
}

/* WORKS ACROSS YOUR DEVICES: contain the phone illustration, center the row
   vertically, and present the device list as buttons. */
#devices .wp-block-columns {
	align-items: center !important;
}
/* Align the device image flush right so the text (left) and image (right)
   meet the section's content edges on both sides equally. */
#devices .wp-block-image {
	max-width: 340px;
	margin-left: auto;
	margin-right: 0;
}
#devices .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}
#devices .device-links {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--md);
}
#devices .device-links .wp-block-button__link {
	padding: 0.6rem 1rem;
	font-size: 0.72rem;
}

/* Stacked full-bleed bands are meant to sit flush; drop the 24px block-gap
   sliver that otherwise shows between consecutive bands. */
.wp-site-blocks .alignfull + .alignfull {
	margin-top: 0;
}
.plan-tile.is-featured {
	background: var(--lv-ink);
	color: var(--lv-bg);
	border-color: var(--lv-ink);
}
.plan-tile.is-featured .wp-block-button__link {
	background: var(--lv-primary);
}
.plan-tile.is-featured .eyebrow {
	color: var(--lv-bg);
}
.plan-tile .price {
	font-family: var(--wp--preset--font-family--inter-tight);
	font-weight: 800;
	font-size: 2.6rem;
	letter-spacing: -0.02em;
	margin: 0.4rem 0 0.2rem;
}

/* ===== Buttons ===== */
.wp-block-button__link,
.wp-element-button {
	padding: 1rem 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.2;
}
.buttons--outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--lv-ink);
	border: 1px solid var(--lv-ink);
	padding: 1rem 1.75rem;
}
.has-background .buttons--outline .wp-block-button__link {
	color: inherit;
	border-color: currentColor;
}
.buttons--invert .wp-block-button__link {
	background: var(--lv-bg);
	color: var(--lv-primary);
}

/* ===== Footer ===== */
.site-footer {
	color: var(--lv-bg);
}
body:not(.home) .site-footer {
	border-top: 1px solid var(--lv-surface);
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
body.home .site-footer {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

/* Footer columns: one evenly spaced grid with all content centered. */
.site-footer .wp-block-columns {
	align-items: center;
	gap: 2.5rem;
	margin-top: 2rem;
}
.site-footer .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.site-footer .wp-block-column .wp-block-navigation {
	align-items: center;
}
.site-footer .wp-block-column .pay-chips,
.site-footer .wp-block-column .pay-logos,
.site-footer .wp-block-column .store-badges {
	justify-content: center;
}

/* Brand statement: tighten the heading-to-paragraph rhythm. */
.site-footer .footer-head-lead {
	margin-bottom: 0.4rem;
}
.site-footer .footer-brand .wp-block-paragraph {
	margin-top: 0.25rem;
}

/* Lead row: keep brand + tagline comfortably spaced and separated from columns. */
.footer-lead {
	gap: 1rem 2rem;
	margin-bottom: 0.5rem;
}

.site-footer > .wp-block-group {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
.site-footer p,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer li {
	color: var(--lv-bg);
}
.site-footer a {
	color: var(--lv-bg);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--lv-primary);
}
.site-footer .wp-block-navigation a {
	color: var(--lv-bg);
	font-size: 0.85rem;
}
.site-footer .wp-block-navigation {
	gap: 0.45rem;
	column-gap: 0.45rem;
	row-gap: 0.45rem;
	margin-top: 0.5rem;
}
.footer-head {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: var(--lv-violet);
}
.site-footer .footer-brand .brand-mark {
	font-size: 1.05rem;
}
.pay-chips {
	line-height: 1.9;
	margin: 0.25rem 0 0.75rem;
}
.pay-chip {
	display: inline-block;
	padding: 0.32rem 0.6rem;
	margin: 0 0.35rem 0.35rem 0;
	border: 1px solid currentColor;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
}
.site-footer .pay-logos {
	margin: 0.4rem 0 0;
}
.site-footer .pay-logos img {
	width: 100%;
	height: auto;
	max-width: 220px;
	display: block;
}
.site-footer .wp-block-separator {
	border-color: var(--lv-primary);
}

/* ===== Premium footer ===== */
.footer-lead {
	gap: 1.5rem;
}
.footer-tagline {
	font-family: var(--wp--preset--font-family--inter-tight);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.4vw, 1.55rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-align: right;
	margin: 0;
}

/* Supported devices band — hairline-framed, slightly inset for a premium feel. */
/* Devices band: clean plain section below the link columns — no borders, no tint. */
.footer-devices {
}
.site-footer .devices-label {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lv-bg);
	margin: 0 0 1.25rem;
	white-space: normal;
}
.device-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	align-items: center;
	margin: 0;
}
.store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 1rem 0 0;
}
.store-badges .store-badge {
	display: block;
	width: 148px;
	height: auto;
	border-radius: 6px;
}
.device-item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	color: rgba(250, 249, 251, 0.92);
}
.device-item .dev-icon {
	width: 34px;
	height: 34px;
	display: block;
	transition: color 0.15s ease;
}
.device-item:hover .dev-icon {
	color: var(--lv-primary);
}
.device-item-label {
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(250, 249, 251, 0.72);
}
.footer-head-lead {
	font-size: clamp(1.35rem, 2.8vw, 1.9rem);
	letter-spacing: -0.015em;
	text-transform: none;
	line-height: 1.08;
	font-weight: 800;
	margin: 0 0 0.75rem;
}
.footer-legal {
	gap: 1rem;
	align-items: center;
}
.footer-legal .wp-block-navigation {
	gap: 1.25rem;
	margin: 0;
}
.footer-legal-links a {
	color: rgba(250, 249, 251, 0.72);
	font-size: 0.8rem;
}
.footer-legal-links a:hover {
	color: var(--lv-bg);
}
.footer-badges {
	color: rgba(250, 249, 251, 0.6);
	letter-spacing: 0.04em;
	margin: 0;
}
@media (max-width: 600px) {
	.footer-tagline {
		text-align: left;
	}
}

/* ===== Separators ===== */
.wp-block-separator {
	border-color: currentColor;
}

.wc-block-product {
	border: 1px solid var(--lv-ink);
	background: var(--lv-bg);
	padding: 1.5rem 1.5rem 1.75rem;
	border-radius: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.wc-block-product .wp-block-button {
	margin-top: auto;
}
.wc-block-product .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-top: 0.75rem;
	width: 156px;
	padding: 16px 28px;
	color: var(--lv-text);
	border: 1px solid var(--lv-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1.04px;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}
.wc-block-product .wp-block-read-more::after {
	content: "Open plan";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0;
}
.wc-block-product .wp-block-image img {
	width: 100%;
	height: auto;
}

/* Product card text gets breathing room below it. */
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-button {
	margin-bottom: 0.75rem;
}
.wc-block-product .wc-block-components-product-metadata__description {
	margin: 0.5rem 0 1rem;
	color: var(--lv-ink);
}
.wc-block-product .product-card-desc {
	margin: 0.75rem auto 1rem;
	color: var(--lv-ink);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ===== WooCommerce polish ===== */
.woocommerce ul.products li.product .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 0;
}
.wc-block-grid__product,
.wp-block-woocommerce-product-collection {
	border-color: var(--lv-ink);
}

/* ===== Dark bands ===== */
.has-text-background-color .section-head {
	border-top-color: var(--lv-bg);
}
.has-text-background-color .section-head .band-label,
.has-text-background-color .section-head .wp-block-heading {
	color: var(--lv-bg);
}
.has-text-background-color .plan-tile,
.has-text-background-color .plan-tile .wp-block-heading,
.has-text-background-color .plan-tile ul {
	color: var(--lv-ink);
}
.has-text-background-color .plan-tile .price {
	color: var(--lv-primary);
}
.cta-note {
	color: inherit;
	max-width: 40rem;
}

/* ===== Blog cards (homepage “FROM THE BLOG” + archives): equal height ===== */
.wp-block-query .wp-block-post {
	display: flex;
	flex-direction: column;
}

/* ===== Hero: VPN client app window ===== */
.app-window {
	border: 1px solid var(--lv-ink);
	background: var(--lv-bg);
	padding: 1.25rem;
}
.app-window > .wp-block-group:first-child {
	border-bottom: 1px solid var(--lv-surface);
	padding-bottom: 1rem;
	margin-bottom: 1.25rem;
}
.app-window .wp-block-columns {
	margin: 0;
}
.app-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Inter Tight", sans-serif);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	color: var(--lv-ink);
}
.app-status {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lv-primary);
	background: var(--lv-surface);
	padding: 3px 9px;
}
.app-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lv-ink);
	opacity: 0.55;
}
.app-location {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display, "Inter Tight", sans-serif);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.05;
	color: var(--lv-ink);
}
.app-stats {
	margin: 0 0 1.25rem;
	font-size: 0.8rem;
	color: var(--lv-ink);
	opacity: 0.65;
}
.app-connect .wp-element-button {
	position: relative;
}
.app-connect .wp-element-button::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	margin-right: 8px;
}
.app-col-head {
	margin: 0 0 0.25rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lv-ink);
	opacity: 0.55;
}
.app-row {
	border-top: 1px solid var(--lv-surface);
	padding: 0.55rem 0;
}
.app-row:last-child {
	border-bottom: 1px solid var(--lv-surface);
}
.app-row .wp-block-group {
	flex: 1;
}
.app-city {
	margin: 0;
	font-size: 0.85rem;
	color: var(--lv-ink);
	position: relative;
	padding-left: 14px;
}
.app-city::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lv-surface);
}
.app-row:first-of-type .app-city::before {
	background: var(--lv-primary);
}
.app-lat {
	margin: 0;
	font-size: 0.72rem;
	color: var(--lv-ink);
	opacity: 0.6;
}

/* ===== Shop / category: intro description ===== */
.archive-intro {
	margin-bottom: 2rem;
}
.archive-intro .eyebrow {
	margin-bottom: 0.25rem;
}
.archive-intro .wp-block-heading {
	margin: 0.25rem 0 0.75rem;
}
.archive-intro > p {
	max-width: 46rem;
}
.archive-intro + :is(.term-description, .wp-block-woocommerce-product-collection) {
	margin-top: 1.5rem;
}
.archive-intro + .term-description {
	margin-left: 0 !important;
	margin-right: auto;
	max-width: 46rem;
}

/* ===== Shop / category: outro below the product cards ===== */
.archive-outro {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--lv-surface);
}
.archive-outro .wp-block-heading {
	margin: 0 0 1rem;
}
.archive-outro > .archive-outro-copy {
	max-width: 46rem;
	margin-bottom: 0;
}

/* ===== Shop / category: side-by-side actions + big price ===== */
.wc-block-product > .wp-block-group {
	gap: 0.5rem;
	margin-top: auto;
	align-items: center;
}
.wc-block-product > .wp-block-group > * {
	flex: 1 1 0;
	min-width: 0;
}
.wc-block-product > .wp-block-group .wp-block-read-more {
	width: 100%;
	margin: 0;
	padding: 13px 8px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 43px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
}
.wc-block-product > .wp-block-group .wc-block-components-product-button,
.wc-block-product > .wp-block-group .wc-block-components-product-button__button {
	width: 100%;
	margin-bottom: 0;
	padding: 14px 8px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.4px;
}
.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display, "Inter Tight", sans-serif);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--lv-ink);
}
.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price::after {
	content: "/mo";
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--lv-ink);
	opacity: 0.6;
	margin-left: 0.2rem;
}
/* Keep the add-to-cart button from changing size/position while it loads */
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wc-block-components-product-button__button {
	transition: none;
}
.wc-block-product .wc-block-components-product-button__button {
	height: 43px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
}
/* Disable WooCommerce's built-in label slide (slideOut → slideIn) when a product
   is added, so the button text swaps instantly and nothing appears to move. */
.wc-block-product .wc-block-components-product-button__button span.wc-block-slide-in,
.wc-block-product .wc-block-components-product-button__button span.wc-block-slide-out {
	animation: none !important;
}
.wc-block-product .wc-block-components-product-button__button>span {
	white-space: nowrap;
}
/* The "View cart" state: the anchor sits inside an intermediate <span> that is a flex
   item of the button column. Move that whole <span> (and its link) out of flow so the
   column height never changes, which used to re-center "Open plan" and make it slide. */
.wc-block-product .wc-block-components-product-button {
	position: relative;
}
.wc-block-product .wc-block-components-product-button span[data-wp-bind--hidden] {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin: 0;
	padding-top: 2px;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--lv-primary, #701ace);
}
.wc-block-product .wc-block-components-product-button span[data-wp-bind--hidden] .added_to_cart {
	position: static;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	text-decoration: none;
}

/* ============================================================
   ANIMATED GRADIENT MESH — HERO (option 3, modern organic)
   ------------------------------------------------------------
   A layered radial "mesh" in the brand palette (violet + ink soft
   blobs over a light base) that slowly drifts behind the hero for
   a modern, organic look. Kept light enough that the existing dark
   text stays readable. Animation runs on a composited ::before so
   it stays smooth, and it respects prefers-reduced-motion.

   TO REVERT: delete this whole block — from this comment down to
   the closing brace of the final rule — and set the theme Version
   back to 0.1.3 (or just ask and it will be reverted).
   ============================================================ */
#top {
	position: relative;
	overflow: hidden;
}
#top::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #faf9fb;
	background-image:
		radial-gradient(38% 52% at 18% 24%, rgba(112, 26, 206, 0.30), transparent 70%),
		radial-gradient(42% 58% at 80% 20%, rgba(112, 26, 206, 0.16), transparent 72%),
		radial-gradient(50% 60% at 70% 78%, rgba(38, 31, 46, 0.18), transparent 72%),
		radial-gradient(30% 42% at 24% 82%, rgba(244, 238, 251, 0.95), transparent 74%);
	background-size: 220% 220%, 230% 230%, 240% 240%, 200% 200%;
	background-repeat: no-repeat;
	animation: lvMesh 22s ease-in-out infinite alternate;
	will-change: background-position;
}
/* Keep hero content (columns, text, image) above the animated layer. */
#top > * {
	position: relative;
	z-index: 1;
}
@keyframes lvMesh {
	0%   { background-position: 15% 20%, 85% 15%, 75% 85%, 20% 80%; }
	50%  { background-position: 55% 40%, 42% 60%, 40% 55%, 68% 25%; }
	100% { background-position: 25% 70%, 78% 72%, 18% 38%, 35% 55%; }
}
/* Respect users who prefer reduced motion — show a calm static mesh. */
@media (prefers-reduced-motion: reduce) {
	#top::before {
		animation: none;
		background-position: 15% 20%, 85% 15%, 75% 85%, 20% 80%;
	}
}