/*
Theme Name: JetSet Networks
Theme URI: https://jetsetnetworks.com
Author: JetSet Networks
Author URI: https://jetsetnetworks.com
Description: Custom block theme for JetSet Networks — lightweight, responsive, WooCommerce-ready.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: jsn-theme
*/

/* ============================================================
   DESIGN PHILOSOPHY
   Inspired by Apple.com: restraint, whitespace, typography-driven
   hierarchy, minimal color, no decorative borders.

   Color usage:
   - Coral-500 (#E8614D) = single action color (like Apple's #0071e3)
   - Teal-900 (#0B3D3F) = dark backgrounds/headings
   - Neutral-50 (#F6F7F9) = alternate section bg (like Apple's #f5f5f7)
   - Text: #1d1d1f primary, #6e6e73 secondary (Apple's exact values)

   Max 2 font weights: 400 (body) and 600 (headings/buttons)
   Max 2 CTAs per section
   Content max-width: 980px
   ============================================================ */

/* ============================================================
   SCROLL ANIMATIONS — fade-in on scroll (triggered by JS observer)
   ============================================================ */

.jsn-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.jsn-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children when parent is revealed */
.jsn-reveal-group .wp-block-column {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
	            transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.jsn-reveal-group.is-visible .wp-block-column:nth-child(1) { transition-delay: 0s; }
.jsn-reveal-group.is-visible .wp-block-column:nth-child(2) { transition-delay: 0.1s; }
.jsn-reveal-group.is-visible .wp-block-column:nth-child(3) { transition-delay: 0.2s; }
.jsn-reveal-group.is-visible .wp-block-column:nth-child(4) { transition-delay: 0.4s; }

.jsn-reveal-group.is-visible .wp-block-column {
	opacity: 1;
	transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.jsn-reveal,
	.jsn-reveal-group .wp-block-column {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	color: #1d1d1f;
}

/* Reduce WP global padding on mobile — use full width */
@media (max-width: 734px) {
	.has-global-padding {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* Product pages — minimal padding */
	.single-product div.product {
		padding: 0 4px !important;
	}

	/* My Account / Checkout — minimal padding */
	.woocommerce-account .woocommerce,
	.woocommerce-checkout .woocommerce {
		padding: 0 4px !important;
	}

	/* Mobile nav submenu — no floating box, just indented items */
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		background: none !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 0 0 16px !important;
		min-width: 0 !important;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 0 !important;
		font-size: 1rem;
	}
}

img, picture, video, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--wp--preset--color--coral-500);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	text-decoration: underline;
}

/* Global smooth transitions */
* {
	-webkit-tap-highlight-color: transparent;
}

/* Responsive hero text — prevent overflow on small screens */
@media (max-width: 734px) {
	h1 {
		font-size: 2rem !important;
		word-break: break-word;
	}

	h2 {
		font-size: 1.5rem !important;
	}

	/* Tighter section padding on mobile */
	.jsn-dark,
	.jsn-alt-bg {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 1.75rem !important;
	}
}

/* ============================================================
   NAVIGATION — Frosted glass, Apple-style
   ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Hide WC injected blocks in header (customer-account, mini-cart) */
.site-header .wp-block-woocommerce-customer-account,
.site-header .wc-block-mini-cart {
	display: none;
}

.site-header .wp-block-navigation a {
	color: #1d1d1f;
	opacity: 0.8;
	font-size: 0.875rem;
	font-weight: 400;
	transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	text-decoration: none;
}

.site-header .wp-block-navigation a:hover {
	opacity: 1;
	text-decoration: none;
}

/* Mobile menu overlay — full viewport, Apple-style staggered animation */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 100vh !important;
	animation: menuFadeIn 0.4s cubic-bezier(0.52, 0.16, 0.24, 1) forwards !important;
}

@keyframes menuFadeIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	animation: menuItemSlide 0.35s cubic-bezier(0.52, 0.16, 0.24, 1) forwards;
	opacity: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.1s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.2s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes menuItemSlide {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.375rem;
	font-weight: 600;
	padding: 12px 0;
	color: #1d1d1f;
	display: block;
	width: 100%;
	text-decoration: none;
}

/* Remove focus outline on menu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding-top: 72px !important;
}

/* Close button — smooth */
.wp-block-navigation__responsive-container-close {
	transition: opacity 0.2s ease;
}
.wp-block-navigation__responsive-container-close:hover {
	opacity: 0.6;
}

/* ============================================================
   BUTTONS — Pill-shaped, single action color
   ============================================================ */

.wp-element-button,
.wc-block-components-button,
button[type="submit"] {
	border-radius: 980px;
	font-size: 0.9375rem;
	font-weight: 400;
	padding: 8px 20px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
}

/* Primary — coral pill */
.wp-block-button:not(.is-style-outline):not(.is-style-secondary):not(.is-style-ghost) .wp-element-button {
	background-color: var(--wp--preset--color--coral-500);
	color: #fff;
}

.wp-block-button:not(.is-style-outline):not(.is-style-secondary):not(.is-style-ghost) .wp-element-button:hover {
	background-color: var(--wp--preset--color--coral-600);
}

/* WPForms submit — must beat div.wpforms-container-full .wpforms-form specificity */
div.wpforms-container-full .wpforms-form button[type="submit"].wpforms-submit {
	background-color: var(--wp--preset--color--coral-500);
	color: #fff;
	border: none;
	border-radius: 980px;
	padding: 10px 28px;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

div.wpforms-container-full .wpforms-form button[type="submit"].wpforms-submit:hover {
	background-color: var(--wp--preset--color--coral-600);
}

/* No transform/shadow on hover — Apple doesn't do this */
.wp-element-button:hover {
	text-decoration: none;
}

.wp-element-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--wp--preset--color--coral-500);
}

/* Secondary — teal pill */
.is-style-secondary .wp-element-button {
	background-color: var(--wp--preset--color--teal-700);
	color: #fff;
}
.is-style-secondary .wp-element-button:hover {
	background-color: var(--wp--preset--color--teal-900);
}

/* Outline — just a border */
.is-style-outline .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--coral-500);
	border: 1px solid var(--wp--preset--color--coral-500);
}
.is-style-outline .wp-element-button:hover {
	background-color: var(--wp--preset--color--coral-500);
	color: #fff;
}

/* Ghost — text link with arrow, no border, no background */
.is-style-ghost .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--coral-500);
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}
.is-style-ghost .wp-element-button:hover {
	text-decoration: underline;
}

/* ============================================================
   SECTIONS — Rhythm through background alternation, not borders
   ============================================================ */

/* Light alternate (like Apple's #f5f5f7) */
.jsn-alt-bg {
	background-color: var(--wp--preset--color--neutral-50);
}

/* Tighten homepage section spacing — override inline padding */
.home main > .wp-block-group {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

/* Hero gets more room */
.home main > .wp-block-group:first-child {
	padding-top: 100px !important;
	padding-bottom: 100px !important;
}

/* Dark section */
.jsn-dark {
	background-color: var(--wp--preset--color--teal-900);
	color: #f5f5f7;
}

.jsn-dark h1, .jsn-dark h2, .jsn-dark h3, .jsn-dark h4 {
	color: #f5f5f7;
}

.jsn-dark p {
	color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   CARDS — No borders. Background color + subtle shadow only.
   ============================================================ */

.jsn-card {
	background: var(--wp--preset--color--neutral-50);
	border-radius: 18px;
	padding: 32px;
	border: none;
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.jsn-card:hover {
	transform: scale(1.02) translateY(-4px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.jsn-card .eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--coral-500);
	margin-bottom: 4px;
}

/* Featured card — subtle shadow instead of border */
.jsn-card-featured {
	background: #fff;
	box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.08);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
	border-top: none;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ============================================================
   GLOBAL FORM COMPONENTS
   One set of rules for every form on the site — shop, checkout,
   my-account, login, contact. No per-page duplicates needed.
   ============================================================ */

/* --- 3a: Inputs ------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
.woocommerce-Input {
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--lg);
	padding: 10px 14px;
	font-size: 1rem;
	color: #1d1d1f;
	background: #fff;
	transition: border-color 0.2s ease;
	width: 100%;
}

input:focus,
textarea:focus,
select:focus,
.woocommerce-Input:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-500);
	box-shadow: 0 0 0 3px rgba(20, 131, 135, 0.1);
}

::placeholder {
	color: #86868b;
}

/* --- 3b: Labels ------------------------------------------- */
.woocommerce form .form-row label,
.woocommerce-account .u-columns label,
label {
	font-weight: 600;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 4px;
}

/* --- 3c: Checkboxes --------------------------------------- */
.woocommerce-form__label-for-checkbox,
label[data-automation-id="woo-commerce-subscription-opt-in"] {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: #6e6e73;
	line-height: 1.4;
	cursor: pointer;
	margin-bottom: 12px;
	font-weight: 400;
}

.woocommerce-form__label-for-checkbox input[type="checkbox"],
label[data-automation-id="woo-commerce-subscription-opt-in"] input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
}

/* --- 3c-b: Password visibility toggle -------------------- */
.password-input {
	position: relative;
	display: block;
}

.password-input input {
	padding-right: 40px;
}

.show-password-input {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--neutral-400);
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.show-password-input::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.show-password-input.display-password::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* --- 3d: Select dropdown arrow ---------------------------- */
select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* Compact select for ordering/filter controls */
.woocommerce-ordering select {
	padding: 6px 12px;
	font-size: 0.8125rem;
	color: #6e6e73;
	border-radius: 10px;
	border-color: rgba(0, 0, 0, 0.1);
}

/* --- 3e: Commerce page spacing (.jsn-wc-main) ------------- */
.jsn-wc-main {
	padding-top: 24px;
	padding-bottom: 48px;
	max-width: 980px;
	margin: 0 auto;
	padding-left: 22px;
	padding-right: 22px;
}

.jsn-wc-main > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.jsn-wc-main .wp-block-post-title {
	font-size: 1.5rem !important;
	margin-bottom: 12px !important;
}

/* Commerce utility pages (cart, checkout, my-account) use page.html template.
   Override its spacing to match commerce pages. */
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main {
	padding-top: 24px !important;
	padding-bottom: 48px !important;
}

.woocommerce-cart main > *,
.woocommerce-checkout main > *,
.woocommerce-account main > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title {
	font-size: 1.5rem !important;
	margin-bottom: 12px !important;
}

/* --- 3e-b: Clear cart button ------------------------------ */
.jsn-clear-cart {
	margin-bottom: 16px;
	display: inline-block;
	background: transparent;
	color: #D93B3B;
	border: 1px solid #D93B3B;
	border-radius: 8px;
	padding: 8px 20px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.jsn-clear-cart:hover {
	background: #D93B3B;
	color: #fff;
}

/* --- 3f: WC Notices --------------------------------------- */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left: 3px solid var(--wp--preset--color--success);
	background: #f0faf4;
	border-radius: 12px;
	padding: 16px 20px;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left: 3px solid var(--wp--preset--color--error);
	background: #fef2f2;
	border-radius: 12px;
	padding: 16px 20px;
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-left: 3px solid var(--wp--preset--color--teal-500);
	background: var(--wp--preset--color--teal-100);
	border-radius: 12px;
	padding: 16px 20px;
}

.wc-block-components-notice-banner.is-warning {
	border-left: 3px solid var(--wp--preset--color--warning);
	background: #fefce8;
	border-radius: 12px;
	padding: 16px 20px;
}

/* ============================================================
   WOOCOMMERCE — Shop page
   ============================================================ */

/* Product grid */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Kill WC clearfix pseudo-elements — they become ghost grid cells */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

@media (max-width: 833px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 734px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}
}

/* Product cards — no borders, subtle background */
.woocommerce ul.products li.product {
	background: var(--wp--preset--color--neutral-50);
	border: none;
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	display: flex;
	flex-direction: column;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.woocommerce ul.products li.product:hover {
	transform: scale(1.02);
}

/* Product images — contained, centered, clean bg */
.woocommerce ul.products li.product a img {
	width: 100%;
	height: 200px;
	object-fit: contain;
	padding: 20px;
	background: var(--wp--preset--color--neutral-50);
}

/* Product info */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600;
	font-size: 1.0625rem;
	color: #1d1d1f;
	padding: 0 24px;
	margin: 0 0 8px;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	font-weight: 600;
	font-size: 1rem;
	color: #1d1d1f;
	padding: 0 24px 8px;
}

.woocommerce ul.products li.product .price del {
	color: #86868b;
	font-weight: 400;
	font-size: 0.8125rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--coral-500);
	font-weight: 600;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	font-size: 1.125rem;
}

/* Product button — pill, coral, white text */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
	margin: auto 24px 24px;
	background-color: var(--wp--preset--color--coral-500) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 980px;
	font-weight: 600;
	font-size: 0.8125rem;
	padding: 10px 24px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	display: block;
	letter-spacing: 0.01em;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
	background-color: var(--wp--preset--color--coral-600) !important;
	color: #fff !important;
	transform: scale(1.02);
}

/* Shop page header */
.woocommerce-products-header__title {
	font-weight: 700;
	font-size: 2.5rem;
	letter-spacing: -0.015em;
	text-align: center;
	margin-bottom: 4px;
}

.woocommerce-result-count {
	display: none;
}

.woocommerce-ordering {
	font-size: 0.8125rem;
	color: #6e6e73;
}

/* ============================================================
   WOOCOMMERCE — Single product page
   ============================================================ */

.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 833px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Gallery — clean, contained */
.single-product .woocommerce-product-gallery {
	background: var(--wp--preset--color--neutral-50);
	border-radius: 18px;
	overflow: hidden;
	max-height: 400px;
}

.single-product .woocommerce-product-gallery img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: 400px;
	padding: 24px;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: none;
}

/* Hide zoom/magnifier icon */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger,
.single-product .woocommerce-product-gallery .zoomImg {
	display: none !important;
}

/* WC Subscriptions "Sign up now" button — match our style */
.single-product .product .single_add_to_cart_button.wc-forward,
.single-product .product .wcsatt-add-to-subscription-action,
.single-product .product button.single_add_to_cart_button {
	background-color: var(--wp--preset--color--coral-500) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 980px;
	font-weight: 400;
	font-size: 1rem;
	padding: 10px 28px;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

.single-product .product .single_add_to_cart_button:hover,
.single-product .product button.single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--coral-600) !important;
}

/* Title */
.single-product .product .product_title {
	font-weight: 600;
	font-size: 1.75rem;
	letter-spacing: -0.003em;
	color: #1d1d1f;
	line-height: 1.15;
	margin-bottom: 8px;
}

/* Price */
.single-product .product .price {
	font-weight: 400;
	font-size: 1.125rem;
	color: #1d1d1f;
	margin-bottom: 16px;
}

.single-product .product .price .subscription-details {
	font-size: 0.8125rem;
	color: #6e6e73;
}

/* Variation selectors — stacked form fields */
.single-product .variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0 !important;
}

.single-product .variations tr {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.single-product .variations td {
	padding: 0 !important;
	border: none;
	display: block;
}

.single-product .variations td.label {
	margin-bottom: 4px;
}

.single-product .variations td.label label {
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6e6e73;
}

.single-product .variations td.value select {
	font-size: 0.9375rem;
}

.single-product .variations .reset_variations {
	font-size: 0.75rem;
	color: #86868b;
	margin-top: 4px;
	display: inline-block;
}

/* JSN plugin elements — plugin CSS handles styling.
   Theme removes WC defaults but allows plugin classes to override. */
.single-product #jsn-sim-wrap:not(.jsn-step-needed),
.single-product #jsn-prepaid-term:not(.jsn-step-needed) {
	margin: 0 0 6px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

/* Quantity — default WC styling (JSN plugin overrides for managed products) */
.single-product .quantity input.qty {
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1d1d1f;
	background: #fff;
	-moz-appearance: textfield;
}

.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

/* Kill spacing on hidden/empty WC elements */
.single-product .woocommerce-variation.single_variation {
	margin-bottom: 0 !important;
}

.single-product .woocommerce-variation.single_variation:empty {
	display: none;
}

.single-product wc-order-attribution-inputs {
	margin: 0 !important;
}

.single-product .first-payment-date:empty {
	display: none;
}

.single-product .woocommerce-variation-add-to-cart > .clear,
.single-product .dfws__subscription-discounts .clear {
	display: none;
}

.single-product .dfws__subscription-discounts:empty {
	display: none;
}

/* Tighten product summary spacing */
.single-product .summary .price {
	margin-bottom: 12px !important;
}

.single-product .summary .woocommerce-product-details__short-description {
	margin-bottom: 16px !important;
}

.single-product .summary form.cart,
.single-product .summary form.variations_form {
	margin-bottom: 12px !important;
}

.single-product .product_meta {
	margin-top: 12px !important;
}

/* Add to cart — full width, prominent */
.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.single-product .product .single_add_to_cart_button {
	background-color: var(--wp--preset--color--coral-500);
	color: #fff;
	border: none;
	border-radius: 980px;
	font-weight: 600;
	font-size: 1rem;
	padding: 14px 32px;
	transition: all 0.3s ease;
	cursor: pointer;
	width: 100%;
	text-align: center;
}

.single-product .product .single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--coral-600);
	transform: scale(1.01);
}

.single-product .product .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Stripe express checkout buttons (Apple Pay, Google Pay, Link) —
   Global rules — apply anywhere Stripe renders express checkout
   (product page, cart page, or any future placement).
   Stripe renders buttons in iframes we can't style directly,
   so we clip the wrapper divs to pill shape instead. */

#wc-stripe-express-checkout-element,
#wc-stripe-payment-request-wrapper,
.wc-stripe-payment-request-button-wrapper {
	margin-top: 8px;
}

/* Button wrappers — pill shape, but NOT the separator.
   overflow:hidden on the wrapper clips the iframe to our pill shape.
   (Don't put border-radius on the iframe itself — replaced elements
   clip their own content, which truncates buttons in narrow containers.) */
#wc-stripe-express-checkout-element > div:not(.wc-stripe-express-checkout-button-separator),
#wc-stripe-payment-request-wrapper > * {
	border-radius: 980px !important;
	overflow: hidden;
	margin-bottom: 6px;
	height: 40px;
}

/* Stripe separator ("— or —") */
.wc-stripe-express-checkout-button-separator,
#wc-stripe-payment-request-button-separator {
	font-size: 0.75rem;
	color: #86868b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 8px 0;
	text-align: center;
	border-radius: 0 !important;
	overflow: visible !important;
}

/* Discount table */
.single-product .dfws__subscription-discounts table {
	width: 100%;
	font-size: 0.8125rem;
	border-collapse: collapse;
	margin-top: 12px;
}

.single-product .dfws__subscription-discounts th,
.single-product .dfws__subscription-discounts td {
	padding: 8px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Product meta — compact */
.single-product .product_meta {
	font-size: 0.75rem;
	color: #86868b;
	margin-top: 12px !important;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Tabs — tighter spacing */
.single-product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 24px;
}

.woocommerce-tabs .tabs {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: 16px;
}

.woocommerce-tabs .tabs li { margin: 0; }

.woocommerce-tabs .tabs li a {
	padding: 10px 18px;
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: #6e6e73;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.2s ease;
}

.woocommerce-tabs .tabs li.active a {
	color: #1d1d1f;
	border-bottom-color: #1d1d1f;
	font-weight: 600;
}

/* Tab panel content — tighter */
.woocommerce-Tabs-panel {
	margin-bottom: 0;
}

/* Related products — tighter */
.single-product .related.products {
	grid-column: 1 / -1;
	margin-top: 16px !important;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.single-product .related.products > h2 {
	font-size: 1.25rem;
	margin-bottom: 16px;
}

/* Kill WC default bottom margins on product sections */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	margin-bottom: 0 !important;
	padding-bottom: 0;
}

/* Product page — general WC paragraph spacing */
.single-product .summary p {
	margin-bottom: 8px;
}

/* Tighten gap between product content and footer */
.single-product main + footer,
.woocommerce-page main + footer {
	margin-top: 0 !important;
}

/* Product page — feature badges (short description) */
.jsn-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0;
}

.jsn-product-badges .jsn-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	padding: 5px 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 980px;
	color: #1d1d1f;
	white-space: nowrap;
}

.jsn-product-badges .jsn-badge::before {
	content: "\2713";
	color: var(--wp--preset--color--teal-700);
	font-weight: 600;
	font-size: 0.75rem;
}

/* Product page — description tab content */
.woocommerce-Tabs-panel--description .jsn-product-desc {
	max-width: none;
}

.jsn-product-desc h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #1d1d1f;
	margin: 32px 0 8px;
}

.jsn-product-desc h3:first-child {
	margin-top: 0;
}

.jsn-product-desc p {
	color: #6e6e73;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

.jsn-product-desc .jsn-desc-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 24px 0;
}

@media (max-width: 734px) {
	.jsn-product-desc .jsn-desc-features {
		grid-template-columns: 1fr;
	}
}

.jsn-product-desc .jsn-desc-feature {
	padding: 20px;
	background: var(--wp--preset--color--neutral-50);
	border-radius: 14px;
}

.jsn-product-desc .jsn-desc-feature h4 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1d1d1f;
	margin: 0 0 4px;
}

.jsn-product-desc .jsn-desc-feature p {
	font-size: 0.8125rem;
	margin: 0;
}

.jsn-product-desc .jsn-desc-note {
	font-size: 0.8125rem;
	color: #86868b;
	padding: 16px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	margin-top: 24px;
}

/* Coverage map — interactive Mapbox map */
.jsn-coverage-map {
	margin: 24px 0 16px;
}

.jsn-coverage-map h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #1d1d1f;
	margin: 0 0 8px;
}

.jsn-coverage-map p {
	font-size: 0.875rem;
	color: #6e6e73;
	margin: 0 0 12px;
}

/* Map container — !important needed to override WC inline display:none */
.jsn-coverage-map-container {
	display: block !important;
	width: 100%;
	height: 400px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-50);
}

@media (max-width: 734px) {
	.jsn-coverage-map-container {
		height: 300px;
	}
}

/* Search bar above map */
.jsn-coverage-search-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.jsn-coverage-search-bar input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	font-size: 0.9375rem;
	color: #1d1d1f;
	background: #fff;
}

.jsn-coverage-search-bar input:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-700);
	box-shadow: 0 0 0 2px rgba(20, 131, 135, 0.15);
}

.jsn-coverage-search-bar button {
	padding: 10px 20px;
	border: none;
	border-radius: 980px;
	background: var(--wp--preset--color--coral-500);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.jsn-coverage-search-bar button:hover {
	background: var(--wp--preset--color--coral-600);
}

/* Override Mapbox attribution to be subtle */
.jsn-coverage-map-container .mapboxgl-ctrl-attrib {
	font-size: 0.625rem;
	opacity: 0.5;
}

/* Coverage legend */
.jsn-coverage-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 10px;
	padding: 10px 0;
	font-size: 0.6875rem;
	color: #6e6e73;
}

.jsn-coverage-legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.jsn-coverage-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}

/* Fallback link card if iframe is blocked */
.jsn-coverage-map-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	background: var(--wp--preset--color--neutral-50);
	border-radius: 14px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.jsn-coverage-map-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.jsn-coverage-map-link-icon {
	font-size: 2rem;
	line-height: 1;
}

.jsn-coverage-map-link-text {
	flex: 1;
}

.jsn-coverage-map-link-text strong {
	display: block;
	font-size: 0.9375rem;
	color: #1d1d1f;
	margin-bottom: 2px;
}

.jsn-coverage-map-link-text span {
	font-size: 0.8125rem;
	color: #6e6e73;
}

.jsn-coverage-map-link-arrow {
	font-size: 1.25rem;
	color: var(--wp--preset--color--coral-500);
}

@media (max-width: 734px) {
	.jsn-coverage-map-frame {
		padding-bottom: 75%; /* taller on mobile */
	}
}

/* ============================================================
   LANDING PAGES
   ============================================================ */

/* Landing page — full width, breaks out of WP's has-global-padding (24px) */
.jsn-landing {
	max-width: none !important;
	margin-left: -24px !important;
	margin-right: -24px !important;
	width: calc(100% + 48px);
}

@media (max-width: 734px) {
	.jsn-landing {
		margin-left: -8px !important;
		margin-right: -8px !important;
		width: calc(100% + 16px);
	}
	.jsn-landing [style*="padding:64px 48px"],
	.jsn-landing [style*="padding:80px 48px"] {
		padding: 40px 16px !important;
	}
	.jsn-landing [style*="padding:80px 32px"] {
		padding: 40px 16px !important;
	}
	.jsn-landing [style*="padding:64px 32px"] {
		padding: 40px 16px !important;
	}
}

/* Hide WP page title when landing content is present */
.page:has(.jsn-landing) .wp-block-post-title,
.page:has(.jsn-landing) .entry-title {
	display: none;
}

.jsn-landing-hero {
	background-color: var(--wp--preset--color--teal-900);
}

/* Responsive plan grid on landing page */
@media (max-width: 833px) {
	.jsn-landing [style*="grid-template-columns: repeat(3"] {
		grid-template-columns: 1fr !important;
		max-width: 400px;
		margin: 0 auto;
	}
}

@media (min-width: 834px) and (max-width: 1024px) {
	.jsn-landing [style*="grid-template-columns: repeat(3"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mini-cart icon — force visible (WC Interactivity API hides until hydration) */
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart {
	display: inline-block !important;
}

/* Navigation dropdown styling */
.wp-block-navigation-submenu {
	position: relative;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	padding: 8px 0;
	min-width: 180px;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
	font-size: 0.875rem;
	display: block;
	color: #1d1d1f;
	text-decoration: none;
	transition: background 0.15s ease;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--neutral-50);
}

/* ============================================================
   WOOCOMMERCE — Cart & Checkout
   ============================================================ */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: 980px;
	margin: 32px auto;
	padding: 0 24px;
}

.wc-block-cart__submit-button,
.wc-block-checkout__actions .wc-block-components-button,
.woocommerce .checkout-button,
.woocommerce #place_order {
	background-color: var(--wp--preset--color--coral-500) !important;
	border-radius: 980px !important;
	font-weight: 400 !important;
	transition: background-color 0.3s ease !important;
	border: none !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
	background-color: var(--wp--preset--color--coral-600) !important;
}

/* ============================================================
   WOOCOMMERCE — Classic Cart (shortcode)
   ============================================================ */

/* My Account title — center-aligned to match form container on login page */
.woocommerce-account .wp-block-post-title {
	max-width: 860px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 32px;
}

.woocommerce-cart .woocommerce {
	max-width: 980px;
	margin: 0 auto;
}

.woocommerce table.shop_table {
	border: none;
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.shop_table th {
	font-weight: 600;
	font-size: 0.8125rem;
	color: #6e6e73;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.woocommerce table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	vertical-align: middle;
}

.woocommerce table.shop_table img:not([alt*="QR"]) {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--wp--preset--color--neutral-50);
}

.woocommerce .product-name a {
	color: #1d1d1f;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce .product-name a:hover {
	color: var(--wp--preset--color--coral-500);
}

.woocommerce .product-remove a {
	color: #86868b !important;
	font-size: 1.25rem;
	text-decoration: none;
}

.woocommerce .product-remove a:hover {
	color: var(--wp--preset--color--error) !important;
}

.woocommerce .quantity input.qty {
	width: 56px;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 12px;
	padding: 8px 4px;
	font-size: 0.9375rem;
}

.woocommerce button[name="update_cart"],
.woocommerce .coupon .button {
	background: var(--wp--preset--color--teal-700);
	color: #fff;
	border: none;
	border-radius: 980px;
	padding: 8px 20px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce .coupon .button:hover {
	background: var(--wp--preset--color--teal-900);
}

.woocommerce .coupon input {
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 12px;
	padding: 8px 14px;
	font-size: 0.9375rem;
}

/* Cart totals */
.woocommerce .cart_totals {
	max-width: 480px;
	margin-left: auto;
}

.woocommerce .cart_totals h2 {
	font-size: 1.25rem;
	margin-bottom: 16px;
}

.woocommerce .cart_totals table {
	border: none;
}

.woocommerce .cart_totals th,
.woocommerce .cart_totals td {
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	font-weight: 600;
	font-size: 1.125rem;
	border-bottom: none;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
	background: var(--wp--preset--color--coral-500) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 980px !important;
	padding: 12px 32px !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	width: 100%;
	display: block;
	text-align: center;
	transition: background-color 0.3s ease;
}

.woocommerce .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--wp--preset--color--coral-600) !important;
}

/* ============================================================
   WOOCOMMERCE — Classic Checkout (shortcode)
   ============================================================ */

.woocommerce-checkout .woocommerce {
	max-width: none;
	margin: 0 auto;
	padding: 0 32px;
}

.woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(320px, 2fr) 3fr;
	gap: 40px;
}

/* Billing/shipping details → left column */
.woocommerce form.checkout #customer_details {
	grid-column: 1;
}

/* Order review heading + order summary → right column */
.woocommerce form.checkout #order_review_heading {
	grid-column: 2;
}

.woocommerce form.checkout #order_review {
	grid-column: 2;
	position: sticky;
	top: 80px;
	align-self: start;
	min-width: 0;
}

/* Coupons and notices at the top, full width */
.woocommerce form.checkout .wc_coupon_message_wrap {
	grid-column: 1 / -1;
	grid-row: 1;
}

.woocommerce form.checkout #coupons_list {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Push billing and order review below coupons */
.woocommerce form.checkout #customer_details {
	grid-row: 3 / span 20;
}

.woocommerce form.checkout #order_review_heading {
	grid-row: 3;
}

.woocommerce form.checkout #order_review {
	grid-row: 4 / span 20;
}

/* Hidden style elements don't affect layout */
.woocommerce form.checkout > style {
	display: none;
}

@media (max-width: 734px) {
	.woocommerce form.checkout {
		grid-template-columns: 1fr;
	}
	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout #order_review_heading,
	.woocommerce form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}
}

.woocommerce #customer_details {
	grid-column: 1;
}

.woocommerce #order_review_heading,
.woocommerce #order_review {
	grid-column: 2;
}

@media (max-width: 734px) {
	.woocommerce #customer_details,
	.woocommerce #order_review_heading,
	.woocommerce #order_review {
		grid-column: 1;
	}
}

.woocommerce #order_review table {
	border: none;
}

.woocommerce #order_review th,
.woocommerce #order_review td {
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.woocommerce #place_order {
	background: var(--wp--preset--color--coral-500) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 980px !important;
	padding: 14px 32px !important;
	font-size: 1rem !important;
	width: 100%;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: 16px;
}

.woocommerce #place_order:hover {
	background: var(--wp--preset--color--coral-600) !important;
}

/* Payment methods */
.woocommerce .wc_payment_methods {
	list-style: none;
	padding: 0;
}

.woocommerce .wc_payment_methods li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.woocommerce .wc_payment_methods label {
	font-weight: 400;
	cursor: pointer;
}

/* Stripe payment box — tighten spacing */
.woocommerce .payment_box {
	padding: 16px;
	margin-bottom: 0;
	font-size: 0.875rem;
}

/* Stripe UPE element — reduce internal spacing */
.wc-stripe-upe-element {
	margin-bottom: 0 !important;
}

/* Saved payment methods — compact */
.woocommerce-SavedPaymentMethods {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.woocommerce-SavedPaymentMethods li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	font-size: 0.875rem;
}

.woocommerce-SavedPaymentMethods li label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.woocommerce-SavedPaymentMethods li input[type="radio"] {
	margin: 0;
}

/* Place order — inside #order_review, just needs tighter padding */
.woocommerce .form-row.place-order {
	padding-top: 16px;
}

.woocommerce .form-row.place-order .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 12px;
	font-size: 0.8125rem;
	color: #6e6e73;
}

/* Privacy policy text */
.woocommerce-privacy-policy-text p {
	font-size: 0.8125rem;
	color: #6e6e73;
	margin-bottom: 12px;
}

/* ============================================================
   MINI-CART
   ============================================================ */

.wc-block-mini-cart-contents .wc-block-components-product-image img {
	width: 64px !important;
	height: 64px !important;
	object-fit: contain;
	border-radius: 8px;
	background: var(--wp--preset--color--neutral-50);
}

/* Hide duplicate product image in mini-cart — WC renders two img tags */
.wc-block-mini-cart-contents .wc-block-cart-item__image ~ img,
.wc-block-mini-cart-contents .wc-block-components-product-image img + img,
.wc-block-mini-cart-contents .wc-block-cart-items__row > img {
	display: none !important;
}

.wc-block-mini-cart-contents .wc-block-components-product-name {
	font-weight: 600;
	font-size: 0.875rem;
	color: #1d1d1f;
	text-decoration: none;
}

.wc-block-mini-cart-contents .wc-block-cart-items__row {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* When WC Store API sets min=max=1 on JSN products, the +/- buttons
   become disabled. Hide them entirely to avoid customer confusion. */
.wc-block-components-quantity-selector__button:disabled {
	display: none !important;
}

.wc-block-mini-cart-contents .wc-block-components-button.contained {
	background: var(--wp--preset--color--coral-500);
	border-radius: 980px;
}

.wc-block-mini-cart-contents .wc-block-components-button.outlined {
	border-radius: 980px;
}

.wc-block-mini-cart-contents .wc-block-cart-item__remove-link {
	color: #86868b;
	font-size: 0.75rem;
}

.wc-block-mini-cart-contents .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--error);
}

/* ============================================================
   WOOCOMMERCE — My Account
   ============================================================ */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-MyAccount-navigation li {
	margin-bottom: 1px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 6px 12px;
	border-radius: 8px;
	color: #6e6e73;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 400;
	transition: all 0.2s ease;
	line-height: 1.4;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--neutral-50);
	color: #1d1d1f;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--teal-900);
	color: #fff;
	font-weight: 600;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link {
	background: var(--wp--preset--color--teal-700);
	color: #fff;
	padding: 8px 16px;
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	border-radius: 0 0 12px 12px;
	font-weight: 600;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
}

/* ============================================================
   RESPONSIVE
   Apple breakpoints: 1068px (medium), 833px (tablet), 734px (mobile)
   ============================================================ */

/* Tablet — keep columns but tighten spacing */
@media (max-width: 833px) {
	.jsn-card {
		padding: 24px;
	}

	.jsn-plan {
		padding: 28px 20px;
	}

	.jsn-plan-price {
		font-size: 2.5rem;
	}
}

/* Mobile — stack everything */
@media (max-width: 734px) {
	.jsn-card {
		padding: 20px;
	}

	/* Plans should show side-scrollable or stacked nicely */
	.jsn-plan {
		padding: 24px 20px;
	}

	.jsn-plan-price {
		font-size: 2.25rem;
	}

	/* Feature row — 2x2 grid on mobile */
	.jsn-feature-row {
		gap: 24px 20px;
	}

	.jsn-feature-item {
		flex: 0 1 calc(50% - 10px);
	}
}

/* Force WP columns to not stack until 600px on tablet */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
}

/* ============================================================
   SERVICE VISUALIZATION
   How to make invisible services feel tangible:
   - Use data/numbers as visual anchors (speed, coverage, savings)
   - Clean typography at scale creates presence without images
   - Subtle background treatments create depth
   ============================================================ */

/* Large number display — makes data feel like a product */
.jsn-metric {
	text-align: center;
	padding: 24px 0;
}

.jsn-metric-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #1d1d1f;
}

.jsn-metric-label {
	font-size: 0.9375rem;
	color: #6e6e73;
	margin-top: 4px;
}

/* On dark background */
.jsn-dark .jsn-metric-value {
	color: #f5f5f7;
}

.jsn-dark .jsn-metric-label {
	color: rgba(255, 255, 255, 0.56);
}

/* Feature row — horizontal layout for "what you get" */
.jsn-feature-row {
	display: flex;
	gap: 40px;
	justify-content: center;
	flex-wrap: wrap;
	padding: 40px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.jsn-feature-item {
	text-align: center;
	flex: 0 1 200px;
}

.jsn-feature-item strong {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: #1d1d1f;
	margin-bottom: 4px;
}

.jsn-feature-item span {
	font-size: 0.8125rem;
	color: #6e6e73;
}

/* Plan comparison — clean, no borders */
.jsn-plan {
	background: var(--wp--preset--color--neutral-50);
	border-radius: 18px;
	padding: 40px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.jsn-plan:hover {
	transform: scale(1.02) translateY(-4px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.jsn-plan-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--coral-500);
	margin-bottom: 8px;
}

.jsn-plan-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: #1d1d1f;
	margin-bottom: 12px;
}

.jsn-plan-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 600;
	color: #1d1d1f;
	line-height: 1;
	margin-bottom: 4px;
}

.jsn-plan-price-period {
	font-size: 0.875rem;
	color: #6e6e73;
	margin-bottom: 24px;
}

.jsn-plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	text-align: left;
}

.jsn-plan-features li {
	padding: 8px 0;
	font-size: 0.9375rem;
	color: #1d1d1f;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.jsn-plan-cta {
	margin-top: auto;
}

/* Highlighted plan */
.jsn-plan-featured {
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	position: relative;
}

/* Trust bar — simple logos or text in a row */
.jsn-trust {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
	padding: 20px 0;
	color: #86868b;
	font-size: 0.8125rem;
}

/* ALL pages — break out of WP block theme constrained layout.
   WP block themes apply max-width from theme.json wideSize (980px)
   to .wp-block-post-content AND its children (via is-layout-constrained).
   We override globally because our pages manage their own widths. */
.wp-block-post-content {
	max-width: none !important;
}

/* Override WP constrained layout on direct children (except landing pages) */
.wp-block-post-content > *:not(.jsn-landing) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* WC content containers */
.woocommerce-page .wp-block-post-content > .woocommerce,
.woocommerce-page .wp-block-post-content > div.product,
.woocommerce-account .wp-block-post-content > .woocommerce {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Single product: WC uses its own template with main.alignwide at 980px */
.single-product main.wp-block-group.alignwide,
.single-product main.wp-block-group[class*="alignwide"] {
	max-width: none !important;
}

/* Product container — centered, max-width for readability */
.single-product div.product {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* WC shop/archive pages */
.woocommerce-page.post-type-archive main.wp-block-group.alignwide,
.tax-product_cat main.wp-block-group.alignwide {
	max-width: none !important;
}

/* My Account — two column layout on desktop, fluid width.
   Only apply grid when sidebar nav exists (logged-in state).
   :has() scopes this to logged-in pages only. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 24px;
	align-items: start;
	width: 100% !important;
	padding: 0 32px;
}

.woocommerce-MyAccount-navigation {
	grid-column: 1;
	position: sticky;
	top: 80px;
}

.woocommerce-MyAccount-content {
	grid-column: 2;
	min-width: 0;
	max-width: 100%;
	overflow: visible;
}

/* My Account — table overflow (My Lines has many columns) */
.woocommerce-MyAccount-content .shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table {
	overflow-x: auto;
	display: block;
	width: 100%;
}

/* My Account tables — normal table, no scroll boxes */
.woocommerce-MyAccount-content .shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table {
	display: table !important;
	width: 100% !important;
	table-layout: auto !important;
	overflow: visible !important;
}

/* My Account table cells */
.woocommerce-MyAccount-content .shop_table td,
.woocommerce-MyAccount-content .shop_table th {
	padding: 12px 10px;
	font-size: 0.8125rem;
	white-space: normal;
	word-break: normal;
}

.woocommerce-MyAccount-content .shop_table th {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #86868b;
	font-weight: 600;
}

/* My Account action buttons — themed, compact */
.woocommerce-MyAccount-content .shop_table .button,
.woocommerce-MyAccount-content .shop_table a.button {
	padding: 5px 12px;
	font-size: 0.6875rem;
	border-radius: 980px;
	white-space: nowrap;
	display: inline-block;
	margin: 2px 2px;
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid var(--wp--preset--color--teal-700);
	background: transparent;
	color: var(--wp--preset--color--teal-700);
}

.woocommerce-MyAccount-content .shop_table .button:hover,
.woocommerce-MyAccount-content .shop_table a.button:hover {
	background: var(--wp--preset--color--teal-700);
	color: #fff;
}

/* View buttons — coral filled */
.woocommerce-MyAccount-content .shop_table .button.view,
.woocommerce-MyAccount-content .shop_table a.button.view {
	background: var(--wp--preset--color--coral-500);
	border-color: var(--wp--preset--color--coral-500);
	color: #fff;
}

.woocommerce-MyAccount-content .shop_table .button.view:hover,
.woocommerce-MyAccount-content .shop_table a.button.view:hover {
	background: var(--wp--preset--color--coral-600);
	border-color: var(--wp--preset--color--coral-600);
}

/* Pay buttons — teal filled */
.woocommerce-MyAccount-content .shop_table .button.pay,
.woocommerce-MyAccount-content .shop_table a.button.pay {
	background: var(--wp--preset--color--teal-700);
	color: #fff;
}

/* Cancel buttons — outline only, subtle */
.woocommerce-MyAccount-content .shop_table .button.cancel,
.woocommerce-MyAccount-content .shop_table a.button.cancel {
	border-color: rgba(0, 0, 0, 0.15);
	color: #6e6e73;
}

.woocommerce-MyAccount-content .shop_table .button.cancel:hover,
.woocommerce-MyAccount-content .shop_table a.button.cancel:hover {
	border-color: #dc2626;
	color: #dc2626;
	background: rgba(220, 38, 38, 0.04);
}

@media (max-width: 734px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		grid-column: 1;
	}
	/* Mobile: horizontal scrollable nav instead of vertical list */
	.woocommerce-MyAccount-navigation {
		position: static;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		margin-bottom: 24px;
		padding-bottom: 2px;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 4px;
		white-space: nowrap;
		padding: 0 0 8px;
	}
	.woocommerce-MyAccount-navigation li {
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.woocommerce-MyAccount-navigation li a {
		padding: 8px 14px;
		font-size: 0.8125rem;
		border-radius: 980px;
	}
}

/* My Account — dashboard content */
.woocommerce-MyAccount-content p {
	color: #6e6e73;
	line-height: 1.6;
}

.woocommerce-MyAccount-content > p:first-of-type {
	font-size: 1.0625rem;
	color: #1d1d1f;
}

/* My Account — order/subscription tables */
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .shop_table {
	font-size: 0.875rem;
}

.woocommerce-MyAccount-content .woocommerce-orders-table td::before,
.woocommerce-MyAccount-content .shop_table td::before {
	font-weight: 600;
	color: #1d1d1f;
}

/* My Account — responsive tables on mobile */
@media (max-width: 734px) {
	.woocommerce-account .woocommerce {
		padding: 0 16px;
	}
	.woocommerce-MyAccount-content table.shop_table {
		display: block;
	}
	.woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}
	.woocommerce-MyAccount-content table.shop_table tbody {
		display: block;
	}
	.woocommerce-MyAccount-content table.shop_table tr {
		display: block;
		margin-bottom: 16px;
		padding: 20px;
		background: var(--wp--preset--color--neutral-50);
		border-radius: 16px;
	}
	.woocommerce-MyAccount-content table.shop_table td {
		display: block;
		padding: 4px 0;
		border: none;
		text-align: left;
		font-size: 0.9375rem;
	}
	.woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		color: #1d1d1f;
	}
	/* Action buttons full-width on mobile cards */
	.woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions {
		padding-top: 12px;
	}
	.woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions .button {
		display: block;
		text-align: center;
		margin: 4px 0;
	}
}

/* My Account — ALL buttons themed globally */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content input.button {
	display: inline-block;
	padding: 7px 18px;
	border-radius: 980px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	border: 1px solid var(--wp--preset--color--teal-700);
	background: transparent;
	color: var(--wp--preset--color--teal-700);
	cursor: pointer;
	line-height: 1.4;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content a.button:hover {
	background: var(--wp--preset--color--teal-700);
	color: #fff;
}

/* Subscription detail action buttons (Cancel, Change payment, Renew) */
.woocommerce-MyAccount-content .subscription_details .button,
.woocommerce-MyAccount-content .order-actions .button {
	padding: 6px 16px;
	font-size: 0.75rem;
}

/* Upgrade/Downgrade button */
.woocommerce-MyAccount-content .button.subscription_switch_link {
	border-color: var(--wp--preset--color--coral-500);
	color: var(--wp--preset--color--coral-500);
}

.woocommerce-MyAccount-content .button.subscription_switch_link:hover {
	background: var(--wp--preset--color--coral-500);
	color: #fff;
}

/* JSN eSIM button on detail page — teal filled since it's a primary action */
.woocommerce-MyAccount-content .jsn-esim-toggle,
.woocommerce-MyAccount-content button.jsn-esim-toggle {
	background: var(--wp--preset--color--teal-700);
	color: #fff;
	border-color: var(--wp--preset--color--teal-700);
}

.woocommerce-MyAccount-content .jsn-esim-toggle:hover {
	background: var(--wp--preset--color--teal-900);
	border-color: var(--wp--preset--color--teal-900);
}

/* Login/Register forms — full width within their column */
.woocommerce-form-login,
.woocommerce-form-register {
	max-width: none;
}

/* My Account login/register — two column layout (logged-out state).
   The .u-columns sits inside .woocommerce which is inside
   wp-block-post-content. We need full width here. */
.woocommerce-account .wp-block-post-content {
	max-width: none !important;
}

.woocommerce-account .u-columns {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 32px;
}

.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
	flex: 1;
	min-width: 280px;
}

.woocommerce-account .u-columns h2 {
	font-size: 1.25rem;
	margin-bottom: 16px;
}

/* Remove WC default card border on login/register forms */
.woocommerce-account .u-columns .woocommerce-form-login,
.woocommerce-account .u-columns .woocommerce-form-register {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
}

/* Password field position context (for .show-password-input toggle) */
.woocommerce-account .u-columns .woocommerce-form-row {
	position: relative;
}

.woocommerce-account .u-columns .form-row {
	margin-bottom: 16px;
}

/* Log in / Register buttons */
.woocommerce-account .u-columns button[type="submit"] {
	width: 100%;
	margin-top: 8px;
}

.woocommerce-account .u-columns .lost_password {
	text-align: center;
	margin-top: 12px;
	font-size: 0.8125rem;
}

.woocommerce-account .u-columns .lost_password a {
	color: var(--wp--preset--color--neutral-400);
}

.woocommerce-account .u-columns .woocommerce-privacy-policy-text {
	font-size: 0.75rem;
	color: var(--wp--preset--color--neutral-400);
	margin-bottom: 12px;
}

.woocommerce-account .u-columns .automatewoo-optin {
	font-size: 0.8125rem;
}

.woocommerce-account .u-columns .automatewoo-optin label {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.8125rem;
	color: #1d1d1f;
}