/**
 * Single-product buy box — premium / quiet.
 *
 * Direction, deliberately NOT the shop grid's chunky "Arkáda" slab: this is
 * the moment someone decides to spend money, so it should feel considered,
 * not toy-like. Materials and restraint do the work —
 *
 *  - one translucent glass panel with a fine gold inner hairline, echoing the
 *    art-deco gold framing from the Poník klub profile design;
 *  - an iOS-style segmented control: a recessed track with a single raised
 *    glass thumb that slides, instead of four competing coloured blocks;
 *  - the price is the headline and gets real size, tight tracking and space;
 *  - gold is reserved for exactly two things — the chosen option's hairline
 *    and the buy button — so it means "this is the action", nowhere else.
 *
 * Press feedback is instant (scale on :active with transition suppressed) and
 * the release eases back, per Apple's fluid-interface guidance.
 *
 * Elementor's PER-PAGE css (`.elementor-<id> … .cart button`) outranks any
 * selector we can write, so the properties it steals are pinned. Every pin is
 * scoped inside the buy box.
 */

.single-product .elementor-add-to-cart {
	--hp-ink: #f6f4ff;
	--hp-dim: rgba(246, 244, 255, 0.55);
	--hp-gold: #ffc200;
	--hp-gold-soft: rgba(255, 194, 0, 0.38);
	--hp-edge: rgba(255, 255, 255, 0.11);
	--hp-well: rgba(0, 0, 0, 0.26);
}

/* ------------------------------------------------------------- the panel */
/* Same snippet frames the whole widget in a 5px dashed pink border with 20px
   of padding — the "ružový štvorec". The glass panel inside is the frame now. */
.single-product .elementor-add-to-cart {
	padding: 0 !important;
	border: 0 !important;
}
.single-product .elementor-add-to-cart form.cart {
	max-width: 460px;
	margin-inline: auto;
	padding: 22px 22px 24px;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--hp-edge);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	/* Outer depth + the fine gold frame line, drawn inside the radius. */
	box-shadow:
		0 26px 60px rgba(0, 0, 0, 0.4),
		inset 0 0 0 1px rgba(255, 194, 0, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.13);
	text-align: left;
}

/* Woo's attribute table is a layout table; we only need it to stack. */
.single-product .elementor-add-to-cart table.variations,
.single-product .elementor-add-to-cart table.variations tbody,
.single-product .elementor-add-to-cart table.variations tr,
.single-product .elementor-add-to-cart table.variations th,
.single-product .elementor-add-to-cart table.variations td {
	display: block !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}
.single-product .elementor-add-to-cart table.variations th label,
.single-product .elementor-add-to-cart table.variations .label label {
	display: block;
	margin: 0 0 11px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hp-dim) !important;
}

/* The native select stays for WooCommerce; it just stops being seen. */
.single-product .elementor-add-to-cart select.hp-native-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0 !important;
}

/* --------------------------------------------- segmented control (gramáž) */
.single-product .elementor-add-to-cart .hp-seg {
	display: flex;
	gap: 2px;
	position: relative;
	padding: 4px;
	border-radius: 16px;
	background: var(--hp-well);
	/* The ring is an inset shadow, NOT a border: a border would offset the
	   thumb's containing block from the pills' offsetLeft origin by 1px and
	   every position would need it subtracted back out. */
	border: 0;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.07),
		inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.single-product .elementor-add-to-cart .hp-seg-btn {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: 10px 8px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: var(--hp-dim) !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	/* Transition on the BASE rule: the release eases, the press does not. */
	transition: color 0.18s ease, background 0.18s ease, transform 0.16s ease;
}
.single-product .elementor-add-to-cart .hp-seg-btn:hover:not(:disabled):not(.is-on) {
	background: rgba(255, 255, 255, 0.05) !important;
	color: var(--hp-ink) !important;
}
.single-product .elementor-add-to-cart .hp-seg-btn:active:not(:disabled) {
	transform: scale(0.96);
	transition: none;
}
/* The selected pill only carries type now — the raised surface is a single
   thumb that TRAVELS between pills, so the selection moves rather than
   teleporting. */
.single-product .elementor-add-to-cart .hp-seg-btn.is-on {
	background: transparent !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

/* The travelling thumb. Only transform/width/height animate, all cheap. The
   curve is a hard ease-out (fast departure, decisive arrival) rather than a
   bouncy one: an overshoot on the outer pills would push the thumb past the
   track's 4px padding, and a tap carries no momentum to justify bounce. */
.single-product .elementor-add-to-cart .hp-seg-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px var(--hp-gold-soft),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	pointer-events: none;
	z-index: 0;
	will-change: transform;
	transition:
		transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
		width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
		height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.18s ease;
}
/* First placement and re-measures must land instantly, not slide in from 0,0. */
.single-product .elementor-add-to-cart .hp-seg-thumb.hp-noanim { transition: none; }
.single-product .elementor-add-to-cart .hp-seg.hp-seg-empty .hp-seg-thumb { opacity: 0; }
.single-product .elementor-add-to-cart .hp-seg-btn.is-out {
	opacity: 0.3;
	cursor: not-allowed;
	text-decoration: line-through;
}
.single-product .elementor-add-to-cart .hp-seg-btn:focus-visible {
	outline: 2px solid var(--hp-gold);
	outline-offset: 2px;
}

/* Woo's "Vymazať" reset link. It only has a job once a variation is chosen, so
   it rides along the right edge of the picker instead of taking a line of its
   own in the middle of the box. Elementor sizes links from the kit, hence the
   !important on font-size. */
.single-product .elementor-add-to-cart a.reset_variations {
	display: block;
	width: fit-content;
	margin: 6px 0 0 auto !important;
	padding: 2px 2px;
	font-size: 11px !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	color: var(--hp-dim) !important;
	text-decoration: none !important;
	opacity: 0.75;
	transition: opacity 150ms ease, color 150ms ease;
}
.single-product .elementor-add-to-cart a.reset_variations:hover {
	color: var(--hp-ink) !important;
	opacity: 1;
}

/* ---------------------------------------------------------- price + stock */
/* Price and stock share ONE baseline row: as two stacked blocks they cost a
   whole extra band of empty space for a 13px word. Woo containers carry theme
   clearfix pseudo-elements, which become flex ITEMS the moment this is a flex
   container and push every real child one slot along — hence the reset. */
.single-product .elementor-add-to-cart .woocommerce-variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin: 14px 0 0;
	padding: 0;
	text-align: left;
}
.single-product .elementor-add-to-cart .woocommerce-variation::before,
.single-product .elementor-add-to-cart .woocommerce-variation::after {
	content: none;
	display: none;
}
.single-product .elementor-add-to-cart .woocommerce-variation-description { flex: 1 1 100%; }
.single-product .elementor-add-to-cart .woocommerce-variation-price {
	margin: 0;
	/* A WPCode snippet on live still styles the OLD buy box: it centres this
	   price and pads it 20px. It predates this skin and there is no reason for
	   both to exist, but the skin must not depend on someone remembering to
	   delete it. */
	padding-bottom: 0 !important;
	text-align: left !important;
}
.single-product .elementor-add-to-cart .woocommerce-variation-price .price,
.single-product .elementor-add-to-cart .woocommerce-variation-price span.amount,
.single-product .elementor-add-to-cart .woocommerce-variation-price bdi {
	color: var(--hp-gold) !important;
	/* Was clamp(34px,7vw,44px) — at 44px it owned a third of the panel's
	   height. Still the largest thing here, no longer the loudest. */
	font-size: clamp(26px, 4.4vw, 30px) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	/* Tracking scales with size: less negative now the type is smaller. */
	letter-spacing: -0.02em !important;
	font-variant-numeric: tabular-nums;
}
.single-product .elementor-add-to-cart .woocommerce-variation-price del,
.single-product .elementor-add-to-cart .woocommerce-variation-price del bdi {
	color: var(--hp-dim) !important;
	font-size: 0.55em !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	margin-right: 8px;
}
/* Woo wraps the sale price in <ins>, which the browser underlines by default —
   under a 30px gold number that reads as a mistake, not as emphasis. */
.single-product .elementor-add-to-cart .woocommerce-variation-price ins,
.single-product .elementor-add-to-cart .woocommerce-variation-price ins bdi {
	text-decoration: none !important;
	background: none !important;
}

/* A quiet status line — a dot and a word, not a badge competing with the price. */
.single-product .elementor-add-to-cart .woocommerce-variation-availability {
	margin: 0;
	flex: 0 0 auto;
}
.single-product .elementor-add-to-cart .woocommerce-variation-availability p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: rgba(126, 231, 173, 0.9) !important;
}
.single-product .elementor-add-to-cart .woocommerce-variation-availability p::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 999px;
	background: currentColor;
}
.single-product .elementor-add-to-cart .woocommerce-variation-availability p.out-of-stock { color: rgba(255, 158, 161, 0.92) !important; }

/* --------------------------------------------------- quantity + buy line */
/* Elementor's add-to-cart widget wins on specificity for the row's flex
   properties — measured computed values were `nowrap` and `basis:auto`, so
   without !important the CTA never wrapped and the row overflowed the panel
   padding by ~23px each side on a 390px phone. */
.single-product .elementor-add-to-cart .woocommerce-variation-add-to-cart,
.single-product .elementor-add-to-cart form.cart > .hp-buy-row {
	display: flex !important;
	align-items: stretch;
	justify-content: flex-start !important;  /* Elementor centres this row */
	gap: 12px;
	margin-top: 18px;
	flex-wrap: wrap !important;
}
.single-product .elementor-add-to-cart .quantity.hp-qty {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	/* The HEIGHT lives here, not on the input. When the input carried its own
	   min-height it overflowed this box (32px tall) and its digit sat 11px
	   below the − / + glyphs. */
	min-height: 54px;
	border-radius: 15px;
	border: 1px solid var(--hp-edge);
	background: var(--hp-well);
	overflow: hidden;
}
.single-product .elementor-add-to-cart .hp-qty-btn {
	width: 42px;
	/* The theme gives buttons their own height, so they sat 30px tall at the
	   top of a 54px box while the digit centred — pin the stretch. */
	align-self: stretch !important;
	height: auto !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--hp-dim) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: color 0.16s ease, background 0.16s ease;
}
.single-product .elementor-add-to-cart .hp-qty-btn:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--hp-ink) !important; }
.single-product .elementor-add-to-cart .hp-qty-btn:active { background: rgba(255, 255, 255, 0.12) !important; transition: none; }
.single-product .elementor-add-to-cart .quantity.hp-qty input.qty {
	width: 46px !important;
	min-height: 0 !important;
	height: auto !important;
	align-self: stretch;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--hp-ink) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-align: center;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
.single-product .elementor-add-to-cart .quantity.hp-qty input.qty::-webkit-outer-spin-button,
.single-product .elementor-add-to-cart .quantity.hp-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Gold is the shop's accent — so the one gold object here is the action. */
.single-product .elementor-add-to-cart button.single_add_to_cart_button {
	flex: 1 1 220px !important;
	min-width: 0 !important;   /* default min-width:auto floors it at text width */
	margin: 0 !important;      /* Elementor ships a 10px left margin */
	min-height: 54px;
	padding: 16px 28px !important;
	border: 0 !important;
	border-radius: 15px !important;
	background-color: #f5b301 !important;
	background-image: linear-gradient(180deg, #ffd451, #f5b301) !important;
	color: #2b1d00 !important;
	font-family: inherit !important;
	font-size: 17px !important;   /* 15px read thin inside a 54px slab */
	font-weight: 700 !important;
	letter-spacing: 0 !important;  /* larger type wants tighter tracking */
	text-transform: none !important;
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.36),
		inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
	cursor: pointer;
	transition: transform 0.16s ease, filter 0.18s ease;
}
.single-product .elementor-add-to-cart button.single_add_to_cart_button:hover { filter: brightness(1.05); }
.single-product .elementor-add-to-cart button.single_add_to_cart_button:active {
	transform: scale(0.98);
	transition: none; /* instant on press */
}
.single-product .elementor-add-to-cart button.single_add_to_cart_button:focus-visible {
	outline: 3px solid rgba(255, 194, 0, 0.55);
	outline-offset: 3px;
}
.single-product .elementor-add-to-cart button.single_add_to_cart_button.disabled,
.single-product .elementor-add-to-cart button.single_add_to_cart_button:disabled {
	background: rgba(255, 255, 255, 0.07) !important;
	color: var(--hp-dim) !important;
	box-shadow: inset 0 0 0 1px var(--hp-edge) !important;
	cursor: not-allowed;
	filter: none;
}

@media (max-width: 480px) {
	.single-product .elementor-add-to-cart form.cart { padding: 22px 18px 24px; border-radius: 22px; }
	/* Phone: the stepper keeps its natural width on its own line and the CTA
	   takes a full-width line under it — no cramped 174px button. */
	.single-product .elementor-add-to-cart button.single_add_to_cart_button { flex: 1 1 100% !important; }
	.single-product .elementor-add-to-cart .quantity.hp-qty { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.single-product .elementor-add-to-cart .hp-seg-btn,
	.single-product .elementor-add-to-cart .hp-seg-thumb,
	.single-product .elementor-add-to-cart button.single_add_to_cart_button { transition: none; }
	.single-product .elementor-add-to-cart .hp-seg-btn:active,
	.single-product .elementor-add-to-cart button.single_add_to_cart_button:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.single-product .elementor-add-to-cart form.cart {
		background: #1b1836;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}