/*
 * WooCommerce styles that are not tied to one block: shared form fields and
 * buttons in the cart and checkout, store notices, the classic My Account
 * screens (still a shortcode), order details and the wishlist.
 *
 * Loaded on the front end only while WooCommerce is active.
 */

/*
 * woocommerce-blocktheme.css caps page titles on these pages at 1000px; a
 * wide-aligned title should line up with the wide Cart and Checkout blocks.
 */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wp-block-post-title.alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* ---------------------------------------------------------------------------
 * Block form fields (cart, checkout, mini cart)
 *
 * Woo styles these with selectors such as
 * ".wc-block-components-form .wc-block-components-text-input input[type=email]"
 * and a white background, so the paper-coloured square fields need !important.
 * ------------------------------------------------------------------------ */

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-block-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	border: 1px solid var(--wp--preset--color--base-3) !important;
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
	outline: none;
}

.wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: 0;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 0;
	border-color: var(--wp--preset--color--contrast-2);
}

.wc-block-components-button:not(.is-link) {
	border-radius: 0;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-block-components-totals-wrapper {
	border-top-color: var(--wp--preset--color--base-3);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 700;
}

.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	border-radius: 0;
}

/* Notices (block and classic). */
.wc-block-components-notice-banner {
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 1em 1.25em;
	list-style: none;
	border: 1px solid var(--wp--preset--color--base-3);
	border-inline-start: 3px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-error {
	border-inline-start-color: var(--wp--preset--color--accent);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-inline-start: 1em;
}

/* ---------------------------------------------------------------------------
 * Classic buttons and fields (My Account, order pages, lost password)
 * ------------------------------------------------------------------------ */

.woocommerce :is(a.button, button.button, input.button, .button.alt) {
	display: inline-block;
	padding: 0.85em 1.5em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.woocommerce :is(a.button, button.button, input.button, .button.alt):hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.woocommerce form .form-row {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-block-end: 0.4rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce form .form-row :is(input.input-text, textarea, select),
.woocommerce form .form-row .select2-selection {
	width: 100%;
	min-height: 3rem;
	padding: 0.7em 1em;
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.woocommerce form .form-row :is(input.input-text, textarea, select):focus {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.woocommerce form .form-row .required {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.woocommerce .woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	margin-inline-end: 1em;
	font-size: var(--wp--preset--font-size--small);
}

/* Login and register side by side. */
.woocommerce .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--wp--preset--spacing--60);
}

.woocommerce .u-columns.col2-set > .u-column1,
.woocommerce .u-columns.col2-set > .u-column2 {
	float: none;
	width: auto;
}

.woocommerce :is(.woocommerce-form-login, .woocommerce-form-register) {
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--hairline);
}

/* ---------------------------------------------------------------------------
 * My Account
 * ------------------------------------------------------------------------ */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {

	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 14rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}
}

/* Woo's clearfix pseudo-elements would otherwise take grid cells. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--wp--custom--hairline);
}

.woocommerce-MyAccount-navigation li {
	border-bottom: var(--wp--custom--hairline);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.85em 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
	color: var(--wp--preset--color--contrast);
}

.woocommerce-MyAccount-navigation .is-active a::before {
	content: "— ";
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* Orders, downloads and order details tables. */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_table :is(th, td) {
	padding: 0.9em 0.75em 0.9em 0;
	border: 0;
	border-bottom: var(--wp--custom--hairline);
	text-align: start;
}

.woocommerce table.shop_table thead th {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.woocommerce table.shop_table .button {
	margin: 0.15em 0.25em 0.15em 0;
	padding: 0.55em 0.9em;
}

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--50);
}

.woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-2);
}

.woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
}

.woocommerce-Address-title h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------------------------------------------------------------------------
 * Order confirmation
 * ------------------------------------------------------------------------ */

/* The status block prints an h1 ("Order received") and a thank-you paragraph. */
.wooyeah-order-status h1 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
}

.wooyeah-order-status p {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
}

.wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) 0;
	border-block: var(--wp--custom--hairline);
}

.wc-block-order-confirmation-summary-list-item__key {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.wc-block-order-confirmation-address-wrapper address {
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--base-2);
	font-style: normal;
}

/* ---------------------------------------------------------------------------
 * Wishlist (WooCommerce shopper lists, when the store turns the feature on)
 * ------------------------------------------------------------------------ */

.wp-block-woocommerce-add-to-wishlist-button button,
.wp-block-woocommerce-add-to-wishlist-button .wp-block-button__link {
	border-radius: 0;
}

.wp-block-woocommerce-wishlist img {
	border-radius: 0;
}