/* assets/cart-checkout.css — Cart + Checkout (WooCommerce Blocks). Zero
   custom CSS touched these components before this pass; they only had WC
   Blocks' own defaults + Astra's theme.json primary color (already navy,
   which is why buttons/radios already read on-brand). This fixes concrete,
   confirmed issues rather than restyling wholesale:
   - No visible focus indicator on inputs/selects (outline:none with no
     replacement — confirmed live via getComputedStyle, a real WCAG 2.4.7
     gap), fixed with the same navy focus-ring already used elsewhere on
     the site (.ph-contact-form-row).
   - Input/select height (40px) short of the ~48px comfortable mobile tap
     target.
   - Cart item photo (64px) and checkout order-summary item photo (small,
     default) too small to recognize a product at a glance.
   - Totals/order-summary panels sit flush on the white page background
     with no container — every other section on the site uses a card
     surface (--pl-gray-100 + radius) for this same "secondary content"
     role. */

/* The Cart/Checkout blocks carry Gutenberg's "alignwide" class, which
   bleeds a block wider than its column via negative side margins + a
   matching width increase — confirmed live this theme's classic
   (non-block) content wrapper only applies the negative margins, not the
   width increase: left edge bleeds correctly to 0, but width stays at the
   column's own width, so the right side falls short by the same amount
   (a real, measured 40px gap on a 390px viewport, `right: 350px` instead
   of `390px`) — an off-center gap, not a "wide" block at all. Simplest
   correct fix: don't bleed at all, sit the block inside its normal column
   like everything else on the page. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-radio-control__input:focus-visible {
	outline: none;
	border-color: var(--pl-navy) !important;
	box-shadow: 0 0 0 3px rgb(var(--pl-navy-rgb) / 0.15) !important;
}

.wc-block-components-text-input input,
.wc-blocks-components-select__select {
	min-height: 48px;
	/* Astra's own default here is 4px — every other input/surface on the
	   site (search bar, contact form, filter pills) uses --pl-radius-sm or
	   rounder; 4px reads as an unstyled leftover next to them. */
	border-radius: var(--pl-radius-sm) !important;
}

.wc-block-cart-item__image img {
	width: 88px !important;
	height: 88px !important;
	border-radius: var(--pl-radius-sm);
	border: 1px solid var(--pl-gray-100);
}

.wc-block-components-order-summary-item__image img {
	border-radius: var(--pl-radius-sm);
	border: 1px solid var(--pl-gray-100);
}

.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--pl-gray-100);
	border-radius: var(--pl-radius-card);
	padding: 1.25rem;
}