/* =========================================================================
   VuePod — woocommerce.css
   Dark "deep-sea glass" skin for the WooCommerce pages (product, shop, cart,
   checkout, account). The front page and the custom page.php docs already render
   dark; only Woo pages use GeneratePress's default .inside-article (white card),
   so this file loads *only* on Woo pages and re-skins them to match the brand.
   Tokens come from vuepod.css (:root vars).
   ========================================================================= */

/* ---- The GeneratePress content card -> dark glass ---- */
.inside-article,
.woocommerce .inside-article,
.separate-containers .inside-article,
.woocommerce-page .inside-article {
	background-color: var( --vp-surface, rgba( 255, 255, 255, 0.035 ) );
	border: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
	border-radius: var( --vp-radius, 18px );
	box-shadow: var( --vp-shadow, 0 24px 60px -24px rgba( 2, 6, 23, 0.8 ) );
}

.woocommerce .entry-header,
.woocommerce .page-header { background: transparent; }

.inside-article h1,
.inside-article h2,
.inside-article h3,
.woocommerce .entry-content h1,
.woocommerce .entry-content h2,
.woocommerce .entry-content h3,
.woocommerce-page h1,
.woocommerce-page h2 { color: var( --vp-white, #fff ); }

/* ---- Breadcrumb ---- */
.woocommerce .woocommerce-breadcrumb {
	color: var( --vp-text-mut, #7c8bab );
	font-size: 0.9rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var( --vp-text-dim, #aab8d4 ); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var( --vp-sky, #7dd3fc ); }

/* ---- Product summary ---- */
.woocommerce div.product .product_title { color: var( --vp-white, #fff ); }

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var( --vp-sky, #7dd3fc );
	font-weight: 700;
}
.woocommerce div.product p.price del { color: var( --vp-text-mut, #7c8bab ); }

.woocommerce .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
	color: var( --vp-text-dim, #aab8d4 );
}

.woocommerce div.product .stock,
.woocommerce .stock.in-stock { color: #6ee7b7; }
.woocommerce .stock.out-of-stock { color: #fca5a5; }
/* Hide the exact in-stock count ("500 in stock") — the Add to cart button already
   implies availability. Out-of-stock notices stay visible. */
.woocommerce div.product .summary .stock.in-stock { display: none !important; }

.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a { color: var( --vp-text-mut, #7c8bab ); }
.woocommerce div.product .product_meta a:hover { color: var( --vp-sky, #7dd3fc ); }
/* Hide the SKU + Category line — internal data, not useful to shoppers. */
.woocommerce div.product .summary .product_meta { display: none; }

/* Quantity stepper */
.woocommerce .quantity input.qty {
	background: rgba( 255, 255, 255, 0.05 );
	color: var( --vp-text, #eaf2ff );
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	border-radius: 10px;
}

/* ---- Buttons (Woo defaults -> brand) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var( --vp-surface-2, rgba( 255, 255, 255, 0.06 ) );
	color: var( --vp-text, #eaf2ff );
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	border-radius: 999px;
	font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: rgba( 255, 255, 255, 0.1 ); color: #fff; }

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: linear-gradient( 180deg, var( --vp-sky, #7dd3fc ), var( --vp-sky-deep, #38bdf8 ) );
	color: var( --vp-ink, #020617 );
	border: 0;
	font-weight: 700;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { filter: brightness( 1.05 ); color: var( --vp-ink, #020617 ); }


/* ---- Tabs (Reviews etc.) ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var( --vp-border, rgba( 255, 255, 255, 0.14 ) ); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: rgba( 255, 255, 255, 0.04 );
	border-color: var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: rgba( 255, 255, 255, 0.08 );
	border-bottom-color: rgba( 255, 255, 255, 0.08 );
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var( --vp-text-dim, #aab8d4 ); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel p,
.woocommerce #reviews,
.woocommerce #reviews .comment-text { color: var( --vp-text, #eaf2ff ); }

/* ---- Form fields (review form, cart, checkout, account) ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea,
.woocommerce-account form input.input-text,
.wc-block-components-text-input input,
.wc-block-components-text-input textarea {
	background: rgba( 255, 255, 255, 0.05 ) !important;
	color: var( --vp-text, #eaf2ff ) !important;
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) ) !important;
	border-radius: 10px;
	min-height: 44px !important;
	padding-top: 13px !important;
	padding-bottom: 5px !important;
}
.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
.wc-block-components-text-input input::placeholder { color: var( --vp-text-mut, #7c8bab ); }
.woocommerce label,
.woocommerce-account label,
.wc-block-components-text-input label { color: var( --vp-text-dim, #aab8d4 ); }

/* Country / State selects (WC Blocks) — match the dark field skin instead of
   the default bright-white box, and keep the selected value readable. */
.wc-blocks-components-select,
.wc-blocks-components-select__container {
	background: rgba( 255, 255, 255, 0.05 ) !important;
	border-radius: 10px !important;
}
.wc-blocks-components-select__container {
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) ) !important;
}
.wc-blocks-components-select__select {
	background: transparent !important;
	color: var( --vp-text, #eaf2ff ) !important;
}
.wc-blocks-components-select__label { color: var( --vp-text-dim, #aab8d4 ) !important; }
/* The native option list opens on an OS-white surface — keep its text dark. */
.wc-blocks-components-select__select option { color: #0b1220; }

/* ---- Tables (cart / order review / account) ---- */
.woocommerce table.shop_table {
	background: var( --vp-surface, rgba( 255, 255, 255, 0.035 ) );
	border-color: var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	color: var( --vp-text, #eaf2ff );
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) ); color: var( --vp-text, #eaf2ff ); }
.woocommerce table.shop_table a { color: var( --vp-text-dim, #aab8d4 ); }

/* ---- WooCommerce Blocks (cart & checkout) ---- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart,
.wc-block-components-totals-item,
.wc-block-components-product-name,
.wc-block-components-order-summary-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var( --vp-text, #eaf2ff );
}
.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata { color: var( --vp-text-dim, #aab8d4 ); }
.wc-block-components-panel,
.wc-block-components-totals-wrapper { border-color: var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) ) !important; }
.wc-block-components-checkout-step__title,
.wc-block-components-title { color: var( --vp-white, #fff ) !important; }

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: rgba( 255, 255, 255, 0.05 );
	color: var( --vp-text, #eaf2ff );
	border-top: 3px solid var( --vp-sky, #7dd3fc );
}
.woocommerce-message a,
.woocommerce-info a { color: var( --vp-sky, #7dd3fc ); }

/* ---- Related products heading ---- */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 { color: var( --vp-white, #fff ); }

/* ---- Product layout: centered two-column grid ---------------------------
   Gallery (left) + summary (right) sit on one row; tabs, related products and
   the extras section span full width. Overrides WooCommerce's default floats
   and 48% widths. */
/* Mobile-first: a single safe column by default, so a phone can never end up
   running the two-column grid (which squeezes the gallery into a sliver and
   overlaps the title — seen on iOS WebKit). The desktop two-column layout is
   opted into at >=769px only. */
.woocommerce div.product {
	max-width: 560px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}
.woocommerce div.product::before,
.woocommerce div.product::after { content: none; }
.woocommerce div.product > * { grid-column: 1; min-width: 0; }
.woocommerce div.product > .vp-gallery {
	grid-column: 1; grid-row: auto; width: 100%; float: none; margin: 0;
}
/* div.summary (not just .summary) — must out-rank Woo core's
   `div.product div.summary { width: 48% }`, which silently shrank the column. */
.woocommerce div.product > div.summary {
	grid-column: 1; grid-row: auto; width: 100%; float: none; margin: 0;
}

@media ( min-width: 769px ) {
	.woocommerce div.product {
		max-width: 1200px;
		grid-template-columns: minmax( 0, 460px ) 1fr;
		gap: 48px;
	}
	.woocommerce div.product > * { grid-column: 1 / -1; }
	.woocommerce div.product > .vp-gallery {
		grid-column: 1; grid-row: 1; width: auto;
	}
	.woocommerce div.product > div.summary {
		grid-column: 2; grid-row: 1;
	}
}

/* ---- Static product gallery: unified square image cards ---- */
.vp-gallery { width: 100%; }
.vp-gallery__main {
	aspect-ratio: 1 / 1;
	width: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 28px;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
	overflow: hidden;
}
.vp-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }

.vp-gallery__thumbs {
	list-style: none; margin: 14px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat( 6, 1fr ); gap: 10px;
}
.vp-gallery__thumbs li { margin: 0; }
.vp-gallery__thumb {
	display: block; width: 100%; aspect-ratio: 1 / 1; margin: 0; padding: 7px;
	background: #fff;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
	cursor: pointer;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.vp-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-gallery__thumb:hover { transform: translateY( -2px ); }
.vp-gallery__thumb.is-active {
	border: 2px solid #1b3a7a;
	padding: 6px;
	box-shadow: 0 0 0 3px rgba( 27, 58, 122, 0.16 ), 0 8px 24px rgba( 0, 0, 0, 0.18 );
}

/* ---- Summary right column: USP bullets + trust badges ---- */
.woocommerce div.product .summary .vp-product__usps {
	list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px;
}
.woocommerce div.product .summary .vp-product__usps li {
	position: relative; padding-left: 28px;
	color: var( --vp-text-dim, #aab8d4 ); font-size: 0.98rem; line-height: 1.5;
}
.woocommerce div.product .summary .vp-product__usps li::before {
	content: ''; position: absolute; left: 0; top: 0.18em; width: 18px; height: 18px;
	background: var( --vp-sky, #7dd3fc );
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- Empty cart: swap Woo's crying-face icon for a clean cart outline ---- */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-image: none;
	background-color: var( --vp-sky, #7dd3fc );
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
	width: 64px;
	height: 64px;
	opacity: 0.85;
}

/* ---- Rounded product imagery everywhere else (cart, checkout, loops) ---- */
.wc-block-cart-item__image,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img,
.woocommerce ul.products li.product a img,
.woocommerce .related li.product a img,
.woocommerce .up-sells li.product a img,
.woocommerce-cart-form .cart_item .product-thumbnail img,
.woocommerce table.shop_table .product-thumbnail img,
.widget_shopping_cart .cart_list img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
	border-radius: 10px !important;
}
/* The order-summary thumb also carries a default border that should follow the radius. */
.wc-block-components-order-summary-item__image {
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	align-self: flex-start;
	overflow: hidden;
	border: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
}
.wc-block-components-order-summary-item__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
/* Order summary line item: stack image on its own row, then name + price below
   (the narrow summary column wrapped the side-by-side layout badly). Drop the
   long product description and the redundant per-unit price. */
.wc-block-components-order-summary-item {
	flex-direction: column !important;
	gap: 10px;
}
.wc-block-components-order-summary-item__description { padding: 0 !important; }
/* Hide only the product description in line items — add-on details (e.g. the
   silicone shell) must stay visible so the line price is explainable. */
.wc-block-components-product-metadata__description { display: none !important; }
.wc-block-components-order-summary-item__individual-prices { display: none !important; }
/* Hide the corner quantity badge on the thumbnail (reads as a stray dot/curl for qty 1). */
.wc-block-components-order-summary-item__quantity { display: none !important; }

/* ---- PDP add-to-cart: tidy spacing (silicone add-on on its own row, then qty + buttons) ---- */
.woocommerce div.product form.cart {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 22px;
}
.woocommerce div.product form.cart .vp-addon { flex-basis: 100%; margin: 0; }
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .vp-product__buynow-btn { margin: 0; }
/* Qty pill: labelled, same height + shape language as the two buttons. */
.woocommerce div.product form.cart .quantity {
	display: inline-flex; align-items: center; gap: 8px;
	height: 52px; padding: 0 8px 0 18px;
	background: var( --vp-surface, rgba( 255, 255, 255, 0.04 ) );
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	border-radius: 999px;
}
.woocommerce div.product form.cart .quantity::before {
	content: 'Qty';
	font-family: var( --vp-font-display, inherit ); font-weight: 600;
	font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var( --vp-text-mut, #7c8db0 );
}
.woocommerce div.product form.cart .quantity input.qty {
	width: 52px; height: 38px; border: 0; background: transparent;
	color: #fff; font-size: 1.05rem; font-weight: 600; text-align: center; padding: 0;
}
/* The two buttons: identical height and scale. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .vp-product__buynow-btn {
	height: 52px; padding: 0 30px; font-size: 1rem;
	display: inline-flex; align-items: center; justify-content: center;
}
/* Woo's form button rules force white text; restore the primary button's ink. */
.woocommerce div.product form.cart .vp-product__buynow-btn.vp-btn--primary,
.woocommerce div.product form.cart .vp-product__buynow-btn.vp-btn--primary:hover { color: #03182e; }

/* ---- Product specifications table (PDP) ---- */
.vp-product-specs { margin-top: clamp( 40px, 6vw, 68px ); }
.vp-product-specs > h2 { color: var( --vp-white, #fff ); margin: 0 0 18px; }
.woocommerce div.product .vp-product-extras h2 { font-size: clamp( 1.55rem, 3vw, 2.1rem ) !important; color: var( --vp-white, #fff ); margin: 0 0 16px; }
.vp-specs { margin: 0; max-width: 720px; }
.vp-specs__row {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 16px;
	padding: 13px 2px;
	border-bottom: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
}
.vp-specs__row dt { color: var( --vp-text-dim, #aab8d4 ); font-family: var( --vp-font-display, inherit ); font-weight: 500; }
.vp-specs__row dd { margin: 0; color: var( --vp-text, #eaf2ff ); }
@media ( max-width: 560px ) {
	.vp-specs__row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---- My Account area ------------------------------------------------- */
/* The account pages render inside page.php's .vp-doc-wrap, which is sized for
   prose (820px). Account screens are application UI — give them a wide canvas. */
.woocommerce-account .vp-doc-wrap { max-width: 1100px; }
/* Woo core floats + 48% widths fight the grid/flex layouts — neutralise. */
.woocommerce-MyAccount-content .col2-set .col-1,
.woocommerce-MyAccount-content .col2-set .col-2 { float: none !important; width: auto !important; max-width: none !important; }
/* Woo's clearfix pseudo-elements become invisible grid items and shove the
   address cards out of their cells — remove them inside the grid. */
.woocommerce-MyAccount-content .col2-set::before,
.woocommerce-MyAccount-content .col2-set::after { content: none !important; display: none !important; }

/* Two-column layout: nav rail + content. */
.woocommerce-MyAccount-navigation { float: none !important; width: 220px !important; }
.woocommerce-MyAccount-content { float: none !important; width: auto !important; overflow: hidden; }
@media ( min-width: 769px ) {
	.vp-doc .woocommerce { display: flex; gap: 40px; align-items: flex-start; }
	.woocommerce-MyAccount-content { flex: 1; min-width: 0; }
}

/* Logged-out login / register: WooCommerce renders these as two 48% floats of
   unequal height (Register carries extra copy), so the cards look lopsided.
   On desktop, lay them out as equal-width flex columns that stretch to match —
   the Login and Register boxes end up the same size and symmetric. The col2-set
   clearfix pseudos would otherwise become phantom flex items and steal gap
   space, so drop them here too (mirrors the account-content fix above). Mobile
   (< 769px) keeps WooCommerce's stacked default untouched. */
@media ( min-width: 769px ) {
	#customer_login.u-columns { display: flex; gap: 40px; align-items: stretch; }
	#customer_login.u-columns::before,
	#customer_login.u-columns::after { content: none !important; display: none !important; }
	#customer_login.u-columns > .u-column1,
	#customer_login.u-columns > .u-column2 {
		float: none !important; width: auto !important; margin: 0 !important;
		flex: 1 1 0; display: flex; flex-direction: column;
	}
	#customer_login.u-columns > .u-column1 > .woocommerce-form-login,
	#customer_login.u-columns > .u-column2 > .woocommerce-form-register { flex: 1 1 auto; margin-bottom: 0; }
}

/* Nav: pills, no bullets, no underline, active state. */
.vp-prose .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
}
.vp-prose .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.vp-prose .woocommerce-MyAccount-navigation li::before { content: none; }
.vp-prose .woocommerce-MyAccount-navigation a {
	display: block; padding: 10px 16px; border-radius: 10px;
	font-family: var( --vp-font-display, inherit ); font-weight: 500; font-size: 0.97rem;
	color: var( --vp-text-dim, #aab8d4 );
	border: 1px solid transparent;
	text-decoration: none; box-shadow: none;
}
.vp-prose .woocommerce-MyAccount-navigation a:hover { color: #fff; background: var( --vp-surface, rgba( 255, 255, 255, 0.04 ) ); }
.vp-prose .woocommerce-MyAccount-navigation li.is-active a {
	color: #fff;
	background: var( --vp-surface, rgba( 255, 255, 255, 0.05 ) );
	border-color: var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
}

/* Content: form submit buttons take the brand primary. */
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content .button[type="submit"] {
	border: 0; color: #03182e;
	background: linear-gradient( 135deg, #aee7ff 0%, var( --vp-sky, #7dd3fc ) 45%, var( --vp-sky-deep, #38bdf8 ) 100% );
	box-shadow: 0 14px 34px -12px rgba( 56, 189, 248, 0.6 );
}
.woocommerce-MyAccount-content button.button:hover { color: #03182e; }

/* Addresses: card per address, header row with the edit link. */
.woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media ( max-width: 640px ) { .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-content .woocommerce-Address {
	max-width: none !important; width: auto !important;
	background: var( --vp-surface, rgba( 255, 255, 255, 0.04 ) );
	border: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
	border-radius: 14px; padding: 20px 22px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; font-size: 1.15rem; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit { font-size: 0.88rem; }
.woocommerce-MyAccount-content address { font-style: normal; color: var( --vp-text-dim, #aab8d4 ); margin-top: 10px; }

/* Customer details block on the order view. */
.woocommerce-customer-details address {
	font-style: normal;
	background: var( --vp-surface, rgba( 255, 255, 255, 0.04 ) );
	border: 1px solid var( --vp-border-soft, rgba( 255, 255, 255, 0.08 ) );
	border-radius: 14px; padding: 18px 22px;
	color: var( --vp-text-dim, #aab8d4 );
}

/* ---- Cart / checkout primary action buttons (WC Blocks) ---- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border: 0 !important; border-radius: 999px !important;
	background: linear-gradient( 135deg, #aee7ff 0%, var( --vp-sky, #7dd3fc ) 45%, var( --vp-sky-deep, #38bdf8 ) 100% ) !important;
	color: #03182e !important;
	font-weight: 700 !important; text-decoration: none !important;
	box-shadow: 0 14px 34px -12px rgba( 56, 189, 248, 0.6 );
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	color: #03182e !important;
	box-shadow: 0 20px 44px -12px rgba( 56, 189, 248, 0.75 );
}

/* ---- Shop archive polish ---- */
.woocommerce ul.products li.product .price { color: var( --vp-sky, #7dd3fc ) !important; font-weight: 700; }
.woocommerce .woocommerce-result-count { color: var( --vp-text-mut, #7c8bab ); }
.woocommerce .woocommerce-ordering select {
	background: rgba( 255, 255, 255, 0.05 );
	color: var( --vp-text, #eaf2ff );
	border: 1px solid var( --vp-border, rgba( 255, 255, 255, 0.14 ) );
	border-radius: 10px; padding: 8px 12px;
}
.woocommerce .woocommerce-ordering select option { color: #0b1220; }

/* R33: sale badge — a clean brand pill instead of WooCommerce's default olive
   circle (rgb(149,142,9), border-radius:100%). Sits top-left of the product
   gallery / shop thumbnail; reads as a deal without looking cheap. */
.woocommerce span.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	bottom: auto;
	min-height: 0;
	min-width: 0;
	height: auto;
	width: auto;
	margin: 0;
	padding: 6px 13px;
	line-height: 1;
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 8px 20px -8px rgba( 225, 29, 72, 0.7 );
	z-index: 2;
}
/* Archive: anchor the badge to its own card and inset it top-left. Woo core
   positions the loop flash top:0/right:0 with higher specificity than the base
   rule above, so match its specificity to override — keeps PDP + shop consistent. */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product span.onsale { top: 14px; left: 14px; right: auto; }


/* =========================================================================
   Round 29 - cloud plan add-on + pricing table (PDP)
   ========================================================================= */
.vp-addon--cloud .vp-addon__select {
	margin-top: 8px;
	width: 100%;
	background: rgba( 6, 18, 48, 0.6 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 10px;
	color: #fff;
	padding: 10px 12px;
	font-size: 0.9rem;
}
.vp-addon--cloud .vp-addon__select option { color: #1c2434; background: #fff; }
.vp-product-cloud { margin: 0 auto clamp( 36px, 5vw, 56px ); }
.vp-product-cloud h2 { margin: 0 0 10px; }
.vp-product-cloud__sub { color: var( --vp-text-dim, #aab8d4 ); max-width: 680px; margin: 0 0 16px; }
.vp-cloud-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vp-cloud-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.vp-cloud-table th,
.vp-cloud-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	color: #dbe4f5;
	font-size: 0.92rem;
}
.vp-cloud-table th {
	color: var( --vp-text-dim, #aab8d4 );
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.vp-cloud-table td strong { color: #fff; }
.vp-product-cloud__note { color: var( --vp-text-dim, #aab8d4 ); font-size: 0.9rem; margin: 12px 0 0; }


/* R30: cloud plan tick cards (replaces the select dropdown) */
/* R33: the fieldset carries the shared .vp-addon class (display:flex, a row
   layout for the silicone checkbox card in store.css). Left unchecked it squished
   the legend + intro paragraph + 4 option rows into one cramped row. Force it to
   stack; cursor:default because the whole fieldset isn't a single click target. */
fieldset.vp-addon--cloud { border: 0; padding: 0; margin: 0; min-width: 0; display: block; cursor: default; max-width: 460px; }
.vp-addon--cloud legend.vp-addon__title { display: block; padding: 0; margin: 0 0 4px; }
.vp-addon--cloud .vp-addon__sub { display: block; margin: 0 0 6px; }
.vp-cloud-opt {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	margin-top: 8px;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.vp-cloud-opt:hover { border-color: rgba( 125, 211, 252, 0.5 ); }
.vp-cloud-opt:has( input:checked ) { border-color: var( --vp-sky, #7dd3fc ); background: rgba( 125, 211, 252, 0.08 ); }
.vp-cloud-opt input[type='radio'] { margin: 3px 0 0; accent-color: var( --vp-sky, #7dd3fc ); flex: 0 0 auto; }
.vp-cloud-opt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-cloud-opt__name { font-weight: 600; color: #fff; font-size: 0.92rem; }
.vp-cloud-opt__desc { color: var( --vp-text-dim, #aab8d4 ); font-size: 0.8rem; }