/*!
 * JurisAtlas Law - WooCommerce styling
 *
 * Loaded only when WooCommerce is active. Presentation only: cart, checkout,
 * order confirmation, product page and My Account. No payment behaviour is
 * altered here.
 */

/* ------------------------------------------------------------------ *
 * Shared
 * ------------------------------------------------------------------ */
.woocommerce .jal-main--shop { padding-top: var(--jal-sp-7); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	list-style: none;
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-4) var(--jal-sp-5);
	margin: 0 0 var(--jal-sp-5);
	border-left: 4px solid var(--jal-navy);
	background: var(--jal-info-bg);
	font-size: var(--jal-text-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jal-sp-3);
	justify-content: space-between;
}

.woocommerce-message { border-left-color: var(--jal-success); background: var(--jal-success-bg); }
.woocommerce-error { border-left-color: var(--jal-error); background: var(--jal-error-bg); }
.woocommerce-error li { margin: 0; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jal-navy);
	border: 2px solid var(--jal-navy);
	color: var(--jal-white);
	border-radius: var(--jal-radius-sm);
	padding: 0.75rem 1.4rem;
	font-family: var(--jal-font-sans);
	font-size: var(--jal-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--jal-transition), border-color var(--jal-transition);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--jal-navy-deep);
	border-color: var(--jal-navy-deep);
	color: var(--jal-white);
}

.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button {
	background: var(--jal-gold);
	border-color: var(--jal-gold);
	color: var(--jal-navy-deep);
}

.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--jal-gold-bright);
	border-color: var(--jal-gold-bright);
	color: var(--jal-navy-deep);
}

.woocommerce .price,
.woocommerce span.amount,
.woocommerce .woocommerce-Price-amount {
	color: var(--jal-navy);
	font-weight: 700;
	font-family: var(--jal-font-serif);
}

/* ------------------------------------------------------------------ *
 * Product page
 * ------------------------------------------------------------------ */
.woocommerce div.product { display: grid; gap: var(--jal-sp-6); }

@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related { grid-column: 1 / -1; }
}

.woocommerce div.product .product_title {
	font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
	margin-bottom: var(--jal-sp-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 2.2rem;
	color: var(--jal-navy);
	margin-bottom: var(--jal-sp-4);
	display: block;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--jal-gray-500);
	margin-bottom: var(--jal-sp-5);
}

.woocommerce div.product form.cart { margin-bottom: var(--jal-sp-5); }
.woocommerce div.product form.cart .quantity { display: none; }

.woocommerce div.product .images img { border-radius: var(--jal-radius); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--jal-sp-4);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-2);
	border-bottom: 2px solid var(--jal-gray-200);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.7rem 1.1rem;
	text-decoration: none;
	font-weight: 700;
	font-size: var(--jal-text-sm);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--jal-gold);
	color: var(--jal-navy);
}

/* ------------------------------------------------------------------ *
 * Shop archive
 * ------------------------------------------------------------------ */
.woocommerce ul.products {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--jal-sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.woocommerce ul.products li.product {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	margin: 0;
	width: auto !important;
	float: none !important;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--jal-sp-3);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15rem;
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product a img { border-radius: var(--jal-radius-sm); margin-bottom: 0; }
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: var(--jal-sp-5); }

/* ------------------------------------------------------------------ *
 * Cart
 * ------------------------------------------------------------------ */
.woocommerce table.shop_table {
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	border-collapse: collapse;
	width: 100%;
	margin-bottom: var(--jal-sp-6);
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--jal-sp-4);
	border-bottom: 1px solid var(--jal-gray-200);
	text-align: left;
	font-size: var(--jal-text-sm);
}

.woocommerce table.shop_table thead th {
	background: var(--jal-gray-100);
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jal-gray-500);
	font-weight: 700;
}

.woocommerce table.cart img { width: 64px; border-radius: var(--jal-radius-sm); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-order-details__title,
.woocommerce-column__title { font-size: 1.25rem; }

.woocommerce .cart_totals {
	background: var(--jal-gray-100);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
}

.woocommerce .cart-collaterals { display: grid; gap: var(--jal-sp-5); }
@media (min-width: 860px) { .woocommerce .cart-collaterals { grid-template-columns: 1fr 380px; justify-content: end; } }

.woocommerce .coupon { display: flex; flex-wrap: wrap; gap: var(--jal-sp-2); margin-bottom: var(--jal-sp-4); }
.woocommerce .coupon input[type="text"] { flex: 1 1 200px; }

/* ------------------------------------------------------------------ *
 * Checkout
 * ------------------------------------------------------------------ */
.woocommerce-checkout .col2-set { display: grid; gap: var(--jal-sp-6); }
@media (min-width: 860px) { .woocommerce-checkout .col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.woocommerce form .form-row { display: flex; flex-direction: column; margin-bottom: var(--jal-sp-4); padding: 0; }
.woocommerce form .form-row label { margin-bottom: var(--jal-sp-2); }
.woocommerce form .form-row .required { color: var(--jal-error); text-decoration: none; }

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--jal-gray-100);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--jal-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--jal-sp-4);
	border: 0;
	display: grid;
	gap: var(--jal-sp-2);
}

.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--jal-white);
	border: 2px solid var(--jal-gray-200);
	border-radius: var(--jal-radius-sm);
	padding: var(--jal-sp-4);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--jal-info-bg);
	border-radius: var(--jal-radius-sm);
	font-size: var(--jal-text-sm);
	margin-top: var(--jal-sp-3);
	padding: var(--jal-sp-3);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #place_order { width: 100%; padding: 1rem; font-size: 1rem; }

/* Stripe card element */
.wc-stripe-elements-field,
.wc-payment-form .wc-stripe-elements-field {
	border: 2px solid var(--jal-gray-300) !important;
	border-radius: var(--jal-radius-sm) !important;
	padding: 0.75rem 0.9rem !important;
	background: var(--jal-white) !important;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
	font-size: var(--jal-text-xs);
	color: var(--jal-gray-500);
}

/* ------------------------------------------------------------------ *
 * Order received / thank you
 * ------------------------------------------------------------------ */
.woocommerce .woocommerce-order {
	max-width: 760px;
	margin: 0 auto;
}

.woocommerce .woocommerce-thankyou-order-received {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--jal-sp-3);
	text-align: center;
	background: var(--jal-success-bg);
	border: 2px solid var(--jal-success);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-6);
	margin-bottom: var(--jal-sp-6);
	font-size: inherit;
}

.jal-thankyou__headline {
	font-family: var(--jal-font-serif);
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
	font-weight: 700;
	color: var(--jal-navy);
	line-height: 1.25;
}

.jal-thankyou__sub { color: var(--jal-charcoal); font-size: var(--jal-text-sm); }

.woocommerce ul.woocommerce-thankyou-order-details {
	list-style: none;
	padding: var(--jal-sp-4);
	margin: 0 0 var(--jal-sp-5);
	display: grid;
	gap: var(--jal-sp-3);
	background: var(--jal-gray-100);
	border-radius: var(--jal-radius);
}

@media (min-width: 720px) { .woocommerce ul.woocommerce-thankyou-order-details { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.woocommerce-thankyou-order-details li {
	border: 0;
	display: flex;
	flex-direction: column;
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jal-gray-500);
	font-weight: 700;
}

.woocommerce ul.woocommerce-thankyou-order-details li strong {
	font-size: 1.05rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--jal-navy);
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * My Account
 * ------------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--jal-sp-1);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: var(--jal-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--jal-text-sm);
	border-left: 3px solid transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--jal-gray-100); }

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--jal-info-bg);
	border-left-color: var(--jal-gold);
	color: var(--jal-navy);
}

@media (min-width: 860px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
	}

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

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { display: block; }

	.woocommerce-account .jal-main--shop .jal-container {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: var(--jal-sp-6);
		align-items: start;
	}
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
}