/*
 * Cart, checkout and account.
 *
 * Covers both markups WooCommerce ships: the shortcode pages, and the newer
 * block Cart and Checkout, which use an entirely different class namespace.
 * Which one a site has depends on when its pages were created, so both are
 * styled rather than guessing.
 */

/* ------------------------------------------------------------ page head --- */
.jq-shop-page { max-width: none; }
.jq-cart-head { margin-bottom: 40px; }
.jq-cart-head__title {
	font-family: var(--jq-serif);
	font-size: var(--jq-page-title);
	font-weight: 600;
	line-height: 1;
	margin: 0;
}

/* =====================================================================
   Shortcode cart
   ===================================================================== */
.woocommerce-cart .woocommerce { display: block; }
.woocommerce-cart form.woocommerce-cart-form { margin-bottom: 48px; }

.woocommerce table.shop_table.cart {
	border: 0;
	border-collapse: collapse;
	width: 100%;
	margin: 0;
}
.woocommerce table.shop_table.cart thead th {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	font-weight: 600;
	padding: 0 16px 14px 0;
	border-bottom: 1px solid var(--jq-ink);
	text-align: left;
}
.woocommerce table.shop_table.cart td {
	padding: 24px 16px 24px 0;
	border-top: 0;
	border-bottom: 1px solid var(--jq-rule);
	vertical-align: middle;
	font-size: 15px;
	color: var(--jq-body);
	background: transparent;
}
.woocommerce table.shop_table.cart td.product-thumbnail { width: 96px; padding-right: 20px; }
.woocommerce table.shop_table.cart td.product-thumbnail img {
	width: 96px;
	height: auto;
	background: var(--jq-panel);
	display: block;
}
.woocommerce table.shop_table.cart td.product-name a {
	font-family: var(--jq-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--jq-ink);
	line-height: 1.2;
}
.woocommerce table.shop_table.cart td.product-name a:hover { color: var(--jq-orange); }
.woocommerce table.shop_table.cart td.product-name .variation {
	margin: 6px 0 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jq-mid);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.woocommerce table.shop_table.cart td.product-name .variation dt,
.woocommerce table.shop_table.cart td.product-name .variation dd { margin: 0; padding: 0; float: none; }
.woocommerce table.shop_table.cart td.product-name .variation dd p { margin: 0; }
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal { font-weight: 600; color: var(--jq-ink); white-space: nowrap; }
.woocommerce table.shop_table.cart td.product-remove { width: 40px; text-align: right; }
.woocommerce table.shop_table.cart td.actions {
	padding: 28px 0 0;
	border-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.woocommerce table.shop_table.cart td.actions .coupon { display: flex; gap: 10px; margin: 0; }

/* Totals */
.woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: start; }
.woocommerce .cart-collaterals .cart_totals { width: auto; float: none; }
.woocommerce .cart-collaterals .cross-sells { width: auto; float: none; }
.woocommerce .cart_totals > h2 {
	font-family: var(--jq-serif);
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 18px;
}
.woocommerce .cart_totals table.shop_table {
	border: 0;
	background: var(--jq-panel);
	border-top: 3px solid var(--jq-teal);
	padding: 8px 24px 16px;
	margin: 0 0 20px;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 16px 0;
	border: 0;
	border-bottom: 1px solid var(--jq-rule);
	font-size: 15px;
}
.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce .cart_totals table.shop_table th {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	font-weight: 600;
	width: 45%;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-size: 18px; color: var(--jq-ink); }
.woocommerce .cart_totals .order-total td { font-weight: 600; }
.woocommerce .wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; }
.woocommerce .cart_totals .shipping-calculator-button {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--jq-orange);
}

/* Cross-sells, using the theme's own card */
.jq-crosssells { margin-top: 8px; }
.jq-crosssells__head { margin-bottom: 24px; }
.jq-crosssells__title {
	font-family: var(--jq-serif);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.1;
	margin: 8px 0 0;
}
.jq-crosssells .jq-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.jq-crosssells .jq-product__photo { height: 200px; }

/* Empty cart */
.woocommerce .cart-empty {
	font-family: var(--jq-serif);
	font-size: 32px;
	font-weight: 600;
	color: var(--jq-ink);
}
.woocommerce .return-to-shop { margin-top: 20px; }

/* =====================================================================
   Shortcode checkout
   ===================================================================== */
.woocommerce-checkout .woocommerce { display: block; }
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: start; }
.woocommerce-checkout form.checkout .col2-set { grid-column: 1; display: block; }
.woocommerce-checkout #order_review_heading { grid-column: 2; margin: 0 0 18px; }
.woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout form.checkout h3 {
	font-family: var(--jq-serif);
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 20px;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields { margin-bottom: 32px; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48.5%; }
.woocommerce-checkout table.shop_table {
	background: var(--jq-panel);
	border: 0;
	border-top: 3px solid var(--jq-teal);
	padding: 8px 24px 16px;
	margin: 0 0 20px;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--jq-rule);
	padding: 14px 0;
	font-size: 15px;
}
.woocommerce-checkout table.shop_table thead th {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	border-bottom-color: var(--jq-ink);
}
.woocommerce-checkout table.shop_table .order-total th,
.woocommerce-checkout table.shop_table .order-total td { font-size: 18px; color: var(--jq-ink); border-bottom: 0; }
.woocommerce-checkout #payment { background: var(--jq-panel); border-radius: 0; border-top: 3px solid var(--jq-teal); padding: 24px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--jq-rule); padding: 0 0 16px; margin: 0; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin-bottom: 8px; }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: 0; font-size: 14px; color: var(--jq-body); margin: 10px 0 0; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 18px 0 0; margin: 0; }
.woocommerce-checkout #place_order { width: 100%; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--jq-mid); }
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 20px; }

/* Order received */
.woocommerce-order .woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	margin: 28px 0;
	padding: 24px;
	background: var(--jq-panel);
	border-top: 3px solid var(--jq-teal);
}
.woocommerce-order .woocommerce-order-overview li {
	border: 0;
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	float: none;
	margin: 0;
	padding: 0;
}
.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--jq-serif);
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jq-ink);
}

/* =====================================================================
   Block cart and checkout
   ===================================================================== */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin: 0; }
.wc-block-components-title,
.wc-block-cart__submit-container + *,
.wc-block-components-order-summary__title {
	font-family: var(--jq-serif) !important;
	font-weight: 600;
}
.wc-block-components-product-name {
	font-family: var(--jq-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--jq-ink);
}
.wc-block-components-product-name:hover { color: var(--jq-orange); }
.wc-block-cart-items__header {
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	border-bottom: 1px solid var(--jq-ink);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--jq-rule); }
.wc-block-components-button,
.wc-block-components-button:not(.is-link) {
	background: var(--jq-orange);
	color: #fff;
	border-radius: 0;
	border: 1px solid transparent;
	min-height: var(--jq-btn-height);
	font-family: var(--jq-sans);
	font-size: var(--jq-small);
	font-weight: 600;
	letter-spacing: var(--jq-track-btn);
	text-transform: uppercase;
}
.wc-block-components-button:hover:not(.is-link) { background: var(--jq-ink); color: #fff; }
.wc-block-components-button.is-link { color: var(--jq-orange); }
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-block-components-combobox input {
	border: 1px solid var(--jq-rule) !important;
	border-radius: 0 !important;
	background: #fff;
	font-family: var(--jq-sans);
	color: var(--jq-ink);
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--jq-mid); }
.wc-block-components-totals-item__label { color: var(--jq-mid); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--jq-serif);
	font-weight: 600;
	color: var(--jq-ink);
}
.wc-block-components-panel,
.wc-block-components-order-summary {
	background: var(--jq-panel);
	border-top: 3px solid var(--jq-teal);
	border-radius: 0;
}
.wc-block-components-notice-banner {
	border-radius: 0;
	border: 0;
	border-top: 3px solid var(--jq-teal);
	background: var(--jq-panel);
}
.wc-block-components-notice-banner.is-error { border-top-color: var(--jq-orange); }
.wc-block-components-quantity-selector { border-radius: 0; border: 1px solid var(--jq-rule); }

/* ---------------------------------------------------------------------------
   Block cart totals.

   Your Cart page is the block version, so this is the panel in the screenshot:
   the "Cart totals" heading, the coupon row, the estimated total and the
   checkout button.
   --------------------------------------------------------------------------- */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar {
	background: var(--jq-panel);
	border-top: 3px solid var(--jq-teal);
	padding: 28px;
}
.wc-block-cart__sidebar .wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
	font-family: var(--jq-serif) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1.1;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--jq-ink) !important;
	margin: 0 0 18px !important;
}

/* Coupon row */
.wc-block-components-panel__button {
	font-family: var(--jq-sans);
	font-size: var(--jq-label-sm) !important;
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--jq-ink) !important;
	padding: 16px 0 !important;
}
.wc-block-components-panel {
	background: transparent;
	border-top: 1px solid var(--jq-rule);
	border-bottom: 1px solid var(--jq-rule);
	padding: 0;
}
.wc-block-components-panel__button svg { fill: var(--jq-orange); }

/* Totals rows */
.wc-block-components-totals-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--jq-rule);
	margin: 0;
}
.wc-block-components-totals-item__label {
	font-family: var(--jq-sans);
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	font-weight: 600;
}
.wc-block-components-totals-item__value {
	font-family: var(--jq-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--jq-ink);
}
.wc-block-components-totals-footer-item { border-bottom: 0; padding-top: 20px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--jq-serif);
	font-size: 22px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jq-ink);
	font-weight: 600;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--jq-sans);
	font-size: 22px;
	font-weight: 600;
	color: var(--jq-ink);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description { display: none; }

/* Checkout button */
.wc-block-cart__submit-container { padding: 24px 0 0; }
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--jq-orange) !important;
	color: #fff !important;
	border-radius: 0 !important;
	border: 0 !important;
	min-height: var(--jq-btn-height);
	width: 100%;
	font-family: var(--jq-sans) !important;
	font-size: var(--jq-small) !important;
	font-weight: 600 !important;
	letter-spacing: var(--jq-track-btn) !important;
	text-transform: uppercase !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--jq-ink) !important; }

/* Line items */
.wc-block-cart-items__header th {
	font-family: var(--jq-sans);
	font-size: var(--jq-label-sm);
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
	font-weight: 600;
	border-bottom: 1px solid var(--jq-ink);
	padding-bottom: 14px;
}
.wc-block-cart-item__wrap .wc-block-components-product-name {
	font-family: var(--jq-serif);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}
.wc-block-components-product-metadata {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jq-mid);
}
.wc-block-components-product-price__value,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
	font-weight: 600;
	color: var(--jq-ink);
}
.wc-block-cart-item__image img { background: var(--jq-panel); }
.wc-block-components-quantity-selector {
	border: 1px solid var(--jq-rule);
	border-radius: 0;
}
.wc-block-components-quantity-selector__input { font-family: var(--jq-sans); color: var(--jq-ink); }
.wc-block-components-quantity-selector__button { color: var(--jq-mid); }
.wc-block-components-quantity-selector__button:hover { color: var(--jq-orange); }
.wc-block-cart-item__remove-link {
	font-size: 11px;
	letter-spacing: var(--jq-track-label);
	text-transform: uppercase;
	color: var(--jq-mid);
}
.wc-block-cart-item__remove-link:hover { color: var(--jq-orange); }

/* Block checkout */
.wc-block-checkout__form .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--jq-serif) !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--jq-ink) !important;
}
.wc-block-components-checkout-step__description { color: var(--jq-mid); }
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: var(--jq-panel);
	border-top: 3px solid var(--jq-teal);
	padding: 28px;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading-content { color: var(--jq-mid); }
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus { border-color: var(--jq-ink) !important; box-shadow: none !important; }