@charset "UTF-8";

/**
 * Checkout v2 — distraction-free cart / checkout / thank-you flow.
 *
 * One split-screen shell shared by all three steps: a white content column on
 * the left and a sticky dark summary rail on the right. No site header, no site
 * footer — header-checkout.php / footer-checkout.php render the bare shell.
 *
 * Values are lifted 1:1 from the design mockups (Bionela kosik/pokladna/dakovna)
 * and expressed against tokens.css, whose palette already matches them.
 *
 * @package Bionela_New
 */

.bcv2 {
	--bcv2-ink: var(--dark-1);          /* #0a201e — headings + aside bg */
	--bcv2-body: #1c2624;
	--bcv2-muted: #6b7975;
	--bcv2-muted-2: #7d8b88;
	--bcv2-muted-3: #8b9997;
	--bcv2-line: #dfe5e3;
	--bcv2-line-soft: #eef1f0;
	--bcv2-line-tile: #e6eae9;
	--bcv2-surface: #f6f8f7;
	--bcv2-surface-2: #f3f6f5;
	--bcv2-accent: var(--green);        /* #6cbf3f */
	--bcv2-accent-dark: var(--green-600);
	--bcv2-teal: var(--teal);
	--bcv2-ok: #1c7c4a;
	--bcv2-on-dark: #cfe0dd;
	--bcv2-on-dark-2: #e8f0ee;
	--bcv2-on-dark-3: #b9cbc8;
	--bcv2-danger: #c2453d;
	--bcv2-locknote: #3b2314;   /* Locked-field explanatory note colour. */

	/* Width reserved for the dark summary rail. One knob — change it here and
	   both the cart and the checkout follow. Keep the stacking breakpoint below
	   in step with it: side-by-side needs --bcv2-aside-w + the main column's
	   520px flex basis. */
	--bcv2-aside-w: 470px;
	--bcv2-aside-pad: clamp(20px, 2vw, 28px);

	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--bcv2-body);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/*
 * [hidden] must actually hide. Every author `display` below (flex/grid) beats
 * the UA stylesheet's [hidden] { display: none }, which is why a full cart used
 * to show the "Váš košík je prázdny" panel and both checkout buttons at once.
 */
.bcv2 [hidden] {
	display: none !important;
}

/*
 * Link colour is set per component, never on bare `a`.
 *
 * `.bcv2 a { color: … }` is (0,1,1) and the body carries `.bcv2`, so it reached
 * INTO shared components that only defend themselves with a single class — the
 * quickview modal's `.vm-wbtn` "Prihlásiť sa" (0,1,0) lost its white and came
 * out teal-on-teal. The modal renders from wp_footer(), outside .bcv2-split, so
 * scoping alone would not have been enough either. Only genuine inline links —
 * the ones inside prose this flow actually writes — get a colour here.
 */
.bcv2-notices a,
.bcv2-tile__desc a,
.bcv2-pay__desc a,
.bcv2-field__hint a {
	color: var(--bcv2-teal);
}

/*
 * Underline removal is safe to apply broadly (it changes no colour) but is
 * still kept inside .bcv2-split so the footer-rendered modal keeps its own
 * behaviour. Most links in the flow are product names and buttons, where an
 * underline reads as a glitch; real inline links opt back in below.
 */
.bcv2-split a,
.bcv2-split a:hover {
	text-decoration: none;
}

.bcv2-split .bcv2-terms a,
.bcv2-split .bcv2-terms a:hover,
.bcv2-split .bcv2-privacy a,
.bcv2-split .bcv2-privacy a:hover,
.bcv2-split .bcv2-field__hint a:hover,
.bcv2-split .bcv2-notices a:hover {
	text-decoration: underline;
}

/*
 * Font normalisation for THIS flow's own controls only.
 *
 * It used to be `.bcv2 input, .bcv2 button, … { font: inherit; color: inherit }`,
 * which at (0,1,1) quietly outranked every single-class component rule that
 * happens to render inside the flow — the quickview modal's `.vm-add` /
 * `.vm-step` (0,1,0) lost their white-on-teal and came out unreadable. Never
 * style bare elements here: the cross-sell carousel and the quickview modal are
 * shared components and this page does not own them.
 */
.bcv2-field input,
.bcv2-field select,
.bcv2 textarea.bcv2-note,
.bcv2-coupon__input,
.bcv2-coupon__submit,
.bcv2-qty__btn,
.bcv2-line__remove {
	font-family: var(--font-body);
}

/* Admin bar would otherwise overlap the sticky rail. */
.bcv2.admin-bar .bcv2-aside__inner {
	top: 32px;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.bcv2-shell {
	display: block;
}

.bcv2-split {
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #fff;
}

.bcv2-main {
	flex: 1 1 520px;
	min-width: 0;
	padding: 0 0 48px;
}

.bcv2-main__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 clamp(16px, 2.2vw, 24px);
}

/* The rail summarises; it never grows past its reserved width, and wraps under
   the content once the viewport can no longer seat both columns. */
.bcv2-aside {
	flex: 0 1 var(--bcv2-aside-w);
	min-width: 0;
	background: var(--bcv2-ink);
	color: #fff;
}

.bcv2-aside__inner {
	position: sticky;
	top: 0;
	padding: 28px var(--bcv2-aside-pad) 34px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Plain links on the dark rail are green; buttons are not. The exclusion is
   belt-and-braces — `.bcv2 .bcv2-cta` already outranks this — but it keeps
   green-on-green from coming back if that selector is ever weakened. */
.bcv2-aside a:not(.bcv2-cta) {
	color: var(--bcv2-accent);
}

/* ==========================================================================
   Minimal page header (logo + one way back)
   ========================================================================== */

.bcv2-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 0 0;
}

.bcv2-head__logo {
	display: flex;
	align-items: center;
}

.bcv2-head__logo img {
	display: block;
	height: 34px;
	width: auto;
}

.bcv2-head__back {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bcv2-muted);
}

.bcv2-head__back:hover {
	color: var(--bcv2-ink);
	text-decoration: none;
}

.bcv2-head__back svg {
	flex: 0 0 auto;
}

/* ==========================================================================
   Page title block
   ========================================================================== */

.bcv2-title {
	padding: 30px 0 4px;
}

.bcv2-title__step {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bcv2-accent);
}

.bcv2-title__step::before {
	content: "";
	width: 20px;
	height: 2px;
	background: var(--bcv2-accent);
}

.bcv2-title__h1 {
	margin: 10px 0 0;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--bcv2-ink);
}

.bcv2-title__lede {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--bcv2-muted);
	text-wrap: pretty;
}

.bcv2--thankyou .bcv2-title__lede {
	font-size: 15px;
	color: #46544f;
	margin-top: 10px;
}

@media (max-width: 640px) {
	.bcv2-title__h1 {
		font-size: 26px;
	}
}

/* ==========================================================================
   Cart lines
   ========================================================================== */

/*
 * Two products per row at the 900px measure — a single column of full-width
 * cards leaves most of the line empty and turns a five-item cart into a lot of
 * scrolling. Drops to one column on its own once a card cannot hold 320px.
 */
.bcv2-lines {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	align-items: start;
	gap: 10px;
	padding-top: 20px;
}

/*
 * Separation comes from the card, not from rules: a stack of full-width lines
 * reads as a table, and the surrounding page has no other horizontal rules.
 */
.bcv2-line {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 0 14px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--bcv2-line-soft);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bcv2-line:hover {
	border-color: var(--bcv2-line);
	box-shadow: 0 2px 10px -6px rgba(10, 32, 30, .25);
}

.bcv2-line.is-busy {
	opacity: .5;
	pointer-events: none;
}

.bcv2-line__media {
	grid-row: span 2;
}

.bcv2-line__media img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 10px;
	background: var(--bcv2-surface);
}

.bcv2-line__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.bcv2-line__id {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bcv2-line__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bcv2-ink);
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.bcv2-line__name:hover {
	color: var(--bcv2-teal);
	text-decoration: none;
}

.bcv2-line__meta {
	font-size: 12px;
	color: var(--bcv2-muted-2);
}

.bcv2-line__data {
	font-size: 12.5px;
	color: var(--bcv2-muted-2);
}

.bcv2-line__data dl,
.bcv2-line__data ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.bcv2-line__data dt,
.bcv2-line__data dd {
	display: inline;
	margin: 0;
}

.bcv2-line__data p {
	margin: 0;
}

.bcv2-line__remove {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 15px;
	line-height: 1;
	color: var(--bcv2-muted-3);
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-decoration: none;
}

.bcv2-line__remove:hover {
	background: var(--bcv2-surface-2);
	color: var(--bcv2-danger);
	text-decoration: none;
}

.bcv2-line__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 8px;
}

.bcv2-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--bcv2-line);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.bcv2-qty__btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: 15px;
	color: var(--bcv2-ink);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.bcv2-qty__btn:hover:not(:disabled) {
	background: var(--bcv2-surface-2);
}

.bcv2-qty__btn:disabled {
	color: #c2cdcb;
	cursor: not-allowed;
}

.bcv2-qty__val {
	min-width: 28px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--bcv2-ink);
}

.bcv2-line__money {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.bcv2-line__stock {
	font-size: 12px;
	color: var(--bcv2-muted-2);
}

.bcv2-line__total {
	font-size: 15px;
	font-weight: 700;
	color: var(--bcv2-ink);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.bcv2-line {
		grid-template-columns: 52px 1fr;
		gap: 0 10px;
		padding: 10px 12px;
	}

	.bcv2-line__media img {
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================================
   Coupon
   ========================================================================== */

.bcv2-coupon {
	padding-top: 14px;
}

.bcv2-coupon__toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bcv2-ink);
	background: #fff;
	border: 1.5px solid var(--bcv2-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.bcv2-coupon__toggle:hover {
	border-color: var(--bcv2-ink);
}

.bcv2-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bcv2-coupon__input {
	flex: 1 1 160px;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px 12px;
	font-size: 13.5px;
	background: #fff;
	border: 1.5px solid var(--bcv2-line);
	border-radius: 9px;
}

.bcv2-coupon__submit {
	flex: 0 0 auto;
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background: var(--bcv2-ink);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}

.bcv2-coupon__submit:hover {
	background: var(--bcv2-teal);
}

.bcv2-coupon__applied {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.bcv2-coupon__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bcv2-ink);
	background: var(--bcv2-surface);
	border-radius: var(--radius-pill);
}

.bcv2-coupon__chip a {
	color: var(--bcv2-muted-3);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

/* ==========================================================================
   Empty cart
   ========================================================================== */

.bcv2-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	padding: 28px 24px;
	background: var(--bcv2-surface);
	border-radius: 14px;
}

.bcv2-empty__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--bcv2-teal);
}

.bcv2-empty__icon svg {
	width: 20px;
	height: 20px;
}

.bcv2-empty__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--bcv2-ink);
}

.bcv2-empty__cta {
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bcv2-ink);
	background: var(--bcv2-accent);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	text-decoration: none;
}

.bcv2-empty__cta:hover {
	background: var(--bcv2-accent-dark);
	color: var(--bcv2-ink);
	text-decoration: none;
}

/* ==========================================================================
   Summary rail (shared by all three steps)
   ========================================================================== */

.bcv2-sum__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.bcv2-sum__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bcv2-sum__edit {
	font-size: 14px;
	font-weight: 600;
	color: var(--bcv2-accent);
}

.bcv2-sum__rows {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.bcv2-sum__rows--bordered {
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.bcv2-sum__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.bcv2-sum__label {
	font-size: 14px;
	line-height: 1.35;
	color: var(--bcv2-on-dark);
	min-width: 0;
}

.bcv2-sum__val {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.bcv2-sum__val--muted {
	color: var(--bcv2-on-dark);
	font-weight: 600;
}

.bcv2-sum__total {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.bcv2-sum__total--bordered {
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.bcv2-sum__total-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bcv2-sum__total-label b {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.bcv2-sum__total-label span {
	font-size: 14px;
	line-height: 1.4;
	color: var(--bcv2-on-dark);
}

.bcv2-sum__total-amount {
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--bcv2-accent);
	white-space: nowrap;
}

/* Compact product strip in the checkout rail. */
.bcv2-sum__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.bcv2-sum__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bcv2-sum__thumb {
	position: relative;
	display: block;
	flex: 0 0 auto;
}

.bcv2-sum__thumb img {
	display: block;
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: 9px;
	background: #fff;
}

.bcv2-sum__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	display: grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--bcv2-accent);
	color: var(--bcv2-ink);
	font-size: 11px;
	font-weight: 700;
}

.bcv2-sum__item-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
	text-wrap: pretty;
}

.bcv2-sum__item-price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	text-align: right;
}

.bcv2-sum__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bcv2-sum__note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bcv2-on-dark-3);
}

.bcv2-sum__note svg {
	flex: 0 0 auto;
	margin-top: 1px;
}

/*
 * Primary CTA on the dark rail.
 *
 * Every selector here is prefixed with `.bcv2` on purpose. The CTA renders as
 * three different elements — <a> in the cart, <button> for #place_order, <span>
 * when disabled — and two generic rules above it are element-qualified, so they
 * outrank an unprefixed `.bcv2-cta`:
 *
 *   .bcv2 a                       (0,1,1)  → painted the cart CTA teal
 *   .bcv2 button { font: inherit; color: inherit }
 *                                 (0,1,1)  → made #place_order white and 400
 *
 * `.bcv2 .bcv2-cta` is (0,2,0) and wins over both. Do not drop the prefix.
 */
.bcv2 .bcv2-cta {
	width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	text-align: center;
	color: var(--bcv2-ink);
	background: var(--bcv2-accent);
	border: 1.5px solid var(--bcv2-accent);
	border-radius: 11px;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

.bcv2 .bcv2-cta svg {
	flex: 0 0 auto;
}

/* Hover/active belong to the enabled button only — the disabled twin used to
   light up green on hover and read as clickable. */
.bcv2 .bcv2-cta:hover:not([disabled]):not(.is-disabled) {
	background: var(--bcv2-accent-dark);
	border-color: var(--bcv2-accent-dark);
	color: var(--bcv2-ink);
	text-decoration: none;
}

.bcv2 .bcv2-cta:active:not([disabled]):not(.is-disabled) {
	transform: translateY(1px);
}

.bcv2 .bcv2-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bcv2 .bcv2-cta[disabled],
.bcv2 .bcv2-cta.is-disabled {
	color: #7f9995;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	cursor: not-allowed;
	pointer-events: none;
}

.bcv2 .bcv2-cta--ghost {
	padding: 11px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
}

.bcv2 .bcv2-cta--ghost:hover:not([disabled]):not(.is-disabled) {
	background: transparent;
	border-color: var(--bcv2-accent);
	color: var(--bcv2-accent);
}

/* Trust list at the bottom of the rail. */
.bcv2-trust {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.bcv2-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--bcv2-on-dark-2);
}

.bcv2-trust__item svg {
	margin-top: 2px;
}

.bcv2-trust__item svg {
	flex: 0 0 auto;
}

/* ==========================================================================
   Checkout — numbered sections
   ========================================================================== */

.bcv2-steps {
	display: flex;
	flex-direction: column;
	padding-top: 24px;
}

.bcv2-step {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 0 12px;
	padding-bottom: 22px;
}

.bcv2-step:last-child {
	padding-bottom: 0;
}


.bcv2-step__rail {
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bcv2-step__num {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-pill);
	background: var(--bcv2-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.bcv2-step__line {
	flex: 1 1 auto;
	width: 2px;
	background: var(--bcv2-line-soft);
}

.bcv2-step__title {
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bcv2-ink);
}

.bcv2-step__body {
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (max-width: 480px) {
	.bcv2-step {
		grid-template-columns: 24px 1fr;
		gap: 0 10px;
	}
}

/* ==========================================================================
   Checkout — form fields (underline style)
   ========================================================================== */

/*
 * Two columns, fixed. auto-fit would fan out to four at the 900px measure and
 * line up "Krstné meno / Priezvisko / Mesto / PSČ+Telefón" in a single row that
 * reads as a spreadsheet rather than an address.
 */
.bcv2-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

@media (max-width: 520px) {
	.bcv2-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bcv2-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bcv2-field--wide {
	grid-column: 1 / -1;
}

/* PSČ + telefón share one grid cell so they stay paired at every width. */
.bcv2-field-pair {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 16px;
	min-width: 0;
}

.bcv2-field label,
.bcv2-field .bcv2-field__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bcv2-muted-2);
}

.bcv2-field input[type="text"],
.bcv2-field input[type="email"],
.bcv2-field input[type="tel"],
.bcv2-field input[type="number"],
.bcv2-field input[type="password"],
.bcv2-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 0;
	font-size: 14px;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--bcv2-line);
	border-radius: 0;
	transition: border-color .15s ease;
	appearance: none;
}

.bcv2-field input:focus,
.bcv2-field select:focus,
.bcv2 textarea:focus {
	outline: none;
	border-color: var(--bcv2-teal);
	box-shadow: 0 0 0 3px rgba(14, 85, 81, .12);
}

.bcv2-field__hint {
	font-size: 11.5px;
	color: var(--bcv2-muted-2);
	line-height: 1.4;
}

.bcv2-field.is-invalid input {
	border-color: var(--bcv2-danger);
}

.bcv2-field__error {
	font-size: 12.5px;
	color: var(--bcv2-danger);
}

/* Panels revealed by the chips (shipping address / company / note). */
.bcv2-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px 14px;
	background: var(--bcv2-surface);
	border-radius: 10px;
}

.bcv2-panel__title {
	grid-column: 1 / -1;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bcv2-teal);
}

.bcv2-panel .bcv2-field label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bcv2-muted-3);
}

.bcv2-panel .bcv2-field input {
	padding: 5px 0;
	font-size: 13.5px;
}

.bcv2 textarea.bcv2-note {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 13.5px;
	background: var(--bcv2-surface);
	border: 0;
	border-radius: 10px;
	min-height: 64px;
	resize: vertical;
}

@media (max-width: 480px) {
	.bcv2-panel {
		grid-template-columns: 1fr;
	}

	.bcv2-field-pair {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Checkout — chips
   ========================================================================== */

/*
 * The three chips must sit on one line on desktop AND tablet. They stay on one
 * row and scroll rather than wrapping; below the phone breakpoint they wrap,
 * where a horizontal scroller would be worse than two rows.
 */
.bcv2-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	padding-top: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bcv2-chips::-webkit-scrollbar {
	display: none;
}

.bcv2-chips > span {
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.bcv2-chips {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* The chip is a label for a visually hidden checkbox, so it toggles with no JS
   and WooCommerce core can still read #ship-to-different-address input. */
.bcv2-chip__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bcv2-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--bcv2-ink);
	background: #fff;
	border: 1.5px solid var(--bcv2-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all .15s ease;
}

.bcv2-chip__mark {
	font-size: 13px;
	line-height: 1;
}

/* Unicode escapes, not literal glyphs: the server serves this file as
   `text/css` with no charset, so a raw U+2212 MINUS is decoded as latin-1 and
   renders as "−". An escape is encoding-proof. */
.bcv2-chip__mark::before {
	content: "\002B"; /* + */
}

.bcv2-chip__input:checked + .bcv2-chip {
	color: #fff;
	background: var(--bcv2-ink);
	border-color: var(--bcv2-ink);
}

.bcv2-chip__input:checked + .bcv2-chip .bcv2-chip__mark::before {
	content: "\2212"; /* − */
}

.bcv2-chip__input:focus-visible + .bcv2-chip {
	box-shadow: 0 0 0 3px rgba(14, 85, 81, .18);
}

/* ==========================================================================
   Checkout — shipping + payment method tiles
   ========================================================================== */

.bcv2-ship {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px;
}

/* Each tile is an input + label pair; the wrapper is the grid/flex item so the
   `input:checked + label` selector keeps working. */
.bcv2-tile__wrap {
	display: flex;
	min-width: 0;
}

.bcv2-tile__wrap > .bcv2-tile {
	flex: 1 1 auto;
}

.bcv2-pay__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcv2-pay__item {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.bcv2-tile__logo-wrap {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
}

.bcv2-tile__logo-wrap img {
	display: block;
	max-width: 34px;
	max-height: 24px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* The real radio drives state; the label is the tile. */
.bcv2-tile__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bcv2-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px 12px;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--bcv2-line-tile);
	border-radius: 10px;
	cursor: pointer;
	transition: all .15s ease;
}

.bcv2-tile:hover {
	border-color: #c2cdcb;
}

.bcv2-tile__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.bcv2-tile__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--bcv2-surface-2);
	color: var(--bcv2-teal);
}

.bcv2-tile__icon svg {
	width: 16px;
	height: 16px;
}

.bcv2-tile__mark {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border: 2px solid #c2cdcb;
	border-radius: var(--radius-pill);
	flex: 0 0 auto;
}

.bcv2-tile__mark::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--radius-pill);
	background: transparent;
}

.bcv2-tile__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bcv2-ink);
}

.bcv2-tile__money {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.bcv2-tile__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--bcv2-ink);
	white-space: nowrap;
}

.bcv2-tile__price--free {
	color: var(--bcv2-ok);
}

.bcv2-tile__hint {
	font-size: 11.5px;
	color: var(--bcv2-muted-2);
	white-space: nowrap;
}

/* Gateway description on the tile itself. "Platba kartou" alone reads as an
   online card payment; the shop actually means paying the courier on delivery,
   and that only ever lived in the description behind a click. */
.bcv2-tile__desc {
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--bcv2-muted-2);
	text-wrap: pretty;
}

/* Selected state. */
.bcv2-tile__input:checked + .bcv2-tile {
	background: #f2f8f4;
	border-color: var(--bcv2-ink);
}

.bcv2-tile__input:checked + .bcv2-tile .bcv2-tile__icon {
	background: var(--bcv2-ink);
	color: #fff;
}

.bcv2-tile__input:checked + .bcv2-tile .bcv2-tile__mark {
	border-color: var(--bcv2-ink);
}

.bcv2-tile__input:checked + .bcv2-tile .bcv2-tile__mark::after {
	background: var(--bcv2-ink);
}

.bcv2-tile__input:focus-visible + .bcv2-tile {
	box-shadow: 0 0 0 3px rgba(14, 85, 81, .18);
}

/*
 * Payment tiles: icon and radio hold their own columns, the name and its
 * description share the middle one, and the price stays on the first line — so
 * a two-line description never pushes the amount out of alignment.
 */
.bcv2-tile--row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 2px 10px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
}

.bcv2-tile--row .bcv2-tile__name {
	min-width: 0;
}

.bcv2-tile--row .bcv2-tile__desc {
	grid-column: 2 / 4;
}

.bcv2-tile--row .bcv2-tile__price {
	font-size: 13.5px;
	text-align: right;
}

/* Gateway fields (not the description — that renders on the tile). */
.bcv2-pay__desc {
	padding: 8px 12px 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bcv2-muted);
}

.bcv2-pay__desc p:last-child {
	margin-bottom: 0;
}

.bcv2-pay__item {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   Checkout — terms + place order
   ========================================================================== */

.bcv2-terms {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bcv2-on-dark-2);
	cursor: pointer;
}

.bcv2-terms input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--bcv2-accent);
	cursor: pointer;
	flex: 0 0 auto;
	margin: 0;
}

.bcv2-terms a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}

.bcv2-terms.is-invalid {
	color: #ffb4ae;
}

.bcv2-terms__error {
	font-size: 14px;
	line-height: 1.5;
	color: #ffb4ae;
}

.bcv2-terms__error[hidden] {
	display: none;
}

.bcv2-privacy {
	font-size: 14px;
	line-height: 1.45;
	color: var(--bcv2-on-dark-3);
	text-align: center;
	text-wrap: pretty;
}

.bcv2-privacy a {
	color: var(--bcv2-on-dark-2);
	text-decoration: underline;
}

/* ==========================================================================
   Notices
   ========================================================================== */

.bcv2-notices {
	margin: 24px 0 0;
}

.bcv2-notices:empty {
	margin: 0;
}

.bcv2 .woocommerce-error,
.bcv2 .woocommerce-message,
.bcv2 .woocommerce-info,
.bcv2 .woocommerce-NoticeGroup ul {
	margin: 0 0 14px;
	padding: 14px 18px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	background: var(--bcv2-surface);
	border-left: 3px solid var(--bcv2-teal);
	border-radius: 10px;
	color: var(--bcv2-body);
}

.bcv2 .woocommerce-error {
	background: #fdf1f0;
	border-left-color: var(--bcv2-danger);
	color: #8c2f28;
}

.bcv2 .woocommerce-error li,
.bcv2 .woocommerce-message li,
.bcv2 .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce blocks BOTH `.woocommerce-checkout-payment` and
 * `.woocommerce-checkout-review-order-table` while an order-review refresh is in
 * flight (see checkout.js). Here that is the payment tiles in the white column
 * AND the figures block on the dark rail — two very different backgrounds, so
 * any single tint is wrong on one of them: white washed out the rail, dark laid
 * a grey sheet over the payment methods and made the text look dimmed.
 *
 * So: no tint at all. The overlay stays in the DOM, which is what actually
 * matters — it swallows clicks so nothing can be changed mid-recalculation —
 * but it is invisible. `cursor: progress` carries the feedback instead.
 */
.bcv2 .blockUI.blockOverlay,
.bcv2 .blockUI.blockMsg {
	background: none !important;
	background-color: transparent !important;
	opacity: 0 !important;
	border: 0 !important;
	cursor: progress;
}

/* Nothing may dim the blocked content either — WooCommerce does not do this,
   but a stray opacity here is exactly what "the text goes grey" looks like. */
.bcv2 .processing,
.bcv2 .woocommerce-checkout-payment,
.bcv2-sum__figures {
	opacity: 1 !important;
}

.bcv2-sum__figures {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
}

/* ==========================================================================
   Thank you
   ========================================================================== */

.bcv2-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1px;
	margin-top: 20px;
	background: var(--bcv2-line-soft);
	border: 1px solid var(--bcv2-line-soft);
	border-radius: 12px;
	overflow: hidden;
}

.bcv2-fact {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	background: #fff;
}

.bcv2-fact__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bcv2-muted-3);
}

.bcv2-fact__value {
	font-size: 14px;
	font-weight: 700;
	color: var(--bcv2-ink);
}

.bcv2-pay-note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bcv2-muted);
}

.bcv2-details {
	padding-top: 26px;
}

.bcv2-details__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bcv2-ink);
}

/*
 * Order lines on the thank-you page are a receipt, not a shop: nothing here is
 * actionable, so they get no card, no border and no hover — just a thumbnail,
 * a name and an amount, tight enough that a ten-item order stays readable.
 */
.bcv2-orow {
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: center;
	gap: 0 10px;
	margin-top: 0;
	padding: 6px 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.bcv2-orow:first-of-type {
	margin-top: 10px;
}

/* Zebra instead of rules: it groups each row's name with its amount across the
   gap without drawing a single line. nth-of-type, not nth-child — the heading
   above these rows is an <h2> and would throw the count off. */
.bcv2-orow:nth-of-type(even) {
	background: var(--bcv2-surface);
}

.bcv2-orow {
	padding: 6px 10px;
	border-radius: 8px;
}

/* Same framing as the cart thumbnails — the row lost its card, but the image
   still needs an edge or it floats on the white page. */
.bcv2-orow__media img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
	padding: 2px;
	border: 1px solid var(--bcv2-line-soft);
	border-radius: 10px;
	background: var(--bcv2-surface);
}

.bcv2-orow__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/* Quantity sits inline after the name rather than on its own line. */
.bcv2-orow__id {
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 6px;
}

.bcv2-orow__name {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bcv2-body);
	text-wrap: pretty;
}

.bcv2-orow__qty {
	font-size: 12px;
	color: var(--bcv2-muted-2);
	white-space: nowrap;
}

.bcv2-orow__total {
	font-size: 13px;
	font-weight: 600;
	color: var(--bcv2-ink);
	white-space: nowrap;
}

.bcv2-ototals {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 0 0;
}

.bcv2-ototals__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.bcv2-ototals__label {
	font-size: 13px;
	color: var(--bcv2-muted);
}

.bcv2-ototals__val {
	font-size: 13px;
	font-weight: 600;
	color: var(--bcv2-ink);
	white-space: nowrap;
}

.bcv2-ototals__row--grand {
	align-items: flex-start;
	padding-top: 14px;
	border-top: 1px solid var(--bcv2-line-soft);
}

.bcv2-ototals__row--grand .bcv2-ototals__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--bcv2-ink);
}

/* The VAT note belongs under the amount, not next to the label. */
.bcv2-ototals__row--grand .bcv2-ototals__val {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: 18px;
	font-weight: 700;
}

.bcv2-ototals__row--grand .bcv2-ototals__val small {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--bcv2-muted-2);
	white-space: nowrap;
}

.bcv2-addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	padding-top: 22px;
}

.bcv2-address {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--bcv2-surface);
	border-radius: 12px;
}

.bcv2-address__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bcv2-teal);
}

.bcv2-address address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.55;
	color: #46544f;
}

.bcv2-outro {
	padding-top: 18px;
}

.bcv2-outro__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bcv2-ink);
	background: #fff;
	border: 1.5px solid var(--bcv2-line);
	border-radius: var(--radius-pill);
	text-decoration: none;
}

.bcv2-outro__link:hover {
	border-color: var(--bcv2-ink);
	color: var(--bcv2-ink);
	text-decoration: none;
}

/* Thank-you rail. */
.bcv2-done__badge {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-pill);
	background: var(--bcv2-accent);
	color: var(--bcv2-ink);
}

.bcv2-done__badge svg {
	width: 22px;
	height: 22px;
}

.bcv2-done__title {
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: pretty;
}

.bcv2-done__lede {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bcv2-on-dark);
	text-wrap: pretty;
}

.bcv2-next {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.bcv2-next__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.bcv2-next__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.bcv2-next__num {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .1);
	color: var(--bcv2-accent);
	font-size: 11px;
	font-weight: 700;
	flex: 0 0 auto;
}

.bcv2-next__text {
	font-size: 14px;
	line-height: 1.45;
	color: var(--bcv2-on-dark-2);
}

.bcv2-help {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.bcv2-help__label {
	font-size: 14px;
	color: var(--bcv2-on-dark-2);
}

.bcv2-help__phone {
	font-size: 16px;
	font-weight: 700;
	color: var(--bcv2-accent);
	text-decoration: none;
}

.bcv2-help__hours {
	font-size: 14px;
	line-height: 1.4;
	color: var(--bcv2-on-dark-3);
}

/* ==========================================================================
   Mobile — the rail stops being sticky and drops under the content
   ========================================================================== */

/*
 * 1000px = the main column's 520px flex basis + the 470px rail. Below it the
 * two can no longer sit side by side, so the rail takes the full width instead
 * of stranding a 470px block on a row of its own.
 */
@media (max-width: 1000px) {
	.bcv2-aside {
		flex: 1 1 100%;
	}

	.bcv2-aside__inner {
		position: static;
		padding: 22px clamp(16px, 2.2vw, 24px) 26px;
		max-width: 900px;
		margin: 0 auto;
	}

	.bcv2.admin-bar .bcv2-aside__inner {
		top: auto;
	}

	.bcv2-main {
		padding-bottom: 28px;
	}
}

/*
 * Locked fields. The customer changes these in their account, so they read as text
 * rather than as an input the form is waiting on: the underline goes flat and the
 * value is muted. The field stays focusable and clickable — `readonly`/`disabled`
 * already stop edits, so the customer can still select and copy the value, and a
 * screen reader can still reach it. The `--locked` class comes from
 * bionela_bcv2_field(); the disabled <select> is styled through the same class so
 * the locked country matches the locked text fields.
 */
.bcv2-field--locked input,
.bcv2-field--locked select {
	color: var(--bcv2-muted-2);
	border-bottom-style: dotted;
	cursor: default;
}

.bcv2-field--locked input:focus,
.bcv2-field--locked select:focus {
	border-color: var(--bcv2-line);
	box-shadow: none;
}

/*
 * A disabled <select> never dispatches click/focus events - not even to its
 * own ancestors, the dispatch is skipped at the browser's hit-test step, so a
 * listener on `.bcv2-field--locked` in checkout-v2.js would never see a
 * click that lands on the select itself. This takes nothing away from it: a
 * disabled control was already unfocusable and had nothing selectable to
 * copy (unlike the readonly text inputs above, which keep full pointer
 * events on purpose). It only makes the hit test skip the <select> and
 * resolve the click to the wrapper, which is exactly what the popup
 * listens on.
 */
.bcv2-field--locked select {
	pointer-events: none;
}

.bcv2-locknote {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--bcv2-locknote);
}

.bcv2-split .bcv2-locknote a {
	color: var(--bcv2-teal);
}

.bcv2-split .bcv2-locknote a:hover {
	text-decoration: underline;
}

/*
 * Locked-field popup (checkout-v2.js). One reused element, moved to whichever
 * locked field was clicked/focused; its text is copied in from that block's
 * own .bcv2-locknote, so it always matches what is already on the page.
 * `position: absolute` is positioned via JS from getBoundingClientRect() +
 * the page scroll offset, so it needs no positioned ancestor of its own.
 */
.bcv2-lockpopup {
	display: none;
	position: absolute;
	z-index: 20;
	max-width: 260px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--bcv2-line);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(10, 32, 30, .16);
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--bcv2-locknote);
}

.bcv2-lockpopup.is-visible {
	display: block;
}

.bcv2-lockpopup a {
	color: var(--bcv2-teal);
}

.bcv2-lockpopup a:hover {
	text-decoration: underline;
}