/* Digital Hub — single product page, rebuilt from donor's real
   /opt/papa.market/website/donor-reference/html/03_product.html (see
   woocommerce/single-product.php for the template + block notes). */

.dh-product-page {
	padding: 1.5rem 0 3rem;
}

/* donor: `.d-flex flex-column flex-xl-row gap-2` wrapping #id_left (flex:1)
   and #id_right (`.scroll-wrapper{width:320px}`) */
.dh-product-columns {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 1200px) {
	.dh-product-columns {
		flex-direction: row;
		align-items: flex-start;
	}
}

.dh-product-left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dh-product-right {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 1200px) {
	.dh-product-right {
		/* Donor's own value is 320px (see docblock above) — widened +50px
		   by explicit user request so the denomination tile grid fits 3
		   columns per row on desktop instead of 2. */
		width: 370px;
	}

	/* donor: `.sticky-xl-top{position:sticky;top:72px}` */
	.dh-buy-panel {
		position: sticky;
		top: 72px;
	}
}

/* donor: `.block.block-medium.block-xl-extra-large d-flex flex-wrap gap-3
   p-3 p-xl-4` wrapping the gallery + title/meta */
.dh-product-top {
	background-color: var(--color-surface);
	border-radius: 16px;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (min-width: 1200px) {
	.dh-product-top {
		padding: 1.5rem;
		flex-wrap: nowrap;
	}
}

.dh-product-gallery {
	flex: 0 0 auto;
	width: 100%;
	max-width: 280px;
}

.dh-product-gallery .woocommerce-product-gallery {
	position: relative;
}

.dh-product-gallery .woocommerce-product-gallery__wrapper {
	background-color: var(--color-bg);
	border-radius: 12px;
	padding: 1.5rem;
}

.dh-product-info {
	flex: 1 1 300px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* donor: `.title-bold.headline-xl-bold` — 26px/700/32px */
.dh-product-title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 32px;
	color: var(--color-text);
}

.dh-product-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	color: var(--color-text-secondary);
}

.dh-product-meta-dot {
	color: var(--color-text-secondary);
}

.dh-product-meta-reviews {
	color: var(--color-text-secondary);
}

.dh-product-meta-reviews:hover {
	color: var(--color-brand);
}

/* donor: SecureDeal block — real, generic delivery-mechanics claims (not
   per-seller data), shield icon is hardcoded donor green (#6b8). */
.dh-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0.75rem 0;
	border-top: 1px solid #e2e4e8;
	border-bottom: 1px solid #e2e4e8;
}

.dh-trust-badge {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 14px;
	color: var(--color-text-secondary);
}

.dh-trust-badge svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

.dh-product-meta-line {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.dh-product-meta-line a {
	color: var(--color-text-secondary);
}

.dh-product-meta-line a:hover {
	color: var(--color-brand);
}

/* donor: right-panel `.block.block-large p-3` price/buy panel */
.dh-buy-panel {
	background-color: var(--color-surface);
	border-radius: 16px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* donor: `.display-bold` — 28px/700/36px */
.dh-buy-panel .price {
	color: var(--color-text);
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
}

.dh-buy-panel form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* Direct children of form.cart that must each take the FULL row width
   instead of shrinking to their own content width (the default for a flex
   item's main-axis size) — without this, e.g. .dh-variation-tiles-wrap sat
   at ~316px of the panel's 330px content width, reading as more left
   padding than right. Variable products additionally nest quantity/buttons
   one level deeper inside .single_variation_wrap > .woocommerce-variation-add-to-cart
   (simple products don't have that wrapper — their quantity/buttons are
   direct children of form.cart itself, sized by the rules further below),
   so single_variation_wrap needs the same full-row treatment as the tile
   block above it. */
.dh-buy-panel form.cart > .dh-variation-tiles-wrap,
.dh-buy-panel form.cart > .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
}

/* Variable products render quantity/buttons inside this wrapper (see
   comment above) — make IT the flex row too, so the existing
   .quantity/.single_add_to_cart_button/.dh-buy-now-button rules below
   (already written as descendant selectors) apply the same way they
   already did for simple products. */
.dh-buy-panel form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* Fulfillment fields (Player ID/Telegram username/…) live in this same
   flex row (rendered via woocommerce_before_add_to_cart_button, right
   before quantity/buttons) — force them onto their own full-width row
   rather than squeezing in next to the quantity stepper. */
.dh-buy-panel form.cart .woocommerce-variation-add-to-cart > .dh-fulfill-fields {
	flex: 1 1 100%;
	width: 100%;
}

/* Donor layout, by explicit user request: "Кол-во" row (label left,
   minus/input/plus stepper right) on its own full-width line, THEN
   "Купить сейчас" full-width below it, THEN "В корзину" full-width below
   that — three separate horizontal levels, not one packed row. order:
   values below make that explicit regardless of each element's actual DOM
   position (fulfillment fields stay at the implicit default order:0/first;
   quantity row->buy-now->add-to-cart is a deliberate VISUAL order that
   differs from DOM order, where "В корзину" is rendered by WooCommerce core
   before our own "Купить сейчас" button). */
.dh-buy-panel form.cart .quantity {
	flex: 1 1 100%;
	width: 100%;
	order: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Pushes the minus/input/plus trio to the row's right edge, "Кол-во" label
   on the left — donor's own label-left/control-right quantity row. */
.dh-qty-label {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-right: auto;
}

.dh-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text-secondary);
	cursor: pointer;
	flex-shrink: 0;
}

/* Same recurring lesson as header.css's .dh-field__submit svg (CP18/CP40):
   the HTML width/height attributes on an <svg> inside a flex button aren't
   enough on their own — collapses to 0 width without an explicit CSS rule. */
.dh-qty-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.dh-qty-btn:hover {
	color: var(--color-brand);
}

.dh-buy-panel form.cart .quantity .qty {
	width: 3rem;
	text-align: center;
	border-radius: 8px;
	border-color: #e2e4e8;
	padding: 0.75rem 0.25rem;
	-moz-appearance: textfield;
}

.dh-buy-panel form.cart .quantity .qty::-webkit-inner-spin-button,
.dh-buy-panel form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Primary "Купить сейчас" — real second submit button, see
   digitalhub_buy_now_button()/digitalhub_buy_now_redirect() in functions.php.
   Full-width, order:2 — its own row, ABOVE "В корзину" (order:3) even
   though WooCommerce core renders "В корзину" first in the DOM. */
.dh-buy-panel form.cart .dh-buy-now-button {
	flex: 1 1 100%;
	width: 100%;
	order: 2;
	background-color: var(--color-brand);
	color: #ffffff;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	border: none;
	padding: 0.85rem 1.25rem;
	cursor: pointer;
}

.dh-buy-panel form.cart .dh-buy-now-button:hover {
	background-color: var(--color-brand-hover);
}

/* Secondary "В корзину" — full-width text button (not an icon-only tile),
   its own row below "Купить сейчас". */
.dh-buy-panel form.cart .single_add_to_cart_button {
	flex: 1 1 100%;
	width: 100%;
	order: 3;
	background-color: var(--color-bg);
	color: var(--color-text);
	border-radius: 8px;
	font-weight: 600;
	border: none;
	padding: 0.85rem 1.25rem;
}

.dh-buy-panel form.cart .single_add_to_cart_button:hover {
	background-color: #e5e7eb;
	color: var(--color-text);
}

/* Wishlist ("В избранное", ti-woocommerce-wishlist plugin markup) — without
   an explicit order it defaults to 0, tying it with .dh-fulfill-fields and
   jumping ahead of the quantity/button rows below (order 0 groups render
   before ANY order 1+ item, regardless of DOM position) — keep it last,
   matching where it already sat before those rows got explicit orders. */
.dh-buy-panel form.cart .woocommerce-variation-add-to-cart > .tinv-wraper {
	order: 4;
	flex: 1 1 100%;
	width: 100%;
}

/* Payment/delivery/replacement guarantee lines directly under "Купить
   сейчас" — same icon+text pattern as .dh-trust-badges near the title,
   stacked instead of side-by-side (3 lines of varying length read better
   in a column than wrapped across a row). */
.dh-buy-guarantees {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dh-buy-guarantee {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.dh-buy-guarantee svg {
	flex-shrink: 0;
	color: var(--color-accent);
}

.dh-buy-disclaimer {
	margin: 0;
	font-size: 13px;
	color: var(--color-text-secondary);
}

/* "Есть промокод?" (donor: 03_product.html `.id_pc_label`/`.id_pc_wrapper`)
   — values measured off the donor's own computed styles (revealed the
   hidden field via devtools, not eyeballed). Real WooCommerce coupon field,
   see digitalhub_promo_field()/AJAX handlers in functions.php. */
.dh-promo-toggle {
	display: inline-block;
	font-size: 14px;
	/* Donor's own muted "tertiary" text token, rgb(157,164,174) — lighter
	   than our usual --color-text-secondary (#6c737f), no equivalent
	   variable in our palette, so literal. */
	color: #9da4ae;
	cursor: pointer;
}

.dh-promo-toggle:hover {
	color: var(--color-text-secondary);
}

.dh-promo-field {
	position: relative;
	margin-top: 0.5rem;
}

.dh-promo-input {
	width: 100%;
	padding: 11px 100px 11px 11px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background-color: #f9fafb;
	color: #384250;
	font-family: var(--font-family);
	font-size: 15px;
}

.dh-promo-input:focus {
	outline: none;
	border-color: var(--color-brand);
}

.dh-promo-input:disabled {
	color: var(--color-text-secondary);
}

.dh-promo-apply,
.dh-promo-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.dh-promo-apply {
	padding: 8px 12px;
	color: #4caf7d;
	background-color: #ebf6ef;
	font-size: 14px;
	font-weight: 600;
}

.dh-promo-apply:disabled {
	opacity: 0.6;
	cursor: default;
}

.dh-promo-clear {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4px;
	color: #9da4ae;
	background: transparent;
}

.dh-promo-clear svg {
	width: 16px;
	height: 16px;
}

.dh-promo-message {
	display: block;
	margin-top: 0.4rem;
	font-size: 13px;
	color: #4caf7d;
}

.dh-promo-message.is-error {
	color: #dc3545;
}

.dh-promo-message:empty {
	display: none;
}

/* Denomination tile ("plashka") grid — replaces the native variation <select>
   dropdown, per user request to match fk.market's OptionRadio picker
   (https://fk.market/products/psn-try-popolnenie-balansa): a grid of tiles
   with label + price instead of "Выбрать опцию". The native <select> is kept
   in the DOM (visually hidden here) so WooCommerce's own variation-matching
   JS keeps working untouched — see
   woocommerce/single-product/add-to-cart/variable.php and
   digitalhub_variation_tiles_script() in functions.php. */
.dh-variations-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dh-variation-tiles-wrap {
	margin-bottom: 0.85rem;
}

.dh-variation-tiles-label {
	margin: 0 0 0.5rem;
	font-size: 13px;
	color: var(--color-text-secondary);
}

/* 3 columns, by explicit user request (the buy panel was widened +50px —
   see .dh-product-right above — specifically to fit 3 per row). Earlier
   attempt at 3 columns in the original 320px panel genuinely overflowed;
   that turned out to be two separate real bugs fixed elsewhere in this
   file (inherited `overflow-wrap:break-word` from Storefront's
   `body{word-wrap:break-word}`, and `.dh-buy-panel .price` leaking its
   28px/700 headline styling into tile prices) — not a width problem once
   both are fixed, so 3 columns fits even in the narrower 280px content
   width; the +50px panel gives it more headroom for long prices. */
.dh-variation-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.dh-variation-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.65rem 0.5rem;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background-color: var(--color-surface);
	font-family: var(--font-family);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	min-width: 0;
}

.dh-variation-tile:hover {
	border-color: #c8ccd3;
}

.dh-variation-tile-label {
	font-size: 12px;
	line-height: 1.3;
	color: var(--color-text);
	max-width: 100%;
}

/* overflow-wrap: normal overrides Storefront's own `body{word-wrap:break-word}`
   (style.css) — that's an INHERITED property, so every descendant computes
   break-word by default unless reset. Combined with this grid's
   minmax(0, 1fr) tracks, inherited break-word was splitting "₽640.00" onto 3
   lines inside a 118px-wide tile even though the text only measures 52px
   (confirmed via ctx.measureText) — Blink's min-content sizing pass for grid
   tracks treats break-word as "any character is a valid break" and that
   carries into final layout. Our longest real price ("952 780,00 ₽") still
   fits the 2-column tile width at this font size without wrapping. */
.dh-variation-tile-price {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text);
	max-width: 100%;
	overflow-wrap: normal;
}

/* Without this, `.dh-buy-panel .price` (the big 28px/700 headline price
   rule above) wins on equal specificity for the SAME .price/.amount markup
   reused inside tiles — measured computing to 28px here despite the 12px
   set above, which is what was really overflowing the tile (not a wrapping
   bug): scrollWidth 158px vs a 118px box. */
.dh-variation-tile-price .price,
.dh-variation-tile-price .woocommerce-Price-amount {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}

.dh-variation-tile-check {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--color-brand);
	color: #ffffff;
	font-size: 10px;
	line-height: 1;
}

.dh-variation-tile[aria-checked="true"] {
	border-color: var(--color-brand);
	border-width: 2px;
	padding: calc(0.65rem - 1px) calc(0.5rem - 1px);
	background-color: rgba(72, 132, 255, 0.08);
}

.dh-variation-tile[aria-checked="true"] .dh-variation-tile-check {
	display: flex;
}

.dh-variation-tile-oos {
	opacity: 0.55;
}

.dh-variation-tile-oos-label {
	font-size: 11px;
	color: #dc3545;
}

/* Fulfillment fields (Player ID/nickname/server/…) — schema comes from the
   supplier per topup category, rendered by digitalhub_render_fulfillment_fields()
   right before the add-to-cart button. Reuses the same input look as
   .dh-promo-input for visual consistency. */
.dh-fulfill-fields {
	margin-bottom: 1rem;
}

.dh-fulfill-fields-title {
	margin: 0 0 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

.dh-fulfill-field {
	margin-bottom: 0.6rem;
}

.dh-fulfill-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.dh-fulfill-input {
	width: 100%;
	padding: 11px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background-color: #f9fafb;
	color: #384250;
	font-family: var(--font-family);
	font-size: 15px;
	box-sizing: border-box;
}

.dh-fulfill-input:focus {
	outline: none;
	border-color: var(--color-brand);
}

/* donor: TabMenu pill row + TabInfo white panel */
.dh-product-tabs-wrap .woocommerce-tabs {
	background-color: var(--color-surface);
	border-radius: 16px;
	padding: 1.25rem;
}

.dh-product-tabs-wrap ul.tabs {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid #e2e4e8;
}

.dh-product-tabs-wrap ul.tabs li {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

.dh-product-tabs-wrap ul.tabs li a {
	color: var(--color-text-secondary);
	font-weight: 500;
	font-size: 16px;
}

.dh-product-tabs-wrap ul.tabs li.active a {
	color: var(--color-brand);
}

.dh-product-tabs-wrap .woocommerce-Tabs-panel h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
}

/* Sticky "Pay_TopBar" (CP41, donor: 03_product.html `#top_bar` — fixed-top
   condensed price/buy mirror). Desktop only, same as the two-column layout
   breakpoint above — donor also gates it to desktop (`d-none d-xl-flex`). */
.dh-pay-topbar {
	display: none;
}

@media (min-width: 1200px) {
	.dh-pay-topbar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: var(--color-surface);
		box-shadow: 0 2px 8px rgba(17, 25, 39, 0.12);
		transform: translateY(-100%);
		transition: transform 0.2s ease;
	}

	.dh-pay-topbar.is-visible {
		transform: translateY(0);
	}
}

.dh-pay-topbar-inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0.75rem 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.dh-pay-topbar-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.dh-pay-topbar-image {
	flex-shrink: 0;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
}

.dh-pay-topbar-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-pay-topbar-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.dh-pay-topbar-title {
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 320px;
}

.dh-pay-topbar-meta {
	display: flex;
	gap: 0.75rem;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.dh-pay-topbar-meta a {
	color: var(--color-text-secondary);
}

.dh-pay-topbar-meta a:hover {
	color: var(--color-brand);
}

.dh-pay-topbar-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.dh-pay-topbar-price {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
}

.dh-pay-topbar-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text);
	cursor: pointer;
}

.dh-pay-topbar-cart:hover {
	background-color: #e5e7eb;
}

.dh-pay-topbar-cart svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.dh-pay-topbar-buy {
	background-color: var(--color-brand);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.7rem 1.25rem;
	white-space: nowrap;
	cursor: pointer;
}

.dh-pay-topbar-buy:hover {
	background-color: var(--color-brand-hover);
}

/* Mobile "BuyButton" fixed-bottom bar (CP42 second pass) — donor's real
   mobile equivalent of the buy panel, found in 03_product.html
   (`position-fixed bottom-52`, comment "BuyButton"): always visible, no
   thumbnail/title, price folded into the primary button's own label. */
.dh-pay-bottombar {
	display: none;
}

@media (max-width: 1199px) {
	.dh-pay-bottombar {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background-color: var(--color-surface);
		box-shadow: 0 -2px 8px rgba(17, 25, 39, 0.12);
		padding: 0.65rem 1rem;
	}

	/* Same footer-overlap lesson as the cart page (CP40): pad the real last
	   element, not the fixed bar's own container (out of flow, no effect). */
	.single-product .dh-footer {
		padding-bottom: 4.5rem;
	}
}

.dh-pay-bottombar-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text);
	cursor: pointer;
}

.dh-pay-bottombar-cart svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.dh-pay-bottombar-buy {
	flex: 1 1 auto;
	background-color: var(--color-brand);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
}

.dh-pay-bottombar-buy:hover {
	background-color: var(--color-brand-hover);
}

.dh-pay-bottombar-buy .woocommerce-Price-amount {
	font-weight: 700;
}