/*!
 * minifabrik-child — WooCommerce compatibility layer.
 * Overrides GP Premium WC and classic-theme WC styles that fight the v6
 * product-page layout. Keep this file small: only selectors that address a
 * concrete regression vs the v6 prototype belong here.
 */

/* ---------------------------------------------------------------------------
 * #1 — Single product: add-to-cart row (v6 .pd-add-row)
 * ---------------------------------------------------------------------------
 * GP Premium (gp-premium/woocommerce/functions/css/woocommerce.css:531) forces
 * `width:100%` on every direct child of `form.cart` except `.quantity` and
 * `.single_add_to_cart_button`. That stacks our `.qty-control` and
 * `.pd-wishlist` onto their own rows and shrinks `.pd-add-cart` until the
 * "Kosárba teszem" label wraps to three lines.
 *
 * Also: WC core's (woocommerce.css) clearfix on `form.cart::before/::after`
 * inserts two anonymous pseudo flex-items that eat main-axis space, since our
 * form.cart is `display:flex` (via `.pd-add-row`).
 *
 * Fix strategy: match GP's specificity on both offending children and reset
 * the width, and collapse the clearfix pseudo-elements so they don't occupy
 * flex space. Scoped tightly to `form.cart.pd-add-row` so no other WC form
 * layouts (variations, cart table, checkout) are affected.
 *
 * v0.3.0: dropped `div.product` from every selector below. The custom
 * `woocommerce/single-product.php` wraps the product in `.pd-section` /
 * `.pd-wrap` instead of WC's default `div.product`, so the previous
 * selectors silently never matched — leaving the qty-input at its browser
 * default ~150px `min-content` width and stretching `.qty-control` to
 * ~234px. `.pd-add-row` is theme-specific, so the simpler selectors still
 * don't bleed into cart / checkout / variation forms.
 */

/* oi-5b: form.cart now wraps the entire configurator (size buttons +
 * mfpo-addons + qty-row), so .pd-add-row is an inner <div> that scopes the
 * 3-element flex row (qty-control + cart-button + wishlist). Selectors below
 * use descendant `form.cart .pd-add-row` rather than the previous compound
 * `form.cart.pd-add-row` to match the new structure. The clearfix-kill on
 * `form.cart::before/::after` is no longer necessary because the form is no
 * longer `display:flex`. */
.woocommerce form.cart .pd-add-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.woocommerce form.cart .pd-add-row > .qty-control,
.woocommerce form.cart .pd-add-row > .pd-wishlist {
	width: auto;
	flex: 0 0 auto;
	float: none;
}

.woocommerce form.cart .pd-add-row > .pd-add-cart {
	flex: 1 1 auto;
	float: none;
	width: auto;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * #2 — Quantity input inside our .qty-control
 * ---------------------------------------------------------------------------
 * v6's stepper uses a transparent centered `<input type="number" class="qty">`
 * between the minus / plus buttons. WC (and GP Premium) impose height:50px,
 * a grey border and a white background on `.qty`, breaking the pill shape.
 */
.woocommerce form.cart .qty-control .qty {
	height: auto;
	/*
	 * Browser default for `<input type="number">` has a min-width around
	 * 150px (Chromium treats it as the intrinsic `min-content` of a
	 * spin-button control), which overrides our `width: 44px` and pushes
	 * the .qty-control wrapper out to ~234px — the "huge wide bar"
	 * regression. `min-width: 0` explicitly releases that floor.
	 */
	min-width: 0;
	max-width: 44px;
	width: 44px;
	padding: 0;
	margin: 0;
	text-align: center;
	background: transparent;
	border: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--charcoal);
	line-height: 1;
	-moz-appearance: textfield;
}
.woocommerce form.cart .qty-control .qty::-webkit-outer-spin-button,
.woocommerce form.cart .qty-control .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * #3 — WC breadcrumb inside .pd-breadcrumb
 * ---------------------------------------------------------------------------
 * woocommerce_breadcrumb() emits <nav class="woocommerce-breadcrumb"> with
 * margin + display:block that creates visible whitespace above v6's one-line
 * breadcrumb. Collapse it.
 */
.pd-breadcrumb .woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	display: inline;
	font-size: inherit;
	color: inherit;
}
.pd-breadcrumb .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

/* ===========================================================================
 * Phase C — minifabrik-product-options (MFPO) plugin overrides
 * ===========================================================================
 * The plugin's frontend.css wraps every rule in `:where()` (specificity 0,0,0),
 * so straight class selectors here win the cascade without `!important`. All
 * rules are scoped to `.single-product` so homepage / Rólunk / archive can't
 * accidentally inherit the styling.
 *
 * Class mapping (plugin → v8 .pd-* design tokens):
 *   .mfpo-addon-field__label   → v8 .pd-option-label
 *   select.mfpo-addon-input    → v8 .pd-select (with chevron SVG bg)
 *   input.mfpo-addon-input     → v8 .pd-text-input
 *   .mfpo-addon-swatch         → v8 .pd-swatch (48×48 rounded square)
 *   .mfpo-addon-swatch--more   → toggle pill (replaced by mf-pattern-expand
 *                                 for fields with > 30 swatches; otherwise
 *                                 styled as v8-style overflow swatch)
 *   .mfpo-addon-modal__panel   → v8-themed modal (only Minky 15-swatch field)
 *   .mfpo-addon-total          → light harmonize, terracotta accent
 * --------------------------------------------------------------------------- */

/* C-1 — field wrapper + label ----------------------------------------------- */

.single-product .mfpo-addons {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 0 8px;
}
.single-product .mfpo-addon-field {
	margin-bottom: 24px;
}
.single-product .mfpo-addon-field:last-child {
	margin-bottom: 0;
}
.single-product .mfpo-addon-field__label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--charcoal);
	margin-bottom: 10px;
	letter-spacing: 0;
}
.single-product .mfpo-addon-field__required {
	color: var(--terracotta);
	font-weight: 600;
	margin-left: 2px;
}
.single-product .mfpo-addon-field__desc {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--warm-gray);
	margin: -4px 0 10px;
	line-height: 1.55;
}

/* C-2 — select / text / number input ---------------------------------------- */

.single-product select.mfpo-addon-input,
.single-product input.mfpo-addon-input[type="text"],
.single-product input.mfpo-addon-input[type="number"] {
	width: 100%;
	max-width: none;
	padding: 12px 16px;
	border: 2px solid var(--light-gray);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	background: white;
	color: var(--charcoal);
	outline: none;
	transition: border-color 0.3s;
}
.single-product select.mfpo-addon-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A807A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}
.single-product select.mfpo-addon-input:focus,
.single-product input.mfpo-addon-input[type="text"]:focus,
.single-product input.mfpo-addon-input[type="number"]:focus {
	border-color: var(--sage);
}
.single-product select.mfpo-addon-input:focus-visible,
.single-product input.mfpo-addon-input[type="text"]:focus-visible,
.single-product input.mfpo-addon-input[type="number"]:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 2px;
}

/* C-3 — swatches ------------------------------------------------------------ */

.single-product .mfpo-addon-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.single-product .mfpo-addon-swatch {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--light-gray);
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-color: white;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.2s;
	position: relative;
	outline: none;
}
.single-product .mfpo-addon-swatch:hover,
.single-product .mfpo-addon-swatch--active {
	border-color: var(--terracotta);
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.single-product .mfpo-addon-swatch:focus {
	outline: none;
}
.single-product .mfpo-addon-swatch:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 2px;
}
.single-product .mfpo-addon-swatch--more {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	border: 2px solid var(--light-gray);
	background: var(--cloud);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 0.6rem;
	font-weight: 600;
	line-height: 1.1;
	padding: 0 6px;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	transition: all 0.2s;
}
.single-product .mfpo-addon-swatch--more:hover {
	border-color: var(--terracotta);
	color: var(--terracotta);
	transform: scale(1.05);
}

/* C-3b — radio / checkbox (not used by Babafészek, but Babafészek-cousin
 *        products may render them; mirror v8 .pd-radio styling). */

.single-product .mfpo-addon-radios,
.single-product .mfpo-addon-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.single-product .mfpo-addon-radio,
.single-product .mfpo-addon-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 2px solid var(--light-gray);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 0.9rem;
	color: var(--charcoal);
	background: white;
}
.single-product .mfpo-addon-radio:hover,
.single-product .mfpo-addon-checkbox:hover {
	border-color: var(--sage);
	background: rgba(197, 212, 188, 0.15);
}
.single-product .mfpo-addon-radio:focus-within,
.single-product .mfpo-addon-checkbox:focus-within {
	outline: 2px solid var(--sage);
	outline-offset: 2px;
}

/* C-4 — modal (used by Minky 15-swatch field; pamut field switches to
 *        mf-pattern-expand inline-mode and never opens the modal). */

.single-product .mfpo-addon-modal__backdrop {
	background: rgba(45, 41, 38, 0.55);
}
.single-product .mfpo-addon-modal__panel {
	background: white;
	border-radius: 16px;
	padding: 32px;
	max-width: 640px;
	width: calc(100% - 32px);
	box-shadow: 0 16px 48px rgba(45, 41, 38, 0.2);
}
.single-product .mfpo-addon-modal__title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: 0.5px;
	margin: 0 40px 20px 0;
}
.single-product .mfpo-addon-modal__close {
	width: 36px;
	height: 36px;
	font-size: 1.4rem;
	color: var(--charcoal);
	background: none;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}
.single-product .mfpo-addon-modal__close:hover {
	color: var(--terracotta);
	background: var(--cloud);
}
.single-product .mfpo-addon-modal__close:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 2px;
}
.single-product .mfpo-addon-modal__grid {
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.single-product .mfpo-addon-modal__grid .mfpo-addon-swatch {
	width: 100%;
	height: 64px;
	border-radius: 10px;
}

/* C-5 — total panel (light harmonize) --------------------------------------- */

.single-product .mfpo-addon-total {
	background: var(--cream);
	border-left: 3px solid var(--terracotta);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 16px 0 20px;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--charcoal);
	gap: 6px;
}
.single-product .mfpo-addon-total strong {
	color: var(--terracotta);
}

/* ===========================================================================
 * mf-pattern-expand — JS-free expand/collapse for swatch fields with > 30
 * options (currently: pamut minta, 56 swatches). Markup is injected by
 * inc/mfpo-pattern-expand.php. The PHP wrapper:
 *   1. Adds class `mf-pattern-expand-field` to the field wrapper.
 *   2. Inserts `<input type="checkbox" class="mf-pattern-expand-toggle" hidden>`
 *      BEFORE the `.mfpo-addon-swatches` grid.
 *   3. Inserts `<label class="mf-pattern-expand-pill" for="…">…</label>`
 *      AFTER the `.mfpo-addon-swatches` grid.
 * Toggle pattern: `:checked ~ .mfpo-addon-swatches { max-height: none; }`.
 * --------------------------------------------------------------------------- */

.single-product .mf-pattern-expand-field .mfpo-addon-swatches {
	max-height: 104px;            /* 2 rows × 48px swatch + 8px gap */
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.single-product .mf-pattern-expand-toggle:checked ~ .mfpo-addon-swatches {
	max-height: 800px;            /* large enough for 56 swatches at any width */
}

.single-product .mf-pattern-expand-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	margin-top: 12px;
	border: 1px dashed var(--light-gray);
	border-radius: 50px;
	background: transparent;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--warm-gray);
	cursor: pointer;
	user-select: none;
	transition: all 0.2s;
}
.single-product .mf-pattern-expand-pill:hover {
	border-color: var(--terracotta);
	color: var(--terracotta);
}
.single-product .mf-pattern-expand-toggle:focus-visible + .mfpo-addon-swatches + .mf-pattern-expand-pill {
	outline: 2px solid var(--sage);
	outline-offset: 2px;
}
.single-product .mf-pattern-expand-pill .mf-pattern-expand-text-expanded {
	display: none;
}
.single-product .mf-pattern-expand-toggle:checked ~ .mf-pattern-expand-pill .mf-pattern-expand-text-collapsed {
	display: none;
}
.single-product .mf-pattern-expand-toggle:checked ~ .mf-pattern-expand-pill .mf-pattern-expand-text-expanded {
	display: inline;
}
.single-product .mf-pattern-expand-pill .mf-pattern-expand-chev {
	width: 12px;
	height: 8px;
	flex-shrink: 0;
	transition: transform 0.2s;
}
.single-product .mf-pattern-expand-toggle:checked ~ .mf-pattern-expand-pill .mf-pattern-expand-chev {
	transform: rotate(180deg);
}

/* When the expand pattern is active, the plugin's modal-trigger swatch and
 * the modal itself become redundant — hide both. */
.single-product .mf-pattern-expand-field .mfpo-addon-swatch--more,
.single-product .mf-pattern-expand-field .mfpo-addon-modal {
	display: none;
}

/* Mobile reflow ------------------------------------------------------------- */

@media (max-width: 768px) {
	.single-product .mfpo-addon-modal__panel {
		padding: 24px 20px;
		max-height: 80vh;
		overflow-y: auto;
	}
}

/* WC notices (single-product only) — v8 paletta-illeszkedés.
 * Cart/checkout/account oldalakra a default WC stylesheet érvényes;
 * .single-product scope tartja itt a felülírást. */
.single-product .woocommerce-notices-wrapper {
	margin: 0 0 24px;
}
.single-product .woocommerce-message,
.single-product .woocommerce-error,
.single-product .woocommerce-info {
	border-radius: 12px;
	padding: 14px 18px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	border: 2px solid var(--light-gray);
	background: white;
	color: var(--charcoal);
	list-style: none;
	margin: 0 0 12px;
}
.single-product .woocommerce-message {
	border-color: var(--sage);
	background: var(--sage-pale);
	color: var(--sage-dark);
}
.single-product .woocommerce-error {
	border-color: var(--terracotta);
	background: rgba(198, 123, 92, 0.08);
	color: var(--terracotta-dark);
}
.single-product .woocommerce-info {
	border-color: var(--warm-gray);
	background: var(--cloud);
	color: var(--charcoal);
}
.single-product .woocommerce-message a,
.single-product .woocommerce-error a,
.single-product .woocommerce-info a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

/* Gallery thumbnail-strip overflow control (single-product, desktop only).
 * ---------------------------------------------------------------------------
 * Background: the child theme's `woocommerce/single-product.php` renders the
 * v6 prototype `.pd-gallery` markup (NOT WC-default flex-control-thumbs).
 * `.pd-gallery` is a CSS Grid with `grid-template-columns: 80px 1fr` —
 * `.pd-thumbnails` (vertical strip, `flex-direction: column`) on the left,
 * `.pd-main` (featured image, `aspect-ratio: 4/5`) on the right.
 *
 * Bug (5+ thumbnails): without a `max-height` on `.pd-thumbnails`, the strip
 * grows to N × 90px (thumb 80px + 10px gap), pushing `.pd-info` down (since
 * `.pd-wrap` is `1fr 1fr` grid that stretches column heights to row).
 *
 * v0.10.4 first attempt (REPLACED): used `container-type: inline-size` +
 * `max-height: calc((100cqw - 96px) * 5/4)` to match `.pd-main` height, but
 * `.pd-thumb` children inherit `flex-shrink: 1` (default) — so the items
 * SQUASHED to fit max-height instead of overflowing, and `overflow-y: auto`
 * never triggered the scrollbar. Result: 22 thumbs visible at ~14-18px each.
 *
 * v0.10.5 fix (this block): adds `flex-shrink: 0` to thumb children + drops
 * the cqw machinery in favor of a fixed `max-height: 500px`. The thumbs now
 * keep their declared 80px height, total content overflows the 500px cap,
 * and `overflow-y: auto` triggers a proper soft scrollbar. Cleaner mental
 * model and broader browser support (no container-query units required).
 *
 * Specificity (0,2,0) via `.single-product` prefix raises above the main.css
 * `.pd-thumbnails` baseline (0,1,0); no !important needed (L31 minta). Mobile
 * (≤ 768px) keeps the existing `flex-direction: row` + `overflow-x: auto` rule
 * from main.css line 841 — this block scopes itself to ≥ 769px.
 * See tasks/gallery-thumbnail-overflow-diagnosis.md §7 for the full diagnosis. */

@media (min-width: 769px) {
	.single-product .pd-gallery {
		align-items: start;
	}
	.single-product .pd-thumbnails {
		max-height: 500px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--warm-gray) transparent;
	}
	.single-product .pd-thumbnails > * {
		flex-shrink: 0;       /* prevent flex from squashing thumbs to fit max-height */
		aspect-ratio: 1 / 1;
		height: auto;
		width: 100%;
	}
	.single-product .pd-thumbnails::-webkit-scrollbar {
		width: 6px;
	}
	.single-product .pd-thumbnails::-webkit-scrollbar-track {
		background: transparent;
	}
	.single-product .pd-thumbnails::-webkit-scrollbar-thumb {
		background: var(--warm-gray);
		border-radius: 3px;
	}
}