/**
 * Compact order flow: cart → checkout → order received / order pay → account.
 *
 * Every page in the flow is laid out with the theme's Tailwind utilities, which
 * stretch the content across the full 92rem container: on a desktop screen a
 * single text input ends up ~1400px wide, cart rows have half a screen of empty
 * space in them and the checkout runs well over three screens tall. These rules
 * leave the markup untouched and only
 *
 *  - centre each page on a comfortable reading column,
 *  - tighten field, heading and table density.
 *
 * The pink full-bleed blocks (.container-full on the checkout and order-pay
 * pages) keep spanning the viewport: they break out with negative margins
 * relative to a 92rem parent, so their *inner* .container is narrowed and the
 * block itself is never touched.
 *
 * Plain CSS on purpose: the theme's Tailwind is compiled into style.css at build
 * time, so new utility classes in the templates would need an npm build. This
 * file is enqueued after style.css, so equal-specificity rules win.
 *
 * @package simeonifleurs
 */

:root {
	/* Width of the order-flow column on desktop. */
	--sf-order-flow-width: 58rem;
}

/* -------------------------------------------------------------------------
 * 1. Width — centre the content instead of stretching it edge to edge.
 * ---------------------------------------------------------------------- */

@media ( min-width: 768px ) {
	/* Pages with no full-bleed blocks: narrow everything. */
	.woocommerce-cart .entry-content > .woocommerce > *,
	.woocommerce-order-received .entry-content > .woocommerce > *,
	.woocommerce-account .entry-content > .woocommerce > *,

	/* Checkout: the content, not the pink blocks around it. */
	.woocommerce-checkout .entry-content > .woocommerce > .container,
	.woocommerce-checkout .entry-content > .woocommerce > .container-full > .container,
	.woocommerce-checkout form.checkout > ul,
	.woocommerce-checkout form.checkout > .form-row,
	.woocommerce-checkout form.checkout > .woocommerce-additional-fields__field-wrapper,
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > h2,
	.woocommerce-checkout #order_review > .shop_table,
	.woocommerce-checkout .woocommerce-checkout-payment .container > ul,
	.woocommerce-checkout .woocommerce-checkout-payment .container > .place-order,

	/* Order pay: same idea, its .container-full sits inside the form. */
	.woocommerce-order-pay #order_review > .shop_table,
	.woocommerce-order-pay #order_review > .container-full > .container {
		max-width: var( --sf-order-flow-width );
		margin-left: auto;
		margin-right: auto;
	}
}

/* -------------------------------------------------------------------------
 * 2. Fields — smaller controls and labels across the whole flow.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .entry-content label,
.woocommerce-checkout .entry-content label,
.woocommerce-account .entry-content label {
	font-size: 0.875rem;
	line-height: 1.35;
	margin-bottom: 0.25rem;
}

.woocommerce-cart .entry-content input[type='text'],
.woocommerce-cart .entry-content input[type='email'],
.woocommerce-cart .entry-content input[type='tel'],
.woocommerce-cart .entry-content input[type='number'],
.woocommerce-cart .entry-content input[type='password'],
.woocommerce-cart .entry-content select,
.woocommerce-cart .entry-content textarea,
.woocommerce-checkout .entry-content input[type='text'],
.woocommerce-checkout .entry-content input[type='email'],
.woocommerce-checkout .entry-content input[type='tel'],
.woocommerce-checkout .entry-content input[type='number'],
.woocommerce-checkout .entry-content input[type='password'],
.woocommerce-checkout .entry-content input[type='date'],
.woocommerce-checkout .entry-content input[type='search'],
.woocommerce-checkout .entry-content select,
.woocommerce-checkout .entry-content textarea,
.woocommerce-account .entry-content input[type='text'],
.woocommerce-account .entry-content input[type='email'],
.woocommerce-account .entry-content input[type='tel'],
.woocommerce-account .entry-content input[type='number'],
.woocommerce-account .entry-content input[type='password'],
.woocommerce-account .entry-content select,
.woocommerce-account .entry-content textarea {
	font-size: 0.9375rem;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
}

.woocommerce-checkout .entry-content textarea,
.woocommerce-account .entry-content textarea {
	height: 6rem;
}

/* Checkbox rows stay inline so a trailing "(optional)" keeps following the
 * label text instead of being pushed to the far side of the row. */
.woocommerce-cart .entry-content label.checkbox,
.woocommerce-checkout .entry-content label.checkbox,
.woocommerce-checkout .entry-content .woocommerce-form__label-for-checkbox,
.woocommerce-account .entry-content .woocommerce-form__label-for-checkbox {
	font-size: 0.875rem;
	line-height: 1.45;
}

.woocommerce-cart .entry-content input[type='checkbox'],
.woocommerce-cart .entry-content input[type='radio'],
.woocommerce-checkout .entry-content input[type='checkbox'],
.woocommerce-checkout .entry-content input[type='radio'],
.woocommerce-account .entry-content input[type='checkbox'],
.woocommerce-account .entry-content input[type='radio'] {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	margin-right: 0.5rem;
	vertical-align: -0.3em;
}

/* -------------------------------------------------------------------------
 * 3. Checkout — vertical rhythm, grid gaps, select2.
 * ---------------------------------------------------------------------- */

.woocommerce-checkout .entry-content > .woocommerce > .container-full {
	margin-top: 2rem;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.woocommerce-checkout form.checkout {
	margin-top: 2rem;
}

.woocommerce-checkout form.checkout h2.h1,
.woocommerce-checkout form.checkout h3.h1 {
	font-size: 1.75rem;
	line-height: 1.25;
	margin-bottom: 1.25rem;
}

.woocommerce-checkout form.checkout > ul {
	margin-bottom: 1.5rem;
}

.woocommerce-checkout .checkout .woocommerce-shipping-fields {
	margin-bottom: 1.25rem;
}

.woocommerce-checkout .checkout .woocommerce-additional-fields {
	margin-bottom: 2rem;
}

.woocommerce-checkout .checkout .woocommerce-shipping-fields > h3 {
	margin-bottom: 1rem;
}

.woocommerce-checkout .checkout .grid {
	column-gap: 1.5rem;
	row-gap: 0.25rem;
}

.woocommerce-checkout .checkout .select2-container .select2-selection--single,
.woocommerce-checkout .checkout .select2-container--default .select2-selection--single {
	height: auto;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
}

.woocommerce-checkout .checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding-left: 0;
}

.woocommerce-checkout .checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

/* -------------------------------------------------------------------------
 * 4. Order review and payment — same column, half the padding.
 * ---------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-checkout-review-order-table > div {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .h5,
.woocommerce-checkout .woocommerce-checkout-review-order-table .text-s18,
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-Price-amount {
	font-size: 1rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table p {
	margin-bottom: 0.25rem;
}

.woocommerce-checkout .woocommerce-checkout-payment .container-full,
.woocommerce-order-pay #order_review > .container-full {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.woocommerce-checkout .woocommerce-checkout-payment .wc_payment_methods,
.woocommerce-order-pay .wc_payment_methods {
	font-size: 1rem;
	padding-bottom: 1.5rem;
}

.woocommerce-checkout .woocommerce-checkout-payment .wc_payment_methods li,
.woocommerce-order-pay .wc_payment_methods li {
	margin-bottom: 0.5rem;
}

.woocommerce-checkout .woocommerce-checkout-payment .payment_box {
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * 5. Place-order row.
 *
 * The template puts the terms block, the newsletter opt-in and the submit
 * button in one flex row, which squeezes the opt-in label into a narrow
 * column. Two columns instead: terms and opt-in stacked on the left, the
 * button bottom-right. Below 768px the template's own stacked layout stands.
 * ---------------------------------------------------------------------- */

@media ( min-width: 768px ) {
	.woocommerce-checkout .place-order {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: end;
		column-gap: 3rem;
		row-gap: 1rem;
	}

	.woocommerce-checkout .place-order .woocommerce-terms-and-conditions-wrapper {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-checkout .place-order .newsletter-optin-row {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}

	.woocommerce-checkout .place-order #place_order {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: end;
	}
}

/* Hanging indent so a wrapped label lines up with its own text, not the box. */
.woocommerce-checkout .place-order .newsletter-optin-row label,
.woocommerce-checkout .place-order .woocommerce-terms-and-conditions-wrapper label {
	margin-bottom: 0;
	padding-left: 1.75rem;
	text-indent: -1.75rem;
}

/* -------------------------------------------------------------------------
 * 6. Cart — shorter rows, smaller thumbnails, totals across the column.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .woocommerce-cart-form__contents {
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 2rem;
}

.woocommerce-cart .woocommerce-cart-form__contents > div:first-child,
.woocommerce-cart .woocommerce-cart-form__cart-item {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.woocommerce-cart .woocommerce-cart-form__contents > div:first-child {
	font-size: 1rem;
}

/* The template only shows the thumbnail from the theme's `bs` breakpoint
 * (1292px) up, where the row is already flex-row, so this is a width. */
.woocommerce-cart .product-thumbnail {
	flex-basis: 7rem;
}

.woocommerce-cart .product-thumbnail > div,
.woocommerce-cart .product-thumbnail img {
	max-height: 7rem;
}

.woocommerce-cart .product-name .h4 {
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
}

.woocommerce-cart .product-subtotal .text-s20 {
	font-size: 1rem;
}

/* The totals block is capped at max-w-3xl and right-aligned, which leaves a
 * wide gap once the page is narrowed; let it fill the column instead. */
.woocommerce-cart .cart_totals {
	max-width: 100%;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 1.75rem;
	line-height: 1.25;
	margin-bottom: 1rem;
}

.woocommerce-cart .cart_totals > div {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-size: 1rem;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
	padding-top: 1rem;
}

/* -------------------------------------------------------------------------
 * 7. Order received / order pay — the order tables read as a document, not a
 *    full-width spreadsheet.
 * ---------------------------------------------------------------------- */

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-order-received .woocommerce-order-downloads__title {
	font-size: 1.5rem;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.woocommerce-order-received .woocommerce-order-overview {
	margin-bottom: 1.5rem;
}

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
	margin-bottom: 2rem;
}

.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td,
.woocommerce-order-pay #order_review .shop_table th,
.woocommerce-order-pay #order_review .shop_table td {
	padding: 0.5rem 0.75rem;
}

/* -------------------------------------------------------------------------
 * 8. Account — a centred card instead of a half-empty page.
 * ---------------------------------------------------------------------- */

@media ( min-width: 768px ) {
	/* Registration is disabled, so the login column is alone in its grid. */
	.woocommerce-account #customer_login .u-column1:only-child {
		grid-column: 1 / -1;
		/* Without an explicit width the auto margins shrink a grid item to its
		 * content, so the card would be as wide as its longest label. */
		width: 100%;
		max-width: 30rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* The cart and checkout titles are centred by the theme; match them here so the
 * heading does not sit at the page edge above a centred column. */
.woocommerce-account .entry-header .entry-title {
	text-align: center;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	font-size: 0.9375rem;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 1.5rem;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
	padding: 0.5rem 0.75rem;
}

/* The theme wraps the account tables in .custom-scroll and gives them an inline
 * min-width: 800px, so in the narrower column they scrolled sideways. The cells
 * wrap perfectly well at this width, so drop the floor — !important is the only
 * way to beat an inline style. */
.woocommerce-account .woocommerce-MyAccount-content .custom-scroll table {
	min-width: 0 !important;
}