/* ==========================================================================
   JKT Shop — WooCommerce brand skin
   --------------------------------------------------------------------------
   Loaded only on Woo views (see includes/shop.php), after Woo's own
   stylesheets and depending on jkt-core, so every design token from jkt.css is
   already defined and nothing here needs !important to win.

   Two markup families have to be covered:

     - CLASSIC templates on the shop archive, category archives and single
       product (ul.products, li.product, .single_add_to_cart_button, .wc-tab)
     - BLOCK templates on cart and checkout (.wc-block-*), which ship their own
       colour system via CSS custom properties

   Everything reuses the site's existing tokens rather than introducing shop-
   only values, so the storefront reads as part of the same site. Coral is
   reserved for interaction, exactly as on the rest of the build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared shell
   -------------------------------------------------------------------------- */

.woocommerce,
.woocommerce-page {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4 {
	color: var(--jkt-white);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.05;
}

.woocommerce a,
.woocommerce-page a {
	color: var(--jkt-ice);
	text-decoration: none;
	transition: color .2s ease;
}

.woocommerce a:hover,
.woocommerce-page a:hover {
	color: var(--jkt-coral);
}

/* The archive template supplies its own heading; give it breathing room. */
.jkt-shop__title {
	margin: var(--jkt-space-2) 0 var(--jkt-space-3);
}

/* --------------------------------------------------------------------------
   Buttons
   One treatment for every button Woo can emit, classic or block, matching the
   site's .jkt-btn: coral, mono, uppercase, square corners.
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	display: inline-block;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 16px 40px;
	background-color: var(--jkt-coral);
	border: 1px solid var(--jkt-coral);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/*
 * Hover matches every other button on the site (.jkt-btn:hover -> ice).
 * The build brief asked for a navy hover; that would make shop buttons the
 * only ones on the site behaving differently, so site consistency wins here.
 * See BUILD_NOTES.md — swapping the two declarations below is the whole change.
 */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.wc-block-components-button:hover,
.wc-block-components-button:focus,
.wc-block-components-checkout-place-order-button:hover {
	color: #16181c;
	background-color: var(--jkt-ice);
	border-color: var(--jkt-ice);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.wc-block-components-button:focus-visible {
	outline: 1px solid var(--jkt-coral);
	outline-offset: 2px;
}

/*
 * Block buttons again, at Woo's own specificity.
 *
 * Cart/checkout ship their primary buttons as
 * `.wc-block-components-button.wp-element-button.contained`, styled by Woo and
 * WP global styles with multi-class selectors — a single-class rule loses and
 * the button stays default grey. These repeat the treatment with enough
 * specificity to win, rather than reaching for !important.
 */
.wc-block-components-button.wp-element-button.contained,
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(:disabled):not([aria-disabled="true"]) {
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	background-color: var(--jkt-coral);
	border: 1px solid var(--jkt-coral);
	border-radius: 0;
	box-shadow: none;
}

.wc-block-components-button.wp-element-button.contained:hover,
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(:disabled):not([aria-disabled="true"]):hover {
	color: #16181c;
	background-color: var(--jkt-ice);
	border-color: var(--jkt-ice);
}

/* Woo draws the label in a child span, which inherits nothing useful. */
.wc-block-components-button__text {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.wc-block-components-button:disabled {
	opacity: .45;
	cursor: default;
}

/* Secondary / "back to shop" style buttons read as outline. */
.woocommerce a.button.wc-backward,
.wc-block-cart__empty-cart__snackbar a,
.woocommerce-message a.button {
	color: var(--jkt-coral);
	background-color: transparent;
	border-color: var(--jkt-coral);
	padding: 16px 32px;
}

.woocommerce a.button.wc-backward:hover,
.woocommerce-message a.button:hover {
	color: var(--jkt-white);
	background-color: var(--jkt-coral);
	border-color: var(--jkt-coral);
}

/* --------------------------------------------------------------------------
   Archive: toolbar
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jkt-ice-label);
	margin: 0 0 var(--jkt-space-3);
}

.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 10px 14px;
	background-color: transparent;
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
}

.woocommerce .woocommerce-ordering select option {
	/* The dropdown list itself is drawn by the OS, so it needs a solid pair. */
	color: var(--jkt-ice);
	background-color: var(--jkt-navy-deep);
}

/* --------------------------------------------------------------------------
   Archive: product grid
   Mirrors the site's .jkt-card — hairline border, faint tint, 3:2 image well.
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jkt-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none; /* Woo's clearfix would create phantom grid cells. */
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	background-color: rgba(238, 242, 245, .06);
	border: 1px solid var(--jkt-hair-subtle);
	transition: border-color .2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--jkt-hair-strong);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*
 * 4:3 to match the source photography, and `contain` so nothing is cropped —
 * see "Design pass 2" in BUILD_NOTES. The white mat is deliberate: some packs
 * are shot on white and sit seamlessly, the full-bleed navy graphics get a
 * clean border. Cards stay equal height because the grid row does that, not
 * the image.
 */
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--jkt-white);
	box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.15;
	padding: 18px 18px 0;
	margin: 0;
}

/*
 * The bottom padding is a floor, not decoration.
 *
 * The button below uses `margin-top: auto` to sit at the card's foot. In a row
 * of equal-height grid cells the TALLEST card has no spare space, so that auto
 * margin collapses to 0 and the button butts straight against the price —
 * which is exactly what happens once a title wraps to two or three lines.
 * Padding here guarantees a gap regardless of how the title breaks.
 */
.woocommerce ul.products li.product .price {
	display: block;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	padding: 8px 18px 16px;
	margin: 0;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
	color: inherit;
	opacity: .7;
	text-decoration: none;
}

/* Push the add-to-cart to the bottom so uneven titles still line up. */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	margin: auto 18px 18px;
	padding: 13px 20px;
	font-size: 11px;
	letter-spacing: 0.12em;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	top: 0;
	right: 0;
	left: auto;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 7px 10px;
	margin: 0;
	background-color: var(--jkt-coral);
	border-radius: 0;
}

/* Ratings are not part of this brand's language. */
.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating {
	display: none;
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--jkt-space-6);
	row-gap: var(--jkt-space-4);
	align-items: start;
}

.woocommerce div.product div.images {
	width: auto;
	float: none;
	margin: 0;
	grid-column: 1;
}

.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin: 0;
	grid-column: 2;
}

.woocommerce div.product div.images img {
	display: block;
	width: 100%;
	border: 1px solid var(--jkt-hair-subtle);
	background-color: var(--jkt-white);
	box-shadow: none;
}

.woocommerce div.product .product_title {
	font-size: clamp(36px, 4.4vw, 56px);
	margin: 0 0 var(--jkt-space-2);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--jkt-space-3);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 16px;
	line-height: 1.65;
	max-width: 54ch;
	margin-bottom: var(--jkt-space-3);
}

/* Quantity + add to cart on one line. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--jkt-space-2);
	margin: var(--jkt-space-3) 0;
}

.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
	width: 72px;
	height: 100%;
	min-height: 46px;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	text-align: center;
	background-color: transparent;
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
}

/*
 * Oxygen supplies its own increment/decrement buttons (.bde-quantity-button)
 * with empty content, drawn by Breakdance's WooCommerce stylesheet — which is
 * not loaded on these templates, so they render as bare stubs. Draw them here
 * as square hairline buttons with mono glyphs, matching the rest of the site.
 */
.woocommerce .quantity--number {
	display: flex;
	align-items: stretch;
}

.woocommerce .bde-quantity-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-height: 46px;
	padding: 0;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 14px;
	line-height: 1;
	background: transparent;
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.woocommerce .bde-quantity-button--dec::before {
	content: "\2212"; /* minus sign, not a hyphen */
}

.woocommerce .bde-quantity-button--inc::before {
	content: "+";
}

.woocommerce .bde-quantity-button:hover {
	color: var(--jkt-coral);
	border-color: var(--jkt-coral);
}

/* Collapse the doubled hairline where the three controls meet. */
.woocommerce .quantity--number .bde-quantity-button--dec {
	border-right: 0;
}

.woocommerce .quantity--number .bde-quantity-button--inc {
	border-left: 0;
}

/* The browser's own spinner duplicates the buttons either side. */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.woocommerce .quantity input.qty[type="number"] {
	appearance: textfield;
}

.woocommerce div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jkt-ice-fine);
	padding-top: var(--jkt-space-2);
	border-top: 1px solid var(--jkt-hair-subtle);
	margin-top: var(--jkt-space-3);
}

/* Tabs: rendered as the site's hairline data rows rather than Woo's chips. */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	border-top: 1px solid var(--jkt-hair-subtle);
	padding-top: var(--jkt-space-4);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--jkt-space-3);
	margin: 0 0 var(--jkt-space-3);
	padding: 0;
	list-style: none;
}

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

/*
 * `.active` has to be in the selector: Woo styles the open tab with
 * `…ul.tabs li.active { background: #fff }`, which outranks a rule on `li`
 * alone — leaving the Description toggle as a white chip on the navy.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0 0 8px;
	border-bottom: 1px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--jkt-coral);
	border-bottom-color: var(--jkt-coral);
}

.woocommerce div.product .woocommerce-Tabs-panel {
	color: var(--jkt-ice-body);
	font-size: 16px;
	line-height: 1.65;
	max-width: 68ch;
}

.woocommerce div.product .woocommerce-Tabs-panel h2 {
	display: none; /* The tab label already says it. */
}

.woocommerce div.product .woocommerce-Tabs-panel ul {
	padding-left: 1.1em;
}

/* Related / upsells sit full width under the two columns. */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	grid-column: 1 / -1;
	border-top: 1px solid var(--jkt-hair-subtle);
	padding-top: var(--jkt-space-4);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-size: clamp(28px, 3vw, 40px);
	margin: 0 0 var(--jkt-space-3);
}

/* --------------------------------------------------------------------------
   Single product: case-size variations (B2B)
   Both salmon products became variable when the shop moved to trade-only
   supply, so Woo now emits a .variations table, a price RANGE in the summary
   and a per-variation panel. None of that markup existed when this skin was
   written, and left alone the select arrives with native browser chrome.

   Woo's markup is a table; it is stripped back to a stacked label + field so
   it reads like the rest of the site's forms.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 var(--jkt-space-2);
	border: 0;
	border-collapse: collapse;
}

.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart table.variations th.label {
	margin-bottom: var(--jkt-space-1);
	text-align: left;
}

.woocommerce div.product form.cart table.variations th.label label {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Oxygen wraps the control in .bde-woo-select; the select inside it is still
   the browser's own, so the chevron is drawn here as a background image. */
.woocommerce div.product form.cart .bde-woo-select {
	display: block;
	width: 100%;
	max-width: 340px;
}

.woocommerce div.product form.cart table.variations select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 14px 44px 14px 16px;
	background-color: rgba(238, 242, 245, .06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EEF2F5'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 10px;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s ease;
}

.woocommerce div.product form.cart table.variations select:hover {
	border-color: var(--jkt-hair-strong);
}

.woocommerce div.product form.cart table.variations select:focus-visible {
	outline: 2px solid var(--jkt-coral);
	outline-offset: 2px;
}

/*
 * The open dropdown list is painted by the OS, not the page. Setting the
 * option colours keeps it from falling back to ice-on-white, which is the one
 * place the brand palette would otherwise break.
 */
.woocommerce div.product form.cart table.variations select option {
	background-color: var(--jkt-navy-deep);
	color: var(--jkt-ice);
}

.woocommerce div.product form.cart a.reset_variations {
	display: inline-block;
	margin: var(--jkt-space-1) 0 0;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce div.product form.cart a.reset_variations:hover {
	color: var(--jkt-coral);
}

/* The panel Woo reveals once a case size is picked: case total, then rate. */
.woocommerce div.product .single_variation_wrap {
	margin-top: var(--jkt-space-2);
	/* Its own row in the flex form, so nothing sits alongside it. */
	flex: 0 0 100%;
	width: 100%;
}

/*
 * Woo prints the variation description before the price. For case pricing the
 * total is the headline and the per-unit rate is the justification, so the
 * order is flipped here rather than by overriding the template.
 */
.woocommerce div.product .woocommerce-variation {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--jkt-space-3);
	padding-top: var(--jkt-space-2);
	border-top: 1px solid var(--jkt-hair-subtle);
}

.woocommerce div.product .woocommerce-variation-price {
	order: 1;
}

.woocommerce div.product .woocommerce-variation-description {
	order: 2;
}

.woocommerce div.product .woocommerce-variation-availability {
	order: 3;
}

.woocommerce div.product .woocommerce-variation-price .price {
	font-size: 28px;
	margin: 0;
}

.woocommerce div.product .woocommerce-variation-description p {
	margin: var(--jkt-space-1) 0 0;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/*
 * Before a case size is chosen the button is inert. Woo/Oxygen grey it out;
 * an outlined ghost reads as "not yet" rather than "broken", and keeps coral
 * reserved for the live action.
 */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	background-color: transparent;
	border: 1px solid var(--jkt-hair);
	color: var(--jkt-ice-fine);
	opacity: 1;
	filter: none;
	cursor: not-allowed;
}

/* Keep "£95.00 – £350.00" on one line in the summary and on archive cards. */
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Notices — hairline panels, never Woo's green/blue/red bars
   Revised in Design pass 3: these were a navy-deep slab with a 2px coral rule,
   which read as the heaviest element on the page for the lightest message on
   it. Now the page navy with a single hairline, at the same visual weight as
   the checkout option rows. Info/success take a light hairline, errors coral —
   same family, unmistakably different.
   -------------------------------------------------------------------------- */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jkt-space-3);
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 14px 18px;
	margin: 0 0 var(--jkt-space-3);
	list-style: none;
	background-color: transparent;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
}

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-error {
	border-color: var(--jkt-coral);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	content: none; /* Woo's icon font is not part of this design language. */
}

.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 10px 18px;
	font-size: 10px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-error,
	.woocommerce .woocommerce-message,
	.woocommerce .woocommerce-info,
	.woocommerce .woocommerce-error {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.woocommerce .woocommerce-message a.button,
	.woocommerce .woocommerce-info a.button,
	.woocommerce .woocommerce-error a.button {
		display: block;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Forms — my-account, checkout, coupon
   -------------------------------------------------------------------------- */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce label,
.wc-block-components-text-input label {
	display: block;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce input.input-text,
.woocommerce-Input--text,
.wc-block-components-text-input input,
.wc-block-components-select__container select,
/*
 * The review form is a comment form, not a Woo form-row, so none of the
 * selectors above reach it — its textarea and rating select were rendering as
 * white boxes inside the navy Reviews panel. Listed here rather than given
 * their own rule so they cannot drift from the other inputs.
 */
#review_form #respond textarea,
#review_form #respond input[type="text"],
#review_form #respond input[type="email"],
#review_form #respond input[type="url"],
#review_form #respond select,
#review_form #respond .comment-form-rating select {
	width: 100%;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-body);
	font-size: 15px;
	line-height: 1.4;
	padding: 13px 14px;
	background-color: rgba(238, 242, 245, .04);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce input.input-text:focus,
.wc-block-components-text-input input:focus,
#review_form #respond textarea:focus,
#review_form #respond input[type="text"]:focus,
#review_form #respond input[type="email"]:focus,
#review_form #respond input[type="url"]:focus,
#review_form #respond select:focus {
	outline: none;
	border-color: var(--jkt-coral);
	background-color: rgba(238, 242, 245, .06);
}

/* ---- Review form: the rest of the furniture ---- */

#reviews .woocommerce-Reviews-title,
#review_form #respond .comment-reply-title {
	color: var(--jkt-white);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 22px;
}

#review_form #respond label,
#reviews .comment-form-rating label {
	display: block;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}

#reviews .woocommerce-noreviews,
#review_form #respond .comment-notes,
#reviews .comment-form-cookies-consent label {
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0.04em;
}

/* Woo's star widget draws in its own icon font; keep it on-palette. */
#review_form #respond p.stars a {
	color: var(--jkt-ice-label);
}

#review_form #respond p.stars a:hover,
#review_form #respond p.stars.selected a.active,
#review_form #respond p.stars:hover a {
	color: var(--jkt-coral);
}

/* The OS draws the option list, so it needs an explicit solid pair. */
#review_form #respond select option {
	color: var(--jkt-ice);
	background-color: var(--jkt-navy-deep);
}

.woocommerce form .form-row {
	margin-bottom: var(--jkt-space-2);
	padding: 0;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	max-width: 480px;
	padding: var(--jkt-space-3);
	background-color: rgba(238, 242, 245, .04);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
}

.woocommerce .woocommerce-LostPassword,
.woocommerce .woocommerce-form-login__rememberme {
	font-family: var(--jkt-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jkt-ice-fine);
}

/* My-account navigation reads as the footer's link columns. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 12px 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--jkt-coral);
}

/* --------------------------------------------------------------------------
   Tables — cart totals, order review, account orders
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
	width: 100%;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_attributes th {
	color: var(--jkt-ice-label);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: left;
	padding: 12px 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td {
	padding: 14px 0;
	border-top: 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table img {
	width: 64px;
	height: auto;
	border: 1px solid var(--jkt-hair-subtle);
}

/* --------------------------------------------------------------------------
   Block cart & checkout
   The block templates ship their own palette through custom properties, so the
   variables are reset here rather than fighting every component rule.
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-form,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	--wc-blue: var(--jkt-coral);
	--wc-primary: var(--jkt-coral);
	--wc-highlight: var(--jkt-coral);
	--wc-content-bg: transparent;
	--wc-surface: transparent;
	--wc-text: var(--jkt-ice);
	color: var(--jkt-ice-body);
}

.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2 {
	color: var(--jkt-white);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 18px;
	text-decoration: none;
}

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
	font-family: var(--jkt-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--jkt-ice);
}

.wc-block-components-totals-item__label,
.wc-block-components-order-summary__button-text {
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jkt-ice-label);
}

.wc-block-cart-items__header,
.wc-block-components-totals-item,
.wc-block-cart-item__wrap,
.wc-block-components-order-summary-item {
	border-bottom: 1px solid var(--jkt-hair-subtle);
}

.wc-block-cart-items__header {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background-color: rgba(238, 242, 245, .04);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	padding: var(--jkt-space-3);
}

/*
 * Superseded in Design pass 3 — see "Notices — the block variants" below.
 * The !important stays because Woo sets the banner background inline-ish from
 * its own block stylesheet, but the value is now the flat page navy rather
 * than a navy-deep slab, and the heavy coral top rule is gone.
 */
.wc-block-components-notice-banner {
	color: var(--jkt-white);
	background-color: transparent !important;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
}

.wc-block-components-notice-banner > svg {
	display: none;
}

.wc-block-components-checkbox__input,
.woocommerce input[type="checkbox"] {
	accent-color: var(--jkt-coral);
}

/*
 * Block form fields.
 *
 * Woo styles these through component-level selectors that outrank a plain
 * `.wc-block-components-text-input input`, so the fields stayed white with a
 * dark border — and because the floating label is positioned *inside* the
 * field, ice-coloured label text on a white field was effectively invisible.
 * Scoping to the parent block wins the cascade without !important.
 */
.wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-components-form .wc-block-components-combobox-control input[type],
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-form .wc-block-components-select .wc-block-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type],
.wp-block-woocommerce-cart .wc-block-components-text-input input[type] {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-body);
	font-size: 15px;
	background-color: rgba(238, 242, 245, .06);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	box-shadow: none;
}

.wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wc-block-components-form .wc-block-components-select .wc-block-components-select__select:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type]:focus,
.wp-block-woocommerce-cart .wc-block-components-text-input input[type]:focus {
	outline: none;
	border-color: var(--jkt-coral);
	background-color: rgba(238, 242, 245, .09);
	box-shadow: none;
}

/* The floating label rides inside the field, so it has to read on that tint. */
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-cart .wc-block-components-text-input label {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-cart .wc-block-components-text-input.is-active label {
	color: var(--jkt-ice-fine);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*
 * Country/region uses a second, differently-named component:
 * `wc-blocks-components-select` (with an s) rather than `wc-block-…`, and its
 * white background sits on the wrapper, not the <select>. Both spellings are
 * covered here so the field matches the text inputs beside it.
 */
.wc-blocks-components-select,
.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-block-components-combobox .wc-blocks-components-select__container {
	background-color: rgba(238, 242, 245, .06);
	border-radius: 0;
}

.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-blocks-components-select__select {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-body);
	font-size: 15px;
	background-color: transparent;
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	box-shadow: none;
}

.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-blocks-components-select__label {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
}

.wc-blocks-components-select .wc-blocks-components-select__select option {
	color: var(--jkt-ice);
	background-color: var(--jkt-navy-deep);
}

/* The OS draws select option lists, so they need an explicit solid pair. */
.wp-block-woocommerce-checkout .wc-block-components-select__select option {
	color: var(--jkt-ice);
	background-color: var(--jkt-navy-deep);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
	color: var(--jkt-white);
	font-family: var(--jkt-font-display);
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit {
	color: var(--jkt-ice-fine);
}

.wc-block-components-product-image img {
	border: 1px solid var(--jkt-hair-subtle);
	background-color: var(--jkt-white);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: var(--jkt-space-1);
	border: 0;
	margin: var(--jkt-space-4) 0 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: block;
	min-width: 38px;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1;
	text-align: center;
	padding: 12px 10px;
	background: transparent;
	border: 1px solid var(--jkt-hair-subtle);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	color: var(--jkt-coral);
	background: transparent;
	border-color: var(--jkt-coral);
}

/* --------------------------------------------------------------------------
   Responsive
   Breakpoints follow jkt.css rather than Woo's own.
   -------------------------------------------------------------------------- */

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

@media (max-width: 1023px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		grid-column: 1;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--jkt-space-2);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 17px;
		padding: 14px 14px 0;
	}

	.woocommerce ul.products li.product a.button.add_to_cart_button,
	.woocommerce ul.products li.product a.button {
		margin: auto 14px 14px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.woocommerce a,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce ul.products li.product,
	.wc-block-components-button {
		transition: none;
	}
}

/* ==========================================================================
   DELIVERY SCHEDULING — Order Delivery Date Pro
   Added for the delivery-scheduling build. Plugin files are untouched; these
   are overrides only. See BUILD_NOTES.md, "Delivery scheduling — ODD Pro".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkout: the delivery date field
   -------------------------------------------------------------------------- */

/*
 * ODD prints an availability counter ("Available Deliveries: Unlimited") above
 * the field. There are no per-day caps configured, so it says nothing useful
 * and reads as a system message. Hidden rather than disabled, because the
 * setting that produces it is the same one that would drive capacity caps
 * later — see the open items in BUILD_NOTES.
 */
.orddd-datepicker-fields > div:not(:has(.wc-block-components-text-input)) {
	/* !important because the flex rule below also forces `display`. */
	display: none !important;
}

/*
 * Note above the field, not below it. ODD emits <small class="orddd_field_note">
 * after the input; the delivery pattern is the thing a trade buyer needs
 * *before* opening the calendar, so the order is flipped with flexbox rather
 * than by overriding the plugin's markup.
 */
/*
 * `display` is forced here. WooCommerce Blocks sets `display: block` on this
 * unclassed wrapper from its own stylesheet at a specificity a plain child
 * selector cannot beat, and it is the only declaration that loses — the
 * flex-direction and the order values below apply normally. Without it the
 * note stays under the input.
 */
.orddd-datepicker-fields > div {
	display: flex !important;
	flex-direction: column;
}

.orddd-datepicker-fields .wc-block-components-text-input {
	order: 2;
	margin-top: 0;
}

.orddd-datepicker-fields .orddd_field_note {
	order: 1;
	display: block;
	margin: 0 0 10px;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

/* The input itself, in the same form language as the case-size select. */
.orddd-datepicker-fields input#e_deliverydate_0,
.wc-block-components-text-input.orddd-datepicker input[type="text"] {
	width: 100%;
	padding: 22px 44px 8px 16px;
	background-color: rgba(238, 242, 245, .06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EEF2F5'%3E%3Cpath d='M7 11h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zM5 22h14a2 2 0 002-2V6a2 2 0 00-2-2h-1V2h-2v2H9V2H7v2H6a2 2 0 00-2 2v14a2 2 0 002 2zM6 8h12v12H6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 15px;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	box-shadow: none;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color .2s ease;
}

.wc-block-components-text-input.orddd-datepicker input[type="text"]:hover {
	border-color: var(--jkt-hair-strong);
}

.wc-block-components-text-input.orddd-datepicker input[type="text"]:focus,
.wc-block-components-text-input.orddd-datepicker input[type="text"]:focus-visible {
	outline: 2px solid var(--jkt-coral);
	outline-offset: 2px;
	border-color: var(--jkt-hair-strong);
}

.wc-block-components-text-input.orddd-datepicker label {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   Checkout: the calendar
   -------------------------------------------------------------------------- */

/*
 * jQuery UI paints this panel, so it arrives as grey-on-white with rounded
 * corners — the one surface on the site that would otherwise ignore the
 * palette entirely. Rebuilt on navy-deep with the site's hairlines.
 *
 * Note on !important below: ODD injects an inline <style> block setting
 * `background: <colour> !important` on `.available-deliveries` and its anchor
 * (orddd-process.php). The available-day colour itself is set through the
 * plugin's own option (#33427A) rather than fought here, but the hover and
 * selected states have to match that specificity to win.
 */
#ui-datepicker-div.ui-datepicker {
	width: auto;
	padding: 0;
	/* Same navy as the page, so the picker reads as part of the checkout
	   rather than a darker inset panel dropped on top of it. */
	background: var(--jkt-navy);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	box-shadow: 0 14px 34px rgba(15, 24, 55, .38);
	font-family: var(--jkt-font-body);
	z-index: 9999;
}

#ui-datepicker-div .ui-datepicker-group {
	padding: 0 0 4px;
}

#ui-datepicker-div.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}

/* Header: navy band, Zilla Slab month/year. */
#ui-datepicker-div .ui-datepicker-header {
	padding: 14px 8px;
	/* Flat with the panel; the hairline alone separates it from the grid. */
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	color: var(--jkt-ice);
}

#ui-datepicker-div .ui-datepicker-title {
	margin: 0 2.3em;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

/* Prev/next: hide jQuery UI's sprite icons and draw chevrons in type. */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	top: 10px;
	width: 26px;
	height: 26px;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

/*
 * Two things draw an arrow here, which is where the doubled chevron came from:
 * jQuery UI's <span class="ui-icon"> (a sprite) and a themed ::before on the
 * anchor itself that renders an empty inline-block box. Both are killed; the
 * only arrow is the ::after below.
 */
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
	display: none;
}

#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
	content: none;
	display: none;
}

#ui-datepicker-div .ui-datepicker-prev::after,
#ui-datepicker-div .ui-datepicker-next::after {
	display: block;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 15px;
	line-height: 26px;
	text-align: center;
	transition: color .2s ease;
}

#ui-datepicker-div .ui-datepicker-prev::after { content: "\2039"; }
#ui-datepicker-div .ui-datepicker-next::after { content: "\203A"; }

#ui-datepicker-div .ui-datepicker-prev:hover::after,
#ui-datepicker-div .ui-datepicker-next:hover::after {
	color: var(--jkt-coral);
}

/* jQuery UI greys these out at the ends of the range; keep them quiet. */
#ui-datepicker-div .ui-state-disabled.ui-datepicker-prev::after,
#ui-datepicker-div .ui-state-disabled.ui-datepicker-next::after {
	color: rgba(238, 242, 245, .2);
}

/* Day-name row. */
#ui-datepicker-div .ui-datepicker-calendar th {
	padding: 10px 0 6px;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#ui-datepicker-div .ui-datepicker-calendar {
	margin: 0;
	border-collapse: collapse;
}

#ui-datepicker-div .ui-datepicker-calendar td {
	padding: 1px;
	border: 0;
}

/* Every day cell, selectable or not. */
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
	display: block;
	padding: 9px 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 13px;
	text-align: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/*
 * Disabled days. Deliberately low-contrast: with only two delivery days a
 * week, most of the grid is unavailable, and the eye should land on the ones
 * that are.
 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span {
	background: transparent;
	border-color: transparent;
	color: rgba(238, 242, 245, .22);
}

/* Available Tue/Thu. Background comes from the plugin option (#33427A). */
/*
 * Selectable Tue/Thu: a hairline outline box, in the same language as the
 * shipping and payment option rows. The fill is NOT set here — the plugin
 * paints `.available-deliveries` inline with !important from its own
 * orddd_available_dates_color option, which is set to the page navy so the
 * box reads as transparent. See BUILD_NOTES for which colours live where.
 */
#ui-datepicker-div .ui-datepicker-calendar td.available-deliveries a {
	color: var(--jkt-white);
	border-color: rgba(238, 242, 245, .5);
	font-weight: 600;
}

/* Hover: coral outline only, fill left alone. */
#ui-datepicker-div .ui-datepicker-calendar td.available-deliveries a:hover {
	border-color: var(--jkt-coral);
	color: var(--jkt-white);
}

/*
 * The selected date is the one solid block in the calendar — with everything
 * else flattened to outlines, it is the only fill, which is the whole point.
 * !important because it has to beat the plugin's inline background rule.
 */
#ui-datepicker-div .ui-datepicker-calendar td.available-deliveries a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
	background: var(--jkt-coral) !important;
	border-color: var(--jkt-coral);
	color: var(--jkt-white);
}

#ui-datepicker-div .ui-datepicker-calendar td a:focus-visible {
	outline: 2px solid var(--jkt-coral);
	outline-offset: 1px;
}

/*
 * Today, when it is not itself a delivery day, should not shout. jQuery UI
 * gives it .ui-state-highlight, which ships as a filled grey block — the one
 * default that survives the rules above, because it sets its own background.
 */
/*
 * Today gets no treatment at all. jQuery UI gives it .ui-state-highlight, which
 * ships as a filled grey block and was the one default still showing through.
 * If today happens to be a delivery day it picks up the ordinary outline box
 * from the .available-deliveries rule above; otherwise it recedes like every
 * other unselectable day.
 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today:not(.available-deliveries) span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today:not(.available-deliveries) a,
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-highlight {
	background: transparent;
	border-color: transparent;
	color: rgba(238, 242, 245, .22);
}

/*
 * The fill jQuery UI actually uses for today sits on the <td>, not on the cell
 * contents — a pale yellow that read as a solid grey block over the navy. It
 * has to be cleared on the cell itself; clearing the child does nothing.
 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today {
	background: transparent;
}

/* Button pane: the "Clear" control, as a quiet mono label. */
#ui-datepicker-div .ui-datepicker-buttonpane {
	margin: 0;
	padding: 10px 14px;
	background: transparent;
	border-top: 1px solid var(--jkt-hair-subtle);
}

#ui-datepicker-div .ui-datepicker-buttonpane button {
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
	color: var(--jkt-coral);
	border-color: var(--jkt-coral);
	background: transparent;
}

@media (max-width: 600px) {
	#ui-datepicker-div.ui-datepicker-multi-2 .ui-datepicker-group {
		width: 100%;
	}
}

/* ==========================================================================
   MY ACCOUNT
   The account area shipped as unstyled Woo defaults — light cards on the navy
   page, browser-default form controls, blue links. Brought onto the same
   tokens as the shop: Zilla Slab headings, Public Sans body, mono for labels
   and controls, coral reserved for the live action.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Account: layout
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--jkt-space-3, 40px);
	align-items: start;
}

/* Login/register and the "lost password" screens are single-column. */
.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account .woocommerce:has(> .woocommerce-form-login),
.woocommerce-account .woocommerce:has(> .u-columns) {
	display: block;
	max-width: 520px;
}

/*
 * Placed explicitly rather than by source order. Woo emits a notices wrapper
 * as the first child of .woocommerce, which otherwise takes cell 1 and pushes
 * the navigation and content one cell each — nav ends up wide on the right and
 * the content drops to the row below.
 */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	grid-column: 2;
	grid-row: 1;
}

/* Anything else Woo puts in the wrapper (notices) spans both columns above. */
.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
	grid-row: auto;
}

/* --------------------------------------------------------------------------
   Account: side navigation
   -------------------------------------------------------------------------- */

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

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 2px;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: color .2s ease;
}

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

.woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Account: content, headings and copy
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content li,
.woocommerce-order-details p,
.woocommerce-customer-details p {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-Address-title h2,
.woocommerce-account h2 {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.01em;
	margin: 0 0 var(--jkt-space-2, 24px);
}

.woocommerce-MyAccount-content mark,
.woocommerce-order-details mark {
	background: transparent;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
}

.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
	color: var(--jkt-coral);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover {
	border-bottom-color: var(--jkt-coral);
}

/* --------------------------------------------------------------------------
   Account: tables (orders list, order detail, downloads)
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-content table.shop_table,
.woocommerce-order-details table.shop_table,
table.woocommerce-orders-table {
	width: 100%;
	margin: 0 0 var(--jkt-space-3, 40px);
	background: transparent;
	border: 0;
	border-top: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-order-details table.shop_table th,
table.woocommerce-orders-table th {
	padding: 12px 12px 12px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: left;
}

.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-order-details table.shop_table td,
table.woocommerce-orders-table td {
	padding: 16px 12px 16px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 14px;
	vertical-align: top;
}

/* Order number, totals and dates read as data, not prose. */
.woocommerce-orders-table__cell-order-number a,
.woocommerce-orders-table__cell-order-total,
.woocommerce-orders-table__cell-order-date,
.woocommerce-order-details table.shop_table td.product-total,
.woocommerce-order-details table.shop_table tfoot td {
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.woocommerce-order-details table.shop_table tfoot th {
	padding: 12px 12px 12px 0;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	color: var(--jkt-ice-label);
}

.woocommerce-orders-table__cell-order-status {
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Account: buttons — same treatment as the shop archive CTAs
   -------------------------------------------------------------------------- */

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account form .button,
.woocommerce-EditAccountForm .button,
.woocommerce-address-fields .button,
#update_date,
#orddd_update_delivery_date,
.orddd-update-date-button {
	display: inline-block;
	padding: 16px 32px;
	background-color: var(--jkt-coral);
	border: 1px solid var(--jkt-coral);
	border-radius: 0;
	box-shadow: none;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account form .button:hover,
.woocommerce-EditAccountForm .button:hover,
.woocommerce-address-fields .button:hover,
#update_date:hover,
#orddd_update_delivery_date:hover,
.orddd-update-date-button:hover {
	background-color: var(--jkt-ice);
	border-color: var(--jkt-ice);
	color: #16181c;
}

/* The per-row actions in the orders table are secondary — outline them. */
.woocommerce-orders-table__cell-order-actions .button {
	padding: 10px 18px;
	margin: 0 6px 6px 0;
	background-color: transparent;
	color: var(--jkt-coral);
}

.woocommerce-orders-table__cell-order-actions .button:hover {
	background-color: var(--jkt-coral);
	border-color: var(--jkt-coral);
	color: var(--jkt-white);
}

/* --------------------------------------------------------------------------
   Account: forms (login, register, addresses, account details)
   -------------------------------------------------------------------------- */

.woocommerce form .form-row,
.woocommerce-account .woocommerce-form-row {
	padding: 0;
	margin: 0 0 var(--jkt-space-2, 24px);
}

.woocommerce form .form-row label,
.woocommerce-account label,
.woocommerce-EditAccountForm label {
	display: block;
	margin: 0 0 8px;
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
	width: 100%;
	padding: 14px 16px;
	background-color: rgba(238, 242, 245, .06);
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	box-shadow: none;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	transition: border-color .2s ease;
}

.woocommerce form .form-row input.input-text:hover,
.woocommerce-account input:hover {
	border-color: var(--jkt-hair-strong);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-account input:focus {
	outline: 2px solid var(--jkt-coral);
	outline-offset: 2px;
	border-color: var(--jkt-hair-strong);
}

.woocommerce form .form-row ::placeholder {
	color: rgba(238, 242, 245, .35);
}

.woocommerce-account fieldset {
	margin: var(--jkt-space-3, 40px) 0 0;
	padding: var(--jkt-space-2, 24px) 0 0;
	border: 0;
	border-top: 1px solid var(--jkt-hair-subtle);
}

.woocommerce-account fieldset legend {
	padding: 0;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-size: 18px;
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-privacy-policy-text p,
.woocommerce-account em,
.woocommerce form .form-row .description,
.woocommerce-account span.description {
	color: var(--jkt-ice-fine);
	font-size: 12px;
}

/* Login / register columns. */
.woocommerce-account .woocommerce > .u-columns.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--jkt-space-3, 40px);
}

.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
	float: none;
	width: auto;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	padding: var(--jkt-space-2, 24px);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	margin: 0;
}

/* Addresses screen: two columns of cards. */
/* Raised specificity: Woo's own col2-set floats win over a single-class rule. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jkt-space-3, 40px);
}

/*
 * Placed explicitly. Woo floats these (.u-column1 left, .u-column2 right) at a
 * specificity that survives, and the floats then reorder the grid cells —
 * billing ends up in the right-hand column and shipping drops to a second row.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > div {
	float: none;
	width: auto;
	margin: 0;
	grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > div:nth-child(1) {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > div:nth-child(2) {
	grid-column: 2;
}

/* The title row only needs the link beside the heading, not pushed to the far edge. */
.woocommerce-account .woocommerce-Address-title {
	justify-content: flex-start;
	gap: 18px;
}

.woocommerce-Address address {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	font-style: normal;
	line-height: 1.8;
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 18px;
}

/* --------------------------------------------------------------------------
   Account: notices
   -------------------------------------------------------------------------- */

/* Account notices use the shared hairline treatment above — see Design pass 3. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
	padding: 14px 18px;
	background: transparent;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-color: var(--jkt-coral);
}

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

/* --------------------------------------------------------------------------
   Account: delivery date + reschedule control (ODD Pro)
   ODD renders the date and its "Edit" trigger inside the order detail table.
   -------------------------------------------------------------------------- */

#edit_delivery_date,
a#edit_delivery_date {
	display: inline-block;
	margin-left: 10px;
	color: var(--jkt-coral);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	cursor: pointer;
}

#edit_delivery_date:hover {
	border-bottom-color: var(--jkt-coral);
}

.woocommerce-MyAccount-content .orddd-datepicker-fields,
.woocommerce-MyAccount-content #orddd_delivery_date_field {
	margin: var(--jkt-space-2, 24px) 0 0;
	max-width: 340px;
}

/* --------------------------------------------------------------------------
   Checkout: account creation microcopy
   The block checkout renders its "Create an account" checkbox client-side, so
   the line is attached here rather than hooked in PHP. The classic-checkout
   and register-form equivalents come from the mu-plugin.
   -------------------------------------------------------------------------- */

.jkt-account-microcopy {
	margin: 6px 0 0;
	max-width: 42em;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.wc-block-checkout__create-account .wc-block-components-checkbox__label::after,
.wc-block-checkout__create-account label.wc-block-components-checkbox__label::after {
	content: "Create an account to view and reschedule your deliveries.";
	display: block;
	margin-top: 6px;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-transform: none;
}

/* Blocked-postcode notice, from the mu-plugin's JKT POSTCODE GATE. */
.jkt-no-delivery {
	margin: 0;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 14px;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jkt-space-2, 24px);
	}

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

/* In the register form the line sits above the first field, so it needs the
   gap underneath rather than above. */
.woocommerce form.register .jkt-account-microcopy,
.woocommerce-checkout .jkt-account-microcopy {
	margin: 0 0 18px;
}

/* ODD's reschedule controls carry ids, not classes: #update_date is a bare
   <input type="button"> and #cancel_delivery_date a bare <a>. */
#cancel_delivery_date {
	margin-left: 14px;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

#cancel_delivery_date:hover {
	color: var(--jkt-coral);
	border-bottom-color: var(--jkt-coral);
}

/* --------------------------------------------------------------------------
   Checkout: radio controls (shipping options, payment options)
   -------------------------------------------------------------------------- */

/*
 * WooCommerce Blocks draws these itself: the input is `appearance: none` with
 * a white disc, and the selected dot is a ::before pseudo-element coloured
 * black. `accent-color` alone therefore does nothing to the dot — it only
 * matters if a browser ever falls back to the native control — so both
 * mechanisms are covered here.
 *
 * The unselected state is left as it was: white disc, dark ring, no dot.
 */
.wc-block-components-radio-control__input,
.wc-block-components-checkout input[type="radio"],
.woocommerce input[type="radio"] {
	accent-color: var(--jkt-coral);
}

/*
 * The drawn dot. Woo paints it with `background: currentColor` and leaves the
 * input's own `color` black, so the fix is the colour it inherits from — the
 * explicit ::before rule is scoped through the option label to out-specify
 * Woo's own selector rather than reaching for !important.
 */
.wc-block-components-radio-control__input,
.wc-block-components-radio-control__option .wc-block-components-radio-control__input {
	color: var(--jkt-coral);
}

.wc-block-components-radio-control__option .wc-block-components-radio-control__input::before,
.wc-block-components-radio-control__option .wc-block-components-radio-control__input:checked::before {
	background: var(--jkt-coral);
	border-color: var(--jkt-coral);
}

/* Ring on the selected option, so the dot is not the only cue. */
.wc-block-components-radio-control__input:checked {
	border-color: var(--jkt-coral);
}

/* Hover: warm the ring without moving anything. */
.wc-block-components-radio-control__option:hover .wc-block-components-radio-control__input:not(:checked) {
	border-color: var(--jkt-coral);
}

/*
 * Focus. Browsers default to a blue ring here, which is the one colour on this
 * checkout that belongs to nothing. Coral, offset so it reads as a ring rather
 * than a thickened border.
 */
.wc-block-components-radio-control__input:focus,
.wc-block-components-radio-control__input:focus-visible,
.woocommerce input[type="radio"]:focus-visible {
	outline: 2px solid var(--jkt-coral);
	outline-offset: 2px;
	box-shadow: none;
}

/* Woo also highlights the whole selected row; keep that on the palette. */
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--jkt-hair-strong);
}

/* ==========================================================================
   DESIGN PASS 2 — title rhythm, cart, catalogue imagery
   See BUILD_NOTES.md, "Design pass 2".
   ========================================================================== */

:root {
	/* Space between a page's title block and its first row of content. */
	--jkt-title-gap: 3.5rem;
}

/* --------------------------------------------------------------------------
   Title block rhythm (shop, cart, checkout, account)
   -------------------------------------------------------------------------- */

/*
 * The title block (eyebrow → H1 → standfirst) sat hard against the first
 * content row, and its own internal steps were 0px — the standfirst touched
 * the H1 and the results count touched the grid. The H1 owns the internal
 * rhythm; the gap below is put on the content roots rather than on Oxygen's
 * generated wrappers, whose class names are not stable.
 */
.jkt-shop__title {
	margin: var(--jkt-space-2) 0 var(--jkt-space-2);
}

.jkt-shop__title + p,
*:has(> .jkt-shop__title) + p {
	margin-top: var(--jkt-space-2);
}

/* Archive: the toolbar is the first content row, the grid follows it. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-top: var(--jkt-title-gap);
}

/* Archive with no toolbar above it. */
.woocommerce ul.products:first-child {
	margin-top: var(--jkt-title-gap);
}

/* Account, cart and checkout content roots. */
.woocommerce-account .woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout {
	margin-top: var(--jkt-title-gap);
}

@media (max-width: 767px) {
	:root {
		--jkt-title-gap: 2rem;
	}
}

/* --------------------------------------------------------------------------
   Cart: empty state
   -------------------------------------------------------------------------- */

/*
 * Woo ships a sad-face sprite above "Your cart is currently empty!". It is a
 * background image on the heading and there is no brand-appropriate version of
 * it, so it is removed rather than restyled — the line of type carries it.
 */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wc-block-cart__empty-cart__title::before {
	content: none;
	display: none;
}

.wc-block-cart__empty-cart__title {
	margin: 0 0 var(--jkt-space-3);
	padding: 0;
	color: var(--jkt-white);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-align: left;
}

/* Woo's dotted separator under the empty message — a hairline suits better. */
.woocommerce-cart .wp-block-separator.is-style-dots {
	max-width: none;
	margin: var(--jkt-space-4) 0;
	border: 0;
	border-top: 1px solid var(--jkt-hair-subtle);
	height: 0;
	text-align: left;
}

.woocommerce-cart .wp-block-separator.is-style-dots::before {
	content: none;
}

/*
 * "Return to shop" — the empty cart had no way back to the catalogue.
 * Styled as the archive CTA. The link itself comes from the mu-plugin.
 */
.jkt-empty-cart-actions {
	margin: 0 0 var(--jkt-space-4);
}

.jkt-empty-cart-actions .jkt-btn-shop {
	display: inline-block;
	padding: 16px 32px;
	background-color: var(--jkt-coral);
	border: 1px solid var(--jkt-coral);
	border-radius: 0;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.jkt-empty-cart-actions .jkt-btn-shop:hover {
	background-color: var(--jkt-ice);
	border-color: var(--jkt-ice);
	color: #16181c;
}

/* "New in store" heading, level with the rest of the page. */
.woocommerce-cart .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	color: var(--jkt-white);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 24px;
	text-align: left;
	margin: 0 0 var(--jkt-space-3);
}

/* --------------------------------------------------------------------------
   Cart: "New in store" product grid (block grid, not ul.products)
   -------------------------------------------------------------------------- */

.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jkt-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Woo lays this grid out with flex and puts `flex: 1 0 25%; max-width: 25%` on
 * each item. Inside a CSS grid that 25% resolves against the TRACK, not the
 * row, so every card collapsed to a quarter of its own column (~74px). The
 * flex sizing has to be unset explicitly, at Woo's own specificity.
 */
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product,
.wc-block-grid .wc-block-grid__products li.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0 0 18px;
	align-items: stretch;
	background-color: rgba(238, 242, 245, .06);
	border: 1px solid var(--jkt-hair-subtle);
	text-align: left;
	transition: border-color .2s ease;
}

.wc-block-grid__products li.wc-block-grid__product:hover {
	border-color: var(--jkt-hair-strong);
}

.wc-block-grid__product-link {
	display: block;
	margin: 0;
}

.wc-block-grid__product-image {
	margin: 0;
}

.wc-block-grid__product-image img,
.wc-block-grid__product img {
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--jkt-white);
	border-radius: 0;
}

.wc-block-grid__product-title {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.15;
	padding: 18px 18px 0;
	margin: 0;
	text-align: left;
}

.wc-block-grid__product-price {
	display: block;
	padding: 8px 18px 18px;
	margin: 0;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-align: left;
}

.wc-block-grid__product-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* The dark grey pills become the archive CTA. */
.wc-block-grid__product-add-to-cart {
	margin: auto 18px 0;
	text-align: left;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 14px 18px;
	background-color: var(--jkt-coral);
	border: 1px solid var(--jkt-coral);
	border-radius: 0;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover {
	background-color: var(--jkt-ice);
	border-color: var(--jkt-ice);
	color: #16181c;
}

@media (max-width: 1024px) {
	.wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--jkt-space-2);
	}
}

@media (max-width: 479px) {
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Cart: the full cart (line items, quantity, totals)
   -------------------------------------------------------------------------- */

.wc-block-cart__main {
	padding-right: var(--jkt-space-4);
}

.wc-block-cart-items,
.wc-block-cart-items thead th {
	border: 0;
}

.wc-block-cart-items__header th,
.wc-block-cart-items thead th {
	padding: 0 0 12px;
	background: transparent;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.wc-block-cart-items__row td {
	padding: var(--jkt-space-3) 0;
	background: transparent;
	border-bottom: 1px solid var(--jkt-hair-subtle);
}

.wc-block-cart-item__image img {
	width: 76px;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--jkt-white);
	border-radius: 0;
}

.wc-block-components-product-name {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.2;
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--jkt-coral);
}

.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-product-price {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.wc-block-components-product-metadata,
.wc-block-components-product-details {
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.6;
}

/* Quantity stepper: hairline box, mono figure, coral on hover. */
.wc-block-components-quantity-selector {
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	background: transparent;
	max-width: 132px;
}

.wc-block-components-quantity-selector::after {
	content: none;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	background: transparent;
	border: 0;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	background: transparent;
	border: 0;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 16px;
	line-height: 1;
	transition: color .2s ease;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	color: var(--jkt-coral);
	background: transparent;
}

/* Remove control — a quiet mono label, coral on hover. */
.wc-block-cart-item__remove-link {
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--jkt-coral);
	border-bottom-color: var(--jkt-coral);
}

/* Totals panel. */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block {
	background: rgba(238, 242, 245, .06);
	border: 1px solid var(--jkt-hair-subtle);
	border-radius: 0;
	padding: var(--jkt-space-3);
}

.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.wc-block-components-totals-item__label {
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wc-block-components-totals-item__value {
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--jkt-white);
	font-size: 18px;
}

.wc-block-components-panel__button {
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	background-color: rgba(238, 242, 245, .06);
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
}

/*
 * Delivery pattern on the totals box, so it is visible before checkout rather
 * than only once the customer is in the date field. Attached in CSS for the
 * same reason as the account microcopy — the block renders client-side.
 */
/*
 * One selector only. Both of these exist and one is nested inside the other,
 * so styling both printed the line twice.
 */
.wp-block-woocommerce-proceed-to-checkout-block::after {
	content: "Chilled delivery every Tuesday and Thursday. Order by 3pm, two working days ahead.";
	display: block;
	margin-top: 14px;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Catalogue imagery elsewhere: related products, upsells, single gallery
   -------------------------------------------------------------------------- */

.woocommerce .related ul.products li.product img,
.woocommerce .up-sells ul.products li.product img,
.woocommerce .cross-sells ul.products li.product img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--jkt-white);
}

/*
 * The single product image uses woocommerce_single (900px, uncropped), so it
 * needs no aspect-ratio box — letting it keep its own proportions is correct
 * there. Only the white mat is shared, for the navy graphics.
 */
.woocommerce div.product div.images img {
	background-color: var(--jkt-white);
}

/*
 * Woo centres everything in the block grid (`.wc-block-grid__product` carries
 * text-align: center at a specificity a bare class cannot beat). The archive
 * cards are left-aligned with a full-width CTA, and these sit right under them
 * in the same journey, so they match.
 */
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product,
.woocommerce-cart .wc-block-grid__product-title,
.woocommerce-cart .wc-block-grid__product-price,
.woocommerce-cart .wc-block-grid__product-add-to-cart,
.wc-block-grid .wc-block-grid__products li.wc-block-grid__product {
	text-align: left;
}

/*
 * The Gutenberg button wrapper and the grid's add-to-cart cell are the SAME
 * element — it carries both classes — so a descendant selector matches
 * nothing. It has to be targeted as a compound class.
 */
/*
 * Woo centres the card contents with align-items, which in a column flex
 * container shrink-wraps every child — so the CTA sat at its text width.
 * Stretching it is what makes it span the card like the archive button.
 */
.wc-block-grid__product-add-to-cart.wp-block-button {
	display: block;
	width: auto;
	align-self: stretch;
}

.wc-block-grid__product-add-to-cart.wp-block-button > .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* ==========================================================================
   DESIGN PASS 3 — add-to-cart affordance, quantity lock, notices
   See BUILD_NOTES.md, "Design pass 3".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archive: the "View cart" link Woo appends after an AJAX add
   -------------------------------------------------------------------------- */

/*
 * Woo appends `<a class="added_to_cart wc-forward">View cart</a>` as a sibling
 * of the button, outside the card's padded area — it landed flush against the
 * card edge in the body serif and read as a stray link. Restyled as the
 * secondary partner to the primary CTA: same box, same height, hairline coral
 * instead of a fill.
 *
 * The card is a flex column, so the link needs the same horizontal margins as
 * the button to line up with it rather than sitting proud of the column.
 */
.woocommerce ul.products li.product a.added_to_cart {
	display: block;
	margin: 10px 18px 18px;
	padding: 14px 18px;
	background-color: transparent;
	border: 1px solid var(--jkt-coral);
	border-radius: 0;
	color: var(--jkt-coral);
	font-family: var(--jkt-font-mono);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.woocommerce ul.products li.product a.added_to_cart:hover,
.woocommerce ul.products li.product a.added_to_cart:focus {
	background-color: var(--jkt-coral);
	color: var(--jkt-white);
}

.woocommerce ul.products li.product a.added_to_cart:focus-visible {
	outline: 2px solid var(--jkt-coral);
	outline-offset: 2px;
}

/*
 * The primary button already reserves its own bottom margin. Once the link is
 * appended that would double up, so the button's margin collapses to nothing
 * and the link owns the gap to the card floor.
 */
.woocommerce ul.products li.product a.button.added + a.added_to_cart {
	margin-top: 10px;
}

.woocommerce ul.products li.product a.button.added {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Case-size products: quantity is the dropdown, not a stepper
   -------------------------------------------------------------------------- */

/*
 * With sold-individually on (see the mu-plugin, JKT QUANTITY LOCK) Woo renders
 * the quantity as a hidden input, so the stepper disappears on its own. These
 * rules clear the space it used to occupy: Oxygen wraps the control in its own
 * box, which would otherwise leave a gap beside a now-orphaned button.
 */
.woocommerce div.product form.cart .quantity input[type="hidden"] + .qty,
.woocommerce div.product form.cart .quantity:has(input[type="hidden"]) {
	display: none;
}

.woocommerce div.product form.cart:has(.quantity input[type="hidden"]) .single_add_to_cart_button,
.woocommerce div.product form.cart:has(.quantity input[type="hidden"]) button.single_add_to_cart_button {
	width: 100%;
	max-width: 340px;
	margin-left: 0;
}

/*
 * Bulk enquiry line under the case-size field.
 *
 * form.cart is a flex row (quantity + button on one line), and this paragraph
 * is emitted inside it — so without an explicit full-width basis it becomes a
 * column and shoves the price/add-to-cart panel sideways.
 */
.jkt-bulk-enquiry {
	flex: 0 0 100%;
	width: 100%;
	margin: var(--jkt-space-2) 0 0;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.jkt-bulk-enquiry a {
	color: var(--jkt-coral);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.jkt-bulk-enquiry a:hover {
	border-bottom-color: var(--jkt-coral);
}

/* --------------------------------------------------------------------------
   Notices — the block (Store API) variants
   The classic .woocommerce-message / -info / -error treatment lives in the
   "Notices" section above; these are the block cart/checkout equivalents,
   brought onto the same hairline language.
   -------------------------------------------------------------------------- */

.wc-block-store-notice,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: var(--jkt-space-3);
	margin: 0 0 var(--jkt-space-3);
	padding: 14px 18px;
	background-color: transparent;
	border: 1px solid var(--jkt-hair);
	border-radius: 0;
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Errors take coral; info/success keep the light hairline from the base rule. */
.wc-block-store-notice.is-error,
.wc-block-store-notice.is-warning,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
	border-color: var(--jkt-coral);
}

/* Dismiss control, as a quiet mono glyph. */
.wc-block-components-notice-banner .wc-block-components-button {
	background: transparent;
	border: 0;
	color: var(--jkt-ice-fine);
}

.wc-block-components-notice-banner .wc-block-components-button:hover {
	background: transparent;
	color: var(--jkt-coral);
}

/* The block notices ship an SVG icon; keep it, on-palette and smaller. */
.wc-block-components-notice-banner > svg {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	fill: var(--jkt-ice-body);
}

.wc-block-components-notice-banner.is-error > svg {
	fill: var(--jkt-coral);
}

.wc-block-components-notice-banner__content {
	color: var(--jkt-white);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Inline field validation on the block checkout. */
.wc-block-components-validation-error {
	color: var(--jkt-coral);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: none;
}

@media (max-width: 600px) {
	.wc-block-components-notice-banner {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
}

/* ==========================================================================
   CATEGORY DESCRIPTIONS
   ==========================================================================
   Product category archives print WooCommerce's term description through a
   shortcode element already present in the Oxygen archive template, inside
   .term-description. Nothing styled it, so the copy arrived at browser
   defaults: paragraphs with no margin running into one another, and lines
   spanning the full viewport while the static intro directly above it sits at
   a 54ch measure. Both fixed here.
   ========================================================================== */

.term-description {
	/* Same measure as .jkt-measure on the intro line above it, so the two
	   blocks read as one column rather than two different page widths. */
	max-width: 54ch;
	/* The template's static intro line sits immediately above with no bottom
	   margin of its own, so without this the two run together as one block. */
	margin-top: 14px;
	margin-bottom: var(--jkt-space-2);
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 16px;
	line-height: 1.7;
}

.term-description p {
	margin: 0 0 14px;
}

.term-description p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.term-description { font-size: 15px; }
}

/* Same inline-link treatment for the two places WooCommerce prints our prose:
   the product short description and the category description. Styled by their
   Woo classes rather than by adding markup we would have to maintain. */
.woocommerce-product-details__short-description a,
.term-description a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--jkt-coral);
	text-underline-offset: 3px;
	transition: color .2s ease;
}

.woocommerce-product-details__short-description a:hover,
.term-description a:hover {
	color: var(--jkt-coral);
}


/* ==========================================================================
   Consumer label information — the blocks rendered by
   includes/shop-product-info.php: the chilled/shelf-life flags under the
   product name, the per-pack/per-kg rate under the price, and the Product
   information tab.
   ========================================================================== */

.jkt-pdp-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--jkt-space-2);
	padding: 0;
	list-style: none;
}

.jkt-pdp-flags__item {
	padding: 4px 10px;
	border: 1px solid var(--jkt-hair);
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.jkt-pdp-rate {
	margin: 6px 0 var(--jkt-space-2);
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 13px;
}

/* Woo wraps every figure in .woocommerce-Price-amount; lift just the numbers
   out of the label grey so the rate still reads as a price. */
.jkt-pdp-rate .woocommerce-Price-amount {
	color: var(--jkt-ice-body);
}

.jkt-pdp-rate__sep {
	margin: 0 4px;
	opacity: .5;
}

/* Inside the variation panel the rate sits directly under the resolved price,
   so it needs less air above it than the standalone range does. */
.jkt-pdp-rate--variation {
	margin: 4px 0 0;
}

.jkt-prodinfo {
	display: grid;
	gap: var(--jkt-space-3);
	max-width: 64ch;
}

.jkt-prodinfo__heading {
	margin: 0 0 8px;
	color: var(--jkt-ice);
	font-family: var(--jkt-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.jkt-prodinfo__text {
	margin: 0;
	color: var(--jkt-ice-body);
	font-family: var(--jkt-font-body);
	font-size: 16px;
	line-height: 1.7;
}

.jkt-prodinfo__note {
	margin: 10px 0 0;
	color: var(--jkt-ice-fine);
	font-family: var(--jkt-font-body);
	font-size: 13px;
	line-height: 1.6;
}

/* The nutrition figures are the only tabular data on the site wide enough to
   overflow a phone, so the table scrolls inside its own box rather than
   making the whole page scroll sideways. */
.jkt-prodinfo__tablewrap {
	overflow-x: auto;
}

.jkt-prodinfo__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--jkt-font-body);
	font-size: 15px;
}

.jkt-prodinfo__table th,
.jkt-prodinfo__table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--jkt-hair-subtle);
	color: var(--jkt-ice-body);
	/* Figures line up on the right; the nutrient name stays left. */
	text-align: right;
	white-space: nowrap;
}

.jkt-prodinfo__table th:first-child,
.jkt-prodinfo__table td:first-child {
	text-align: left;
}

.jkt-prodinfo__table thead th {
	border-bottom-color: var(--jkt-hair);
	color: var(--jkt-ice-label);
	font-family: var(--jkt-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.jkt-prodinfo__table tbody th {
	font-weight: 400;
}

.jkt-prodinfo__table tbody tr:last-child th,
.jkt-prodinfo__table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 600px) {
	.jkt-prodinfo__table { font-size: 14px; }
	.jkt-prodinfo__table th,
	.jkt-prodinfo__table td { padding: 7px 10px; }
}