/*
 * WooCommerce-universal overrides — applies to every WC frontend page.
 *
 * Loaded on cart, checkout, account, order-received, and any other
 * WC-flagged page via inc/enqueue.php.
 *
 * Owns:
 *   - .pm-cart-thumb composite (shirt + design layered img used by
 *     cart, checkout review, order-received page, order emails)
 *   - .pm-fallback-image generic helper
 *   - WC Cart/Checkout Block image fit overrides
 *   - WC notice banner styling (info / message / error)
 *
 * Extracted from header-footer.css in Phase 2 cleanup (2026-06-04).
 *
 * @package Premium_Merchandise_Child
 */


/* Composite thumbnail used in the cart, order-received page, and order
   email for PM-designed lines. Two layered <img>s — shirt-color base and
   the customer's transparent design PNG on top. CSS layering avoids any
   server-side Imagick dependency and side-steps the inksoft-CDN CORS
   restriction that would otherwise taint a canvas composite. */
.pm-cart-thumb {
	position: relative;
	display: inline-block;
	background: var(--pm-color-input-bg);
	border-radius: var(--pm-radius-sm);
	overflow: hidden;
	vertical-align: middle;
}

.pm-cart-thumb__shirt,
.pm-cart-thumb__design {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pm-cart-thumb__design {
	pointer-events: none;
}

.pm-fallback-image {
	max-width: 100%;
	height: auto;
}

/* WC Cart Block + Checkout Block image fitting.
   The block cart/checkout default to `object-fit: cover` on product
   thumbnails, which crops the shirt's neck + hem. Force `contain` so the
   whole tee photo is visible — with a soft surface behind it to avoid the
   "floating image on white" look once contain reveals the padding. */
.wc-block-cart-item__image img,
.wp-block-woocommerce-cart-item-image img,
.wc-block-components-product-image img,
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image,
.wc-block-components-product-image {
	object-fit: contain !important;
	background: var(--pm-color-input-bg);
}

/* Slightly larger min-height so the image isn't squished when WC's wrapper
   collapses on narrow viewports. */
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
	min-height: 96px;
}

/* ============================================================
   QA 2026-05-30 — brand pass on WooCommerce-default surfaces
   ============================================================
   WC ships with its own notice colors (blue info, orange warning, red error),
   default purple-ish link color, default form-field styling. None of that
   matches the Premium Merchandise palette. This block rebrands every
   surface a customer touches in the cart + checkout flow without forking
   the WC stylesheet.
   ============================================================ */

/* WooCommerce notices — info / message / error. The blue "Have a coupon?"
   strip on checkout and the orange "no payment methods" warning both use
   `.woocommerce-info`. Rebranding with our soft-surface backdrop, ink
   text, and accent border so notices feel like the rest of the UI. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--pm-color-surface-soft) !important;
	color: var(--pm-color-ink) !important;
	border: 1px solid var(--pm-color-border) !important;
	border-left: 4px solid var(--pm-color-accent) !important;
	border-radius: var(--pm-radius-sm) !important;
	padding: 14px 18px !important;
	font-family: var(--pm-font-sans) !important;
	font-size: 14px !important;
	box-shadow: none !important;
	margin: 0 0 18px !important;
}

.woocommerce-message {
	border-left-color: #2e7d32 !important; /* green for success */
}

.woocommerce-error {
	border-left-color: var(--pm-color-danger) !important;
	background: var(--pm-color-danger-soft) !important;
	color: var(--pm-color-danger) !important;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Hide the default WC SVG icon — we use the left border instead. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	display: none !important;
}

/* WC notice inline links pick up brand accent rather than the default
   purple WC uses. */
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
	color: var(--pm-color-accent) !important;
	text-decoration: underline;
	font-weight: 600;
}

/* ============================================================
   QA round 16 (2026-06-04) — Cart + Checkout page heading.
   Both pages share the same `<h1 class="entry-title">` chrome,
   so the styling lives here in wc-defaults (loaded on both)
   instead of cart.css / checkout.css.
   ============================================================ */

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
	margin: 50px 0 28px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--pm-color-border);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	margin: 0;
	font-family: var(--pm-font-sans);
	font-size: 28px;
	font-weight: 600;
	color: var(--pm-color-ink);
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-align: center;
}

@media (max-width: 768px) {
	.woocommerce-cart .entry-header,
	.woocommerce-checkout .entry-header {
		margin: 20px 0 20px;
		padding: 0 0 16px;
	}
	.woocommerce-cart .entry-title,
	.woocommerce-checkout .entry-title {
		font-size: 22px;
	}
}