/* ============================================================
 * BIOTA · SECTION · Product Detail Page (buy box)
 * Wraps WooCommerce blocks (gallery, title, rating, price,
 * add-to-cart-with-options) in the BIOTA product layout.
 * template: single-product-biota-smart-camera-outdoor-fixed.html
 * ============================================================ */

/* Every media slot in the landing sections below the buy box shares ONE ratio,
   so photography can be briefed once instead of per section, and an asset can
   move between sections without being re-cropped. Change it here and every
   slot follows — but the brief has to change with it.
   Deliberately NOT applied to the buy-box gallery, which is square, or to the
   comparison thumbnails, which are 1:1 product cut-outs. */
:root {
	--biota-pdp-media: 4 / 3;
	/* The video tiles are the one exception, and for the same reason the rest
	   share a ratio: cameras shoot 16:9, so matching it is what stops footage
	   being letterboxed. Photography is briefed at 4:3, video at 16:9. */
	--biota-pdp-video: 16 / 9;
}

.biota-pdp {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--bt-70);
	padding-bottom: var(--wp--preset--spacing--bt-60);
}

.biota-pdp__crumbs {
	padding-block: var(--wp--preset--spacing--bt-40);
	margin-block: 0;
	font-size: var(--wp--preset--font-size--caption);
	/* Base colour = the current (last) page, which is a bare text node.
	 * It matches the product title's near-black; links/separators stay gray. */
	color: var(--wp--preset--color--text);
}
/* The theme renders the crumb links at weight 500 (reads darker) and spaces the
 * separators with a wide 12px flex gap. Match the Figma spec: uniform weight 400,
 * a tighter gap, and gray parent links against the black current page. */
.biota-pdp__crumbs .breadcrumb {
	gap: 6px;
}
.biota-pdp__crumbs a,
.biota-pdp__crumbs .breadcrumb-separator {
	font-weight: 400;
	color: var(--wp--preset--color--text-subtle);
}

/* Gallery + buy box: side by side on desktop, stacked on mobile (Columns default). */
.biota-pdp__top {
	margin-top: 0;
	align-items: flex-start;
}
/* Column gap (Figma 48px). Compound selector beats WP's undefined block-gap var. */
.wp-block-columns.biota-pdp__top {
	gap: clamp(20px, 4vw, 48px);
}

/* Buy-column vertical rhythm (Figma): tight ~10px header cluster, larger gaps to
 * group the memory/cart block. The column is flow layout, so gap = child margins;
 * the theme zeroes the H1 and the WooCommerce block margins, so re-assert here. */
.biota-pdp .biota-pdp__buy > * {
	margin-top: 16px;
}
.biota-pdp .biota-pdp__buy > :first-child {
	margin-top: 0;
}
/* Extra separation above the price (Figma builds ~14px into the price block). */
.biota-pdp .biota-pdp__buy > .biota-pdp__price {
	margin-top: 30px;
}
.biota-pdp .biota-pdp__buy > .biota-pdp__bundle {
	margin-top: 12px;
}
/* The add-to-cart block is wrapped in a .wc-block-components-notices div, so
 * target whichever direct child contains it (larger gap before the memory group).
 * !important beats the parent theme's !important margin (an undefined-var → 0). */
.biota-pdp .biota-pdp__buy > *:has(.biota-pdp__atc) {
	margin-top: 8px !important;
}
.biota-pdp .biota-pdp__buy > .biota-installcard,
.biota-pdp .biota-pdp__buy > .biota-pdp__wa {
	margin-top: 12px;
}
.biota-pdp .biota-pdp__buy > .biota-pdp__trust {
	margin-top: 16px;
}

/* Sticky gallery on desktop. */
@media (min-width: 783px) {
	.biota-pdp__gallery {
		position: sticky;
		top: 88px;
	}
}

/* Product gallery (Figma spec) --------------------------- *
 * Large image on a grey rounded card; thumbnails as bordered rounded tiles in a
 * horizontal scroll row. High specificity beats WooCommerce's wc-blocks.css. */
/* Always stack: large image on top, thumbnails below (WooCommerce puts them
 * beside the image on desktop). High specificity beats its responsive rules. */
.biota-pdp .biota-pdp__gallery .wc-block-product-gallery {
	flex-direction: column;
}
.biota-pdp .biota-pdp__gallery .wc-block-product-gallery-thumbnails {
	flex-direction: row;
}
.biota-pdp__gallery .wc-block-product-gallery-large-image {
	background-color: var(--wp--preset--color--surface-light);
	border-radius: 20px;
	overflow: hidden;
}
/* WooCommerce 11 moves the large image by calling
 * scrollTo({ behavior: 'smooth' }) on this container, and that animation never
 * runs here — the slide never changes, so thumbnails and the next/prev arrows
 * both appear dead. Chrome will still scroll it instantly, but only once the
 * inherited scroll-behavior:smooth is out of the way. pdp-variation-savings.js
 * does the actual scrolling; this rule is what lets it take effect. */
.biota-pdp__gallery .wc-block-product-gallery-large-image__container {
	scroll-behavior: auto;
	/* Slide widths are fractional (638.26px, 641.80px … it moves with the
	 * viewport) and scrollLeft cannot hold that precisely, so a scripted scroll
	 * lands slightly short and the error grows with distance — by the last
	 * thumbnail a sliver of the neighbouring image showed at the edge. Snapping
	 * makes the browser settle each slide on an exact boundary. */
	scroll-snap-type: x mandatory;
}
.biota-pdp__gallery .wc-block-product-gallery-large-image__wrapper {
	scroll-snap-align: start;
}
.biota-pdp__gallery .wc-block-product-gallery-large-image img {
	border-radius: 0;
}
.biota-pdp__gallery .wc-block-product-gallery-thumbnails {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 9px;
	overflow-x: auto;
	margin-top: 12px;
	padding-bottom: 4px;
}
/* The vertical-orientation styling forces the scroll wrapper to a tall % height,
 * leaving dead space with the scrollbar stranded far below. Fit the thumbnails. */
.biota-pdp__gallery .wc-block-product-gallery-thumbnails,
.biota-pdp__gallery .wc-block-product-gallery-thumbnails__scrollable {
	height: auto;
	aspect-ratio: auto;
}
/* WooCommerce sizes this inner strip to (thumbnail count x thumbnail width) and
 * ignores the gaps between them, so the gaps overflow its own box: the strip
 * ends up narrower than the main image AND clips its last thumbnail. Let it
 * fill the gallery column instead, with a gap we control. */
.biota-pdp__gallery .wc-block-product-gallery-thumbnails__scrollable {
	width: 100%;
	flex: 1 1 auto;
	gap: 9px;
	/* Load-bearing. A flex row defaults to align-items:stretch, which gives each
	   thumbnail a definite height from the strip and so overrides aspect-ratio —
	   the squares become tall rectangles. Pinning to the start lets the ratio
	   drive the height instead. */
	align-items: flex-start;
}
/* Sized so roughly 6.5 thumbnails sit within the strip: the half-visible one is
 * the affordance that tells you the row scrolls. 6 gaps span the 6.5 cards.
 * Products carry 2–10 images; with fewer than 6 they simply sit left-aligned. */
.biota-pdp__gallery .wc-block-product-gallery-thumbnails__thumbnail {
	flex: 0 0 calc((100% - 6 * 9px) / 6.5);
	width: auto;
	/* Floor for narrow screens: rather than shrink below a usable tap target,
	   fewer thumbnails show and the strip scrolls further. */
	min-width: 48px;
	height: auto;
	aspect-ratio: 1;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--surface-light);
	border: 2px solid var(--wp--preset--color--surface-subtle);
	border-radius: 12px;
	overflow: hidden;
	/* WooCommerce draws a 3px outline on the active (clicked) thumbnail — brand it. */
	outline-color: var(--wp--preset--color--primary);
	outline-offset: 0;
}
.biota-pdp__gallery .wc-block-product-gallery-thumbnails__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
/* The half-visible thumbnail is the scroll affordance, so the bar itself is
   noise — same treatment as .biota-rail. */
.biota-pdp__gallery .wc-block-product-gallery-thumbnails,
.biota-pdp__gallery .wc-block-product-gallery-thumbnails__scrollable {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.biota-pdp__gallery .wc-block-product-gallery-thumbnails::-webkit-scrollbar,
.biota-pdp__gallery .wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar {
	display: none;
}

/* Buy box: rating cluster + stock (Figma spec) ------------ *
 * [★★★★★ 4.8]  1.284 ulasan  ······  ● Stok tersedia
 * 13px line throughout; cluster gap 5px, row gap 10px, stock pushed right. */
/* Compound `.wp-block-group.` selector beats WP's global
 * `:root :where(.is-layout-flex){gap:var(--wp--preset--spacing--4)}` (0,1,0),
 * whose var is undefined in this child theme (renamed slugs) → would be no gap. */
.wp-block-group.biota-pdp__ratingrow {
	gap: 10px;
	align-items: center;
}
.wp-block-group.biota-pdp__ratingleft {
	gap: 10px;
	align-items: center;
}
.wp-block-group.biota-pdp__rating {
	gap: 5px;
	align-items: center;
}
.biota-pdp__stars {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 17px;
	letter-spacing: 1px;
	color: var(--wp--preset--color--star);
}
.biota-pdp__ratingnum {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.biota-pdp__ratingcount {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 17px;
	color: var(--wp--preset--color--primary);
}
.biota-pdp__stock {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 17px;
	color: var(--wp--preset--color--success);
}
/* Status dot: 8×8 rounded square in WhatsApp green (spec), not a glyph. */
.biota-pdp__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--whatsapp);
}
/* Sold-out state (JS mirrors the real WooCommerce stock status). */
.biota-pdp__stock--out {
	color: var(--wp--preset--color--sale);
}
.biota-pdp__stock--out .biota-pdp__dot {
	background-color: var(--wp--preset--color--sale);
}

/* WooCommerce's own "In stock" indicator is redundant with the rating-row
 * status; hide it but keep it in the DOM as the (variation-aware) stock source.
 * !important + high specificity to beat WooCommerce's cross-origin wc-blocks.css. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-components-product-stock-indicator {
	display: none !important;
}

/* Qty stepper + add-to-cart row (Figma spec) -------------- */
/* Row: 12px gap, vertically centered. :has() targets only this row and gives
 * enough specificity to beat WP's undefined block-gap var. */
.biota-pdp__atc .wp-block-group.is-layout-flex:has(.wc-block-components-quantity-selector) {
	gap: 12px;
	align-items: center;
	margin-top: 14px;
}
/* Stepper box: bordered rounded box, 52px tall. High specificity to beat
 * WooCommerce's cross-origin wc-blocks.css (border/colour/size overrides). */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-components-quantity-selector {
	height: 52px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	overflow: hidden;
	align-items: stretch;
}
/* − / + glyphs: 20px, grey (fluid typography would otherwise shrink them). */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-components-quantity-selector__button {
	font-size: 20px;
	color: var(--wp--preset--color--text-muted);
	background-color: var(--wp--preset--color--base);
}
/* Quantity number: Poppins 600, 16px. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-components-quantity-selector input {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--text);
}
/* Add-to-cart: keep the pill + font; trim to 50px tall. */
.biota-pdp__atc .wc-block-components-product-button__button {
	min-height: 50px;
	height: 50px;
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Buy-box WhatsApp uses the .biota-btn--whatsapp-muted variant for its look;
 * only its buy-box-specific size (52px, 14px) lives here. */
.biota-pdp .biota-pdp__buy .biota-pdp__wa .wp-block-button__link {
	min-height: 52px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: var(--wp--preset--font-size--body);
}

.biota-pdp .biota-pdp__title {
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
}
@media (min-width: 783px) {
	.biota-pdp .biota-pdp__title {
		font-size: var(--wp--preset--font-size--heading);
	}
}

.biota-pdp__excerpt {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 24px;
	color: var(--wp--preset--color--text-muted);
}

/* Price (Figma spec) -------------------------------------- *
 * Big navy sale price leads (Poppins 600), faint strikethrough regular price
 * trails (DM Sans). WooCommerce outputs <del> (regular) before <ins> (sale),
 * so flex + order puts the sale price first. The JS-injected "% OFF" badge is a
 * sibling of the inner price container, so it survives variation re-renders. */
.biota-pdp__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
/* WooCommerce puts <del>/<ins> one level deeper for a VARIABLE product than
   for a simple one: variable gets `.wc-block-components-product-price > .price
   > (del, ins)`, simple gets `.wc-block-components-product-price > (del, ins)`
   with no `.price` wrapper. Styling only `.price` therefore made the flex
   context exist on camera pages and not on the Pet Feeder, where `order` was
   inert and WooCommerce's source order (strikethrough first) won. Both levels
   are the same flex row, so the row reads final price → strikethrough → badge
   whichever markup the product type produces. */
.biota-pdp__price .price,
.biota-pdp__price .wc-block-components-product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
}

/* Now that the outer container is a flex row, WooCommerce's two
   screen-reader-only spans ("Original price was…", "Current price is…") are
   flex items and each would claim a line. .screen-reader-text already takes
   them out of the visual flow with position:absolute — this only stops them
   reserving a slot in the row. */
.biota-pdp__price .screen-reader-text {
	position: absolute;
}

/* Dynamic discount badge (rendered by pdp-sale-badge.js). */
.biota-sale-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--sale-surface);
	color: var(--wp--preset--color--sale);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 16px;
	white-space: nowrap;
}
.biota-pdp__price ins,
.biota-pdp__price .price > .woocommerce-Price-amount,
/* Not-on-sale simple product: the amount is a direct child of the price
   container, with no `.price` wrapper and no <ins>. Without this it fell
   through to the 20px near-black default while every camera showed 34px navy.
   The `>` matters — on an on-sale simple product the amounts sit one level
   deeper inside <del>/<ins> and must keep their own treatment. */
.biota-pdp__price .wc-block-components-product-price > .woocommerce-Price-amount {
	order: 0;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--price);
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}
.biota-pdp__price del {
	order: 1;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.3;
	color: var(--wp--preset--color--text-faint);
	text-decoration: line-through;
}
/* Nested amount/currency spans must inherit, not re-impose the fluid size. */
.biota-pdp__price ins .woocommerce-Price-amount,
.biota-pdp__price del .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
/* WooCommerce core forces `span.price ins { font-weight:700 }` at (0,3,3);
 * out-specify it (4 classes) so the sale price keeps the spec's 600 weight. */
.biota-pdp .biota-pdp__price .wc-block-components-product-price .price ins {
	font-weight: 600;
}

/* Bundle savings line under the price. Always reserves one line so toggling the
 * memory option (which fills/clears the text) doesn't shift the stack. */
.biota-pdp__bundle {
	margin: 2px 0 0;
	min-height: 17px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 17px;
	color: var(--wp--preset--color--success);
}

/* Total row (injected by JS, above the qty/cart row). */
.biota-pdp__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0;
	padding: 14px 16px;
	background-color: var(--wp--preset--color--surface-light);
	border-radius: 12px;
}
.biota-pdp__total-label {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text-muted);
}
.biota-pdp__total-price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--title-sm);
	color: var(--wp--preset--color--primary);
}

/* Old "Jasa Pasang" variation group — hidden (replaced by the install card).
 * JS tags the group with .biota-hide and auto-selects "Without Jasa Pasang". */
.biota-pdp__atc .biota-hide {
	display: none;
}

/* Technician install add-on card ------------------------- */
.biota-installcard {
	display: flex;
	gap: 12px;
	margin: 8px 0;
	padding: 13px 16px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.biota-installcard:has(.biota-installcard__cb:checked) {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface-selected);
}
.biota-installcard__cb {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	border: 1px solid var(--wp--preset--color--control-border);
	border-radius: 5px;
	background-color: var(--wp--preset--color--base);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}
.biota-installcard__cb:checked {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.2 4.7 9 10 3'/%3E%3C/svg%3E");
}
.biota-installcard__main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}
.biota-installcard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.biota-installcard__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
}
.biota-installcard__price {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
}
.biota-installcard__note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}
.biota-installcard__desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-subtle);
}
.biota-installcard__list {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin-top: 8px;
}
.biota-installcard:has(.biota-installcard__cb:checked) .biota-installcard__list {
	display: grid;
}
.biota-installcard__list span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
}
.biota-installcard__list span::before {
	content: "\2713";
	margin-right: 6px;
	color: var(--wp--preset--color--success);
	font-weight: 700;
}

/* Variation selector → stacked radio rows (Figma spec) ---- *
 * WooCommerce renders each option as an inline .__pill label containing a radio
 * input + the label text. We turn the row into a full-width card: radio circle,
 * label, and a JS-injected "Hemat Rp X" note pushed right. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	/* Beats WP core's `.has-large-font-size{font-size:…!important}` utility that
	 * the block carries — only !important can override another !important. */
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 17px;
	color: var(--wp--preset--color--text-strong);
}
.biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* High specificity: WooCommerce's wc-blocks.css (cross-origin, unreadable) sets
 * the pill's padding/border/radius above a plain (0,2,0) selector. Anchor through
 * .biota-pdp and the __pills parent to win without !important. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	width: 100%;
	/* border-box so width:100% includes the padding+border — otherwise the row
	 * renders 34px wider than the column and overflows on mobile. */
	box-sizing: border-box;
	/* Override the flex default min-width:auto so the row can shrink to the column;
	 * the savings note wraps below when tight. */
	min-width: 0;
	margin: 0;
	padding: 13px 16px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Native radio → 17px circle; selected shows a navy centre dot. */
.biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input {
	appearance: none;
	-webkit-appearance: none;
	position: static;
	opacity: 1;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--control-border);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked {
	border-color: var(--wp--preset--color--primary);
	background: radial-gradient(70.71% 70.71% at 50% 50%, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 42%, rgba(16, 44, 87, 0) 46%);
}
/* Selected row highlight. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked) {
	background-color: var(--wp--preset--color--surface-selected);
	border-color: var(--wp--preset--color--primary);
}
/* WooCommerce 11 variant of the same control -------------- *
 * Woo 11 dropped the .__pill label + radio input and reuses the
 * product-filter-chips component: <button role="radio" aria-checked> with no
 * input at all. Re-create the stacked card above, drawing the radio circle as
 * a ::before since there is no longer an input to restyle. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wp-block-woocommerce-product-filter-chips,
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	/* Woo 11 wraps the attribute in a .wp-block-group.is-vertical flex column
	 * with align-items:flex-start, which sizes this to its content instead of
	 * the column. Woo 10 had no such wrapper, so the old picker filled the buy
	 * box by default. Stretch it back to full width. */
	width: 100%;
	align-self: stretch;
	box-sizing: border-box;
}
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 8px;
}
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 13px 16px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	line-height: 18px;
	color: var(--wp--preset--color--text);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* The radio circle, drawn on the button since Woo 11 emits no input. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1px solid var(--wp--preset--color--control-border);
	border-radius: 50%;
	background: transparent;
}
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item[aria-checked="true"] {
	background-color: var(--wp--preset--color--surface-selected);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text);
}
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item[aria-checked="true"]::before {
	border-color: var(--wp--preset--color--primary);
	background: radial-gradient(70.71% 70.71% at 50% 50%, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 42%, rgba(16, 44, 87, 0) 46%);
}
/* Woo 11 draws a 1px black focus outline on the chip button, which sits just
 * outside our navy selected border and reads as a double ring after a click.
 * Woo 10 never showed it: focus landed on the radio input, which we styled
 * flat. Drop it for pointer clicks, keep a real ring for keyboard users. */
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item:focus {
	outline: none;
}
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__label,
.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__text {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Savings note (injected by pdp-variation-savings.js). */
.biota-pdp__atc .biota-varsave {
	margin-left: auto;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 16px;
	color: var(--wp--preset--color--success);
	white-space: nowrap;
}

/* Trust grid (Figma spec) --------------------------------- */
.biota-pdp__trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 18px;
	background-color: var(--wp--preset--color--surface-light);
	border-radius: 14px;
}
/* Compound selector beats WP's undefined flex-gap var. */
.biota-pdp__trust .biota-pdp__trustitem {
	gap: 9px;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.biota-pdp__trustmark {
	margin: 0;
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.3;
}
.biota-pdp__trusttext {
	gap: 2px;
}
.biota-pdp__trusttitle {
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
}
.biota-pdp__trustsub {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-subtle);
}

/* ============================================================
 * PDP marketing sections (below the buy box)
 * ============================================================ */

/* --- One reason (dark USP: text + image, Figma spec) ----- */
/* Ebony background with a soft radial highlight top-right. */
.biota-onereason.has-background {
	background-color: #0e1626;
	background-image: radial-gradient(90% 120% at 78% 40%, #2c3a4d 0%, #0e1626 68%);
}
.biota-onereason__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--bt-50);
	align-items: center;
}
/* Extra breathing room before the CTA (Figma: ~30px lead→button). */
.biota-onereason .wp-block-buttons {
	margin-top: 18px;
}
.biota-onereason__media {
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	background-color: #141c2b;
}
.biota-onereason__media img,
.biota-onereason__media video {
	display: block;
	width: 100%;
	aspect-ratio: var(--biota-pdp-media);
	object-fit: cover;
}
@media (min-width: 783px) {
	.biota-onereason {
		min-height: 640px;
		display: flex;
		align-items: center;
	}
	.biota-onereason__grid {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		max-width: 1200px;
	}
	.biota-onereason__grid h2 {
		font-size: var(--wp--preset--font-size--heading-lg);
		line-height: 47px;
		letter-spacing: -0.88px;
	}
}

/* Media cards inside dark sections read light. */
.biota-section--dark .biota-mediacard__title { color: var(--wp--preset--color--base); }
.biota-section--dark .biota-mediacard__text { color: rgba(255, 255, 255, 0.72); }

/* Use-cases: wider gap between the section heading and the card grid (Figma 40px). */
.biota-usecases .biota-section__inner {
	gap: 40px;
}
/* Use-cases: tighter gap between the columns/cards themselves (Figma 22px). */
.biota-usecases .biota-grid-3 {
	gap: 22px;
}

/* --- App grid (2 labelled screenshots) --- */
.biota-appshot {
	position: relative;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background-color: #0a1220;
}
.biota-appshot img,
.biota-appshot video {
	display: block;
	width: 100%;
	aspect-ratio: var(--biota-pdp-video);
	/* contain, not cover: these are demo clips and UI captures, and cropping
	   them loses the thing they were shot to show. With the tile at 16:9 this
	   is a no-op for ordinary footage and a safety net for anything else. */
	object-fit: contain;
	background-color: #0a1220;
}
.biota-appshot__label {
	position: absolute;
	top: 14px;
	left: 14px;
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	background-color: rgba(16, 44, 87, 0.9);
	color: var(--wp--preset--color--base);
}

/* Each tile plus its caption. The caption sits outside the rounded player, so
   the cell — not the tile — is the grid item. */
.biota-appcell {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.biota-appshot__title {
	margin: 18px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--base);
}
.biota-appshot__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

/* --- Setup steps (Figma spec) --- */
/* Section spacing: wider gap heading→grid→tech; heading at the spec 32px. */
.biota-setup .biota-section__inner { gap: 34px; }
@media (min-width: 783px) {
	.biota-setup .biota-section__header h2 {
		font-size: var(--wp--preset--font-size--heading);
		line-height: 1.25;
		letter-spacing: -0.64px;
	}
}

.biota-stepcard {
	background-color: var(--wp--preset--color--base);
	border-radius: 18px;
	overflow: hidden;
}
.biota-stepcard__media { margin: 0; }
.biota-stepcard__media img,
.biota-stepcard__media video { display: block; width: 100%; aspect-ratio: var(--biota-pdp-media); object-fit: cover; }
/* The app-schedule clip is a portrait phone recording in a landscape card.
   `cover` would crop it to a vertical sliver, so it is letterboxed on the
   card's own surface instead. */
.biota-stepcard__media video { object-fit: contain; background-color: #0a1220; }
/* Flex body so gaps aren't swallowed by WP's flow-gap override (num/title jammed). */
.wp-block-group.biota-stepcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
}
.biota-stepcard__num {
	margin: 0 0 2px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 18px;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.biota-stepcard__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--title-md);
	line-height: 28px;
	letter-spacing: -0.4px;
	color: var(--wp--preset--color--text);
}
.biota-stepcard__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 22px;
	color: var(--wp--preset--color--text-muted);
}

/* Technician install card (Figma: image left, content right). */
.biota-tech {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	overflow: hidden;
}
/* 460px, not 300: at 4:3 that makes the photo the same height as the copy
   beside it, so the card still reads as one block with no white below the
   image. The photo used to fill whatever height the copy happened to be —
   which meant it had no ratio at all, and a briefed 4:3 asset lost 35% of its
   width to the crop. */
@media (min-width: 783px) { .biota-tech { grid-template-columns: 460px 1fr; } }
/* start, not stretch: stretching is what removed the ratio before. If the copy
   ever grows past the photo the card simply gets taller than it. */
.biota-tech__media { margin: 0; align-self: start; }
/* The doubled class is deliberate: WooCommerce ships `.woocommerce img { height:
   auto }`, which has the same specificity as a single class but loads after this
   file, so it would otherwise win. */
.biota-tech__media.wp-block-image img,
.biota-tech__media.wp-block-image video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--biota-pdp-media);
	object-fit: cover;
}
.wp-block-group.biota-tech__body {
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}
.biota-tech__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--title-md);
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: var(--wp--preset--color--text);
}
.biota-tech__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 22px;
	color: var(--wp--preset--color--text-muted);
	max-width: 420px;
}
.biota-tech__list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	max-width: 400px;
}
.biota-tech__list li {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 17px;
	color: var(--wp--preset--color--text-muted);
}
.biota-tech__list li::before {
	content: "\2713";
	margin-right: 8px;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.wp-block-group.biota-tech__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px; /* keep the note visually tied to the button (same idea) */
	margin-top: 14px;
}
.biota-tech__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
	color: var(--wp--preset--color--text-subtle);
	max-width: 280px;
	text-align: center; /* centered directly beneath the WhatsApp button */
}
/* Desktop: keep the button at the card's left edge; the note stays centered
   under it (the CTA shrink-wraps to the button width). On mobile the button is
   full-width, so the note simply centers within that full width. */
@media (min-width: 783px) {
	.wp-block-group.biota-tech__cta {
		align-self: flex-start;
		width: fit-content;
		max-width: 100%;
	}
}

/* WP's flow layout zeroes child block margins (is-layout-flow > * { margin-block:0 }),
   leaving only the 6px flex gap. Re-assert the Figma rhythm with logical margins at
   higher specificity so they beat WP's :where() reset (same property, wins cleanly):
   eyebrow→title 8 (6 gap + 2), title→text 6 (gap), text→checklist 16 (6 gap + 10). */
.wp-block-group.biota-tech__body .biota-tech__title { margin-block-start: 2px; }
.wp-block-group.biota-tech__body .biota-tech__list { margin-block-start: 10px; }

/* --- Comparison + specs tables --- */
.biota-table {
	width: 100%;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	overflow: hidden;
}
.biota-comparerow, .biota-specrow {
	display: grid;
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--border);
}
.biota-comparerow { grid-template-columns: 1.6fr 1fr 1fr; }
/* Compare cells stretch to the row's full height so the tinted column reads as
   one continuous band. The shared rule above centres them, which sized each
   cell to its own content — wherever the neighbouring cell was taller (a badge
   plus a qualifier against a bare badge) the tint broke into a white gap.
   Content stays vertically centred inside the now-full-height cell. */
.biota-comparerow { align-items: stretch; }
.biota-comparerow > .biota-compare__label { display: flex; align-items: center; }
.biota-comparerow:first-child, .biota-specrow:first-child { border-top: 0; }
.biota-comparerow > * { margin: 0; padding: 14px 18px; font-size: var(--wp--preset--font-size--body); }
.biota-compare__label { color: var(--wp--preset--color--text-muted); }

/* Value cells stack: badge centred, qualifier on its own line beneath it. The
   badge is a fixed 34px disc, so it lands on the same centre line in every
   row — an earlier version set the glyph inline beside the text, where it
   drifted with the length of whatever sat next to it. */
.biota-compare__fixed,
.biota-compare__ptz {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-align: center;
}
.biota-compare__fixed { font-weight: 600; }
.biota-compare__ptz { color: var(--wp--preset--color--text-muted); }

/* Yes/no as a filled badge. The tick is solid green and the cross a tinted
   disc: at equal weight the crosses shout as loudly as the ticks, and this
   table is read for what a product CAN do. */
.biota-compare__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
}
.biota-compare__mark::before {
	content: "";
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--biota-glyph) center / contain no-repeat;
	mask: var(--biota-glyph) center / contain no-repeat;
}
.biota-compare__mark--yes {
	background-color: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
	--biota-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.biota-compare__mark--no {
	background-color: var(--wp--preset--color--sale-surface);
	box-shadow: inset 0 0 0 1px rgba(208, 52, 44, 0.22);
	color: var(--wp--preset--color--sale);
	--biota-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
/* Rows with no yes/no answer (a price, a count) show their text alone. */
.biota-compare__mark--none { display: none; }

/* The qualifier is its own line under the badge now, so it reads as a
   sentence fragment and takes a capital — done here rather than in the copy,
   which still reads "· ke MicroSD" inline. */
.biota-compare__qual { line-height: 1.45; }
/* Only a qualifier that sits under a badge — it is a fragment on its own line
   there and reads better capitalised. A cell with no badge is a whole value
   ("1 titik", "[rating IP]") and is left exactly as written. */
.biota-compare__mark:not( .biota-compare__mark--none ) + .biota-compare__qual::first-letter {
	text-transform: uppercase;
}
.biota-compare__qual:empty { display: none; }
.biota-compare__fixed .biota-compare__qual { color: var(--wp--preset--color--text); }

/* Header row: product thumbnail + name per column. */
.biota-comparerow--head { align-items: stretch; }
.biota-compare__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 20px 16px;
}
/* The selected column is tinted end to end, not just at its head. A solid cap
   over plain rows read as a banner sitting on the table rather than as one
   column being singled out — the eye never carried the highlight down the
   values it is meant to be drawing attention to. The table wrapper already
   clips to an 18px radius, so the tint gets its rounded corners for free. */
.biota-compare__head--fixed,
.biota-compare__fixed {
	background-color: var(--wp--preset--color--surface-selected);
}
.biota-compare__thumb {
	margin: 0;
	width: 100%;
	max-width: 168px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-subtle);
}
.biota-compare__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.biota-compare__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--text);
}
.biota-compare__head--fixed .biota-compare__name { color: var(--wp--preset--color--text); }
.biota-compare__head--ptz .biota-compare__name { color: var(--wp--preset--color--text-strong); }

/* Optional price line under a column name — some comparisons are against a
   habit rather than a product ("kasih makan manual · Gratis"). */
.biota-compare__price {
	/* Holds its line open when a column has no price, so the names and photos
	   above it stay on one baseline across columns. */
	min-height: 1.3em;
	margin: -8px 0 0;
	font-size: var(--wp--preset--font-size--caption, 12px);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--text-muted);
}
.biota-compare__head--fixed .biota-compare__price { color: var(--wp--preset--color--text-muted); }
/* A column with no product to picture keeps the head's height without an empty
   grey square standing in for a photo that will never exist. */
.biota-compare__head--noimg { justify-content: center; min-height: 148px; }

.biota-specs { border-top: 1px solid var(--wp--preset--color--border); }
.biota-specrow { grid-template-columns: 1fr 1.5fr; gap: var(--wp--preset--spacing--bt-40); padding: 0; }
.biota-specrow > * { margin: 0; padding: 14px 0; font-size: var(--wp--preset--font-size--body); }
.biota-specrow__k { color: var(--wp--preset--color--text-subtle); }
.biota-specrow__v { color: var(--wp--preset--color--text); font-weight: 500; }

/* Optional caveats around the table, for a product whose numbers are not final.
   Saying so is the point — an empty spec beats a guessed one. */
.biota-specs__note {
	margin: 6px 0 var(--wp--preset--spacing--bt-40);
	font-size: 13.5px;
	color: var(--wp--preset--color--text-subtle);
}
.biota-specs__foot {
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--wp--preset--color--text-subtle);
	line-height: 1.55;
}

/* --- FAQ (native Details) — Figma: 820px column, rows split by hairlines --- */
/* Narrower reading column than the standard --wide sections. */
.biota-faqsec .biota-section__inner { max-width: 820px; gap: 28px; }

.biota-faq { border-top: 1px solid var(--wp--preset--color--border); }
.biota-faq details { border-bottom: 1px solid var(--wp--preset--color--border); }
.biota-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.5;
	color: var(--wp--preset--color--text);
}
.biota-faq summary::-webkit-details-marker { display: none; }
.biota-faq summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 22px;
	line-height: 1;
}
.biota-faq details[open] summary::after { content: "\2212"; }
.biota-faq details > *:not(summary) {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
}
/* Breathing room below an expanded answer, before the next row. Applied as
   padding on the open row — the answer's own margin-block is zeroed by a WP
   last-child reset, so its margin can't be relied on. */
.biota-faq details[open] { padding-bottom: 20px; }

/* --- Final CTA (navy band, dark image panel + copy card) — Figma --- */
.biota-finalcta .biota-section__inner { max-width: 1000px; }
.biota-finalcta__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}
@media (min-width: 783px) { .biota-finalcta__grid { grid-template-columns: 405px 1fr; gap: 48px; } }
.biota-finalcta__media {
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	background-color: #0c2149; /* Figma: downriver panel behind the product */
	aspect-ratio: var(--biota-pdp-media);
}
.biota-finalcta__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Body: vertically centered stack (grid align-items centers it in the panel). */
.wp-block-group.biota-finalcta__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.biota-finalcta__body > * { margin: 0; }
.biota-finalcta__body .wp-block-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -0.68px;
	color: var(--wp--preset--color--base);
	padding: 3px 0 2px; /* Figma: h2 box has 3px/2px internal padding around the text */
}

/* Price row: current price + struck original + discount badge. */
.biota-finalcta__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
}
.biota-finalcta__now { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--price); color: var(--wp--preset--color--base); }
.biota-finalcta__was { font-size: var(--wp--preset--font-size--body-lg); color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
.biota-finalcta__off {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--base);
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	padding: 5px 10px;
}
.biota-finalcta__trust { font-size: var(--wp--preset--font-size--body); line-height: 1.4; color: rgba(255, 255, 255, 0.7); }

/* Action buttons: horizontal, 13px radius; green button gets a white WA icon.
   Figma: buttons row sits ~26px below the trust line (8px body gap + 18px pad-top). */
.wp-block-buttons.biota-finalcta__actions { margin-top: 18px; gap: 12px; }
.biota-finalcta__actions .wp-block-button__link {
	border-radius: 13px;
	font-size: 15px;
	padding: 16px 30px;
}
.biota-finalcta__actions .biota-btn--fill-light .wp-block-button__link { color: var(--wp--preset--color--primary); }
.biota-finalcta__actions .biota-btn--whatsapp-primary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.biota-finalcta__actions .biota-btn--whatsapp-primary .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFFFFF' d='M16 3C9 3 3.5 8.5 3.5 15.5c0 2.2.6 4.3 1.7 6.2L3 29l7.5-2c1.8 1 3.9 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm0 22.8c-1.9 0-3.7-.5-5.3-1.5l-.4-.2-4.4 1.2 1.2-4.3-.3-.4a10.3 10.3 0 0 1-1.6-5.6C5.2 9.6 10 4.8 16 4.8s10.8 4.8 10.8 10.7S22 25.8 16 25.8zm6-8c-.3-.2-1.9-1-2.2-1-.3-.1-.5-.2-.7.1s-.8 1-1 1.2-.4.2-.7 0a8.8 8.8 0 0 1-2.6-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.5l-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4a3.6 3.6 0 0 0-1.1 2.7c0 1.6 1.2 3.2 1.3 3.4.2.2 2.3 3.6 5.7 5 3.4 1.3 3.4.9 4 .8.6 0 1.9-.8 2.1-1.5.3-.8.3-1.4.2-1.5l-.6-.3z'/%3E%3C/svg%3E");
}

/* ============================================================
 * Mobile: every PDP call-to-action button/row spans full width.
 * Scoped to the product page (body.single-product) so the home page is
 * untouched, and to PDP content (.biota-section + the buy box) so the
 * site header/footer buttons are left alone. The quantity −/+ stepper is
 * intentionally excluded (only the add-to-cart submit goes full width).
 * ============================================================ */
@media (max-width: 782px) {
	.single-product .biota-section .wp-block-buttons,
	.single-product .biota-pdp__buy .wp-block-buttons {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.single-product .biota-section .wp-block-button,
	.single-product .biota-pdp__buy .wp-block-button {
		width: 100%;
		max-width: none;
	}
	.single-product .biota-section .wp-block-button__link,
	.single-product .biota-pdp__buy .wp-block-button__link {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
	/* Quantity + add-to-cart share one row: quantity stays compact, button fills
	   the remaining width. The stepper is shaved slightly smaller so the button
	   keeps enough room on narrow phones. */
	.single-product .biota-pdp__atc .wp-block-add-to-cart-with-options-quantity-selector {
		flex: 0 0 auto;
	}
	.single-product .biota-pdp__atc .wp-block-button.wc-block-components-product-button {
		flex: 1 1 auto;
		width: auto; /* override the generic full-width button rule above */
	}
	.single-product .biota-pdp__atc .wc-block-components-product-button__button {
		width: 100%;
	}
	.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-components-quantity-selector__button {
		width: 40px;
	}
	.biota-pdp .biota-pdp__buy .biota-pdp__atc .wc-block-components-quantity-selector input {
		max-width: 34px;
	}
}

/* ============================================================
 * Default single-product page — "Tentang produk ini" section:
 * per-product prose (or WooCommerce description fallback) + up to 3 feature
 * cards, rendered by the dynamic block biota/product-about on a light band
 * above the specs.
 * ============================================================ */
.biota-pdp-about .biota-about__prose {
	max-width: 660px;
	font-size: 14px;
	color: #555555;
	line-height: 1.75;
}
.biota-pdp-about .biota-about__prose > * + * {
	margin-top: 14px;
}
.biota-about__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 22px;
}
.biota-about__card {
	background: #ffffff;
	border-radius: 14px;
	padding: 18px;
}
.biota-about__iwell {
	display: flex;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #eaf0f9;
	color: var(--wp--preset--color--primary);
	align-items: center;
	justify-content: center;
	margin-bottom: 11px;
}
.biota-about__iwell svg {
	width: 18px;
	height: 18px;
	display: block;
}
.biota-about__card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 4px;
	color: var(--wp--preset--color--text);
}
.biota-about__card-desc {
	font-size: 12.5px;
	color: #767676;
	line-height: 1.55;
}
@media (max-width: 620px) {
	.biota-about__cards {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Default product page (.biota-pdp--simple) — a lighter buy box than the
 * Outdoor Fixed bundle builder: variants become compact inline pills, and the
 * per-variant "Hemat" note + running total row are dropped. (The install card
 * is removed from the template; the single "Bundle hemat" line stays.)
 * ============================================================ */
.biota-pdp--simple .biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}
.biota-pdp--simple .biota-pdp__buy .biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pills .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
	width: auto;
	flex: 0 0 auto;
	padding: 9px 16px;
	border-width: 1.5px;
	border-radius: 999px;
}
/* Pill mode has no radio dot — the highlighted pill is the selection. */
.biota-pdp--simple .biota-pdp__atc .wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input {
	display: none;
}
/* Per-pill savings hidden; the single "Bundle hemat" line already covers it. */
.biota-pdp--simple .biota-pdp__atc .biota-varsave {
	display: none;
}
/* Drop the running "Total · N kamera" row. */
.biota-pdp--simple .biota-pdp__total {
	display: none;
}
/* WooCommerce 11 equivalents of the four pill rules above. Woo 11 renders the
 * options as product-filter-chips buttons with no radio input, so the rules
 * that targeted .__pills / .__pill / .__pill-input stopped matching and every
 * generic PDP fell back to the landing-page stacked-card treatment — 566px of
 * picker on Baby Camera, pushing add-to-cart below the fold. */
.biota-pdp--simple .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}
.biota-pdp--simple .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item {
	width: auto;
	flex: 0 0 auto;
	padding: 9px 16px;
	border-width: 1.5px;
	border-radius: 999px;
}
/* Pill mode has no radio dot — the highlighted pill is the selection. The dot
 * is a ::before here rather than an input, so it is removed with content. */
.biota-pdp--simple .biota-pdp__buy .biota-pdp__atc .wc-block-product-filter-chips__items .wc-block-product-filter-chips__item::before {
	content: none;
}
/* The wrapper is stretched to full width for the stacked cards; in pill mode
 * the pills size themselves, so let it shrink back. */
.biota-pdp--simple .biota-pdp__buy .biota-pdp__atc .wp-block-woocommerce-product-filter-chips {
	width: 100%;
}

/* "Produk baru" stands in for a sold count that is too low to help — see
   biota_sold_label(). It is a status, not a statistic, so it reads as a quiet
   badge rather than another number on the line. */
.biota-pdp__ratingcount--new {
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface-selected);
	border-radius: 999px;
	padding: 2px 10px;
	font-weight: 600;
}

/* The tech card's CTA scrolls back up to the install checkbox, so the target
   needs clearance for the fixed header — otherwise the checkbox lands under it
   and the buyer sees the row above instead of the one they were sent to. */
#pasang-teknisi { scroll-margin-top: 96px; }

/* The tech card's CTA scrolls back up to the install checkbox, so the target
   needs clearance for the fixed header — without it the checkbox lands under
   the bar and the buyer sees the row above the one they were sent to. */
#pasang-teknisi { scroll-margin-top: 96px; }

/* The install checkbox is the target of "Tambahkan saat checkout ↑" from the
   technician card further down. Landing it under the fixed header put it at
   the very top of the screen, with the thing the buyer was sent to see clipped
   against the bar. Half the viewport, less half the card, brings it to the
   middle instead — so the buy box around it stays visible and the checkbox
   reads as part of something rather than as the top of the page. */
#pasang-teknisi {
	scroll-margin-top: max(96px, calc(50vh - 70px));
}

/* Add-to-cart notices ------------------------------------- *
 * WooCommerce 11 submits the buy box as a native form POST (10.x added via
 * AJAX), so the only confirmation a customer gets is this notice. Without a
 * store-notices block the add looked silent — the page just reloaded. */
.biota-pdp .biota-pdp__notices:empty {
	display: none;
}
.biota-pdp .biota-pdp__notices .wc-block-components-notice-banner {
	margin: 0 0 var(--wp--preset--spacing--bt-40);
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
}
.biota-pdp .biota-pdp__notices .wc-block-components-notice-banner a {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}