/* =========================================================================
   Cakes & Bakes — WooCommerce skin
   Applies the brand palette/typography on top of WooCommerce defaults, and
   lays out the bespoke shop / product / cart / checkout / account screens.
   ========================================================================= */

.woocommerce, .woocommerce-page { font-family: var(--cb-sans); color: var(--cb-ink); }
.woocommerce .woocommerce-breadcrumb { display:none; }
.woocommerce-Price-amount { font-family: var(--cb-sans); }

/* -------------------------------------------------- Buttons (pill, brand) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button, .woocommerce #place_order {
	background: var(--cb-red); color: var(--cb-cream); font: 800 15px var(--cb-sans);
	padding: 14px 28px; border-radius: 999px; border: none; white-space: nowrap;
	transition: transform .2s ease, background .2s ease; box-shadow: 0 10px 24px rgba(196,36,48,.24);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce .button:hover, .woocommerce #place_order:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--cb-red-dark); color: var(--cb-cream); transform: translateY(-2px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--cb-red); color: var(--cb-cream); }
.woocommerce .button.wc-backward, .woocommerce a.button.wc-forward {
	background: transparent; color: var(--cb-blue); border: 2px solid var(--cb-blue); box-shadow: none;
}
.woocommerce .button.wc-backward:hover, .woocommerce a.button.wc-forward:hover { background: var(--cb-blue-tint); color: var(--cb-blue); }

/* -------------------------------------------------------- Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	border-top: none; border-radius: 12px; font: 600 14px var(--cb-sans); padding: 14px 18px 14px 44px;
}
.woocommerce-message { background: var(--cb-ok-bg); color: var(--cb-ok-ink); border: 1px solid var(--cb-ok-line); }
.woocommerce-info    { background: var(--cb-blue-tint2); color: var(--cb-blue); border: 1px solid #D7D9F3; }
.woocommerce-error   { background: var(--cb-err-bg); color: var(--cb-err-ink); border: 1px solid var(--cb-err-line); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: inherit; }
.woocommerce-message a.button { padding: 8px 16px; font-size: 13px; box-shadow: none; }

/* =========================================================================
   SHOP GRID
   ========================================================================= */
.woocommerce ul.products, .woocommerce-page ul.products {
	list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* WooCommerce adds clearfix pseudo-elements to ul.products. In a grid container
   they become stray grid cells (the ::before lands in row 1 / col 1 and pushes
   the first card into column 2), so switch them off. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; display: none; }
/* Fill the grid track. !important beats WooCommerce's more specific
   `.columns-3 li.product{width:30.75%}` float-layout rules. */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; padding: 0; clear: none !important;
}
.woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after { content: none; }

.cb-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.cb-chip-pill {
	padding:9px 18px; border-radius:999px; white-space:nowrap; font:700 13.5px var(--cb-sans);
	border:1.5px solid var(--cb-blue); background:transparent; color:var(--cb-blue); text-decoration:none; transition:.2s ease;
	cursor:pointer; appearance:none; -webkit-appearance:none; line-height:normal;
}
.cb-chip-pill:hover { opacity:.85; }
.cb-chip-pill.is-active { background:var(--cb-blue); color:var(--cb-cream); }

.woocommerce nav.woocommerce-pagination { margin-top:40px; text-align:left; }
.woocommerce nav.woocommerce-pagination ul { border:none; display:inline-flex; gap:8px; }
.woocommerce nav.woocommerce-pagination ul li { border:none; margin:0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	border:1.5px solid var(--cb-line); border-radius:10px; padding:8px 14px; color:var(--cb-ink); font:700 14px var(--cb-sans);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background:var(--cb-blue); color:var(--cb-cream); border-color:var(--cb-blue); }

/* =========================================================================
   SINGLE PRODUCT
   ========================================================================= */
.cb-back { font:700 13.5px var(--cb-sans); color:var(--cb-muted2); text-decoration:none; }
.cb-back:hover { color:var(--cb-red); }
.cb-pimg { aspect-ratio:1/1; max-height:calc(100vh - 140px); border-radius:24px; overflow:hidden;
	background:repeating-linear-gradient(45deg,#F3E6D4 0 14px,#FBF3E7 14px 28px); position:sticky; top:96px; align-self:start; }
.cb-pimg .cb-pimg-photo, .cb-pimg img { width:100%; height:100%; object-fit:cover; display:block; }
.cb-p-cat { font:600 12px var(--cb-sans); letter-spacing:.14em; color:var(--cb-blue); text-transform:uppercase; }
.cb-p-title { font:700 46px/1.1 var(--cb-serif); margin:10px 0 14px; color:var(--cb-ink); }
.cb-p-price { font:800 28px var(--cb-sans); color:var(--cb-red); margin-bottom:18px; }
.cb-p-price .woocommerce-Price-amount { color:var(--cb-red); }
.cb-p-desc { font:400 16.5px/1.65 var(--cb-sans); color:var(--cb-muted); margin:0 0 28px; }
.cb-p-desc p { margin:0 0 10px; }
.cb-opt-label { font:800 13px var(--cb-sans); letter-spacing:.12em; color:var(--cb-ink); margin-bottom:10px; }
.cb-opt-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.cb-opt { cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:14px;
	white-space:nowrap; font:700 13.5px var(--cb-sans); border:1.5px solid var(--cb-blue); background:transparent; color:var(--cb-blue); }
.cb-opt .woocommerce-Price-amount { color:inherit; }
.cb-opt.is-active { background:var(--cb-blue); color:var(--cb-cream); }
.cb-opt .cb-dot { width:12px; height:12px; border-radius:50%; flex:none; }

/* A combination this cake isn't made in (or is out of stock) — e.g. a size
   offered in vanilla only. Still visible, so the range reads clearly. */
.cb-opt.is-disabled { cursor:not-allowed; opacity:.4; border-color:var(--cb-line); color:var(--cb-muted2);
	background:transparent; text-decoration:line-through; }
.cb-opt.is-disabled.is-active { background:transparent; color:var(--cb-muted2); }

/* Add/Buy while no valid combination is selected. */
.cb-p-actions .cb-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---- Message on your cake ---- */
.cb-opt-optional { font-weight:600; letter-spacing:0; text-transform:none; color:var(--cb-muted2); margin-left:6px; font-size:12px; }
.cb-msg-field { margin-bottom:22px; }
.cb-msg-input { width:100%; padding:13px 16px; border-radius:14px; border:1.5px solid var(--cb-line);
	background:var(--cb-white); font:600 14.5px var(--cb-sans); color:var(--cb-ink); }
.cb-msg-input::placeholder { color:var(--cb-muted2); font-weight:500; }
.cb-msg-input:focus { outline:none; border-color:var(--cb-blue); box-shadow:0 0 0 3px var(--cb-blue-tint); }
.cb-msg-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; flex-wrap:wrap; }
.cb-msg-picks { display:flex; gap:7px; flex-wrap:wrap; }
.cb-msg-pick { cursor:pointer; font:700 12px var(--cb-sans); color:var(--cb-blue); background:var(--cb-blue-tint2);
	border:1px solid var(--cb-blue-tint); border-radius:999px; padding:5px 12px; transition:.15s ease; }
.cb-msg-pick:hover { background:var(--cb-blue); color:var(--cb-cream); border-color:var(--cb-blue); }
.cb-msg-count { font:700 11.5px var(--cb-sans); color:var(--cb-muted2); white-space:nowrap; }
.cb-msg-count.is-full { color:var(--cb-red); }
.cb-p-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:28px; }
.cb-qty { display:flex; align-items:center; border:1.5px solid var(--cb-line); border-radius:999px; overflow:hidden; }
.cb-qty button { cursor:pointer; padding:11px 18px; font:800 16px var(--cb-sans); color:var(--cb-blue); background:none; border:none; }
.cb-qty button:hover { background:var(--cb-cream2); }
.cb-qty .cb-qty-val { padding:11px 8px; font:800 15px var(--cb-sans); min-width:32px; text-align:center; }

/* Editable variant used in the basket — same pill, real <input> so the form
   still submits if JS is unavailable. */
.cb-qty-sm button { padding:8px 14px; font-size:15px; }
.cb-qty-input {
	width:42px; padding:8px 0; border:none; background:none; text-align:center;
	font:800 15px var(--cb-sans); color:var(--cb-ink); appearance:textfield; -moz-appearance:textfield;
}
.cb-qty-input::-webkit-outer-spin-button,
.cb-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cb-qty-input:focus { outline:none; }
.cb-qty.is-busy { opacity:.45; pointer-events:none; }
.cb-qty-one { font:800 15px var(--cb-sans); color:var(--cb-ink); }
/* The stepper saves by itself once JS is running. */
.cb-ajax-cart [name="update_cart"] { display:none; }
.cb-p-notes { background:var(--cb-cream2); border-radius:16px; padding:20px 24px; display:flex; flex-direction:column; gap:10px; }
.cb-p-notes div { font:600 14px var(--cb-sans); color:var(--cb-muted); }

/* =========================================================================
   CART
   ========================================================================= */
.cb-cart-title { font:700 48px var(--cb-serif); margin:0 0 30px; color:var(--cb-ink); }
.cb-cart-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:36px; align-items:start; }
.cb-cart-items { display:flex; flex-direction:column; gap:14px; }
.cb-cart-row { display:flex; gap:18px; align-items:center; background:#fff; border:1px solid var(--cb-line); border-radius:16px; padding:16px 20px; }
.cb-cart-row .cb-cr-img { width:84px; height:84px; border-radius:12px; overflow:hidden; flex:none;
	background:repeating-linear-gradient(45deg,#F3E6D4 0 10px,#FBF3E7 10px 20px); }
.cb-cart-row .cb-cr-img img { width:100%; height:100%; object-fit:cover; }
.cb-cart-row .cb-cr-main { flex:1; min-width:0; }
.cb-cart-row .cb-cr-name { font:700 17px var(--cb-serif); color:var(--cb-ink); }
.cb-cart-row .cb-cr-sub { font:600 13px var(--cb-sans); color:var(--cb-muted2); margin-top:3px; }
.cb-cart-row .cb-cr-line { font:800 16px var(--cb-sans); color:var(--cb-red); min-width:76px; text-align:right; }
.cb-cart-row .cb-cr-remove { color:var(--cb-muted2); text-decoration:none; font:700 15px var(--cb-sans); padding:6px; }
.cb-cart-row .cb-cr-remove:hover { color:var(--cb-red); }
.cb-cart-qty { display:flex; align-items:center; border:1.5px solid var(--cb-line); border-radius:999px; overflow:hidden; }
.cb-cart-qty button { cursor:pointer; padding:8px 14px; font:800 15px var(--cb-sans); color:var(--cb-blue); background:none; border:none; }
.cb-cart-qty button:hover { background:var(--cb-cream2); }
.cb-cart-qty .cb-cq-val { padding:8px 6px; font:800 14px var(--cb-sans); min-width:28px; text-align:center; }
.cb-summary { background:#fff; border:1px solid var(--cb-line); border-radius:20px; padding:28px; position:sticky; top:96px; }
.cb-summary h3 { font:700 22px var(--cb-serif); margin:0 0 18px; color:var(--cb-ink); }
.cb-summary .cb-line { display:flex; justify-content:space-between; font:600 15px var(--cb-sans); color:var(--cb-muted); margin-bottom:10px; }
.cb-summary .cb-total { border-top:1.5px solid var(--cb-line); padding-top:14px; display:flex; justify-content:space-between; font:800 18px var(--cb-sans); color:var(--cb-ink); margin:6px 0 20px; }
.cb-summary .cb-total span:last-child { color:var(--cb-red); }
.cb-summary .cb-note { font:600 12.5px var(--cb-sans); color:var(--cb-muted2); text-align:center; margin-top:12px; }
.cb-empty { text-align:center; padding:72px 20px; background:var(--cb-cream2); border-radius:20px; }
.cb-empty b { font:700 26px var(--cb-serif); color:var(--cb-ink); margin-bottom:10px; display:block; }
.cb-empty span { font:400 15.5px var(--cb-sans); color:var(--cb-muted); margin-bottom:24px; display:block; }

/* =========================================================================
   CART — WooCommerce **block** skin  (wp:woocommerce/cart)
   The live Cart page renders the block cart, not the classic cart.php above,
   so the brand is applied directly to the block markup here: cream/white
   cards, serif headings, brand-red totals and a red pill checkout CTA.
   ========================================================================= */
.wc-block-cart { color: var(--cb-ink); }

/* ---- Two-column layout: breathe between items and the summary card. */
.wc-block-cart.is-large .wc-block-cart__main { padding-right: 44px; }
.wc-block-cart.is-large .wc-block-cart__sidebar { flex: 0 0 358px; max-width: 380px; }

/* ---- Items table --------------------------------------------------------- */
.wc-block-cart-items { border: none; }
.wc-block-cart-items__header {
	text-transform: uppercase; letter-spacing: .12em;
	font: 800 12px var(--cb-sans); color: var(--cb-muted2);
	border-bottom: 2px solid var(--cb-line); padding-bottom: 14px;
}
.wc-block-cart-items__row td { border-top: 1px solid var(--cb-line); padding: 22px 0; }
.wc-block-cart-items__row:first-child td { border-top: none; }

.wc-block-cart-item__image { padding-right: 20px; }
.wc-block-cart-item__image img {
	width: 88px; height: 88px; object-fit: cover; border-radius: 14px;
	background: repeating-linear-gradient(45deg,#F3E6D4 0 10px,#FBF3E7 10px 20px);
}

.wc-block-components-product-name { font: 700 18px var(--cb-serif); color: var(--cb-ink); text-decoration: none; }
a.wc-block-components-product-name:hover { color: var(--cb-red); }
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-cart-item__prices {
	font: 600 13.5px var(--cb-sans); color: var(--cb-muted2); margin-top: 4px;
}
.wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__total .wc-block-components-product-price {
	font: 800 17px var(--cb-sans); color: var(--cb-red);
}
.wc-block-cart-item__remove-link {
	color: var(--cb-muted2); font: 700 12.5px var(--cb-sans); text-decoration: none;
	border-bottom: 1px solid transparent; transition: color .15s ease;
}
.wc-block-cart-item__remove-link:hover { color: var(--cb-red); border-bottom-color: currentColor; }

/* ---- Quantity stepper — brand pill --------------------------------------- */
.wc-block-components-quantity-selector {
	border: 1.5px solid var(--cb-line) !important; border-radius: 999px !important;
	overflow: hidden; max-width: 118px;
}
.wc-block-components-quantity-selector__input { font: 800 15px var(--cb-sans); color: var(--cb-ink); }
.wc-block-components-quantity-selector__button { color: var(--cb-blue); font-weight: 800; transition: background .15s ease; }
.wc-block-components-quantity-selector__button:hover { background: var(--cb-cream2); color: var(--cb-blue); }

/* ---- Summary card -------------------------------------------------------- */
.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: #fff; border: 1px solid var(--cb-line); border-radius: 20px;
	padding: 28px; position: sticky; top: 96px; box-shadow: 0 12px 30px rgba(42,36,64,.05);
}
.wc-block-cart__totals-title {
	font: 700 22px var(--cb-serif) !important; color: var(--cb-ink) !important;
	text-transform: none !important; letter-spacing: 0 !important; text-align: left;
	display: block; margin-bottom: 18px;
}
.wc-block-components-totals-item { font: 600 15px var(--cb-sans); color: var(--cb-muted); }
.wc-block-components-totals-item__label { color: var(--cb-muted); }
.wc-block-components-totals-item__value { color: var(--cb-ink); font-weight: 700; }

/* coupon accordion + apply field */
.wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-components-totals-coupon__button.wc-block-components-button.link {
	color: var(--cb-blue) !important; font: 800 14px var(--cb-sans);
}
.wc-block-components-totals-coupon .wc-block-components-text-input input[type=text] {
	border: 1.5px solid var(--cb-line); border-radius: 12px;
}

/* estimated total */
.wc-block-components-totals-footer-item { border-top: 1.5px solid var(--cb-line); margin-top: 6px; padding-top: 16px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font: 800 17px var(--cb-sans); color: var(--cb-ink); text-transform: none;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font: 800 22px var(--cb-sans); color: var(--cb-red);
}

/* ---- Proceed to checkout — red pill CTA ---------------------------------- */
.wc-block-cart__submit-container { margin-top: 20px; }
.wc-block-cart__submit-button.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button {
	background: var(--cb-red) !important; color: var(--cb-cream) !important;
	border: none !important; border-radius: 999px !important; width: 100%;
	font: 800 16px var(--cb-sans); padding: 16px 24px;
	box-shadow: 0 10px 24px rgba(196,36,48,.28); transition: background .2s ease, transform .2s ease;
}
.wc-block-cart__submit-button.wc-block-components-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button:hover {
	background: var(--cb-red-dark) !important; color: var(--cb-cream) !important; transform: translateY(-2px);
}

/* ---- Cross-sells + empty state ------------------------------------------- */
.wp-block-woocommerce-product-collection { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--cb-line); }
.wp-block-woocommerce-product-collection > .wp-block-heading,
.wc-block-cart__empty-cart__title {
	font-family: var(--cb-serif) !important; font-weight: 700 !important; color: var(--cb-ink) !important;
}

@media (max-width: 860px) {
	.wc-block-cart.is-large .wc-block-cart__main { padding-right: 0; }
	.wc-block-cart__sidebar .wc-block-components-sidebar { position: static; }
}

/* =========================================================================
   CHECKOUT
   ========================================================================= */
.woocommerce-checkout .cb-woo > h1, .woocommerce-checkout h1.entry-title { font:700 48px var(--cb-serif); color:var(--cb-ink); margin-bottom:30px; }
/* form.checkout is the grid. It has FOUR children once inc/delivery.php injects
   the fulfilment card, and inc/woocommerce.php wraps the heading + review table
   in .cb-summary-col — every child is placed explicitly so nothing auto-flows
   into the wrong row. */
.woocommerce form.checkout.woocommerce-checkout { display:grid; grid-template-columns:1.2fr .8fr; gap:24px 36px; align-items:start; }
.woocommerce form.checkout .cb-fulfil { grid-column:1; grid-row:1; }
.woocommerce form.checkout #customer_details { grid-column:1; grid-row:2; }
.woocommerce form.checkout .cb-summary-col { grid-column:2; grid-row:1 / span 2; position:sticky; top:96px; }
.woocommerce form.checkout #order_review_heading { margin:0 0 10px; font:700 22px var(--cb-serif); color:var(--cb-ink); }
@media(max-width:860px){
	.woocommerce form.checkout.woocommerce-checkout { grid-template-columns:1fr; }
	.woocommerce form.checkout .cb-fulfil,
	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout .cb-summary-col { grid-column:1; grid-row:auto; position:static; }
}

#customer_details, #order_review, .cb-fulfil { background:#fff; border:1px solid var(--cb-line); border-radius:20px; padding:32px; }
.cb-fulfil { display:flex; flex-direction:column; gap:16px; }
.cb-co-h3 { font:700 22px var(--cb-serif); margin:0; color:var(--cb-ink); }
.cb-fulfil-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cb-ful-card { cursor:pointer; border:2px solid var(--cb-line); background:#fff; border-radius:14px; padding:16px 18px; display:block; }
.cb-ful-card.is-active { border-color:var(--cb-blue); background:var(--cb-blue-tint2); }
.cb-ful-card.is-disabled { opacity:.55; cursor:not-allowed; }
.cb-ful-name { font:800 15px var(--cb-sans); color:var(--cb-ink); display:block; }
.cb-ful-card.is-disabled .cb-ful-name { color:#B8AEC0; }
.cb-ful-sub { font:600 12.5px var(--cb-sans); color:var(--cb-muted2); display:block; margin-top:3px; }
.cb-ful-blocked { background:var(--cb-err-bg); border:1px solid var(--cb-err-line); border-radius:12px; padding:13px 16px; font:600 13.5px/1.5 var(--cb-sans); color:var(--cb-err-ink); }
.cb-collect-panel { background:var(--cb-cream2); border-radius:14px; padding:16px 20px; }
.cb-collect-panel .cb-k { font:800 12px var(--cb-sans); letter-spacing:.12em; color:var(--cb-red); margin-bottom:6px; }
.cb-collect-panel .cb-v { font:600 15px/1.5 var(--cb-sans); color:var(--cb-ink); }
.cb-pc-help { font:600 12.5px var(--cb-sans); color:var(--cb-muted2); }
.cb-pc-msg { border-radius:12px; padding:12px 16px; font:700 13.5px/1.5 var(--cb-sans); }
.cb-pc-msg.is-ok { background:var(--cb-ok-bg); border:1px solid var(--cb-ok-line); color:var(--cb-ok-ink); }
.cb-pc-msg.is-bad { background:var(--cb-err-bg); border:1px solid var(--cb-err-line); color:var(--cb-err-ink); }
.cb-slot-note { background:var(--cb-blue-tint2); border-radius:12px; padding:13px 16px; font:600 13px/1.55 var(--cb-sans); color:var(--cb-blue); }

.woocommerce form .form-row label { font:700 13px var(--cb-sans); color:var(--cb-ink); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-checkout #order_comments { padding:12px 15px; border:1.5px solid var(--cb-line); border-radius:12px; font-size:15px; }
.woocommerce table.shop_table { border:1px solid var(--cb-line); border-radius:16px; }
.woocommerce-checkout #order_review .order-total .amount, .cart-collaterals .order-total .amount { color:var(--cb-red); font-weight:800; }
#payment, .woocommerce #payment { background:transparent; }
#payment div.payment_box, .woocommerce #payment div.payment_box { background:var(--cb-cream2); color:var(--cb-muted); }

/* ---- Payment methods — radio and label on one line, logos right ---------- */
.woocommerce #payment ul.payment_methods { padding:0; margin:0; border:none; list-style:none; }
.woocommerce #payment ul.payment_methods li {
	display:flex; align-items:center; flex-wrap:wrap; gap:10px;
	padding:14px 2px; border-bottom:1px solid var(--cb-line); margin:0;
}
.woocommerce #payment ul.payment_methods li:last-child { border-bottom:none; }
.woocommerce #payment ul.payment_methods li > input[type="radio"] { flex:none; width:17px; height:17px; margin:0; }
.woocommerce #payment ul.payment_methods li > label {
	flex:1 1 auto; display:flex; align-items:center; gap:10px; margin:0;
	font:700 15px var(--cb-sans); color:var(--cb-ink); cursor:pointer;
}
/* Beat WooCommerce's default `float:right` on gateway logos. */
.woocommerce #payment ul.payment_methods li label img {
	float:none; max-height:22px; width:auto; margin:0; display:inline-block; vertical-align:middle;
}
.woocommerce #payment ul.payment_methods li label > span:last-child { margin-left:auto; display:flex; align-items:center; gap:5px; }
.woocommerce #payment div.payment_box { flex:1 1 100%; margin:0; font:600 13.5px/1.55 var(--cb-sans); }
.woocommerce #payment div.payment_box::before { display:none; }

/* ---- Order review — show the cake so people see what they're buying ------ */
.woocommerce-checkout-review-order-table td.product-name { overflow:hidden; }
.cb-co-thumb {
	float:left; width:56px; height:56px; margin:0 12px 4px 0;
	border-radius:10px; border:1px solid var(--cb-line); object-fit:cover; background:var(--cb-cream2);
}
.woocommerce-checkout-review-order-table td.product-name .cb-co-name { font:700 14.5px var(--cb-sans); color:var(--cb-ink); }
.woocommerce-checkout-review-order-table td.product-name dl.variation { margin:4px 0 0; font:600 13px var(--cb-sans); color:var(--cb-muted2); }
.woocommerce-checkout-review-order-table td.product-name dl.variation dt,
.woocommerce-checkout-review-order-table td.product-name dl.variation dd { display:inline; margin:0; font-weight:600; }
.woocommerce-checkout-review-order-table td.product-name dl.variation dd { margin-right:8px; }
.woocommerce-checkout-review-order-table td.product-name dl.variation p { display:inline; margin:0; }

/* order-received / thankyou */
.woocommerce-order .woocommerce-thankyou-order-received { font:700 34px var(--cb-serif); color:var(--cb-ink); }

/* =========================================================================
   CHECKOUT — WooCommerce **block** skin  (wp:woocommerce/checkout)
   The live Checkout page renders the block checkout, not the classic
   form.checkout styled above, so the brand is applied to the block markup
   here: serif section titles, branded fields, a white order-summary card and
   the red pill Place-Order CTA (mirrors the cart-block skin).
   ========================================================================= */
.wc-block-checkout { color: var(--cb-ink); }
.wc-block-checkout.is-large .wc-block-checkout__main { padding-right: 44px; }

/* ---- Section headings ("Contact information", "Billing address", …) ------ */
.wc-block-components-checkout-step__title { font: 700 24px var(--cb-serif); color: var(--cb-ink); }
.wc-block-components-checkout-step__description { font: 600 13.5px var(--cb-sans); color: var(--cb-muted2); }

/* ---- Form fields — brand radius, focus ring + active label --------------- */
.wc-block-components-text-input input,
.wc-block-components-address-form input.wc-block-components-text-input__input,
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-select__container {
	border-radius: 12px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox.is-active .components-form-token-field__input-container {
	border-color: var(--cb-blue) !important; box-shadow: 0 0 0 1px var(--cb-blue) !important; outline: none;
}
.wc-block-components-text-input.is-active label { color: var(--cb-blue); }
.wc-block-checkout__main a, .wc-block-checkout__terms a { color: var(--cb-blue); }

/* ---- Order-summary card — match the cart summary ------------------------- */
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--cb-line) !important; border-radius: 18px !important;
	background: #fff; box-shadow: 0 12px 30px rgba(42,36,64,.05); overflow: hidden;
}
.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill { border: none !important; border-radius: 0 !important; }
.wc-block-components-checkout-order-summary__title {
	font: 700 22px var(--cb-serif) !important; color: var(--cb-ink) !important;
	text-transform: none !important; letter-spacing: 0 !important;
	border-top: none !important; border-bottom: 1px solid var(--cb-line) !important;
	padding: 18px 16px !important;
}

/* ---- Place Order — red pill CTA ----------------------------------------- */
.wc-block-components-checkout-place-order-button.wc-block-components-button {
	background: var(--cb-red) !important; color: var(--cb-cream) !important;
	border: none !important; border-radius: 999px !important; height: auto;
	font: 800 16px var(--cb-sans); padding: 18px 24px;
	box-shadow: 0 10px 24px rgba(196,36,48,.28); transition: background .2s ease, transform .2s ease;
}
.wc-block-components-checkout-place-order-button.wc-block-components-button:hover {
	background: var(--cb-red-dark) !important; color: var(--cb-cream) !important; transform: translateY(-2px);
}

@media (max-width: 860px) {
	.wc-block-checkout.is-large .wc-block-checkout__main { padding-right: 0; }
}

/* =========================================================================
   ACCOUNT
   ========================================================================= */
/* Two-column layout — only when signed in (the logged-out page shows a login
   form). Children are placed into explicit cells and any stray sibling (e.g. a
   notices wrapper) is forced to span full width, so nothing can knock the nav
   and content out of alignment. */
.logged-in.woocommerce-account .woocommerce {
	display:grid; grid-template-columns:244px minmax(0,1fr); column-gap:28px; align-items:start;
}
.logged-in.woocommerce-account .woocommerce > * { grid-column:1 / -1; }
.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column:1; grid-row:1; }
.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column:2; grid-row:1; }

/* ---- Navigation — branded sticky card with icons ------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width:auto; float:none; margin:0;
	background:#fff; border:1px solid var(--cb-line); border-radius:20px; padding:14px; position:sticky; top:96px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display:flex; align-items:center; gap:11px; padding:12px 16px; border-radius:12px;
	font:700 14.5px var(--cb-sans); color:var(--cb-ink); text-decoration:none; transition:background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background:var(--cb-cream2); color:var(--cb-blue); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background:var(--cb-blue); color:var(--cb-cream); }
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before { width:20px; font-size:15px; line-height:1; text-align:center; }
.woocommerce-MyAccount-navigation-link--dashboard a::before       { content:"\01F3E0"; }
.woocommerce-MyAccount-navigation-link--orders a::before          { content:"\01F9FE"; }
.woocommerce-MyAccount-navigation-link--downloads a::before       { content:"\002B07"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before    { content:"\01F4CD"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before    { content:"\01F464"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content:"\0021A9"; }

/* ---- Content card -------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content { background:#fff; border:1px solid var(--cb-line); border-radius:20px; padding:32px; min-width:0; }
.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top:0; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color:var(--cb-red); }

/* Dashboard greeting + quick-action cards */
.cb-acc-hello { font:700 22px var(--cb-serif); color:var(--cb-ink); margin:0 0 6px; }
.cb-acc-lead  { font:600 14.5px var(--cb-sans); color:var(--cb-muted); margin:0 0 22px; }
.cb-acc-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.cb-acc-card  { display:block; text-decoration:none; background:var(--cb-cream2); border:1px solid var(--cb-line); border-radius:16px; padding:20px; transition:transform .15s ease, box-shadow .15s ease; }
.cb-acc-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(42,36,64,.08); }
.cb-acc-card .cb-acc-ico { font-size:24px; line-height:1; }
.cb-acc-card b { display:block; font:800 15px var(--cb-sans); color:var(--cb-ink) !important; margin-top:12px; }
.cb-acc-card span { display:block; font:600 12.5px var(--cb-sans); color:var(--cb-muted2); margin-top:3px; }

/* ---- Orders / downloads tables ------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border:1px solid var(--cb-line); border-radius:14px; border-collapse:separate; border-spacing:0; overflow:hidden;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background:var(--cb-cream2); font:800 12px var(--cb-sans); text-transform:uppercase; letter-spacing:.08em; color:var(--cb-muted2); padding:14px 16px; border:none;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { padding:14px 16px; border-top:1px solid var(--cb-line); font:600 14px var(--cb-sans); color:var(--cb-ink); }

/* ---- Addresses (flexbox — lays out in DOM order, never staggers) --------- */
.woocommerce-account .woocommerce-MyAccount-content .addresses.col2-set { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.woocommerce-account .woocommerce-MyAccount-content .addresses.col2-set > .woocommerce-Address { flex:1 1 260px; min-width:0; width:auto; float:none; margin:0; }
.woocommerce-account .woocommerce-Address-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { font:700 20px var(--cb-serif); color:var(--cb-ink); margin:0; }
.woocommerce-account .woocommerce-Address-title .edit { font:700 13px var(--cb-sans); color:var(--cb-red); white-space:nowrap; }
.woocommerce-account address { font:600 14px/1.7 var(--cb-sans); color:var(--cb-muted); font-style:normal; background:var(--cb-cream2); border:1px solid var(--cb-line); border-radius:14px; padding:18px; margin-top:10px; }

/* ---- Edit forms (account details / addresses) --------------------------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row label { font:700 13px var(--cb-sans); color:var(--cb-ink); }
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select { padding:12px 15px; border:1.5px solid var(--cb-line); border-radius:12px; font-size:15px; }
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus { border-color:var(--cb-blue); box-shadow:0 0 0 1px var(--cb-blue); outline:none; }
.woocommerce-account .woocommerce-MyAccount-content fieldset { border:1px solid var(--cb-line); border-radius:16px; padding:18px 22px; margin-top:24px; }
.woocommerce-account .woocommerce-MyAccount-content fieldset legend { font:800 13px var(--cb-sans); color:var(--cb-blue); padding:0 8px; }

@media(max-width:860px){
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns:1fr 1fr; }
	.cb-cart-grid { grid-template-columns:1fr; }
	.cb-summary, #order_review, .cb-pimg { position:static; }
	.cb-pimg { aspect-ratio:16/11; max-height:320px; }
	.cb-fulfil-cards { grid-template-columns:1fr; }
	.logged-in.woocommerce-account .woocommerce { grid-template-columns:1fr; }
	.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column:1; grid-row:auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation { position:static; }
	.woocommerce-account .woocommerce-MyAccount-content .addresses.col2-set > .woocommerce-Address { flex-basis:100%; }
}
@media(max-width:560px){
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns:1fr; }

	/* The one-line basket row needs ~400px of runway — more than a phone has,
	   which pushed the whole page sideways. Restack it: thumbnail down the
	   left, name and remove on top, stepper and line total underneath. */
	.cb-cart-row {
		display:grid; align-items:center; gap:8px 14px; padding:14px 16px;
		grid-template-columns:64px minmax(0,1fr) auto;
		grid-template-areas:
			"img main remove"
			"img qty  line";
	}
	.cb-cart-row .cb-cr-img { grid-area:img; width:64px; height:64px; align-self:start; }
	.cb-cart-row .cb-cr-main { grid-area:main; }
	.cb-cart-row .cb-cr-qty { grid-area:qty; justify-self:start; }
	.cb-cart-row .cb-cr-line { grid-area:line; min-width:0; }
	.cb-cart-row .cb-cr-remove { grid-area:remove; align-self:start; padding:0 0 0 6px; }
	/* Product codes like "Barbie Blue Cake-WBC020" are one long token. */
	.cb-cart-row .cb-cr-name { overflow-wrap:anywhere; }
}