/*
Theme Name: JDH Metalcraft
Theme URI: https://jdhmetalcraft.com
Author: JDH Metalcraft
Description: Bespoke editorial theme for JDH Metalcraft - hand-forged ironwork, sculpture and blacksmithing classes. Classic PHP theme with WooCommerce support, a home page slider, class listings and a gallery. No page builder required.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jdh
Tags: e-commerce, blog, portfolio, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-300: #f0cf9f;
  --color-accent-700: #7a5620;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --neutral-100: #f8f4f4;
  --neutral-300: #d7d3d3;
  --neutral-400: #bab6b6;
  --neutral-500: #9b9797;
  --neutral-700: #605d5d;
  --neutral-900: #2d2b2b;

  /* warm earth accents */
  --ember: oklch(0.52 0.120 36);
  --ember-tint: oklch(0.925 0.045 62);
  --ember-ink: oklch(0.34 0.095 36);
  --patina: oklch(0.60 0.095 80);
  --patina-tint: oklch(0.942 0.052 85);
  --patina-ink: oklch(0.37 0.075 78);
  --iron: oklch(0.38 0.045 55);
  --iron-tint: oklch(0.888 0.026 52);
  --iron-ink: oklch(0.27 0.038 55);

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-heading-weight: 600;

  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --radius-md: 4px;
  --edge: clamp(20px, 5vw, 56px);
  --wrap: 1240px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  text-wrap: pretty; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.14; letter-spacing: -0.012em; margin: 0 0 var(--space-2); }
h1 { font-size: clamp(38px, 5.4vw, 68px); font-weight: 400; line-height: 1.08; }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--ember); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--ember) 25%, transparent); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; background: var(--color-bg); padding: 10px 16px; border: 1px solid var(--neutral-900); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--edge); }
.kicker { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); margin-bottom: 14px; }
.lede { font-size: 16.5px; line-height: 1.7; max-width: 58ch; }
.rule { height: 1px; border: 0; margin: 0; background: var(--color-divider); }
.tnum { font-feature-settings: "tnum" 1; }

/* ============================================================
   3. HEADER / NAV
   ============================================================ */
.site-header { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--edge); border-bottom: 1px solid var(--neutral-900); flex-wrap: wrap; }
.site-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(20px, 2vw, 26px); white-space: nowrap; letter-spacing: 0.02em; color: var(--color-text); text-decoration: none; }
.site-brand:hover { color: var(--color-text); text-decoration: none; }

/* Custom logo. Sized for a square badge mark; a wide wordmark simply scales
   to the same height. The wordmark beside it is optional - hide .site-brand
   in the Customizer if the logo already carries the name. */
.site-header .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.site-header .custom-logo { height: 58px; width: auto; }
@media (max-width: 600px) { .site-header .custom-logo { height: 46px; } }
.brand-lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-lockup:hover { text-decoration: none; }
.main-nav { margin-left: clamp(16px, 3vw, 56px); }
.main-nav ul { display: flex; gap: clamp(12px, 1.6vw, 18.4px); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.main-nav li { position: relative; }

/* Submenus. Opened on hover and on keyboard focus, and on tap via the
   .is-open class set by nav.js - so a parent item with children does not
   navigate away on the first touch. */
.main-nav .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	display: block; flex-direction: column; gap: 0; min-width: 220px; padding: var(--space-2) 0;
	background: var(--color-bg); border: 1px solid var(--color-divider); border-top: 2px solid var(--ember);
	border-radius: var(--radius-md); box-shadow: var(--shadow-md, 0 6px 24px rgba(32, 31, 29, 0.12));
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.main-nav li.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}
.main-nav .sub-menu li { width: 100%; }
.main-nav .sub-menu a { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 4px var(--space-3); font-size: 14.5px; }
.main-nav .sub-menu a:hover { background: color-mix(in srgb, var(--ember) 8%, transparent); text-decoration: none; }
.main-nav .menu-item-has-children > a::after { content: "\203A"; margin-left: 7px; display: inline-block; transform: rotate(90deg); font-size: 14px; line-height: 1; opacity: 0.7; }
.main-nav a { color: var(--color-accent-700); display: inline-flex; align-items: center; min-height: 44px; }
.main-nav .current-menu-item > a, .main-nav .current_page_item > a { color: var(--ember); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
/* Two classes so this beats .btn's display:inline-flex, which is defined
   later in this file at equal specificity. */
.site-header .nav-toggle { display: none; }
@media (max-width: 860px) {
  .site-header .nav-toggle { display: inline-flex; margin-left: auto; }
  .main-nav { flex-basis: 100%; display: none; margin-left: 0; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 12px; padding: 12px 0; }
  /* Submenus sit inline in the mobile drawer rather than floating. */
  .main-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--ember); border-radius: 0;
    min-width: 0; margin: 6px 0 0 14px; padding: 0; background: transparent;
  }
  .main-nav .sub-menu a { padding-left: 14px; }
  .main-nav .menu-item-has-children > a::after { display: none; }
  .header-actions { margin-left: 0; }
}

/* ============================================================
   4. BUTTONS, TAGS, FORMS
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 14px; line-height: 1.2; cursor: pointer; background: transparent; border: 1px solid transparent; padding: 11px calc(var(--space-3) * 1.2); min-height: 44px; border-radius: var(--radius-md); text-decoration: none; transition: background-color 150ms ease; }
.btn:hover { text-decoration: none; }
.btn-primary { border-color: var(--ember); color: var(--ember); }
.btn-primary:hover { background: color-mix(in srgb, var(--ember) 10%, transparent); color: var(--ember); }
.btn-primary:active { background: color-mix(in srgb, var(--ember) 20%, transparent); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-ghost { color: var(--ember); padding-inline: 0; }
.btn-block { width: 100%; }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 3px; background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.tag-ember { background: color-mix(in srgb, var(--ember) 16%, transparent); color: var(--ember-ink); }
.tag-patina { background: color-mix(in srgb, var(--patina) 18%, transparent); color: var(--patina-ink); }
.tag-iron { background: color-mix(in srgb, var(--iron) 14%, transparent); color: var(--iron-ink); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-700); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], select, textarea {
  font-family: var(--font-body); font-size: 14px; color: var(--color-text); background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 10px 12px; min-height: 40px; width: 100%;
  caret-color: var(--ember); text-transform: none; letter-spacing: normal;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ember); }

/* ============================================================
   5. PLATE (image treatment)
   ============================================================ */
.plate { filter: sepia(0.22) saturate(0.82) contrast(1.05); box-sizing: border-box; border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider); display: block; }
.plate img { width: 100%; }

/* ============================================================
   6. HOME SLIDER
   ============================================================ */
.slider { position: relative; margin: clamp(24px, 4vw, 40px) 0 0; }
/* Fixed 1.8 ratio so the frame is the same shape at every width and matches
   the "jdh-slide" crop (1800x1000) exactly - no second crop from object-fit. */
.slider-frame { position: relative; width: 100%; aspect-ratio: 1.8; max-height: 580px; overflow: hidden; background: var(--neutral-900); }
/* Inactive slides stay in the DOM for the crossfade, so they must be taken
   out of the hit-testing and the accessibility tree - otherwise a transparent
   slide sitting on top swallows every click and steals focus. */
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 700ms ease, visibility 0s linear 700ms; }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 700ms ease, visibility 0s; }
.slide a { display: block; width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 40px); pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--neutral-900) 88%, transparent), transparent); }
.slide-kicker { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-300); margin-bottom: 10px; }
.slide-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; color: var(--neutral-100); margin: 0; max-width: 22ch; }
.slider-controls { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.slider-dots { display: flex; gap: 8px; margin-left: 6px; }
.slider-dot { width: 32px; height: 44px; padding: 0; border: 0; cursor: pointer; background: transparent; display: inline-flex; align-items: center; }
.slider-dot::before { content: ""; display: block; width: 100%; height: 3px; background: var(--neutral-400); transition: background-color 150ms ease; }
.slider-dot[aria-current="true"]::before { background: var(--ember); }
.slider-frame { touch-action: pan-y; }
.slider-count { margin-left: auto; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-700); font-feature-settings: "tnum" 1; }

/* ============================================================
   7. SECTIONS & CARDS
   ============================================================ */
.section { padding: 0 0 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.split { display: flex; flex-wrap: wrap; gap: 24px clamp(24px, 5vw, 80px); align-items: center; }

.panel { border-top: 4px solid var(--ember); background: var(--ember-tint); padding: 24px; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 10px; }
.panel-patina { border-top-color: var(--patina); background: var(--patina-tint); }
.panel-iron { border-top-color: var(--iron); background: var(--iron-tint); }

.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: transparent; }
.card-ember { border-left: 3px solid var(--ember); }
.card-patina { border-left: 3px solid var(--patina); }
.card-iron { border-left: 3px solid var(--iron); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; margin: 0; }
.card-meta { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-700); }

.band { margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); padding: clamp(36px, 5vw, 56px) var(--edge); background: var(--ember-tint); border-top: 4px solid var(--ember); }
.band-patina { background: var(--patina-tint); border-top-color: var(--patina); }
.band-iron { background: var(--iron-tint); border-top-color: var(--iron); }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-700); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); font-weight: 400; }
.table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* Sortable headers. The button inherits the th's type so the header still
   reads as a header, not a control bolted onto one. */
.table th:has(.sort-btn) { padding: 0; }
.sort-btn {
	display: flex; align-items: center; gap: 6px; width: 100%;
	font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
	background: transparent; border: 0; cursor: pointer; text-align: inherit;
	padding: var(--space-2); min-height: 40px;
}
.sort-btn:hover { color: var(--ember); }
.table th[style*="right"] .sort-btn { justify-content: flex-end; }
.sort-mark { display: inline-block; width: 8px; opacity: 0; transition: opacity 120ms ease; }
.sort-mark::before { content: "\2191"; }
.sort-btn:hover .sort-mark { opacity: 0.35; }
th[aria-sort="ascending"] .sort-mark { opacity: 1; }
th[aria-sort="ascending"] .sort-mark::before { content: "\2191"; }
th[aria-sort="descending"] .sort-mark { opacity: 1; }
th[aria-sort="descending"] .sort-mark::before { content: "\2193"; }
th[aria-sort="ascending"] .sort-btn, th[aria-sort="descending"] .sort-btn { color: var(--ember); }

details.faq { border-bottom: 1px solid var(--color-divider); padding: 16px 0; }
details.faq > summary { display: flex; gap: 16px; align-items: baseline; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; cursor: pointer; list-style: none; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .mark { color: var(--ember); display: inline-block; transition: transform 200ms ease; }
details.faq[open] .mark { transform: rotate(45deg); }
details.faq > summary > span:last-child { flex: 1; }
details.faq p, details.faq ul, details.faq ol { margin: 12px 0 0 32px; max-width: 62ch; }
details.faq p:last-child { margin-bottom: 0; }

/* Group headings on the FAQ page, and a mark colour per group so the sections
   read apart the way they do in the design. */
.entry h2[data-faq-group] { font-size: 26px; margin: 40px 0 20px; }
.entry h2[data-faq-group="1"] { color: var(--ember-ink); }
.entry h2[data-faq-group="2"] { color: var(--patina-ink); }
.entry h2[data-faq-group="3"] { color: var(--iron-ink); }
.entry h2[data-faq-group]:first-child { margin-top: 0; }
details.faq-g2 .mark { color: var(--patina); }
details.faq-g3 .mark { color: var(--iron); }

/* ============================================================
   8. ENTRY CONTENT
   ============================================================ */
.entry { max-width: 68ch; }
.entry p, .entry li { font-size: 16.5px; line-height: 1.8; }
.entry blockquote { font-family: var(--font-heading); font-size: 24px; line-height: 1.4; border-left: 3px solid var(--ember); margin: 32px 0; padding-left: 24px; }
.entry img { margin: 24px 0; }
.pagination { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0; }
.pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.pagination .current { border-color: var(--ember); color: var(--ember); }

/* ============================================================
   9. FOOTER
   ============================================================ */
.site-footer { background: var(--neutral-900); color: var(--neutral-300); padding: 48px var(--edge) 28px; font-size: 13.5px; }
.site-footer-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 36px clamp(36px, 6vw, 80px); justify-content: space-between; }
.site-footer h2 { font-family: var(--font-heading); font-weight: 400; font-size: 22px; color: var(--neutral-100); margin: 0 0 10px; }
.site-footer .col-label { display: block; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-500); margin-bottom: 11px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer a { color: var(--neutral-300); }
.site-footer a:hover { color: var(--color-accent-300); }
.site-footer-base { max-width: var(--wrap); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--neutral-100) 18%, transparent); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--neutral-400); }

/* ============================================================
   10. WOOCOMMERCE
   ============================================================ */

/* Shop bar: category filters, count, and Woo's sorting select. */
.jdh-shop-bar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 24px 0 8px; }
.jdh-shop-count { margin-left: auto; font-size: 13px; color: var(--neutral-700); }
.woocommerce-ordering select { min-height: 40px; font-size: 14px; }
.woocommerce .woocommerce-result-count { display: none; }

/* The product grid. Columns cap at 380px like the gallery, so a category
   holding one product shows it at card size instead of stretching. */
.woocommerce ul.products {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px; list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	width: auto; max-width: 380px; margin: 0; padding: 0; float: none; text-align: left;
}

/* The plate photograph. */
.jdh-product-figure { position: relative; display: block; width: 100%; }
.jdh-product-figure:hover { text-decoration: none; }
.woocommerce ul.products li.product .plate { display: block; width: 100%; margin: 0; }
.woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; display: block; }
.jdh-product-noimage {
	display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1;
	background: var(--color-surface); color: var(--neutral-700); font-size: 13px;
}
.jdh-product-sale {
	position: absolute; top: 12px; left: 12px;
	background: var(--ember); color: var(--neutral-100);
	font-size: 11px; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 3px;
}

/* Card text. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading); font-weight: var(--font-heading-weight);
	font-size: 20px; line-height: 1.2; margin: 0; padding: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--color-text); text-decoration: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover { color: var(--ember); }
.jdh-product-blurb { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0; }
.woocommerce ul.products li.product .price {
	color: var(--color-text); font-size: 16px; font-weight: 400; margin: 0;
	font-feature-settings: "tnum" 1;
}
.woocommerce ul.products li.product .price del { color: var(--neutral-500); margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Buttons: outlined, per the system - never a solid fill. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce ul.products li.product .button {
	background: transparent; border: 1px solid var(--ember); color: var(--ember);
	font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.2;
	border-radius: var(--radius-md); padding: 11px calc(var(--space-3) * 1.2); min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0; text-transform: none; text-decoration: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce ul.products li.product .button:hover {
	background: color-mix(in srgb, var(--ember) 10%, transparent); color: var(--ember);
}
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background: transparent; border-color: var(--ember); color: var(--ember);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: color-mix(in srgb, var(--ember) 14%, transparent); color: var(--ember);
}
.woocommerce ul.products li.product .added_to_cart { font-size: 13px; }

/* Notices and messages on the theme's surfaces, not Woo's grey. */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
	background: var(--color-surface); border-top-color: var(--ember); color: var(--color-text);
	border-radius: var(--radius-md);
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--ember); }

/* Single product. */
.woocommerce div.product .product_title { font-size: clamp(30px, 4vw, 46px); font-weight: 400; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--color-text); font-size: 22px; font-feature-settings: "tnum" 1;
}
.woocommerce div.product .woocommerce-product-gallery img { border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--color-divider); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
	font-family: var(--font-heading); font-size: 17px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--ember); background: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--color-text); font-weight: 400; }
.woocommerce-breadcrumb { font-size: 13px; color: var(--neutral-700); }
.woocommerce-breadcrumb a { color: var(--color-accent-700); }
.woocommerce span.onsale {
	background: var(--ember); color: var(--neutral-100); border-radius: var(--radius-md);
	min-height: 0; min-width: 0; padding: 4px 12px; line-height: 1.4; font-size: 12px;
}
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--color-divider); border-radius: var(--radius-md);
	padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center;
}
.woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--ember); color: var(--ember); background: transparent; }

/* ============================================================
   11. MOBILE
   ============================================================ */

/* Class table collapses to stacked cards. Each row keeps its semantics;
   the cells are relabelled from data-label so nothing is lost. */
@media (max-width: 720px) {
	.table.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.table.table-stack tr {
		display: block; border: 1px solid var(--color-divider); border-left: 3px solid var(--ember);
		border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px;
	}
	.table.table-stack tr:hover { background: transparent; }
	.table.table-stack td { display: block; border: 0; padding: 0; text-align: left !important; }
	.table.table-stack td + td { margin-top: 10px; }
	.table.table-stack td[data-label]::before {
		content: attr(data-label);
		display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
		color: var(--neutral-700); margin-bottom: 3px;
	}
	.table.table-stack td span { display: flex !important; width: 100%; }
	.table.table-stack td .btn { flex: 1; }
}

@media (max-width: 860px) {
	/* Contact and Commission: the aside carries address, hours and guidance -
	   surface it above a long form rather than a screen below it. */
	.split-aside-first { flex-direction: column; }
	.split-aside-first > aside { order: -1; }
}

@media (max-width: 420px) {
	/* Narrowest phones: let single-column grids use the full gutter width
	   rather than holding a 240px floor that forces horizontal squeeze. */
	.grid-3, .woocommerce ul.products { grid-template-columns: 1fr; }
	.slider-controls { flex-wrap: wrap; }
	.slider-count { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   12. GALLERY
   ============================================================ */

/* Work-type filters. Anchors, not radio labels, so they carry their own
   segmented-control styling rather than borrowing .seg-opt's. */
.gallery-filters {
	display: flex; flex-wrap: wrap; gap: 0;
	border: 1px solid var(--color-divider); border-radius: var(--radius-md);
	overflow: hidden; width: fit-content; max-width: 100%;
}
.gallery-filters .seg-opt {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 0 var(--space-3); font-size: 14px; color: var(--color-text);
	text-decoration: none; border-right: 1px solid var(--color-divider);
	transition: background-color 150ms ease;
}
.gallery-filters .seg-opt:last-child { border-right: 0; }
.gallery-filters .seg-opt:hover { background: color-mix(in srgb, var(--ember) 8%, transparent); color: var(--color-text); text-decoration: none; }
.gallery-filters .seg-opt.is-active { background: color-mix(in srgb, var(--ember) 14%, transparent); color: var(--ember-ink); }

/* The work grid. Columns are capped at 380px and the row is left-aligned, so a
   category holding a single piece shows it at normal plate size instead of
   stretching one column across the full measure. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}
/* The cap belongs on the figure, not the track: capping the track stops
   auto-fit filling the row and leaves dead space at the end. */
.gallery-grid > figure { max-width: 380px; width: 100%; }
@media (max-width: 420px) {
	.gallery-grid { grid-template-columns: 1fr; }
}

/* The intro sits directly above the filter row - drop the trailing paragraph
   margin that otherwise opens a gap beneath it. */
/* The load-more row. Centred under the grid, and hidden entirely once the
   script has exhausted the pages. */
.gallery-more { display: flex; justify-content: center; margin: 40px 0 0; }
.gallery-more[aria-busy="true"] .btn { opacity: 0.5; pointer-events: none; }

.gallery-intro { margin-top: 16px; }
.gallery-intro > *:first-child { margin-top: 0; }
.gallery-intro > *:last-child { margin-bottom: 0; }
.gallery-intro p { max-width: 58ch; }
.gallery-intro p:empty { display: none; }