/* Palesa's Bakes & Treats -- Cart + Checkout blocks reskin.
   WooCommerce's Cart and Checkout are independent Gutenberg blocks
   (Store API + React); a fresh WooCommerce install (8.3+) defaults BOTH to
   blocks, and neither has a PHP template to override at all - the block
   markup and its class names are fixed. This is a full CSS reskin of both,
   exactly the pattern already used on Beau Skin Artistry
   (projects/#27 - Beau Skin Artistry/server-files/assets-css-checkout.css),
   re-tokenised onto this site's own palette (css/palesas.css --pk-* custom
   properties) instead of Beau Skin's dark/gold theme.

   Classic-template fallback: a handful of rules at the bottom also cover
   the CLASSIC shortcode cart/checkout markup (.cart_totals, .shop_table),
   in case either page is ever configured to use the shortcode instead of
   the block - see woocommerce/cart/cart.php's docblock for why both paths
   are covered rather than assumed.

   Enqueued conditionally on is_cart() || is_checkout() only
   (inc/woocommerce-setup.php). Not enqueued on checkout/thankyou.php,
   which is a classic PHP template with its own woocommerce-order rules
   below (that page always renders classic, blocks or not). */

.wc-block-components-sidebar-layout {
	display: flex;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 80px;
	gap: 40px;
	font-family: var(--pk-sans, "DM Sans", sans-serif);
	font-size: 13px;
	color: var(--pk-fg);
}
.wc-block-components-sidebar-layout * { box-sizing: border-box; }

.wc-block-components-main { flex: 1; min-width: 0; }
.wc-block-components-sidebar {
	/* Shrinkable, not rigid. `flex: 0 0 360px` refuses to give any width back,
	   which is survivable at 1440 and not at 768: WooCommerce switches itself
	   to its two-column composition at 768 (measured, see the band table in
	   the Responsive section), where the whole layout container is only ~700px.
	   A sidebar that will not shrink leaves the form ~340px.

	   `0 1 360px` was the first attempt and it was not enough: flex-shrink
	   only engages once the line OVERFLOWS, and with the main column on
	   `flex: 1` it simply surrenders the space instead, so the summary held a
	   full 360px and the FORM took the squeeze -- measured at 768px: sidebar
	   360, form 258. That inverts the hierarchy, giving the thing being read
	   more room than the thing being filled in. A percentage basis shares the
	   container properly at every width, and the clamp keeps 360px as the
	   ceiling on desktop and 240px as the floor so the totals never wrap. */
	flex: 0 1 clamp(240px, 34%, 360px);
	position: sticky;
	top: 24px;
	background: var(--pk-surface);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-r-xl, 14px);
	padding: 22px;
}

/* ================= CART ================= */
.wc-block-cart-items { width: 100%; border-collapse: collapse; }
.wc-block-cart-items__header th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pk-muted);
	padding: 0 0 14px;
	border-bottom: 1px solid var(--pk-border);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--pk-border); }
.wc-block-cart-item__image img { border-radius: var(--pk-r, 8px); display: block; }
.wc-block-cart-item__product { padding: 18px 14px; }
.wc-block-cart-item__image { padding: 18px 0; }
.wc-block-cart-item__total { padding: 18px 0; text-align: right; }

.wc-block-components-product-name {
	color: var(--pk-fg);
	font-family: var(--pk-display, "Outfit", sans-serif);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 4px;
}
.wc-block-components-product-name:hover { color: var(--pk-primary); }
.wc-block-cart-item__prices,
.wc-block-cart-item__total .price,
.wc-block-components-order-summary-item__total-price .price {
	color: var(--pk-primary);
	font-size: 13px;
	font-weight: 600;
}
.wc-block-components-product-details { font-size: 12px; color: var(--pk-muted); margin: 4px 0 10px; }

.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-pill, 20px);
	overflow: hidden;
	background: var(--pk-bg);
	/* 46, not 44, and the two pixels are the point. This container has a 1px
	   border and the layout sets `box-sizing: border-box`, so at height:44px
	   its CONTENT box is 42px and the buttons inside, which size at
	   height:100%, measured exactly 44x42 live. The comment below claimed 44
	   while the element was 42. 44 + 2 borders = 46 makes the button a real
	   44x44. Measured, 4 Sep 2026. */
	height: 46px;
}
.wc-block-components-quantity-selector__input {
	width: 36px !important;
	background: transparent !important;
	border: none !important;
	color: var(--pk-fg) !important;
	text-align: center;
	font-size: 13px !important;
	font-family: inherit !important;
	padding: 0 !important;
	height: 100%;
}
/* 44px, and the opacity override is the load-bearing half. WooCommerce core
   sets `opacity: .6` on this button itself, which composited the theme's own
   --pk-muted #6a6a6a down to an effective #a1a1a0 on --pk-bg: measured live on
   4 Sep 2026 at 2.34:1 against a 4.5 requirement, on six elements including the
   ENABLED plus button, not only the disabled minus. Setting `color` alone never
   fixed it because opacity is applied after the colour resolves. */
.wc-block-components-quantity-selector__button {
	background: transparent !important;
	border: none !important;
	color: var(--pk-fg) !important;
	opacity: 1 !important;
	/* `width` alone is not enough on a flex child: WooCommerce core sets a `flex`
	   shorthand on this button, and flex-basis wins over width for the main size,
	   so `width: 44px !important` can be the right value on the wrong property
	   and change nothing. flex-basis and min-width are what actually hold it. */
	flex: 0 0 44px !important;
	min-width: 44px !important;
	width: 44px !important;
	height: 100% !important;
	cursor: pointer;
	font-size: 15px !important;
}
/* And the container must be allowed to grow to fit three 44px children; core
   sets a fixed width on it, which would otherwise shrink them back. */
.wc-block-components-quantity-selector { width: auto !important; }
.wc-block-components-quantity-selector__button:hover:not(:disabled) { color: var(--pk-primary) !important; }
/* The disabled minus still has to read as "off" without becoming invisible.
   --pk-muted on --pk-bg is a measured 4.91:1, so it is stated as a colour
   rather than dimmed with opacity, which is what caused the failure above. */
.wc-block-components-quantity-selector__button:disabled {
	opacity: 1 !important;
	color: var(--pk-muted) !important;
	cursor: not-allowed;
}

/* Remove: a 24x24 hit area with no label, no confirm and no undo, sitting next
   to a quantity control. A mis-tap silently deleted a line item and the only
   clue was that the total changed. The glyph stays 16px; only the target grows. */
.wc-block-cart-item__remove-link {
	color: var(--pk-muted) !important;
	margin-left: 6px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.wc-block-cart-item__remove-link:hover { color: var(--pk-pink-ink, #d92e68) !important; }
.wc-block-cart-item__remove-link svg { width: 16px; height: 16px; fill: currentColor; }

.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--pk-display, "Outfit", sans-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--pk-fg);
	margin: 0 0 16px;
}

/* ================= SHARED: totals / coupon / order summary ================= */
.wc-block-components-totals-item__label { color: var(--pk-fg); font-size: 13px; }
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount { color: var(--pk-fg); font-size: 13px; }
.wc-block-components-totals-item { padding: 12px 0; border-bottom: 1px solid var(--pk-border); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--pk-primary) !important;
	border-bottom: none;
}
.wc-block-components-totals-footer-item { border-bottom: none; padding-top: 14px; }

.wc-block-components-panel__button { color: var(--pk-muted) !important; font-size: 12px !important; padding: 10px 0 !important; }
.wc-block-components-panel__button:hover { color: var(--pk-primary) !important; }
.wc-block-components-panel__button-icon { fill: currentColor; }
.wc-block-components-totals-coupon__button {
	background: transparent !important;
	border: 1px solid var(--pk-border) !important;
	color: var(--pk-fg) !important;
	border-radius: var(--pk-pill, 20px) !important;
	font-size: 12px !important;
}
/* Doubled class, deliberately. WooCommerce's coupon submit carries BOTH
   .wc-block-components-totals-coupon__button and .wc-block-components-button,
   which are equal specificity (0,1,0) and both !important, so the generic
   button rule further down the file was winning on source order alone: the
   outline pill rendered as a solid berry pill, and on hover the coupon rule's
   berry text met the generic rule's gold background at roughly 2.2:1. Doubling
   the class takes the specificity to (0,2,0) so the intended styling wins
   without touching the generic button. Found by the Reviewer, 4 Sep 2026. */
.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button {
	background: transparent !important;
	border: 1px solid var(--pk-border) !important;
	color: var(--pk-fg) !important;
}
.wc-block-components-totals-coupon__button.wc-block-components-totals-coupon__button:hover {
	background: transparent !important;
	border-color: var(--pk-primary) !important;
	color: var(--pk-primary) !important;
}

.wc-block-components-order-summary-item__image { position: relative; }
.wc-block-components-order-summary-item__image img { border-radius: var(--pk-r, 8px); }
.wc-block-components-order-summary-item__quantity {
	background: var(--pk-primary) !important;
	color: var(--pk-primary-fg, #fff) !important;
	font-size: 10px !important;
	font-weight: 700;
}
.wc-block-components-order-summary-item__description { padding-left: 12px; }
.wc-block-components-order-summary-item__individual-price,
.wc-block-components-order-summary-item__total-price .price {
	color: var(--pk-muted);
	font-weight: 400;
	font-size: 12px;
}

/* Buttons -- Proceed to Checkout / Place Order, matching the site's primary
   pill button (see .pk-btn in css/palesas.css). */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--pk-primary) !important;
	color: var(--pk-primary-fg, #fff) !important;
	border: 1px solid var(--pk-primary) !important;
	border-radius: var(--pk-pill, 999px) !important;
	padding: 13px 30px !important;
	/* The theme's own .pk-btn sets min-height:44px (palesas.css, the `.pk-btn`
	   rule -- NOT ecommerce.css, which carries no such declaration; an earlier
	   version of this comment named the wrong file). The block button never
	   carries .pk-btn at all, so nothing was "discarded": padding:13px plus the
	   line-height simply landed at ~43px, one pixel under the floor the design
	   system sets everywhere else. Stated explicitly rather than left to arithmetic. */
	min-height: 44px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--pk-gold-ink, #8a681f) !important;
	border-color: var(--pk-gold-ink, #8a681f) !important;
	transform: translateY(-1px);
}
.wc-block-components-button:disabled,
.wc-block-components-button[aria-disabled="true"],
.wc-block-cart__submit-button:disabled,
.wc-block-components-checkout-place-order-button:disabled {
	background: var(--pk-primary) !important;
	border-color: var(--pk-primary) !important;
	color: var(--pk-primary-fg, #fff) !important;
	opacity: 0.65 !important;
	cursor: progress;
	transform: none;
}

/* ================= CHECKOUT ================= */
.wc-block-components-checkout-step { border-top: 1px solid var(--pk-border); padding: 28px 0; }
.wc-block-components-checkout-step:first-child { border-top: none; padding-top: 0; }
.wc-block-components-checkout-step__title {
	font-family: var(--pk-display, "Outfit", sans-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--pk-fg);
	margin: 0 0 18px;
}
.wc-block-checkout__guest-checkout-notice { font-size: 12px; color: var(--pk-muted); margin-top: 10px; }

.wc-block-components-text-input { display: flex; flex-direction: column-reverse; margin-bottom: 16px; }
.wc-block-components-text-input label {
	position: static !important;
	transform: none !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pk-muted);
	margin-bottom: 8px;
	padding: 0 !important;
}
.wc-block-components-text-input input {
	width: 100%;
	background: var(--pk-bg) !important;
	border: 1px solid var(--pk-border) !important;
	color: var(--pk-fg) !important;
	border-radius: var(--pk-r, 8px) !important;
	padding: 11px 14px !important;
	font-size: 13px !important;
	font-family: inherit !important;
	height: auto !important;
}
/* Focus. This rule used to be `outline: none` plus a 1px border-colour change,
   which removed the site's own tokenised 2px :focus-visible ring (palesas.css)
   on the ONE page a keyboard or switch user most needs it: measured 4 Sep 2026,
   eight text inputs had no ring at all and #email had no indicator of any kind
   across a nine-field form. The border tint stays as the resting hint; the ring
   is what actually announces focus, and :focus-visible keeps it off a plain
   mouse click. */
.wc-block-components-text-input input:focus { border-color: var(--pk-primary) !important; }
.wc-block-components-text-input input:focus-visible,
.wc-blocks-components-select__select:focus-visible,
.wc-block-components-checkbox__input:focus-visible,
.wc-block-components-radio-control__input:focus-visible,
.wc-block-components-button:focus-visible,
.wc-block-components-panel__button:focus-visible,
.wc-block-components-totals-coupon__button:focus-visible,
.wc-block-components-address-card__edit:focus-visible,
.wc-block-components-address-form__address_2-toggle:focus-visible,
.wc-block-components-product-name:focus-visible,
.wc-block-cart-item__remove-link:focus-visible {
	outline: 2px solid var(--pk-ring, var(--pk-primary)) !important;
	outline-offset: 2px !important;
}
/* The stepper buttons need the ring drawn INSIDE their own box. Their container
   `.wc-block-components-quantity-selector` is `overflow: hidden` (it clips the
   children to the pill radius), and an ancestor with overflow:hidden clips a
   descendant's outline like anything else, so the usual +2px offset painted the
   ring straight into the clip and showed a sliver or nothing. A negative offset
   paints within the border box, which is not clipped. */
.wc-block-components-quantity-selector__button:focus-visible {
	outline: 2px solid var(--pk-ring, var(--pk-primary)) !important;
	outline-offset: -2px !important;
}

.wc-blocks-components-select { margin-bottom: 16px; }
.wc-blocks-components-select__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pk-muted);
	display: block;
	margin-bottom: 8px;
	position: static !important;
	transform: none !important;
}
.wc-blocks-components-select__select {
	width: 100%;
	background: var(--pk-bg) !important;
	border: 1px solid var(--pk-border) !important;
	color: var(--pk-fg) !important;
	border-radius: var(--pk-r, 8px) !important;
	padding: 11px 14px !important;
	font-size: 13px !important;
	font-family: inherit !important;
}
.wc-blocks-components-select__container { position: relative; background: transparent !important; }
.wc-blocks-components-select__expand { fill: var(--pk-muted); pointer-events: none; }

.wc-block-components-address-form__address_2-toggle { display: inline-block; font-size: 12px; color: var(--pk-muted); margin: -8px 0 16px; cursor: pointer; }
.wc-block-components-address-form__address_2-toggle:hover { color: var(--pk-primary); }

.wc-block-components-address-card { background: var(--pk-bg); border: 1px solid var(--pk-border); border-radius: var(--pk-r, 8px); padding: 14px; font-size: 13px; color: var(--pk-fg); }
.wc-block-components-address-card__edit { color: var(--pk-primary) !important; font-size: 12px; }

.wc-block-components-notice-banner { border-radius: var(--pk-r, 8px); padding: 14px 16px; font-size: 12px; }
.wc-block-components-notice-banner.is-error { background: rgba(217, 83, 106, 0.12); border: 1px solid rgba(217, 83, 106, 0.35); color: #a3183f; }
.wc-block-components-notice-banner svg { fill: currentColor; }

.wc-block-components-checkbox__label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pk-fg); cursor: pointer; }
.wc-block-components-checkbox__input { background: var(--pk-bg) !important; border: 1px solid var(--pk-border) !important; border-radius: 4px !important; cursor: pointer; }
.wc-block-components-checkbox__input:checked { background: var(--pk-primary) !important; border-color: var(--pk-primary) !important; }
.wc-block-components-checkbox__mark { fill: var(--pk-primary-fg, #fff) !important; }

.wc-block-components-radio-control-accordion-option {
	background: var(--pk-bg);
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-r, 10px);
	padding: 14px 16px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--pk-primary); background: rgba(110, 25, 55, 0.05); }
.wc-block-components-radio-control__option { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.wc-block-components-radio-control__input { background: var(--pk-bg) !important; border: 1px solid var(--pk-border) !important; margin-top: 1px; cursor: pointer; }
.wc-block-components-radio-control__input:checked { border: 5px solid var(--pk-primary) !important; background: var(--pk-bg) !important; }
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label { color: var(--pk-fg); font-size: 13px; font-weight: 500; }
.wc-block-components-radio-control-accordion-content { color: var(--pk-muted); font-size: 12px; line-height: 1.6; margin-top: 8px; padding-left: 32px; }
.wc-block-checkout__terms { font-size: 12px; color: var(--pk-muted); padding-top: 20px; border-top: 1px solid var(--pk-border); margin-top: 8px; }
.wc-block-checkout__terms a { color: var(--pk-fg); }
.wc-block-checkout__terms a:hover { color: var(--pk-primary); }

.wc-block-checkout__actions_row { margin-top: 20px; }
.wc-block-components-checkout-place-order-button--full-width { width: 100%; }

/* No payment gateway is ever enabled on this build (inc/woocommerce-setup.php
   forces an empty gateway list), so the payment step of Checkout normally
   renders WooCommerce's own "no payment methods available" notice rather
   than a gateway list. This is expected and correct, not a bug: see this
   build's standing rule that no real or test payment is ever processed. */

/* ---------- Responsive ---------- */

/* Two declarations here are load-bearing, and both were missing until
   4 September 2026. The layout above is `display:flex` with
   `align-items:flex-start`, and the sidebar is `flex: 0 0 360px`. Turning the
   parent to `column` changes what BOTH of those mean, and neither was reset:

   1. `align-items:flex-start` becomes a HORIZONTAL constraint in column
      direction, so the columns stop filling the viewport. Measured at 820px:
      the content collapsed to ~430px inside an 820px screen, leaving ~40% of a
      tablet blank and squeezing the order summary to 248px so product names
      wrapped to three lines. `stretch` restores full width.

   2. `flex-basis: 360px` becomes a fixed HEIGHT, with `flex-shrink: 0`
      forbidding it to shrink. Measured at 390px: the sidebar held itself open
      at exactly 360.0px around 316px of content, so the mobile checkout opened
      with 272px of empty white as its entire first screen, and the basket
      carried a similar ~101-117px void under the totals. Above 900px the
      content is taller than 360px, so `min-height:auto` hides the fault
      completely, which is why it survived every desktop review.

   Do not remove either line without re-screenshotting at 820 and 390.

   ⚠ THE BREAKPOINT IS 767, NOT 900, AND THAT IS THE WHOLE OF THE SECOND P0.
   Measured on the live checkout at fifteen widths, 4 September 2026:

     | viewport  | WooCommerce's own layout | Place Order vs the total |
     |-----------|--------------------------|--------------------------|
     | 360-720   | mobile composition       | correct: the full summary |
     |           |                          | renders INSIDE the actions |
     |           |                          | block, right above the button |
     | 768-900   | `is-large`, two columns  | BROKEN: button at 1495px,  |
     |           |                          | total at 2310px            |
     | 960+      | `is-large`, two columns  | correct                    |

   WooCommerce decides `is-mobile` vs `is-large` itself, from the CONTAINER
   width, in React -- CSS cannot reach that decision. Below 768 it moves the
   whole order summary into `.wc-block-checkout__actions`, immediately above
   Place Order, and sets `order: 0` on the sidebar and `order: 1` on the main
   column so the collapsed summary leads. From 768 up it composes for two
   side-by-side columns and leaves both at `order: 0`.

   This query used to end at 900, so between 768 and 900 it forced a SINGLE
   column onto content WooCommerce had already arranged for TWO. In DOM order
   the form (which contains Place Order) precedes the sidebar (which contains
   the total), so stacking them asks the customer to commit ~800px before the
   price appears. That is not a band that was designed badly; it is a band that
   was never designed, created purely by this query disagreeing with
   WooCommerce about which composition was in play.

   Ending at 767 makes the two agree: we only force a column where WooCommerce
   is already composing for one. 768-959 is left as the two-column row it was
   built to be, which is also what puts the (sticky) total permanently beside
   the form instead of 800px below the button.

   Do NOT "fix" the 768-900 band with `order: -1` on the sidebar instead. That
   was the obvious-looking move and it is wrong: at those widths the sidebar
   holds the FULL 777px summary, so it would put three-quarters of a screen of
   line items above the first form field, and the total would then sit ~2000px
   ABOVE the button rather than below it. Measured, not assumed. */
@media (max-width: 767px) {
	.wc-block-components-sidebar-layout {
		flex-direction: column;
		gap: 28px;
		align-items: stretch;
	}
	.wc-block-components-sidebar {
		position: static !important;
		flex: 0 0 auto;
		width: 100%;
	}
}

/* iOS zooms the whole viewport when a form control under 16px receives focus,
   and never zooms back. palesas.css already carries a site-wide 16px floor for
   this, but its `select` half is a bare element selector (0,0,1) and LOSES to
   `.wc-blocks-components-select__select` (0,1,0) below. Its `input` half wins
   on specificity, which is why inputs were fine and only Country/Region and
   Province zoomed: measured at 13px each on 4 September 2026. Restated here at
   a specificity that actually wins. */
/* Gated at 1024px, not 640px: iPadOS Safari zooms a sub-16px control at 768px
   portrait too, where these two selects were still 13px. The doubled class is
   deliberate for the same reason as the coupon button above -- it wins on its
   own specificity rather than depending on an ancestor wrapper that has never
   been confirmed to exist in the block markup ([[l-220]]). */
@media (max-width: 1024px) {
	.wc-blocks-components-select__select.wc-blocks-components-select__select,
	.wc-block-components-text-input input,
	.wc-block-components-textarea {
		font-size: 16px !important;
	}
}

@media (max-width: 640px) {
	/* Checkbox and radio rendered 20x20. These are the controls that choose the
	   shipping method and the payment method. */
	.wc-block-components-checkbox__input,
	.wc-block-components-radio-control__input {
		width: 24px !important;
		height: 24px !important;
		flex-shrink: 0;
	}
	.wc-block-components-checkbox__label,
	.wc-block-components-radio-control__option { min-height: 44px; }
}

@media (max-width: 640px) {
	.wc-block-components-sidebar-layout { padding: 16px 16px 56px; font-size: 12px; }
	.wc-block-cart-items__header { display: none; }
	.wc-block-cart-items, .wc-block-cart-items tbody { display: block; width: 100%; }
	.wc-block-cart-items__row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; }
	.wc-block-cart-item__image { padding: 0; flex-shrink: 0; }
	.wc-block-cart-item__image img { width: 64px; height: 64px; object-fit: cover; }
	.wc-block-cart-item__product { padding: 0; flex: 1; min-width: 0; }
	.wc-block-cart-item__total { display: none; }
}

/* ================= THANK YOU / ORDER RECEIVED =================
   checkout/thankyou.php is ALWAYS a classic PHP template, whatever Cart
   and Checkout render as (see that file's own docblock). is_checkout()
   also returns true on this page (WooCommerce treats order-received as a
   checkout endpoint), so this stylesheet is already enqueued here. */
.woocommerce-order {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 80px;
	color: var(--pk-fg);
	font-family: var(--pk-sans, "DM Sans", sans-serif);
	font-size: 13px;
}
.woocommerce-order * { box-sizing: border-box; }

.pbt-thankyou-actions .pk-btn { white-space: nowrap; }

.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	list-style: none;
	margin: 0 0 40px;
	padding: 18px 0;
	border-top: 1px solid var(--pk-border);
	border-bottom: 1px solid var(--pk-border);
}
.woocommerce-order-overview li {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pk-muted);
}
.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pk-primary);
}

.woocommerce-order h2 {
	font-family: var(--pk-display, "Outfit", sans-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--pk-fg);
	margin: 40px 0 20px;
}
.woocommerce-order p { color: var(--pk-fg); }
/* :not(.pk-btn) so this plain-link color never fights a button's own
   text color - it was winning on specificity (.class + tag beats .class
   alone) and made "Continue shopping" invisible: maroon text on its own
   maroon background. Found live, 3 Sep 2026. */
.woocommerce-order a:not(.pk-btn) { color: var(--pk-primary); }

.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
	color: var(--pk-primary);
	font-size: 16px;
	font-weight: 700;
	border-bottom: none;
}

.woocommerce-customer-details { display: flex; flex-wrap: wrap; gap: 40px; }
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address { flex: 1; min-width: 220px; }
address { font-style: normal; line-height: 1.8; }

@media (max-width: 640px) {
	.woocommerce-order { padding: 0 16px 56px; font-size: 12px; }
	.pbt-thankyou-actions { justify-content: stretch; flex-wrap: wrap; }
	.pbt-thankyou-actions .pk-btn { flex: 1 1 140px; text-align: center; }
	.woocommerce-order-overview { gap: 16px 24px; }
	.woocommerce-customer-details { gap: 24px; }
}

/* ================= Classic-template fallback =================
   Only reached if the Cart/Checkout pages are ever switched away from
   blocks to the [woocommerce_cart] / [woocommerce_checkout] shortcodes,
   in which case woocommerce/cart/cart.php (this theme) renders the table
   markup these rules target. */
.cart_totals p,
.wc-proceed-to-checkout { margin: 0 0 10px; }
table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
table.shop_table th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pk-muted);
	padding: 0 0 12px;
	border-bottom: 1px solid var(--pk-border);
}
table.shop_table td { padding: 12px 0; border-bottom: 1px solid var(--pk-border); font-size: 13px; }

/* The country selector, on a collection order only.
   WooCommerce honours the locale `hidden` key for every address field except
   `country`: country decides the address FORMAT and the tax/shipping match,
   so the block renders it whatever the locale says. Measured after the first
   deploy -- address_1, address_2, city, state and postcode all disappeared as
   asked and `shipping-country` was still standing there on its own, asking a
   walk-in customer which country they will be collecting in.

   So it is hidden in CSS instead, and ONLY under the body class that
   pbt_is_collection_checkout() puts there, so it comes straight back the
   moment a delivery method is chosen. It is hidden, never removed: the field
   keeps its value (ZA, from the store's own setting), so WooCommerce still
   validates, still formats the address and still matches the shipping zone.
   Removing it would break all three. */
.pbt-collection-checkout .wc-block-components-address-form__country,
.pbt-collection-checkout .wc-block-components-country-input {
	display: none !important;
}

/* "Use same address for billing", also collection-only. With no address left
   in the form there is no address to copy, so the control offers a choice
   between two identical outcomes. It stays CHECKED (it is only hidden, never
   unset), so billing continues to mirror the contact details exactly as it
   did before. */
.pbt-collection-checkout .wc-block-checkout__use-address-for-billing {
	display: none !important;
}

/* ================= REASSURANCE, ABOVE PLACE ORDER =================
   Tony's item 4. Inserted by assets/js/checkout-reassurance.js directly
   before `.wc-block-checkout__actions_row`, so it sits against the button in
   both of WooCommerce's compositions. The review's finding was that the
   mobile checkout carried no shop address, no collection route and no phone
   number anywhere on the page, at the exact moment the customer commits.

   Deliberately quiet: this is the last thing read before a decision, so it
   reassures and must not compete with the button. Hence the cream ground
   rather than a bordered card, and no accent colour except on the link. */
.pk-checkout-reassure {
	margin: 0 0 20px;
	padding: 18px 20px;
	background: var(--pk-cream, #faf6f2);
	border-radius: var(--pk-r-lg, 12px);
	font-family: var(--pk-sans, "DM Sans", sans-serif);
	color: var(--pk-fg);
	text-align: left;
}
.pk-checkout-reassure__title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pk-muted);
}
.pk-checkout-reassure__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk-checkout-reassure__list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.pk-checkout-reassure__list svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--pk-primary);
}
.pk-checkout-reassure__list strong { display: block; font-size: 13px; font-weight: 700; }
.pk-checkout-reassure__list p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--pk-muted); }
.pk-checkout-reassure__note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--pk-border);
	font-size: 12px;
	line-height: 1.55;
	color: var(--pk-muted);
}
/* The wa.me link is the one thing here anyone taps, so it carries a real
   target rather than inheriting a 13px line box. `inline-flex` with a 44px
   min-height would push the paragraph's line spacing apart mid-sentence, so
   the target is bought with padding on an inline box instead. */
.pk-checkout-reassure a {
	color: var(--pk-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 10px 2px;
	margin: -10px 0;
}
.pk-checkout-reassure a:focus-visible {
	outline: 2px solid var(--pk-ring, var(--pk-primary));
	outline-offset: 2px;
	border-radius: 3px;
}
@media (max-width: 640px) {
	.pk-checkout-reassure { padding: 16px; }
}