/**
 * Single product pages (merchandise).
 *
 * Loaded on is_product() by fg_enqueue_product_styles(). Membership products
 * render their own template without the standard div.product wrapper, so the
 * structural rules below never match them; :not(.product_cat-membership) is
 * kept anyway as a guard.
 *
 * Same design language as checkout (assets/css/checkout.css): white cards on
 * the page canvas, 10px radius, --fg-line borders, brand green actions, Lato.
 * Tokens duplicated from checkout.css -- keep the values in sync.
 *
 * Load order works against us here too: the external blog-style.css loads
 * AFTER this file (header.php includes exthead after wp_head), so every
 * override is at least one level more specific than the rule it replaces --
 * usually via the body.single-product prefix. That extra specificity is
 * load-bearing.
 */

:root {
	--fg-green: #50ae26;
	--fg-green-dark: #46991f;
	--fg-ink: #1c1e21;
	--fg-muted: #6b7280;
	--fg-line: #e2e5e8;
	--fg-field: #b8bfc6;
	--fg-surface: #ffffff;
	--fg-radius: 0; /* square corners across the store, per design */
}

body.single-product #blogcontent,
body.single-product .fp__woo-commerce #blogcontent,
body.single-product .fullpostentry {
	max-width: none;
	width: 100%;
	padding: 0; /* gutter owned by #content alone, matching cart/checkout */
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Layout.
 *
 * blog-style.css floats gallery and summary at 50% each. Flex replaces the
 * floats: title spans the row, gallery and summary sit side by side with a
 * real gap, related products span below.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
	align-items: flex-start;
	max-width: 1020px;
	margin: 0 auto;
	text-align: left;
}

body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) > .product_title {
	flex: 1 1 100%;
	max-width: none;
	width: 100%;
	margin: 6px 0 18px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) .woocommerce-product-gallery {
	float: none;
	width: auto;
	flex: 1 1 420px;
	min-width: 0;
}

body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) .entry-summary {
	float: none;
	width: auto;
	flex: 1 1 340px;
	min-width: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Gallery: main image in a card, thumbnails as a tidy strip beneath.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .woocommerce-product-gallery__wrapper {
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	padding: 18px;
	margin: 0;
}

body.single-product .fp__woo-commerce .woocommerce-product-gallery__wrapper img {
	border-radius: 0;
}

body.single-product .fp__woo-commerce .woocommerce-product-gallery__thumbnails {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

body.single-product .fp__woo-commerce .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image {
	width: auto;
	flex: 0 0 84px;
	padding: 0;
	border: 1px solid var(--fg-line);
	border-radius: 0;
	overflow: hidden;
	background: var(--fg-surface);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

body.single-product .fp__woo-commerce .woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image:hover {
	border-color: var(--fg-green);
}

/* -------------------------------------------------------------------------
 * Summary column: price, description, options, add to cart.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .entry-summary .price {
	margin: 2px 0 10px;
	font-size: 24px;
	font-weight: 700;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce .woocommerce-product-details__short-description {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-muted);
}

/* Authored headings inside the description (e.g. the shipping-date callout)
   arrive as h2-h4 and were rendering as oversized grey banners via the theme's
   global heading rules. Keep them as emphasis, not headlines. */
body.single-product .fp__woo-commerce .woocommerce-product-details__short-description h1,
body.single-product .fp__woo-commerce .woocommerce-product-details__short-description h2,
body.single-product .fp__woo-commerce .woocommerce-product-details__short-description h3,
body.single-product .fp__woo-commerce .woocommerce-product-details__short-description h4,
body.single-product .fp__woo-commerce .woocommerce-Tabs-panel h3,
body.single-product .fp__woo-commerce .woocommerce-Tabs-panel h4 {
	max-width: none;
	margin: 14px 0 10px;
	padding: 0;
	border: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fg-ink);
}

/* Variations: label above a full-width select, matching checkout fields. */
body.single-product .fp__woo-commerce .variations {
	width: 100%;
	margin: 0 0 6px;
	border-collapse: collapse;
}

body.single-product .fp__woo-commerce .variations tr {
	display: block;
	margin: 0 0 14px;
}

body.single-product .fp__woo-commerce .variations .label,
body.single-product .fp__woo-commerce .variations th.label label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-ink);
	text-align: left;
}

body.single-product .fp__woo-commerce .variations td.value {
	display: block;
	width: 100%;
	max-width: 340px;
}

body.single-product .fp__woo-commerce .variations select {
	width: 100%;
	min-width: 0;
	padding: 12px;
	padding-right: 34px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	background-color: var(--fg-surface);
	font-size: 16px;
	line-height: 1.3;
	color: var(--fg-ink);
	-webkit-appearance: none;
	appearance: none;
}

body.single-product .fp__woo-commerce .variations select:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

/* Keep blog-style's dropdown arrow overlay aligned with the new input height. */
body.single-product .fp__woo-commerce .variations .value:after {
	right: 14px;
	top: 50%;
	margin-top: -3px;
	position: absolute;
}

/* Per-variation price + stock, shown after choosing options. */
body.single-product .fp__woo-commerce .woocommerce-variation-price .price {
	font-size: 20px;
}

body.single-product .fp__woo-commerce .stock.in-stock {
	color: var(--fg-green);
	font-size: 14px;
	font-weight: 600;
}

body.single-product .fp__woo-commerce .stock.out-of-stock {
	color: #d63638;
	font-size: 14px;
	font-weight: 600;
}

/* Quantity + add to cart: ONE ROW -- quantity box on the left, button filling
   the rest. A flex row can't misalign the way a floating box on its own line
   can, and it reads as a single action.

   .woocommerce-variation-add-to-cart wraps qty+button on variable products;
   form.cart:not(.variations_form) is the simple-product equivalent. */
body.single-product .fp__woo-commerce .woocommerce-variation-add-to-cart,
body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) .entry-summary form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: 10px;
	max-width: 340px;
	margin: 4px 0 0;
	text-align: left;
}

body.single-product .fp__woo-commerce .entry-summary .quantity {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	float: none;
	flex: 0 0 auto;
	margin: 0;
}

/* This label is meant to be screen-reader-only; blog-style.css un-hides it
   with !important clip/width overrides, so it has to be re-hidden the same
   way. Kept in the accessibility tree via the clip pattern, not display:none. */
body.single-product .fp__woo-commerce .entry-summary .quantity label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	overflow: hidden !important;
	margin: 0;
	padding: 0;
}

body.single-product .fp__woo-commerce .entry-summary input.qty {
	box-sizing: border-box;
	width: 76px;
	height: auto;
	min-width: 0;
	padding: 11px 8px;
	border: 1px solid var(--fg-field);
	border-radius: 0;
	font-size: 16px;
	text-align: center;
}

body.single-product .fp__woo-commerce .entry-summary input.qty:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

body.single-product .fp__woo-commerce .entry-summary .single_add_to_cart_button {
	display: block;
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 15px 24px;
	border: 0;
	border-radius: 0;
	background-color: var(--fg-green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.single-product .fp__woo-commerce .entry-summary .single_add_to_cart_button:hover,
body.single-product .fp__woo-commerce .entry-summary .single_add_to_cart_button:focus {
	background-color: var(--fg-green-dark);
	opacity: 1;
}

body.single-product .fp__woo-commerce .entry-summary .single_add_to_cart_button:disabled {
	opacity: 0.55;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Tabs (Description / Additional information).
 *
 * A direct child of div.product between the summary and related products, so
 * without an explicit basis it would wedge into the flex row beside the
 * summary. Also one of the woocommerce.css-dependent widgets this theme
 * renders raw: unstyled list + panels.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .woocommerce-tabs {
	flex: 1 1 100%;
	margin: 34px 0 0;
}

body.single-product .fp__woo-commerce .woocommerce-tabs ul.wc-tabs {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--fg-line);
}

body.single-product .fp__woo-commerce .woocommerce-tabs ul.wc-tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .fp__woo-commerce .woocommerce-tabs ul.wc-tabs li a {
	display: block;
	padding: 10px 16px;
	border: 0;
	border-bottom: 3px solid transparent;
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-muted);
	text-decoration: none;
}

body.single-product .fp__woo-commerce .woocommerce-tabs ul.wc-tabs li.active a,
body.single-product .fp__woo-commerce .woocommerce-tabs ul.wc-tabs li a:hover {
	color: var(--fg-ink);
	border-bottom-color: var(--fg-green);
}

body.single-product .fp__woo-commerce .woocommerce-Tabs-panel {
	padding: 18px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-ink);
}

/* Panels open with their own h2 ("Description") -- redundant under an active
   tab of the same name, and it would catch the theme's green heading rule. */
body.single-product .fp__woo-commerce .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

/* -------------------------------------------------------------------------
 * Related products: a row of cards.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .related.products {
	flex: 1 1 100%;
	max-width: none;
	margin: 48px 0 0;
}

body.single-product .fp__woo-commerce .related.products > h2 {
	max-width: none;
	width: 100%;
	margin: 0 0 16px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 18px;
	font-weight: 700;
	color: var(--fg-ink);
	text-align: left;
}

body.single-product .fp__woo-commerce .related.products ul.products {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .fp__woo-commerce .related.products ul.products li.product {
	flex: 1 1 200px;
	max-width: calc( 25% - 12px );
	width: auto;
	margin: 0;
	padding: 14px;
	list-style: none;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product .fp__woo-commerce .related.products ul.products li.product:hover {
	border-color: var(--fg-field);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

body.single-product .fp__woo-commerce .related.products ul.products li.product img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

body.single-product .fp__woo-commerce .related.products li.product .woocommerce-loop-product__title {
	margin: 10px 0 4px;
	padding: 0;
	border: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce .related.products li.product .price {
	display: block;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg-ink);
}

/* The "View" button. blog-style.css absolutely positions loop buttons
   (ul.products a.button { position:absolute; bottom:10%; right:0 }), which
   with these shorter cards landed the button on top of the title and price.
   Static, full width, at the bottom of the card. */
body.single-product .fp__woo-commerce .related.products ul.products li.product a.button {
	position: static;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 16px;
	border-radius: 0;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

/* -------------------------------------------------------------------------
 * Notices ("... has been added to your cart", errors, info).
 *
 * Same treatment as the checkout notices in checkout.css -- that stylesheet
 * does not load on product pages, so these had kept blog-style.css's grey
 * slab with the heavy drop shadow. The blue ring in the old look was the
 * browser's default focus outline landing on the role="alert" element.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .woocommerce-message,
body.single-product .fp__woo-commerce .woocommerce-info,
body.single-product .fp__woo-commerce .woocommerce-error {
	box-shadow: none;
	outline: none;
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-left: 4px solid var(--fg-green);
	border-radius: var(--fg-radius);
	/* Top margin matters: the notice renders directly under the breadcrumb row,
	   whose green View-cart button hangs below the text baseline -- without
	   this the card sat almost touching it while floating 24px off the title. */
	margin: 16px 0 18px;
	padding: 13px 16px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-ink);
	text-align: left;
}

body.single-product .fp__woo-commerce .woocommerce-error {
	border-left-color: #d63638;
	color: #b32d2e;
}

body.single-product .fp__woo-commerce .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The "View cart" link inside the notice: quiet green action, not a button. */
body.single-product .fp__woo-commerce .woocommerce-message .button {
	position: static;
	display: inline;
	margin: 0 0 0 6px;
	padding: 0;
	min-width: 0;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg-green);
	text-decoration: underline;
}

body.single-product .fp__woo-commerce .woocommerce-message .button:hover {
	color: var(--fg-green-dark);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Breadcrumb / top nav row.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .woocommerce-breadcrumb {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--fg-muted);
}

body.single-product .fp__woo-commerce .woocommerce-breadcrumb a {
	color: var(--fg-green);
}

/* -------------------------------------------------------------------------
 * Narrow screens: single column, full-width action.
 * ---------------------------------------------------------------------- */
@media (max-width: 800px) {
	body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) {
		display: block;
	}

	body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) .entry-summary {
		margin-top: 20px;
		padding: 0;
	}

	body.single-product .fp__woo-commerce .variations td.value,
	body.single-product .fp__woo-commerce .woocommerce-variation-add-to-cart,
	body.single-product .fp__woo-commerce div.product:not(.product_cat-membership) .entry-summary form.cart:not(.variations_form) {
		max-width: none;
	}

	body.single-product .fp__woo-commerce .related.products ul.products li.product {
		max-width: calc( 50% - 8px );
	}
}

/* Express checkout button (Apple Pay / Google Pay / Link), printed after the
   add-to-cart form. Constrained to the same 340px action column as the
   qty + Add-to-cart row so the buttons stack cleanly under it. */
body.single-product .fp__woo-commerce .entry-summary #wc-stripe-express-checkout-element {
	max-width: 340px;
	margin: 10px 0 0 !important;
	clear: both;
}

@media (max-width: 800px) {
	body.single-product .fp__woo-commerce .entry-summary #wc-stripe-express-checkout-element {
		max-width: none;
	}
}

/* Same edge-flush fix as cart/checkout on small screens. */
@media (max-width: 800px) {
	body.single-product #content {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Gift products: the recipient form is collected at CHECKOUT.
 *
 * Smart Coupons' product-page recipient form is disabled in functions.php
 * (wc_sc_show_product_page_gift_form); fg_gift_recipient_note() prints this
 * one-line heads-up above the add-to-cart form instead. Recipient email +
 * message are asked in the checkout gift section, styled in checkout.css.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .fg-gift-note {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
 * Dark mode ("theme-fg" cookie -> body.dark-mode; the external styles turn
 * #wrapper near-black). Every rule in this file reads the tokens, so dark
 * support is this flip. Anything hardcoded light above was converted to a
 * token when this block landed -- keep it that way.
 * ---------------------------------------------------------------------- */
body.dark-mode {
	--fg-ink: #e8eaed;
	--fg-muted: #9aa1a8;
	--fg-line: #3a3d41;
	--fg-field: #5b6167;
	--fg-surface: #242628;
}

/* -------------------------------------------------------------------------
 * Donation (Name Your Price, product_cat-donation).
 *
 * The plugin prints its amount block (label + input + error region) inside
 * form.cart -- the same single-flex-row trap as the gift form above: the
 * Add-to-cart button sat BESIDE the block and, with align-items:stretch,
 * grew to its full height (giant faded button, error floating next to it).
 * The row wraps: amount block full-width on top, button on its own row.
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce div.product.product_cat-donation .entry-summary form.cart:not(.variations_form) {
	flex-wrap: wrap;
}

body.single-product .fp__woo-commerce div.product.product_cat-donation .entry-summary form.cart .nyp {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

/* The quantity wrapper holds only a hidden input here (sold individually);
   as an empty flex item it still indented the button row by one flex gap. */
body.single-product .fp__woo-commerce div.product.product_cat-donation .entry-summary .quantity {
	display: none;
}

body.single-product .fp__woo-commerce .nyp label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce .nyp input.nyp-input {
	display: block;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid var(--fg-field);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce .nyp input.nyp-input:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

/* The validation message sits under the field, snug -- the page-level
   notice margins were built for notices between sections. */
body.single-product .fp__woo-commerce .woocommerce-nyp-message .woocommerce-error {
	margin: 10px 0 0;
}