/*
Theme Name:   Storefront Collage Child
Theme URI:    https://wandhaus.local/
Description:  Child theme for the Wandhaus photo-collage store. Editorial design system V3 — cool white, neutral cool grey, deep teal-petrol accent. Fraunces + Inter.
Author:       Wandhaus
Author URI:   https://wandhaus.local/
Template:     storefront
Version:      0.118.70
Requires PHP: 8.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-collage-child
*/

/* ─────────────────────────────────────────────────────────────────
 * Late-cascade overrides
 *
 * This stylesheet loads LAST in WP's enqueue chain (after Storefront's
 * woocommerce.css + parent style.css), so any rule here beats every
 * other stylesheet at equal specificity. We keep this file as a
 * targeted "win-the-cascade" surface for cases where Storefront / WC
 * defaults can't be beaten from `tokens.css` / `wandhaus-account.css`
 * alone.
 *
 * Rules:
 *   1. Customer-details addresses (Factuuradres / Bezorgadres) —
 *      outer wrapper goes plain, inner col-1 / col-2 carry V2 cards.
 *      Applied globally so it works on view-order AND thank-you AND
 *      any future page that emits .woocommerce-customer-details.
 * ───────────────────────────────────────────────────────────────── */

/* OUTER wrapper — no chrome. */
body .woocommerce-customer-details {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.6;
}

/* col2-set / addresses container — CSS Grid (overrides Storefront's float layout). */
body .woocommerce-customer-details .col2-set,
body .woocommerce-customer-details .woocommerce-columns--addresses,
body .woocommerce-customer-details .woocommerce-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--s-4) !important;
	margin: var(--s-4) 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
}
body .woocommerce-customer-details .col2-set::before,
body .woocommerce-customer-details .col2-set::after,
body .woocommerce-customer-details .woocommerce-columns--addresses::before,
body .woocommerce-customer-details .woocommerce-columns--addresses::after,
body .woocommerce-customer-details .woocommerce-columns::before,
body .woocommerce-customer-details .woocommerce-columns::after {
	content: none !important;
	display: none !important;
}

/* INNER address cards — V2 chrome. */
body .woocommerce-customer-details .col-1,
body .woocommerce-customer-details .col-2,
body .woocommerce-customer-details .woocommerce-column,
body .woocommerce-customer-details .woocommerce-column--billing-address,
body .woocommerce-customer-details .woocommerce-column--shipping-address {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
	padding: var(--s-5) !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

/* Inner column h2 (Factuuradres / Bezorgadres) — mono eyebrow. */
body .woocommerce-customer-details .col-1 h2,
body .woocommerce-customer-details .col-2 h2,
body .woocommerce-customer-details .woocommerce-column__title {
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	font-weight: 500 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	line-height: 1 !important;
}

/* <address> — strip WC's gray drop-shadow border + radius. */
body .woocommerce-customer-details address,
body .woocommerce .woocommerce-customer-details address {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	font-style: normal !important;
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--ink) !important;
	text-align: left !important;
}
body .woocommerce-customer-details address::first-line {
	font-weight: 500;
}

/* Email + phone — top-divider treatment, kill WC's icon-font glyphs. */
body .woocommerce-customer-details .woocommerce-customer-details--email,
body .woocommerce-customer-details .woocommerce-customer-details--phone,
body .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email,
body .woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone {
	display: block !important;
	position: static !important;
	margin: 14px 0 0 !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid var(--border) !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: var(--ink-2) !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}
body .woocommerce-customer-details .woocommerce-customer-details--email::before,
body .woocommerce-customer-details .woocommerce-customer-details--phone::before {
	content: none !important;
	display: none !important;
	font-family: inherit !important;
	margin: 0 !important;
}

/* Tablet/mobile collapse to single column. */
@media (max-width: 1023px) {
	body .woocommerce-customer-details .col2-set,
	body .woocommerce-customer-details .woocommerce-columns--addresses,
	body .woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: 1fr !important;
		gap: var(--s-3) !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
 * Status pill — WC slug variants
 *
 * The canonical `.wh-status-pill` (design system §19, defined in
 * `wandhaus-account.css`) ships Dutch-name modifiers
 * (`--in-afwachting`, `--bezorgd`, etc.). These late-cascade rules
 * add modifiers for the actual WC status slugs (English) that arrive
 * from `$order->get_status()` so the same pill renders correctly on
 * /my-account/orders/, /my-account/view-order/{id}/, and the order-
 * received (thank-you) page without per-page mapping.
 *
 * WC slug → Wandhaus state colour:
 *   processing       → accent  (in productie)
 *   pending          → warn    (wacht op betaling)
 *   on-hold          → warn    (in de wacht)
 *   completed        → ok      (voltooid / bezorgd)
 *   cancelled        → err     (geannuleerd)
 *   failed           → err     (mislukt)
 *   refunded         → neutral (terugbetaald)
 *
 * Background uses `color-mix(in srgb, var(--state) 14%, transparent)`
 * to match the §19 spec (dynamic 14% tint of the state colour, not the
 * static --state-soft tokens).
 * ───────────────────────────────────────────────────────────────── */
body .wh-status-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	padding: 5px 10px !important;
	border-radius: var(--radius-pill) !important;
	border: 0 !important;
	background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
	color: var(--accent) !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
body .wh-status-pill__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: var(--radius-pill) !important;
	background: currentColor !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
}

/* PROCESSING — "in productie" → accent (terracotta) */
body .wh-status-pill--processing {
	color: var(--accent) !important;
	background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
/* PENDING (pending payment) → warn (amber) */
body .wh-status-pill--pending,
body .wh-status-pill--pending-payment {
	color: var(--warn) !important;
	background: color-mix(in srgb, var(--warn) 14%, transparent) !important;
}
/* ON-HOLD — "in de wacht" → warn (amber) */
body .wh-status-pill--on-hold {
	color: var(--warn) !important;
	background: color-mix(in srgb, var(--warn) 14%, transparent) !important;
}
/* COMPLETED — "voltooid / bezorgd" → ok (green) */
body .wh-status-pill--completed {
	color: var(--ok) !important;
	background: color-mix(in srgb, var(--ok) 14%, transparent) !important;
}
/* CANCELLED — "geannuleerd" → err (red) */
body .wh-status-pill--cancelled {
	color: var(--err) !important;
	background: color-mix(in srgb, var(--err) 14%, transparent) !important;
}
/* FAILED — "mislukt" → err (red) */
body .wh-status-pill--failed {
	color: var(--err) !important;
	background: color-mix(in srgb, var(--err) 14%, transparent) !important;
}
/* REFUNDED — "terugbetaald" → neutral (ink-muted) */
body .wh-status-pill--refunded {
	color: var(--ink-muted) !important;
	background: color-mix(in srgb, var(--ink-muted) 14%, transparent) !important;
}

/* View-order page header reuses the canonical `.wh-account__card`
 * + `.wh-active-order` + `.wh-tracker` components from the dashboard
 * "Actieve bestelling" section (defined in css/wandhaus-account.css).
 * No additional rules needed — see view-order.php which renders the
 * same composite structure. */

/* ─────────────────────────────────────────────────────────────────
 * Per-line meta on order-details tables (view-order + thank-you +
 * admin email). WC emits `<ul class="wc-item-meta"><li><strong>Label:</strong>
 * <p>Value</p></li></ul>`; the default rendering stacks label + value
 * on separate lines (the `<p>` is a block element with its own line).
 *
 * V2 register: each `<li>` is a flex row, label + value inline,
 * baseline-aligned, with `Label · Value` separation. Keeps the line
 * compact and reads as a spec sheet rather than a paragraph stack.
 * ───────────────────────────────────────────────────────────────── */
body .wc-item-meta {
	margin: var(--s-2) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--s-1) !important;
	font-family: var(--font-body) !important;
	color: var(--ink-2) !important;
}
body .wc-item-meta li {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: var(--s-2) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--ink-2) !important;
}
body .wc-item-meta .wc-item-meta-label,
body .wc-item-meta li strong {
	flex: 0 0 auto !important;
	margin: 0 !important;
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	min-width: 90px !important;
}
body .wc-item-meta li p,
body .wc-item-meta li > *:not(strong) {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--ink) !important;
	line-height: 1.5 !important;
}
/* Strip the trailing colon WC adds to the label string ("Afmetingen:"). */
body .wc-item-meta .wc-item-meta-label::after {
	content: none !important;
}

/* Same treatment for the legacy `<dl class="variation">` markup that
 * older WC + some plugins still emit. */
body dl.variation {
	margin: var(--s-2) 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--s-1) !important;
}
body dl.variation dt,
body dl.variation dd {
	display: inline !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	padding: 0 !important;
}
body dl.variation dt {
	font-family: var(--font-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--ink-muted) !important;
	font-weight: 500 !important;
	min-width: 90px !important;
}
body dl.variation dd {
	color: var(--ink) !important;
	font-weight: 400 !important;
}