/**
 * Checkout, to the client's comment sheet (11 Aug 2026).
 */

/* --- Required field markers ---------------------------------------------- */

/*
 * The asterisk is the only thing distinguishing a required field, and it was
 * inheriting the label colour, so it read as punctuation. Red and slightly
 * larger makes it scannable down the form.
 */
.woocommerce-checkout .required,
.woocommerce-checkout abbr.required,
.woocommerce-checkout .woocommerce-input-wrapper .required {
	color: #c60000 !important;
	border: 0 !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
}

/* WooCommerce marks optional fields with "(optional)" - keep it quiet so the
   red asterisks carry the emphasis. */
.woocommerce-checkout .optional {
	color: #8a8a8a;
	font-weight: 400;
}

/* --- Billing form -------------------------------------------------------- */

.woocommerce-billing-fields h2 {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #d9d9d9;
	background: #fff;
	font-size: 13px;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: #111;
	outline: 0;
}

/* --- Order review -------------------------------------------------------- */

/*
 * "Product" sat indented from the rows beneath it, because the header cell and
 * the body cells were carrying different padding. One rule for both puts them
 * on the same left edge.
 */
/*
 * WooCommerce styles this table at a higher specificity than a single class:
 *
 *   .woocommerce table.shop_table th { padding: 9px 12px }
 *   .woocommerce table.shop_table td { padding: 9px 12px; border-top: 1px solid }
 *
 * That is 0,2,2 against 0,1,1 here, so a plain `.cabina-review-order th` rule
 * lost and the 12px inset stayed - which is why "Product" sat indented from the
 * items beneath it. Matching that specificity and forcing the horizontal
 * padding to zero puts every column on the table's own edge.
 */
.woocommerce table.cabina-review-order th,
.woocommerce table.cabina-review-order td,
table.cabina-review-order th,
table.cabina-review-order td {
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-top: 0;
}

.cabina-review-order th,
.cabina-review-order td {
	padding: 12px 0;
	text-align: left;
	vertical-align: top;
}

.cabina-review-order th.product-total,
.cabina-review-order td.product-total,
.cabina-review-order tfoot td {
	text-align: right;
	white-space: nowrap;
}

.cabina-review-order thead th {
	border-bottom: 1px solid #111;
	font-size: 12px;
	font-weight: 800;
}

/*
 * Only three things per line, per the sheet: product name, article number and
 * quantity. A vanity contributes two name/article pairs under one quantity.
 */
.cabina-review-title,
.cabina-review-article,
.cabina-review-qty {
	display: block;
	line-height: 1.4;
}

.cabina-review-title {
	font-size: 13px;
	font-weight: 700;
}

.cabina-review-article {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 400;
}

.cabina-review-title + .cabina-review-article + .cabina-review-title {
	margin-top: 8px;
}

.cabina-review-qty {
	margin-top: 4px;
	font-size: 12px;
}

/*
 * The item list scrolls once there are more products than fit, so the totals
 * and Place Order stay within reach instead of being pushed below a long list.
 * max-height rather than a fixed height: a one-item order should not sit in a
 * half-empty scroll box.
 */
.cabina-review-items {
	display: block;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cabina-review-items tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

/*
 * No visible scrollbar.
 *
 * The scroll container is the tbody, so its scrollbar took width from the body
 * alone - the head and foot do not have one. That shifted the item columns
 * relative to the "Product" and "Subtotal" headings above them, and showed up
 * as a stray vertical line down the panel. Hiding it keeps every column on one
 * axis; the list still scrolls by wheel, trackpad and touch.
 */
.cabina-review-items::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* Keep the head and foot aligned with the scrolling body. */
.cabina-review-order thead,
.cabina-review-order tfoot {
	display: table;
	width: 100%;
	table-layout: fixed;
}

/*
 * One rule between the items and the totals, as the reference shows - not a
 * line above every total row, which read as a stack of boxes.
 */
.cabina-review-order tfoot th,
.cabina-review-order tfoot td {
	border-top: 0;
	font-size: 13px;
}

/* Same specificity problem as the padding above - WooCommerce sets a border on
   every td, so this has to out-rank it to draw one line and no others. */
.woocommerce table.cabina-review-order tfoot tr:first-child th,
.woocommerce table.cabina-review-order tfoot tr:first-child td,
table.cabina-review-order tfoot tr:first-child th,
table.cabina-review-order tfoot tr:first-child td {
	border-top: 1px solid #111 !important;
	padding-top: 16px !important;
}

/* Emphasis only - no rule of its own. The reference draws a single line, above
   Total Order, with Due Payment reading as part of the same group. */
.cabina-review-order tfoot .cabina-due-payment th,
.cabina-review-order tfoot .cabina-due-payment td {
	border-top: 0 !important;
	font-size: 15px;
	font-weight: 800;
}

/*
 * The payment terms are called out in the same panel style WooCommerce uses for
 * its own notices, which is what the client pointed at - the grey block that
 * reads "Sorry, it seems that there are no available payment methods".
 */
/*
 * The tfoot rule above sets white-space: nowrap so a currency amount never
 * breaks across two lines. This row is not an amount - it is a sentence - and
 * it inherited the nowrap, so on a narrow screen it ran straight out of its own
 * grey box ("...65% Upon Complet"). It wraps, and reads left like body copy.
 */
.cabina-review-order tfoot .cabina-payment-terms-row td {
	padding: 0;
	border-top: 0;
	white-space: normal;
	text-align: left;
}

.cabina-payment-terms {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: #f4f4f4;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
}

/* --- Terms checkbox ------------------------------------------------------- */

/*
 * The checkbox and its wording sit on one line. WooCommerce renders the input
 * as an inline element inside the label, so it took the text baseline and the
 * long label wrapped underneath it. Flex puts the box beside the text and keeps
 * it there however the wording wraps.
 */
/*
 * The label is what has to become the flex row, not the paragraph around it -
 * that also holds a hidden input, which would become a stray flex item.
 *
 * The class is `woocommerce-form__label-for-checkbox` (see WooCommerce's
 * checkout/terms.php). An earlier attempt here used
 * `woocommerce-form__label-checkbox`, which does not exist, so the rule matched
 * nothing and the checkbox stayed stacked above the wording.
 *
 * The generic `.form-row label { display: block }` further up would otherwise
 * apply to this label too, which is what stacked it.
 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

/*
 * No flex `gap` here: the markup puts a literal   between the wording and
 * the asterisk, and that text node becomes its own flex item - a gap would then
 * push the asterisk away from the sentence it belongs to. The spacing goes on
 * the checkbox instead.
 */
/*
 * WooCommerce's form-themes.css carries
 *
 *   .woocommerce form .form-row .input-checkbox { display: inline; margin: -2px 8px 0 0 }
 *
 * at 0,3,2 - higher than the 0,3,1 available here - so the box kept its own
 * margins and never reserved width as a flex item, and the first words of the
 * sentence ran underneath it. !important is the only way past that without
 * writing an even longer selector, and position/float are pinned too so nothing
 * else can lift it out of flow.
 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input.input-checkbox,
.woocommerce-checkout .woocommerce-form__input-checkbox {
	position: static !important;
	float: none !important;
	flex: 0 0 15px !important;
	width: 15px !important;
	height: 15px !important;
	margin: 0 9px 0 0 !important;
}

/* min-width:0 stops the sentence being squeezed narrower than its content and
   spilling out of the row. */
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required {
	flex: 0 0 auto;
	border: 0;
	text-decoration: none;
}

/* The paragraph only needs to stop adding spacing of its own. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
	padding: 0;
}

/*
 * The privacy paragraph is removed in PHP, but a theme or plugin printing its
 * own copy would leave a gap where it used to be.
 */
.woocommerce-checkout .woocommerce-privacy-policy-text {
	display: none;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
}

/* --- Place order --------------------------------------------------------- */

.woocommerce-checkout #place_order {
	width: 100%;
	height: 44px;
	border: 1px solid #221F20;
	background: #221F20;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

/* --- Create an account --------------------------------------------------- */

.woocommerce-checkout .create-account {
	margin-top: 12px;
}

.woocommerce-checkout .create-account p {
	font-size: 12px;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.cabina-review-items {
		max-height: none;
		overflow-y: visible;
	}
}

/* --- Order details: item rows read like the cart ------------------------- */

/*
 * The order table centres its cells, which left every configuration value
 * floating at its own position down the column - Article Number in the middle
 * of the row, the colour names each somewhere else. The cart puts the label on
 * the left and the value in a second column beside it, and an order is the
 * same information, so it reads the same way here.
 *
 * Only the product cell is touched. The Total column keeps its own alignment.
 */
.woocommerce-table--order-details td.woocommerce-table__product-name {
	text-align: left;
}

.woocommerce-table--order-details td.woocommerce-table__product-name > a,
.woocommerce-table--order-details td.woocommerce-table__product-name > .wc-item-meta {
	text-align: left;
}

.woocommerce-table--order-details .wc-item-meta {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-table--order-details .wc-item-meta li {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: 0 0 5px;
}

.woocommerce-table--order-details .wc-item-meta li strong,
.woocommerce-table--order-details .wc-item-meta li .wc-item-meta-label {
	font-size: 13px;
	font-weight: 700;
	text-align: left;
}

.woocommerce-table--order-details .wc-item-meta li p {
	margin: 0;
	text-align: left;
}

/*
 * The product title itself.
 *
 * The cell is centred by a rule carrying more weight than the class selector
 * above, so the title stayed in the middle of the row while its own meta rows
 * sat left. Naming both of the table's classes clears the tie - the same fix
 * the cart needed against shop_table_responsive.
 */
html body table.woocommerce-table--order-details.order_details td.product-name {
	text-align: left !important;
}

/*
 * Totals.
 *
 * The amounts printed at the same weight and size as the product titles above
 * them, so the summary read louder than the items it was summarising. Bringing
 * them down to the size of the configuration labels keeps the item rows as the
 * thing the eye lands on and leaves the totals as a quiet footer.
 */
.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-table--order-details td.product-total {
	font-size: 13px;
}

/*
 * The label cells are th, and the theme sizes every shop_table th at 14px from
 * a selector carrying more weight than the class above. Naming shop_table
 * alongside the order-details class clears it, so label and amount drop
 * together instead of the labels staying a size larger.
 */
.woocommerce table.shop_table.woocommerce-table--order-details tfoot th,
.woocommerce table.shop_table.woocommerce-table--order-details tfoot td {
	font-size: 13px;
	line-height: 1.5;
}

/*
 * The customer note.
 *
 * Lifted out of the totals table by woocommerce/order/order-details.php - see
 * the note there. Free text of any length now wraps inside its own block
 * instead of pushing the totals column around.
 */
.cabina-order-note {
	margin: 20px 0 0;
	padding: 15px 18px;
	background: #f7f7f7;
	border-left: 3px solid #232427;
}

.cabina-order-note__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
}

.cabina-order-note__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	/*
	 * Same label column as the stacked cart, so an order and the cart it came
	 * from line up on a phone. 170px would leave a long countertop name about
	 * 145px to wrap into.
	 */
	.woocommerce-table--order-details .wc-item-meta li {
		grid-template-columns: 124px minmax(0, 1fr);
		gap: 10px;
	}
}