/* 1170px + 15px gutters is the Elementor kit container the header, breadcrumb
   and footer use, so the cart lines up with the rest of the site. The
   configurator pages stay full width - this only scopes the cart. */
.cabina-cart-page {
	width: 100% !important;
	max-width: 1170px !important;
	margin: 0 auto;
	padding: 0 15px;
	color: #050505;
	font-family: inherit;
	box-sizing: border-box;
}

.cabina-cart-page h1 {
	margin: 0 0 22px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
}

.cabina-cart-form {
	margin: 0;
}

.cabina-cart-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed !important;
	font-size: 12px;
}

/* The client design centres every column heading. */
.cabina-cart-table th {
	padding: 7px 8px;
	background: #eeeeee;
	border: 0;
	color: #000;
	font-size: 11px;
	font-weight: 800;
	text-align: center !important;
	vertical-align: middle;
}

.cabina-cart-table td {
	padding: 18px 8px;
	border: 0;
	border-bottom: 1px solid #111;
	vertical-align: top;
	text-align: left !important;
}

/* Values sit centred under their centred headings. Item Description stays left
   aligned - centring a paragraph of product copy reads badly. */
.cabina-cart-table td.cabina-cart-sn,
.cabina-cart-table td.cabina-cart-image,
.cabina-cart-table td.cabina-cart-article,
.cabina-cart-table td.cabina-cart-quantity,
.cabina-cart-table td.cabina-cart-price,
.cabina-cart-table td.cabina-cart-total,
.cabina-cart-table td.cabina-cart-actions {
	text-align: center !important;
}

/* !important throughout: WooCommerce's shop_table rules and the theme both set
   widths on these cells. */
.cabina-cart-table th.cabina-cart-col-sn {
	width: 40px !important;
	text-align: center;
}

.cabina-cart-table th.cabina-cart-col-image {
	width: 168px !important;
}

.cabina-cart-table th.cabina-cart-col-article {
	width: 108px !important;
}

/* Wide enough for the whole minus/input/plus control - at 78px it overflowed
   into the Unit Price column and hid the QAR prefix. */
.cabina-cart-table th.cabina-cart-col-qty {
	width: 112px !important;
}

.cabina-cart-table th.cabina-cart-col-price,
.cabina-cart-table th.cabina-cart-col-total {
	width: 120px !important;
}

.cabina-cart-table th.cabina-cart-col-actions {
	width: 44px !important;
}

.cabina-cart-sn {
	text-align: center;
}

/* Matches the large product render in the client design. The configurator
   plugins each ship a 150px rule for their own preview class; keep them in
   step here so all three rows are the same size. */
.cabina-cart-image img,
.cabina-cart-image img.vmkc-cart-preview-image,
.cabina-cart-image img.vmwc-cart-preview-image,
.cabina-cart-image img.vmvc-cart-preview-image {
	width: 150px !important;
	max-width: 150px !important;
	height: 124px !important;
	margin: 0 auto;
	object-fit: contain;
	display: block;
}

.cabina-cart-article {
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	word-break: break-word;
}

/* A vanity lists two articles under one SN - countertop then storage carcass.
   Each line pairs with the matching block in the Item Description column. */
.cabina-cart-article-line + .cabina-cart-article-line {
	margin-top: 34px;
}

.cabina-cart-component + .cabina-cart-component {
	margin-top: 10px;
}

.cabina-cart-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	text-align: left !important;
}

.cabina-cart-title a {
	color: inherit;
	text-decoration: none;
}

.cabina-cart-detail-rows {
	display: grid;
	row-gap: 5px;
	margin: 0 0 12px;
	max-width: 430px;
	font-size: 12px;
	line-height: 1.35;
	text-align: left !important;
}

.cabina-cart-detail-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
}

.cabina-cart-detail-label {
	margin: 0;
	font-style: italic;
	font-weight: 500;
}

.cabina-cart-detail-value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: #333;
}

.cabina-cart-swatch {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: inline-block;
	border: 1px solid #d8d8d8;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.cabina-cart-swatch-empty {
	background: #f1f1f1;
}

.cabina-cart-note {
	display: grid;
	grid-template-columns: 64px minmax(0, 300px);
	align-items: start;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
}

.cabina-cart-note label {
	margin: 7px 0 0;
	font-style: italic;
	font-weight: 500;
}

.cabina-cart-note textarea {
	width: 100%;
	min-height: 34px;
	padding: 7px 8px;
	border: 1px solid transparent;
	background: transparent;
	color: #333;
	font-size: 12px;
	font-style: italic;
	line-height: 1.35;
	resize: vertical;
}

.cabina-cart-note textarea::placeholder {
	color: #b7b7b7;
}

.cabina-cart-note textarea:focus {
	border-color: #cfcfcf;
	background: #fff;
	outline: 0;
}

/* Sits flush with the left edge of the cell so the control lines up under the
   "Qty" column heading. overflow:hidden stops the theme's wider .quantity box
   painting over the Unit Price cell and hiding the QAR prefix. */
.cabina-cart-quantity {
	text-align: center !important;
	overflow: hidden;
}

/* Background lives on the individual controls, not the wrapper - any residual
   width on the wrapper would otherwise show as a grey slab over the next cell. */
.cabina-cart-quantity .quantity {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: transparent !important;
	white-space: nowrap;
}

/* The theme hides this label with .screen-reader-text, but as a flex child it
   can still claim space in the row. */
.cabina-cart-quantity .quantity label.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

/* The theme outputs data-count buttons, not .minus/.plus. */
.cabina-cart-quantity .quantity .minus,
.cabina-cart-quantity .quantity .plus,
.cabina-cart-quantity .quantity button[data-count] {
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 28px;
	border: 1px solid #eeeeee;
	border-radius: 0;
	background: #f5f5f5;
	color: #111;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	float: none !important;
}

.cabina-cart-quantity input.qty {
	width: 36px !important;
	height: 28px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 36px;
	border: 0;
	border-radius: 0;
	background: #f5f5f5;
	color: #111;
	font-size: 12px;
	text-align: center;
	-moz-appearance: textfield;
}

.cabina-cart-quantity input.qty::-webkit-outer-spin-button,
.cabina-cart-quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cabina-cart-price,
.cabina-cart-total {
	white-space: nowrap;
	font-size: 12px;
}

/* Must stay a table-cell - display:flex on a <td> drops it out of the table
   layout, which threw the fixed column widths off across the whole row. */
.cabina-cart-actions {
	white-space: nowrap;
}

.cabina-cart-actions > * {
	vertical-align: middle;
}

.cabina-cart-remove,
.cabina-cart-edit {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	box-shadow: none !important;
}

.cabina-cart-remove:hover,
.cabina-cart-edit:hover {
	background: transparent;
	text-decoration: none;
}

.cabina-cart-remove {
	color: #ff5b62;
}

.cabina-cart-edit {
	color: #111;
	font-size: 14px;
}

.cabina-cart-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 36px;
	align-items: start;
	margin-top: 20px;
}

.cabina-cart-tools {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.cabina-cart-tools .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
}

.cabina-cart-tools input.input-text {
	height: 36px;
	min-width: 180px;
	border: 1px solid #d8d8d8;
}

.cabina-update-cart {
	height: 36px;
	padding: 0 18px;
	border: 1px solid #111;
	background: #fff;
	color: #111;
	font-weight: 700;
}

.cabina-cart-summary {
	font-size: 12px;
	line-height: 1.55;
}

.cabina-summary-line {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 18px;
	font-weight: 800;
}

.cabina-total-due {
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
	font-size: 22px;
	font-weight: 800;
}

.cabina-cart-copy {
	margin: 18px 0;
	color: #111;
}

.cabina-terms {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 18px 0;
	font-size: 12px;
}

.cabina-terms input {
	width: 14px;
	height: 14px;
	margin: 0;
}

.cabina-terms a {
	color: #c60000;
	text-decoration: underline;
}

.cabina-checkout-button,
.cabina-quotation-button {
	width: 100%;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	border: 1px solid #111;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
}

.cabina-checkout-button {
	background: #6b6b6b;
	color: #fff;
}

.cabina-checkout-button.is-disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.cabina-quotation-button {
	background: #fff;
	color: #111;
}

.cabina-quotation-fields {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid #f3c34a;
	background: #fffaf0;
}

.cabina-quotation-fields[hidden] {
	display: none;
}

.cabina-quotation-fields p {
	margin: 0 0 8px;
	color: #f3a400;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.35;
}

.cabina-quotation-fields input {
	width: 100%;
	height: 36px;
	margin-top: 8px;
	padding: 0 10px;
	border: 1px solid #d9d9d9;
	background: #fff;
}

@media (max-width: 991px) {
	.cabina-cart-table,
	.cabina-cart-table thead,
	.cabina-cart-table tbody,
	.cabina-cart-table th,
	.cabina-cart-table td,
	.cabina-cart-table tr {
		display: block;
		width: 100%;
	}

	.cabina-cart-table thead {
		display: none;
	}

	.cabina-cart-table tr {
		border-bottom: 1px solid #111;
		padding: 14px 0;
	}

	.cabina-cart-table td {
		border-bottom: 0;
		padding: 7px 0;
	}

	.cabina-cart-table td::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 4px;
		color: #666;
		font-size: 10px;
		font-weight: 800;
		text-transform: uppercase;
	}

	.cabina-cart-sn {
		text-align: left;
	}

	.cabina-cart-footer {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575px) {
	.cabina-cart-page h1 {
		font-size: 25px;
	}

	.cabina-cart-note {
		grid-template-columns: 1fr;
	}

	.cabina-cart-tools,
	.cabina-cart-tools .coupon {
		align-items: stretch;
		flex-direction: column;
	}

	.cabina-cart-tools input.input-text,
	.cabina-update-cart {
		width: 100%;
	}

	.cabina-total-due {
		font-size: 18px;
	}
}