/* ==========================================================================
   Kondido — Single Product
   ==========================================================================
   Applies only to the WooCommerce single-product page (is_product()) —
   never the Shop archive, which has its own assets/css/shop.css. Layers on
   top of assets/css/woocommerce.css, reusing the same design tokens as the
   rest of the theme. No WooCommerce templates are overridden; the layout
   below is CSS grid applied to WooCommerce's own existing markup (the
   gallery and the summary are already siblings — see
   content-single-product.php in the WooCommerce plugin).
   ========================================================================== */

/* ---- Nav clearance ----
   #nav is fixed and, on any page without a hero (every WooCommerce page),
   transparent at the top of the page — with nothing pushing content down,
   the breadcrumb/title/gallery render underneath it. 150px clears the
   nav's own rendered height (~139px desktop / ~127px mobile) with a
   comfortable margin; matches the same fix already applied by
   /reference-static/assets/css/product.css's .product-breadcrumb. */
body.single-product .woocommerce-main .container {
	padding-top: 150px;
}
@media (max-width: 900px) {
	body.single-product .woocommerce-main .container {
		padding-top: 130px;
	}
}

/* ---- Two-column top section (gallery + summary) ----
   .kondido-product-top is a theme-added wrapper (see
   kondido_product_top_wrapper_start/_end() in functions.php) around just
   the sale flash, gallery, configurable badge, and the summary <div> —
   never tabs/upsells/related, which remain plain block-level siblings of
   this wrapper inside div.product. This exists because a sticky grid
   item's "stuck" range is bounded by its grid CONTAINER in most browser
   implementations, not by the single row its grid-area occupies — when
   gallery/summary/tabs/upsells/related previously all shared one grid on
   div.product, the sticky summary could scroll down over tabs, reviews,
   and related products instead of stopping at the end of its own row.
   Giving gallery+summary their own short wrapper means the sticky
   summary's containing block is just this wrapper's height, so it
   structurally cannot escape past it — no JS scroll-position code needed.
   div.product itself is plain block flow now (no grid), so
   tabs/upsells/related simply stack below this wrapper in document order. */
.kondido-product-top {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.kondido-product-top > .woocommerce-product-gallery {
	min-width: 0;
}
.kondido-product-top > .summary.entry-summary {
	min-width: 0;
	position: sticky;
	top: calc(var(--nav-h-solid) + 32px);
}
/* WooCommerce's own classic desktop layout (woocommerce-layout.css) floats
   these two at width:48% each — harmless as a float once they're grid
   items, but the 48% width sticks and squeezes both columns to under
   half their real grid area, leaving each cell half-empty. Matched and
   exceeded in specificity to make them fill their own grid area. */
.woocommerce div.product div.woocommerce-product-gallery,
.woocommerce div.product div.summary.entry-summary {
	float: none;
	width: 100%;
}

@media (max-width: 900px) {
	.kondido-product-top {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Sticky is desktop-only by design — disabled outright here, not
	   just visually inert, so tablet/mobile never attempt it. */
	.kondido-product-top > .summary.entry-summary {
		position: static;
	}
}

/* ---- Sale flash + configurable badge, opposite corners over the gallery ---- */
.kondido-product-top > .onsale,
.kondido-product-top > .kondido-configurable-badge {
	position: absolute;
	top: 16px;
	z-index: 3;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	line-height: 1.4;
}
.kondido-product-top > .onsale {
	inset-inline-start: 16px;
	background: var(--accent-deep);
	color: var(--white);
}
.kondido-product-top > .kondido-configurable-badge {
	inset-inline-end: 16px;
	background: var(--white);
	color: var(--gold-deep);
	border: 1px solid var(--gold);
}

/* ---- Gallery ----
   Only outer sizing/paint (radius, shadow, background) and image fit are
   touched — position/overflow/display inside the gallery are left to
   WooCommerce's own woocommerce-layout.css so the zoom/lightbox/flexslider
   JS (which measures and manipulates that markup directly) keeps working. */
.woocommerce-product-gallery {
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--cream-deep);
}
/* Capped so an oversized or placeholder image can't blow the gallery
   column taller than the summary column next to it — object-fit crops
   any real photo to fit instead of distorting it. */
.woocommerce-product-gallery__wrapper img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
}

/* ---- Title ---- */
.product_title.entry-title {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.2;
	margin: 0 0 4px;
}

/* ---- Rating ---- */
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 4px;
}
.woocommerce-review-link {
	font-size: var(--text-base);
	color: var(--text-muted);
}

/* ---- Price ----
   .woocommerce:where(...) div.product p.price (woocommerce.css) sets its
   own color/font-size — matched and exceeded in specificity here so the
   theme's ink/bold-sans price treatment (same as the shop-card price)
   wins outright rather than relying on stylesheet load order. */
.woocommerce div.product .summary p.price {
	display: block;
	margin: 12px 0 18px;
	color: var(--ink);
	font-size: 30px;
}

/* ---- Short description ---- */
.woocommerce-product-details__short-description {
	color: var(--text-muted);
	font-size: var(--text-md);
	line-height: 1.75;
	max-width: 52ch;
	margin-bottom: 24px;
}
.woocommerce-product-details__short-description > *:last-child {
	margin-bottom: 0;
}

/* ---- Stock status ---- */
p.stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--text-sm);
	font-weight: 500;
	margin: 0 0 16px;
}
p.stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
/* .woocommerce div.product .stock/.out-of-stock (woocommerce.css) carries
   higher specificity than a bare p.stock.in-stock selector — matched and
   exceeded here rather than relying on stylesheet load order. */
.woocommerce div.product p.stock.in-stock {
	color: var(--text-muted);
}
.woocommerce div.product p.stock.out-of-stock,
.woocommerce div.product p.stock.unavailable {
	color: var(--rose-deep);
}

/* ---- Add to cart form ---- */
form.cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 8px;
}
form.cart .quantity {
	margin: 0;
}
form.cart .quantity .qty {
	width: 80px;
	height: 100%;
	text-align: center;
}
form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
}
/* WooCommerce's own .button.alt (woocommerce.css) paints this specific
   button — the only one in the theme with the "alt" modifier — purple at
   a higher specificity than the theme's base .woocommerce button.button
   rule (assets/css/woocommerce.css). Matched and exceeded here so it uses
   the same accent-deep/ink treatment as every other button in the theme. */
.woocommerce div.product form.cart .single_add_to_cart_button.alt {
	background: var(--accent-deep);
	color: var(--white);
}
.woocommerce div.product form.cart .single_add_to_cart_button.alt:hover {
	background: var(--ink);
	color: var(--white);
}

/* ---- Product meta (SKU / categories / tags) ---- */
.product_meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
	font-size: var(--text-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.product_meta a {
	color: var(--text-muted);
	transition: color var(--dur-fast);
}
.product_meta a:hover {
	color: var(--accent-deep);
}

/* ---- Tabs (Description / Additional information / Reviews) ---- */
.woocommerce-tabs {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--border-soft);
}
ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	border-bottom: 1px solid var(--border-soft);
}
ul.tabs.wc-tabs li {
	margin: 0;
}
ul.tabs.wc-tabs li a {
	display: inline-block;
	padding: 12px 2px;
	margin-bottom: -1px;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--dur-fast), border-color var(--dur-fast);
}
ul.tabs.wc-tabs li a:hover {
	color: var(--ink);
}
ul.tabs.wc-tabs li.active a {
	color: var(--ink);
	border-bottom-color: var(--accent-deep);
}
.woocommerce-Tabs-panel {
	max-width: 760px;
	color: var(--text-muted);
	font-size: var(--text-md);
	line-height: 1.75;
}
.woocommerce-Tabs-panel h2 {
	font-size: var(--text-2xl);
	color: var(--ink);
	margin-bottom: 16px;
}
.woocommerce-Tabs-panel table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td {
	padding: 12px 14px;
	border: 1px solid var(--border-soft);
	text-align: start;
	font-size: var(--text-sm);
}
.woocommerce-Tabs-panel table.shop_attributes th {
	width: 220px;
	font-weight: 600;
	color: var(--ink);
	background: var(--cream);
}
#reviews .comment-form-rating label,
#reviews label {
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#reviews .form-submit input {
	margin-top: 8px;
}

/* ---- Related products ----
   Its own explicit grid, scoped to section.related.products only — a
   plain block-level sibling of .kondido-product-top inside div.product
   (see the top-section comment above), never sharing a grid with it, and
   never shared with or overridden by assets/css/shop.css (loaded only on
   is_shop()/product-taxonomy archives, never here on is_product()).
   Card language matches the current shop-archive cards for visual
   consistency, but every rule below is its own independent declaration —
   nothing is inherited from or dependent on shop.css. */
section.related.products {
	margin-top: 72px;
	padding-top: 48px;
	border-top: 1px solid var(--border-soft);
}
section.related.products > h2 {
	text-align: center;
	font-size: clamp(26px, 3vw, 34px);
	margin-bottom: 32px;
}
section.related.products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 36px;
}
/* Same WooCommerce clearfix issue as assets/css/shop.css: ul.products
   ::before/::after get content:" "; display:table for WC's float layout,
   which becomes a real (invisible) first grid item once this is
   display:grid, silently occupying row 1 / column 1 and pushing every
   real card one cell over. content:none removes it from the grid. */
section.related.products ul.products::before,
section.related.products ul.products::after {
	content: none;
}
/* WooCommerce's own woocommerce-layout.css unconditionally sets
   ul.products li.product { float:left; width:22.05%; margin:0 3.8% ... }
   and woocommerce-smallscreen.css raises that to width:48% at <=768px —
   this rule previously declared no width/float/margin of its own at all,
   so those WooCommerce values applied completely uncontested (not a
   specificity loss — a plain omission), collapsing every related-product
   card to ~22%/48% of its real grid track. Declared explicitly here. */
section.related.products ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: 100%;
	margin: 0;
	background: var(--white);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
section.related.products ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}
section.related.products ul.products li.product .onsale {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	inset-inline-start: auto;
	z-index: 2;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--accent-deep);
	color: var(--white);
}
section.related.products ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
	color: inherit;
	text-decoration: none;
}
/* 1/1 (matches the current shop-card image ratio) + margin:0 explicitly —
   WooCommerce's own "a img" rule adds margin-bottom:1em that nothing
   here was previously overriding. */
section.related.products ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--cream-deep);
	margin: 0;
	transition: transform 800ms var(--ease);
}
section.related.products ul.products li.product:hover img {
	transform: scale(1.06);
}
section.related.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	margin: 24px 24px 6px;
}
section.related.products ul.products li.product .star-rating {
	margin: 0 24px 8px;
	font-size: var(--text-sm);
}
section.related.products ul.products li.product .price {
	display: block;
	margin: auto 24px 8px;
	padding-top: 4px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 20px;
	color: var(--ink);
}
/* Same secondary-weight outline treatment as the shop-archive cards —
   display declared explicitly since WooCommerce's own ".button" rule in
   this exact context (ul.products li.product .button) sets
   display:inline-block, which nothing here was previously overriding. */
section.related.products ul.products li.product a.button {
	display: inline-flex;
	align-self: flex-start;
	width: auto;
	margin: 4px 24px 24px;
	padding: 10px 22px;
	font-size: var(--text-sm);
	background: transparent;
	color: var(--accent-deep);
	border-color: var(--accent-deep);
}
section.related.products ul.products li.product a.button:hover {
	background: var(--accent-deep);
	color: var(--white);
	box-shadow: none;
	transform: none;
}

@media (max-width: 800px) {
	section.related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}
	section.related.products ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--text-xl);
		margin: 18px 18px 4px;
	}
	section.related.products ul.products li.product .star-rating {
		margin: 0 18px 6px;
	}
	section.related.products ul.products li.product .price {
		margin: auto 18px 8px;
		font-size: var(--text-lg);
	}
	section.related.products ul.products li.product a.button {
		margin: 4px 18px 18px;
	}
}
@media (max-width: 420px) {
	section.related.products ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---- Mobile refinements ---- */
@media (max-width: 900px) {
	.product_title.entry-title {
		font-size: 26px;
	}
	div.product .summary p.price {
		font-size: 24px;
	}
	form.cart .single_add_to_cart_button {
		min-width: 100%;
	}
	.woocommerce-tabs {
		margin-top: 40px;
		padding-top: 32px;
	}
	section.related.products {
		margin-top: 48px;
		padding-top: 32px;
	}
}