/* =========================================================================
   StarFroid — single product (brief §5)
   sticky gallery (start) + info column (end); mobile sticky add-to-cart bar.
   ========================================================================= */

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-5);
}

/* Gallery */
.woocommerce div.product div.images {
	margin: 0;
}
.woocommerce div.product div.images img {
	border-radius: var(--radius-card);
	background: var(--c-bg-alt);
}
.woocommerce div.product .flex-control-thumbs { margin-block-start: var(--space-3); gap: var(--space-2); }

/* Summary / info column */
.woocommerce div.product .product_title {
	font-size: var(--fs-500);
	margin: 0 0 var(--space-3);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--c-primary);
	font-size: var(--fs-500);
	font-weight: 700;
	margin: 0 0 var(--space-4);
}

/* Stock status */
.woocommerce div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	font-size: var(--fs-100);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.woocommerce div.product .stock.in-stock { background: rgba(31,169,113,.12); color: var(--c-success); }
.woocommerce div.product .stock.out-of-stock { background: rgba(224,65,62,.12); color: var(--c-error); }

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--c-text-muted);
	margin-block: var(--space-4);
}

/* Quantity stepper */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--c-border);
	border-radius: var(--radius-input);
	overflow: hidden;
}
.woocommerce .quantity input.qty {
	width: 56px;
	border: 0;
	text-align: center;
	font-size: var(--fs-200);
	font-weight: 600;
	color: var(--c-text);
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-qty-btn {
	width: var(--tap-min);
	border: 0;
	background: var(--c-bg-alt);
	color: var(--c-primary);
	font-size: var(--fs-300);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sf-qty-btn:hover { background: var(--c-border); }
.sf-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.sf-qty-btn:disabled:hover { background: var(--c-bg-alt); }
/* Read-only quantity shown when Woo hides the field (single-unit stock). */
.sf-qty-fixed {
	min-width: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-200);
	font-weight: 600;
	color: var(--c-text);
}

/* Add-to-cart row */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-block: var(--space-4);
}
.woocommerce div.product form.cart .button { flex: 1 1 auto; }

/* Secondary "Commander" -> checkout */
.sf-buy-now {
	flex: 1 1 100%;
}

/* COD reassurance + delivery note */
.sf-product-reassure {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--c-bg-alt);
	border-radius: var(--radius-card);
	margin-block: var(--space-4);
}
.sf-delivery-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-text-muted);
	font-size: var(--fs-100);
	margin: 0;
}
.sf-delivery-note .sf-icon { color: var(--c-secondary); }

/* Tabs / accordion */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-block: var(--space-5) 0;
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 1.5px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.5rem var(--space-4);
	color: var(--c-primary);
	font-weight: 600;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--c-primary);
	border-color: var(--c-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }

/* Related products spacing */
.woocommerce div.product .related,
.woocommerce div.product .upsells { margin-block-start: var(--space-7); }

/* ---------- Mobile sticky add-to-cart bar ---------- */
.sf-sticky-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--z-header);
	display: none;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--c-bg);
	border-block-start: 1px solid var(--c-border);
	box-shadow: 0 -4px 16px rgba(14,44,73,.10);
}
.sf-sticky-cta.is-visible { display: flex; }
.sf-sticky-cta__price {
	font-weight: 700;
	font-size: var(--fs-300);
	color: var(--c-primary);
	white-space: nowrap;
}
.sf-sticky-cta__btn { flex: 1 1 auto; }

@media (min-width: 768px) {
	.woocommerce div.product {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
		align-items: start;
	}
	.woocommerce div.product div.images { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-3)); }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }
	.sf-sticky-cta { display: none !important; } /* desktop never shows it */
	.sf-buy-now { flex: 0 1 auto; }
}

/* =========================================================================
   Single product — mockup pass (CSS ONLY, no markup/text changes).
   Full-page width, larger image + title + price, info column reordered with
   `order` (title → stock → category → price → cart), Avis/description tabs
   removed. Related products kept.
   ========================================================================= */

/* Remove the tabs block (only "Avis" existed); related products stay. */
.woocommerce div.product .woocommerce-tabs { display: none !important; }

/* WooCommerce core sets div.images and .summary to width:48% + float, so each
   only fills ~half of its grid track (this is why the image looked tiny). Let
   them fill their tracks instead. */
.woocommerce div.product div.images,
.woocommerce div.product .summary { width: auto !important; float: none !important; }

/* Astra shoves the gallery down with position:relative; top:76px, so the image
   sits well below the title. Remove it so the image aligns to the info column top. */
.woocommerce div.product .woocommerce-product-gallery { top: 0 !important; }

/* Breadcrumb moved to a full-width row above the columns (see functions.php:
   starfroid_single_top_breadcrumb); hide Astra's in-summary copy so the image
   lines up with the title. */
.woocommerce div.product > .woocommerce-breadcrumb {
	grid-column: 1 / -1;
	margin-block: 0 var(--space-4);
}
.woocommerce div.product .summary > .woocommerce-breadcrumb { display: none; }

/* Image fills its column. The WooCommerce gallery wrappers shrink to the
   placeholder by default, so widen the whole chain, then the image. */
.woocommerce div.product div.images .woocommerce-product-gallery,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder { width: 100% !important; }
.woocommerce div.product div.images img { width: 100%; height: auto; display: block; }

/* Cart row: qty + Add-to-cart share the first row; the COD/delivery block
   (which is rendered inside the cart form) drops to its own full-width row. */
.woocommerce div.product form.cart { width: 100%; }
.woocommerce div.product form.cart .quantity { flex: 0 0 auto; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
.woocommerce div.product form.cart .sf-product-reassure { flex: 1 1 100%; }

/* Info column becomes a flex column so items can be reordered to the mockup
   without editing the markup. */
.woocommerce div.product .summary.entry-summary { display: flex; flex-direction: column; }
.woocommerce div.product .summary .woocommerce-breadcrumb  { order: 1; }
.woocommerce div.product .summary .product_title           { order: 2; }
.woocommerce div.product .summary .ast-stock-detail        { order: 3; margin-block: 0 var(--space-2); }
.woocommerce div.product .summary .single-product-category { order: 4; }
.woocommerce div.product .summary p.price                  { order: 5; }
.woocommerce div.product .summary .woocommerce-product-details__short-description { order: 6; }
.woocommerce div.product .summary form.cart                { order: 7; }
/* Category is now shown under the title, so hide the duplicate bottom meta. */
.woocommerce div.product .summary .product_meta            { display: none; }

@media (min-width: 768px) {
	/* Image ~40% / info ~60% like the mockup; qty + Add-to-cart on one row. */
	.woocommerce div.product { grid-template-columns: 2fr 3fr; }
	.woocommerce div.product .product_title { font-size: var(--fs-600); }
	.woocommerce div.product .summary p.price,
	.woocommerce div.product .summary span.price { font-size: var(--fs-700); }
}

@media (min-width: 1400px) {
	/* Use the full page width, like the shop. */
	.single-product #content .ast-container { max-width: 1760px; }
	/* Related products: 4 across (mockup). */
	.single-product .related ul.products[class*="columns-"],
	.single-product .related ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}