/*
 * The cart flow (BC-016, job W5): the card action states, the toast, the drawer, the quick view, the cart page,
 * the empty cart and the stock state. The V2 design (18 Oct) on the tokens only (tokens.css; new values came through
 * the main line, M6). WooCommerce's own CSS styles ".woocommerce a.button", so the shared button rules below carry
 * enough classes to win inside the .woocommerce wrapper.
 */

/* --- Buttons of the cart flow ------------------------------------------------------------------------------------- */
.bc-btn,
.woocommerce .button.bc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: var(--control-height-lg); padding: var(--space-3) var(--space-5);
	border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink-strong);
	font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.3;
	text-align: center; text-decoration: none; cursor: pointer;
}
.bc-btn.bc-btn--primary,
.woocommerce .button.bc-btn.bc-btn--primary { border-color: var(--color-red); background: var(--color-red); color: var(--color-on-red); }
.bc-btn.bc-btn--primary:hover,
.woocommerce .button.bc-btn.bc-btn--primary:hover { border-color: var(--color-red-dark); background: var(--color-red-dark); color: var(--color-on-red); }
.bc-btn.bc-btn--outline,
.woocommerce .button.bc-btn.bc-btn--outline { border-color: var(--color-line); background: var(--color-surface); color: var(--color-ink-strong); }
.bc-btn.bc-btn--outline:hover,
.woocommerce .button.bc-btn.bc-btn--outline:hover { border-color: var(--color-red); background: var(--color-surface); color: var(--color-red); }
.bc-btn.bc-btn--full, .woocommerce .button.bc-btn.bc-btn--full { width: 100%; }
.bc-btn.is-disabled, .woocommerce .button.bc-btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* The card's add (WooCommerce adds "View cart" after an AJAX add; the toast confirms the add instead). */
ul.products li.product-card > a.added_to_cart { display: none; } /* WooCommerce's ".woocommerce a.added_to_cart" needs the extra elements */
ul.products li.product-card > a.button.added::after { content: none; } /* no check mark: the toast confirms the add */

/* --- The toast (V2 screen 03) -------------------------------------------------------------------------------------- */
.bc-toast {
	position: fixed; z-index: var(--z-toast); top: calc(var(--header-height) + var(--space-4)); right: 4%;
	width: min(var(--toast-width), 92vw);
}
.bc-toast[hidden] { display: none; }
/* Desktop and tablet (Owl's review, 22 Oct): 16 px from the screen's right edge, 16 px under the header, and 16 px from
   the top of the screen once the header has scrolled away (cart.js sets --bc-toast-top). Phones keep the place above. */
@media (min-width: 761px) {
	.bc-toast { top: var(--bc-toast-top, calc(var(--header-height) + var(--space-4))); right: var(--space-4); }
}
.bc-toast__panel {
	padding: var(--space-5); border: 1px solid var(--color-line); border-top: var(--rule-weight) solid var(--color-success);
	border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-panel);
}
.bc-toast__head { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.bc-toast__head > .icon { color: var(--color-success); width: var(--icon-sm); height: var(--icon-sm); }
.bc-toast__close {
	display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); margin-left: auto; padding: 0;
	border: 0; border-radius: var(--radius); background: none; color: var(--color-muted); cursor: pointer;
}
.bc-toast__close:hover { background: var(--color-cream); color: var(--color-red); }
.bc-cart-toast-item { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.bc-cart-toast-item:empty { display: none; }
.bc-cart-toast-item__picture { flex: 0 0 var(--line-thumb-summary); width: var(--line-thumb-summary); height: var(--line-thumb-summary); border: var(--line); border-radius: var(--radius); background: var(--color-surface); }
.bc-cart-toast-item__picture img { width: 100%; height: 100%; padding: var(--space-1); object-fit: contain; }
.bc-cart-toast-item__text strong { display: block; font-size: var(--text-sm); line-height: 1.5; }
.bc-cart-toast-item__text small { color: var(--color-muted); font-size: var(--text-xs); }
.bc-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.bc-toast__actions .bc-btn { min-height: var(--control-height); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
/* The count in "View cart (n)": the header badge style (shell.css .cart-count) is global; here it is plain text. */
.bc-toast .cart-count { position: static; display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.bc-toast__continue { display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-1); border: 0; background: none; color: var(--color-muted); font-size: var(--text-xs); cursor: pointer; }
.bc-toast__continue:hover { color: var(--color-red); }

/* --- The drawer (V2 screen 04): the dialog shell as a side panel ------------------------------------------------- */
.dialog.dialog--drawer {
	width: min(var(--drawer-width), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
	margin: 0 0 0 auto; border-radius: 0; box-shadow: var(--shadow-panel);
}
.dialog--drawer .dialog__panel { height: 100dvh; max-height: 100dvh; }
.dialog--drawer .dialog__head { padding: var(--space-5) var(--space-5) var(--space-4); }
.dialog--drawer .dialog__title { font-size: var(--text-lg); }
.dialog--drawer .dialog__body { display: flex; flex-direction: column; padding: 0; }
.bc-drawer__eyebrow { margin: var(--space-3) var(--space-5) 0; color: var(--color-red); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.bc-drawer__notice { margin: var(--space-3) var(--space-5) 0; padding: var(--space-3); border-radius: var(--radius); background: var(--color-warn-tint); color: var(--color-warn-ink); font-size: var(--text-xs); }
.bc-drawer__notice[hidden] { display: none; }
.bc-drawer__notice button { padding: 0; border: 0; background: none; color: var(--color-red); font: inherit; font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: var(--space-1); cursor: pointer; }
.dialog--drawer .widget_shopping_cart_content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.bc-mini-cart { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 var(--space-5); overflow: auto; list-style: none; }
.bc-drawer__foot { padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); border-top: var(--line); background: var(--color-cream); }
.bc-drawer__foot .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: var(--text-base); }
.bc-drawer__foot .woocommerce-mini-cart__total strong { font-weight: var(--weight-bold); }
.bc-drawer__foot .woocommerce-mini-cart__total .woocommerce-Price-amount { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.bc-drawer__note { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
.bc-drawer__foot .woocommerce-mini-cart__buttons { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.bc-drawer__continue { display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-1); border: 0; background: none; color: var(--color-muted); font-size: var(--text-xs); cursor: pointer; }
.bc-drawer__continue:hover { color: var(--color-red); }

/* --- One cart line (drawer and cart page) ------------------------------------------------------------------------- */
.bc-line { display: grid; grid-template-columns: var(--line-thumb) minmax(0, 1fr) auto; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: var(--line); }
.bc-line__picture { width: var(--line-thumb); height: calc(var(--line-thumb) + var(--space-2)); border: var(--line); border-radius: var(--radius); background: var(--color-surface); }
.bc-line__picture a { display: block; width: 100%; height: 100%; }
.bc-line__picture img { width: 100%; height: 100%; padding: var(--space-3); object-fit: contain; }
.bc-line__name, .bc-line .product-name { margin: var(--space-1) 0 0; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.5; }
.bc-line__name a:hover, .bc-line .product-name a:hover { color: var(--color-red); }
.bc-line dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-2); margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.bc-line dl.variation dt { font-weight: var(--weight-semibold); }
.bc-line dl.variation dd { margin: 0; }
.bc-line dl.variation p { margin: 0; }
.bc-line__stock { margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.bc-line__stock--problem { color: var(--color-warn-ink); font-weight: var(--weight-semibold); }
.bc-line__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
/* Remove: WooCommerce's ".woocommerce a.remove" is a red round × with !important colours; V2's is a plain text link. */
.bc-line a.remove, .woocommerce .bc-line a.remove, #bc-cart-drawer .bc-line a.remove {
	display: inline; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none !important;
	color: var(--color-muted) !important; font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: 1.4; text-align: left;
	text-decoration: underline; text-underline-offset: var(--space-1);
}
.bc-line a.remove:hover, .woocommerce .bc-line a.remove:hover, #bc-cart-drawer .bc-line a.remove:hover { background: none !important; color: var(--color-red) !important; }
.bc-line__price { padding-top: var(--space-1); font-size: var(--text-base); font-weight: var(--weight-semibold); white-space: nowrap; }
.bc-line .quantity { font-size: var(--text-xs); }
.bc-line .bc-line__count[hidden] { display: none !important; } /* WooCommerce's quantity line, kept for GTM4WP (the − / + field shows it) */
.bc-line--part { grid-template-columns: var(--line-thumb-drawer) minmax(0, 1fr) auto; padding: var(--space-3) 0 var(--space-3) var(--space-5); }
.bc-line--part .bc-line__picture { width: var(--line-thumb-drawer); height: var(--line-thumb-drawer); }
.bc-line--problem .bc-line__picture { opacity: .6; }

/* WooCommerce's widget list styles (".woocommerce ul.product_list_widget li img" floats a 32 px picture) reach the
   drawer through body.woocommerce: reset them inside the drawer. */
#bc-cart-drawer ul.product_list_widget { padding: 0 var(--space-5); }
#bc-cart-drawer ul.product_list_widget li { margin: 0; list-style: none; }
/* WooCommerce's clearfix (li::before / ::after, display: table) would take the first grid cells. */
#bc-cart-drawer ul.product_list_widget li::before, #bc-cart-drawer ul.product_list_widget li::after { content: none; display: none; }
#bc-cart-drawer ul.product_list_widget li img { float: none; width: 100%; height: 100%; margin: 0; box-shadow: none; }
#bc-cart-drawer ul.product_list_widget li a { display: inline; font-weight: inherit; }
#bc-cart-drawer .bc-line__picture a { display: block; width: 100%; height: 100%; }
#bc-cart-drawer .bc-line__name a { font-weight: var(--weight-semibold); }

/* The drawer's smaller lines */
#bc-cart-drawer .bc-mini-cart .bc-line { display: grid; grid-template-columns: var(--line-thumb-drawer) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; }
#bc-cart-drawer .bc-mini-cart .bc-line__picture { width: var(--line-thumb-drawer); height: calc(var(--line-thumb-drawer) + var(--space-4)); }
#bc-cart-drawer .bc-mini-cart .bc-line__name { font-size: var(--text-sm); }
#bc-cart-drawer .bc-mini-cart .bc-line__price { grid-column: 2; padding: 0; margin-top: calc(-1 * var(--space-2)); font-size: var(--text-sm); }
#bc-cart-drawer .bc-mini-cart .bc-line--part { grid-template-columns: var(--space-8) minmax(0, 1fr); padding-left: var(--space-5); }
#bc-cart-drawer .bc-mini-cart .bc-line--part .bc-line__picture { width: var(--space-8); height: var(--space-8); }

/* --- Empty states (cart page and drawer) ------------------------------------------------------------------------- */
.bc-empty { max-width: var(--empty-width); margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-9); text-align: center; }
.bc-empty > .icon { width: var(--space-7); height: var(--space-7); margin: 0 auto var(--space-5); color: var(--color-red); }
.bc-empty__title { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.bc-empty__text { margin: 0 0 var(--space-5); color: var(--color-muted); font-size: var(--text-base); }
.bc-empty .return-to-shop { margin: 0; }
.bc-empty--drawer { padding: var(--space-8) var(--space-5); }
.bc-empty--drawer .bc-empty__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }

/* --- The quick view (the Codex shop pages' quick view; Owl's review, 22 Oct) -------------------------------------- */
/* The card's button: bottom-left of the photo box (the cart icon is on the right); on hover and keyboard focus, always on
   touch screens. The card is the size container (components.css): the photo box = the card's width / --picture-aspect. */
ul.products li.product-card > .product-card__quick {
	position: absolute; z-index: 2; left: var(--card-action-inset);
	top: calc(100cqi / var(--picture-aspect) - var(--card-action-size) - var(--card-action-inset));
	display: inline-flex; align-items: center; height: var(--card-action-size); margin: 0; padding: 0 var(--space-4);
	border: var(--line); border-radius: var(--card-action-size); background: rgba(255, 255, 255, .95); color: var(--color-ink-strong);
	font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; cursor: pointer;
	box-shadow: 0 2px 8px rgba(36, 36, 39, .12); opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
ul.products li.product-card:hover > .product-card__quick,
ul.products li.product-card > .product-card__quick:focus-visible { opacity: 1; }
ul.products li.product-card > .product-card__quick:hover { border-color: var(--color-red); color: var(--color-red); }
@media (hover: none) {
	ul.products li.product-card > .product-card__quick { opacity: 1; }
}
@media (max-width: 400px) {
	ul.products li.product-card > .product-card__quick { padding: 0 var(--space-2); }
}
/* The dialog: the photo, then the details (one column on phones). */
.dialog--quick .dialog__body { padding: var(--space-6); }
.bc-quick[aria-busy="true"] { min-height: var(--options-picture); color: var(--color-muted); }
.bc-quick__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.bc-quick__picture { padding: var(--space-5); border-radius: var(--radius); background: var(--color-cream); }
.bc-quick__picture img { width: 100%; height: var(--options-picture); object-fit: contain; mix-blend-mode: multiply; }
.bc-quick__brand { margin: 0 0 var(--space-1); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 1px; text-transform: uppercase; }
.bc-quick__meta { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.bc-quick__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.bc-quick__price-row .price { color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.bc-quick__price-row .price del { margin-right: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.bc-quick__price-row .price ins { text-decoration: none; }
.bc-quick__stock { margin: var(--space-3) 0 0; font-size: var(--text-xs); }
.bc-quick__options { margin: var(--space-4) 0 0; overflow-x: auto; }
.bc-quick__options table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.bc-quick__options caption { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: left; }
.bc-quick__options th, .bc-quick__options td { padding: var(--space-2); border-bottom: var(--line); text-align: left; }
.bc-quick__options thead th { color: var(--color-muted); font-weight: var(--weight-semibold); }
.bc-quick__options tbody th { font-weight: var(--weight-regular); }
.bc-quick__note { margin: var(--space-4) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
/* Its own line under the note (an inline button rose into the note's last line); the selector beats ".woocommerce a.button". */
.bc-quick a.button.bc-quick__more { display: flex; width: fit-content; margin: var(--space-4) 0 0; }

/* --- Cart, checkout and order pages: the frame of the page --------------------------------------------------------- */
.bc-flow-wrap { width: min(var(--flow-width), 92%); margin: 0 auto; }
.bc-steps { padding: var(--space-5) 0; border-bottom: var(--line); }
.bc-steps__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; padding: 0; color: var(--color-muted); font-size: var(--text-xs); list-style: none; }
.bc-steps__item { display: flex; align-items: center; gap: var(--space-2); }
.bc-steps__item + .bc-steps__item::before { content: "›"; margin-right: var(--space-2); color: var(--color-muted); font-size: var(--text-md); }
.bc-steps__item a { display: flex; align-items: center; gap: var(--space-2); }
.bc-steps__no {
	display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); border: 1px solid var(--color-line); border-radius: 50%;
	font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.bc-steps__no .icon { width: var(--space-3); height: var(--space-3); }
.bc-steps__item--active { color: var(--color-ink); font-weight: var(--weight-semibold); }
.bc-steps__item--active .bc-steps__no { border-color: var(--color-red); background: var(--color-red); color: var(--color-on-red); }
.bc-steps__item--done .bc-steps__no { border-color: var(--color-line); background: var(--color-cream); color: var(--color-success); }

.bc-page-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6) 0 var(--space-5); }
.bc-page-intro__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.bc-page-intro__text { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.bc-secure { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.bc-secure .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* --- The cart page (V2 screen 05) --------------------------------------------------------------------------------- */
.bc-cart { display: grid; grid-template-columns: minmax(0, 1fr) var(--flow-aside-cart); gap: var(--space-7); align-items: start; padding-bottom: var(--space-8); }
.bc-cart__head { display: flex; justify-content: space-between; padding: 0 0 var(--space-3); border-bottom: var(--rule-weight) solid var(--color-line); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.bc-cart__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) 0 0; }
.bc-cart__update { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .bc-cart__update { /* cart.js presses it after a quantity change */ }
.bc-cart__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); }
.bc-cart__continue { color: var(--color-red); }
.bc-cart__stock-note { color: var(--color-muted); font-size: var(--text-xs); }

.bc-coupon { flex: 1 1 100%; max-width: var(--coupon-width); }
.bc-coupon > summary { padding: var(--space-2) 0; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.bc-coupon__row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.bc-coupon__row input { flex: 1 1 auto; min-width: 0; min-height: var(--control-height); margin: 0; font-size: var(--text-sm); }
.bc-coupon__row .bc-btn { min-height: var(--control-height); padding: var(--space-2) var(--space-4); }

/* The summary card. WooCommerce's own CSS floats .cart_totals at 48 % beside its cross-sells; here it fills the column. */
.bc-cart__aside { position: sticky; top: var(--space-5); min-width: 0; }
.woocommerce-page .bc-cart .cart-collaterals, .woocommerce-page .bc-cart .cart-collaterals .cart_totals { float: none; width: auto; }
.woocommerce-page .bc-cart .cart-collaterals::before, .woocommerce-page .bc-cart .cart-collaterals::after { display: none; }
.bc-summary { padding: var(--space-5); border: var(--line); border-radius: var(--radius); background: var(--color-cream); }
.bc-summary__title { margin: 0 0 var(--space-4); font-size: var(--text-md); }
/* WooCommerce's ".woocommerce table.shop_table" borders and cell rules need the extra classes here. */
.woocommerce-page .bc-summary table.bc-summary__table, .bc-summary table.bc-summary__table { width: 100%; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; font-size: var(--text-sm); }
.woocommerce-page .bc-summary table.bc-summary__table th, .woocommerce-page .bc-summary table.bc-summary__table td,
.bc-summary table.bc-summary__table th, .bc-summary table.bc-summary__table td {
	padding: var(--space-2) 0; border: 0; background: none; font-weight: var(--weight-regular); line-height: 1.5; text-align: left; vertical-align: top;
}
.woocommerce-page .bc-summary table.bc-summary__table td, .bc-summary table.bc-summary__table td { text-align: right; font-weight: var(--weight-semibold); }
.woocommerce-page .bc-summary table.bc-summary__table .order-total th, .woocommerce-page .bc-summary table.bc-summary__table .order-total td, .bc-summary__table .order-total th, .bc-summary__table .order-total td { padding-top: var(--space-4); border-top: 1px solid var(--color-line); font-size: var(--text-md); font-weight: var(--weight-bold); }
.bc-summary__table .order-total .woocommerce-Price-amount { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.bc-summary__table .order-total small { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.bc-summary__delivery-later td { color: var(--color-muted); font-weight: var(--weight-regular); }
.bc-summary .wc-proceed-to-checkout { padding: var(--space-5) 0 0; }
.bc-summary .wc-proceed-to-checkout .checkout-button { min-height: var(--control-height-lg); margin: 0; font-size: var(--text-sm); }
.bc-summary__hint { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
.bc-summary .woocommerce-remove-coupon { margin-left: var(--space-1); color: var(--color-red); font-size: var(--text-xs); font-weight: var(--weight-regular); }

/* Delivery choices (cart summary and checkout) */
.bc-choices { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; text-align: left; }
.bc-choice { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--weight-regular); }
.bc-choice input[type="radio"] { flex: 0 0 auto; margin: var(--space-1) 0 0; accent-color: var(--color-red); }
.bc-choice label { font-size: var(--text-sm); }
.bc-choice__free { color: var(--color-free-ink); font-weight: var(--weight-bold); }
.woocommerce-shipping-destination { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); text-align: left; }

/* The trust panel and the help line (cart, checkout and order pages) */
.bc-trust { margin-top: var(--space-4); padding: var(--space-4) var(--space-4); border: var(--line); border-radius: var(--radius); color: var(--color-muted); font-size: var(--text-xs); }
.bc-trust__item { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.bc-trust__item .icon { flex: 0 0 auto; width: var(--space-4); height: var(--space-4); }
.bc-trust a { color: var(--color-ink-strong); text-decoration: underline; text-underline-offset: var(--space-1); }
.bc-help { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0 var(--space-1); font-size: var(--text-xs); }
.bc-help__icon { display: inline-flex; flex: 0 0 var(--space-6); width: var(--space-6); height: var(--space-6); }
.bc-help__icon svg { width: 100%; height: 100%; }
.bc-wa__bg { fill: var(--color-whatsapp); }
.bc-wa__glyph { fill: var(--color-surface); }
.bc-help__text strong { display: block; font-weight: var(--weight-semibold); }
.bc-help__text > span { color: var(--color-muted); }
.bc-help:hover .bc-help__text > span { color: var(--color-red); }

/* Cross-sells below the cart */
.bc-cross-sells { padding: var(--space-6) 0 var(--space-8); border-top: var(--line); }
.bc-cross-sells__title { margin: 0 0 var(--space-5); font-size: var(--text-lg); }

/* WooCommerce's notices on the cart page: the stock notice reads as V2's alert */
.woocommerce-cart .woocommerce-error { border: 1px solid var(--color-warn-line); border-radius: var(--radius); background: var(--color-warn-tint); color: var(--color-warn-ink); }
.woocommerce-cart .woocommerce-error::before { color: var(--color-warn-ink); }

/* --- Tablet and phone ---------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.bc-cart { grid-template-columns: minmax(0, 1fr) var(--flow-aside-tablet); gap: var(--space-5); }
	.bc-summary { padding: var(--space-4); }
	.bc-line { grid-template-columns: var(--line-thumb-drawer) minmax(0, 1fr); gap: var(--space-4); }
	.bc-line__picture { width: var(--line-thumb-drawer); height: calc(var(--line-thumb-drawer) + var(--space-5)); }
	.bc-line__price { grid-column: 2; margin-top: calc(-1 * var(--space-3)); padding: 0; }
}
@media (max-width: 760px) {
	.bc-flow-wrap { width: 90%; }
	.bc-steps { padding: var(--space-4) 0; }
	.bc-steps__list { justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); }
	.bc-steps__item + .bc-steps__item::before { margin-right: var(--space-1); }
	.bc-page-intro { display: block; padding: var(--space-5) 0 var(--space-4); }
	.bc-page-intro__title { font-size: var(--text-xl); line-height: 1.2; }
	.bc-page-intro .bc-secure { display: none; }
	.bc-cart { display: block; padding-bottom: var(--space-6); }
	.bc-cart__aside { position: static; margin-top: var(--space-5); }
	.bc-summary { padding: var(--space-4); }
	.bc-line { grid-template-columns: var(--line-thumb-drawer) minmax(0, 1fr); gap: var(--space-4); }
	.bc-line__picture { width: var(--line-thumb-drawer); height: calc(var(--line-thumb-drawer) + var(--space-4)); }
	.bc-line__name, .bc-line .product-name { font-size: var(--text-sm); }
	.bc-line__price { font-size: var(--text-sm); }
	.bc-cart__bottom { align-items: flex-start; gap: var(--space-5); }
	.bc-cart__stock-note { max-width: var(--line-thumb); text-align: right; }
	.bc-toast { top: var(--space-3); right: 4%; width: 92%; }
	.bc-toast__panel { padding: var(--space-4); }
	.dialog.dialog--drawer { width: 100vw; margin: 0; }
	.dialog--quick .dialog__body { padding: var(--space-5) var(--space-4); }
	.bc-quick__grid { grid-template-columns: 1fr; gap: var(--space-5); }
	.bc-quick__picture { padding: var(--space-2); }
	.bc-quick__picture img { height: var(--options-picture-phone); }
	.bc-empty { padding: var(--space-7) 0 var(--space-8); }
	.bc-empty__title { font-size: var(--text-xl); }
}
@media (max-width: 360px) {
	.bc-steps__list { font-size: var(--text-xs); }
	.bc-steps__no { width: var(--icon-sm); height: var(--icon-sm); font-size: var(--text-xs); }
	.bc-line__tools { gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
	.bc-toast, .dialog--drawer { transition: none !important; animation: none !important; }
}

/* --- The help bar (the plugin "BC Sticky Help Bar"; Owl's reviews, 22 Oct: OneDayOnly's checkout bar, our fonts) ----
   A slim light bar, centred: the WhatsApp logo, "Need Help?" and the WhatsApp link in bold and underlined. The plugin
   keeps its text, its link, its pages (the cart and the checkout) and its click event; the theme sets the look. The
   plugin prints its own CSS on #bc-shb after the theme's files, so these rules carry "body". The bar is 48 px high (the
   32 px logo, 8 px above and below); the page keeps that space at the bottom, except on the checkout with the docked
   button (checkout.css adds the bar there). */
body #bc-shb {
	height: auto; gap: var(--space-2); padding: var(--space-2) var(--space-4);
	border: 0; background: var(--color-cream); color: var(--color-ink); box-shadow: none;
	font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.2;
}
body #bc-shb .bc-label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
body #bc-shb .bc-label::before {
	content: ""; flex: 0 0 auto; width: var(--space-6); height: var(--space-6);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%2325d366'/%3E%3Cpath transform='translate(3 3)' fill='%23fff' d='M12 2.2a9.7 9.7 0 0 0-8.4 14.6L2.2 21.8l5.1-1.3A9.7 9.7 0 1 0 12 2.2Zm0 17.7a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 19.9Zm4.4-6c-.2-.1-1.4-.7-1.7-.8-.2-.1-.4-.1-.5.1l-.8 1c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.2.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.5-.4h-.5a.9.9 0 0 0-.7.3 2.8 2.8 0 0 0-.9 2.1 4.9 4.9 0 0 0 1 2.6 11.2 11.2 0 0 0 4.3 3.8c1.6.7 2.2.7 3 .6.5-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1l-.5-.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body #bc-shb .bc-cta {
	display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--color-ink);
	font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 2px;
}
body #bc-shb .bc-cta:hover { background: none; color: var(--color-red); }
body:not(.has-docked-payment):has(#bc-shb) { padding-bottom: calc(var(--space-6) + 2 * var(--space-2)); }