/*
 * WooCommerce's cart and checkout, wearing the design's own clothes.
 *
 * Every value here was MEASURED on the design's own checkout — see
 * style-specimens/checkout.json and the .png beside it. Nothing is
 * authored: a role the design did not draw gets no rule, and Woo keeps
 * its own styling for it.
 *
 * These are computed values, so they are frozen colours: an owner who
 * later edits the theme's tokens changes the rest of the site and not
 * this file. Re-run stage -1b and stage 4.6 to refresh it.
 */

/* the step headings */
.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-cart .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-title,
.wc-block-cart .wc-block-components-title {
	color: rgb(46, 38, 31);
	font-size: 20px;
	font-weight: 300;
}

/* the fields */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
.wc-block-cart .wc-block-components-form .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
.wc-block-cart .wc-block-components-form .wc-block-components-textarea,
.wc-block-checkout .wc-blocks-components-select__container .wc-blocks-components-select__select,
.wc-block-cart .wc-blocks-components-select__container .wc-blocks-components-select__select {
	background-color: rgb(255, 255, 255);
	color: rgb(46, 38, 31);
	border: 1px solid rgb(229, 231, 235);
	border-radius: 0px;
	padding-left: 16px;
	padding-right: 16px;
}

/* the labels, put back above their fields — where the design draws them */
.wc-block-checkout .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input),
.wc-block-cart .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input),
.wc-block-checkout .wc-blocks-components-select__container,
.wc-block-cart .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	background: transparent;
}

.wc-block-checkout .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input) label,
.wc-block-cart .wc-block-components-text-input:not(.wc-block-components-totals-coupon__input) label,
.wc-block-checkout .wc-blocks-components-select__container .wc-blocks-components-select__label,
.wc-block-cart .wc-blocks-components-select__container .wc-blocks-components-select__label {
	order: -1;
	position: static;
	transform: none;
	max-width: none;
	margin: 0 0 8px;
	color: rgb(106, 113, 129);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
.wc-block-cart .wc-block-components-form .wc-block-components-text-input input,
.wc-block-checkout .wc-blocks-components-select__container .wc-blocks-components-select__select,
.wc-block-cart .wc-blocks-components-select__container .wc-blocks-components-select__select {
	padding: 12px 16px 12px 16px;
	font-size: 14px;
	font-weight: 400;
}

/* focus, as the design draws it — it suppresses the browser's ring */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-cart .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus,
.wc-block-cart .wc-blocks-components-select__select:focus {
	outline: none;
	box-shadow: none;
	border-color: rgb(229, 231, 235);
}

.wc-block-checkout .wc-blocks-components-select__container svg,
.wc-block-cart .wc-blocks-components-select__container svg {
	top: auto;
	bottom: 12px;
	transform: none;
}

/* the coupon's Apply button, in the design's button voice */
.wc-block-checkout .wc-block-components-totals-coupon__button,
.wc-block-cart .wc-block-components-totals-coupon__button {
	background-color: rgb(46, 38, 31);
	color: rgb(250, 248, 245);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	border-radius: 0px;
}

/* the coupon keeps Woo's own compact row — machinery the design never drew — in the design's voice */
.wc-block-checkout .wc-block-components-totals-coupon__input label,
.wc-block-cart .wc-block-components-totals-coupon__input label {
	color: rgb(106, 113, 129);
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* the order summary */
.wc-block-checkout .wc-block-components-sidebar,
.wc-block-cart .wc-block-components-sidebar {
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(229, 231, 235);
	border-radius: 0px;
	padding: 32px 32px 32px 32px;
}

/* one card, and the design's own two rules inside it */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout .wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-cart .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-checkout .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block {
	border: 0;
}

.wc-block-checkout .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-order-summary-item,
.wc-block-cart .wc-block-components-order-summary-item {
	border-color: rgb(229, 231, 235);
}

/* the totals */
.wc-block-checkout .wc-block-components-totals-item .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-item .wc-block-components-totals-item__label {
	color: rgb(46, 38, 31);
	font-size: 16px;
	font-weight: 400;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: rgb(46, 38, 31);
	font-size: 24px;
	font-weight: 300;
}

/* the button that finishes the order */
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart .wc-block-cart__submit-button {
	background-color: rgb(46, 38, 31);
	color: rgb(250, 248, 245);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	border-radius: 0px;
	padding: 16px 0px 16px 0px;
}

/* and the quiet way back */
.wc-block-checkout .wc-block-components-checkout-return-to-cart-button,
.wc-block-cart .wc-block-components-checkout-return-to-cart-button {
	color: rgb(106, 113, 129);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}