/* =============================================================================
   JW Commerce — shared editorial styling for all WooCommerce surfaces:
   order confirmation, cart, checkout, account. One stylesheet, structured as

     1. Tokens
     2. Primitives  (single definitions; selector lists grow per surface)
     3. Surface mappings (small, surface-specific glue only)

   Loaded only on commerce pages (see greyd_child_commerce_assets()).
   Design language: Cormorant Garamond display, Instrument Sans body, Overpass
   Mono data, 0.5px hairlines, square buttons. Unified 2026-06 with the .tjw
   marketing type system (was Inter / Space Mono) so the whole site shares one
   set of webfonts — fonts come from the site-wide head <link> in functions.php.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
	--jw-text:       #111111;
	--jw-text-2:     #555555;
	--jw-ghost:      #999999;
	--jw-paper:      #f8f6f2;
	--jw-warm:       #e8e4df;
	--jw-rule-ghost: #cccccc;
	--jw-error:      #a05c5c;
	--jw-white:      #ffffff;
	--jw-mono:       "Overpass Mono", "Courier New", monospace;
	--jw-serif:      "Cormorant Garamond", Georgia, serif;
	--jw-sans:       "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--jw-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--jw-ease-big:   cubic-bezier(.16, 1, .3, 1);

	/* spacing — 4px base (commerce runs airier: adds 80/128) */
	--jw-sp-1:  4px;  --jw-sp-2:  8px;  --jw-sp-3:  12px; --jw-sp-4:  16px;
	--jw-sp-5:  20px; --jw-sp-6:  24px; --jw-sp-8:  32px; --jw-sp-10: 40px;
	--jw-sp-12: 48px; --jw-sp-16: 64px; --jw-sp-20: 80px; --jw-sp-24: 96px; --jw-sp-32: 128px;
	/* type */
	--jw-fs-2xs: 11px; --jw-fs-xs: 12px; --jw-fs-sm: 13px;
	--jw-fs-base: 14px; --jw-fs-md: 16px; --jw-fs-lg: 20px;
	/* tracking */
	--jw-tr-tight: -.02em; --jw-tr-snug: -.01em;
	--jw-tr-wide: .05em; --jw-tr-wider: .08em; --jw-tr-widest: .12em;
	/* square by design — no radius scale */
}

/* ----------------------------------------------------------------------------
   2. PRIMITIVES
   ---------------------------------------------------------------------------- */

/* ---- Eyebrow ---- */
.jw-eyebrow,
.jw-oc-eyebrow {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 var(--jw-sp-6);
}

/* ---- Section label: micro caps + trailing hairline ---- */
h2.jw-oc-label,
.jw-label,
.woocommerce-cart .wc-block-cart__totals-title {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs) !important;
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: var(--jw-sp-16) 0 var(--jw-sp-8);
	display: flex;
	align-items: center;
	gap: var(--jw-sp-6);
}

h2.jw-oc-label::after,
.jw-label::after,
.woocommerce-cart .wc-block-cart__totals-title::after {
	content: "";
	flex: 1;
	height: 1px;
	transform: scaleY(0.5);
	transform-origin: left center;
	background: var(--jw-rule-ghost);
}

/* ---- Display heading (serif statement) ---- */
h1.jw-display-title,
.woocommerce-cart h1.wp-block-post-title,
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-account h1.wp-block-post-title,
.jw-oc .wc-block-order-confirmation-status > p,
.jw-oc .wc-block-order-confirmation-status > h1 {
	font-family: var(--jw-serif);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: var(--jw-tr-tight);
	color: var(--jw-text);
	margin: 0 0 var(--jw-sp-6);
}

/* ---- Quiet body copy under a display heading ---- */
.jw-oc .wc-block-order-confirmation-status-description,
.jw-oc .wc-block-order-confirmation-status-description p {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-md);
	font-weight: 300;
	line-height: 1.7;
	color: var(--jw-text-2);
	max-width: 62ch;
	margin: 0 0 var(--jw-sp-2);
	/* core constrained layout centres capped-width children with
	   margin:auto !important — left-align to the heading instead */
	margin-left: 0 !important;
}

/* ---- Inline text link (quiet, underlined) ---- */
.jw-oc .wc-block-order-confirmation-status-description .button {
	display: inline;
	padding: 0;
	background: none !important;
	border: none !important;
	border-radius: 0;
	box-shadow: none !important;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: var(--jw-text) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.4s var(--jw-ease);
}

.jw-oc .wc-block-order-confirmation-status-description .button:hover {
	color: var(--jw-ghost) !important;
}

/* ---- Receipt strip: label-over-mono-value pairs between dark hairlines ---- */
.jw-oc .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: var(--jw-sp-6) 0;
	border-top: 0.5px solid var(--jw-text);
	border-bottom: 0.5px solid var(--jw-text);
	gap: var(--jw-sp-4) var(--jw-sp-16);
}

.jw-oc .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: none;
}

.jw-oc .wc-block-order-confirmation-summary-list-item__key {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

.jw-oc .wc-block-order-confirmation-summary-list-item__value {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
}

/* ---- Editorial table: borderless, hairline rows, mono amounts ---- */
.jw-oc .wc-block-order-confirmation-totals__table,
.jw-oc .wc-block-order-confirmation-downloads__table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	margin: 0;
}

.jw-oc .wc-block-order-confirmation-totals__table th,
.jw-oc .wc-block-order-confirmation-totals__table td,
.jw-oc .wc-block-order-confirmation-downloads__table th,
.jw-oc .wc-block-order-confirmation-downloads__table td {
	border: none;
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding: var(--jw-sp-4) var(--jw-sp-6) var(--jw-sp-4) 0;
	text-align: left;
	background: none;
}

.jw-oc .wc-block-order-confirmation-totals__table thead th,
.jw-oc .wc-block-order-confirmation-downloads__table thead th {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	padding-top: 0;
}

.jw-oc .wc-block-order-confirmation-totals__table td {
	font-family: var(--jw-sans);
	font-size: 15px;
	font-weight: 300;
	color: var(--jw-text);
}

/* product name cell: editorial serif */
.woocommerce-cart a.wc-block-components-product-name,
.jw-oc .wc-block-order-confirmation-totals__product a,
.jw-oc .wc-block-order-confirmation-totals__product {
	font-family: var(--jw-serif);
	font-size: var(--jw-fs-lg);
	font-weight: 400;
	color: var(--jw-text);
	text-decoration: none;
}

.woocommerce-cart a.wc-block-components-product-name:hover,
.jw-oc .wc-block-order-confirmation-totals__product a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jw-oc .wc-block-order-confirmation-totals__table .product-quantity {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-ghost);
	font-weight: 400;
}

/* amounts in mono — quiet precision */
.jw-oc .wc-block-order-confirmation-totals__table td:last-child {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	letter-spacing: var(--jw-tr-wide);
	text-align: right;
	padding-right: 0;
}

.jw-oc .wc-block-order-confirmation-totals__table th:last-child {
	text-align: right;
	padding-right: 0;
}

/* footer rows (subtotal / shipping / tax) */
.jw-oc .wc-block-order-confirmation-totals__table tfoot th,
.jw-oc .wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__label {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

/* emphasised total row between darker hairlines */
.jw-oc .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.jw-oc .wc-block-order-confirmation-totals__table tfoot tr:last-child td,
.jw-oc .wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total {
	border-bottom: 0.5px solid var(--jw-text);
	border-top: 0.5px solid var(--jw-text);
	color: var(--jw-text);
	font-weight: 500;
}

.jw-oc .product-purchase-note {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-style: italic;
	color: var(--jw-text-2);
}

/* ---- Mono address block ---- */
.jw-oc .jw-oc-addresses address,
.jw-oc .wc-block-order-confirmation-shipping-address,
.jw-oc .wc-block-order-confirmation-billing-address {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	font-style: normal;
	letter-spacing: var(--jw-tr-wide);
	line-height: 2;
	color: var(--jw-text);
	border: none;
	padding: 0;
	margin: 0;
}

.jw-oc .woocommerce-customer-details--phone {
	margin-top: var(--jw-sp-2);
}

/* ---- Solid square button ---- */
.woocommerce-account button.woocommerce-button,
.woocommerce-account a.woocommerce-button,
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-block-cart__submit-button,
.jw-oc .wc-block-order-confirmation-status__actions .button,
.jw-oc form.woocommerce-verify-email button[type="submit"],
.jw-oc form.woocommerce-verify-email .button,
.jw-oc .woocommerce-MyAccount-downloads-file.button,
.jw-oc .wc-block-order-confirmation-create-account-form .button {
	display: inline-block;
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: #ffffff !important;
	background: var(--jw-text) !important;
	border: 1px solid var(--jw-text) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 14px var(--jw-sp-8);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.4s var(--jw-ease),
		color 0.4s var(--jw-ease);
}

.woocommerce-account button.woocommerce-button:hover,
.woocommerce-account a.woocommerce-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-cart .wc-block-cart__submit-button:hover,
.jw-oc .wc-block-order-confirmation-status__actions .button:hover,
.jw-oc form.woocommerce-verify-email button[type="submit"]:hover,
.jw-oc form.woocommerce-verify-email .button:hover,
.jw-oc .woocommerce-MyAccount-downloads-file.button:hover,
.jw-oc .wc-block-order-confirmation-create-account-form .button:hover {
	background: transparent !important;
	color: var(--jw-text) !important;
}

/* ---- Underline text input ---- */
.jw-oc form.woocommerce-verify-email .input-text {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-md);
	font-weight: 300;
	color: var(--jw-text);
	background-color: transparent !important;
	border: none !important;
	border-bottom: 0.5px solid var(--jw-text) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--jw-sp-2) 0 !important;
	outline: none;
	width: 100%;
}

/* ---- Quiet form label ---- */
.jw-oc form.woocommerce-verify-email label {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

/* ---- Paper panel ---- */
.jw-oc form.woocommerce-verify-email {
	max-width: 520px;
	padding: var(--jw-sp-8);
	background: var(--jw-paper);
	border: none;
}

/* ----------------------------------------------------------------------------
   3. SURFACE MAPPING: ORDER CONFIRMATION (specific glue only)
   ---------------------------------------------------------------------------- */
.jw-oc .wc-block-order-confirmation-status-description {
	background: none;
	border: none;
	padding: 0;
}

.jw-oc .wc-block-order-confirmation-order-note__label {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

.jw-oc .wc-block-order-confirmation-order-note {
	font-family: var(--jw-sans);
	font-size: 15px;
	font-weight: 300;
	color: var(--jw-text-2);
}

/* ----------------------------------------------------------------------------
   3b. SURFACE MAPPING: CART (specific glue only — primitives handle the rest)
   ---------------------------------------------------------------------------- */

/* items table: hairline rows, caps header */
.woocommerce-cart table.wc-block-cart-items,
.woocommerce-cart table.wc-block-cart-items th,
.woocommerce-cart table.wc-block-cart-items td {
	border: none;
	background: none;
}

.woocommerce-cart table.wc-block-cart-items thead th {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	border-bottom: 0.5px solid var(--jw-text);
	padding-bottom: var(--jw-sp-3);
}

.woocommerce-cart .wc-block-cart-items__row td {
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding-top: var(--jw-sp-6);
	padding-bottom: var(--jw-sp-6);
}

/* the small unit price under the product name */
.woocommerce-cart .wc-block-cart-item__prices {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-ghost);
}

/* short description metadata */
.woocommerce-cart .wc-block-components-product-metadata__description,
.woocommerce-cart .wc-block-components-product-metadata__description p {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-weight: 300;
	color: var(--jw-text-2);
}

/* line total */
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
}

/* quantity stepper: quiet square */
.woocommerce-cart .wc-block-components-quantity-selector {
	border: 0.5px solid var(--jw-rule-ghost);
	border-radius: 0;
}

.woocommerce-cart .wc-block-components-quantity-selector input,
.woocommerce-cart .wc-block-components-quantity-selector button {
	font-family: var(--jw-mono);
	color: var(--jw-text);
}

/* remove link: ghost, dark on hover */
.woocommerce-cart .wc-block-cart-item__remove-link {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	text-decoration: none;
	transition: color 0.4s var(--jw-ease);
}

.woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--jw-text);
}

.woocommerce-cart .wc-block-components-totals-item__label {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

.woocommerce-cart .wc-block-components-totals-item__value {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
}

/* estimated total: emphasised between dark hairlines */
.woocommerce-cart .wc-block-components-totals-footer-item {
	border-top: 0.5px solid var(--jw-text);
	border-bottom: 0.5px solid var(--jw-text);
	padding: var(--jw-sp-4) 0;
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--jw-text);
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--jw-fs-md);
}

.woocommerce-cart .wc-block-components-totals-footer-item-tax {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-style: italic;
	font-weight: 300;
	color: var(--jw-text-2);
}

/* coupon panel toggle */
.woocommerce-cart .wc-block-components-panel__button {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text-2);
}

/* notices (block + classic): paper, dark left rule, quiet — shared across
   cart / checkout / account (.woocommerce-page covers all three) */
.woocommerce-page .wc-block-components-notice-banner,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message {
	background: var(--jw-paper);
	border: none;
	border-left: 2px solid var(--jw-text);
	border-radius: 0;
	color: var(--jw-text);
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
}

/* the banner's svg icon: quiet it to match */
.woocommerce-page .wc-block-components-notice-banner > svg {
	fill: var(--jw-ghost);
	background: none;
}

.woocommerce-page .wc-block-components-notice-banner.is-error > svg {
	fill: var(--jw-error);
}

/* errors keep a distinct (muted) accent so they read as errors */
.woocommerce-page .wc-block-components-notice-banner.is-error,
.woocommerce-page .woocommerce-error {
	background: var(--jw-paper);
	border: none;
	border-left: 2px solid var(--jw-error);
	border-radius: 0;
	color: var(--jw-text);
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
}

.woocommerce-page .wc-block-components-notice-banner a,
.woocommerce-page .woocommerce-info a,
.woocommerce-page .woocommerce-message a,
.woocommerce-page .woocommerce-error a {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* classic notices use ::before icons — quiet them */
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before {
	color: var(--jw-ghost);
}

.woocommerce-page .woocommerce-error::before {
	color: var(--jw-error);
}

/* ---- "Added to basket": a floating white toast, not an inline banner.
   Markup: greyd_child_add_to_cart_message() (thumbnail → mono eyebrow → serif
   piece name → two quiet links). added-toast.js reveals it, auto-dismisses after
   ~5s and injects the close button. Only the success message becomes a toast
   (scoped with :has(.jw-added)) so cart/checkout error notices stay inline. The
   leftover WooCommerce tick is hidden and the programmatic focus box removed. ---- */

/* lift the success notice out of the flow so it never shifts the page */
.woocommerce-page .wc-block-store-notices:has(.jw-added) {
	position: fixed;
	top: 96px;
	right: 24px;
	left: auto;
	z-index: 9999;
	width: min(400px, calc(100vw - 32px));
	margin: 0;
	padding: 0;
	opacity: 0;
	transform: translateY(-10px);
	transition:
		opacity 0.5s var(--jw-ease-big),
		transform 0.5s var(--jw-ease-big);
	pointer-events: none;
}

.woocommerce-page .wc-block-store-notices.is-visible:has(.jw-added) {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.woocommerce-page .wc-block-store-notices.is-leaving:has(.jw-added) {
	opacity: 0;
	transform: translateY(-10px);
}

/* the card: modern white, soft shadow, square, no heavy brand bar */
.woocommerce-page .wc-block-store-notices:has(.jw-added) .wc-block-components-notice-banner.is-success {
	background: var(--jw-white);
	border: none;
	border-radius: 0;
	box-shadow:
		0 18px 48px -20px rgba(17, 17, 17, 0.28),
		0 4px 12px -8px rgba(17, 17, 17, 0.16);
	padding: var(--jw-sp-5);
	margin: 0;
	position: relative;
}

/* drop the leftover WooCommerce tick + the programmatic focus box */
.woocommerce-page .wc-block-components-notice-banner.is-success > svg {
	display: none;
}

.woocommerce-page .wc-block-components-notice-banner:focus {
	outline: none;
}

.woocommerce-page .wc-block-store-notices:has(.jw-added) .wc-block-components-notice-banner__content {
	margin: 0;
	width: 100%;
}

.jw-added {
	display: flex;
	flex-direction: column;
	gap: var(--jw-sp-2);
}

.jw-added--has-media {
	flex-direction: row;
	align-items: center;
	gap: var(--jw-sp-4);
}

.jw-added__media {
	flex: 0 0 auto;
	width: 60px;
	height: 68px;
	overflow: hidden;
	background: var(--jw-paper);
}

.jw-added__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jw-added__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.jw-added__eyebrow {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jw-ghost);
}

.jw-added__name {
	font-family: var(--jw-serif);
	font-size: var(--jw-fs-md);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--jw-tr-snug);
	color: var(--jw-text);
	/* keep the toast compact: cap long piece names to two lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jw-added__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--jw-sp-4);
	margin-top: 2px;
}

/* higher specificity than the shared `.notice-banner a` rule above */
.woocommerce-page .wc-block-components-notice-banner .jw-added__link {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-2xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	text-decoration: none;
	transition:
		color 0.4s var(--jw-ease),
		border-color 0.4s var(--jw-ease);
}

.woocommerce-page .wc-block-components-notice-banner .jw-added__link--cart {
	color: var(--jw-text);
	border-bottom: 1px solid var(--jw-rule-ghost);
	padding-bottom: 2px;
}

.woocommerce-page .wc-block-components-notice-banner .jw-added__link--cart:hover {
	border-color: var(--jw-text);
}

.woocommerce-page .wc-block-components-notice-banner .jw-added__link--browse {
	color: var(--jw-ghost);
}

.woocommerce-page .wc-block-components-notice-banner .jw-added__link--browse:hover {
	color: var(--jw-text);
}

/* close button (injected by added-toast.js) */
.jw-added__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: none;
	color: var(--jw-ghost);
	cursor: pointer;
	transition: color 0.3s var(--jw-ease);
}

.jw-added__close:hover {
	color: var(--jw-text);
}

.jw-added__close svg {
	width: 12px;
	height: 12px;
}

/* mobile: a top, near-full-width toast */
@media (max-width: 600px) {
	.woocommerce-page .wc-block-store-notices:has(.jw-added) {
		top: 76px;
		right: 12px;
		left: 12px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-page .wc-block-store-notices:has(.jw-added) {
		transition: opacity 0.2s linear;
		transform: none;
	}

	.woocommerce-page .wc-block-store-notices.is-leaving:has(.jw-added) {
		transform: none;
	}
}

/* empty-cart state: serif moment */
.woocommerce-cart h2.wc-block-cart__empty-cart__title {
	font-family: var(--jw-serif);
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 300;
	font-style: italic;
	letter-spacing: var(--jw-tr-tight);
	color: var(--jw-text);
}

/* ----------------------------------------------------------------------------
   3c. SURFACE MAPPING: CHECKOUT (classic shortcode checkout)
   ---------------------------------------------------------------------------- */

/* section headings (Billing details / Additional information / Your order):
   same micro-caps + hairline language as the OC section labels */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout h3#order_review_heading {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: var(--jw-sp-12) 0 var(--jw-sp-8);
	display: flex;
	align-items: center;
	gap: var(--jw-sp-6);
	line-height: 1.5;
}

.woocommerce-checkout .woocommerce-billing-fields > h3::after,
.woocommerce-checkout .woocommerce-additional-fields > h3::after,
.woocommerce-checkout h3#order_review_heading::after {
	content: "";
	flex: 1;
	height: 1px;
	transform: scaleY(0.5);
	transform-origin: left center;
	background: var(--jw-rule-ghost);
}

/* field labels — darker than the hairlines for legibility */
.woocommerce-account form .form-row label,
.woocommerce-checkout form .form-row label {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text-2);
}

.woocommerce-checkout form .form-row .required {
	color: var(--jw-text-2);
	text-decoration: none;
}

/* underline inputs (doubled selectors + !important clear Greyd/WC styling) */
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select,
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-md);
	font-weight: 300;
	color: var(--jw-text);
	background-color: transparent !important;
	border: none !important;
	border-bottom: 0.5px solid var(--jw-rule-ghost) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--jw-sp-2) 0 !important;
	outline: none;
}

.woocommerce-account form .form-row input.input-text:focus,
.woocommerce-account form .form-row textarea:focus,
.woocommerce-account form .form-row select:focus,
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row select:focus {
	border-bottom-color: var(--jw-text) !important;
}

.woocommerce-checkout form .form-row textarea {
	min-height: 96px;
}

/* single-country setup: WC renders the country as a bold <strong> instead of
   an input — restyle it to read like the other field values */
.woocommerce-checkout #billing_country_field strong,
.woocommerce-checkout #shipping_country_field strong {
	display: block;
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-md);
	font-weight: 300;
	color: var(--jw-text);
	padding: var(--jw-sp-2) 0;
	border-bottom: 0.5px solid var(--jw-rule-ghost);
}

/* select2 country dropdown to match the underline inputs */
.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: transparent;
	border: none;
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	border-radius: 0;
	height: auto;
	padding: var(--jw-sp-2) 0;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-md);
	font-weight: 300;
	color: var(--jw-text) !important;
	padding-left: 0;
}

/* order review table: editorial */
.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	border: none;
	background: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	border-bottom: 0.5px solid var(--jw-text);
	padding: 0 0 var(--jw-sp-3);
	text-align: left;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding: var(--jw-sp-4) var(--jw-sp-6) var(--jw-sp-4) 0;
	text-align: left;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
	font-family: var(--jw-serif);
	font-size: 19px;
	font-weight: 400;
	color: var(--jw-text);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-ghost);
	font-weight: 400;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
	text-align: right;
	padding-right: 0;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

/* emphasised final total row */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	border-top: 0.5px solid var(--jw-text);
	border-bottom: 0.5px solid var(--jw-text);
	color: var(--jw-text);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .includes_tax {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-style: italic;
	font-weight: 300;
	color: var(--jw-text-2);
}

/* payment area: paper panel instead of WC's lavender */
.woocommerce-checkout #payment {
	background: var(--jw-paper);
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 0.5px solid var(--jw-rule-ghost);
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 500;
	color: var(--jw-text);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--jw-warm);
	border-radius: 0;
	color: var(--jw-text-2);
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--jw-warm);
}

/* privacy text + terms row */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-weight: 300;
	font-style: italic;
	color: var(--jw-text-2);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   3c-ii. CHECKOUT LAYOUT — Shopify-style split:
   numbered steps left, sticky order-summary rail right on paper.
   Structure relies on greyd_child_checkout_layout_hooks() in functions.php,
   which moves #payment out of #order_review into the main column.
   ---------------------------------------------------------------------------- */

/* distraction-free header */
.jw-co-header {
	border-bottom: 0.5px solid var(--jw-text);
}

.jw-co-header__back a {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	text-decoration: none;
	transition: color 0.4s var(--jw-ease);
}

.jw-co-header__back a:hover {
	color: var(--jw-text);
}

.jw-co-header__brand,
.jw-co-header__brand a {
	font-family: var(--jw-serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--jw-text);
	text-decoration: none;
}

.jw-co-header__secure {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-2xs);
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

/* centre the whole checkout canvas (title, prompts, form) */
.woocommerce-checkout .woocommerce {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

/* page head: eyebrow + display title */
.jw-co-page-head {
	margin: var(--jw-sp-10) 0 var(--jw-sp-2);
}

.jw-co-page-head .jw-co-eyebrow {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 var(--jw-sp-4);
}

.jw-co-page-head h1.jw-display-title {
	margin: 0 0 var(--jw-sp-6);
}

/* split canvas */
.woocommerce-checkout form.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	column-gap: var(--jw-sp-20);
	align-items: start;
	counter-reset: jwstep;
}

.woocommerce-checkout form.woocommerce-checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.woocommerce-checkout > .blockUI {
	grid-column: 1 / -1;
}

.woocommerce-checkout form.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}

/* stack WC's two inner columns full-width in the left column */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}

.woocommerce-checkout form.woocommerce-checkout .jw-co-payment-heading {
	grid-column: 1;
	grid-row: 2;
}

.woocommerce-checkout form.woocommerce-checkout #payment {
	grid-column: 1;
	grid-row: 3;
}

/* the rail: summary table alone, sticky, on paper */
.woocommerce-checkout form.woocommerce-checkout #order_review_heading {
	display: none;
}

.woocommerce-checkout form.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: start;
	position: sticky;
	top: 40px;
	background: var(--jw-paper);
	padding: var(--jw-sp-8);
}

.woocommerce-checkout #order_review::before {
	content: "Your Order";
	display: flex;
	align-items: center;
	gap: var(--jw-sp-6);
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin-bottom: var(--jw-sp-6);
}

/* numbered steps (01 — Your details, 02 — Payment) */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .jw-co-payment-heading {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text);
	margin: var(--jw-sp-10) 0 28px;
	display: flex;
	align-items: center;
	gap: var(--jw-sp-6);
	line-height: 1.5;
}

.woocommerce-checkout .woocommerce-billing-fields > h3::before,
.woocommerce-checkout .jw-co-payment-heading::before {
	counter-increment: jwstep;
	content: counter(jwstep, decimal-leading-zero);
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-lg);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--jw-text-2);
}

.woocommerce-checkout .woocommerce-billing-fields > h3::after,
.woocommerce-checkout .jw-co-payment-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	transform: scaleY(0.5);
	transform-origin: left center;
	background: var(--jw-rule-ghost);
}

/* order notes: quiet, unnumbered */
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	margin: var(--jw-sp-8) 0 var(--jw-sp-4);
}

.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 64px;
}

/* names side by side */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--jw-sp-6);

}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
	grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first {
	grid-column: 1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
	grid-column: 2;
}

/* compact the login/coupon prompts to quiet hairline rows */
.woocommerce-checkout .woocommerce-form-login-toggle .wc-block-components-notice-banner,
.woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
	background: none;
	border: none;
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding: var(--jw-sp-3) 0;
}

/* summary table sits flush inside the paper rail */
.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table thead th {
	border-bottom-color: var(--jw-text);
}

.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table td.product-name {
	font-size: 17px;
}

/* place order: full-width primary inside the payment step */
.woocommerce-checkout #payment #place_order {
	width: 100%;
	text-align: center;
	padding: 18px var(--jw-sp-8);
}

/* trust microcopy under the summary rail */
.woocommerce-checkout form.woocommerce-checkout .jw-co-trust {
	grid-column: 2;
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jw-ghost);
	text-align: center;
	margin: var(--jw-sp-4) 0 0;
}

/* ---- checkout responsive: single column, summary first and compact ---- */
@media (max-width: 960px) {
	.woocommerce-checkout form.woocommerce-checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout form.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: 1;
		position: static;
		padding: var(--jw-sp-5) var(--jw-sp-6);
		margin-bottom: var(--jw-sp-2);
	}

	.woocommerce-checkout form.woocommerce-checkout #customer_details {
		grid-row: 2;
	}

	.woocommerce-checkout form.woocommerce-checkout .jw-co-payment-heading {
		grid-row: 3;
	}

	.woocommerce-checkout form.woocommerce-checkout #payment {
		grid-row: 4;
	}

	.woocommerce-checkout form.woocommerce-checkout .jw-co-trust {
		grid-column: 1;
	}

	.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table td,
	.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot th {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ----------------------------------------------------------------------------
   3d. SURFACE MAPPING: ACCOUNT
   ---------------------------------------------------------------------------- */

/* Login / Register headings: serif moment */
.woocommerce-account #customer_login h2,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
	font-family: var(--jw-serif);
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 300;
	letter-spacing: var(--jw-tr-tight);
	color: var(--jw-text);
	margin-bottom: var(--jw-sp-6);
}

/* lost password / inline links */
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-MyAccount-content a:not(.woocommerce-button) {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* my-account navigation: micro caps + hairlines */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	text-decoration: none;
	padding: 10px 0;
	line-height: 1.2;
	transition: color 0.4s var(--jw-ease);
}

/* tighten nav rhythm: remove any inherited list spacing/line-height that
   Greyd adds on the account page */
.jw-acct .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.jw-acct .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--jw-text);
}

/* account content tables (orders, downloads): editorial */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border: none;
	background: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	border-bottom: 0.5px solid var(--jw-text);
	padding: 0 var(--jw-sp-6) var(--jw-sp-3) 0;
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding: var(--jw-sp-4) var(--jw-sp-6) var(--jw-sp-4) 0;
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
}

/* addresses on account pages: mono block */
.woocommerce-account .woocommerce-MyAccount-content address,
.woocommerce-account .woocommerce-Addresses address {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-base);
	font-style: normal;
	letter-spacing: var(--jw-tr-wide);
	line-height: 2;
	color: var(--jw-text);
	border: none;
	padding: 0;
}

/* ----------------------------------------------------------------------------
   3e. SURFACE MAPPING: SINGLE PRODUCT (Atelier Classic, approved option 1)
   ---------------------------------------------------------------------------- */

.single-product .jw-sp-crumbs .woocommerce-breadcrumb,
.single-product .jw-sp-crumbs .wp-block-woocommerce-breadcrumbs {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	padding: var(--jw-sp-6) 0 var(--jw-sp-2);
}

.single-product .jw-sp-crumbs a {
	color: var(--jw-ghost);
	text-decoration: none;
	transition: color 0.4s var(--jw-ease);
}

.single-product .jw-sp-crumbs a:hover {
	color: var(--jw-text);
}

/* eyebrow (category terms) */
.single-product .jw-sp-eyebrow {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 var(--jw-sp-3);
}

.single-product .jw-sp-eyebrow a {
	color: var(--jw-ghost);
	text-decoration: none;
}

.single-product .jw-sp-eyebrow a:hover {
	color: var(--jw-text);
}

/* title + price + stock */
.single-product h1.jw-sp-title {
	font-family: var(--jw-serif);
	font-size: clamp(34px, 3.2vw, 48px) !important;
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: var(--jw-tr-tight);
	color: var(--jw-text);
	margin: 0 0 var(--jw-sp-4);
}

.single-product .jw-sp-price,
.single-product .jw-sp-price .wc-block-components-product-price {
	font-family: var(--jw-mono);
	font-size: 18px;
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
	margin: 0 0 var(--jw-sp-2);
}

.single-product .jw-sp-rail .stock {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-style: italic;
	font-weight: 300;
	color: var(--jw-text-2);
}

.single-product .jw-sp-rail .stock.in-stock {
	color: var(--jw-text-2);
}

/* short description */
.single-product .jw-sp-desc,
.single-product .jw-sp-desc p {
	font-family: var(--jw-sans);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--jw-text-2);
	max-width: 52ch;
}

.single-product .jw-sp-desc {
	margin: var(--jw-sp-5) 0 28px;
}

/* specifications: provenance rows */
.single-product .jw-sp-specs {
	border-top: 1px dashed var(--jw-rule-ghost);
	padding-top: var(--jw-sp-2);
	margin-bottom: var(--jw-sp-8);
}

.single-product .jw-sp-specs table,
.single-product .jw-sp-specs th,
.single-product .jw-sp-specs td {
	border: none;
	background: none;
	width: auto;
}

.single-product .jw-sp-specs table {
	width: 100%;
	border-collapse: collapse;
}

.single-product .jw-sp-specs th,
.single-product .jw-sp-specs td {
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding: 10px var(--jw-sp-6) 10px 0;
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-xs);
	letter-spacing: var(--jw-tr-wide);
	text-align: left;
}

.single-product .jw-sp-specs th {
	text-transform: uppercase;
	color: var(--jw-ghost);
	font-weight: 400;
	width: 140px;
}

.single-product .jw-sp-specs td {
	color: var(--jw-text);
}

/* ring size: value + a quiet resizing note beneath */
.single-product .jw-sp-specs .jw-sp-size__val {
	display: block;
}

.single-product .jw-sp-specs .jw-sp-size__uk {
	color: var(--jw-ghost);
}

.single-product .jw-sp-specs .jw-sp-size__note {
	display: inline-block;
	margin-top: 3px;
	font-family: var(--jw-sans);
	font-size: 11.5px;
	letter-spacing: 0;
	text-transform: none;
	font-style: italic;
	color: var(--jw-text-2);
}

.single-product .jw-sp-specs .jw-sp-size__note--lead {
	font-style: normal;
	color: var(--jw-text);
}

/* add to basket: quantity + solid button */
.single-product .jw-sp-cta {
	margin: var(--jw-sp-2) 0 var(--jw-sp-4);
}

.single-product .jw-sp-cta .quantity input,
.single-product .jw-sp-cta input.qty {
	font-family: var(--jw-mono);
	color: var(--jw-text);
	background: transparent;
	border: 0.5px solid var(--jw-rule-ghost);
	border-radius: 0;
}

.single-product .jw-sp-cta button[type="submit"],
.single-product .jw-sp-cta .single_add_to_cart_button,
.single-product .jw-sp-cta .wc-block-components-button {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: #ffffff !important;
	background: var(--jw-text) !important;
	border: 1px solid var(--jw-text) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--jw-sp-4) var(--jw-sp-10);
	cursor: pointer;
	transition:
		background-color 0.4s var(--jw-ease),
		color 0.4s var(--jw-ease);
}

.single-product .jw-sp-cta button[type="submit"]:hover,
.single-product .jw-sp-cta .single_add_to_cart_button:hover,
.single-product .jw-sp-cta .wc-block-components-button:hover {
	background: transparent !important;
	color: var(--jw-text) !important;
}

/* enquire line */
.single-product .jw-sp-enquire {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-style: italic;
	font-weight: 300;
	color: var(--jw-text-2);
	margin: 0 0 var(--jw-sp-8);
}

.single-product .jw-sp-enquire a {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* sold piece -> bespoke enquiry panel (auto-injected by
   greyd_child_sold_enquire_block for out-of-stock products) */
.single-product .jw-sp-sold {
	border-top: 0.5px solid var(--jw-rule-ghost);
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	padding: 28px 0 var(--jw-sp-8);
	margin: var(--jw-sp-2) 0 28px;
}

.single-product .jw-sp-sold__label {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-2xs);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 14px;
}

.single-product .jw-sp-sold__lead {
	font-family: var(--jw-serif);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: var(--jw-tr-snug);
	color: var(--jw-text);
	margin: 0 0 var(--jw-sp-3);
}

.single-product .jw-sp-sold__text {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
	line-height: 1.7;
	color: var(--jw-text-2);
	max-width: 52ch;
	margin: 0 0 22px;
}

.single-product .jw-sp-sold__actions {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.single-product .jw-sp-sold__cta {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: #ffffff !important;
	background: var(--jw-text);
	border: 1px solid var(--jw-text);
	padding: var(--jw-sp-4) 36px;
	text-decoration: none;
	transition:
		background-color 0.4s var(--jw-ease),
		color 0.4s var(--jw-ease);
}

.single-product .jw-sp-sold__cta:hover {
	background: transparent;
	color: var(--jw-text) !important;
}

.single-product .jw-sp-sold__link {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-weight: 500;
	color: var(--jw-text);
	text-decoration: none;
	border-bottom: 1px solid var(--jw-rule-ghost);
	padding-bottom: 2px;
	transition: border-color 0.4s var(--jw-ease);
}

.single-product .jw-sp-sold__link:hover {
	border-color: var(--jw-text);
}

/* accordions: hairline list, micro-caps headings */
.single-product .jw-sp-acc {
	border-top: 0.5px solid var(--jw-rule-ghost);
	margin-bottom: var(--jw-sp-6);
}

.single-product .jw-sp-acc .wp-block-accordion-item {
	border: none;
	border-bottom: 0.5px solid var(--jw-rule-ghost);
}

.single-product .jw-sp-acc .wp-block-accordion-heading__toggle {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text);
	background: none;
	border: none;
	padding: var(--jw-sp-4) 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
}

.single-product .jw-sp-acc .wp-block-accordion-heading__toggle-icon {
	color: var(--jw-ghost);
	font-weight: 300;
}

.single-product .jw-sp-acc .wp-block-accordion-panel {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
	color: var(--jw-text-2);
	padding-bottom: var(--jw-sp-5);
}

/* SKU meta: quiet mono */
.single-product .jw-sp-meta {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-xs);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-ghost);
	margin-top: var(--jw-sp-2);
}

/* related products: paper band, editorial cards */
.single-product .jw-sp-related {
	background: var(--jw-paper);
}

.single-product .jw-sp-related h2.jw-label {
	margin-top: 0;
}

.single-product .jw-sp-cards .wp-block-post-title,
.single-product .jw-sp-cards .jw-sp-card-title,
.single-product .jw-sp-cards .jw-sp-card-title a {
	font-family: var(--jw-serif);
	font-size: 18px !important;
	font-weight: 400;
	line-height: 1.3;
	color: var(--jw-text);
	text-decoration: none;
	margin: var(--jw-sp-3) 0 2px;
}

.single-product .jw-sp-cards .jw-sp-card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-product .jw-sp-cards .jw-sp-card-price,
.single-product .jw-sp-cards .jw-sp-card-price .wc-block-components-product-price {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text-2);
}

.single-product .jw-sp-cards img {
	background: #ffffff;
	/* match the shop grid: portrait crop (849:1000, BV reference ratio) so the
	   related-products row reads consistently with the catalogue cards */
	width: 100%;
	aspect-ratio: 849 / 1000;
	object-fit: cover;
	transition: opacity 0.4s var(--jw-ease);
}

.single-product .jw-sp-cards li:hover img,
.single-product .jw-sp-cards .wc-block-product-template__product:hover img {
	opacity: 0.85;
}

/* gallery thumbnails: underline active affordance */
.single-product .wc-block-product-gallery-thumbnails__thumbnail {
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	transition: border-color 0.4s var(--jw-ease);
}

.single-product .wc-block-product-gallery-thumbnails__thumbnail:hover,
.single-product .wc-block-product-gallery-thumbnails__thumbnail--is-active {
	border-bottom-color: var(--jw-text);
}

/* ----------------------------------------------------------------------------
   3f. SINGLE PRODUCT — editorial grid layout (option 7)
   Hero = large gallery + narrow centred rail; below the hero the page runs on a
   shared 12-col-feel grid: every section has a hairline head with the eyebrow
   pinned left, content fills the measure beneath. Reuses the .jw-* token set.
   ---------------------------------------------------------------------------- */

/* --- hero rail: narrow, centred in the space beside the image --- */
.single-product .jw-sp-rail {
	max-width: 400px;
	margin-inline: auto;
	align-self: start;
	padding-left: 0;
	padding-right: 0;
}

/* hero on a 12-col grid (matches the concept): large gallery left (cols 1–6),
   an empty col 7 for air, the narrow rail centred in cols 8–12. Desktop only —
   below 782px the columns block stacks as normal. */
@media (min-width: 782px) {
	.single-product .jw-sp-hero {
		display: grid !important;
		grid-template-columns: repeat(12, 1fr);
		column-gap: 0;
		align-items: start;
	}
	.single-product .jw-sp-hero > .wp-block-column:first-child {
		grid-column: 1 / 7;
		flex-basis: auto;
		width: auto;
		max-width: none;
	}
	.single-product .jw-sp-hero > .jw-sp-rail {
		grid-column: 7 / 13;
		justify-self: center;
		max-width: 400px;
		margin-inline: 0;
	}
}

/* neutralise the block-layout top-margin the editor adds to 2nd+ children, so
   grid items (Why-shop tiles, Product-info columns) align to one top edge */
.single-product .jw-sp-facts > *,
.single-product .jw-sp-pi-grid > * {
	margin-top: 0;
	margin-block-start: 0;
}

/* framed price row */
.single-product .jw-sp-price {
	border-top: 1px solid var(--jw-text);
	border-bottom: 1px solid var(--jw-text);
	padding: 14px 0;
	margin: 0 0 var(--jw-sp-5);
}

/* one-off pieces: hide the quantity stepper, make the basket button full width */
.single-product .jw-sp-cta .quantity,
.single-product .jw-sp-cta .wc-block-components-quantity-selector {
	display: none;
}

.single-product .jw-sp-cta,
.single-product .jw-sp-cta form.cart {
	display: block;
}

/* the add-to-cart-with-options block nests the button in a flex .wp-block-button
   wrapper that shrink-wraps; stretch the wrapper (and the enquire button) so the
   buttons fill the rail */
.single-product .jw-sp-cta .wp-block-group,
.single-product .jw-sp-cta .wc-block-components-product-button {
	display: block;
}

.single-product .jw-sp-cta .wp-block-button,
.single-product .jw-sp-enquire-wrap .wp-block-button {
	flex: 1 1 100%;
	width: 100%;
	max-width: none;
}

.single-product .jw-sp-cta .single_add_to_cart_button,
.single-product .jw-sp-cta button[type="submit"],
.single-product .jw-sp-cta .wc-block-components-button {
	display: block;
	width: 100%;
}

/* "Enquire" button beneath the basket button — matched to the bespoke .cta--ghost
   (sentence case, Instrument Sans 14/500, 2px radius, tight tracking, ↗ arrow). */
.single-product .jw-sp-enquire-btn {
	margin-top: 12px;
}

.single-product .jw-sp-enquire-btn .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	font-family: var(--jw-sans) !important;
	font-size: var(--jw-fs-base) !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: var(--jw-text) !important;
	background: transparent !important;
	border: 1px solid rgba(17, 17, 17, 0.4) !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	padding: 15px 26px !important;
	transition: background-color 0.3s var(--jw-ease), color 0.3s var(--jw-ease), border-color 0.3s var(--jw-ease) !important;
}

.single-product .jw-sp-enquire-btn .wp-block-button__link:hover {
	background: var(--jw-text) !important;
	color: #ffffff !important;
	border-color: var(--jw-text) !important;
}

.single-product .jw-sp-enquire-btn .jw-sp-arr {
	font-size: 0.92em;
}

/* --- shared section scaffolding (Product information / About / Why shop) --- */
.single-product .jw-sp-section {
	padding-top: clamp(56px, 7vw, 92px);
}

.single-product .jw-sp-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 30px;
	border-top: 1px solid var(--jw-rule-ghost);
	padding-top: 18px;
	margin-bottom: var(--jw-sp-12);
}

.single-product .jw-sp-eyebrow2 {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-3xs, 10px);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0;
}

.single-product .jw-sp-eyebrow2--dim {
	color: var(--jw-ghost);
	opacity: 0.85;
}

.single-product .jw-sp-subhead {
	font-family: var(--jw-serif);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	letter-spacing: var(--jw-tr-snug);
	line-height: 1.15;
	margin: 0 0 var(--jw-sp-5);
}

/* --- Product information: full-width head (consistent with the other section
   eyebrows). Below it, Details (single-column attributes) and Sizing & care sit
   as two columns, inset by one grid column on the left and right. --- */
.single-product .jw-sp-pi-grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--jw-sp-12);
}

@media (min-width: 782px) {
	.single-product .jw-sp-pi-grid {
		grid-template-columns: repeat(12, 1fr);
		column-gap: clamp(32px, 4vw, 64px);
		row-gap: 0;
		align-items: start;
	}
	.single-product .jw-sp-pi-details {
		grid-column: 2 / 7;
	}
	.single-product .jw-sp-pi-care {
		grid-column: 7 / 12;
	}
}

/* the specifications table already styled via .jw-sp-specs; drop its top rule
   here since the subhead introduces it */
.single-product .jw-sp-pi-details .jw-sp-specs {
	border-top: none;
	margin-bottom: 0;
}

.single-product .jw-sp-care__p {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
	line-height: 1.75;
	color: var(--jw-text-2);
	max-width: 58ch;
	margin: 0 0 var(--jw-sp-3);
}

.single-product .jw-sp-care__p strong {
	color: var(--jw-text);
	font-weight: 500;
}

.single-product .jw-sp-care__call {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	color: var(--jw-text);
	margin: var(--jw-sp-5) 0 0;
}

.single-product .jw-sp-care__call a {
	font-family: var(--jw-mono);
	letter-spacing: var(--jw-tr-wide);
	text-decoration: none;
	border-bottom: 1px solid var(--jw-rule-ghost);
}

.single-product .jw-sp-care__call a:hover {
	border-color: var(--jw-text);
}

.single-product .jw-sp-care__guide {
	display: inline-block;
	margin-top: var(--jw-sp-4);
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-3xs, 10px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jw-text);
	text-decoration: none;
	border-bottom: 1px solid var(--jw-rule-ghost);
	padding-bottom: 2px;
	transition: border-color 0.4s var(--jw-ease);
}

.single-product .jw-sp-care__guide:hover {
	border-color: var(--jw-text);
}

.single-product .jw-sp-size-enq {
	display: flex;
	align-items: stretch;
	gap: var(--jw-sp-2);
	margin: var(--jw-sp-6) 0 0;
	max-width: 400px;
}

.single-product .jw-sp-size-enq input[type="text"] {
	flex: 1;
	min-width: 0;
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text);
	background: transparent;
	border: 1px solid var(--jw-rule-ghost);
	border-radius: 0;
	padding: 12px 14px;
}

.single-product .jw-sp-size-enq input[type="text"]::placeholder {
	color: var(--jw-ghost);
}

.single-product .jw-sp-size-enq__btn {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-2xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text);
	background: transparent;
	border: 1px solid var(--jw-text);
	padding: 0 20px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.4s var(--jw-ease), color 0.4s var(--jw-ease);
}

.single-product .jw-sp-size-enq__btn:hover {
	background: var(--jw-text);
	color: #ffffff;
}

.single-product .jw-sp-care__hint {
	font-family: var(--jw-sans);
	font-size: 11.5px;
	font-style: italic;
	color: var(--jw-ghost);
	margin-top: 9px;
	max-width: 48ch;
}

/* --- ring enquiry modal --- */
.jw-sp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--jw-sp-5);
}

.jw-sp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.55);
	backdrop-filter: blur(2px);
}

.jw-sp-modal__panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--jw-white);
	padding: clamp(28px, 4vw, 48px);
	box-shadow: 0 24px 60px rgba(17, 17, 17, 0.22);
}

.jw-sp-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 36px;
	height: 36px;
	line-height: 1;
	font-size: 26px;
	font-weight: 300;
	color: var(--jw-ghost);
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.3s var(--jw-ease);
}

.jw-sp-modal__close:hover {
	color: var(--jw-text);
}

.single-product .jw-sp-modal__eyebrow {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-3xs, 10px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 var(--jw-sp-4);
}

.single-product .jw-sp-modal__title {
	font-family: var(--jw-serif);
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 500;
	letter-spacing: var(--jw-tr-snug);
	line-height: 1.12;
	color: var(--jw-text);
	margin: 0 0 var(--jw-sp-3);
}

.single-product .jw-sp-modal__lead {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	line-height: 1.6;
	color: var(--jw-text-2);
	margin: 0 0 var(--jw-sp-10);
}

.jw-sp-modal__lead a {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* the .tjw panel defaults to the mist-grey ground; pin a crisp white surface */
.single-product .jw-sp-modal__panel.tjw {
	background: #ffffff;
}

/* hide the panel scrollbar (still scrollable) */
.jw-sp-modal__panel {
	scrollbar-width: none;
}

.jw-sp-modal__panel::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* the embedded enquiry form sits flush in the panel */
.single-product .jw-sp-modal__panel .form {
	margin: 0;
	max-width: none;
}

/* the .tjw form fields assume a dark section (white text + pale labels);
   recolour them for the light modal so they match the bespoke form on a light
   ground — underline-only inputs, ink text, quiet uppercase labels */
.single-product .jw-sp-modal .field label {
	color: var(--jw-text-2);
}

/* success note inherits the dark-section cream (.form__success) — recolour to ink
   for the white modal so the confirmation is legible after submit */
.single-product .jw-sp-modal .form__success {
	color: var(--jw-text);
}

.single-product .jw-sp-modal .form__success-sub {
	color: var(--jw-text-2);
}

.single-product .jw-sp-modal .field input,
.single-product .jw-sp-modal .field textarea,
.single-product .jw-sp-modal .field select,
.single-product .jw-sp-modal .field input:hover,
.single-product .jw-sp-modal .field input:focus,
.single-product .jw-sp-modal .field textarea:hover,
.single-product .jw-sp-modal .field textarea:focus,
.single-product .jw-sp-modal .field select:hover,
.single-product .jw-sp-modal .field select:focus {
	color: var(--jw-text);
}

.single-product .jw-sp-modal .field input,
.single-product .jw-sp-modal .field textarea,
.single-product .jw-sp-modal .field select {
	border-bottom-color: rgba(17, 17, 17, 0.22);
}

/* Greyd's theme-adaptor adds a full box border + chunky padding to inputs.
   Hard-reset to a single bottom hairline and strip padding so fields read tight,
   flush, and the label hugs its own field. */
.single-product .jw-sp-modal .field input,
.single-product .jw-sp-modal .field textarea,
.single-product .jw-sp-modal .field select {
	border: 0 !important;
	border-bottom: 1px solid rgba(17, 17, 17, 0.2) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
}

.single-product .jw-sp-modal .field input:focus,
.single-product .jw-sp-modal .field textarea:focus,
.single-product .jw-sp-modal .field select:focus {
	border-bottom-color: var(--jw-text) !important;
}

.single-product .jw-sp-modal .field select {
	padding-right: 24px !important;
}

/* Greyd puts a 7px bottom margin on the label; drop it so the label hugs its
   own field, and put the breathing room between sibling fields instead. */
.single-product .jw-sp-modal .field label {
	padding-left: 0;
	margin: 0 !important;
}

.single-product .jw-sp-modal .form {
	row-gap: 26px;
}

.single-product .jw-sp-modal .field {
	gap: 4px;
	margin-bottom: 0;
}

/* desktop: two columns so the form stays above the fold. Name + Title/Email
   pair up; Subject, Message, captcha and the button span the full width. */
@media (min-width: 640px) {
	.single-product .jw-sp-modal .form.form--single {
		grid-template-columns: 1fr 1fr;
		gap: 26px 28px;
		max-width: none;
	}
	.single-product .jw-sp-modal .form.form--single .field:has(textarea),
	.single-product .jw-sp-modal .form.form--single .field:has(select[name="00N4J00000I0kr4"]),
	.single-product .jw-sp-modal .form.form--single .field--captcha,
	.single-product .jw-sp-modal .form.form--single .cta {
		grid-column: 1 / -1;
	}
}

.single-product .jw-sp-modal .field input:focus,
.single-product .jw-sp-modal .field textarea:focus,
.single-product .jw-sp-modal .field select:focus {
	border-bottom-color: var(--jw-text) !important;
}

.single-product .jw-sp-modal .field input::placeholder,
.single-product .jw-sp-modal .field textarea::placeholder {
	color: var(--jw-ghost);
}

/* roomier message box (fits the prefilled note) + no internal scrollbar */
.single-product .jw-sp-modal .field textarea {
	min-height: 132px;
	scrollbar-width: none;
}

.single-product .jw-sp-modal .field textarea::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.single-product .jw-sp-modal .field select option {
	color: #161616;
	background: #ffffff;
}

/* keep the lead phone link underlined despite the .tjw link reset */
.single-product .jw-sp-modal__lead a {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* the sold-piece CTA is now a <button> that opens the modal */
.single-product .jw-sp-sold__cta {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* --- About: full description, first paragraph as the editorial statement --- */
.single-product .jw-sp-about .wp-block-woocommerce-product-description {
	max-width: min(100%, 1100px);
}

.single-product .jw-sp-about .wp-block-woocommerce-product-description p {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-md);
	font-weight: 300;
	line-height: 1.8;
	color: var(--jw-text-2);
	max-width: 70ch;
	margin: 0 0 var(--jw-sp-5);
}

/* lead paragraph: a wide editorial serif statement (fills the measure) */
.single-product .jw-sp-about .wp-block-woocommerce-product-description > p:first-child {
	font-family: var(--jw-serif);
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: var(--jw-tr-snug);
	color: var(--jw-text);
	max-width: none;
	margin-bottom: var(--jw-sp-8);
}

/* --- Why shop with us --- */
.single-product .jw-sp-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--jw-sp-10);
}

.single-product .jw-sp-fact {
	border-top: 1px solid var(--jw-rule-ghost);
	padding-top: var(--jw-sp-6);
}

.single-product .jw-sp-fact .m {
	display: block;
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-3xs, 10px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin-bottom: var(--jw-sp-4);
}

.single-product .jw-sp-fact h3 {
	font-family: var(--jw-serif);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 500;
	font-style: italic;
	letter-spacing: var(--jw-tr-snug);
	line-height: 1.15;
	margin: 0 0 var(--jw-sp-3);
}

.single-product .jw-sp-fact p {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-weight: 300;
	line-height: 1.65;
	color: var(--jw-text-2);
	max-width: 30ch;
	margin: 0;
}

@media (max-width: 781px) {
	.single-product .jw-sp-rail {
		max-width: none;
	}
	.single-product .jw-sp-pi-grid {
		grid-template-columns: 1fr;
		row-gap: var(--jw-sp-10);
	}
	.single-product .jw-sp-facts {
		grid-template-columns: 1fr;
		gap: var(--jw-sp-8);
	}
}

/* ----------------------------------------------------------------------------
   RESPONSIVE (shared)
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.jw-oc {
		padding-top: var(--jw-sp-16) !important;
		padding-bottom: var(--jw-sp-20) !important;
	}

	.jw-oc .wc-block-order-confirmation-summary-list {
		flex-direction: column;
		gap: var(--jw-sp-4);
	}

	h2.jw-oc-label,
	.jw-label {
		margin-top: var(--jw-sp-12);
	}

	.jw-oc .wc-block-order-confirmation-totals__table th,
	.jw-oc .wc-block-order-confirmation-totals__table td {
		padding-right: var(--jw-sp-3);
	}
}

.woocommerce-checkout h1 {
    font-size: 48px; /* Reduced from 72px */
    margin-bottom: var(--jw-sp-6);
    text-align: center; /* Optional: Center the title */
}

@media (max-width: 600px) {
    .woocommerce-checkout h1 {
        font-size: 32px;
    }
}

.jw-co-header {
    padding-top: var(--jw-sp-5) !important;
    padding-bottom: var(--jw-sp-5) !important;
    border-bottom: 1px solid #e5e5e5; /* Subtle border */
}

/* Place Order button. NOTE: this is currently PayPal blue with a 5px radius —
   off-brand against the site's square black buttons. Kept as-is for now (it is
   the revenue-critical checkout CTA); flagged to align with .jw-button--primary
   in a later pass. The former black-bg + grey-hover rules were dead (this blue
   set carries !important and always won), so they were removed. */
body.woocommerce-js #place_order {
    padding: var(--jw-sp-4) var(--jw-sp-8);
    font-weight: 700;
    text-transform: uppercase;
}

body.woocommerce-js button#place_order {
    background-color: #0070ba !important;
    border-color: #0070ba !important;
    color: var(--jw-white) !important;
    border-radius: 5px;
    transition: background-color 0.2s var(--jw-ease), color 0.2s var(--jw-ease);
}

body.woocommerce-js button#place_order:hover,
body.woocommerce-js button#place_order:focus {
    background-color: #005ea6 !important;
    border-color: #005ea6 !important;
    color: var(--jw-white) !important;
}

body.woocommerce-js button#place_order:focus {
    outline: 2px solid #0070ba;
    outline-offset: 2px;
}

/* Reduce the bold weight of checkout dropdowns and inputs */
.woocommerce-checkout select, 
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout input.input-text {
    font-weight: 400 !important; /* Changes from 700 to Normal */
}

/* Also adjust the label if it feels too heavy */
.woocommerce-checkout label {
    font-weight: 400 !important;
    font-size: var(--jw-fs-sm);
    color: var(--jw-text-2);
}

/* Refactored & Consolidated Styles */
.woocommerce .form-row {
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

.woocommerce .form-row label {
    margin: 0.75rem 0 0.125rem !important; /* top | right/left | bottom */
    display: block;
}

/* jerome- checkout nav mobile */


@media (max-width: 781px) {
  .wp-block-site-logo {
    padding: var(--jw-sp-5);
    box-sizing: border-box; /* Ensures padding doesn't push the width beyond 100% */
  }

  .jw-co-header__inner.is-layout-flex {
    justify-content: center !important;
  }
  
  .jw-co-header__secure.wp-block-paragraph {
    flex-basis: 100%;
    text-align: center;
  }




}

  .form-row.place-order {
    padding: var(--jw-sp-5) !important; /* Forces padding since there are existing !important 0px styles */
}

/* Optional: Add space specifically between the terms text and the button if they are too close */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 15px;
}


/* Single product gallery: quiet paper mount with an even frame so light
   product shots lift off the white page. Portrait tile (849:1000, the
   Bottega Veneta reference ratio) + object-fit:contain keeps the mat even on
   all sides and never crops the piece, regardless of the photo's own ratio. */
.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image {
  background-color: var(--jw-warm);
  aspect-ratio: 849 / 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--jw-sp-8);
  box-sizing: border-box;
}

.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image__inner-container {
  width: 100%;
  height: 100%;
}

.single-product .wc-block-product-gallery-large-image .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  padding: 0;
}

/* ----------------------------------------------------------------------------
   3f. SURFACE MAPPING: SHOP ARCHIVE (product catalogue + category/tag archives)

   Native WooCommerce blocks only, restyled:
     - woocommerce/product-collection  -> the 3-up editorial grid (.jw-sa-grid)
     - woocommerce/product-filters      -> the native off-canvas drawer, forced
       to drawer mode at every breakpoint (it is inline >=601px by default; its
       rules use :where() so .jw-sa-scoped rules override with no !important).
   Scoped under the .jw-sa wrapper on <main>. Reuses tokens + the single-product
   card/breadcrumb/button language from section 3e.
   ---------------------------------------------------------------------------- */

/* full-bleed like the portfolio: no max-width, matching 44px / 18px gutters.
   The template main is a default (unconstrained) layout so children fill this
   width; .wp-site-blocks centres its children, so width:100% is needed. */
.jw-sa {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: 44px;
	padding-right: 44px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.jw-sa {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* ---- Brand bridge: re-point the shop archive's commerce tokens to the .tjw
   brand values so the browsing surfaces read as one family with the bespoke
   portfolio. Scoped to .jw-sa only — the global :root --jw-* values (and so
   cart/checkout/account/single-product) are untouched. Cormorant serif is
   already shared, so only the body/mono fonts + neutrals shift. */
.jw-sa {
	--jw-sans: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--jw-mono: "Overpass Mono", "Courier New", monospace;
	--jw-text: #161616;   /* ink */
	--jw-text-2: #5b5b5b; /* ~ink-60 */
	--jw-ghost: #9a9a98;  /* ~ink-40 on mist */
	--jw-paper: #f4f4f3;  /* mist ground, matches portfolio --bg */
	--jw-rule-ghost: rgba(22, 22, 22, .09); /* hairline at 9%, matches --line */
}

/* keep links from inheriting the pale global link colour (#c6c5b1) */
.jw-sa a {
	color: var(--jw-text);
}

/* ---- Header: editorial hero echoing the portfolio .hero--short ---- */

/* dim meta labels above the title — mirrors the portfolio .hero__top */
.jw-sa .jw-sa-meta {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	font-family: var(--jw-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: var(--jw-sp-2) 0 var(--jw-sp-6);
}

.jw-sa .jw-sa-meta p {
	margin: 0;
}

/* breadcrumb — quiet mono, matching the portfolio .crumb */
.jw-sa .jw-sa-crumbs .woocommerce-breadcrumb,
.jw-sa .jw-sa-crumbs .wc-block-breadcrumbs,
.jw-sa .jw-sa-crumbs .wp-block-woocommerce-breadcrumbs {
	font-family: var(--jw-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 var(--jw-sp-6);
}

.jw-sa .jw-sa-crumbs a {
	color: var(--jw-ghost);
	text-decoration: none;
	transition: color 0.4s var(--jw-ease);
}

.jw-sa .jw-sa-crumbs a:hover {
	color: var(--jw-text);
}

.jw-sa h1.jw-sa-title {
	font-family: var(--jw-serif);
	font-size: clamp(46px, 6.5vw, 112px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--jw-tr-tight);
	color: var(--jw-text);
	margin: 0;
	padding-top: var(--jw-sp-6);
	text-wrap: balance;
}

/* foot row — lede on the left, CTA on the right (mirrors .hero__foot) */
.jw-sa .jw-sa-foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--jw-sp-10);
	flex-wrap: wrap;
	margin-top: var(--jw-sp-6);
}

.jw-sa .jw-sa-desc,
.jw-sa .jw-sa-desc p,
.jw-sa .jw-sa-shopintro {
	font-family: var(--jw-sans);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--jw-text-2);
	max-width: 420px;
	margin: 0;
}

/* the static intro is for the main /shop/ hero only; on category/tag archives
   the real term description fills the lede, so hide the static line there */
.tax-product_cat .jw-sa-shopintro,
.tax-product_tag .jw-sa-shopintro {
	display: none;
}

/* CTA — dark solid button, garnet on hover (mirrors the portfolio .cta) */
.jw-sa .jw-sa-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-left: auto; /* keep the CTA on the right, with or without a lede */
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 500;
	letter-spacing: var(--jw-tr-snug);
	text-decoration: none;
	color: var(--jw-paper);
	background: var(--jw-text);
	padding: 15px 26px;
	border-radius: 2px;
	transition: background-color 250ms var(--jw-ease);
}

.jw-sa .jw-sa-cta:hover {
	background: #5b1f23; /* Goldsmith Garnet, matching the portfolio CTA hover */
	color: var(--jw-paper);
}

/* ---- Toolbar: filter trigger (left), results count + sort (right) ---- */
.jw-sa .jw-sa-toolbar {
	margin: var(--jw-sp-8) 0 var(--jw-sp-10);
	padding: var(--jw-sp-4) 0;
	border-top: 0.5px solid var(--jw-rule-ghost);
	border-bottom: 0.5px solid var(--jw-rule-ghost);
	gap: var(--jw-sp-4) var(--jw-sp-6);
}

.jw-sa .jw-sa-tools {
	gap: var(--jw-sp-6);
}

/* results count — quiet mono */
.jw-sa .jw-sa-count,
.jw-sa .jw-sa-count .wc-block-product-results-count,
.jw-sa .woocommerce-result-count {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-xs);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-ghost);
	margin: 0;
}

/* sort <select> — beat Greyd's form styling (doubled class + !important) */
.jw-sa .jw-sa-sort select.jw-sort-select,
.jw-sa .jw-sa-sort select,
.jw-sa .wc-block-catalog-sorting select,
.jw-sa .woocommerce-ordering select.orderby {
	font-family: var(--jw-sans) !important;
	font-size: var(--jw-fs-xs) !important;
	font-weight: 500 !important;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text) !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 0.5px solid var(--jw-text) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 6px var(--jw-sp-6) 6px 0 !important;
	cursor: pointer;
}

/* ============================================================================
   PRODUCT FILTERS — native overlay, forced to drawer mode at all breakpoints
   ============================================================================ */

/* drawer palette + slider tokens (native CSS custom properties) */
.jw-sa .wc-block-product-filters {
	--wc-product-filters-overlay-background-color: #ffffff;
	--wc-product-filters-overlay-text-color: var(--jw-text);
	--wc-product-filter-price-slider: var(--jw-text);
	--wc-product-filter-price-slider-handle: #ffffff;
	--wc-product-filter-price-slider-handle-border: var(--jw-text);
	flex: 0 0 auto;
}

/* "Filter products" trigger — outline square button, visible at every width */
.jw-sa .wc-block-product-filters__open-overlay {
	display: inline-flex !important;
	align-items: center;
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: var(--jw-text);
	background: transparent;
	border: 1px solid var(--jw-text);
	border-radius: 0;
	padding: var(--jw-sp-3) 22px;
	cursor: pointer;
	transition:
		background-color 0.4s var(--jw-ease),
		color 0.4s var(--jw-ease);
}

.jw-sa .wc-block-product-filters__open-overlay:hover {
	background: var(--jw-text);
	color: #ffffff;
}

.jw-sa .wc-block-product-filters__open-overlay svg {
	height: 1.1em;
	width: 1.1em;
}

/* backdrop — fixed at all widths (native makes it relative/inline >=601px) */
.jw-sa .wc-block-product-filters__overlay {
	position: fixed;
	inset: 0;
	background-color: transparent;
	pointer-events: none;
	transition: background-color 0.4s var(--jw-ease);
}

.jw-sa .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
	position: fixed;
	background-color: rgba(17, 17, 17, 0.35);
	pointer-events: auto;
	z-index: 9999;
}

/* wrapper must stay full-height: native collapses it to height:auto at
   >=601px, which would zero-out the absolutely-positioned dialog */
.jw-sa .wc-block-product-filters__overlay-wrapper {
	position: relative;
	height: 100%;
	width: 100%;
}

/* right-docked panel sliding in from the edge */
.jw-sa .wc-block-product-filters__overlay-dialog {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(420px, 100vw);
	max-height: 100%;
	gap: 0;
	padding: 0;
	background: #ffffff;
	color: var(--jw-text);
	transform: translateX(100%);
	transition: none;
}

.jw-sa .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
	transform: translateX(0);
	transition: transform 0.5s var(--jw-ease);
}

/* header (close) + footer (apply) — keep visible in the drawer at all widths */
.jw-sa .wc-block-product-filters__overlay-header {
	display: flex !important;
	justify-content: flex-end;
	padding: var(--jw-sp-6) 28px 0;
}

.jw-sa .wc-block-product-filters__close-overlay {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-2xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jw-ghost);
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.4s var(--jw-ease);
}

.jw-sa .wc-block-product-filters__close-overlay:hover {
	color: var(--jw-text);
}

.jw-sa .wc-block-product-filters__overlay-content {
	padding: var(--jw-sp-4) 28px 28px;
	overflow-y: auto;
	gap: 28px;
}

.jw-sa .wc-block-product-filters__overlay-footer {
	display: block !important;
	padding: var(--jw-sp-5) 28px;
	border-top: 0.5px solid var(--jw-rule-ghost);
	box-shadow: none;
}

/* Apply — solid square button */
.jw-sa .wc-block-product-filters__apply {
	width: 100%;
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: #ffffff !important;
	background: var(--jw-text) !important;
	border: 1px solid var(--jw-text) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--jw-sp-4) var(--jw-sp-8);
	cursor: pointer;
	transition:
		background-color 0.4s var(--jw-ease),
		color 0.4s var(--jw-ease);
}

.jw-sa .wc-block-product-filters__apply:hover {
	background: transparent !important;
	color: var(--jw-text) !important;
}

/* drawer title + per-filter headings */
.jw-sa .jw-sa-filters-title {
	font-family: var(--jw-sans) !important;
	font-size: var(--jw-fs-xs) !important;
	font-weight: 500;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

.jw-sa h3.jw-sa-filter-h {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text);
}

/* ---- Filter controls ---- */

/* checkbox lists (category / availability / attributes) */
.jw-sa .wc-block-product-filter-checkbox-list__item {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-base);
	font-weight: 300;
	color: var(--jw-text-2);
	padding: var(--jw-sp-1) 0;
}

.jw-sa .wc-block-product-filter-checkbox-list__label {
	cursor: pointer;
}

.jw-sa .wc-block-product-filter-checkbox-list__text {
	color: var(--jw-text);
}

.jw-sa .wc-block-product-filter-checkbox-list__count {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-2xs);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-ghost);
}

.jw-sa .wc-block-product-filter-checkbox-list__input {
	accent-color: var(--jw-text);
	border-radius: 0;
}

.jw-sa .wc-block-product-filter-checkbox-list__show-more {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* price slider: hairline track, mono inputs */
.jw-sa .wc-block-product-filter-price-slider {
	margin-top: var(--jw-sp-2);
}

.jw-sa .wc-block-product-filter-price-slider input:not([type="range"]) {
	font-family: var(--jw-mono) !important;
	font-size: var(--jw-fs-sm) !important;
	color: var(--jw-text) !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 0.5px solid var(--jw-rule-ghost) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--jw-sp-1) 0 !important;
	text-align: center;
}

/* active filters as removable chips */
.jw-sa .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jw-sp-2);
}

.jw-sa .wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-2xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jw-text);
	background: transparent;
	border: 0.5px solid var(--jw-rule-ghost);
	border-radius: 0;
	padding: 6px 10px;
}

.jw-sa .wc-block-product-filter-removable-chips__remove {
	color: var(--jw-ghost);
}

/* clear-all link — quiet underline, not a heavy button */
.jw-sa .wc-block-product-filter-clear-button .wp-block-button__link,
.jw-sa a.wc-block-product-filter-clear-button {
	font-family: var(--jw-sans) !important;
	font-size: var(--jw-fs-2xs) !important;
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================================
   PRODUCT GRID — 3-up editorial cards
   ============================================================================ */

.jw-sa .jw-sa-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--jw-sp-10) 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jw-sa .jw-sa-grid .wc-block-product-template__product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
}

/* card image: portrait crop (849:1000, the Bottega Veneta reference ratio) on
   white, gentle zoom on hover — matches the portfolio .tile__media motion
   (easing hardcoded; --ease-big lives in .tjw) */
.jw-sa .jw-sa-card-image {
	overflow: hidden;
	border-radius: 2px;
	background: #fff;
}

.jw-sa .jw-sa-card-image img {
	width: 100%;
	aspect-ratio: 849 / 1000;
	object-fit: cover;
	background: #fff;
	transition: transform 700ms var(--jw-ease-big);
}

.jw-sa .jw-sa-grid .wc-block-product-template__product:hover .jw-sa-card-image img {
	transform: scale(1.05);
}

/* "Sold" badge on listing cards (greyd_child_sold_card_badge) — keeps the
   index honest for out-of-stock pieces. Works on .jw-sa grids and the
   .jw-sp single-product related cards. */
.jw-sa-card-image,
.jw-sp-cards .wp-block-woocommerce-product-image {
	position: relative;
}

.jw-sold-badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	font-family: var(--jw-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--jw-tr-widest);
	text-transform: uppercase;
	color: var(--jw-text);
	background: #ffffff;
	border: 0.5px solid var(--jw-rule-ghost);
	padding: 6px 11px;
}

/* sold cards read a touch quieter */
.jw-sa-card-image:has(.jw-sold-badge) img {
	opacity: 0.82;
}

/* caption row: hairline divider, serif title left + mono price right,
   baseline-aligned — mirrors the portfolio .tile__cap */
.jw-sa .jw-sa-card-cap {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	border-top: 0.5px solid var(--jw-rule-ghost);
	margin-top: 14px;
	padding-top: var(--jw-sp-3);
}

/* card title: serif */
.jw-sa .jw-sa-card-title,
.jw-sa h2.jw-sa-card-title,
.jw-sa .jw-sa-card-title a {
	font-family: var(--jw-serif);
	font-size: 19px !important;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: var(--jw-tr-snug);
	color: var(--jw-text);
	text-decoration: none;
	margin: 0;
}

.jw-sa .jw-sa-card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* card price: mono, right-aligned in the caption row */
.jw-sa .jw-sa-card-price,
.jw-sa .jw-sa-card-price .wc-block-components-product-price {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text-2);
}

.jw-sa .jw-sa-card-price {
	flex: none;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.jw-sa .jw-sa-card-price del {
	color: var(--jw-ghost);
	opacity: 0.7;
}

.jw-sa .jw-sa-card-price ins {
	text-decoration: none;
	color: var(--jw-text);
}

/* ---- No results ---- */
.jw-sa .jw-sa-no-results {
	padding: var(--jw-sp-16) 0;
	text-align: center;
	font-family: var(--jw-sans);
	font-weight: 300;
	color: var(--jw-text-2);
}

.jw-sa .jw-sa-no-results strong {
	font-family: var(--jw-serif);
	font-size: 24px;
	font-weight: 400;
}

/* ---- Pagination: quiet mono ---- */
.jw-sa .jw-sa-pagination {
	margin-top: var(--jw-sp-16);
	gap: var(--jw-sp-2);
}

.jw-sa .jw-sa-pagination .wp-block-query-pagination-numbers,
.jw-sa .jw-sa-pagination .wp-block-query-pagination-previous,
.jw-sa .jw-sa-pagination .wp-block-query-pagination-next {
	font-family: var(--jw-mono);
	font-size: var(--jw-fs-sm);
	letter-spacing: var(--jw-tr-wide);
	color: var(--jw-text-2);
}

.jw-sa .jw-sa-pagination a:hover,
.jw-sa .jw-sa-pagination .page-numbers.current {
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ----------------------------------------------------------------------------
   SHOP ARCHIVE — responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 880px) {
	.jw-sa .jw-sa-grid .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--jw-sp-8) var(--jw-sp-6);
	}
}

@media (max-width: 480px) {
	.jw-sa .jw-sa-grid .wc-block-product-template {
		grid-template-columns: 1fr;
		gap: var(--jw-sp-8);
	}

	.jw-sa .wc-block-product-filters__overlay-dialog {
		width: 100vw;
	}

	.jw-sa .jw-sa-toolbar {
		flex-wrap: wrap;
	}

	/* caption row: stack title/price instead of squeezing title
	   against the fixed-width price on narrow phones */
	.jw-sa .jw-sa-card-cap {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.jw-sa .jw-sa-card-price {
		text-align: left;
	}
}

/* respect reduced-motion: no drawer slide */
@media (prefers-reduced-motion: reduce) {
	.jw-sa .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transition: none;
	}
}

/* ----------------------------------------------------------------------------
   3d-ext. ACCOUNT — page template (templates/page-my-account.html)

   WooCommerce My Account has no native blocks; the dashboard is the classic
   [woocommerce_my_account] shortcode kept intact and styled around. This adds
   the page layout the base section 3d lacked: a contained editorial header, a
   two-column login/register (logged out), and a sticky sidebar-nav + content
   grid (logged in). Scoped under the .jw-acct template wrapper.
   ---------------------------------------------------------------------------- */

.jw-acct {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--medium, 56px) 24px var(--wp--preset--spacing--large, 96px);
	/* Greyd's .wp-site-blocks is a centred flex column, which shrinks a
	   plain block to content width; width:100% lets it fill to max-width */
}

.jw-acct a {
	color: var(--jw-text);
}

/* editorial header: eyebrow above the page title */
.jw-acct .jw-acct-eyebrow {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
	margin: 0 0 10px;
}

.jw-acct h1.jw-display-title {
	margin: 0 0 var(--jw-sp-10);
}

.jw-acct .woocommerce {
	margin: 0;
}

/* ============================ LOGGED OUT ============================ */
/* login / register: two contained columns, hairline divider, no boxes */
.jw-acct #customer_login.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jw-sp-16);
	max-width: 940px;
	margin: 0;
}

/* explicit placement so a stray notices wrapper can't bump the columns
   into the wrong cells/rows */
.jw-acct #customer_login.col2-set .col-1 {
	grid-column: 1;
	grid-row: 1;
}

.jw-acct #customer_login.col2-set .col-2 {
	grid-column: 2;
	grid-row: 1;
}

.jw-acct #customer_login.col2-set > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: auto;
}

.jw-acct #customer_login .col-1,
.jw-acct #customer_login .col-2,
.jw-acct #customer_login .woocommerce-form {
	width: auto !important;
	float: none !important;
	border: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.jw-acct #customer_login .col-2 {
	border-left: 0.5px solid var(--jw-rule-ghost) !important;
	padding-left: var(--jw-sp-16) !important;
}

.jw-acct #customer_login h2 {
	margin-top: 0;
}

/* register privacy / helper copy */
.jw-acct .woocommerce-privacy-policy-text p,
.jw-acct .woocommerce-form-register > p:not(.form-row):not(.woocommerce-LostPassword) {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-sm);
	font-weight: 300;
	line-height: 1.7;
	color: var(--jw-text-2);
}

/* remember-me + lost password */
.jw-acct .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--jw-sp-2);
	font-size: var(--jw-fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jw-text-2);
	margin: 0 0 var(--jw-sp-4);
}

.jw-acct .woocommerce-form-login__rememberme input {
	accent-color: var(--jw-text);
}

.jw-acct .lost_password {
	margin: 0;
}

.jw-acct .lost_password a {
	font-size: var(--jw-fs-sm);
	font-style: italic;
	color: var(--jw-text-2);
}

.jw-acct .lost_password a:hover {
	color: var(--jw-text);
}

/* ============================ LOGGED IN ============================ */
/* sticky sidebar nav + content (only when the nav is present) */
.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 72px;
	align-items: start;
}

/* explicit placement so a stray first child (e.g. a notices wrapper that
   WooCommerce injects into .woocommerce) can't bump the nav into the wide
   cell and squeeze the content into the 220px track */
.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
}

.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
}

/* keep any injected wrapper (notices, messages) full-width above the grid */
.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: auto;
}

/* WooCommerce floats nav at 30% / content at 65%; inside our grid that makes
   the nav ~66px (30% of the 220px track) and wraps the labels. Fill the
   tracks instead. */
.jw-acct .woocommerce-MyAccount-navigation,
.jw-acct .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
}

.jw-acct .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 24px;
}

/* min-width:0 stops a wide orders table from blowing out the grid track */
.jw-acct .woocommerce-MyAccount-content {
	min-width: 0;
}

.jw-acct .woocommerce-MyAccount-content > p {
	font-family: var(--jw-sans);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--jw-text-2);
	max-width: 60ch;
}

.jw-acct .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* order actions / "view" buttons stay quiet, not heavy blocks */
.jw-acct .woocommerce-MyAccount-content .woocommerce-button.button.view {
	padding: var(--jw-sp-2) 18px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 860px) {
	.jw-acct #customer_login.col2-set {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* reset desktop explicit placement so the columns stack in one column */
	.jw-acct #customer_login.col2-set .col-1,
	.jw-acct #customer_login.col2-set .col-2 {
		grid-column: 1;
		grid-row: auto;
	}

	.jw-acct #customer_login .col-2 {
		border-left: none !important;
		border-top: 0.5px solid var(--jw-rule-ghost) !important;
		padding-left: 0 !important;
		margin-top: var(--jw-sp-12) !important;
		padding-top: var(--jw-sp-12) !important;
	}

	.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: var(--jw-sp-8);
	}

	/* reset desktop placement so nav + content stack in one column */
	.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
	.jw-acct .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}

	.jw-acct .woocommerce-MyAccount-navigation {
		position: static;
	}

	/* nav becomes a horizontal scroll strip above the content */
	.jw-acct .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--jw-sp-6);
		border-bottom: 0.5px solid var(--jw-text);
	}

	.jw-acct .woocommerce-MyAccount-navigation li {
		border-bottom: none;
	}

	.jw-acct .woocommerce-MyAccount-navigation li a {
		padding: 10px 0;
	}
}

/* orders/downloads tables -> stacked rows on phones */
@media (max-width: 600px) {
	.jw-acct .woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}

	.jw-acct .woocommerce-MyAccount-content table.shop_table tr {
		display: block;
		border-bottom: 0.5px solid var(--jw-text);
		padding: 14px 0;
	}

	.jw-acct .woocommerce-MyAccount-content table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: var(--jw-sp-4);
		border: none;
		padding: 6px 0;
		text-align: right;
	}

	.jw-acct .woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title);
		font-family: var(--jw-sans);
		font-size: var(--jw-fs-2xs);
		font-weight: 500;
		letter-spacing: var(--jw-tr-wider);
		text-transform: uppercase;
		color: var(--jw-ghost);
		text-align: left;
	}
}

/* ----------------------------------------------------------------------------
   3d-ext (cont). ACCOUNT — white content cards + form spacing
   ---------------------------------------------------------------------------- */

/* Each account screen's content sits on a white card */
.jw-acct .woocommerce-MyAccount-content {
	background: #ffffff;
	border: 0.5px solid var(--jw-rule-ghost);
	box-shadow: 0 2px 14px rgba(17, 17, 17, 0.05);
	padding: 36px var(--jw-sp-10);
}

.jw-acct .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

.jw-acct .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

/* breathing room for account forms (a global checkout rule squeezes rows to
   0.5rem — too tight here, e.g. password sitting under the email) */
.jw-acct .woocommerce-MyAccount-content .form-row {
	margin-bottom: 22px !important;
}

/* Account details: separate the password-change block from the email field */
.jw-acct .woocommerce-EditAccountForm fieldset {
	margin: var(--jw-sp-10) 0 0;
	padding-top: 28px;
	border: none;
	border-top: 0.5px solid var(--jw-rule-ghost);
}

.jw-acct .woocommerce-EditAccountForm legend {
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 var(--jw-sp-5);
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-ghost);
}

.jw-acct .woocommerce-EditAccountForm .form-row :is(span, em) {
	font-size: var(--jw-fs-xs);
	color: var(--jw-ghost);
	font-style: italic;
}

/* first / last name side by side on the account form */
.jw-acct .woocommerce-EditAccountForm .form-row-first {
	float: left;
	width: 48%;
}

.jw-acct .woocommerce-EditAccountForm .form-row-last {
	float: right;
	width: 48%;
}

.jw-acct .woocommerce-EditAccountForm .clear {
	clear: both;
}

/* Addresses: Billing / Shipping side by side with a hairline divider */
.jw-acct .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jw-sp-12);
	margin-top: var(--jw-sp-6);
}

.jw-acct .woocommerce-Addresses .woocommerce-Address {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* explicit placement so a stray child (e.g. notices wrapper) can't stagger
   the columns — same fix as the login screen */
.jw-acct .woocommerce-Addresses .woocommerce-Address.col-1 {
	grid-column: 1;
	grid-row: 1;
}

.jw-acct .woocommerce-Addresses .woocommerce-Address.col-2 {
	grid-column: 2;
	grid-row: 1;
}

.jw-acct .woocommerce-Addresses .woocommerce-Address:nth-child(2) {
	border-left: 0.5px solid var(--jw-rule-ghost);
	padding-left: var(--jw-sp-12);
}

.jw-acct .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jw-sp-4);
	margin-bottom: var(--jw-sp-4);
}

.jw-acct .woocommerce-Address-title h2 {
	font-family: var(--jw-serif);
	font-size: 22px;
	font-weight: 300;
	letter-spacing: var(--jw-tr-snug);
	color: var(--jw-text);
	margin: 0;
}

.jw-acct .woocommerce-Address-title a.edit {
	font-family: var(--jw-sans);
	font-size: var(--jw-fs-2xs);
	font-weight: 500;
	letter-spacing: var(--jw-tr-wider);
	text-transform: uppercase;
	color: var(--jw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	flex: 0 0 auto;
}

/* stack address columns on small screens */
@media (max-width: 600px) {
	.jw-acct .woocommerce-Addresses.col2-set {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.jw-acct .woocommerce-Addresses .woocommerce-Address.col-1,
	.jw-acct .woocommerce-Addresses .woocommerce-Address.col-2 {
		grid-column: 1;
		grid-row: auto;
	}

	.jw-acct .woocommerce-Addresses .woocommerce-Address:nth-child(2) {
		border-left: none;
		border-top: 0.5px solid var(--jw-rule-ghost);
		padding-left: 0;
		margin-top: var(--jw-sp-8) !important;
		padding-top: var(--jw-sp-8);
	}

	.jw-acct .woocommerce-MyAccount-content {
		padding: var(--jw-sp-6) 22px;
	}
}