/**
 * WooCommerce styles.
 *
 * Part 1 recreates the design's shop grid and product card. Parts 2–6 dress
 * WooCommerce's own markup (cart, checkout, account, notices, blocks) in the
 * same system, so those pages need no template overrides.
 */

/* ==========================================================================
   1. Shop archive — filter bar, grid, card
   ========================================================================== */

/* The Woo wrapper is <main class="jdw-main--woo"><div class="jdw-shell">, so the
   shell carries the page's vertical rhythm and the page head needs no extra. */
.jdw-main--woo > .jdw-shell {
	padding-block: var(--jdw-section-y);
}

.jdw-main--woo .jdw-page-head {
	padding-top: 0;
}

/* Filter bar ----------------------------------------------------------- */

.jdw-shop-filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid var(--jdw-rule);
	border-bottom: 1px solid var(--jdw-rule-soft);
	padding: 16px 0;
	margin: 44px 0;
}

.jdw-shop-filter__tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.jdw-tab {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--jdw-border-strong);
	background: transparent;
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-xs);
	line-height: 1.2;
	color: var(--jdw-ink);
	transition: background-color 0.16s var(--jdw-ease), color 0.16s var(--jdw-ease), border-color 0.16s var(--jdw-ease);
}

.jdw-tab:hover,
.jdw-tab:focus {
	border-color: var(--jdw-ink);
	color: var(--jdw-ink);
}

.jdw-tab.is-active {
	background: var(--jdw-ink);
	border-color: var(--jdw-ink);
	color: var(--jdw-bg);
}

.jdw-shop-filter__count {
	font-style: italic;
	color: var(--jdw-accent);
	font-size: var(--jdw-fs-sm);
	flex: none;
}

/* Ordering select, when re-enabled via the jdw_shop_show_ordering filter */
.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	width: auto;
	min-width: 200px;
	padding-block: 9px;
	font-size: var(--jdw-fs-xs);
}

.woocommerce-result-count {
	font-style: italic;
	color: var(--jdw-accent);
	font-size: var(--jdw-fs-sm);
	margin: 0;
}

/* Product grid --------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}

ul.products.columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

ul.products.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

ul.products.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * WooCommerce clearfixes its float layouts with ::before/::after boxes. Inside a
 * grid container those pseudo-elements become grid ITEMS, so each one eats a
 * cell — the first row silently loses a product and everything shifts by one.
 * `content: none` alone is not enough: Woo's selectors carry the extra
 * `.woocommerce` class and win on specificity, so match that and hide them
 * outright. Every container this stylesheet turns into a grid or flex box needs
 * the same treatment.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after,
.woocommerce-page .cart-collaterals::before,
.woocommerce-page .cart-collaterals::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after,
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after,
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce div.product::before,
.woocommerce div.product::after {
	content: none;
	display: none;
}

ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* The card ------------------------------------------------------------- */

.jdw-card {
	display: flex;
	flex-direction: column;
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border);
	padding: 22px;
	transition: transform 0.18s var(--jdw-ease), box-shadow 0.18s var(--jdw-ease);
}

/* Woo's `.woocommerce ul.products li.product { padding: 0 }` outranks .jdw-card. */
.woocommerce ul.products li.product.jdw-card {
	padding: 22px;
}

.jdw-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(36, 30, 21, 0.12);
}

.jdw-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	margin-bottom: 20px;
	overflow: hidden;
}

.jdw-card__media-link {
	display: block;
	height: 100%;
}

.jdw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Beat Woo's `li.product a img { height: auto; margin-bottom }`, which would
   let any image that is not exactly 3:4 escape the frame. */
.woocommerce ul.products li.product .jdw-card__media img {
	height: 100%;
	margin: 0;
}

/* Grows to align the footers in a row, never shrinks into the footer. */
.jdw-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.jdw-card__tag {
	margin-bottom: 8px;
	font-size: var(--jdw-fs-eyebrow-sm);
	letter-spacing: 0.2em;
}

.jdw-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-card-title);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 6px;
	padding: 0;
	text-wrap: pretty;
}

.jdw-card__title a {
	color: var(--jdw-ink);
}

.jdw-card__title a:hover,
.jdw-card__title a:focus {
	color: var(--jdw-accent);
}

.jdw-card__note {
	font-size: var(--jdw-fs-xs);
	line-height: 1.5;
	color: var(--jdw-muted);
	margin: 0 0 16px;
	flex: 1 1 auto;
}

.jdw-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	/* The gap lives here: `p:last-child` zeroes the note's own bottom margin. */
	margin-top: 16px;
	border-top: 1px solid var(--jdw-rule-soft);
	padding-top: 16px;
}

.jdw-card__pricing {
	min-width: 0;
}

.jdw-card__sample {
	display: block;
	font-size: var(--jdw-fs-2xs);
	font-style: italic;
	margin-top: 2px;
}

/*
 * May shrink to the card's width so the "Bekijk winkelwagen" link that AJAX
 * add-to-cart appends wraps under the button instead of running out of the card.
 */
.jdw-card__action {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	flex-wrap: wrap;
	min-width: 0;
	max-width: 100%;
}

/* Prices --------------------------------------------------------------- */

.price,
.woocommerce ul.products li.product .price {
	display: block;
	color: var(--jdw-ink);
	font-family: var(--jdw-font-body);
	font-size: 1.1875rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin: 0;
	line-height: 1.3;
}

.price del,
.woocommerce ul.products li.product .price del {
	color: var(--jdw-faint);
	font-size: 0.85em;
	opacity: 1;
	margin-right: 6px;
}

.price ins,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 400;
	background: none;
	color: var(--jdw-danger);
}

.woocommerce-Price-currencySymbol {
	margin-right: 1px;
}

/* Woo's own sale flash, wherever it survives */
.woocommerce span.onsale,
span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	padding: 6px 10px;
	border-radius: 0;
	margin: 0;
	background: var(--jdw-accent);
	color: var(--jdw-bg);
	font-family: var(--jdw-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Buttons — reuse the theme's own button skin everywhere Woo emits one */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--jdw-ink);
	color: var(--jdw-bg);
	border: 1px solid var(--jdw-ink);
	border-radius: 0;
	cursor: pointer;
	padding: 14px 28px;
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-2xs);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	transition: background-color 0.18s var(--jdw-ease), border-color 0.18s var(--jdw-ease), color 0.18s var(--jdw-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
	background: var(--jdw-accent);
	border-color: var(--jdw-accent);
	color: var(--jdw-bg);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled {
	background: var(--jdw-faint);
	border-color: var(--jdw-faint);
	color: var(--jdw-bg);
	opacity: 1;
	cursor: not-allowed;
}

/* The loop's add-to-cart button already carries .jdw-btn.jdw-btn--sm */
.woocommerce ul.products li.product a.button {
	margin: 0;
	padding: 11px 18px;
	font-size: var(--jdw-fs-eyebrow-sm);
	letter-spacing: 0.16em;
}

/* "Bekijken" / added-to-cart follow-up link */
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce a.added_to_cart {
	display: inline-flex;
	align-items: center;
	font-size: var(--jdw-fs-2xs);
	font-style: italic;
	padding: 0;
	border-bottom: 1px solid var(--jdw-accent-rule);
}

.woocommerce .button.loading::after {
	font-family: WooCommerce;
}

/* Pagination is styled in style.css alongside the blog pagination. */

/* ==========================================================================
   2. Single product
   ========================================================================== */

.jdw-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.jdw-product__gallery {
	position: relative;
	min-width: 0;
}

.jdw-product__summary {
	min-width: 0;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.jdw-product__details {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce div.product div.images img {
	width: 100%;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child) {
	width: auto;
}

.woocommerce-product-gallery {
	position: relative;
	border: 1px solid var(--jdw-border);
	background: var(--jdw-surface);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--jdw-bg-alpha);
	border: 1px solid var(--jdw-border-strong);
	color: var(--jdw-ink);
	font-size: 1.1rem;
	text-decoration: none;
}

.jdw-product__eyebrow {
	display: block;
	margin-bottom: 14px;
}

.woocommerce div.product .product_title {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h1-page);
	font-weight: 500;
	line-height: 1.08;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.625rem;
	color: var(--jdw-ink);
	margin: 0 0 6px;
}

.jdw-product__sample {
	margin: 0 0 22px;
}

.jdw-product__free {
	margin: 0 0 22px;
}

/* Free product without a download file: points to the pdf links below */
.jdw-product__free-note {
	margin: 0 0 28px;
	padding: 20px 24px;
	border-left: 2px solid var(--jdw-accent);
	background: var(--jdw-surface);
	max-width: 52ch;
}

.jdw-product__free-note p {
	font-size: var(--jdw-fs-body);
	line-height: 1.6;
	color: var(--jdw-muted);
	margin: 0 0 16px;
}

.jdw-product__free-note p:last-child {
	margin-bottom: 0;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--jdw-fs-body);
	line-height: 1.65;
	color: var(--jdw-muted);
	margin: 0 0 28px;
	max-width: 52ch;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 28px;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 8px;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	border: 0;
	padding: 6px 0;
}

.woocommerce div.product form.cart .variations label {
	margin: 0;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--jdw-fs-2xs);
	font-style: italic;
}

.woocommerce .quantity,
.woocommerce div.product form.cart div.quantity {
	margin: 0;
	float: none;
}

.woocommerce .quantity input.qty,
.woocommerce div.product form.cart div.quantity input.qty {
	width: 82px;
	min-height: 47px;
	padding: 12px 8px;
	text-align: center;
	font-feature-settings: "tnum";
}

.woocommerce div.product .product_meta {
	border-top: 1px solid var(--jdw-rule-soft);
	padding-top: 18px;
	font-size: var(--jdw-fs-2xs);
	color: var(--jdw-faint);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce div.product .product_meta > span {
	display: block;
}

.woocommerce div.product .stock {
	font-style: italic;
	color: var(--jdw-success);
	font-size: var(--jdw-fs-xs);
	margin: 0 0 14px;
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--jdw-danger);
}

/* Tabs ----------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
	margin-top: clamp(40px, 6vw, 72px);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--jdw-rule);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	content: none;
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 1px solid var(--jdw-border-strong);
	border-radius: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 9px 18px;
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-xs);
	font-weight: 400;
	color: var(--jdw-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--jdw-ink);
	border-color: var(--jdw-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--jdw-bg);
}

.woocommerce div.product .woocommerce-tabs .panel {
	font-size: var(--jdw-fs-body-lg);
	line-height: 1.7;
	color: var(--jdw-ink-soft);
	max-width: var(--jdw-max-prose);
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	font-size: var(--jdw-fs-h3);
	margin-top: 0;
}

/* Related & upsells ---------------------------------------------------- */

.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells {
	margin-top: clamp(40px, 6vw, 72px);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2,
.woocommerce section.related > h2,
.woocommerce section.upsells > h2 {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h3);
	border-top: 1px solid var(--jdw-rule);
	padding-top: 22px;
	margin: 0 0 32px;
}

/* Breadcrumb ----------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--jdw-fs-2xs);
	font-style: italic;
	color: var(--jdw-faint);
	margin: 0 0 26px;
	padding: 0;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--jdw-accent);
}

/* ==========================================================================
   3. Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border);
	border-top: 2px solid var(--jdw-accent);
	border-radius: 0;
	color: var(--jdw-ink);
	font-size: var(--jdw-fs-sm);
	line-height: 1.55;
	list-style: none;
	margin: 0 0 32px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-error {
	border-top-color: var(--jdw-danger);
}

.woocommerce-message {
	border-top-color: var(--jdw-success);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	padding: 10px 18px;
	font-size: var(--jdw-fs-eyebrow-sm);
	letter-spacing: 0.16em;
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
	margin: 0;
	width: 100%;
}

.demo_store,
.woocommerce-store-notice {
	background: var(--jdw-ink);
	color: var(--jdw-on-dark);
	font-size: var(--jdw-fs-2xs);
	letter-spacing: 0.06em;
	padding: 12px 20px;
}

.demo_store a,
.woocommerce-store-notice a {
	color: var(--jdw-accent-light);
}

/* ==========================================================================
   4. Cart
   ========================================================================== */

.woocommerce table.shop_table {
	border: 0;
	border-top: 1px solid var(--jdw-rule);
	border-radius: 0;
	border-collapse: collapse;
	margin: 0 0 32px;
	width: 100%;
}

.woocommerce table.shop_table th {
	border: 0;
	border-bottom: 1px solid var(--jdw-rule);
	padding: 14px 12px;
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-eyebrow-sm);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jdw-accent);
}

.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--jdw-rule-soft);
	padding: 20px 12px;
	font-size: var(--jdw-fs-sm);
	vertical-align: middle;
}

.woocommerce table.shop_table th:first-child,
.woocommerce table.shop_table td:first-child {
	padding-left: 0;
}

.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child {
	padding-right: 0;
}

.woocommerce table.cart img,
.woocommerce #content table.cart img {
	width: 84px;
	height: auto;
	border: 1px solid var(--jdw-border);
}

.woocommerce table.cart td.product-name a {
	font-family: var(--jdw-font-display);
	font-size: 1.25rem;
	color: var(--jdw-ink);
}

.woocommerce table.cart td.product-name a:hover {
	color: var(--jdw-accent);
}

.woocommerce table.cart td.product-name dl.variation {
	font-size: var(--jdw-fs-2xs);
	color: var(--jdw-faint);
	margin: 6px 0 0;
}

.woocommerce a.remove {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--jdw-border-strong);
	border-radius: 0;
	color: var(--jdw-ink) !important;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.woocommerce a.remove:hover {
	background: var(--jdw-danger);
	border-color: var(--jdw-danger);
	color: var(--jdw-bg) !important;
}

.woocommerce table.cart td.actions {
	padding: 24px 0;
	border-bottom: 0;
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
	float: none;
	margin-bottom: 18px;
}

.woocommerce table.cart td.actions .coupon label {
	display: none;
}

.woocommerce table.cart td.actions .coupon .input-text {
	width: auto;
	min-width: 220px;
	flex: 0 1 260px;
	margin: 0;
}

.woocommerce table.cart td.actions .button {
	float: none;
}

.cart-collaterals,
.woocommerce .cart-collaterals {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	grid-column: 2;
}

.woocommerce .cart-collaterals .cross-sells {
	float: none;
	width: auto;
	grid-column: 1;
	grid-row: 1;
	margin-top: 0;
}

.woocommerce .cart-collaterals .cross-sells ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.woocommerce .cart_totals > h2 {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h3);
	border-top: 1px solid var(--jdw-rule);
	padding-top: 20px;
	margin: 0 0 20px;
}

.woocommerce .cart_totals table.shop_table {
	border-top: 0;
	margin-bottom: 24px;
}

.woocommerce .cart_totals table.shop_table th {
	border-bottom: 1px solid var(--jdw-rule-soft);
	width: 45%;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	border-bottom: 0;
	border-top: 1px solid var(--jdw-rule);
	font-size: var(--jdw-fs-body);
}

.woocommerce .cart_totals .order-total .amount {
	font-size: 1.375rem;
}

/* Stacks our button with any express-payment buttons (PayPal, Apple Pay) that plugins add here. */
.wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	padding: 16px 28px;
	font-size: var(--jdw-fs-2xs);
	margin: 0;
}

.woocommerce-shipping-calculator {
	font-size: var(--jdw-fs-2xs);
}

.woocommerce-shipping-calculator .button {
	padding: 10px 18px;
	font-size: var(--jdw-fs-eyebrow-sm);
}

/* ==========================================================================
   5. Checkout, order received, account
   ========================================================================== */

.woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: start;
}

.woocommerce form.checkout #customer_details {
	grid-column: 1;
}

.woocommerce form.checkout .woocommerce-checkout-review-order,
.woocommerce form.checkout h3#order_review_heading {
	grid-column: 2;
}

.woocommerce form.checkout h3#order_review_heading {
	grid-row: 1;
	margin: 0;
}

.woocommerce form.checkout .col2-set,
.woocommerce-page form.checkout .col2-set {
	width: 100%;
}

.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2 {
	float: none;
	width: auto;
}

.woocommerce form.checkout .col2-set .col-2 {
	margin-top: 32px;
}

.woocommerce .woocommerce-billing-fields h3,
.woocommerce .woocommerce-shipping-fields h3,
.woocommerce .woocommerce-additional-fields h3 {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h3);
	border-top: 1px solid var(--jdw-rule);
	padding-top: 20px;
	margin: 0 0 22px;
}

.woocommerce form .form-row {
	display: block;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce form .form-row label {
	line-height: 1.4;
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--jdw-fs-2xs);
	letter-spacing: 0;
	text-transform: none;
	color: var(--jdw-muted);
}

.woocommerce form .form-row .required {
	color: var(--jdw-danger);
	text-decoration: none;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

.woocommerce .select2-container .select2-selection--single,
.select2-container .select2-selection--single {
	height: auto;
	min-height: 47px;
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border-strong);
	border-radius: 0;
	padding: 11px 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--jdw-ink);
	line-height: 1.4;
	padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 8px;
}

.select2-dropdown {
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border-strong);
	border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--jdw-accent);
	color: var(--jdw-bg);
}

.woocommerce-checkout-review-order-table {
	border-top: 1px solid var(--jdw-rule) !important;
}

.woocommerce-checkout #payment {
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border);
	border-radius: 0;
	padding: 24px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--jdw-rule-soft);
	padding: 0 0 18px;
	margin: 0 0 18px;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: 10px;
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline;
	font-size: var(--jdw-fs-sm);
	letter-spacing: 0;
	text-transform: none;
	color: var(--jdw-ink);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--jdw-bg);
	border: 1px solid var(--jdw-border);
	border-radius: 0;
	color: var(--jdw-muted);
	font-size: var(--jdw-fs-2xs);
	margin: 12px 0 0;
	padding: 16px 18px;
}

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

.woocommerce-checkout #payment .place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	padding: 16px 28px;
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: var(--jdw-fs-2xs);
	margin-bottom: 18px;
}

/* Order received / thank you ------------------------------------------- */

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0 0 40px;
	padding: 24px 0;
	border-top: 1px solid var(--jdw-rule);
	border-bottom: 1px solid var(--jdw-rule-soft);
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--jdw-fs-eyebrow-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jdw-accent);
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 8px;
	font-family: var(--jdw-font-display);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jdw-ink);
}

.woocommerce .woocommerce-order h2,
.woocommerce .woocommerce-customer-details h2,
.woocommerce .woocommerce-order-details h2 {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h3);
	border-top: 1px solid var(--jdw-rule);
	padding-top: 20px;
	margin: 40px 0 22px;
}

/* My account ----------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

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

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

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jdw-rule);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--jdw-rule-soft);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 0;
	font-size: var(--jdw-fs-eyebrow-sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jdw-ink);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--jdw-accent);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.checkout_coupon {
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border);
	border-radius: 0;
	padding: 28px;
	margin: 0 0 32px;
	max-width: 560px;
}

.woocommerce .col2-set#customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 4vw, 48px);
	width: 100%;
}

.woocommerce .col2-set#customer_login .col-1,
.woocommerce .col2-set#customer_login .col-2 {
	float: none;
	width: auto;
}

.woocommerce .col2-set#customer_login h2 {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h3);
	margin: 0 0 18px;
}

.woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox {
	margin-top: 4px;
}

.woocommerce-privacy-policy-text {
	font-size: var(--jdw-fs-2xs);
	color: var(--jdw-muted);
}

/* Downloads table ------------------------------------------------------ */

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .download-product a.button {
	padding: 9px 16px;
	font-size: 11px;
	letter-spacing: 0.14em;
}

/* ==========================================================================
   6. Woo Blocks — the block-based cart & checkout
   --------------------------------------------------------------------------
   Modern WooCommerce ships the cart and checkout as blocks, and its own
   stylesheet hard-codes radii, sizes and greys. `!important` is used only on
   the properties Woo pins; everything else rides on inheritance.
   ========================================================================== */

/* Layout ---------------------------------------------------------------- */

.wc-block-components-sidebar-layout {
	gap: clamp(28px, 4vw, 56px);
}

.wc-block-components-sidebar {
	padding: 0;
}

/* Headings -------------------------------------------------------------- */

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-order-summary__title-text {
	font-family: var(--jdw-font-display) !important;
	font-weight: 500 !important;
	color: var(--jdw-ink);
}

.wc-block-components-checkout-step__title {
	font-size: var(--jdw-fs-h3) !important;
	line-height: 1.2;
}

.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--jdw-font-body) !important;
	font-size: var(--jdw-fs-eyebrow-sm) !important;
	font-weight: 400 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	color: var(--jdw-accent) !important;
}

.wc-block-components-checkout-step__description {
	color: var(--jdw-muted);
	font-size: var(--jdw-fs-2xs);
}

/* Panels & rules -------------------------------------------------------- */

.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-cart-items,
.wc-block-cart-items__row,
.wc-block-components-checkout-step,
.wc-block-checkout__terms--with-separator {
	border-color: var(--jdw-rule-soft) !important;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper {
	border-color: var(--jdw-rule-soft) !important;
}

/* The order summary reads as a parchment card, like the product cards. */
.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--jdw-surface);
	border: 1px solid var(--jdw-border);
	padding: 24px;
}

/* Cart line items ------------------------------------------------------- */

.wc-block-cart-items__header {
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-eyebrow-sm) !important;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jdw-accent);
	border-bottom-color: var(--jdw-rule) !important;
}

.wc-block-cart-item__image img {
	border: 1px solid var(--jdw-border);
	border-radius: 0;
}

.wc-block-components-product-name {
	font-family: var(--jdw-font-display) !important;
	font-size: 1.25rem !important;
	font-weight: 500;
	color: var(--jdw-ink) !important;
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--jdw-accent) !important;
}

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
	color: var(--jdw-muted);
	font-size: var(--jdw-fs-2xs);
}

.wc-block-cart-item__remove-link {
	font-size: var(--jdw-fs-2xs) !important;
	font-style: italic !important;
	color: var(--jdw-faint) !important;
	text-decoration: none;
	border-bottom: 1px solid var(--jdw-accent-rule);
}

.wc-block-cart-item__remove-link:hover {
	color: var(--jdw-danger) !important;
	border-bottom-color: var(--jdw-danger);
}

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount {
	font-family: var(--jdw-font-body);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	color: var(--jdw-ink);
}

.wc-block-components-product-price__value {
	font-size: var(--jdw-fs-sm);
}

/* Quantity stepper ------------------------------------------------------ */

.wc-block-components-quantity-selector {
	border: 1px solid var(--jdw-border-strong) !important;
	border-radius: 0 !important;
	background: var(--jdw-bg) !important;
}

.wc-block-components-quantity-selector::after {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.wc-block-components-quantity-selector__input {
	font-family: var(--jdw-font-body);
	font-feature-settings: "tnum";
	color: var(--jdw-ink);
	background: transparent !important;
}

.wc-block-components-quantity-selector__button {
	color: var(--jdw-accent) !important;
	background: transparent !important;
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--jdw-ink) !important;
}

/* Totals ---------------------------------------------------------------- */

.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-xs) !important;
	color: var(--jdw-ink);
}

.wc-block-components-totals-item__description {
	color: var(--jdw-faint);
	font-size: var(--jdw-fs-2xs) !important;
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--jdw-fs-body) !important;
	font-weight: 400;
	border-top-color: var(--jdw-rule) !important;
}

/* Form controls --------------------------------------------------------- */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-totals-coupon__input input {
	background: var(--jdw-surface) !important;
	border: 1px solid var(--jdw-border-strong) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--jdw-ink) !important;
	font-family: var(--jdw-font-body) !important;
	font-size: var(--jdw-fs-sm) !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus {
	border-color: var(--jdw-accent) !important;
	outline: none;
}

.wc-block-components-text-input label,
.wc-block-components-select__label,
.wc-block-components-combobox-control label {
	color: var(--jdw-faint) !important;
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-sm);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-select.is-active .wc-block-components-select__label {
	color: var(--jdw-accent) !important;
	font-size: var(--jdw-fs-2xs);
	letter-spacing: 0.06em;
}

.wc-block-components-validation-error {
	color: var(--jdw-danger);
	font-size: var(--jdw-fs-2xs);
	font-style: italic;
}

/* Radio / payment options ---------------------------------------------- */

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 0 !important;
	border-color: var(--jdw-border-strong) !important;
	background: var(--jdw-bg);
}

.wc-block-components-radio-control__option-layout,
.wc-block-components-radio-control__label {
	font-family: var(--jdw-font-body);
	color: var(--jdw-ink);
}

.wc-block-components-radio-control__input:checked {
	accent-color: var(--jdw-accent);
}

/* Address card --------------------------------------------------------- */

.wc-block-components-address-card {
	border-radius: 0 !important;
	border-color: var(--jdw-border) !important;
	background: var(--jdw-surface);
	font-size: var(--jdw-fs-xs);
	color: var(--jdw-ink);
}

.wc-block-components-address-card__edit {
	color: var(--jdw-accent) !important;
	font-style: italic;
	text-decoration: none;
}

/* Buttons -------------------------------------------------------------- */

.wc-block-components-button:not(.is-link) {
	border-radius: 0 !important;
	background: var(--jdw-ink) !important;
	border: 1px solid var(--jdw-ink) !important;
	color: var(--jdw-bg) !important;
	font-family: var(--jdw-font-body) !important;
	font-size: var(--jdw-fs-2xs) !important;
	font-weight: 400 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	min-height: 0;
	padding: 15px 28px;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background: var(--jdw-accent) !important;
	border-color: var(--jdw-accent) !important;
	color: var(--jdw-bg) !important;
}

.wc-block-components-button:not(.is-link)::after {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.wc-block-components-button.is-link {
	color: var(--jdw-accent) !important;
	font-style: italic;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

/* Coupon panel & notices ---------------------------------------------- */

.wc-block-components-panel__button {
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-2xs) !important;
	color: var(--jdw-accent) !important;
	font-weight: 400 !important;
}

.wc-block-components-notice-banner {
	border-radius: 0 !important;
	border-width: 1px !important;
	border-color: var(--jdw-border) !important;
	border-top: 2px solid var(--jdw-accent) !important;
	background: var(--jdw-surface) !important;
	color: var(--jdw-ink) !important;
	font-family: var(--jdw-font-body);
	font-size: var(--jdw-fs-xs);
}

.wc-block-components-notice-banner.is-error {
	border-top-color: var(--jdw-danger) !important;
}

.wc-block-components-notice-banner.is-success {
	border-top-color: var(--jdw-success) !important;
}

.wc-block-components-notice-banner > svg {
	fill: var(--jdw-accent);
	background: none !important;
}

/* Empty cart block ----------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block h2,
.wc-block-cart__empty-cart__title {
	font-family: var(--jdw-font-display);
	font-size: var(--jdw-fs-h2-sm);
	font-weight: 500;
}

/* The cart/checkout blocks sit inside the theme's shell already. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	margin: 0;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.jdw-product {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce form.checkout #customer_details,
	.woocommerce form.checkout .woocommerce-checkout-review-order,
	.woocommerce form.checkout h3#order_review_heading {
		grid-column: 1;
	}

	.cart-collaterals,
	.woocommerce .cart-collaterals {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce .cart-collaterals .cross-sells {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce ul.products,
	ul.products,
	ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.woocommerce ul.products,
	ul.products,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.jdw-card__foot {
		align-items: flex-start;
	}

	.jdw-shop-filter {
		margin: 28px 0;
	}

	/* Woo's own responsive cart table reflow */
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		border-bottom: 1px solid var(--jdw-rule-soft);
		padding: 12px 0;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		font-size: var(--jdw-fs-eyebrow-sm);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--jdw-accent);
		font-weight: 400;
	}

	.woocommerce table.cart td.actions .coupon .input-text {
		flex: 1 1 100%;
		min-width: 0;
	}
}