/* =========================================================================
   VuePod — store.css
   Phase 2 purchase chrome: mobile sticky buy bar + product-page enhancements.
   Relies on the brand tokens declared in the theme's vuepod.css (:root vars).
   ========================================================================= */

/* ---------- Mobile Sticky Add-to-Cart bar ---------- */
.vp-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px calc( 10px + env( safe-area-inset-bottom, 0px ) );
	background: rgba( 6, 18, 48, 0.92 );
	border-top: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	box-shadow: 0 -14px 40px -18px rgba( 2, 6, 23, 0.9 );
}

.vp-buybar__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.vp-buybar__name {
	font-family: var( --vp-font-display, sans-serif );
	font-weight: 600;
	font-size: 0.92rem;
	color: var( --vp-white, #fff );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vp-buybar__price {
	font-size: 0.95rem;
	color: var( --vp-sky, #7dd3fc );
	font-weight: 600;
}

.vp-buybar__price del { color: var( --vp-text-mut, #7c8bab ); font-weight: 400; margin-right: 6px; }

.vp-buybar__cta {
	margin-left: auto;
	white-space: nowrap;
	flex: 0 0 auto;
	padding: 12px 22px;
}

.vp-btn--disabled {
	background: var( --vp-surface-2, rgba( 255, 255, 255, 0.06 ) );
	color: var( --vp-text-mut, #7c8bab );
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	border-radius: 999px;
	font-weight: 600;
	cursor: not-allowed;
	pointer-events: none;
}

/* Bar is mobile-only; on desktop the hero / page CTAs carry the conversion. */
@media ( min-width: 768px ) {
	.vp-buybar { display: none; }
}

/* Keep the bar from covering page tails on mobile. */
@media ( max-width: 767px ) {
	body.vp-has-buybar { padding-bottom: 76px; }
}

/* ---------- Single product page enhancements ---------- */
.vp-product__subtitle {
	font-family: var( --vp-font-display, sans-serif );
	font-size: 1.15rem;
	color: var( --vp-text-dim, #aab8d4 );
	margin: 2px 0 18px;
}

.vp-product__buynow {
	margin: 10px 0 4px;
}

.vp-product__buynow .vp-btn { display: inline-block; }

.vp-product__reassure {
	margin: 12px 0 0;
	font-size: 0.86rem;
	color: var( --vp-text-mut, #7c8bab );
}

/* Light on-brand touch for the native Woo Add-to-Cart button. */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
	background: linear-gradient( 180deg, var( --vp-sky, #7dd3fc ), var( --vp-sky-deep, #38bdf8 ) ) !important;
	color: var( --vp-ink, #020617 ) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	padding: 14px 28px !important;
	border: 0 !important;
}

.vp-product-extras {
	margin: 40px auto 8px;
	display: grid;
	gap: 28px;
}

.vp-product-extras h2 {
	font-family: var( --vp-font-display, sans-serif );
	font-size: 1.25rem;
	margin: 0 0 14px;
	color: var( --vp-white, #fff );
}

.vp-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vp-checklist li {
	position: relative;
	padding-left: 28px;
	color: var( --vp-text, #eaf2ff );
}

.vp-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba( 125, 211, 252, 0.16 );
	box-shadow: inset 0 0 0 1px rgba( 125, 211, 252, 0.5 );
}

.vp-checklist li::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 6px;
	width: 6px;
	height: 9px;
	border-right: 2px solid var( --vp-sky, #7dd3fc );
	border-bottom: 2px solid var( --vp-sky, #7dd3fc );
	transform: rotate( 45deg );
}

/* ---- Optional silicone-shell add-on (checkbox card in the cart form) ---- */
.vp-addon {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 4px 0 18px;
	padding: 14px 16px;
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	border-radius: var( --vp-radius-sm, 12px );
	background: var( --vp-surface, rgba( 255, 255, 255, 0.035 ) );
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
	max-width: 460px;
}
.vp-addon:hover { border-color: rgba( 125, 211, 252, 0.45 ); }
.vp-addon:has( .vp-addon__cb:checked ) {
	border-color: rgba( 125, 211, 252, 0.65 );
	background: rgba( 125, 211, 252, 0.08 );
}
.vp-addon__cb { margin-top: 3px; width: 18px; height: 18px; accent-color: #38bdf8; flex: 0 0 auto; }
.vp-addon__body { display: flex; flex-direction: column; gap: 2px; }
.vp-addon__title { font-family: var( --vp-font-display, sans-serif ); font-weight: 600; color: var( --vp-white, #fff ); }
.vp-addon__price { color: var( --vp-sky, #7dd3fc ); font-weight: 700; }
.vp-addon__sub { font-size: 0.84rem; color: var( --vp-text-mut, #7c8bab ); }

/* ---- Product-page Buy Now (second submit button in the form) ---- */
.vp-product__buynow-btn {
	display: inline-block;
	margin-top: 10px;
	color: var( --vp-text, #eaf2ff );
}

.vp-fineprint {
	margin: 12px 0 0;
	font-size: 0.82rem;
	color: var( --vp-text-mut, #7c8bab );
}

.vp-product-extras__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-top: 6px;
	border-top: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
}

.vp-product-extras__links a {
	color: var( --vp-text-dim, #aab8d4 );
	text-decoration: none;
	font-size: 0.92rem;
}

.vp-product-extras__links a:hover { color: var( --vp-sky, #7dd3fc ); }