/**
 * Arbor — Phase 11: checkout funnel (Korpa · Naplata · Potvrda).
 *
 * Scoped under body.arbor-ds and the WooCommerce page body classes. Restyles the
 * classic shortcode cart + checkout + order-received into the design language:
 * --ds-* tokens, Outfit/Jost, NO borders / lines / shadows, 32px card radius, pill
 * buttons. !important is used only to win over the compiled reeco.css defaults
 * (allowed by CSS-GUIDE.md for that purpose).
 *
 * Layout: form-checkout.php wraps the native hooks in a .arbor-checkout grid
 * (.arbor-checkout__main = billing + notes, .arbor-checkout__aside = sticky
 * summary). All WC ids/classes are preserved so AJAX + payment are untouched.
 */

/* ============================ Local tokens ============================== */
body.arbor-ds.woocommerce-checkout,
body.arbor-ds.woocommerce-cart,
body.arbor-ds.woocommerce-order-received {
	--co-card: var(--ds-surface);
	--co-field: #ffffff;
	--co-field-radius: 16px;
	--co-gap: 24px;
}

/* Page background on the funnel pages. */
body.arbor-ds.woocommerce-checkout .site-content,
body.arbor-ds.woocommerce-cart .site-content,
body.arbor-ds.woocommerce-order-received .site-content {
	background: var(--ds-page);
}
/* Consistent top/bottom breathing room from header + footer. The footer is a
   sibling INSIDE .site-content (after .gs-content-wrapper), so the padding must
   live on .gs-content-wrapper — padding on .site-content lands below the footer. */
body.arbor-ds.woocommerce-checkout .gs-content-wrapper,
body.arbor-ds.woocommerce-cart .gs-content-wrapper,
body.arbor-ds.woocommerce-order-received .gs-content-wrapper {
	padding-top: 28px;
	padding-bottom: 60px;
}
body.arbor-ds.woocommerce-checkout .woocommerce,
body.arbor-ds.woocommerce-cart .woocommerce {
	max-width: 1200px;
	margin-inline: auto;
}

/* WooCommerce notices → soft pills, not bordered banners. */
body.arbor-ds.woocommerce-checkout .woocommerce-message,
body.arbor-ds.woocommerce-cart .woocommerce-message,
body.arbor-ds.woocommerce-checkout .woocommerce-info,
body.arbor-ds.woocommerce-cart .woocommerce-info,
body.arbor-ds.woocommerce-checkout .woocommerce-error,
body.arbor-ds.woocommerce-cart .woocommerce-error {
	border: 0 !important;
	border-radius: 18px !important;
	background: var(--ds-surface) !important;
	box-shadow: none !important;
	font-family: var(--ds-font-body);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ds-ink);
	padding: 13px 20px !important;
	margin: 0 0 16px 0 !important;
}
body.arbor-ds .woocommerce-message::before,
body.arbor-ds .woocommerce-info::before,
body.arbor-ds .woocommerce-error::before { display: none !important; }
body.arbor-ds .woocommerce-error { background: #fbeaec !important; color: #8f0b17; }

/* Consistent breathing room at the top of the funnel pages (independent of
   whether a notice is present) + kill any oversized default notice-wrapper gap. */
body.arbor-ds.woocommerce-checkout .woocommerce-notices-wrapper,
body.arbor-ds.woocommerce-cart .woocommerce-notices-wrapper { margin: 0 0 20px 0; }
body.arbor-ds.woocommerce-checkout .woocommerce-notices-wrapper:empty,
body.arbor-ds.woocommerce-cart .woocommerce-notices-wrapper:empty { margin: 0; }
/* (funnel top/bottom breathing room is handled on .site-content above) */

/* ========================= Checkout grid =============================== */
body.arbor-ds .arbor-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}
body.arbor-ds .arbor-checkout__main { min-width: 0; }
body.arbor-ds .arbor-checkout__aside {
	min-width: 0;
	position: sticky;
	top: 96px; /* clear the sticky header */
}

/* Stack billing + notes vertically inside the left column (override reeco's
   col2-set 50/50 flex). */
body.arbor-ds .arbor-checkout #customer_details.col2-set {
	display: block !important;
	margin: 0 !important;
}
body.arbor-ds .arbor-checkout #customer_details .col-1,
body.arbor-ds .arbor-checkout #customer_details .col-2 {
	flex: none !important;
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
}

/* ============================== Cards ================================== */
body.arbor-ds .arbor-checkout .woocommerce-billing-fields,
body.arbor-ds .arbor-checkout .woocommerce-additional-fields,
body.arbor-ds .arbor-checkout__aside {
	background: var(--co-card);
	border-radius: var(--ds-radius);
	padding: 38px;
	margin: 0 0 var(--co-gap) 0 !important;
}
body.arbor-ds .arbor-checkout__aside { padding: 32px; }

/* Shipping-fields wrapper is emitted even with no shipping (whitespace-only) →
   keep it invisible until it actually holds a section (ship-to-different h3). */
body.arbor-ds .arbor-checkout .woocommerce-shipping-fields {
	background: transparent;
	padding: 0;
	margin: 0 !important;
}
body.arbor-ds .arbor-checkout .woocommerce-shipping-fields:has(h3) {
	background: var(--co-card);
	border-radius: var(--ds-radius);
	padding: 38px;
	margin: 0 0 var(--co-gap) 0 !important;
}

body.arbor-ds .arbor-checkout .woocommerce-billing-fields h3,
body.arbor-ds .arbor-checkout .woocommerce-additional-fields h3,
body.arbor-ds .arbor-checkout .woocommerce-shipping-fields h3,
body.arbor-ds #order_review_heading {
	font-family: var(--ds-font-head) !important;
	font-weight: var(--ds-fw-heading) !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	color: var(--ds-ink);
	margin: 0 0 26px 0 !important;
}

/* ============================== Fields ================================= */
body.arbor-ds .arbor-checkout .woocommerce-billing-fields__field-wrapper,
body.arbor-ds .arbor-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 18px;
}
body.arbor-ds .arbor-checkout .form-row {
	margin: 0 !important;
	padding: 0 !important;
	grid-column: 1 / -1;
	float: none !important;
	width: 100% !important;
}
body.arbor-ds .arbor-checkout .form-row-first { grid-column: 1 / 2; }
body.arbor-ds .arbor-checkout .form-row-last { grid-column: 2 / -1; }

body.arbor-ds .arbor-checkout .form-row label {
	display: block;
	font-family: var(--ds-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-body);
	margin: 0 0 10px 2px !important;
}
body.arbor-ds .arbor-checkout .form-row label .required { color: var(--ds-brand); border: 0; }
body.arbor-ds .arbor-checkout .form-row .optional { color: #a7a7a7; }

body.arbor-ds .arbor-checkout .input-text,
body.arbor-ds .arbor-checkout input[type="text"],
body.arbor-ds .arbor-checkout input[type="tel"],
body.arbor-ds .arbor-checkout input[type="email"],
body.arbor-ds .arbor-checkout input[type="password"],
body.arbor-ds .arbor-checkout textarea,
body.arbor-ds .arbor-checkout select {
	width: 100% !important;
	background: var(--co-field) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: var(--co-field-radius) !important;
	padding: 16px 18px !important;
	min-height: 56px;
	font-family: var(--ds-font-body) !important;
	font-size: 15px !important;
	color: var(--ds-ink) !important;
	transition: box-shadow .16s ease, background .16s ease;
}
body.arbor-ds .arbor-checkout textarea {
	min-height: 130px;
	line-height: 1.5;
	resize: vertical;
}
body.arbor-ds .arbor-checkout .input-text::placeholder,
body.arbor-ds .arbor-checkout textarea::placeholder { color: #b0b0b0; }
body.arbor-ds .arbor-checkout .input-text:focus,
body.arbor-ds .arbor-checkout textarea:focus,
body.arbor-ds .arbor-checkout select:focus {
	outline: 0 !important;
	background: #fff !important;
	box-shadow: 0 0 0 2px var(--ds-brand) !important;
}
/* single-country display (Srbija) */
body.arbor-ds .arbor-checkout #billing_country_field strong,
body.arbor-ds .arbor-checkout .woocommerce-input-wrapper strong { font-weight: 600; color: var(--ds-ink); }

/* select2 (state dropdown) → match the field style */
body.arbor-ds .arbor-checkout .select2-container--default .select2-selection--single {
	background: var(--co-field) !important;
	border: 0 !important;
	border-radius: var(--co-field-radius) !important;
	height: 56px !important;
	display: flex;
	align-items: center;
}
body.arbor-ds .arbor-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 56px !important;
	padding-left: 18px !important;
	color: var(--ds-ink);
}
body.arbor-ds .arbor-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 54px !important; }
body.arbor-ds .select2-dropdown { border: 0 !important; border-radius: 14px !important; box-shadow: 0 8px 30px rgba(0,0,0,.12) !important; overflow: hidden; }

/* ========================= Order summary ============================== *
 * Rendered as flex ROWS, not a shared table grid: line items need a wide name
 * column while the totals carry a big bold grand-total — in one table they share
 * column widths, squeezing the product name until the plan text breaks mid-word.
 * Flex rows give every row independent widths. */
body.arbor-ds #order_review .shop_table {
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important; /* reeco puts 50px side padding here → squeezed the rows to 289px */
}
body.arbor-ds #order_review .shop_table thead { display: none; }
body.arbor-ds #order_review .shop_table th,
body.arbor-ds #order_review .shop_table td {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	vertical-align: baseline;
}

/* Line item — a single full-width cell (colspan 2) laid out with flex, so the
   product name never shares column widths with the big bold grand-total. */
body.arbor-ds #order_review .cart_item td.product-name { padding: 12px 0 !important; }
body.arbor-ds .arbor-line { display: flex; align-items: flex-start; gap: 12px; }
body.arbor-ds .arbor-line__thumb {
	flex: 0 0 52px;
	width: 52px; height: 52px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--ds-surface-overlay);
}
body.arbor-ds .arbor-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
body.arbor-ds .arbor-line__body { flex: 1 1 auto; min-width: 0; }
body.arbor-ds .arbor-line__price {
	flex: 0 0 auto;
	margin-left: 10px;
	white-space: nowrap;
	font-family: var(--ds-font-head);
	font-weight: 600;
	color: var(--ds-ink);
}
body.arbor-ds .arbor-line__name {
	display: block;
	font-family: var(--ds-font-head);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--ds-ink);
	overflow-wrap: normal;
	word-break: normal;
}
body.arbor-ds .arbor-line__name .product-quantity { color: var(--ds-body); font-weight: 500; white-space: nowrap; }
/* plan / variation meta */
body.arbor-ds .arbor-line__meta { display: block; margin-top: 3px; }
body.arbor-ds .arbor-line__meta dl.variation { margin: 0; font-size: 12px; line-height: 1.35; }
body.arbor-ds .arbor-line__meta dl.variation dt,
body.arbor-ds .arbor-line__meta dl.variation dd { display: inline; margin: 0; font-weight: 500; color: var(--ds-body); }
body.arbor-ds .arbor-line__meta dl.variation dt { margin-right: 3px; }
body.arbor-ds .arbor-line__meta dl.variation p { margin: 0; }
/* the arbor-commerce "Plan: Štednja (−15%)" line → crimson */
body.arbor-ds .arbor-line__meta dl.variation dt.variation-Plan,
body.arbor-ds .arbor-line__meta dl.variation dt.variation-Plan + dd,
body.arbor-ds .arbor-line__meta dl.variation dt.variation-Rokisporuke,
body.arbor-ds .arbor-line__meta dl.variation dt.variation-Rokisporuke + dd {
	color: var(--ds-brand);
	font-weight: 600;
}
/* option meta → compact + scannable: lighter labels, readable values */
body.arbor-ds .arbor-line__meta dl.variation { font-size: 11.5px; line-height: 1.6; }
body.arbor-ds .arbor-line__meta dl.variation dt { color: #a0a0a0; font-weight: 500; }
body.arbor-ds .arbor-line__meta dl.variation dd { color: var(--ds-body); }

/* Separate top-level product groups with spacing (no lines, per the design rule);
   keep bundled children tight to their parent. */
body.arbor-ds #order_review .cart_item + .cart_item:not(.arbor-component-item) td.product-name { padding-top: 22px !important; }

/* Bundled component lines (dušek that ships with a bed, etc.) nest under parent */
body.arbor-ds #order_review .cart_item.arbor-component-item td.product-name { padding-top: 3px !important; }
body.arbor-ds #order_review .cart_item.arbor-component-item .arbor-line { padding-left: 20px; gap: 10px; }
body.arbor-ds #order_review .cart_item.arbor-component-item .arbor-line__thumb { flex: 0 0 40px; width: 40px; height: 40px; }
body.arbor-ds #order_review .cart_item.arbor-component-item .arbor-line__name { font-size: 13px; font-weight: 500; color: var(--ds-body); }
body.arbor-ds #order_review .cart_item.arbor-component-item .arbor-line__price { font-size: 13.5px; font-weight: 600; color: var(--ds-body); }
body.arbor-ds .arbor-child-line { color: var(--ds-brand); font-weight: 700; margin-right: 1px; }

/* Totals rows (normal table cells; padding lives on th/td, not tr) */
body.arbor-ds #order_review .shop_table tfoot th,
body.arbor-ds #order_review .shop_table tfoot td { padding: 10px 0 !important; }
body.arbor-ds #order_review .shop_table tfoot tr th {
	font-family: var(--ds-font-body);
	font-weight: 500;
	color: var(--ds-body);
	text-align: left;
}
body.arbor-ds #order_review .shop_table tfoot tr td {
	text-align: right;
	font-family: var(--ds-font-body);
	font-weight: 600;
	color: var(--ds-ink);
	white-space: nowrap;
}
body.arbor-ds #order_review .cart-subtotal th,
body.arbor-ds #order_review .cart-subtotal td { padding-top: 20px !important; }
/* coupon + savings → crimson */
body.arbor-ds #order_review .cart-discount th,
body.arbor-ds #order_review .cart-discount td,
body.arbor-ds #order_review .arbor-savings th,
body.arbor-ds #order_review .arbor-savings td { color: var(--ds-brand) !important; font-weight: 600; }
/* grand total → big */
body.arbor-ds #order_review .order-total th,
body.arbor-ds #order_review .order-total td { padding-top: 18px !important; }
body.arbor-ds #order_review .order-total th { font-family: var(--ds-font-head); font-weight: 700; font-size: 16px; color: var(--ds-ink); }
body.arbor-ds #order_review .order-total td,
body.arbor-ds #order_review .order-total td .amount { font-family: var(--ds-font-head); font-weight: 800; font-size: 20px; color: var(--ds-ink) !important; white-space: nowrap; }
/* delivery note row spans full width via colspan=2 */
body.arbor-ds #order_review tr.arbor-delivery-row td { padding: 6px 0 0 !important; }

/* ========================= Coupon toggle ============================== */
body.arbor-ds .woocommerce-form-coupon-toggle { margin: 0 0 20px 0; padding: 0 !important; } /* reeco adds 50px left padding for a notice icon → kill it so it aligns left */
body.arbor-ds .woocommerce-form-coupon-toggle .woocommerce-info {
	display: block !important; /* let "Imate kupon? …" flow + wrap as normal text */
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--ds-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ds-body);
}
body.arbor-ds .woocommerce-form-coupon-toggle .woocommerce-info::before { content: none !important; }
body.arbor-ds .woocommerce-form-coupon-toggle .showcoupon {
	color: var(--ds-brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
body.arbor-ds form.checkout_coupon {
	border: 0 !important;
	border-radius: 18px !important;
	background: #fff !important;
	padding: 14px !important;
	margin: 0 0 20px 0 !important;
}
/* input + button side by side (the two .form-row <p> blocks otherwise stack) */
body.arbor-ds form.checkout_coupon .arbor-coupon-fields {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* width:auto overrides the billing-field `.form-row { width:100% }` rule, which
   would otherwise make both rows 100% and collapse the input behind the button */
body.arbor-ds form.checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; width: auto !important; }
body.arbor-ds form.checkout_coupon .form-row-first { flex: 1 1 auto; min-width: 0; }
body.arbor-ds form.checkout_coupon .form-row-last { flex: 0 0 auto; }
body.arbor-ds form.checkout_coupon .clear { display: none; }
body.arbor-ds form.checkout_coupon input.input-text {
	width: 100% !important;
	margin: 0 !important;
	background: var(--ds-surface) !important;
	min-height: 48px;
}
body.arbor-ds form.checkout_coupon button {
	white-space: nowrap;
	margin: 0 !important;
	background: var(--ds-ink) !important;
	color: #fff !important;
	border-radius: var(--ds-radius-pill) !important;
	padding: 0 20px !important;
	min-height: 48px;
	font-family: var(--ds-font-body);
	font-weight: 600;
}

/* ============================= Payment ================================ */
body.arbor-ds #order_review .woocommerce-checkout-payment,
body.arbor-ds #payment {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin-top: 20px;
}
body.arbor-ds #payment ul.payment_methods {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 4px 0 !important;
	list-style: none;
}
body.arbor-ds #payment ul.payment_methods li.wc_payment_method {
	background: #fff;
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 12px;
}
body.arbor-ds #payment ul.payment_methods li.wc_payment_method > label {
	font-family: var(--ds-font-head);
	font-weight: 600;
	color: var(--ds-ink);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
body.arbor-ds #payment ul.payment_methods li.wc_payment_method input[type="radio"] { accent-color: var(--ds-brand); width: 18px; height: 18px; }
body.arbor-ds #payment div.payment_box {
	background: var(--ds-surface) !important;
	border-radius: 14px !important;
	margin: 14px 0 2px 0 !important;
	padding: 16px 18px !important;
	font-family: var(--ds-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ds-body);
}
body.arbor-ds #payment div.payment_box::before { display: none !important; }
body.arbor-ds #payment .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	color: #9a9a9a;
	line-height: 1.6;
	margin: 18px 0 0 0;
}
body.arbor-ds #payment .woocommerce-privacy-policy-text a { color: var(--ds-body); text-decoration: underline; }

/* ========================= Primary CTA button ========================= */
body.arbor-ds #place_order,
body.arbor-ds .arbor-checkout button#place_order {
	width: 100%;
	background: var(--ds-brand) !important;
	color: var(--ds-on-brand) !important;
	border: 0 !important;
	border-radius: var(--ds-radius-pill) !important;
	padding: 18px 24px !important;
	margin-top: 18px !important;
	font-family: var(--ds-font-body) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: .01em;
	text-transform: none;
	transition: background .16s ease, transform .05s ease;
}
body.arbor-ds #place_order:hover { background: #8f0b17 !important; }
body.arbor-ds #place_order:active { transform: translateY(1px); }

/* ============================ Trust row =============================== */
body.arbor-ds .arbor-checkout-trust {
	list-style: none;
	margin: 24px 0 4px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	justify-content: center;
}
body.arbor-ds .arbor-checkout-trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ds-font-body);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ds-body);
}
body.arbor-ds .arbor-checkout-trust__icon { display: inline-flex; color: var(--ds-brand); }
body.arbor-ds .arbor-checkout-trust__icon svg { width: 16px; height: 16px; }

/* ===== Delivery note (flat fee, paid at the door — no free-shipping nudge) ===== */
body.arbor-ds table tr.arbor-delivery-row td { padding: 6px 0 2px 0 !important; text-align: left !important; white-space: normal !important; }
body.arbor-ds table tr.arbor-delivery-row td::before { content: none !important; display: none !important; }
body.arbor-ds .arbor-delivery-note {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ds-surface-overlay);
	border-radius: 16px;
	padding: 12px 14px;
	margin-top: 6px;
}
body.arbor-ds .arbor-delivery-note__icon { display: inline-flex; flex: none; color: var(--ds-brand); }
body.arbor-ds .arbor-delivery-note__icon svg { width: 18px; height: 18px; }
body.arbor-ds .arbor-delivery-note__msg {
	font-family: var(--ds-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ds-ink);
	white-space: normal !important;
	min-width: 0;
}

/* ====================== Mobile sticky CTA bar ========================= */
body.arbor-ds .arbor-checkout-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1200;
	display: none; /* mobile only — enabled in the ≤768px block below */
	background: #fff;
	box-shadow: 0 -6px 24px rgba(0,0,0,.1);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	transform: translateY(120%);
	transition: transform .24s ease;
}
body.arbor-ds .arbor-checkout-bar.is-visible { transform: translateY(0); }
body.arbor-ds .arbor-checkout-bar__inner { display: flex; align-items: center; gap: 14px; }
body.arbor-ds .arbor-checkout-bar__total { display: flex; flex-direction: column; line-height: 1.15; }
body.arbor-ds .arbor-checkout-bar__label { font-family: var(--ds-font-body); font-size: 11px; color: var(--ds-body); }
body.arbor-ds .arbor-checkout-bar__amount { font-family: var(--ds-font-head); font-weight: 800; font-size: 18px; color: var(--ds-ink); }
body.arbor-ds .arbor-checkout-bar__amount .amount { color: var(--ds-ink); }
body.arbor-ds .arbor-checkout-bar__btn {
	flex: 1;
	background: var(--ds-brand);
	color: #fff;
	border: 0;
	border-radius: var(--ds-radius-pill);
	padding: 15px;
	font-family: var(--ds-font-body);
	font-weight: 700;
	font-size: 15px;
}

/* ============================ Responsive ============================== */
@media (max-width: 992px) {
	body.arbor-ds .arbor-checkout { grid-template-columns: 1fr; }
	body.arbor-ds .arbor-checkout__aside { position: static; }
}
@media (max-width: 768px) {
	/* Compact the funnel notices — the "dodat u korpu" banner + its button
	   otherwise eat the entire first screen on mobile. */
	body.arbor-ds.woocommerce-checkout .woocommerce-message,
	body.arbor-ds.woocommerce-cart .woocommerce-message,
	body.arbor-ds.woocommerce-checkout .woocommerce-info,
	body.arbor-ds.woocommerce-cart .woocommerce-info {
		display: block; /* button is hidden on mobile → no flex needed; keeps it one slim line */
		padding: 11px 16px !important;
		margin: 0 0 14px 0 !important;
		font-size: 13px;
		line-height: 1.4;
	}
	body.arbor-ds.woocommerce-cart .woocommerce-message { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
	/* the "view cart" button is redundant on mobile (header cart icon covers it)
	   and forces the notice onto two rows — drop it so the notice is one slim line */
	body.arbor-ds.woocommerce-checkout .woocommerce-message .button { display: none !important; }
	body.arbor-ds.woocommerce-cart .woocommerce-message .button {
		margin: 0 0 0 auto !important;
		padding: 9px 16px !important;
		min-height: 0 !important;
		font-size: 11.5px !important;
	}

	/* Mobile cards + fields — comfortable, not cramped. */
	body.arbor-ds .arbor-checkout .woocommerce-billing-fields,
	body.arbor-ds .arbor-checkout .woocommerce-additional-fields,
	body.arbor-ds .arbor-checkout .woocommerce-shipping-fields:has(h3) { padding: 26px 22px; }
	body.arbor-ds .arbor-checkout__aside { padding: 26px 22px; }
	body.arbor-ds .arbor-checkout .woocommerce-billing-fields h3,
	body.arbor-ds .arbor-checkout .woocommerce-additional-fields h3,
	body.arbor-ds .arbor-checkout .woocommerce-shipping-fields h3,
	body.arbor-ds #order_review_heading { font-size: 19px !important; margin-bottom: 20px !important; }
	body.arbor-ds .arbor-checkout .woocommerce-billing-fields__field-wrapper,
	body.arbor-ds .arbor-checkout .woocommerce-additional-fields__field-wrapper { gap: 18px 16px; }
	body.arbor-ds .arbor-checkout .form-row label { font-size: 13px; margin-bottom: 8px !important; }
	body.arbor-ds .arbor-checkout .input-text,
	body.arbor-ds .arbor-checkout input[type="text"],
	body.arbor-ds .arbor-checkout input[type="tel"],
	body.arbor-ds .arbor-checkout input[type="email"],
	body.arbor-ds .arbor-checkout input[type="password"],
	body.arbor-ds .arbor-checkout select {
		min-height: 52px; padding: 14px 16px !important; font-size: 15px !important;
	}
	body.arbor-ds .arbor-checkout .select2-container--default .select2-selection--single { height: 52px !important; }
	body.arbor-ds .arbor-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 52px !important; }
	body.arbor-ds .arbor-checkout textarea { min-height: 112px; }

	/* Summary + order-details line — on a narrow card, grid it so the meta (plan)
	   spans full width instead of the price squeezing the name. */
	body.arbor-ds #order_review .arbor-line,
	body.arbor-ds .arbor-thankyou .arbor-line {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr) auto;
		grid-template-areas: "thumb name price" "thumb meta meta";
		column-gap: 11px;
		row-gap: 2px;
		align-items: start;
	}
	body.arbor-ds #order_review .arbor-line__thumb,
	body.arbor-ds .arbor-thankyou .arbor-line__thumb { grid-area: thumb; flex-basis: auto; width: 46px; height: 46px; }
	body.arbor-ds #order_review .arbor-line__body,
	body.arbor-ds .arbor-thankyou .arbor-line__body { display: contents; }
	body.arbor-ds #order_review .arbor-line__name,
	body.arbor-ds .arbor-thankyou .arbor-line__name { grid-area: name; }
	body.arbor-ds #order_review .arbor-line__meta,
	body.arbor-ds .arbor-thankyou .arbor-line__meta { grid-area: meta; margin-top: 2px; }
	body.arbor-ds #order_review .arbor-line__price,
	body.arbor-ds .arbor-thankyou .arbor-line__price { grid-area: price; margin: 0; font-size: 14px; text-align: right; white-space: nowrap; }

	/* consistent mobile top/bottom breathing room across the funnel */
	body.arbor-ds.woocommerce-checkout .gs-content-wrapper,
	body.arbor-ds.woocommerce-cart .gs-content-wrapper,
	body.arbor-ds.woocommerce-order-received .gs-content-wrapper { padding-top: 18px; padding-bottom: 44px; }
	/* checkout keeps extra room for the sticky CTA bar + enable it */
	body.arbor-ds.woocommerce-checkout .gs-content-wrapper { padding-bottom: 104px; }
	body.arbor-ds .arbor-checkout-bar { display: block; }
}

/* ================= Mobile order-summary accordion ===================== *
 * Built + kept in sync by arbor-checkout.js from #order_review, shown at the
 * top of the form on phones so shoppers see what they're buying + the total
 * before filling the form. Hidden on desktop (the sticky rail covers it). */
body.arbor-ds .arbor-mini-summary { display: none; }
@media (max-width: 768px) {
	body.arbor-ds .arbor-mini-summary {
		display: block;
		background: var(--ds-surface);
		border-radius: 20px;
		margin-bottom: 16px;
		overflow: hidden;
	}
	body.arbor-ds .arbor-mini-summary__toggle {
		width: 100%;
		border: 0;
		background: transparent;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 15px 18px;
		text-align: left;
		cursor: pointer;
		text-transform: none; /* reeco uppercases buttons */
		letter-spacing: 0;
	}
	body.arbor-ds .arbor-mini-summary__label { font-family: var(--ds-font-head); font-weight: 600; font-size: 15px; color: var(--ds-ink); text-transform: none; white-space: nowrap; }
	body.arbor-ds .arbor-mini-summary__count { font-family: var(--ds-font-body); font-size: 12px; color: var(--ds-body); white-space: nowrap; }
	body.arbor-ds .arbor-mini-summary__total { margin-left: auto; font-family: var(--ds-font-head); font-weight: 800; font-size: 16px; color: var(--ds-ink); white-space: nowrap; }
	body.arbor-ds .arbor-mini-summary__total .amount { color: var(--ds-ink); }
	body.arbor-ds .arbor-mini-summary__chev { display: inline-flex; color: var(--ds-body); transition: transform .2s ease; }
	body.arbor-ds .arbor-mini-summary__chev svg { width: 16px; height: 16px; }
	body.arbor-ds .arbor-mini-summary.is-open .arbor-mini-summary__chev { transform: rotate(180deg); }
	body.arbor-ds .arbor-mini-summary__body { display: none; padding: 2px 18px 16px; }
	body.arbor-ds .arbor-mini-summary.is-open .arbor-mini-summary__body { display: block; }
	body.arbor-ds .arbor-mini-summary__list { list-style: none; margin: 0; padding: 0; }
	body.arbor-ds .arbor-mini-summary__list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
	body.arbor-ds .arbor-mini-summary__thumb { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex: 0 0 42px; }
	body.arbor-ds .arbor-mini-summary__list .m-name { flex: 1; font-family: var(--ds-font-body); font-size: 13.5px; line-height: 1.3; color: var(--ds-ink); }
	body.arbor-ds .arbor-mini-summary__list .m-price { font-family: var(--ds-font-body); font-weight: 600; font-size: 13.5px; color: var(--ds-ink); white-space: nowrap; }
}
@media (max-width: 480px) {
	body.arbor-ds .arbor-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
	body.arbor-ds .arbor-checkout .form-row-first,
	body.arbor-ds .arbor-checkout .form-row-last { grid-column: 1 / -1; }
}

/* ================================================================= *
 *  CART
 * ================================================================= */
body.arbor-ds .arbor-cart {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
body.arbor-ds .arbor-cart__items { min-width: 0; }
body.arbor-ds .arbor-cart__aside { min-width: 0; position: sticky; top: 96px; }

/* Line-item rows → soft cards */
body.arbor-ds .arbor-cart table.cart,
body.arbor-ds .arbor-cart table.cart tbody { display: block; width: 100%; background: transparent !important; border: 0 !important; margin: 0 !important; }
body.arbor-ds .arbor-cart table.cart thead { display: none; }
body.arbor-ds .arbor-cart tr.woocommerce-cart-form__cart-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	position: relative;
	background: var(--ds-surface);
	border-radius: 24px;
	padding: 20px 48px 20px 20px;
	margin-bottom: 16px;
}
body.arbor-ds .arbor-cart tr.woocommerce-cart-form__cart-item td {
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
body.arbor-ds .arbor-cart td.product-thumbnail { flex: 0 0 76px; width: 76px; }
body.arbor-ds .arbor-cart td.product-thumbnail img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; display: block; margin: 0; }
body.arbor-ds .arbor-cart td.product-name {
	flex: 1 1 200px;
	min-width: 0;
	font-family: var(--ds-font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--ds-ink);
}
body.arbor-ds .arbor-cart td.product-name a { color: var(--ds-ink); text-decoration: none; }
body.arbor-ds .arbor-cart td.product-name a:hover { color: var(--ds-brand); }
body.arbor-ds .arbor-cart td.product-name dl.variation { margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: var(--ds-body); }
body.arbor-ds .arbor-cart td.product-name dl.variation dt,
body.arbor-ds .arbor-cart td.product-name dl.variation dd { display: inline; margin: 0; }
body.arbor-ds .arbor-cart td.product-name dl.variation dt.variation-Plan,
body.arbor-ds .arbor-cart td.product-name dl.variation dt.variation-Plan + dd,
body.arbor-ds .arbor-cart td.product-name dl.variation dt.variation-Rokisporuke,
body.arbor-ds .arbor-cart td.product-name dl.variation dt.variation-Rokisporuke + dd { color: var(--ds-brand); font-weight: 600; }
body.arbor-ds .arbor-cart td.product-price {
	font-family: var(--ds-font-body);
	font-size: 14px;
	color: var(--ds-body);
	min-width: 90px;
	text-align: right;
}
body.arbor-ds .arbor-cart td.product-subtotal {
	margin-left: auto;
	font-family: var(--ds-font-head);
	font-weight: 700;
	font-size: 16px;
	color: var(--ds-ink);
	white-space: nowrap;
}
body.arbor-ds .arbor-cart td.product-remove {
	position: absolute;
	top: 12px; right: 14px;
	width: auto !important;
}
body.arbor-ds .arbor-cart td.product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 999px;
	background: var(--ds-surface-overlay);
	color: var(--ds-body) !important;
	font-size: 18px; line-height: 1;
	text-decoration: none;
}
body.arbor-ds .arbor-cart td.product-remove a.remove:hover { background: var(--ds-brand); color: #fff !important; }

/* Bundled component lines nest under their parent (indented, pulled up) */
body.arbor-ds .arbor-cart tr.woocommerce-cart-form__cart-item.arbor-component-item {
	margin: -4px 0 14px 28px;
}
body.arbor-ds .arbor-cart .arbor-component-item td.product-name { font-size: 14px; color: var(--ds-body); }
body.arbor-ds .arbor-child-line { color: var(--ds-brand); font-weight: 700; }

/* Quantity stepper */
body.arbor-ds .arbor-cart td.product-quantity .quantity { display: inline-flex; align-items: center; }
body.arbor-ds .arbor-cart td.product-quantity input.qty {
	width: 64px;
	background: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	min-height: 44px;
	text-align: center;
	font-family: var(--ds-font-body);
	font-weight: 600;
	color: var(--ds-ink);
	box-shadow: none !important;
}

/* Actions row (coupon + update) */
body.arbor-ds .arbor-cart tr:has(> td.actions),
body.arbor-ds .arbor-cart td.actions { display: block; width: 100%; }
body.arbor-ds .arbor-cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}
body.arbor-ds .arbor-cart td.actions .coupon { display: flex; gap: 10px; flex: 1 1 260px; }
body.arbor-ds .arbor-cart td.actions .coupon input.input-text {
	flex: 1;
	background: var(--ds-surface) !important;
	border: 0 !important;
	border-radius: 14px !important;
	min-height: 48px;
	padding: 0 16px !important;
	font-family: var(--ds-font-body);
	color: var(--ds-ink);
}
body.arbor-ds .arbor-cart td.actions .coupon button,
body.arbor-ds .arbor-cart td.actions button[name="update_cart"] {
	background: var(--ds-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--ds-radius-pill) !important;
	padding: 0 22px !important;
	min-height: 48px;
	font-family: var(--ds-font-body);
	font-weight: 600;
	white-space: nowrap;
}
body.arbor-ds .arbor-cart td.actions button[name="update_cart"]:disabled { opacity: .5; }

/* Totals card */
body.arbor-ds .arbor-cart .cart_totals {
	background: var(--ds-surface);
	border-radius: var(--ds-radius);
	padding: 32px;
}
body.arbor-ds .arbor-cart .cart_totals h2 {
	font-family: var(--ds-font-head);
	font-weight: var(--ds-fw-heading);
	font-size: 20px;
	color: var(--ds-ink);
	margin: 0 0 22px 0;
}
body.arbor-ds .arbor-cart .cart_totals table { width: 100%; margin: 0 0 22px 0; padding: 0 !important; background: transparent; border: 0; }
body.arbor-ds .arbor-cart .cart_totals table th,
body.arbor-ds .arbor-cart .cart_totals table td { border: 0 !important; padding: 11px 0 !important; background: transparent !important; }
body.arbor-ds .arbor-cart .cart_totals table th { text-align: left; font-family: var(--ds-font-body); font-weight: 500; color: var(--ds-body); }
body.arbor-ds .arbor-cart .cart_totals table td { text-align: right; font-family: var(--ds-font-body); font-weight: 600; color: var(--ds-ink); }
body.arbor-ds .arbor-cart .cart_totals .cart-discount th,
body.arbor-ds .arbor-cart .cart_totals .cart-discount td,
body.arbor-ds .arbor-cart .cart_totals .arbor-savings th,
body.arbor-ds .arbor-cart .cart_totals .arbor-savings td { color: var(--ds-brand) !important; font-weight: 600; }
body.arbor-ds .arbor-cart .cart_totals .order-total th { font-family: var(--ds-font-head); font-weight: 700; font-size: 16px; color: var(--ds-ink); padding-top: 14px !important; }
body.arbor-ds .arbor-cart .cart_totals .order-total td { font-family: var(--ds-font-head); font-weight: 800; font-size: 21px; padding-top: 14px !important; }
/* beat the theme's crimson price colour on the inner strong/span/bdi */
body.arbor-ds .arbor-cart .cart_totals .order-total td,
body.arbor-ds .arbor-cart .cart_totals .order-total td * { color: var(--ds-ink) !important; }
/* Phones: the totals table is `shop_table_responsive`, so WooCommerce's small-screen
   CSS hides every <th> and expects td::before{content:attr(data-title)} — which reeco
   suppresses, leaving bare numbers with no "Cena bez popusta / Vaša ušteda / Ukupno".
   Keep it a real two-column table at every width: label left, amount right. */
@media (max-width: 768px) {
	body.arbor-ds .arbor-cart .cart_totals table tr { display: table-row !important; }
	body.arbor-ds .arbor-cart .cart_totals table th { display: table-cell !important; width: auto !important; }
	body.arbor-ds .arbor-cart .cart_totals table td { display: table-cell !important; }
	body.arbor-ds .arbor-cart .cart_totals table td::before { content: none !important; display: none !important; }
	body.arbor-ds .arbor-cart .cart_totals table tr td[colspan] { text-align: left !important; } /* beats WC (0,2,3) td{text-align:right!important} */
}
body.arbor-ds .arbor-cart .wc-proceed-to-checkout { padding: 0; }
body.arbor-ds .arbor-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--ds-brand) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--ds-radius-pill) !important;
	padding: 16px 24px !important;
	font-family: var(--ds-font-body) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	margin: 0 !important;
}
body.arbor-ds .arbor-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #8f0b17 !important; }

/* Cross-sells relocated below the grid */
body.arbor-ds.woocommerce-cart .cross-sells { margin-top: 40px; }

/* Empty cart */
body.arbor-ds .arbor-cart-empty {
	max-width: 540px;
	margin: 20px auto;
	text-align: center;
	background: var(--ds-surface);
	border-radius: var(--ds-radius);
	padding: 56px 40px;
}
/* mobile: explicit side margins so the card doesn't touch the screen edges
   (max-width + margin:auto collapses to full-bleed below the max-width) */
@media (max-width: 768px) {
	body.arbor-ds .arbor-cart-empty { margin: 8px 16px 20px; padding: 44px 26px; }
}
body.arbor-ds .arbor-cart-empty__icon { display: inline-flex; color: var(--ds-brand); margin-bottom: 18px; }
body.arbor-ds .arbor-cart-empty__icon svg { width: 54px; height: 54px; }
body.arbor-ds .arbor-cart-empty__title { font-family: var(--ds-font-head); font-weight: var(--ds-fw-heading); font-size: 24px; color: var(--ds-ink); margin: 0 0 10px 0; }
body.arbor-ds .arbor-cart-empty__text { font-family: var(--ds-font-body); font-size: 15px; color: var(--ds-body); line-height: 1.6; margin: 0 auto 26px; max-width: 400px; }
body.arbor-ds .arbor-cart-empty__btn {
	display: inline-block;
	background: var(--ds-brand);
	color: #fff !important;
	border-radius: var(--ds-radius-pill);
	padding: 15px 32px;
	font-family: var(--ds-font-body);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}
body.arbor-ds .arbor-cart-empty__btn:hover { background: #8f0b17; }

/* ================================================================= *
 *  THANK YOU (order-received)
 * ================================================================= */
body.arbor-ds .arbor-thankyou { max-width: 760px; margin: 0 auto; }
body.arbor-ds .arbor-thankyou__hero { text-align: center; padding: 12px 0 26px; }
body.arbor-ds .arbor-thankyou__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 68px; height: 68px; border-radius: 999px;
	background: var(--ds-brand); color: #fff;
	margin-bottom: 18px;
}
body.arbor-ds .arbor-thankyou__check svg { width: 34px; height: 34px; }
body.arbor-ds .arbor-thankyou__title { font-family: var(--ds-font-head); font-weight: var(--ds-fw-display); font-size: 32px; color: var(--ds-ink); margin: 0 0 10px 0; }
body.arbor-ds .arbor-thankyou__lead { font-family: var(--ds-font-body); font-size: 16px; color: var(--ds-body); line-height: 1.6; margin: 0 auto; max-width: 520px; }

/* Order overview → chip grid card */
body.arbor-ds .arbor-thankyou .woocommerce-order-overview {
	list-style: none;
	margin: 0 0 28px 0;
	padding: 30px;
	background: var(--ds-surface);
	border-radius: var(--ds-radius);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 22px 18px;
	border: 0 !important;
}
/* reeco puts a clearfix ::before/::after on .order_details — as a grid child it
   becomes a phantom item that shoves the real fields out of the first column. */
body.arbor-ds .arbor-thankyou .woocommerce-order-overview::before,
body.arbor-ds .arbor-thankyou .woocommerce-order-overview::after { content: none !important; display: none !important; }
body.arbor-ds .arbor-thankyou .woocommerce-order-overview li {
	border: 0 !important;
	margin: 0; padding: 0;
	font-family: var(--ds-font-body);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ds-body);
	text-align: left;
}
body.arbor-ds .arbor-thankyou .woocommerce-order-overview li strong {
	display: block;
	margin-top: 5px;
	font-family: var(--ds-font-head);
	font-weight: 500;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ds-ink);
	overflow-wrap: anywhere; /* long emails must break cleanly, not overflow */
}

/* Order + customer details tables */
body.arbor-ds .arbor-thankyou .woocommerce-order-details,
body.arbor-ds .arbor-thankyou .woocommerce-customer-details {
	background: var(--ds-surface);
	border-radius: var(--ds-radius);
	padding: 34px;
	margin-bottom: 24px;
}
body.arbor-ds .arbor-thankyou .woocommerce-column__title,
body.arbor-ds .arbor-thankyou .woocommerce-order-details__title {
	font-family: var(--ds-font-head);
	font-weight: var(--ds-fw-heading);
	font-size: 19px;
	color: var(--ds-ink);
	margin: 0 0 16px 0;
}
/* line item = full-width .arbor-line card row (override adds thumb + structure);
   totals = clean th/td rows. reeco's 50px table padding is zeroed like the summary. */
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details { width: 100%; border: 0; padding: 0 !important; margin: 4px 0 0 0; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details thead { display: none; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details th,
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details td { border: 0 !important; padding: 0 !important; background: transparent !important; font-family: var(--ds-font-body); vertical-align: baseline; }
body.arbor-ds .arbor-thankyou .order_item td.product-name { padding: 12px 0 !important; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot th,
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot td { padding: 10px 0 !important; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot tr:first-child th,
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot tr:first-child td { padding-top: 18px !important; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--ds-body); text-align: left; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot td { text-align: right; font-weight: 600; color: var(--ds-ink); white-space: nowrap; }
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot tr:last-child th,
body.arbor-ds .arbor-thankyou .woocommerce-table--order-details tfoot tr:last-child td { font-family: var(--ds-font-head); font-weight: 800; font-size: 18px; color: var(--ds-ink); }
body.arbor-ds .arbor-thankyou .arbor-line__name a { color: var(--ds-ink); text-decoration: none; }
body.arbor-ds .arbor-thankyou address { font-style: normal; font-family: var(--ds-font-body); color: var(--ds-body); line-height: 1.7; border: 0; }

/* order-item option meta (thank-you) — matches the summary meta; plan row crimson */
body.arbor-ds .arbor-order-meta { display: block; margin-top: 4px; font-size: 12px; line-height: 1.55; }
body.arbor-ds .arbor-order-meta__row { display: block; color: var(--ds-body); }
body.arbor-ds .arbor-order-meta__row .k { color: #a0a0a0; font-weight: 500; }
body.arbor-ds .arbor-order-meta__row.is-plan,
body.arbor-ds .arbor-order-meta__row.is-plan .k { color: var(--ds-brand); font-weight: 600; }

/* bundled component lines nested under their parent (matches checkout summary) */
body.arbor-ds .arbor-thankyou .order_item + .order_item:not(.arbor-component-item) td.product-name { padding-top: 20px !important; }
body.arbor-ds .arbor-thankyou .order_item.arbor-component-item td.product-name { padding-top: 4px !important; }
body.arbor-ds .arbor-thankyou .order_item.arbor-component-item .arbor-line { padding-left: 20px; gap: 10px; }
body.arbor-ds .arbor-thankyou .order_item.arbor-component-item .arbor-line__thumb { flex: 0 0 40px; width: 40px; height: 40px; }
body.arbor-ds .arbor-thankyou .order_item.arbor-component-item .arbor-line__name { font-size: 13px; font-weight: 500; color: var(--ds-body); }
body.arbor-ds .arbor-thankyou .order_item.arbor-component-item .arbor-line__price { font-size: 13.5px; font-weight: 600; color: var(--ds-body); }

/* BACS bank details block, if present */
body.arbor-ds .arbor-thankyou .woocommerce-order .wc-bacs-bank-details,
body.arbor-ds .arbor-thankyou .woocommerce-bacs-bank-details {
	background: var(--ds-surface);
	border-radius: var(--ds-radius);
	padding: 24px 28px;
	margin-bottom: 22px;
	list-style: none;
}
body.arbor-ds .arbor-thankyou .wc-bacs-bank-details-heading,
body.arbor-ds .arbor-thankyou .woocommerce-order h2 {
	font-family: var(--ds-font-head);
	font-weight: var(--ds-fw-heading);
	font-size: 19px;
	color: var(--ds-ink);
	margin: 0 0 14px 0;
}

/* ================================================================= *
 *  CART / THANK-YOU responsive
 * ================================================================= */
@media (max-width: 992px) {
	body.arbor-ds .arbor-cart { grid-template-columns: 1fr; gap: 20px; }
	body.arbor-ds .arbor-cart__aside { position: static; }
}
@media (max-width: 768px) {
	/* Rebuild the line-item as a clean grid (reeco's shop_table_responsive rules
	   otherwise stack the cells and collide with the flex row). */
	/* reeco's shop_table_responsive rules are more specific (4 classes) → use
	   !important on the layout-critical props to keep our grid + 64px thumb. */
	body.arbor-ds .arbor-cart tr.woocommerce-cart-form__cart-item {
		display: grid !important;
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"thumb name"
			"thumb price"
			"thumb qty"
			"thumb subtotal";
		column-gap: 14px;
		row-gap: 9px;
		align-items: center;
		padding: 16px 44px 16px 14px;
	}
	/* WooCommerce's small-screen cart CSS hides the thumbnail cell — force it back. */
	body.arbor-ds .arbor-cart td.product-thumbnail { grid-area: thumb; display: block !important; align-self: start; flex: none; width: 64px !important; text-align: left !important; padding: 0 !important; }
	body.arbor-ds .arbor-cart td.product-thumbnail img { width: 64px !important; height: 64px !important; border-radius: 14px !important; object-fit: cover !important; }
	body.arbor-ds .arbor-cart td.product-name { grid-area: name; text-align: left !important; }
	body.arbor-ds .arbor-cart td.product-price { grid-area: price; }
	body.arbor-ds .arbor-cart td.product-quantity { grid-area: qty; }
	body.arbor-ds .arbor-cart td.product-subtotal { grid-area: subtotal; }
	body.arbor-ds .arbor-cart td.product-price,
	body.arbor-ds .arbor-cart td.product-quantity,
	body.arbor-ds .arbor-cart td.product-subtotal {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		min-width: 0;
		text-align: right;
	}
	body.arbor-ds .arbor-cart td.product-subtotal { font-size: 15px !important; }
	/* reeco emits td::before = data-title on mobile — reuse it as the left label */
	body.arbor-ds .arbor-cart td.product-price::before,
	body.arbor-ds .arbor-cart td.product-quantity::before,
	body.arbor-ds .arbor-cart td.product-subtotal::before {
		content: attr(data-title);
		float: none !important;
		margin: 0 !important;
		font-family: var(--ds-font-body);
		font-weight: 500;
		font-size: 13px;
		color: var(--ds-body);
		text-transform: none;
	}
	body.arbor-ds .arbor-cart td.product-thumbnail::before,
	body.arbor-ds .arbor-cart td.product-name::before,
	body.arbor-ds .arbor-cart td.product-remove::before { content: none !important; display: none !important; }

	/* stack the actions (coupon field, apply, update) full-width */
	body.arbor-ds .arbor-cart td.actions { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; }
	body.arbor-ds .arbor-cart td.actions .coupon { display: flex !important; flex: none; width: 100%; flex-direction: column; gap: 10px; margin: 0; }
	body.arbor-ds .arbor-cart td.actions .coupon input.input-text,
	body.arbor-ds .arbor-cart td.actions .coupon button,
	body.arbor-ds .arbor-cart td.actions > button[name="update_cart"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

	body.arbor-ds .arbor-thankyou__title { font-size: 26px; }
}