/**
 * Single-product page redesign, part 3 (2026-08-14): full pass matching the
 * design-direction mockup -- category eyebrow, title/wishlist row, rating
 * row, gallery badge + position counter, feature-badge icons, color-coded
 * stock states, carousel progress bar, focus-visible states, and a wider
 * product-page-only container. is_product()-scoped enqueue, same as the
 * rest of this file. All rules scoped under .danuko-product-page so
 * nothing here can leak into the shop/cart/checkout/account/admin.
 */

/* ---------- container: product page only, wider than the sitewide 1180px .danuko-wrap ---------- */
.danuko-product-page .danuko-wrap {
	max-width: 1460px;
}

/* ---------- breadcrumb spacing ---------- */
.danuko-product-page .danuko-archive__header {
	padding-top: 30px !important;
	padding-bottom: 36px !important;
}

.danuko-product-page .danuko-breadcrumb {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--danuko-text-muted);
}

/* ---------- gallery: marketing badge + position counter ---------- */
.danuko-product-gallery {
	position: relative;
}

.danuko-gallery-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--danuko-coral);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	box-shadow: var(--danuko-shadow-sm);
}

.danuko-gallery-badge svg {
	width: 14px;
	height: 14px;
	fill: #fff;
	stroke: #fff;
}

/* Moved into the summary eyebrow slot (2026-08-15), replacing the plain
   category-name eyebrow -- same pill (icon + coral background + text),
   just no longer overlaid on the gallery image, so it needs to drop out
   of that absolute-positioned context and sit inline instead. */
.danuko-gallery-badge--eyebrow {
	position: static;
	margin-bottom: 20px;
}

.danuko-gallery-counter {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(16, 45, 51, 0.72);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- category eyebrow ---------- */
.danuko-category-eyebrow {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	color: #168B98;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.075em;
	margin-bottom: 20px;
}

.danuko-category-eyebrow:hover {
	color: #1D555A;
	text-decoration: underline;
}

/* ---------- title + wishlist row ---------- */
.danuko-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.danuko-title-row .danuko-product-summary__title {
	margin: 0;
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.danuko-wishlist-btn-wrap {
	flex: none;
}

.danuko-wishlist-btn-wrap .yith-wcwl-add-to-wishlist {
	display: flex;
}

.danuko-wishlist-btn-wrap a.add_to_wishlist,
.danuko-wishlist-btn-wrap .yith-wcwl-add-button > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--danuko-surface);
	border: 1.5px solid var(--danuko-border);
	color: #9B8E7C;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.danuko-wishlist-btn-wrap a.add_to_wishlist:hover,
.danuko-wishlist-btn-wrap .yith-wcwl-add-button > a:hover {
	border-color: var(--danuko-coral);
	color: var(--danuko-coral);
}

.danuko-wishlist-btn-wrap .yith-wcwl-icon-svg,
.danuko-wishlist-btn-wrap svg {
	width: 20px;
	height: 20px;
}

/* ---------- rating row ---------- */
.danuko-rating-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 20px;
	font-size: 13px;
}

.danuko-rating-row .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.danuko-rating-row .star-rating {
	font-size: 14px;
	color: #E8B23C;
}

.danuko-rating-row .woocommerce-review-link,
.danuko-rating-row .danuko-review-cta {
	color: var(--danuko-teal);
	font-weight: 600;
	text-decoration: none;
}

.danuko-rating-row .woocommerce-review-link:hover,
.danuko-rating-row .danuko-review-cta:hover {
	text-decoration: underline;
}

.danuko-rating-stars {
	color: var(--danuko-border);
	letter-spacing: 1px;
	font-size: 15px;
}

/* ---------- price row ---------- */
.danuko-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.danuko-price-row .danuko-product-summary__price {
	margin: 0;
}

.danuko-price-note {
	font-size: 12.5px;
	color: var(--danuko-text-muted);
}

/* ---------- feature-badge icons (age/players/duration share .danuko-age-badge) ---------- */
.danuko-age-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
}

.danuko-age-badge svg {
	width: 17px;
	height: 17px;
	flex: none;
	stroke-width: 2;
}

/* Cream pill treatment (2026-08-15), matching the reference screenshot and
   the same look already used for .danuko-category-link -- scoped to the
   meta-pills row specifically so the plain teal-tint .danuko-age-badge
   used on product cards elsewhere is untouched. Icon uses stroke="currentColor"
   so setting color here recolors it along with the text, no separate rule
   needed. */
.danuko-meta-pills .danuko-age-badge {
	padding: 8px 14px;
	border: 1px solid var(--danuko-border);
	border-radius: 999px;
	background: #FFF9F2;
	color: #1D555A;
}

/* ---------- stock row: color-coded dot + real WC text ---------- */
.danuko-stock-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.danuko-stock-row .stock {
	margin: 0;
	padding: 0;
	background: none !important;
	font-size: 13px;
	font-weight: 700;
}

.danuko-stock-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}

.danuko-stock-row--low .danuko-stock-dot,
.danuko-stock-row--low .stock {
	background-color: var(--danuko-coral);
}
.danuko-stock-row--low .stock { background: none !important; color: var(--danuko-coral); }

.danuko-stock-row--sufficient .danuko-stock-dot { background-color: var(--danuko-teal-mid, var(--danuko-teal)); }
.danuko-stock-row--sufficient .stock { color: var(--danuko-teal-dark, var(--danuko-teal)); }

.danuko-stock-row--out .danuko-stock-dot { background-color: #C33B2E; }
.danuko-stock-row--out .stock { color: #C33B2E; }

.danuko-stock-row--backorder .danuko-stock-dot { background-color: var(--danuko-marigold); }
.danuko-stock-row--backorder .stock { color: #A9721A; }

/* ---------- carousel progress bar ---------- */
.danuko-carousel-progress {
	margin-top: 18px;
	height: 3px;
	border-radius: 999px;
	background: var(--danuko-border);
	overflow: hidden;
}

.danuko-carousel-progress__bar {
	display: block;
	height: 100%;
	width: 25%;
	background: var(--danuko-ink-teal);
	border-radius: 999px;
	transition: transform .25s ease, width .25s ease;
	transform-origin: left center;
}

/* ---------- focus-visible ---------- */
.danuko-product-page a:focus-visible,
.danuko-product-page button:focus-visible,
.danuko-product-page input:focus-visible {
	outline: 3px solid rgba(241, 90, 54, 0.25);
	outline-offset: 2px;
}

/* ---------- tabs: now a 3rd grid item stacked under the gallery, using
   named grid areas so the sticky summary spans both rows on the right
   -- without this, row 1 height would follow the (often much taller)
   summary column, leaving a large empty gap above the tabs in column 1
   ---------- */
.danuko-product-gallery { min-width: 0; }
.danuko-product-summary { min-width: 0; }
.danuko-product-tabs { min-width: 0; }


/* ---------- responsive ---------- */
@media (max-width: 1460px) {
	.danuko-product-page .danuko-wrap { max-width: 100%; padding: 0 32px; }
}

@media (max-width: 1199px) and (min-width: 768px) {
	.danuko-product-layout { gap: 40px; }
	.danuko-meta-pills { row-gap: 8px; }
}

@media (max-width: 767px) {
	.danuko-product-page .danuko-wrap { padding: 0 16px; }
	.danuko-product-gallery .flex-viewport { border-radius: 20px; }
	.danuko-gallery-badge { border-radius: 20px; }
	.danuko-title-row { align-items: flex-start; }
	.danuko-product-summary__meta .product_meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; max-width: 100%; min-width: 0; margin-block: 16px 20px; padding-top: 16px; }
	.danuko-product-summary__meta .product_meta > span { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
	.danuko-product-summary__meta .product_meta a { display: inline; white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
	.danuko-age-badge { padding: 6px 11px; min-height: 34px; }

	.danuko-product-summary__cart .danuko-qty-form {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.danuko-product-summary__cart .single_add_to_cart_button {
		flex: 1 1 100%;
	}
}

/* ---------- add-to-cart loading/success states ---------- */
.danuko-product-summary__cart .single_add_to_cart_button.is-loading {
	opacity: 0.75;
	cursor: progress;
	pointer-events: none;
}

.danuko-product-summary__cart .single_add_to_cart_button.is-success {
	background: var(--danuko-teal-mid, var(--danuko-teal)) !important;
	border-color: var(--danuko-teal-mid, var(--danuko-teal)) !important;
}

/* ---------- add-to-cart success/error message strip ---------- */
.danuko-cart-message {
	display: none;
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--danuko-radius-sm);
	font-family: var(--site-main-font);
	font-size: 13.5px;
	font-weight: 600;
}

.danuko-cart-message.is-visible {
	display: block;
}

.danuko-cart-message.is-success {
	color: var(--danuko-teal-dark, var(--danuko-teal));
	background: rgba(46, 133, 119, 0.1);
}

.danuko-cart-message.is-error {
	color: #C33B2E;
	background: rgba(195, 59, 46, 0.08);
}

/* WooCommerce own add-to-cart.js inserts a "view cart" link right after the
   button on every added_to_cart event (core behaviour, not something this
   theme controls) -- redundant here since the message strip above already
   confirms success, and unstyled it just reads as stray text. */
.danuko-product-summary__cart .added_to_cart.wc-forward {
	display: none;
}

/* Recommendations heading (2026-08-14): sized/weighted independently of
   the sitewide .danuko-section__head h2 rule (clamp 24-32px, display font)
   since that rule is shared across many sections sitewide -- narrowing it
   there would ripple beyond this page. Scoped class instead. */
.danuko-related-heading {
	font-size: 23px;
	font-weight: 850;
	font-family: var(--site-secondary-font);
}

/* Mobile category pills (2026-08-15): shown only <=980px, between the
   gallery and the tabs section per the confirmed mobile block order.
   Hidden on desktop/tablet since the eyebrow above H1 already covers
   category display there. */
.danuko-product-mobile-categories {
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	margin: 22px 0 18px;
}

.danuko-category-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	max-width: 100%;
	padding: 7px 12px;
	border: 1px solid var(--danuko-border);
	border-radius: 999px;
	background: #FFF9F2;
	color: #1D555A;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.danuko-category-link:hover {
	border-color: #1D555A;
	background: #FFF3E2;
}

/* Defensive visibility override (2026-08-15): the parent theme (miniture)
   ships a generic scroll-reveal system (Novaworks.global.AnimateLoadElement
   / InsightInitLazyEffects, app.js) that sets opacity:0 via inline style
   on elements matching certain selectors, meant to reveal them once a
   container scrolls into view. Traced several call sites (isotope grid
   items) but could not conclusively rule out every path reaching this
   element -- since a users real browser confirmed the meta block is
   present in the raw HTML (view-source) yet invisible and unfindable via
   in-page search on the live render, something IS applying opacity:0 or
   similar client-side after load. Forcing visibility here with !important
   overrides any inline opacity/visibility a script sets, regardless of
   which one -- there is no legitimate reason this block should ever be
   hidden. */
.danuko-product-summary__meta,
.danuko-product-summary__meta .product_meta {
	opacity: 1 !important;
	visibility: visible !important;
}