/*
 * PDP QA, Vita 5 Oct list (ClickUp 86eypb6me, comment 1100420000041130).
 * Measured on v1 at 375 / 768 / 963 / 1440 before each rule.
 * Config investigated: Blocksy's product gallery and the WooCommerce
 * variation form expose no column-width, radio-gap or review-link settings,
 * so these are theme-markup fixes in CSS.
 * editor-friendly-ok: styles WooCommerce PDP markup, not editable block
 * content; colours are Figma tokens already used in product-page.css.
 * Loaded after product-page-vita4.css (priority 101).
 */

/* Item 1: between 744 and 999 the page is one column but vita4 still capped
   the gallery at 672 and the summary stayed 680, leaving a dead strip on the
   right (259px at 963). Both fill the column. */
@media (min-width: 744px) and (max-width: 999px) {
	html body.single-product .product-entry-wrapper > .woocommerce-product-gallery,
	html body.single-product .product-entry-wrapper > .entry-summary,
	html body.single-product .product-entry-wrapper > .summary {
		max-width: none;
		width: 100%;
		box-sizing: border-box;
	}
}

/* Item 1b: at 1200-1299 the 672px gallery plus the summary's 451px minimum
   overran the row (summary 27px past the viewport at 1200). The gallery
   gives up the difference. */
@media (min-width: 1200px) and (max-width: 1299px) {
	html body.single-product .product-entry-wrapper > .woocommerce-product-gallery {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: 672px;
	}
}

/* Item 5: the radio sat flush against the option title, and the check icons
   against their text. */
.bpm__panel--sub .bpm__head {
	column-gap: 12px;
	align-items: flex-start;
}

.bpm__benefit {
	gap: 8px;
}

/* Item 5, narrow: the radio used to wrap onto a line of its own above the
   title, and the one-time price ran past the card edge. The headline shrinks
   so radio and title share a row, and the prices take the row below. */
.bpm__panel--sub .bpm__headline {
	flex: 1 1 0;
	min-width: 0;
	align-items: flex-start;
}

.bpm__panel--sub .bpm__prices {
	flex: 0 0 auto;
	align-items: flex-end;
	padding-left: 0;
	box-sizing: border-box;
	white-space: nowrap;
}

/* BE5: below 600px the prices take the row under the title (28px in); from
   600px they sit on the option's top line, right-aligned, as signed off. */
@media (max-width: 599px) {
	.bpm__panel--sub .bpm__prices {
		flex: 0 0 100%;
		align-items: flex-start;
		padding-left: 28px;
		white-space: normal;
	}
}

/* z8udzketvn r2: radio centre = first title line centre. ::first-line pins
   that line to the 30px save-pill height, so row one is 30px in every
   language and the radio margin is (30 - 16) / 2, not a per-language number. */
.bpm__panel--sub .bpm__title::first-line {
	line-height: 30px;
}

.bpm__panel--sub .bpm__radio {
	margin-top: 7px;
}

@media (max-width: 599px) {
	.bpm__panel--otp .bpm__head {
		flex-wrap: wrap;
	}

	/* z8udzketvn r3: the wrapped one-time price was right-aligned on row two
	   (margin-left:auto). The subscribe card puts its price under the title
	   column, 28px in (radio 16 + gap 12), so the one-time card does the same. */
	.bpm__panel--otp .bpm__prices {
		flex: 0 0 100%;
		margin-left: 0;
		padding-left: 28px;
		box-sizing: border-box;
		align-items: flex-start;
	}
}

/* Item 6: Figma's default (unselected) option is a white card, and only the
   selected one is cream with the orange border. The subscribe panel carried
   the selected look all the time. The border width is held at 2px so the
   card does not shift between states. */
.bpm__panel--sub:not(.is-selected) {
	background: var(--bpp-white, #FFFFFF);
	border-color: rgba(0, 0, 0, 0.05);
}

.bpm__panel--otp.is-selected {
	background: #FFF9E9;
	border-color: #FFA825;
	border-width: 2px;
	padding: 17px;
}

.bpm__panel--sub:not(.is-selected) .bpm__radio {
	border-color: #6B7280; /* X15: 4.83:1 on white */
}

/* Item 7: the delivery frequency line shown under the price when the
   subscribe option is selected. */
.bpm__frequency {
	margin: 0;
	font-family: var(--bpp-body-font, "Kobe1.1", sans-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #2E2A2A;
}

.bpm__panel--sub:not(.is-selected) .bpm__detail {
	display: none;
}

/* Item 3: the reviews section is the scroll target for the top stars. */
#bppm-reviews {
	scroll-margin-top: 96px;
}

.bppm-reviews__view-all {
	margin: 24px 0 0;
	text-align: center;
}

/* Figma Button/Outline/Small on the green section: white text and border,
   fills white with green text and border on hover. */
.bppm-reviews__view-all-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 24px;
	border: 1px solid #FFFFFF;
	border-radius: 999px;
	background: transparent;
	font-family: var(--bpp-heading-font, "Nominee", sans-serif);
	font-weight: 900;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out;
}

.bppm-reviews__view-all-link:hover,
.bppm-reviews__view-all-link:focus-visible {
	background: #FFFFFF;
	border-color: #247B4E;
	color: #247B4E;
}

.bppm-reviews__view-all-link:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* Item 4: a mouse has no scrollbar here (it is hidden on purpose), so the
   strip is draggable and the cursor says so. */
@media (hover: hover) {
	.bppm-section-nav__list {
		cursor: grab;
	}

	.bppm-section-nav__list.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
}

/* Centres the dog + pack mass (thin tail excluded, columns >= 15% of peak alpha)
   on the column. The tail stretches the alpha box left, so centring that box
   (the old 7.9%) left the dog 8.4% of the width right of centre. */
.bppm-how__photo-img[src*="biotics-retriever-with-pack"],
.bppm-how__photo-img[srcset*="biotics-retriever-with-pack"] {
	transform: translateX(-0.5%);
}

/* Store-wide reviews note (86eypb6me): shown when the product has no reviews of its own. */
body .bppm-reviews__fallback-note {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 12px;
	color: #2E2A2A;
}

/* z8udzkf2ny: sticky bar stepper on phones. The Figma mobile frame
   (36250:90206) hid the stepper, but QA needs the minus, the value and the plus
   on every language below 744, and a thumbnail, name, stepper and a long
   translated CTA ("Jetzt abonnieren", 166px) do not fit one 335px row. So the
   bar becomes two rows: product block on top, stepper and CTA under it. The
   CTA takes whatever the 110px stepper leaves, which also stops the label from
   spilling past the button. The heart stays hidden here as before. */
@media (max-width: 743px) {
	html body .bpp-sticky-bar {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	html body .bpp-sticky-bar__product {
		flex: 1 1 100%;
	}

	html body .bpp-sticky-bar__actions {
		flex: 1 1 100%;
		width: 100%;
		flex-wrap: nowrap;
		gap: 8px;
	}

	html body .bpp-sticky-bar__qty {
		display: flex;
		flex: 0 0 110px;
		box-sizing: border-box;
		height: 45px;
	}

	html body .bpp-sticky-bar__qty[hidden] {
		display: none;
	}

	html body .bpp-sticky-bar__qty-btn {
		flex: 0 0 34px;
	}

	html body .bpp-sticky-bar__qty-value {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* z8udzkf2ru: a long translated label wraps inside the button instead of
	   spilling past it. The size stays 16px (14px under 360) unless the
	   language's own Customizer value sets --bpp-sticky-cta-fs, which is held
	   to 14px or more in PHP. */
	html body .bpp-sticky-bar .bpp-btn {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: auto;
		min-height: 45px;
		padding: 6px 8px;
		white-space: normal;
		line-height: 1.15;
		text-align: center;
		overflow-wrap: anywhere;
		font-size: var(--bpp-sticky-cta-fs, 16px);
	}

	/* z8udzkf2ru per-language options (Customizer, section "Bonza Sticky Bar
	   (per language)"). Both hidden: the product block goes and the stepper
	   and button take the whole bar. */
	html body .bpp-sticky-bar--hide-image .bpp-sticky-bar__thumb,
	html body .bpp-sticky-bar--hide-title-price .bpp-sticky-bar__title,
	html body .bpp-sticky-bar--hide-title-price .bpp-sticky-bar__price {
		display: none;
	}

	html body .bpp-sticky-bar--hide-image .bpp-sticky-bar__product {
		grid-template-columns: minmax(0, 1fr);
	}

	html body .bpp-sticky-bar--hide-image.bpp-sticky-bar--hide-title-price .bpp-sticky-bar__product {
		display: none;
	}
}

@media (max-width: 359px) {
	html body .bpp-sticky-bar .bpp-btn {
		font-size: var(--bpp-sticky-cta-fs, 14px);
	}
}

/* z8udzketwy round 2: Figma draws the 484px photo vertically centred on the
   content frame (rect y=490.7, h=484 in a 1465.4 frame, so both gaps are 490.7)
   beside the stage list. The row used align-items: flex-start, which pinned it to
   the top and left an empty left column beside stages 2 and 3. Applies from 1440px,
   where main's row starts; below that the layout is one column and keeps the
   photo on top with its 32px gap. */
@media (min-width: 1440px) {
	.bppm-how__layout .bppm-how__aside {
		align-self: center;
	}

	.bppm-how__layout .bppm-how__photo {
		margin-bottom: 0;
	}
}