/* ============================================================
   MEMBERSHIP PRODUCT PAGE — WOOCOMMERCE REBRAND
   Scoped to .membership-product-page so it only hits this template.
   Drop this at the bottom of site.css (tokens already live there).
============================================================ */

/* WooCommerce's own woocommerce-layout.css ships default float-based
   single-product layout (div.images / div.summary at width:48%,
   floated) for themes without WC theme support declared. Both our
   gallery and summary divs carry those plugin classes ('images',
   'summary') alongside our own, so that core rule — 3 classes + 2
   element types — outranks anything we write here on specificity
   alone, regardless of load order. Its width:48% then resolves
   against our (already narrow) grid cell rather than the page,
   which is why the image was rendering tiny. !important is the
   clean way to beat it; there's no higher-specificity selector here
   that doesn't risk over-matching other WooCommerce contexts. */
.membership-product-page .product .images,
.membership-product-page .product > .summary {
	width: 100% !important;
	float: none !important;
}

.membership-product-page .product {
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 40px;
	align-items: start;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--sh-panel-radius, 16px);
	padding: 40px;
}

/* ------------------------------------------------------------
   Gallery
------------------------------------------------------------ */
.membership-product-page .woocommerce-product-gallery {
	border-radius: var(--sh-input-radius, 8px);
	overflow: hidden;
}

.membership-product-page .woocommerce-product-gallery__image img {
	border-radius: var(--sh-panel-radius, 16px);
}

/* ------------------------------------------------------------
   Summary column
------------------------------------------------------------ */
.membership-product-page .summary {
	padding-top: 4px;
}

.membership-product-page .product_title {
	font-family: 'Sora', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 14px;
}

/* Price — recast the plain WC price string as a navy/yellow pill */
.membership-product-page p.price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	background: var(--navy);
	color: var(--white);
	padding: 10px 20px;
	border-radius: 10px;
	font-family: 'Sora', sans-serif;
	margin: 0 0 24px;
}

.membership-product-page p.price .woocommerce-Price-amount {
	font-size: 26px;
	font-weight: 700;
	color: var(--yellow);
}

.membership-product-page p.price .woocommerce-Price-currencySymbol {
	color: var(--yellow);
}

.membership-product-page p.price .price_time_opt {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
}

/* Short description — recolour the tick icons that are already in the content */
.membership-product-page .woocommerce-product-details__short-description p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--text-mid);
	margin: 0 0 28px;
}

.membership-product-page .woocommerce-product-details__short-description .fa-circle-check {
	color: var(--navy);
	margin-right: 4px;
}

/* ------------------------------------------------------------
   Variations form — card section, stacked: subscription select,
   account select, add-to-basket, each its own full-width row.
------------------------------------------------------------ */
.membership-product-page form.cart.variations_form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.woocommerce div.product form.cart {
	margin-bottom: 0;
}

/* Unwrap the <table>/<tbody> so their contents become direct grid children */
.membership-product-page form.cart table.variations,
.membership-product-page form.cart table.variations tbody {
	display: contents;
}

/* Each attribute row: label stacked above its select */
.membership-product-page form.cart table.variations tr {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.membership-product-page form.cart table.variations th.label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--navy);
	opacity: 0.6;
	padding: 0;
	text-align: left;
}

.membership-product-page form.cart table.variations td.value {
	position: relative;
	padding: 0;
}

.membership-product-page form.cart a.reset_variations {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.membership-product-page form.cart table.variations select {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--border);
	border-radius: var(--sh-input-radius, 8px);
	background: var(--white);
	color: var(--text);
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.membership-product-page form.cart table.variations select:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(6, 4, 67, 0.07);
}

.membership-product-page form.cart a.reset_variations:hover {
	color: var(--navy);
}

/* Add-to-basket flows into its own row, full width, below the selects */
.membership-product-page form.cart .single_variation_wrap {
	display: contents;
}

.membership-product-page form.cart .woocommerce-variation-add-to-cart.variations_button {
	display: flex;
	align-items: center;
}

.membership-product-page form.cart .single_add_to_cart_button,
.membership-product-page form.cart .single_add_to_cart_button.disabled,
.membership-product-page form.cart .single_add_to_cart_button:disabled {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--navy) !important;
	color: var(--white) !important;
	border: none !important;
	padding: 14px 24px;
	border-radius: 9px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s;
}

.membership-product-page form.cart .single_add_to_cart_button:hover {
	background: var(--navy-dark) !important;
}

/* Variation-specific price/description — populated by WC's JS once a
   valid combination is selected — flows naturally between the selects
   and the button */
.membership-product-page form.cart .woocommerce-variation.single_variation {
	width: 100%;
}

.membership-product-page form.cart .woocommerce-variation-price {
	margin-top: 4px;
}

.membership-product-page form.cart .woocommerce-variation-price .woocommerce-Price-amount {
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	color: var(--navy);
	font-size: 20px;
}

/* Meta row (SKU / category) */
.membership-product-page .product_meta {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	color: var(--text-muted);
}

.membership-product-page .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.membership-product-page .product_meta a {
	color: var(--navy);
	font-weight: 600;
}

/* ------------------------------------------------------------
   Description — no tab chrome, just an HR-style divider and a plain
   heading. The tab nav (ul.tabs) is hidden outright rather than left
   empty; WooCommerce's own JS always marks the first tab active on
   load, so the panel below is already visible with the nav gone — no
   JS changes needed. If a second tab (reviews, additional info) ever
   gets added back, this will need revisiting since visitors would
   have no way to switch tabs.
------------------------------------------------------------ */
.membership-product-page .woocommerce-tabs {
	grid-column: 1 / -1;
}

.membership-product-page .woocommerce-tabs ul.tabs {
	display: none;
}

.membership-product-page .woocommerce-Tabs-panel {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

.membership-product-page .woocommerce-Tabs-panel h2 {
	font-family: 'Sora', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

.membership-product-page .woocommerce-Tabs-panel p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--text-mid);
	margin: 0 0 16px;
}

.membership-product-page .woocommerce-Tabs-panel strong {
	color: var(--navy);
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 900px) {
	.site-main.membership-product-page {
		padding: 30px 24px;
	}

	.membership-product-page .product {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px;
	}
}