/**
 * Site-wide: give cut-out product photography something to sit on.
 *
 * Plenty of the catalogue is transparent PNG, which otherwise picks up whatever
 * happens to be behind it. A background colour on the image itself is invisible
 * on an opaque photo — the picture covers it — so this only shows through where
 * there is genuinely no background of its own.
 *
 * Deliberately scoped to product and content imagery. A blanket `img` rule
 * would put a cream box behind the logo, payment icons and every other piece of
 * transparent site furniture. Widen the list below if more of the catalogue
 * needs it.
 */

.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.wd-product .product-image-link img,
.wd-product .product-element-top img,
.woocommerce-cart-form img,
.wc-block-components-product-image img,
.wc-block-cart-item__image img,
.entry-content .wp-block-image img,
img.attachment-woocommerce_thumbnail,
img.attachment-shop_catalog,
img.attachment-shop_single {
	background-color: #fff1cf;
}

/* The shop's own page colour, so a cut-out sits on the page rather than on a
   tile of a slightly different cream. */

/* Site furniture keeps its transparency: a logo or a payment mark on a cream
   tile looks like a mistake. */
.site-logo img,
.wd-logo img,
.wd-header-nav img,
header img,
footer img,
.wd-payments img,
img[src$=".svg"],
img[src*=".svg?"] {
	background-color: transparent;
}

/* The builder has its own surface colour; it must not inherit the cream. */
.scarlet-builder img {
	background-color: transparent;
}


/* ===================================================================
 * Cart and checkout, in the shop's colours.
 *
 * The block cart and checkout ship in WooCommerce's default blue-on-white.
 * These rules re-colour them to match the rest of the site — surfaces,
 * buttons, headings, borders and links only. Nothing here touches layout or
 * spacing, so a WooCommerce update cannot break the page shape; at worst a
 * renamed class makes a rule inert and that element returns to the default.
 * =================================================================== */

.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout {
	--sc-cream: #fff1cf;
	--sc-surface: #fffaf2;
	--sc-border: #eadbc6;
	--sc-red: #8e1b1b;
	--sc-red-deep: #6f1a17;
	--sc-ink: #553d34;
	color: var(--sc-ink);
}

/* Panels: the order summary, the totals block, each address card. */
.wc-block-components-panel,
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--sc-surface);
	border-color: var(--sc-border);
}

.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-components-address-card {
	border-radius: 12px;
}

/* Headings pick up the shop's serif red. */
.wc-block-components-title,
.wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	color: var(--sc-red-deep);
	font-family: Georgia, "Times New Roman", serif;
}

/* The one primary action per step. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background-color: var(--sc-red);
	border-color: var(--sc-red);
	color: #fff9f0;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--sc-red-deep);
	border-color: var(--sc-red-deep);
}

/* Text buttons and links, including our "edit design" link. */
.wc-block-components-button.is-link,
.wc-block-cart-item__remove-link,
.wc-block-components-product-name {
	color: var(--sc-red-deep);
}

.wc-block-components-product-name:hover {
	color: var(--sc-red);
}

/* Totals: the number that matters. */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	color: var(--sc-red);
}

/* Inputs, to sit on the cream rather than glare against it. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	border-color: var(--sc-border);
	border-radius: 8px;
	background: #fff;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--sc-red);
	box-shadow: 0 0 0 1px var(--sc-red);
}

/* Selected shipping and payment options. */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--sc-red);
	background: rgba(142, 27, 27, 0.05);
}

.wc-block-components-radio-control__input:checked {
	accent-color: var(--sc-red);
}