/**
 * PDP-011A: MAIN Buy Box core.
 *
 * Visual constants transcribed from PurchaseSurface2
 * (handoff/pdp-mvp-v1/claude-design/pdp/project/pdp-purchase-surface-v2.0.jsx),
 * mapped onto real DEV colors/fonts since the JSX prototype's own design
 * tokens (--surface-sunken, --zz-catalog-card-border, --text-heading,
 * --text-muted, --font-body) do not exist in the real site's CSS -- values
 * below reuse colors already established by the accepted Configuration
 * block (plugins/zigzag-custom/assets/css/pdp-configuration-fit.css):
 * #2f2f2f (heading text), #6b7280 (muted/icon), #fafafa (sunken surface).
 *
 * Breakpoints match the real, already-accepted PDP Decision Core grid
 * breakpoints (themes/flatsome-child/assets/css/pdp-decision-core.css):
 * <=549.98px Mobile, 550-1023.98px Tablet Portrait, 1024-1279.98px Tablet
 * Landscape, >=1280px Desktop -- the same four bands the task's 390/834/
 * 1180/1440 probe widths fall into.
 */

.zz-buybox {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 18px;
	box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
	margin-bottom: 14px;
	padding: 16px;
	/* PDP-011B-R1 Defect E: canonical body font is Lato at every breakpoint,
	   not only >=1280px Desktop -- `font-family: inherit` here let the
	   ambient theme font win below Desktop, so computed style on the real
	   fixture did not confirm Lato. Declared directly so every role below
	   (title/pill/price/attr label/attr value) resolves to Lato regardless
	   of what the host page's own body font-family is. */
	font-family: Lato, sans-serif;
	--zz-buybox-mincell: 104px;
}

.zz-buybox * {
	box-sizing: border-box;
}

.zz-buybox__title {
	/* PDP-011B-R1 Defect E: `font: 600 14px/1.35 inherit;` is invalid CSS --
	   the `font` shorthand's global keywords (inherit/initial/unset) may
	   only be the property's ENTIRE value, never combined with explicit
	   weight/size/line-height in the same declaration. Browsers drop the
	   whole invalid declaration, so this rule was silently doing nothing
	   below Desktop: computed style fell back to the browser default
	   (16px/400/~1.6), not the canonical 600/14px/1.35. Rewritten as
	   longhand so `font-family: inherit` (now Lato, per `.zz-buybox`'s own
	   explicit font-family above) is valid on its own while weight/size/
	   line-height are set explicitly. Same fix applied to every other
	   `font: ... inherit` declaration below. */
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	font-family: inherit;
	color: #2f2f2f;
}

.zz-buybox__panel {
	position: relative;
	margin-top: 20px;
	background: #fafafa;
	border-radius: 14px;
	padding: 14px;
}

.zz-buybox__pill {
	position: absolute;
	left: -2px;
	top: -12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 12px 0 10px;
	border-radius: 999px;
	background: #1f1f1f;
	color: #fff;
	font-style: normal;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1;
	font-family: inherit;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .14);
	white-space: nowrap;
}

.zz-buybox__incomplete {
	padding-top: 22px;
	font-style: normal;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	font-family: inherit;
	color: #2f2f2f;
}

.zz-buybox__complete[hidden] {
	display: none;
}

.zz-buybox__price-row {
	display: flex;
	justify-content: flex-end;
	padding-top: 8px;
}

.zz-buybox__price {
	font-style: normal;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.1;
	font-family: inherit;
	color: #2f2f2f;
	white-space: nowrap;
}

/* Native `.woocommerce-variation` (variable products only) carries the
   same price/availability WooCommerce already resolved -- its own default
   box is hidden here because this card mirrors the identical price_html
   string in `.zz-buybox__price` above; availability itself stays visible
   in Configuration (pdp-configuration-fit.php's own relocation), untouched. */
.zz-buybox__panel .woocommerce-variation.single_variation {
	display: none;
}

.zz-buybox__panel .woocommerce-variation-price,
.zz-buybox__panel .woocommerce-variation-availability,
.zz-buybox__panel .woocommerce-variation-description {
	display: none;
}

.zz-buybox__divider {
	height: 1px;
	background: #e2e5ea;
	margin: 12px 0;
}

/* PDP-011B-R1 Defect F: canonical PS2Attrs clips the row's own
   margin-left:-13px inside a SEPARATE overflow:hidden ancestor, so only
   the first cell's own left border (pushed outside that ancestor) is
   invisible while inter-cell separators stay visible. The real DOM here
   has a single element serving both roles (`.zz-buybox__attrs` is both
   the clipping wrapper and the shifted row -- confirmed in
   plugins/zigzag-custom/modules/pdp-buybox-v2.php, which never adds a
   dedicated wrapper) -- overflow:hidden cannot clip an element's own
   border via its own margin, so the previous margin-left:-13px only
   shifted the whole row left, leaving the first cell's left border
   visibly sticking out (the owner-reported vertical line before "Колір").
   Adding a wrapper div is out of scope (CSS-only, no PHP/JS per this
   task), so the canonical two-element clip mechanism is not reproducible
   as-is; the documented allowed deviation is to scope border-left to
   non-first cells directly, which reproduces the same visible result
   (no border before the first attribute, separators between the rest)
   without the stray negative-margin shift. */
.zz-buybox__attrs {
	display: flex;
	flex-direction: column;
	row-gap: 12px;
}

.zz-buybox__attr {
	min-width: 0;
	max-width: 100%;
	padding-right: 4px;
}

.zz-buybox__attr + .zz-buybox__attr {
	border-left: 0;
}

.zz-buybox__attr-head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.zz-buybox__attr-head svg {
	flex: 0 0 16px;
	display: block;
	width: 16px;
	height: 16px;
	color: #4b4f56;
	stroke: #4b4f56;
}

.zz-buybox__attr-head span {
	min-width: 0;
	font-style: normal;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.3;
	font-family: inherit;
	color: #6b7280;
	/* PDP-011B-R1 Defect C: `overflow-wrap: break-word` let the browser
	   break inside real long words ("Довжина" -> "Довжин"/"а") whenever a
	   narrow 3-up cell couldn't fit one whole word on a line. Real business
	   labels are authoritative and must only wrap at whitespace/punctuation
	   (space, comma), never mid-word, so this now uses the default normal
	   wrapping; the head row's own min-height (above) gives 2-line labels
	   room without corrupting the words themselves. */
	overflow-wrap: normal;
	word-break: normal;
}

.zz-buybox__attr-val {
	margin-top: 3px;
	padding-left: 22px;
	font-style: normal;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.3;
	font-family: inherit;
	color: #2f2f2f;
	overflow-wrap: break-word;
}

.zz-buybox__cta-zone {
	margin-top: 14px;
}

.zz-buybox__cta-zone .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 14px;
	width: 100%;
	margin: 0;
}

.zz-buybox__cta-zone .woocommerce-variation-add-to-cart > input[type="hidden"],
.zz-buybox__cta-zone > input[type="hidden"] {
	display: none;
}

.zz-buybox__cta-zone .quantity {
	flex: 0 0 140px;
	width: 140px !important;
	height: 64px !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: 42px 1fr 42px;
	align-items: center;
	overflow: hidden;
	background: #fff !important;
	border: 1px solid #e2e5ea !important;
	border-radius: 12px !important;
	box-shadow: none !important;
}

.zz-buybox__cta-zone .quantity input[type="button"],
.zz-buybox__cta-zone .quantity .button,
.zz-buybox__cta-zone .quantity .is-form {
	width: 42px !important;
	height: 62px !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #2f2f2f !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	font-family: inherit !important;
	text-align: center !important;
	text-shadow: none !important;
}

.zz-buybox__cta-zone .quantity input.qty {
	width: 100% !important;
	height: 62px !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #2f2f2f !important;
	font: 700 16px/1 Lato, sans-serif !important;
	text-align: center !important;
	-moz-appearance: textfield;
}

.zz-buybox__cta-zone .quantity input.qty::-webkit-outer-spin-button,
.zz-buybox__cta-zone .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.zz-buybox__cta-zone .single_add_to_cart_button {
	flex: 1 1 auto;
	height: 62px !important;
	min-height: 62px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: #1f1f1f !important;
	box-shadow: none !important;
	color: #fff !important;
	font: 700 18px/1 Lato, sans-serif !important;
	letter-spacing: 0 !important;
	line-height: 62px !important;
	text-align: center !important;
	text-shadow: none !important;
	text-transform: uppercase !important;
}

.zz-buybox__cta-zone .single_add_to_cart_button:hover,
.zz-buybox__cta-zone .single_add_to_cart_button:focus {
	background: #1f1f1f !important;
	color: #fff !important;
	box-shadow: none !important;
}

.zz-buybox__select-cta {
	display: none;
	width: 100%;
	height: 62px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: #1f1f1f;
	box-shadow: none;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 62px;
	font-family: inherit;
	text-align: center;
	text-shadow: none;
	text-transform: uppercase;
	cursor: pointer;
}

.zz-buybox__select-cta:hover,
.zz-buybox__select-cta:focus {
	background: #1f1f1f;
	color: #fff;
	box-shadow: none;
}

.zz-buybox__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* State gating: which half of the panel/cta-zone is visible. Native qty +
   Add to Cart controls are never removed from the DOM or disabled here.
   In INCOMPLETE, the native quantity remains visible while the native
   disabled submit is hidden and replaced by the presentation-only guidance
   BUY button. */
.zz-buybox[data-buybox-state="incomplete"] .zz-buybox__complete {
	display: none;
}

.zz-buybox[data-buybox-state="incomplete"] .zz-buybox__cta-zone {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.zz-buybox[data-buybox-state="incomplete"] .woocommerce-variation-add-to-cart {
	display: flex;
	order: 1;
	flex: 0 0 calc((100% - 10px) / 2);
	min-width: 0;
	width: calc((100% - 10px) / 2);
	max-width: none;
	opacity: 1;
}

.zz-buybox[data-buybox-state="incomplete"] .woocommerce-variation-add-to-cart .quantity {
	flex: 1 1 auto;
	width: 100% !important;
	max-width: none !important;
}

.zz-buybox[data-buybox-state="incomplete"] .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	display: none !important;
}

.zz-buybox[data-buybox-state="incomplete"] .zz-buybox__select-cta {
	display: block;
	order: 2;
	flex: 0 0 calc((100% - 10px) / 2);
	min-width: 0;
	width: calc((100% - 10px) / 2);
	max-width: none;
	height: 64px;
	line-height: 64px;
}

.zz-buybox[data-buybox-state="complete"] .zz-buybox__incomplete {
	display: none;
}

/* Simple products (data-buybox-state="complete" from first render, no
   .zz-buybox__incomplete node at all) always show native qty/CTA. */
.zz-buybox[data-buybox-state="complete"] .zz-buybox__cta-zone {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.zz-buybox[data-buybox-state="complete"] .zz-buybox__cta-zone > .quantity,
.zz-buybox[data-buybox-state="complete"] .zz-buybox__cta-zone > .single_add_to_cart_button {
	flex: 0 0 calc((100% - 10px) / 2);
	min-width: 0;
	width: calc((100% - 10px) / 2) !important;
	max-width: none !important;
}

.zz-buybox[data-buybox-state="complete"] .zz-buybox__cta-zone > .single_add_to_cart_button {
	height: 64px !important;
	min-height: 64px !important;
	line-height: 64px !important;
}

/* minCell responsive steps, matching PurchaseSurface2's own comment
   (minCell: 240 -> vertical list; ~104-118 -> 3-up) mapped to the real
   Decision Core breakpoints. */
/* PDP-011B Scope B: Mobile-only quantity centering fix (see below). The
   Configuration -> Size Help -> Buy Box seam itself (Scope A) is owned
   entirely by `.zz-pdp-config-fithelp`'s own margin-bottom in
   themes/flatsome-child/assets/css/pdp-decision-core.css -- confirmed
   live (8px measured == its existing margin-bottom:8px, with `.zz-buybox`
   itself carrying no margin-top at any breakpoint). A `.zz-buybox
   margin-top` companion rule was tried here first but rejected: it sits
   as the first in-flow child of `.single_variation_wrap`, which has no
   own top border/padding, so its margin-top collapsed with
   `.zz-pdp-config-fithelp`'s margin-bottom (adjacent-sibling-through-empty-
   parent collapsing, both being plain block boxes) instead of adding to
   it -- measured live: 16px total, i.e. max(16,10), not 16+10. The single-
   owner margin-bottom fix in pdp-decision-core.css avoids that collapse
   entirely and is the only Scope-A change; nothing here in this file
   changes for Scope A. */
@media (max-width: 549.98px) {
	/* PDP-011B Scope B: the Desktop R5B quantity-centering fix (grid-column
	   assignments for minus/input/plus, input stretch, screen-reader label
	   out of grid flow) only ever shipped inside `@media (min-width:
	   1280px)` below. Mobile shares the exact same `.quantity` shell CSS
	   (140x64px, `grid-template-columns: 42px 1fr 42px`, unchanged by
	   width) but never got the finishing grid placement, so
	   `input.qty` fell back to its intrinsic ~32px size instead of
	   stretching across the middle 1fr track and the numeral sat off-
	   center (measured live: 22px gap before `+`, 0px after `-`). These are
	   geometry-only declarations (no font-family change, so Mobile keeps
	   `font-family: inherit` / var(--font-body) rather than Desktop's
	   Lato override) -- copied, not moved, so the existing Desktop block
	   below is untouched and stays authoritative there. */
	.zz-buybox__cta-zone .quantity .ux-quantity__button--minus {
		grid-column: 1 !important;
	}

	.zz-buybox__cta-zone .quantity .ux-quantity__button--plus {
		grid-column: 3 !important;
	}

	.zz-buybox__cta-zone .quantity input.qty {
		grid-column: 2 !important;
		justify-self: stretch !important;
		align-self: stretch !important;
		max-width: none !important;
		line-height: 62px !important;
	}

	.zz-buybox__cta-zone .quantity .screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(1px, 1px, 1px, 1px) !important;
		clip-path: inset(50%) !important;
		border: 0 !important;
		white-space: nowrap !important;
	}
}

@media (min-width: 550px) and (max-width: 1023.98px) {
	.zz-buybox {
		--zz-buybox-mincell: 104px;
	}
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
	.zz-buybox {
		--zz-buybox-mincell: 118px;
	}
}

@media (min-width: 1280px) {
	.zz-buybox {
		font-family: Lato, sans-serif;
		font-size: 16px;
		line-height: 1;
		--zz-buybox-mincell: 240px;
	}

	.zz-buybox__title {
		font: 600 14px/1.35 Lato, sans-serif !important;
		color: #3a3d42;
	}

	.zz-buybox__panel {
		line-height: 1;
	}

	.zz-buybox__pill {
		font: 600 12.5px/1 Lato, sans-serif !important;
	}

	.zz-buybox__incomplete {
		font: 600 14.5px/1.3 Lato, sans-serif !important;
	}

	.zz-buybox__price {
		font: 700 19px/1.1 Lato, sans-serif !important;
	}

	.zz-buybox__attr-head span {
		font: 400 12.5px/1.3 Lato, sans-serif !important;
	}

	.zz-buybox__attr-val {
		font: 700 14.5px/1.3 Lato, sans-serif !important;
	}

	.zz-buybox__cta-zone .quantity input[type="button"],
	.zz-buybox__cta-zone .quantity .button,
	.zz-buybox__cta-zone .quantity .is-form {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font: 400 18px/1 Lato, sans-serif !important;
	}

	.zz-buybox__cta-zone .quantity .ux-quantity__button--minus {
		grid-column: 1 !important;
	}

	.zz-buybox__cta-zone .quantity .ux-quantity__button--plus {
		grid-column: 3 !important;
	}

	.zz-buybox__cta-zone .quantity input.qty {
		grid-column: 2 !important;
		justify-self: stretch !important;
		align-self: stretch !important;
		max-width: none !important;
		line-height: 62px !important;
	}

	.zz-buybox__cta-zone .quantity .screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(1px, 1px, 1px, 1px) !important;
		clip-path: inset(50%) !important;
		border: 0 !important;
		white-space: nowrap !important;
	}

	.zz-buybox__select-cta {
		margin: 0 !important;
		font: 700 18px/1 Lato, sans-serif !important;
		line-height: 62px !important;
		padding: 0 18px !important;
	}
}

.single-product .variations_form .variations tbody tr.zz-pdp-attention-required {
	position: relative;
	outline: 0;
	background: transparent;
	box-shadow: none;
}

.single-product .variations_form .variations tbody tr.zz-pdp-attention-required > th,
.single-product .variations_form .variations tbody tr.zz-pdp-attention-required > td {
	position: relative;
	z-index: 1;
}

.single-product .variations_form .variations tbody tr.zz-pdp-attention-required::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -10px;
	right: -10px;
	bottom: 8px;
	left: -10px;
	border: 2px solid #ed0678;
	border-radius: 16px;
	background: rgba(237, 6, 120, .035);
	box-shadow: 0 0 0 3px rgba(237, 6, 120, .08);
	pointer-events: none;
	animation: zz-pdp-attention-required 1600ms cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes zz-pdp-attention-required {
	0% {
		border-color: rgba(237, 6, 120, 0);
		background: rgba(237, 6, 120, 0);
		box-shadow: 0 0 0 0 rgba(237, 6, 120, 0);
	}

	12%,
	62% {
		border-color: #ed0678;
		background: rgba(237, 6, 120, .035);
		box-shadow: 0 0 0 3px rgba(237, 6, 120, .08);
	}

	100% {
		border-color: rgba(237, 6, 120, 0);
		background: rgba(237, 6, 120, 0);
		box-shadow: 0 0 0 0 rgba(237, 6, 120, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .variations_form .variations tbody tr.zz-pdp-attention-required::after {
		animation: none;
		border-color: #ed0678;
		background: rgba(237, 6, 120, .035);
		box-shadow: 0 0 0 3px rgba(237, 6, 120, .08);
	}
}

@media (max-width: 1023.98px) {
	.single-product .variations_form .variations tbody tr.zz-pdp-attention-required::after {
		bottom: 16px;
	}
}