/* ============================================================
 * BIOTA · CHECKOUT
 * The WooCommerce Checkout *block* renders this page — it is React, so there
 * is no PHP template to override and no markup of ours inside it. Everything
 * below restyles the block's own DOM; the block order is untouched, exactly as
 * the design specifies: kontak → alamat → pengiriman → pembayaran → catatan →
 * buat pesanan.
 *
 * Free shipping is enforced server-side by biota_apply_free_shipping() on the
 * cheapest courier only. Deliberately NO "add Rp X more" nudge here — at
 * checkout that is an exit ramp; it lives on the cart page.
 *
 * Contrast, per the design notes: #5f6570 field labels, #767676 secondary,
 * #8a93a0 ONLY for struck prices (always beside a full-contrast value).
 * Do not reach for #888 / #999 / #a0a8b4.
 * ============================================================ */

.biota-checkout {
	--biota-co-pad: 48px;
	font-family: var(--wp--preset--font-family--body, 'DM Sans', system-ui, sans-serif);
	color: #1a1a1a;
}

/* --- our own header above the block --- */
/* border-box with the padding added to the cap, so the content column is 1100px
   wide on desktop and simply narrows on small screens. Left as content-box, the
   theme's alignwide width (which equals the viewport once it is narrow enough)
   plus this padding made the page 40px wider than the screen and scrolled the
   whole checkout sideways. */
.biota-checkout__head {
	box-sizing: border-box;
	max-width: calc(1100px + 2 * var(--biota-co-pad));
	margin: 0 auto;
	padding: 0 var(--biota-co-pad);
}
/* The brand mark replaces both the site header and the breadcrumb. It is a
   span, not a link: on a checkout the logo is the commonest accidental exit,
   and the page has nothing above it to go back to that the buyer wants. */
.biota-checkout__brand {
	padding-top: 22px;
}
.biota-checkout__wm {
	display: block;
	width: 104px;
	height: 20px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url(../../img/biota-logotype.png) left center / contain no-repeat;
	mask: url(../../img/biota-logotype.png) left center / contain no-repeat;
	font-size: 0;
	color: transparent;
}
.biota-checkout__titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 14px 0 22px;
}
.biota-checkout__h {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
}
.biota-checkout__pays {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.biota-pay {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 700;
	font-size: 9.5px;
	letter-spacing: 0.02em;
	color: #3d4654;
	background: #F5F6F8;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	padding: 6px 9px;
	white-space: nowrap;
}

/* --- the block's two-column shell --- */
.biota-checkout .wc-block-checkout {
	box-sizing: border-box;
	max-width: calc(1100px + 2 * var(--biota-co-pad));
	margin: 0 auto;
	padding: 0 var(--biota-co-pad) 44px;
}
/* The block's own layout adds 48px of horizontal padding on top of the padding
   .wc-block-checkout already carries, insetting the form and summary 48px
   further than the "Checkout" heading above them. Zero it so the block's
   content edges line up with our header's. */
.biota-checkout .wc-block-components-sidebar-layout {
	gap: 28px;
	align-items: flex-start;
	padding-left: 0;
	padding-right: 0;
}
/* The design splits this 1.45fr / 1fr on a 28px gap. The block instead pads the
   main column 64px on the right, which both narrowed the summary to 356px and
   opened a 56px trench between the fields and it. */
.biota-checkout .wc-block-checkout__main {
	padding-right: 0 !important;
	flex: 1.45 1 0;
	min-width: 0;
}
.biota-checkout .wc-block-checkout__sidebar {
	flex: 1 1 0;
	min-width: 0;
}
.biota-checkout .wc-block-checkout__sidebar {
	position: sticky;
	/* #sitenav is fixed at top:0 and 72px tall, so a bare 16px parked the summary
	   56px *underneath* it and the panel's heading was clipped on scroll. */
	top: calc( 72px + 16px );
}

/* --- section headings --- */
.biota-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	font-size: 19px !important;
	letter-spacing: -0.02em;
	color: #1a1a1a;
	/* 24px of top margin sat above every heading — invisible when you measure
	   box-to-box, which is why the section gaps read as a correct 26px while
	   what you actually saw between them was 50px. The design's .sec-h is
	   margin: 0 0 14px. */
	margin-top: 0 !important;
}
/* The block sets 24px under the heading; the design's .sec-h sits 14px clear of
   its content. This needs BOTH a high specificity and !important — the same
   rule at (0,2,0) and (0,3,0) lost even with !important, and so did an
   identically-worded rule injected in a fresh stylesheet, which is what proved
   it was specificity rather than load order. Four classes wins it.
   margin-block-end is set alongside margin-bottom because the block styles
   these with logical properties; setting only the physical one leaves the
   logical declaration to win on source order. */
.biota-checkout .wc-block-checkout .wc-block-components-checkout-step .wc-block-components-checkout-step__heading {
	margin-bottom: 14px !important;
	margin-block-end: 14px !important;
}
.biota-checkout .wc-block-components-checkout-step__content {
	margin-top: 0;
	padding-top: 0;
}
/* the block's numbered-step affordance is not in this design */
.biota-checkout .wc-block-components-checkout-step__index {
	display: none;
}
.biota-checkout .wc-block-components-checkout-step {
	padding-left: 0;
	margin-bottom: 26px !important;
}
.biota-checkout .wc-block-components-checkout-step__description {
	font-size: 12.5px;
	color: #5f6570;
}

/* --- fields ---------------------------------------------------------------
   WooCommerce draws these with a 2px near-black border, 12px radius and 16px
   text — a different visual language from the rest of the site. Its rules are
   media-nested and out-specify ours, so the contested properties carry
   !important here for the same reason the courier cards do.

   Note there is NO "filled field turns blue" rule: an earlier attempt tinted
   every non-empty input, which painted the email field blue on load. In the
   design that blue is the browser's autofill styling, not a state we own. */
.biota-checkout .wc-block-components-text-input input,
.biota-checkout .wc-block-components-country-input select,
.biota-checkout .wc-block-components-state-input select,
.biota-checkout .wc-block-components-combobox input,
.biota-checkout .wc-block-components-textarea {
	border: 1px solid #d5d9e0 !important;
	border-radius: 10px !important;
	background: #ffffff;
	font-family: inherit;
	font-size: 13.5px !important;
	color: #1a1a1a;
}
/* Focus only. The block also puts .is-active on any PREFILLED field, so keying
   the blue off that left the email permanently outlined as though it were
   focused. */
.biota-checkout .wc-block-components-text-input input:focus,
.biota-checkout .wc-block-components-combobox input:focus,
.biota-checkout .wc-block-components-textarea:focus {
	border-color: #2563EB !important;
	box-shadow: none;
	outline: none;
}
/* The floating label. The block shrinks it with transform: scale(0.82), which
   left it at an effective 11.5px against the design's 10.5px.
   Its transform is a PURE scale with transform-origin: 0 0 and no translate —
   position comes from top/left — so dropping the scale and setting a real
   font-size lands the label in exactly the same spot at exactly the right size.
   Both need !important: the font-size loses the cascade on its own, and setting
   it while the scale still applied would compound to ~8.6px.
   Only the floated (.is-active) state is touched; at rest the label doubles as
   the placeholder and keeps its full size. */
.biota-checkout .wc-block-components-text-input label,
.biota-checkout .wc-block-components-combobox label {
	color: #5f6570;
}
.biota-checkout .wc-block-components-text-input.is-active label,
.biota-checkout .wc-block-components-combobox.is-active label {
	font-size: 10.5px !important;
	transform: none !important;
	line-height: 1.3;
}
/* Label and value on the design's 13px inset, and the design's 9px/8px vertical
   padding around them. The input carries a 1px border, so 12px of padding puts
   its text on the same 13px as the absolutely-positioned label — matching the
   two numbers exactly is what leaves them misaligned.
   !important throughout: every one of these loses to the block otherwise. */
.biota-checkout .wc-block-components-text-input input,
.biota-checkout .wc-block-components-combobox input {
	padding: 24px 12px 8px !important;
}
.biota-checkout .wc-block-components-text-input label,
.biota-checkout .wc-block-components-combobox label {
	left: 13px !important;
}
/* Floated: sits on the top inset, above the value. */
.biota-checkout .wc-block-components-text-input.is-active label,
.biota-checkout .wc-block-components-combobox.is-active label {
	top: 9px !important;
}
/* At rest the label IS the placeholder, so it belongs on the input's own text
   line. `top: 9px` used to apply in both states, which pinned the resting label
   to the floated inset — and WooCommerce's own translateY(-50%) still applied
   on top of that, lifting it further. The result sat about 11px high in a 50px
   box, which is the misalignment.

   Stretching the label across the full height and centring it beats restoring
   WooCommerce's `top: 50%`: that value assumes the geometry we overrode above,
   and it overshot when tried. This holds whatever the label's font-size or the
   input's height turn out to be. */
.biota-checkout .wc-block-components-text-input:not(.is-active) label,
.biota-checkout .wc-block-components-combobox:not(.is-active) label {
	top: 0 !important;
	bottom: 0;
	height: auto;
	transform: none !important;
	display: flex;
	align-items: center;
	line-height: 1.3;
}

/* --- selects (Negara/Wilayah, Provinsi) ---
   These are a separate component with their own class prefix
   (.wc-blocks-components-select, note "blocks" not "block"), so none of the
   text-input rules above reach them. Same box, same insets. */
.biota-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid #d5d9e0 !important;
	border-radius: 10px !important;
	background-color: #ffffff;
	font-family: inherit;
	font-size: 13.5px !important;
	color: #1a1a1a;
	height: 50px;
	padding: 24px 32px 8px 12px !important;
	/* The block leaves line-height at 25px, but the design's 24px/8px padding
	   leaves a 16px content box — the line box overflowed it and clipped the
	   descenders off "DKI Jakarta". Unlike an <input>, a <select> does not
	   re-centre its text to compensate. */
	line-height: 16px !important;
}
.biota-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: #2563EB !important;
	box-shadow: none;
	outline: none;
}
.biota-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
	left: 13px !important;
	top: 9px !important;
	font-size: 10.5px !important;
	line-height: 1.3;
	color: #5f6570;
	transform: none !important;
}

/* The block stacks the address fields flush against each other, which reads as
   one connected control group; the design has separate boxes on an 11px rhythm. */
.biota-checkout .wc-block-components-address-form .wc-block-components-text-input,
.biota-checkout .wc-block-components-address-form .wc-block-components-combobox,
.biota-checkout .wc-block-components-address-form .wc-block-components-country-input,
.biota-checkout .wc-block-components-address-form .wc-block-components-state-input {
	margin-bottom: 11px;
}
/* 13px separates the last field row from the billing checkbox that follows it
   in the shipping section. The contact section's form holds only the email
   field, where that same margin was padding the gap to the next heading out to
   39px, so it is zeroed there and the step's own 26px owns the gap. */
.biota-checkout .wc-block-components-address-form > :last-child {
	margin-bottom: 0;
}
.biota-checkout .wc-block-checkout__shipping-fields .wc-block-components-address-form > :last-child,
.biota-checkout .wc-block-checkout__billing-fields .wc-block-components-address-form > :last-child {
	margin-bottom: 13px;
}

/* The "+ Tambah apartemen…" toggle — the design's .lnk: 12.5px, navy, no
   underline. The block renders it at 13px in body colour, so it read as prose
   rather than as something you can press. */
/* display:block, not inline-block: as an inline box it also carried a baseline
   gap from the line box, which stacked on top of the margin above it and made
   the space over the toggle 23px instead of the design's 7px. As a block the
   margins are the whole story. */
.biota-checkout .wc-block-components-address-form__address_2-toggle {
	display: block;
	font-size: 12.5px;
	line-height: 1.4;
	color: #102C57;
	text-decoration: none;
	margin: 0 0 13px;
	cursor: pointer;
}
/* The field directly above the toggle tightens to 7px so the link reads as
   belonging to the address line rather than floating between two rows. */
.biota-checkout .wc-block-components-address-form .wc-block-components-text-input:has( + .wc-block-components-address-form__address_2-toggle ) {
	margin-bottom: 7px;
}
/* The optional apartment field, once revealed, keeps the same tight pairing. */
.biota-checkout .wc-block-components-address-form__address_2-hidden-input {
	margin-bottom: 7px;
}

/* Checkboxes — the design's .chk: a 17px rounded square that fills navy when
   checked. The block ships a native control, so it needs appearance:none before
   any of this applies. */
.biota-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 17px;
	height: 17px;
	min-width: 17px;
	border: 1.5px solid #c8ccd2;
	border-radius: 4px;
	background: #ffffff;
	margin: 0;
	flex: none;
	position: relative;
	top: 0;
}
/* The tick is drawn on the box itself rather than left to the block's separate
   <svg>. That svg uses viewBox="0 0 24 20" with its ink running y 5.6–19, so
   its glyph sits about 11% low even when the element is perfectly centred —
   which is why measuring the box kept saying "centred" while it plainly was not.
   As a centred background there is nothing left to misalign. */
.biota-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: #102C57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	background-size: 11px 11px;
	border-color: #102C57;
}
.biota-checkout .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid #2563EB;
	outline-offset: 2px;
}
/* Superseded by the background above; the block's own glyph is off-centre. */
.biota-checkout .wc-block-components-checkbox__mark {
	display: none;
}
.biota-checkout .wc-block-components-checkbox label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #1a1a1a;
}

/* The saved-address card a returning customer sees. The design only drew the
   empty-form case, so this borrows its field language: same box, the name at
   the value size and the address itself as secondary text. */
.biota-checkout .wc-block-components-address-card {
	border: 1px solid #d5d9e0;
	border-radius: 10px;
	padding: 13px;
}
.biota-checkout .wc-block-components-address-card address {
	font-style: normal;
}
.biota-checkout .wc-block-components-address-card__address-section--primary {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	margin-bottom: 3px;
}
.biota-checkout .wc-block-components-address-card__address-section--secondary {
	font-size: 13px;
	color: #5f6570;
	line-height: 1.5;
}
.biota-checkout .wc-block-components-address-card__edit {
	font-size: 13px;
	font-weight: 500;
	color: #102C57;
	text-decoration: none;
	flex: none;
}
.biota-checkout .wc-block-components-address-card-wrapper {
	margin-bottom: 13px;
}
/* Two nested wrappers each contributed: the card wrapper's 13px plus 16px on
   the address-address-wrapper outside it, putting 29px between the address and
   "Pakai alamat yang sama…" where the design has 13px. The outer one is zeroed
   so a single margin owns the gap — which also keeps it at 13px when the form
   is showing instead of the card, since the form's last row carries the same. */
.biota-checkout .wc-block-components-address-address-wrapper {
	margin-bottom: 0 !important;
}
.biota-checkout .wc-block-checkout__use-address-for-billing {
	margin-top: 0 !important;
}

/* The block pins its radio 16px from the top of the option, which sits low in a
   45px row. Centre it on the row instead, and take it to the design's 17px. */
.biota-checkout .wc-block-components-radio-control__input {
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 17px !important;
	height: 17px !important;
	border: 1.5px solid #c8ccd2 !important;
}
.biota-checkout .wc-block-components-radio-control__input:checked {
	border-color: #102C57 !important;
}

/* The struck original price beside a free courier. The rate's cost is zero by
   the time it reaches the browser, so the original is delivered separately as
   Store API extension data and written into this custom property by
   checkout.js. If it is ever absent the property is unset, `content` is
   invalid, and the ::before simply does not render — it fails to nothing
   rather than to a wrong number. */
.biota-checkout .wc-block-checkout__shipping-option--free::before {
	content: var(--biota-free-orig);
	margin-right: 7px;
	font-weight: 400;
	color: #8a93a0;
	text-decoration: line-through;
}
.biota-checkout .wc-block-components-address-form__apartment button,
.biota-checkout .wc-block-components-checkout-step__content button.wc-block-components-button--text {
	font-size: 12.5px;
	color: #102C57;
}

/* --- radio cards: shipping options and payment methods --- */
/* Leave the block's own radio machinery alone: it draws the circle with CSS and
   keeps the real <input> out of the way, so overriding the input's position
   just exposes the native control as a stray dot. All this needs is enough left
   padding to clear the circle — our shorthand padding was what removed it. */
/* The --highlight-checked variant styles the group as ONE bordered container
   and zeroes the per-option border; this design wants separate cards.
   WooCommerce's winning selector is
     .wc-block-components-radio-control--highlight-checked
     label.wc-block-components-radio-control__option--checked-option-highlighted
   which is (0,3,1) — the `label` TYPE selector is what beat an earlier attempt
   at (0,3,0). Matching that shape and prefixing .biota-checkout takes us to
   (0,4,1). Keep the `label.` here; dropping it silently hands the cards back. */
.biota-checkout .wc-block-components-radio-control--highlight-checked,
.biota-checkout .wc-block-components-radio-control {
	gap: 9px !important;
	border: none;
}
/* !important is deliberate and confined to the three contested properties.
   WooCommerce's own rules for this variant live inside @media blocks and match
   at (0,3,1) via a `label` type selector; they zero the per-option border so the
   group reads as one container, while this design wants separate cards. Raising
   our specificity to (0,4,1) was not enough because the media-nested rules load
   later. Everything else here wins on the cascade normally — do not spray
   !important across the rest of the file. */
.biota-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option,
.biota-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option {
	border: 1px solid #d5d9e0 !important;
	border-radius: 10px !important;
	padding: 13px 15px 13px 44px;
	margin: 0;
	background: #ffffff;
	font-size: 13.5px;
}
.biota-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted,
.biota-checkout .wc-block-components-radio-control label.wc-block-components-radio-control__option-checked {
	border-color: #102C57 !important;
}
.biota-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.biota-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: #102C57;
}
.biota-checkout .wc-block-components-radio-control__option-layout {
	align-items: center;
	width: 100%;
}
/* The block nests the courier name and its price together in one group, which
   left them colliding mid-row. Push them to opposite edges. */
.biota-checkout .wc-block-components-radio-control__label-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}
.biota-checkout .wc-block-components-radio-control__label {
	font-size: 13.5px;
}
.biota-checkout .wc-block-components-radio-control__secondary-label,
.biota-checkout .wc-block-components-radio-control__description {
	font-size: 12px;
	color: #5f6570;
}
.biota-checkout .wc-block-components-radio-control__secondary-label {
	white-space: nowrap;
	color: #1a1a1a;
}
/* Green marks the free courier ONLY. The block puts .--free on the price span
   itself, so match that and nothing else — an earlier `:not(:empty)` selector
   painted every courier's price green, which read as three free options. */
.biota-checkout .wc-block-checkout__shipping-option--free {
	font-weight: 600;
	color: #0f7a42;
}

/* The shipping note. Two states, per the design: grey "Dikirim dari Jakarta
   Barat" normally, green "Gratis ongkir berlaku" once the cart qualifies —
   keyed on eligibility (goods over the threshold), NOT on which courier happens
   to be selected. checkout.js puts .is-free-shipping on the root when a rate
   carries its pre-subsidy price, which is exactly the eligible case.
   Icon and text share one pseudo-element: a ::before would render above the
   courier list rather than beside the note. */
.biota-checkout .wp-block-woocommerce-checkout-shipping-methods-block::after {
	content: 'Dikirim dari Jakarta Barat';
	display: block;
	margin-top: 8px;
	padding-left: 20px;
	font-size: 11.5px;
	line-height: 1.4;
	color: #5f6570;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7h11v8H3zM14 10h4l3 3v2h-7z' stroke='%235f6570' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='17' r='1.5' stroke='%235f6570' stroke-width='1.7'/%3E%3Ccircle cx='17' cy='17' r='1.5' stroke='%235f6570' stroke-width='1.7'/%3E%3C/svg%3E") no-repeat left center;
	background-size: 13px 13px;
}
.biota-checkout.is-free-shipping .wp-block-woocommerce-checkout-shipping-methods-block::after {
	content: 'Gratis ongkir berlaku';
	color: #0f7a42;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7h11v8H3zM14 10h4l3 3v2h-7z' stroke='%230f7a42' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='17' r='1.5' stroke='%230f7a42' stroke-width='1.7'/%3E%3Ccircle cx='17' cy='17' r='1.5' stroke='%230f7a42' stroke-width='1.7'/%3E%3C/svg%3E");
}

/* --- payment ---
   v4 treats the gateway card and the line beneath it as plugin output and
   leaves them alone: the name is plain 14px, not 13.5/600 as earlier drafts
   had it, and the description is ordinary secondary text rather than a boxed
   panel. What follows the card is ours. */
.biota-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__label {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.35;
}
.biota-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__description,
.biota-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__secondary-description {
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: #5f6570;
	margin-top: 0;
}
.biota-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option-layout,
.biota-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__label-group {
	align-items: center;
}
/* The label box is 24px around an 18px line, and the line sat at the top of it —
   3.3px above centre. align-items:center did not help: the text is an anonymous
   inline box, not a flex item. Matching the line-height to the box centres the
   glyphs within it, which is deterministic regardless of where the 24px
   comes from. */
.biota-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__label {
	display: block;
	line-height: 24px !important;
}
/* The gateway's own description sits plainly under the card in v4 — no grey
   panel, no rule. The bordered block below is a separate thing. */
.biota-checkout .wc-block-components-radio-control-accordion-content {
	background: transparent;
	border-top: none;
	padding: 12px 15px 0;
	font-size: 12.5px;
	color: #5f6570;
}

/* --- accepted methods (ours, placed after the gateway by checkout.js) --- */
.biota-pay-accepted {
	background: #fafbfc;
	border: 1px solid #eef0f3;
	border-radius: 10px;
	padding: 13px 15px 14px;
	/* Tight to the gateway above it, normal space below. checkout.js places this
	   panel AFTER the payment fieldset rather than inside it, so the fieldset's
	   26px bottom margin was stacking with this one and opening a 43px gap
	   between "Pilih metode pembayaran di langkah berikutnya" and the panel that
	   answers it. The two read as one block, so they sit like one. */
	margin: 10px 0 14px;
}
.biota-checkout .wc-block-checkout__payment-method:has( + .biota-pay-accepted ) {
	/* !important for the same reason as everything else in this file: the
	   block's own step spacing is media-nested and out-specifies ours. */
	margin-bottom: 0 !important;
}
.biota-pay-accepted__title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5f6570;
	margin-bottom: 9px;
}
.biota-pay-accepted__row {
	display: flex;
	gap: 12px;
	/* Centre, not baseline: the right-hand side is a row of 24px logo plates
	   with no text baseline of their own, so baseline alignment pinned the
	   label to the top of each row instead of level with the logos. */
	align-items: center;
	padding: 5px 0;
}
.biota-pay-accepted__label {
	font-size: 11px;
	color: #5f6570;
	width: 96px;
	flex: none;
	line-height: 1.45;
}
.biota-pay-accepted__methods {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	min-width: 0;
}
.biota-pay-accepted__secure {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	color: #0f7a42;
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid #e6e9ee;
}
.biota-pay-accepted__secure svg {
	flex: none;
}

/* --- order note --- */
.biota-checkout .wc-block-checkout__add-note {
	padding-bottom: 16px;
	border-bottom: 1px solid #eef0f3;
	margin-bottom: 14px;
}
/* The block draws its own rule above the terms paragraph, which sat directly
   under the note's — two hairlines a few pixels apart. The design has one. */
.biota-checkout .wc-block-checkout__terms--with-separator {
	border-top: none;
	padding-top: 0;
}
.biota-checkout .wc-block-components-textarea {
	border: 1.5px solid #d5d9e0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.55;
	min-height: 74px;
}
.biota-checkout .wc-block-components-textarea:focus {
	border-color: #2563EB;
	box-shadow: none;
}

/* --- terms + actions --- */
.biota-checkout .wc-block-checkout__terms {
	font-size: 12px;
	color: #5f6570;
	line-height: 1.6;
	margin-bottom: 18px !important;
}
/* Above it: the note block closes at 14px in the design, not the 26px the
   section steps use. Below it: the actions row carries margin-top:30px, which
   collapses against the terms' 18px and wins — zero it so the terms margin owns
   that gap. */
.biota-checkout .wc-block-checkout__order-notes {
	margin-bottom: 14px !important;
}
.biota-checkout .wc-block-checkout__actions_row {
	margin-top: 0 !important;
}
.biota-checkout .wc-block-checkout__actions_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.biota-checkout .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	background: #2563EB;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 500 !important;
	font-size: 14.5px !important;
	/* The block's own 12px/20px box is smaller than the design's. */
	padding: 14px 32px !important;
	height: auto !important;
}
.biota-checkout .wc-block-components-checkout-place-order-button:hover {
	background: #1d4ed8;
}
/* The block renders this at 14px, weight 525 and underlined. The design has a
   quiet 13px/500 link with a chevron and no underline. */
.biota-checkout .wc-block-components-checkout-return-to-cart-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* The block pads this 27px on the left, which pushed the chevron in from the
	   column edge every other section lines up on. */
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #102C57 !important;
	text-decoration: none !important;
}
.biota-checkout .wc-block-components-checkout-return-to-cart-button::before {
	content: '';
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The block ships its own chevron/arrow; ours replaces it. */
.biota-checkout .wc-block-components-checkout-return-to-cart-button svg {
	display: none;
}

/* --- weights ---
   The body face is variable and the block leaves a lot of text at 525, which
   reads as neither the design's 400 nor its 600. Pin the ones the design
   specifies. */
.biota-checkout .wc-block-components-product-name,
.biota-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.biota-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.biota-checkout .wc-block-components-panel__button,
.biota-checkout .wc-block-components-checkout-order-summary__title-text {
	font-weight: 600 !important;
}
.biota-checkout .wc-block-components-totals-item__label,
.biota-checkout .wc-block-components-totals-item__value,
.biota-checkout .wc-block-components-product-metadata,
.biota-checkout .wc-block-components-address-card__address-section--secondary {
	font-weight: 400 !important;
}

/* --- order summary --- */
.biota-checkout .wc-block-components-order-summary,
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) > .wc-block-components-panel,
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) .wc-block-components-totals-wrapper {
	background: transparent;
}
/* The grey panel belongs to the summary, not to the column: the trust strip
   below it sits on white in the design. There is no wrapper element to hang it
   on, so the children carry it and the first/last round the corners. */
.biota-checkout .wc-block-checkout__sidebar {
	background: transparent;
	padding: 0;
}
/* The panel is one element, not "every child of the column". Styling the
   children meant the sidebar's first child — an empty notices <div> — collected
   the 18px of top padding and the rounded corner, so the panel's top spacing
   was really being drawn by an empty box that would move the moment a notice
   appeared. */
.biota-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: #F5F6F8;
	border-radius: 14px;
	padding: 18px;
	margin: 0;
}
.biota-checkout .wc-block-components-order-summary__title,
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) .wc-block-components-title {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 14px;
}
.biota-checkout .wc-block-components-totals-item {
	font-size: 13px !important;
	padding: 6px 0;
}
.biota-checkout .wc-block-components-totals-item__label,
.biota-checkout .wc-block-components-totals-item__value {
	font-size: 13px !important;
}
.biota-checkout .wc-block-components-totals-item__label {
	color: #555;
}
/* WooCommerce separates these blocks with a near-black rule; the design uses a
   hairline that reads as a divider, not as a border. */
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) .wc-block-components-totals-wrapper,
.biota-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.biota-checkout .wp-block-woocommerce-checkout-order-summary-totals-block,
.biota-checkout .wc-block-components-order-summary-item {
	border-color: #e6e9ee !important;
}
/* Panel heading: the block renders it at 13px, well below the design's 16px. */
/* Same size as the form's section headings, so the two columns read as peers. */
.biota-checkout .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-size: 19px !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	/* A title wants a little more air than the rows below it. The first row
	   carries the same 14px top padding as the others, so this sits on top of
	   that rather than replacing it. */
	margin-bottom: 6px !important;
}
/* Each item is separated by a hairline, and the summary rows sit on the
   design's 8px/6px/12px rhythm. All of these lose to the block unforced. */
/* One hairline per divider. The block draws several of these twice: a border on
   the coupon-form block as well as on the coupon panel inside it (two lines
   14px apart), the totals block's border landing on the coupon's lower one, and
   the totals wrapper's sitting 1px above the Total row's own — which read as a
   2px rule. Keep the inner one in each pair so the line stays tied to the thing
   it separates. */
.biota-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.biota-checkout .wp-block-woocommerce-checkout-order-summary-totals-block,
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) .wc-block-components-totals-wrapper {
	border-top: none !important;
	border-bottom: none !important;
}

/* The image sits an equal 14px clear of the dividers above and below it. The
   block pads only the bottom, so every image but the first was flush against
   the line above it. The first keeps a zero top: the heading's own 14px margin
   already provides its clearance. */
/* Every row identical: 14px of clearance above and below the image, closed by
   the same hairline. The block pads only the bottom, and dropping the last
   row's border left that one row measuring differently from the other two. */
.biota-checkout .wc-block-components-order-summary-item {
	border-bottom: 1px solid #e6e9ee !important;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
/* This is a flex container carrying gap:28px and padding-bottom:24px on top of
   the padding the rows already have — so rows two and three sat 42px below the
   line above them against the first row's 14, and "Tambah kupon" was pushed 24px
   clear of the last one. The rows' own 14px is the whole spacing; the coupon's
   13px button padding is its own. (Its padding-top:32px was separately padding
   the gap under the heading out to 46px.)
   Third flex container on this page to do this — check for `gap` before
   reaching for margins here. */
.biota-checkout .wc-block-components-order-summary__content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 0 !important;
	row-gap: 0 !important;
}

/* Each row sits in its own wrapper, so 8px of wrapper padding was landing
   between every pair on top of the rows' own 6px — 24px apart instead of 12.
   The wrappers give up their padding; the group's 8px is carried by the first
   one alone. */
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) .wc-block-components-totals-wrapper {
	padding: 0 !important;
}
/* The group's 8px goes on the block that holds the rows. Not :first-of-type on
   the wrappers — each wrapper is an only child, so every one of them matched and
   the 8px came back between every pair. */
.biota-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
	padding: 8px 0;
	/* The block lays these out with a gap, which sat between every row on top of
	   their own 6px padding. The rows' padding is the whole spacing. */
	gap: 0 !important;
	row-gap: 0 !important;
}
.biota-checkout .wc-block-components-totals-item {
	padding: 6px 0 !important;
	margin: 0 !important;
}
/* The rows carried a 28px line, making each one 40px tall against the design's
   ~31px. */
.biota-checkout .wc-block-components-totals-item,
.biota-checkout .wc-block-components-totals-item__label,
.biota-checkout .wc-block-components-totals-item__value {
	line-height: 1.45 !important;
}
/* padding-bottom 0: the row's own 6px was stacking on the panel's 18px, leaving
   24px under the Total against the 18px above the heading. */
.biota-checkout .wc-block-components-totals-footer-item {
	padding: 12px 0 0 !important;
}
/* The Total line is the design's 14px label against a 19px figure. It needs to
   out-rank the 13px that every other totals row carries. */
.biota-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 14px !important;
}
.biota-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 19px !important;
}

/* The struck courier price on the summary's shipping line. Unlike the courier
   list — where the cheapest option always shows it — this row follows whichever
   courier is SELECTED, so it only appears when that is the free one. */
.biota-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
}
.biota-checkout.is-free-selected .wc-block-components-totals-shipping .wc-block-components-totals-item__value::before {
	content: var(--biota-free-orig);
	font-weight: 400;
	color: #8a93a0;
	text-decoration: line-through;
}
/* Same green as the courier list, so "GRATIS" reads as one idea in both places. */
.biota-checkout.is-free-selected .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong,
.biota-checkout.is-free-selected .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	color: #0f7a42;
}

/* --- coupon panel ---
   The design frames it with a hairline above and below and opens 13px clear of
   the items; the block ships it unframed and flush. */
/* Border-bottom only: the last product row already closes with its own
   hairline, so a border-top here made two lines with a gap between them. */
.biota-checkout :is( .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper ) .wc-block-components-panel {
	border-bottom: 1px solid #e6e9ee;
	margin-top: 0;
}
/* The field and its button: the block gives the input a floating label box and
   the button its full navy pill, which is far heavier than the design's quiet
   pair. */
/* The block stacks these in a column in the sidebar; the design has the field
   and its button on one line. */
.biota-checkout .wc-block-components-totals-coupon__form {
	display: flex;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 7px !important;
}
.biota-checkout .wc-block-components-totals-coupon__input {
	flex: 1 1 auto !important;
	min-width: 0;
	margin: 0;
}
/* 13px of clearance under the field, so it sits between the accordion label and
   the rule rather than resting on it. */
.biota-checkout .wc-block-components-panel__content {
	padding-bottom: 13px;
}
.biota-checkout .wc-block-components-totals-coupon__input input {
	padding: 9px 11px !important;
	font-size: 12.5px !important;
	border-width: 1.5px !important;
	height: auto;
}
.biota-checkout .wc-block-components-totals-coupon__input label {
	font-size: 12.5px !important;
	top: 50% !important;
	transform: translateY( -50% ) !important;
}
.biota-checkout .wc-block-components-totals-coupon__input.is-active label {
	display: none;
}
.biota-checkout .wc-block-components-totals-coupon__button {
	flex: none;
	padding: 9px 15px !important;
	font-size: 12.5px !important;
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 500 !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	color: #444444 !important;
	border: 1.5px solid #d5d9e0 !important;
	min-height: 0;
}
.biota-checkout .wc-block-components-panel__button,
.biota-checkout .wc-block-components-checkout-order-summary__title {
	font-size: 13px !important;
}
/* The toggle carried a 24px line inside a 13px/13px padding box, which both
   made the row 50px tall and dropped the label below the centre of it. */
.biota-checkout .wc-block-components-panel__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1.4 !important;
	/* The button also carries a 16px bottom margin, which sat under its own 13px
	   of padding and pushed the coupon field 29px below the label. In the HTML
	   the button's padding is the entire gap. */
	margin-bottom: 0 !important;
}
.biota-checkout .wc-block-components-totals-item__value {
	white-space: nowrap;
}
.biota-checkout .wc-block-components-totals-footer-item {
	border-top: 1px solid #e6e9ee;
	padding-top: 12px;
}
.biota-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
}
.biota-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	font-size: 19px;
	color: #102C57;
}
/* The block prints the line total again in a right-hand column, beside the
   unit price already shown under the name — and hangs its "Save Rp456.000"
   badge off it. The design carries one price per line, and states discounts as
   a percentage everywhere else, so the whole column goes. The struck original
   next to the current price still says there is a discount; the exact
   percentage needs the React layer (see README gotcha 3e). */
.biota-checkout .wc-block-components-order-summary-item__total-price {
	display: none;
}
.biota-checkout .wc-block-components-order-summary-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding-bottom: 14px;
}
.biota-checkout .wc-block-components-order-summary-item__image {
	flex: none;
	width: 62px;
}
.biota-checkout .wc-block-components-order-summary-item__description {
	flex: 1;
	min-width: 0;
}
.biota-checkout .wc-block-components-product-name {
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 3px;
}
/* The quantity bubble ships as white text on a transparent ground — invisible
   against the summary panel. The design puts it on the image as a navy disc. */
.biota-checkout .wc-block-components-order-summary-item__image {
	position: relative;
}
.biota-checkout .wc-block-components-order-summary-item__image,
.biota-checkout .wc-block-components-order-summary-item__image img {
	width: 62px !important;
	height: 62px !important;
}
.biota-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 10px !important;
	display: block;
	object-fit: cover;
}
.biota-checkout .wc-block-components-order-summary-item__quantity {
	position: absolute;
	/* Centre the bubble on the image's top-right corner. Pinning it with a
	   negative offset instead ties the result to the bubble's own size — at 19px
	   its centre landed several pixels off the corner. translate(50%, -50%)
	   from the corner is size-independent. */
	top: 0;
	right: 0;
	transform: translate( 50%, -50% );
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #102C57 !important;
	border: none;
	color: #ffffff !important;
	font-size: 10.5px !important;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}
.biota-checkout .wc-block-components-product-metadata {
	font-size: 10.5px !important;
	color: #5f6570;
	line-height: 1.5;
}
/* The block sets the summary price at 18px, larger than the 13px product name
   above it, so the line reads price-first. The design has the name lead at 13px
   with the price a step below it at 14px. */
.biota-checkout .wc-block-components-order-summary-item .wc-block-components-product-price,
.biota-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__value,
.biota-checkout .wc-block-components-order-summary-item ins {
	font-size: 14px !important;
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	color: #102C57;
}
.biota-checkout .wc-block-components-order-summary-item del,
.biota-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__regular {
	font-size: 11px !important;
	font-weight: 400;
	color: #8a93a0;
}
.biota-checkout .wc-block-components-product-name {
	line-height: 1.3 !important;
}
/* The prices sit on their own line under the name in the design, not stacked
   with a blank line between them. */
/* The prices container itself renders at 18px, which re-inflates the prices
   inside it however they are styled. */
.biota-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices {
	margin: 0 0 5px;
	font-size: 14px !important;
	line-height: 1.4;
}
/* The design reads price, then the struck original, then a % badge. The block
   emits <del> BEFORE <ins>, so the row is reordered rather than re-marked-up. */
.biota-checkout .wc-block-components-order-summary-item .wc-block-components-product-price {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	/* The block leaves this line at 28px, which alone pushed the text column
	   nearly 7px past the 62px image beside it. */
	line-height: 1.4 !important;
}
/* The three lines together should stand exactly as tall as the image card, so
   the row reads as one block rather than text floating beside a picture. The
   design's own rhythm lands at ~60px; the min-height closes the last couple of
   pixels and holds the alignment for lines with no variant, which are shorter
   still. */
.biota-checkout .wc-block-components-order-summary-item__description {
	min-height: 62px;
}
.biota-checkout .wc-block-components-product-metadata {
	line-height: 1.5 !important;
}
.biota-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__regular {
	order: 2;
}
/* The percentage. WooCommerce's own badge states a rupiah saving ("Save
   Rp456.000"), and the flow uses one discount format everywhere — a percentage.
   checkout.js computes it per line from the Store API prices and sets it here;
   with no discount the property is unset, `content` is invalid and nothing
   renders. */
.biota-checkout .wc-block-components-order-summary-item .wc-block-components-product-price::after {
	content: var(--biota-off);
	order: 3;
	font-size: 10px;
	font-weight: 700;
	color: #b82c25;
	background: #fdecec;
	padding: 2px 6px;
	border-radius: 5px;
	white-space: nowrap;
	line-height: 1.4;
}
.biota-checkout .wc-block-components-product-price__regular,
.biota-checkout del {
	color: #8a93a0;
	white-space: nowrap;
}
.biota-checkout .wc-block-components-product-price__value.is-discounted,
.biota-checkout .wc-block-components-product-price ins {
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	color: #102C57;
	text-decoration: none;
}
.biota-checkout .wc-block-components-panel__button {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
	padding: 13px 0;
}

/* Trust strip under the summary. Same pseudo-element compromise as the
   shipping note above. */
.biota-checkout .wc-block-checkout__sidebar::after {
	content: '✓ Garansi resmi 2 tahun\A ✓ CS 24/7 via WhatsApp';
	white-space: pre-line;
	display: block;
	margin-top: 12px;
	font-size: 11.5px;
	line-height: 2;
	color: #555;
}

/* The total beside the mobile CTA. Placed in the actions row by checkout.js;
   hidden until the row becomes the bar. */
.biota-buybar__total {
	display: none;
}
.biota-buybar__total span {
	display: block;
	font-size: 10px;
	color: #5f6570;
	line-height: 1.4;
}
.biota-buybar__total b {
	display: block;
	font-family: var(--wp--preset--font-family--heading, 'Poppins', sans-serif);
	font-weight: 600;
	font-size: 16px;
	color: #102C57;
	line-height: 1.3;
	white-space: nowrap;
}

/* --- mobile --- */
@media (max-width: 860px) {
	.biota-checkout {
		--biota-co-pad: 20px;
	}
	.biota-checkout__h {
		font-size: 22px;
	}
	/* !important because the desktop rule needs it to beat the block, and would
	   otherwise win here too. */
	.biota-checkout .wc-block-components-checkout-step__title {
		font-size: 16px !important;
	}
	/* Summary first: what am I paying for, before how I pay for it. */
	.biota-checkout .wc-block-components-sidebar-layout {
		display: flex;
		flex-direction: column;
	}
	/* The desktop rule gives these flex: 1.45 / 1 with a zero basis. In a column
	   that basis applies to HEIGHT, so the two columns were being sized by ratio
	   down the page instead of by their content. Hand the sizing back. */
	.biota-checkout .wc-block-checkout__main,
	.biota-checkout .wc-block-checkout__sidebar {
		flex: 0 0 auto;
		width: 100%;
	}
	.biota-checkout .wc-block-checkout__sidebar {
		order: -1;
		position: static;
		margin-bottom: 20px;
	}
	/* The design puts a sticky bar at the bottom carrying the CTA. Rather than
	   render a second Buat Pesanan button — two identical CTAs is exactly what
	   the design warns against — the block's own actions row is made sticky, so
	   there is still only one button and it is always reachable.
	   The bar's total is not here: that needs the React layer (gotcha 3e). */
	/* On mobile WooCommerce PORTALS the summary's contents into a fill inside the
	   actions block, leaving the sidebar holding only a collapsed header. Hiding
	   the fill therefore strands the items, coupon and totals — which is exactly
	   what the design's own note warns about. So the sidebar is hidden instead
	   and the actions block, which now carries the real summary, is ordered to
	   the top of the form. Reordering rather than moving the node: it is
	   React-owned, and re-parenting it risks breaking reconciliation on unmount. */
	.biota-checkout .wc-block-checkout__sidebar {
		display: none;
	}
	.biota-checkout .wc-block-checkout__form {
		display: flex;
		flex-direction: column;
	}
	/* display:contents dissolves the actions block so its two children become
	   direct items of the form and can be ordered independently: the summary to
	   the top, the actions row left where it is — directly under the terms
	   paragraph, which is where the design puts the back link. Ordering the
	   whole block instead would have dragged the back link to the top with it. */
	.biota-checkout .wc-block-checkout__actions {
		display: contents;
	}
	/* An unstyled emotion wrapper holds the summary. It is the one box here that
	   is not the grey panel, so it plays the part the sidebar plays on desktop:
	   it takes the ordering and carries the trust strip on white below the
	   panel. */
	.biota-checkout
		.wc-block-checkout__actions
		> div:has( > .checkout-order-summary-block-fill-wrapper ) {
		order: -1;
		margin-bottom: 30px;
	}
	/* Mobile renders the summary heading as a checkout *step* heading, desktop as
	   the summary's own title. Match the desktop one: 19px, and the wrapper's
	   margin is the whole gap (the h2 carries 16px of its own on top of it). */
	.biota-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__title {
		font-size: 19px !important;
		letter-spacing: -0.02em;
		margin: 0 !important;
	}
	.biota-checkout .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading {
		margin-bottom: 6px !important;
	}
	/* The trust strip rides with the summary, since the sidebar that normally
	   carries it is hidden here. Tight to the panel above it, generous before
	   the first form heading below. */
	.biota-checkout
		.wc-block-checkout__actions
		> div:has( > .checkout-order-summary-block-fill-wrapper )::after {
		content: '✓ Garansi resmi 2 tahun\A ✓ CS 24/7 via WhatsApp';
		white-space: pre-line;
		display: block;
		margin-top: 10px;
		font-size: 11.5px;
		line-height: 2;
		color: #555;
	}

	/* The bar is the actions ROW itself, not a second element and not the
	   actions block (which wraps that duplicate summary — making the block
	   sticky turned a 600px panel into the "bar"). The row wraps onto two
	   lines: the back link on its own, then the total and the button beneath
	   it, and the whole thing sticks. */
	.biota-checkout .wc-block-checkout__actions {
		position: static;
		background: none;
		border-top: none;
		margin: 0;
		padding: 0;
	}
	/* The row itself stays in the flow, carrying only the back link. The total
	   and the button are lifted out of it into a fixed bar. They are pinned
	   individually rather than wrapped, because wrapping would mean moving
	   React-owned nodes into a new parent. The bar's chrome is a fixed
	   pseudo-element behind them. */
	.biota-checkout .wc-block-checkout__actions_row {
		position: static;
		display: block;
		background: none;
		border-top: none;
		padding: 0;
	}
	.biota-checkout .wc-block-components-checkout-return-to-cart-button {
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.biota-checkout .wc-block-checkout__actions_row::after {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 66px;
		background: rgba(255, 255, 255, 0.97);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid #eef0f3;
		z-index: 29;
	}
	.biota-checkout .biota-buybar__total {
		display: block;
		position: fixed;
		left: var(--biota-co-pad);
		bottom: 11px;
		width: 104px;
		z-index: 30;
	}
	.biota-checkout .wc-block-components-checkout-place-order-button {
		position: fixed;
		bottom: 11px;
		right: var(--biota-co-pad);
		/* clears the total's slot plus its gap */
		left: calc(var(--biota-co-pad) + 115px);
		z-index: 30;
		padding: 0 !important;
		height: 44px !important;
		font-size: 14px !important;
	}
	/* Clear the fixed bar (66px) plus 20px of air. The two blocks below carry
	   44px of bottom padding each — 88px that read as a hole between the back
	   link and the bar — so the clearance is stated once, here. */
	.biota-checkout .wp-block-woocommerce-checkout,
	.biota-checkout .wc-block-checkout {
		padding-bottom: 0;
	}
	.biota-checkout {
		padding-bottom: 86px;
	}
	.biota-checkout .wc-block-components-checkout-place-order-button {
		flex: 1;
		padding: 0;
		height: 44px;
		font-size: 14px;
	}
}

/* --- payment logos ---------------------------------------------------------
   The brand SVGs carry their own #F1F5F9 plate and border radius, so the chip
   wrapper drops the background, border and padding it uses for text pills —
   otherwise every logo sits in a plate inside a plate.

   24px is the whole set's common denominator: the artwork is drawn 36px tall
   (Mastercard's 24px), and at 24px every plate's corner radius resolves to 5px.
   Height only, width auto: the logos are different widths on purpose. */
.biota-pay--logo {
	padding: 0;
	border: 0;
	background: none;
	display: inline-flex;
	line-height: 0;
}
.biota-pay--logo img {
	display: block;
	height: 24px;
	width: auto;
}
/* The note that follows the QRIS logo — "Semua e-wallet & m-banking". */
.biota-pay-accepted__note {
	align-self: center;
	font-size: 11.5px;
	color: #5f6570;
}

/* --- empty-field label -----------------------------------------------------
   Last in the file on purpose. The same declarations earlier in the cascade
   lost `top` to something downstream while its siblings applied, so the rule
   that has to win is the one nothing follows.

   At rest the label IS the placeholder and belongs on the input's own text
   line. It used to inherit the floated state's `top: 9px` inset, which put it
   near the top of a 50px box. Stretching it edge to edge and centring holds
   regardless of the label's font-size or the input's height. */
.biota-checkout .wc-block-components-text-input:not( .is-active ) label,
.biota-checkout .wc-block-components-combobox:not( .is-active ) label {
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	transform: none !important;
	display: flex;
	align-items: center;
	font-size: 13.5px !important;
	line-height: 1.3;
}

/* Xendit prints its own strip of method logos under the gateway row. The
   "Metode yang diterima" panel directly below says the same thing in the
   site's own logos and groups it by type, so the plugin's copy is noise. */
.biota-checkout .wc-block-checkout__payment-method img[ src*="logo-payment" ] {
	display: none;
}