/* =========================================================
   Comfyo — single product
   ========================================================= */

/*
 * Astra's own site-wide container (`.ast-container`, Customizer "Container
 * Width") is what actually caps this page's content width — at 1240px on
 * this site. `div.product` itself has no max-width of its own, so setting
 * one there alone did nothing; the real fix widens `.ast-container`, but
 * only within `.single-product`, so every other page (shop, homepage,
 * category archives already tuned around the sitewide 1240px) is untouched.
 */
body.single-product .ast-container{
	max-width: 1320px;
}
.single-product div.product{
	padding: 1.5rem 0 4rem;
	position: relative;
}

/*
 * Hero (gallery + summary) — the only part of the page that is a two-column
 * grid. Scoping the grid to this wrapper (opened/closed by product-hooks.php
 * right around the gallery+summary, see that file) instead of the whole
 * `div.product` means the tabs/related-products/complete-the-look sections
 * that follow are structurally outside this grid — plain block content in
 * normal document flow, not grid items that need their own row/column
 * overrides to avoid landing inside the two-column area.
 *
 * No `position: sticky` on the summary column: with a sticky summary, any
 * time the gallery and summary end up different heights (near-guaranteed —
 * titles, variation counts and descriptions all vary), the taller column
 * sets the row height, the shorter column finishes early leaving a visible
 * empty gap, and the sticky column stays pinned in place next to that gap
 * until the row finally ends — reads as a lone floating sidebar rather than
 * a deliberate layout. A plain (non-sticky) two-column grid has none of that
 * failure mode and stays predictable regardless of content length.
 */
.comfyo-product-hero{
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}
/*
 * WooCommerce's own core stylesheet (woocommerce-layout.css) floats the
 * gallery and summary at a fixed 48% each — `.woocommerce div.product
 * div.images` / `div.summary`, specificity (0,3,2) — for sites that never
 * touch the product layout at all. Becoming a CSS Grid item makes that
 * float inert, but not the explicit width, which is a real, independent
 * constraint on the item's own content box: without overriding it, each
 * column renders at 48% of the grid track instead of filling it (confirmed
 * live — summary stuck at ~255px inside a ~570px track). `.comfyo-product-
 * hero > .summary` alone is only (0,2,0), so — same justified exception as
 * `.onsale` and `.comfyo-qty-btn` above — !important is what actually beats
 * a same-cascade-layer core rule with higher specificity.
 */
.comfyo-product-hero > .woocommerce-product-gallery,
.comfyo-product-hero > .summary{
	float: none !important;
	width: auto !important;
}
@media (min-width: 900px){
	.comfyo-product-hero{
		/* minmax(0, …fr) — plain `1.1fr`/`0.9fr` tracks default to an implicit
		   `minmax(auto, 1fr)`, so a wide intrinsic minimum on either side
		   (e.g. an unbreakable long title) can blow the track past its
		   intended share and squeeze the other column down to a sliver. */
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: 3rem;
		align-items: start;
	}
}

/* ---------------------------------------------------------
   Gallery
   --------------------------------------------------------- */
.woocommerce-product-gallery__wrapper{
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
 * Main image — controlled height instead of letting the 4:5 ratio run at
 * full column width. At ~700px of column width, a plain `width:100% +
 * aspect-ratio:4/5` box comes out ~875px tall — taller than most laptop
 * viewports, so the hero took a long scroll just to clear one photo before
 * summary (which ends much sooner) started looking like empty space beside
 * it. `max-height` + `width:auto` shrinks BOTH dimensions together once the
 * cap binds, so the declared 4:5 crop window itself never changes — this
 * only makes the box smaller on screen, it never crops more of the source
 * photo than a plain 4:5 box already would. clamp() keeps it responsive
 * instead of a fixed number: real content (not a fixed height) decides
 * final width down to `min-width`; 620–680px lands in the ~600–720px range
 * that still reads as a proper hero image without a long single-photo
 * scroll (verified against beret/komplet/bluza/legginsy photos — none rely
 * on more of the 4:5 frame than this keeps).
 */
.woocommerce-product-gallery__image{
	border-radius: 8px;
	overflow: hidden;
	background: var(--c-cream-deep);
	aspect-ratio: 4 / 5;
	width: auto;
	max-width: 100%;
	max-height: clamp(560px, 66vh, 720px);
	margin-inline: 0;
}
.woocommerce-product-gallery__image img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* ---------------------------------------------------------
   Thumbnails — one horizontal rail, not a wrapping grid. FlexSlider itself
   doesn't dictate this layout (that's WooCommerce's own `.flex-control-
   thumbs{flex-wrap:wrap}`, overridden here) — clicking still runs through
   FlexSlider's own handlers unchanged, only the row's own CSS changes.
   --------------------------------------------------------- */
/*
 * Etap 7 finding: WooCommerce core (woocommerce.css) ships
 * `.woocommerce div.product div.images .flex-control-thumbs{overflow:hidden}`
 * — specificity (0,4,2), far above this single-class selector's (0,1,0) — so
 * the rail was never actually horizontally scrollable at all on a product
 * with enough photos to overflow it (every earlier QA pass happened to test
 * products whose thumbnails all fit within the visible width, so the clipped
 * overflow was never visually exposed). `!important` is the same justified
 * exception already used elsewhere in this file for the same class of
 * WooCommerce-core-wins-on-specificity issue (see `.onsale`, `.comfyo-qty-btn`).
 */
.flex-control-thumbs{
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto !important;
	scroll-snap-type: x proximity;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0 0 0.6rem;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--c-taupe) transparent;
}
.flex-control-thumbs::-webkit-scrollbar{ height: 4px; }
.flex-control-thumbs::-webkit-scrollbar-track{ background: transparent; }
.flex-control-thumbs::-webkit-scrollbar-thumb{ background: var(--c-taupe); border-radius: 999px; }
/*
 * Same WooCommerce-core-specificity issue as `.flex-control-thumbs` above:
 * `.woocommerce div.product div.images .flex-control-thumbs li{width:25%;
 * float:left}` (specificity 0,4,3) was winning over this rule's own width,
 * silently stretching every thumbnail to 25% of the rail's width (4 fixed
 * "columns" worth) regardless of this clamp() — invisible while a product
 * had few enough photos that clipped overflow (see above) never exposed it,
 * which is why it read as "fixed" in earlier testing.
 */
.flex-control-thumbs li{
	flex: 0 0 auto;
	width: clamp(72px, 8vw, 92px) !important;
	scroll-snap-align: start;
	list-style: none;
}
.flex-control-thumbs img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, outline-color 0.2s ease;
	outline: 1px solid transparent;
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover{
	opacity: 1;
	outline: 1px solid var(--c-ink);
}

/*
 * Astra's own core WooCommerce CSS gives .onsale a fixed circular size,
 * loaded in a way that otherwise wins the cascade over this child-theme
 * stylesheet — !important here is a deliberate, scoped override of that one
 * upstream rule, not a general pattern used elsewhere in this file.
 */
.onsale{
	position: absolute !important;
	top: 1rem !important;
	left: 1rem !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 3;
	width: auto !important;
	height: auto !important;
	background: #A24632;
	color: var(--c-white);
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem !important;
	border-radius: 999px !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------
   Summary column
   --------------------------------------------------------- */
.single-product div.product .summary{
	max-width: none;
}

.comfyo-single-badges{
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}
.comfyo-single-badges .comfyo-badge{
	font-size: 0.7rem;
}

.single-product div.product .product_title{
	/* Playfair Display runs wide at display sizes — even a ~520px summary
	   column only fits a handful of characters per line at 2.2rem, forcing
	   compound Polish titles ("Beżowy damski beret z kaszmirem") onto many
	   short, choppy lines. Capping at 1.9rem keeps 2–3 lines with each line
	   holding a real phrase instead of one or two words. */
	font-size: clamp(1.5rem, 2.1vw, 1.9rem);
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

.single-product div.product .woocommerce-product-rating{
	margin-bottom: 1rem;
}
.single-product div.product .star-rating{
	color: var(--c-accent);
}

.single-product div.product p.price{
	font-family: var(--font-display);
	font-size: 1.7rem;
	color: var(--c-ink);
	margin: 0 0 1.25rem;
}
.single-product div.product p.price del{
	font-family: var(--font-sans);
	font-size: 0.55em;
	color: var(--c-taupe);
	opacity: 1;
	margin-right: 0.6rem;
}
.single-product div.product p.price ins{
	text-decoration: none;
	color: #A24632;
}

.single-product div.product .woocommerce-product-details__short-description{
	color: var(--c-body);
	line-height: 1.75;
	margin-bottom: 1.5rem;
}

.single-product div.product .stock{
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--c-cream-deep);
	color: var(--c-ink);
	margin-bottom: 1.25rem;
}
.single-product div.product .stock.out-of-stock{
	background: #F3E4E0;
	color: #A24632;
}

/* Variations */
.single-product table.variations{
	width: 100%;
	margin-bottom: 1.25rem;
}
.single-product table.variations td,
.single-product table.variations th{
	border: none;
	padding: 0 0 0.75rem;
}
.single-product table.variations label{
	font-family: var(--font-sans);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink);
}
.single-product table.variations select{
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--c-line);
	border-radius: 6px;
	font-family: var(--font-sans);
	background: var(--c-white);
}
/* Hidden once comfyo-product.js has built the swatch buttons below; the
   select itself stays in the DOM and keeps driving WooCommerce's real
   variation logic, it's just no longer the visible control. */
.single-product table.variations select.comfyo-enhanced{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.comfyo-variation-swatches{
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.comfyo-variation-swatch{
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-white);
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--c-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.comfyo-variation-swatch:hover:not(.is-disabled){
	border-color: var(--c-ink);
}
.comfyo-variation-swatch.is-selected{
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-cream);
}
.comfyo-variation-swatch.is-disabled{
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}
.single-product .woocommerce-variation-add-to-cart,
.single-product .reset_variations{
	font-size: 0.8rem;
}

/* Quantity + add to cart */
.single-product form.cart{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.single-product .quantity{
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	overflow: hidden;
}
.single-product .quantity .qty{
	width: 3.2rem;
	border: none;
	text-align: center;
	padding: 0.75rem 0;
	font-family: var(--font-sans);
	background: transparent;
	appearance: textfield;
	-moz-appearance: textfield;
}
/* Hide the native number-input spin arrows — comfyo-qty-btn replaces them. */
.single-product .quantity .qty::-webkit-outer-spin-button,
.single-product .quantity .qty::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}
/*
 * !important: some upstream WooCommerce/theme button rule (higher
 * specificity or loaded later) otherwise paints the "+" button with a blue
 * default button background — see comfyo-shop.css note on .onsale for the
 * same class of issue.
 */
.comfyo-qty-btn{
	border: none !important;
	background: transparent !important;
	width: 2.4rem !important;
	height: 2.7rem !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--c-ink) !important;
	padding: 0 !important;
	appearance: none !important;
	box-shadow: none !important;
}
.comfyo-qty-btn:hover{
	background: var(--c-cream-deep) !important;
}
.comfyo-qty-btn svg{
	width: 0.9rem;
	height: 0.9rem;
}

.single-product .single_add_to_cart_button{
	/* Quantity stays a compact, fixed-width pill (see .quantity above); the
	   button is the one element in this row allowed to grow, so it reads as
	   the obvious next action rather than one control among several of
	   similar weight. */
	flex: 1 1 280px;
	background: var(--c-ink) !important;
	color: var(--c-cream) !important;
	border: none;
	border-radius: 999px;
	padding: 1.15rem 2rem !important;
	font-family: var(--font-sans);
	font-size: 0.95rem !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, transform 0.2s ease;
}
.single-product .single_add_to_cart_button:hover{
	background: var(--c-accent) !important;
	transform: translateY(-2px);
}
.single-product .single_add_to_cart_button.disabled{
	opacity: 0.5;
	transform: none;
}

/*
 * Secondary CTA, deliberately quieter than the black Add to Cart button —
 * a bordered pill (same corner radius the rest of the site's buttons use,
 * for consistency) rather than a second solid button competing for the
 * same attention.
 *
 * `:focus{background:...}` here specifically overrides Astra's own generic
 * `button:focus` rule, which paints every plain <button> with the theme's
 * default global-palette blue (#045cb4 — Astra_Global_Palette's own default
 * accent, never overridden anywhere in this child theme's button styling
 * before now, so an unstyled focus state on this one button fell through to
 * it). `:focus-visible` gets Comfyo's own warm accent outline instead of
 * removing the indicator outright — still keyboard-accessible, just on
 * brand.
 */
.comfyo-wishlist-btn--inline{
	position: static;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 1.15rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--c-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	margin-bottom: 1.5rem;
}
.comfyo-wishlist-btn--inline:hover{
	background: var(--c-cream-deep);
	border-color: var(--c-taupe);
}
.comfyo-wishlist-btn--inline:focus{
	background: transparent;
	outline: none;
}
.comfyo-wishlist-btn--inline:focus-visible{
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}
.comfyo-wishlist-btn--inline.is-active{
	color: var(--c-accent-dark);
	border-color: var(--c-accent);
	background: var(--c-blush);
}
.comfyo-wishlist-btn--inline .comfyo-wishlist-btn__label-on{
	display: none;
}
.comfyo-wishlist-btn--inline.is-active .comfyo-wishlist-btn__label-off{
	display: none;
}
.comfyo-wishlist-btn--inline.is-active .comfyo-wishlist-btn__label-on{
	display: inline;
}

/* ---------------------------------------------------------
   Trust bar — full-width, directly under the hero (see
   comfyo_single_trust_badges() in product-hooks.php: it now hooks on
   woocommerce_after_single_product_summary, outside .comfyo-product-hero,
   specifically so it can be this wide instead of squeezed into the summary
   column).
   --------------------------------------------------------- */
.comfyo-trust-strip{
	list-style: none;
	margin: 0 0 3rem;
	padding: 1.75rem 0;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 2rem;
}
@media (max-width: 900px){
	.comfyo-trust-strip{
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 520px){
	.comfyo-trust-strip{
		grid-template-columns: 1fr;
	}
}
.comfyo-trust-strip li{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--c-body);
}
.comfyo-trust-strip strong{
	display: block;
	color: var(--c-ink);
	font-size: 0.9rem;
	margin-bottom: 0.15rem;
}
.comfyo-trust-strip a{
	color: var(--c-body);
	text-decoration: underline;
}
.comfyo-trust-strip__icon{
	flex: 0 0 auto;
	color: var(--c-accent-dark);
}
.comfyo-trust-strip__icon svg{
	width: 1.35rem;
	height: 1.35rem;
}

/* Product meta (sku/category/tags) */
.single-product .product_meta{
	font-size: 0.78rem;
	color: var(--c-taupe);
	margin-top: 1.5rem;
}
.single-product .product_meta a{
	color: var(--c-taupe);
	text-decoration: underline;
}

/* ---------------------------------------------------------
   Tabs — quiet underline bar instead of pill buttons, so this reads as a
   deliberate section of the page rather than a floating row of chips over
   empty space. Trust bar directly above already closes with its own
   border-bottom, so this section doesn't repeat a border-top.
   --------------------------------------------------------- */
.woocommerce-tabs{
	margin-top: 0;
	padding-top: 0.5rem;
}
.woocommerce-tabs ul.tabs{
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	list-style: none;
	margin: 0 0 2.25rem;
	padding: 0;
	border-bottom: 1px solid var(--c-line);
}
.woocommerce-tabs ul.tabs li{
	margin: 0;
}
.woocommerce-tabs ul.tabs li a{
	display: inline-block;
	padding: 0 0 0.9rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	color: var(--c-taupe);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.woocommerce-tabs ul.tabs li a:hover{
	color: var(--c-ink);
}
.woocommerce-tabs ul.tabs li.active a{
	color: var(--c-ink);
	border-bottom-color: var(--c-ink);
	font-weight: 500;
}
.woocommerce-tabs .panel{
	max-width: 640px;
	color: var(--c-body);
	line-height: 1.85;
	font-size: 0.98rem;
}
.woocommerce-tabs .panel h2{
	font-size: 1.3rem;
	margin-bottom: 1rem;
}
.woocommerce-Reviews-title{
	font-size: 1.3rem;
}
.woocommerce-tabs table.shop_attributes{
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td{
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	font-size: 0.9rem;
}
.woocommerce-tabs table.shop_attributes th{
	width: 40%;
	font-weight: 500;
	color: var(--c-ink);
}

.comfyo-size-chart p{
	color: var(--c-taupe);
	font-size: 0.85rem;
	margin-bottom: 1.25rem;
}
.comfyo-size-chart__scroll{
	overflow-x: auto;
}
.comfyo-size-chart table{
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
}
.comfyo-size-chart th,
.comfyo-size-chart td{
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	font-size: 0.88rem;
}
.comfyo-size-chart thead th{
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-taupe);
}
.comfyo-size-chart tbody td:first-child{
	font-weight: 600;
	color: var(--c-ink);
}

/* ---------------------------------------------------------
   Related products / complete the look
   --------------------------------------------------------- */
.related.products,
.comfyo-complete-look{
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--c-line);
}
.related.products > h2,
.comfyo-complete-look > h2{
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	margin: 0 0 2rem;
}

/* ---------------------------------------------------------
   Sticky mobile add-to-cart bar
   --------------------------------------------------------- */
.comfyo-sticky-cta{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	background: var(--c-cream);
	border-top: 1px solid var(--c-line);
	box-shadow: 0 -10px 30px rgba(33, 31, 27, 0.1);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.comfyo-sticky-cta.is-visible{
	transform: translateY(0);
}
.comfyo-sticky-cta__price{
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--c-ink);
	white-space: nowrap;
}
.comfyo-sticky-cta__button{
	flex: 1;
	max-width: 240px;
	background: var(--c-ink);
	color: var(--c-cream);
	border: none;
	border-radius: 999px;
	padding: 0.85rem 1rem;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Mirrors the real add-to-cart button's disabled look (see
   .single_add_to_cart_button.disabled above) so the sticky bar never looks
   tappable while no valid variation is selected. */
.comfyo-sticky-cta__button:disabled,
.comfyo-sticky-cta__button.is-disabled{
	opacity: 0.5;
	cursor: not-allowed;
}
@media (min-width: 900px){
	.comfyo-sticky-cta{
		display: none;
	}
}