/**
 * Cart and checkout, brought into the site's palette.
 *
 * WooCommerce's block checkout ships its own look: white fields, hard
 * near-black borders, 4px corners, Inter headings. Dropped into this site it
 * reads as a different product. Everything below restates it in the handoff's
 * tokens, without changing any of Woo's structure or behaviour.
 */

/* ------------------------------------------------------------- headings */

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-cart__totals-title,
.wc-block-components-order-summary__title {
	font-family: var(--pk-serif) !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: 1.25 !important;
	color: var(--pk-accent) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.wc-block-components-checkout-step__description {
	font-family: var(--pk-sans);
	font-size: 15px;
	color: var(--pk-secondary);
}

/* --------------------------------------------------------------- fields */

.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'],
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-blocks-components-select__select,
.wc-block-components-address-form input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: var(--pk-ground) !important;
	border: 1px solid var(--pk-rule) !important;
	border-radius: var(--pk-radius) !important;
	color: var(--pk-text) !important;
	font-family: var(--pk-sans) !important;
	font-size: 16px !important;
	padding: 14px 14px !important;
	box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus {
	outline: none !important;
	border-color: var(--pk-accent) !important;
	box-shadow: 0 0 0 1px var(--pk-accent) !important;
}

/* Floating labels sit inside the field, so they take the muted tone. */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label {
	font-family: var(--pk-sans) !important;
	color: var(--pk-secondary) !important;
}
.wc-block-components-text-input.is-active label {
	font-size: 13px !important;
}

/* ------------------------------------------------------------- buttons */

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--pk-accent) !important;
	color: var(--pk-raised) !important;
	border: 0 !important;
	border-radius: var(--pk-radius) !important;
	font-family: var(--pk-sans) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 14px 24px !important;
	box-shadow: none !important;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--pk-text) !important;
	color: var(--pk-raised) !important;
}

.wc-block-components-button.is-link {
	color: var(--pk-accent) !important;
	font-family: var(--pk-sans) !important;
}

/* --------------------------------------------------------------- panels */

.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--pk-raised) !important;
	border: 1px solid var(--pk-rule) !important;
	border-radius: var(--pk-radius) !important;
	padding: 22px 24px !important;
}

/* Woo draws hairlines in near-black; they should be the site's rule colour. */
.wc-block-components-totals-wrapper,
.wc-block-cart-items__row,
.wc-block-components-order-summary-item,
.wc-block-components-checkout-step {
	border-color: var(--pk-rule) !important;
}
.wc-block-components-totals-wrapper::after,
.wc-block-components-panel__button {
	border-color: var(--pk-rule) !important;
}

/* ---------------------------------------------------------------- totals */

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__description {
	font-family: var(--pk-sans) !important;
	color: var(--pk-secondary) !important;
	font-size: 16px !important;
}
.wc-block-components-totals-item__value {
	font-family: var(--pk-sans) !important;
	color: var(--pk-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--pk-serif) !important;
	font-size: 24px !important;
	color: var(--pk-text) !important;
}

/* ------------------------------------------------------------ line items */

.wc-block-components-product-name,
.wc-block-components-product-details__name {
	font-family: var(--pk-serif) !important;
	font-size: 18px !important;
	color: var(--pk-accent) !important;
	text-decoration: none !important;
}

.wc-block-components-product-metadata,
.wc-block-components-product-details,
.wc-block-components-product-details__value {
	font-family: var(--pk-sans) !important;
	font-size: 15px !important;
	color: var(--pk-secondary) !important;
}

.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount {
	font-family: var(--pk-sans) !important;
	color: var(--pk-text) !important;
}

/* Product thumbnails are artwork: rounded, never cropped oddly. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 8px !important;
}

/* ------------------------------------------------------ shipping options */

.wc-block-components-radio-control__option {
	font-family: var(--pk-sans) !important;
	color: var(--pk-text) !important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-color: var(--pk-rule) !important;
	border-radius: var(--pk-radius) !important;
}

/* --------------------------------------------------------------- notices */

.wc-block-components-notice-banner {
	border-radius: var(--pk-radius) !important;
	font-family: var(--pk-sans) !important;
}

/* ----------------------------------------------------------- page titles */

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.wp-block-post-title {
	font-family: var(--pk-serif) !important;
	font-weight: 400 !important;
	color: var(--pk-accent) !important;
}

/* Woo floats the label inside the control, so a select needs headroom for it
   or the label sits on top of the value. */
.wc-block-components-select {
	position: relative;
}
.wc-block-components-select__select,
.wc-blocks-components-select__select {
	padding: 24px 14px 8px !important;
	height: auto !important;
	line-height: 1.3 !important;
	appearance: none !important;
}
.wc-block-components-select__label,
.wc-blocks-components-select__label {
	font-size: 12px !important;
	color: var(--pk-secondary) !important;
	top: 8px !important;
	transform: none !important;
}

/* Text inputs with an active floating label need the same headroom. */
.wc-block-components-text-input.is-active input {
	padding: 24px 14px 8px !important;
}
.wc-block-components-text-input.is-active label {
	top: 8px !important;
	transform: none !important;
	color: var(--pk-secondary) !important;
}

/* Small text raised to match the rest of the site. */
.wc-block-components-checkout-step__description { font-size: 16px !important; }
.wc-block-components-product-metadata,
.wc-block-components-product-details,
.wc-block-components-product-details__value { font-size: 16px !important; }
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select { font-size: 17px !important; }
.wc-block-components-button:not(.is-link) { font-size: 17px !important; }
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value { font-size: 17px !important; }
.wc-block-components-product-name { font-size: 19px !important; }