/*
 * WooCommerce on donate.southwestpolicy.com, in the design system: square corners, navy buttons in
 * tracked caps, hairline fields and tables, notices without color bars. Loaded only where
 * WooCommerce runs, after its own styles.
 */

.sppi-shop .woocommerce, .sppi-shop__body { font-family: var(--sppi-sans); color: var(--sppi-ink); }
.sppi-shop__body { padding-top: 40px; }
.sppi-shop__page .woocommerce { margin-top: 8px; }

/* WooCommerce adds its account and cart icons right after the menu; they sit with search, before Donate */
.sppi-header__tools > :is(form, .wp-block-search) { order: 1; }
.sppi-header__tools > :is(.wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) { order: 2; }
.sppi-header__tools > .sppi-donate { order: 3; }
.sppi-header__tools > .wp-block-woocommerce-mini-cart[style*="visibility:hidden"] { display: none; } /* An empty cart takes no room. */
.sppi-header__tools :is(.wc-block-customer-account__account-icon, .wc-block-mini-cart__icon) { width: 22px; height: 22px; color: var(--sppi-navy); fill: currentColor; }
.sppi-header__tools .wc-block-mini-cart__button { padding: 6px; color: var(--sppi-navy); }
.sppi-header__tools .wc-block-mini-cart__badge { background: var(--sppi-navy); color: #fff; border-color: #fff; font: 600 11px/1 var(--sppi-sans); }

/* Breadcrumb as a kicker */
.woocommerce .woocommerce-breadcrumb { margin: 0 0 24px; font: 700 12px/1.4 var(--sppi-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sppi-gray); }
.woocommerce .woocommerce-breadcrumb a { color: var(--sppi-navy); text-decoration: none; }

/* Buttons, like the theme's: navy, square, tracked caps; outline on hover */
.woocommerce :is(a, button, input).button,
.woocommerce :is(a, button, input).button.alt,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce-page #place_order {
	background: var(--sppi-navy);
	color: #fff;
	border: 1.5px solid var(--sppi-navy);
	border-radius: 0;
	padding: 13px 24px;
	font: 600 15px/1.1 var(--sppi-sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.woocommerce :is(a, button, input).button:hover,
.woocommerce :is(a, button, input).button.alt:hover,
.woocommerce #place_order:hover {
	background: #fff;
	color: var(--sppi-navy);
	border-color: var(--sppi-navy);
}
.woocommerce :is(a, button, input).button:is(:disabled, .disabled),
.woocommerce :is(a, button, input).button.alt:is(:disabled, .disabled) { background: var(--sppi-navy); color: #fff; opacity: 0.45; }

/* Fields */
.woocommerce :is(form .form-row input.input-text, form .form-row textarea, form .form-row select, .quantity .qty, div.product form.cart .variations select),
.woocommerce-page :is(form .form-row input.input-text, form .form-row textarea, form .form-row select),
.woocommerce .nyp input.input-text {
	border: var(--sppi-hair);
	border-radius: 0;
	padding: 10px 12px;
	font: 16px/1.4 var(--sppi-sans);
	color: var(--sppi-ink);
	background: #fff;
	box-shadow: none;
}
.woocommerce :is(input.input-text, textarea, select):focus { outline: 2px solid var(--sppi-navy); outline-offset: 1px; }
.woocommerce form .form-row label, .woocommerce div.product form.cart .variations label, .woocommerce .nyp label { font: 600 15px/1.4 var(--sppi-sans); color: var(--sppi-ink); }
.woocommerce form .form-row .required { color: var(--wp--preset--color--terracotta-text, #C1542B); text-decoration: none; }
.select2-container .select2-selection--single { height: 44px; border: var(--sppi-hair); border-radius: 0; }
.select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 28px 0 12px; font: 16px/42px var(--sppi-sans); color: var(--sppi-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-dropdown { border: var(--sppi-hair); border-radius: 0; font-family: var(--sppi-sans); }

/* Notices: a quiet box with a navy rule (terracotta for errors) */
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.woocommerce-page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	background: var(--sppi-quiet);
	border-top: 2px solid var(--sppi-navy);
	border-radius: 0;
	color: var(--sppi-ink);
	font: 16px/1.5 var(--sppi-sans);
}
.woocommerce :is(.woocommerce-message, .woocommerce-info)::before { color: var(--sppi-navy); }
.woocommerce .woocommerce-error { border-top-color: var(--wp--preset--color--terracotta, #D25B2F); }
.woocommerce .woocommerce-error::before { color: var(--wp--preset--color--terracotta-text, #C1542B); }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: var(--sppi-navy); }
/* The same notices in the markup WooCommerce now uses with block themes */
body .wc-block-components-notice-banner:is(.is-info, .is-success, .is-warning, .is-error, .is-default) { background: var(--sppi-quiet); border: 0; border-top: 2px solid var(--sppi-navy); border-radius: 0; color: var(--sppi-ink); font: 16px/1.5 var(--sppi-sans); }
body .wc-block-components-notice-banner:is(.is-info, .is-success, .is-warning, .is-default) > svg { fill: #fff; background: var(--sppi-navy); }
body .wc-block-components-notice-banner.is-error { border-top-color: var(--wp--preset--color--terracotta, #D25B2F); }
body .wc-block-components-notice-banner.is-error > svg { fill: #fff; background: var(--wp--preset--color--terracotta-text, #C1542B); }
.wc-block-components-notice-banner a:not(.button) { color: var(--sppi-navy); }

/* A gift page: the title and amount at reading width; no empty photo column, no "Category:" line */
.woocommerce div.product:has(.woocommerce-product-gallery__image--placeholder) div.images { display: none; }
.woocommerce div.product:has(.woocommerce-product-gallery__image--placeholder) div.summary { float: none; width: auto; max-width: 720px; }
.woocommerce div.product .product_title { margin: 0 0 16px; font-size: clamp(32px, 4.2vw, 44px); line-height: 1.12; }
.woocommerce div.product :is(p.price, span.price) { color: var(--sppi-navy); font: 600 22px/1.3 var(--sppi-sans); }
.woocommerce div.product .woocommerce-product-details__short-description { font-family: var(--sppi-serif); font-size: 19px; line-height: 1.6; }
.woocommerce div.product .product_meta { display: none; }
.woocommerce div.product form.cart { margin-top: 20px; }
.woocommerce div.product form.cart .quantity:has(input[type="hidden"]) { display: none; } /* One gift per order: no empty box nudging the button. */
.woocommerce .nyp { margin-bottom: 16px; }
.woocommerce .nyp input.input-text { width: 220px; max-width: 100%; font-size: 20px; }
.woocommerce div.product form.cart .variations { margin-bottom: 16px; border: 0; }
.woocommerce div.product form.cart .variations :is(td, th) { padding: 0 12px 8px 0; border: 0; vertical-align: middle; }
.woocommerce div.product form.cart .reset_variations { font-size: 14px; color: var(--sppi-navy); }
.woocommerce div.product .woocommerce-variation-price .price { font-size: 20px; }

/* Tabs as a ruled list, not folders */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 40px 0 24px; border-bottom: var(--sppi-hair); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 24px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 0; font: 700 13px/1.4 var(--sppi-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sppi-gray); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--sppi-navy); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sppi-navy); }

/* Lists of gifts (Recurring Gifts): a card per gift; no result count or sorting for a handful */
.woocommerce :is(.woocommerce-result-count, .woocommerce-ordering) { display: none; }
.woocommerce .woocommerce-products-header__title { margin-top: 0; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none; width: auto; margin: 0; padding: 24px; border: var(--sppi-hair); }
.woocommerce ul.products li.product img.woocommerce-placeholder { display: none; } /* Gifts have no photos. */
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font: 600 22px/1.25 var(--sppi-serif); letter-spacing: 0; text-transform: none; color: var(--sppi-navy); }
.woocommerce ul.products li.product .price { color: var(--sppi-ink); font: 17px/1.4 var(--sppi-sans); }
.woocommerce ul.products li.product .button { margin-top: 12px; }
.woocommerce span.onsale { display: none; }

/* Tables: cart, order review, account */
.woocommerce table.shop_table { border: var(--sppi-hair); border-radius: 0; border-collapse: collapse; }
.woocommerce table.shop_table :is(th, td) { padding: 12px 14px; border-top: var(--sppi-hair); }
.woocommerce table.shop_table thead th { font: 700 12px/1.4 var(--sppi-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sppi-navy); }
.woocommerce table.shop_table .order-total :is(th, td) { font-weight: 700; color: var(--sppi-navy); }
.woocommerce table.cart img.woocommerce-placeholder { display: none; }
.woocommerce a.remove { color: var(--wp--preset--color--terracotta-text, #C1542B) !important; } /* WooCommerce sets it red with !important. */
.woocommerce a.remove:hover { background: var(--wp--preset--color--terracotta-text, #C1542B); color: #fff !important; }

/* Checkout */
.woocommerce-checkout :is(#customer_details h3, #order_review_heading), .woocommerce :is(.cart_totals h2, .woocommerce-order-details__title, .woocommerce-column__title) { font: 600 24px/1.25 var(--sppi-serif); color: var(--sppi-navy); }
.woocommerce-checkout #payment, .woocommerce #payment { background: var(--sppi-quiet); border-radius: 0; }
.woocommerce #payment ul.payment_methods { border-bottom: var(--sppi-hair); }
.woocommerce #payment div.payment_box { background: #fff; border: var(--sppi-hair); border-radius: 0; color: var(--sppi-ink); }
.woocommerce #payment div.payment_box::before { display: none; }
.woocommerce #payment .place-order { padding-top: 8px; }
.woocommerce #payment #place_order { width: 100%; padding-block: 16px; }
.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper { font-size: 14px; line-height: 1.5; color: var(--sppi-gray); }

/* Thank-you page */
.woocommerce ul.order_details { padding: 16px; margin-bottom: 32px; background: var(--sppi-quiet); }
.woocommerce ul.order_details li { border-right-color: var(--sppi-rule); font: 12px/1.5 var(--sppi-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sppi-gray); }
.woocommerce ul.order_details li strong { margin-top: 4px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--sppi-ink); }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border-top: var(--sppi-hair); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: var(--sppi-hair); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 0; color: var(--sppi-ink); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--sppi-navy); font-weight: 700; }
.woocommerce form :is(.woocommerce-form-login, .woocommerce-form-register), .woocommerce :is(form.login, form.register, form.checkout_coupon) { border: var(--sppi-hair); border-radius: 0; }

/* The store notice bar, if it is ever switched on */
.woocommerce-store-notice, p.demo_store { background: var(--sppi-navy); font: 15px/1.4 var(--sppi-sans); }

@media (max-width: 768px) {
	.sppi-shop__body { padding-top: 24px; }
}