/* JPA UI updates (Jake & Company): header cart, cart and checkout.
   Loads before the Customizer CSS, so rules are scoped by body class to win on specificity. */

:root {
	--jpa-slate: #67869a;
	--jpa-slate-dark: #4f6b7d;
	--jpa-ink: rgba(0, 0, 0, .78);
	--jpa-muted: rgba(0, 0, 0, .55);
	--jpa-line: #e4e0d8;
	--jpa-field: #cfcac0;
	--jpa-paper: #f7f5f0;
	--jpa-red: #b31b34;
	--jpa-ok: #2f6f4f;
}

/* ---------- Notices ----------
   The Customizer's "HIDE COUPON CODES" rule also hides every WooCommerce notice,
   including "added to your cart". Bring them back (the coupon field stays hidden). */
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-error { display: block; }
body.woocommerce-page .woocommerce-form-coupon-toggle { display: none; }

@media (max-width: 767px) {
	body.woocommerce-cart .woocommerce-notices-wrapper > *,
	body.woocommerce-checkout .woocommerce-notices-wrapper > * { font-size: 14px; line-height: 1.45; padding: 12px 14px; margin-bottom: 12px; }
	body.woocommerce-cart .woocommerce-message .button { display: none; } /* "View cart" while already on the cart */
}

/* ---------- Header cart (mobile) ---------- */
.jpa-header-cart { display: none; }

@media (max-width: 767px) {
	.jpa-header-cart {
		display: flex; align-items: center; justify-content: center;
		position: relative; flex: 0 0 57px; width: 57px; align-self: stretch;
		border-left: 1px solid rgba(0, 0, 0, .1);
		color: inherit; text-decoration: none;
	}
	.jpa-header-cart__icon::before {
		content: '\f07a'; font-family: 'FontAwesome'; font-size: 22px; line-height: 1;
	}
	.jpa-header-cart__count {
		position: absolute; top: 50%; left: 50%; margin: -22px 0 0 4px;
		min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
		background: var(--jpa-red); color: #fff; text-align: center;
		font: 600 11px/18px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	}
	#jc-cartbtn { display: none !important; } /* old floating button (snippet #45) */
}

/* ---------- Shared: buttons and reassurance ---------- */
body.woocommerce-cart .checkout-button,
body.woocommerce-checkout #place_order {
	display: block; width: 100%; padding: 15px; margin: 16px 0 0;
	border: 0; border-radius: 8px; background: var(--jpa-slate); color: #fff;
	font-weight: 700; font-size: 16px; line-height: 1.4; letter-spacing: .04em; text-align: center; text-transform: uppercase;
}
body.woocommerce-cart .checkout-button::after,
body.woocommerce-checkout #place_order::after { display: none; } /* theme's inset frame */
body.woocommerce-cart .checkout-button:hover,
body.woocommerce-checkout #place_order:hover { background: var(--jpa-slate-dark); color: #fff; }
.jpa-btn-total { font-weight: 500; opacity: .85; }
.jpa-btn-total .woocommerce-Price-amount { color: inherit; }

.jpa-reassure { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--jpa-muted); text-align: center; }
.jpa-reassure a { color: var(--jpa-slate-dark); text-decoration: underline; }
.jpa-secure::before { content: '\f023'; font-family: 'FontAwesome'; margin-right: 6px; }

/* ---------- Cart ---------- */
/* Quantity applies on its own (JS), so the Update cart button isn't needed. */
body.woocommerce-cart .woocommerce-cart-form [name="update_cart"] {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

body.woocommerce-cart .cart_totals h2 { display: none; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals tr.shipping p:not(:first-child) { display: none; } /* "Shipping options will be updated during checkout." */
.jpa-opt { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--jpa-muted); }
body.woocommerce-cart .cart_totals table.shop_table { border: 0; }
body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td { border: 0; padding: 5px 0; background: none; font-size: 14px; }
body.woocommerce-cart .cart_totals td * { font-family: inherit; font-size: inherit; }
body.woocommerce-cart .cart_totals tr.shipping td { color: var(--jpa-ok); font-weight: 600; }
body.woocommerce-cart .cart_totals tr.shipping th { color: inherit; }
body.woocommerce-cart .cart_totals tr.shipping p { margin: 0; }
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td { border-top: 1px solid var(--jpa-line); padding-top: 10px; font-size: 16px; font-weight: 700; }

@media (min-width: 768px) {
	/* Column headers ran together ("QUANTITYSUBTOTAL"). */
	body.woocommerce-cart table.cart th.product-quantity,
	body.woocommerce-cart table.cart th.product-price { padding-right: 20px; }
	body.woocommerce-cart table.cart th.product-subtotal,
	body.woocommerce-cart table.cart td.product-subtotal { text-align: right; }
	body.woocommerce-cart .cart_totals td { text-align: right; }
}

@media (max-width: 767px) {
	/* One compact row per item: image | name, options, qty + remove | price. */
	body.woocommerce-cart table.cart thead { display: none; }
	body.woocommerce-cart table.cart { border: 0; }
	body.woocommerce-cart table.cart tr.cart_item {
		display: grid; grid-template-columns: 76px 1fr auto; grid-template-areas:
			"thumb name price"
			"thumb qty  price";
		column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--jpa-line);
	}
	body.woocommerce-cart table.cart tr.cart_item td {
		display: block; padding: 0; border: 0; background: none; text-align: left;
	}
	body.woocommerce-cart table.cart tr.cart_item td::before { display: none; } /* WooCommerce's mobile column labels */
	body.woocommerce-cart table.cart tr.cart_item td.product-thumbnail { grid-area: thumb; display: block !important; }
	body.woocommerce-cart table.cart tr.cart_item td.product-thumbnail img { width: 76px; height: 60px; object-fit: cover; border: 1px solid var(--jpa-line); }
	body.woocommerce-cart table.cart tr.cart_item td.product-name { grid-area: name; font-size: 14px; font-weight: 600; line-height: 1.3; }
	body.woocommerce-cart table.cart tr.cart_item td.product-name dl.variation { font-size: 12px; font-weight: 400; color: var(--jpa-muted); margin: 2px 0 0; }
	body.woocommerce-cart table.cart tr.cart_item td.product-price { display: none; }
	body.woocommerce-cart table.cart tr.cart_item td.product-quantity { grid-area: qty; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
	body.woocommerce-cart table.cart tr.cart_item td.product-quantity .qty { width: 56px; height: 34px; margin: 0; padding: 4px; border: 1px solid var(--jpa-field); border-radius: 6px; text-align: center; font-size: 16px; }
	body.woocommerce-cart table.cart tr.cart_item td.product-subtotal { grid-area: price; font-weight: 600; font-size: 14px; text-align: right; }
	/* Remove moves next to the quantity (grid row 2). */
	body.woocommerce-cart table.cart tr.cart_item td.product-remove { grid-area: qty; justify-self: start; align-self: center; margin: 8px 0 0 70px; }
	body.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
		width: auto; height: auto; font-size: 12px; font-weight: 400; color: var(--jpa-muted) !important; background: none !important; text-decoration: underline;
	}
	body.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove::after { content: 'Remove'; font-size: 12px; }
	body.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove { font-size: 0; }
	/* Coupon is hidden and Update cart is automatic, so the actions row has nothing to show.
	   The button stays in the page; the script clicks it. */
	body.woocommerce-cart table.cart td.actions { display: none !important; }

	/* Narrower page margins on cart and checkout so rows and fields have room. */
	body.woocommerce-cart .site-main .content,
	body.woocommerce-checkout .site-main .content { padding-left: 16px; padding-right: 16px; }
	body.woocommerce-cart table.cart { padding: 4px 12px; }
	body.woocommerce-cart table.cart tr.cart_item:last-of-type { border-bottom: 0; }

	body.woocommerce-cart .cart-collaterals,
	body.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; margin-top: 14px; }
}

/* ---------- Checkout ---------- */
.jpa-summary { margin: 0 0 22px; background: var(--jpa-paper); border: 1px solid var(--jpa-line); border-radius: 8px; font-size: 14px; }
.jpa-summary summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.jpa-summary summary::-webkit-details-marker { display: none; }
.jpa-summary summary > span::after { content: ' ▾'; }
.jpa-summary[open] summary > span::after { content: ' ▴'; }
.jpa-summary summary b { font-size: 15px; }
.jpa-summary ul { list-style: none; margin: 0; padding: 0 14px 10px; }
.jpa-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--jpa-line); }

/* Optional fields behind a link (JS adds .jpa-tucked). */
.jpa-tucked { display: none !important; }
body.woocommerce-checkout .jpa-reveal {
	display: block; margin: 8px 0 0; padding: 0; border: 0; background: none; box-shadow: none;
	font: 400 13px/1.4 inherit; letter-spacing: normal; text-transform: none; color: var(--jpa-slate-dark); text-decoration: underline; cursor: pointer;
}
body.woocommerce-checkout .jpa-reveal::after { display: none; }

/* Gift card, now under Payment. */
body.woocommerce-checkout .jpa-giftcard { margin: 18px 0 10px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 13px; }
body.woocommerce-checkout .jpa-giftcard a { color: var(--jpa-slate-dark); text-decoration: underline; }

/* Card form: plain panel, expiry and code side by side. */
body.woocommerce-checkout #payment div.payment_box { background: var(--jpa-paper); border: 1px solid var(--jpa-line); border-radius: 8px; }
body.woocommerce-checkout #payment div.payment_box::before { display: none; }
body.woocommerce-checkout #payment .wc-credit-card-form { display: flex; flex-wrap: wrap; column-gap: 10px; background: none; border: 0; padding: 0; }
body.woocommerce-checkout #payment .wc-credit-card-form .form-row { margin: 0 0 10px; padding: 0; float: none; }
body.woocommerce-checkout #payment .wc-credit-card-form .form-row-wide { width: 100%; }
body.woocommerce-checkout #payment .wc-credit-card-form .form-row-first,
body.woocommerce-checkout #payment .wc-credit-card-form .form-row-last { width: calc(50% - 5px); }
body.woocommerce-checkout #payment .wc-credit-card-form input.input-text { width: 100%; background: #fff; }

body.woocommerce-checkout #payment .wc-credit-card-form input.input-text { font-size: 16px !important; height: 44px; padding: 8px 12px; }
body.woocommerce-checkout #payment div.payment_box::after,
body.woocommerce-checkout #payment ul.payment_methods li .payment_box::before { display: none !important; }
body.woocommerce-checkout #payment ul.payment_methods li > label { font-size: 16px; }

/* Shipping method text: same font as the other totals (the theme sets a large serif). */
body.woocommerce-cart #shipping_method li,
body.woocommerce-cart #shipping_method li label,
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout #shipping_method li label { font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--jpa-ok); font-weight: 600; }

/* Accepted cards. */
.jpa-cards { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; vertical-align: middle; }
.jpa-cards span { padding: 2px 6px; border: 1px solid #ccc; border-radius: 4px; font: 700 10px/1.4 Montserrat, sans-serif; letter-spacing: .02em; color: #555; }

/* Order totals and the fine print near Place order. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td * { font-family: inherit; font-size: inherit; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td { color: var(--jpa-ok); font-weight: 600; }
body.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.5; }
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 13px; }

body.woocommerce-checkout form.checkout .form-row label { font-size: 12px; color: var(--jpa-muted); margin-bottom: 3px; }
body.woocommerce-checkout form.checkout .form-row input.input-text,
body.woocommerce-checkout form.checkout .form-row textarea,
body.woocommerce-checkout form.checkout .form-row select,
body.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
	min-height: 44px; border: 1px solid var(--jpa-field); border-radius: 6px; font-size: 16px; /* 16px stops iOS zooming in */
}

/* Fields side by side at every width: first | last, state | ZIP. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: flex; flex-wrap: wrap; column-gap: 10px; }
body.woocommerce-checkout form.checkout .form-row { width: 100%; float: none; margin: 0 0 10px; padding: 0; }
body.woocommerce-checkout form.checkout .form-row-first,
body.woocommerce-checkout form.checkout .form-row-last { width: calc(50% - 5px); }
body.woocommerce-checkout #billing_state_field, body.woocommerce-checkout #shipping_state_field,
body.woocommerce-checkout #billing_postcode_field, body.woocommerce-checkout #shipping_postcode_field { width: calc(50% - 5px); }
body.woocommerce-checkout #billing_country_field .select2-container,
body.woocommerce-checkout #shipping_country_field .select2-container,
body.woocommerce-checkout form.checkout .form-row select { width: 100% !important; }

@media (max-width: 767px) {
	/* The full item table is in the summary at the top; keep only the totals near Place order. */
	body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
	body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody { display: none; }

	/* Nothing floating over the form: the old cart button and the "back to top" button. */
	body.woocommerce-checkout #jc-cartbtn,
	body.woocommerce-cart #jc-cartbtn,
	body.woocommerce-checkout #wpfront-scroll-top-container,
	body.woocommerce-cart #wpfront-scroll-top-container { display: none !important; }
}

/* ---------- Order confirmation ("order received") ---------- */
body.woocommerce-order-received .woocommerce-order {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 20px 48px;
	color: var(--jpa-ink);
	font-size: 16px;
	line-height: 1.5;
}

/* Thank-you heading with a check mark */
body.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 6px;
	padding: 0;
	background: none;
	border: 0;
	text-align: center;
	font-family: 'nexa-bold', 'Montserrat', sans-serif;
	font-size: 26px;
	line-height: 1.25;
	color: var(--jpa-slate-dark);
}
body.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--jpa-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat;
}
body.woocommerce-order-received .jpa-ty-next {
	margin: 0 0 28px;
	text-align: center;
	font-size: 15px;
	color: var(--jpa-muted);
}
body.woocommerce-order-received .jpa-ty-next strong { color: var(--jpa-ink); font-weight: 600; overflow-wrap: anywhere; }
body.woocommerce-order-received .jpa-ty-next .jpa-secure { display: none; }

/* Order number, date, total, payment: a 2 x 2 card instead of a bulleted list */
body.woocommerce-order-received ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 24px 0 16px;
	padding: 0;
	list-style: none;
	background: var(--jpa-paper);
	border: 1px solid var(--jpa-line);
	border-radius: 10px;
	overflow: hidden;
}
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after { content: none; display: none; }
body.woocommerce-order-received ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-left: 1px solid var(--jpa-line);
	list-style: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--jpa-muted);
}
body.woocommerce-order-received ul.woocommerce-order-overview li::before { content: none; }
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child { border-left: 0; }
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jpa-ink);
}

/* Order details: a clean card of line items and totals */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details { margin: 0 0 28px; }
body.woocommerce-order-received .woocommerce-order h2 {
	margin: 0 0 12px;
	padding: 0;
	font-size: 20px;
	line-height: 1.3;
	color: var(--jpa-ink);
}
body.woocommerce-order-received table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	padding: 0; /* the theme pads every table by 24px */
	border: 1px solid var(--jpa-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
	padding: 12px 18px;
	border: 0;
	border-top: 1px solid var(--jpa-line);
	background: none;
	vertical-align: top;
	text-align: left;
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	color: var(--jpa-ink);
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th {
	border-top: 0;
	padding-top: 14px;
	padding-bottom: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--jpa-muted);
	background: var(--jpa-paper);
}
body.woocommerce-order-received table.woocommerce-table--order-details .product-total,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td { text-align: right; white-space: nowrap; width: 1%; }
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td { white-space: normal; width: auto; }
body.woocommerce-order-received table.woocommerce-table--order-details .product-name a { color: var(--jpa-slate-dark); font-weight: 600; text-decoration: none; }
body.woocommerce-order-received table.woocommerce-table--order-details .product-name a:hover { text-decoration: underline; }
body.woocommerce-order-received table.woocommerce-table--order-details .product-quantity { font-weight: 400; color: var(--jpa-muted); white-space: nowrap; }
body.woocommerce-order-received table.woocommerce-table--order-details .jpa-opt { font-size: 13px; }
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th { color: var(--jpa-muted); }
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:first-child th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:first-child td { border-top: 2px solid var(--jpa-line); }
/* The Total row (WooCommerce puts it just before Payment method) */
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:nth-last-child(2) th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:nth-last-child(2) td {
	font-size: 17px;
	font-weight: 700;
	color: var(--jpa-ink);
	background: var(--jpa-paper);
}

/* Addresses: two cards side by side, no italics */
body.woocommerce-order-received .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	margin: 0;
}
body.woocommerce-order-received .woocommerce-customer-details .col2-set::before,
body.woocommerce-order-received .woocommerce-customer-details .col2-set::after { content: none; display: none; }
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--jpa-line);
	border-radius: 10px;
	background: #fff;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 8px;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--jpa-muted) !important;
}
body.woocommerce-order-received .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.55;
	color: var(--jpa-ink);
	overflow-wrap: anywhere;
}
body.woocommerce-order-received .woocommerce-customer-details address p { margin: 6px 0 0; padding: 0; font-style: normal; font-size: 15px; }
body.woocommerce-order-received .woocommerce-customer-details address p::before { content: none; }

/* Continue shopping */
body.woocommerce-order-received .jpa-ty-continue { margin: 8px 0 0; text-align: center; }
body.woocommerce-order-received .jpa-ty-continue .button { display: inline-block; min-width: 240px; padding: 14px 28px; border-radius: 6px; font-size: 15px; }

@media (max-width: 767px) {
	body.woocommerce-order-received .woocommerce-order { padding: 24px 16px 40px; }
	body.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received { font-size: 22px; }
	body.woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
	body.woocommerce-order-received ul.woocommerce-order-overview li { border-left: 0; border-top: 1px solid var(--jpa-line); }
	body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(even) { border-left: 1px solid var(--jpa-line); }
	body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(-n+2) { border-top: 0; }
	body.woocommerce-order-received table.woocommerce-table--order-details th,
	body.woocommerce-order-received table.woocommerce-table--order-details td { padding: 12px 14px; }
	body.woocommerce-order-received .woocommerce-customer-details .col2-set { grid-template-columns: 1fr; }
	body.woocommerce-order-received .jpa-ty-continue .button { display: block; min-width: 0; }
}