/*
Theme Name: Jonathan Goodding Fine Art
Theme URI: https://gooddingart.com
Author: Jonathan Goodding
Description: A studio-warm theme for Jonathan Goodding Fine Art oil paintings — built for originals and prints, no framework conflicts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
WC tested up to: 9.0
Tags: woocommerce, art, gallery, paintings, prints
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --canvas:      #F0EBE1;
  --canvas-light:#F7F4EF;
  --umber:       #2C2416;
  --umber-mid:   #5A4A32;
  --ochre:       #8B6914;
  --ochre-light: #B8932A;
  --linen:       #C4B49A;
  --linen-light: #DDD3C4;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-primary:   var(--umber);
  --text-secondary: var(--umber-mid);
  --text-muted:     var(--linen);
  --bg:             var(--canvas);
  --bg-card:        var(--canvas-light);
  --border:         var(--linen-light);
  --accent:         var(--ochre);
  --accent-hover:   var(--ochre-light);

  --radius:    4px;
  --radius-lg: 8px;
  --max-w:     1280px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  --transition: 0.25s ease;

  /* Aliases so mockup-derived styles resolve against the theme's tokens */
  --r:  var(--radius);
  --rl: var(--radius-lg);
  --tr: var(--transition);
  --font-d: var(--font-display);
  --font-b: var(--font-body);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--umber);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p { max-width: 68ch; }
p + p { margin-top: 1em; }

.entry-content p,
.entry-content ul,
.entry-content ol { margin-bottom: 1.25em; }

.entry-content ul { list-style: disc; padding-left: 1.5em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.section--sm { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }

/* ============================================================
   BRUSHSTROKE DIVIDER (signature element — used once)
   ============================================================ */
.brushstroke-divider {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 18px;
  overflow: visible;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(240, 235, 225, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 2rem;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: #000;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.site-logo:hover { color: #000; }
.site-logo span { color: inherit; }

/* Primary Nav */
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav a {
  display: block;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.primary-nav a:hover,
.primary-nav .current-menu-item a {
  color: var(--umber);
  background: var(--linen-light);
}

/* Cart Icon */
.header-cart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.header-cart:hover { background: var(--linen-light); color: var(--umber); }
.header-cart svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.cart-count {
  position: absolute;
  top: 0px;
  right: 0px;
  background: var(--ochre);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--umber);
}
.menu-toggle svg { display: block; width: 22px; height: 22px; }

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--canvas-light);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--gutter);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .primary-nav a { padding: 0.65rem 0; font-size: 1rem; border-radius: 0; width: 100%; }
}

/* Keep the header on one line on phones. At desktop size the full wordmark + cart +
   menu button total ~401px, wider than a ~335px phone content area, which pushed the
   menu button off the right edge and gave the whole page a horizontal scroll. Scale
   the logo and tighten the gap so everything fits. */
@media (max-width: 600px) {
  .site-header__inner { gap: 1rem; }
  .site-logo { font-size: 1.2rem; }
}
@media (max-width: 400px) {
  .site-header__inner { gap: 0.75rem; }
  .site-logo { font-size: 1.02rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.site-hero {
  position: relative;
  height: clamp(520px, 80vh, 900px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.site-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.03);
  transition: transform 8s ease;
}
.site-hero.loaded .site-hero__image { transform: scale(1); }

.site-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 36, 22, 0.78) 0%,
    rgba(44, 36, 22, 0.2) 55%,
    rgba(44, 36, 22, 0.04) 100%
  );
}

.site-hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.site-hero__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen);
}

.site-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 1rem;
  max-width: 14ch;
}
.site-hero__title em {
  font-style: italic;
  color: #E8D5A8;
}

.site-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  max-width: 44ch;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero — match the class names used in the front-page.php markup */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 36, 22, 0.85) 0%,
    rgba(44, 36, 22, 0.25) 50%,
    rgba(44, 36, 22, 0.05) 100%
  );
}

/* ============================================================
   Ported from the mockup — classes the template uses that the
   theme stylesheet was missing (writings section, badges, etc.)
   ============================================================ */
.dark-section { background: var(--umber); }

.badge {
  position: absolute; top: .75rem; left: .75rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: .25rem .6rem; border-radius: 2px;
  background: rgba(240, 235, 225, .88); color: var(--umber-mid);
}
.btn-sm { padding: .45rem .9rem; font-size: .78rem; }

.product-card__img { position: relative; overflow: hidden; }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-card__img img { transform: scale(1.04); }
/* Homepage recent-paintings cards.
   Tall slot shows a room/wall mockup — let the image area grow to fill the whole
   (tall) card and cover it, so a vertical mockup fills instead of leaving white space. */
.product-card--wall .product-card__img { flex: 1 1 auto; min-height: 0; aspect-ratio: 3 / 4; }
.product-card--wall .product-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* Keep the copy compact so the wall mockup takes all the remaining height. */
.product-card--wall .product-card__body { flex-grow: 0; }
/* The two shorter cards mat the framed floater mockup — a distinct tone per painting
   (--card-bg set inline), with a touch less vertical padding. */
.product-card--framed .product-card__img { background: var(--card-bg, var(--linen)); padding: 1.3rem 1.75rem; }
.product-card--framed .product-card__img img { object-fit: contain; }

.featured-content h2 { margin: .4rem 0 1rem; }
.featured-content p { color: var(--umber-mid); margin-bottom: 1.25rem; line-height: 1.75; max-width: 42ch; }

/* From the Studio — writings list */
.writings-col {
  max-width: 680px; width: 100%; margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
}
.writings-list { margin-top: 1.75rem; border-top: 1px solid var(--linen-light); }
.writing-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--linen-light);
}
.writing-row a {
  color: var(--umber); font-family: var(--font-d); font-size: 1.1rem;
  font-style: italic; line-height: 1.3; transition: color var(--tr);
}
.writing-row a:hover { color: var(--ochre); }
.writing-date { font-size: .75rem; color: var(--linen); white-space: nowrap; flex-shrink: 0; }
.writings-cta { margin-top: 1.5rem; }

/* ============================================================
   About page (v2) — matches the About mockup. Scoped to .about-v2
   so it never collides with other pages' about and newsletter rules.
   ============================================================ */
.about-v2 .about-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.about-v2 .about-prose { min-width: 0; }
@media (max-width: 768px) { .about-v2 .about-wrap { grid-template-columns: 1fr; } }
.about-v2 .about-prose h1 { margin-bottom: 2rem; }
.about-v2 .about-prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 2.5rem 0 .85rem; padding-top: 1.25rem; color: var(--umber); }
.about-v2 .about-prose h2:first-of-type { margin-top: 0; }
.about-v2 .about-prose p { color: var(--umber-mid); font-size: 1.05rem; line-height: 1.85; max-width: 62ch; margin-bottom: 1.25rem; }
.about-v2 .about-prose p:last-child { margin-bottom: 0; }
.about-v2 .about-prose blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-left: 2px solid var(--linen-light); font-family: var(--font-d); font-style: italic; font-size: 1.15rem; color: var(--umber-mid); line-height: 1.6; }
.about-v2 .about-prose blockquote cite { display: block; margin-top: .4rem; font-style: normal; font-size: .7rem; font-family: var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--linen); }
.about-v2 .about-prose a { color: var(--ochre); text-decoration: underline; text-decoration-color: rgba(139,105,20,.3); text-underline-offset: 3px; }
.about-v2 .about-prose a.btn { color: #fff; text-decoration: none; }
.about-v2 .about-prose a.btn-outline { color: var(--umber); }
.about-v2 .about-cta { margin-top: 2.5rem; }
.about-v2 .about-cta h2 { padding-top: 0; }
.about-v2 .about-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-v2 .about-sidebar { position: sticky; top: calc(64px + 1.5rem); }
@media (max-width: 768px) { .about-v2 .about-sidebar { position: static; } }
.about-v2 .about-photo { border-radius: var(--rl); overflow: hidden; aspect-ratio: 1/1; background: var(--linen-light); margin-bottom: 1.5rem; }
.about-v2 .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-v2 .about-facts { display: flex; flex-direction: column; gap: .75rem; }
.about-v2 .about-fact { display: flex; gap: .65rem; align-items: flex-start; font-size: .85rem; color: var(--umber-mid); }
.about-v2 .about-fact svg { width: 16px; height: 16px; stroke: var(--ochre); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; }
.about-v2 .about-newsletter { background: var(--umber); padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; margin-top: clamp(3rem, 8vw, 5.5rem); }
.about-v2 .about-newsletter .eyebrow { color: var(--linen); display: block; margin-bottom: .5rem; }
.about-v2 .about-newsletter h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: .75rem; }
.about-v2 .about-newsletter h2 em { font-style: italic; color: #E8D5A8; }
.about-v2 .about-newsletter p { color: rgba(240,235,225,.7); max-width: 48ch; margin: 0 auto 1.75rem; font-size: .95rem; line-height: 1.75; }
.about-v2 .about-newsletter .nl-form { display: flex; gap: .75rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.about-v2 .about-newsletter .nl-form input { flex: 1; min-width: 220px; padding: .75rem 1rem; background: rgba(255,255,255,.08); border: 1.5px solid rgba(196,180,154,.3); border-radius: var(--r); color: #fff; font-size: .9rem; font-family: var(--font-b); outline: none; }
.about-v2 .about-newsletter .nl-form input:focus { border-color: var(--ochre); }
.about-v2 .about-newsletter .nl-form input::placeholder { color: rgba(196,180,154,.5); }
.about-v2 .about-nl-note { margin-top: 1rem; font-size: .75rem; color: rgba(196,180,154,.4); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ochre);
  color: #fff;
  border-color: var(--ochre);
}
.btn-primary:hover { background: var(--ochre-light); border-color: var(--ochre-light); color: #fff; box-shadow: 0 4px 14px rgba(139,105,20,0.4); }

/* Floating "Start an Inquiry" CTA (Commissions page). Appears once the hero scrolls
   out of view and hides again when the inquiry form enters the viewport, so the form
   stays one tap away through the long "Commissions I've painted" scroll. */
.commissions-sticky-cta {
  position: fixed;
  z-index: 120;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-b);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 100px;
  background: var(--ochre);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(44, 36, 22, 0.28);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.commissions-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.commissions-sticky-cta:hover { background: var(--ochre-light); color: #fff; box-shadow: 0 10px 30px rgba(139, 105, 20, 0.4); }
.commissions-sticky-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 560px) {
  .commissions-sticky-cta { left: 1rem; right: 1rem; bottom: 1rem; justify-content: center; padding: 1rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .commissions-sticky-cta { transition: opacity 0.2s ease; transform: none; }
}

/* The Gallery renderer carries its own page-level side padding + max-width + centering
   (for the standalone Gallery page). Inside the Commissions .container that double-pads
   and re-centers the grid, so it starts ~24px right of the "Commissions I've painted"
   heading. Neutralize the horizontal chrome here so items align to the same left edge as
   the heading; keep the vertical rhythm. */
.commissions-examples-section .gas-gallery-wrap {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Center this section only — heading + the true-scale rows. The standalone Gallery
   page has no .commissions-examples-section wrapper, so it stays left-aligned. */
.commissions-examples-section .section-header { text-align: center; }
.commissions-examples-section .gas-c-row { justify-content: center; }

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.9); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--umber);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--ochre); color: var(--ochre); background: transparent; }

.btn-dark {
  background: var(--umber);
  color: var(--canvas-light);
  border-color: var(--umber);
}
.btn-dark:hover { background: #3d3020; border-color: #3d3020; color: #fff; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-header--centered { text-align: center; }
.section-header--centered p { margin-left: auto; margin-right: auto; }
.section-header .eyebrow { display: block; margin-bottom: 0.5rem; }
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p { color: var(--text-secondary); font-size: 1.05rem; }

/* ============================================================
   SHOP GRID (asymmetric)
   ============================================================ */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.shop-grid .product-card:first-child {
  grid-row: span 2;
}

@media (max-width: 900px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-grid .product-card:first-child { grid-row: auto; }
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover { box-shadow: 0 8px 32px rgba(44,36,22,0.12); transform: translateY(-2px); }
/* Whole card is clickable via a stretched link on the title. */
.product-card__link { color: inherit; text-decoration: none; }
.product-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }

.product-card__image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--linen-light);
  aspect-ratio: 4/3;
}

.shop-grid .product-card:first-child .product-card__image-wrap {
  aspect-ratio: 3/4;
  height: 100%;
}

.product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-card__image-wrap img { transform: scale(1.04); }

.product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
}
.badge--original { background: var(--ochre); color: #fff; }
.badge--print { background: var(--umber); color: var(--canvas-light); }
.badge--sold { background: var(--linen); color: var(--umber); }

.product-card__body {
  padding: 0.85rem 1rem 0.95rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.product-card__info { min-width: 0; }

.product-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--umber);
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.product-card__meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.product-card__price {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--umber);
  line-height: 1.15;
}
.product-card__price del { font-size: 1rem; color: var(--linen); margin-right: 0.3rem; font-weight: 400; }

/* ============================================================
   FEATURED / STATEMENT SECTION
   ============================================================ */
.featured-work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .featured-work { grid-template-columns: 1fr; }
}

.featured-work__image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 24px 24px 0 var(--linen-light);
}
.featured-work__image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.featured-work__content h2 { margin-bottom: 1.25rem; }
.featured-work__content p { color: var(--text-secondary); margin-bottom: 1.5rem; }
.featured-work__specs { margin: 1.5rem 0; }

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.spec-row:first-child { border-top: 1px solid var(--border); }
.spec-label { color: var(--text-secondary); }
.spec-value { font-weight: 500; color: var(--umber); }

/* ============================================================
   ABOUT STRIP
   ============================================================ */
.about-strip {
  background: var(--umber);
  color: var(--canvas-light);
}
.about-strip .about-inner { display: grid; grid-template-columns: 340px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-strip h2, .about-strip h3 { color: #fff; }
.about-strip p { color: rgba(240,235,225,0.8); }
.about-strip a { color: #E8D5A8; }
.about-strip a:hover { color: #fff; }
.about-strip .about-img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; }
.about-strip .about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-strip .about-signature { font-family: var(--font-d); font-style: italic; font-size: 1.2rem; color: #E8D5A8; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .about-strip .about-inner { grid-template-columns: 1fr; gap: 2rem; }
  .about-strip .about-img { max-width: 320px; }
}

/* ============================================================
   PROCESS / HOW IT WORKS
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.process-step__icon {
  width: 48px;
  height: 48px;
  background: var(--linen-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--ochre);
}
.process-step__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.process-step h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.5rem; }
.process-step p { font-size: 0.9rem; color: var(--text-secondary); max-width: 30ch; }

/* ============================================================
   NEWSLETTER STRIP
   ============================================================ */
.newsletter-strip {
  background: var(--linen-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.newsletter-strip h2 { margin-bottom: 0.5rem; }
.newsletter-strip p { color: var(--text-secondary); margin-bottom: 2rem; margin-left: auto; margin-right: auto; }

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 0.75rem 1rem;
  background: var(--canvas-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--umber);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}
.newsletter-form input[type="email"]:focus { border-color: var(--ochre); }
.newsletter-form input[type="email"]::placeholder { color: var(--linen); }

/* ============================================================
   SITE FOOTER
   ============================================================ */
/* Site-wide newsletter band (sits above the footer on every page) */
.site-newsletter { background: var(--umber); padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; border-bottom: 1px solid rgba(196,180,154,.15); }
.site-newsletter .eyebrow { color: var(--linen); display: block; margin-bottom: .5rem; }
.site-newsletter h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: .75rem; }
.site-newsletter h2 em { font-style: italic; color: #E8D5A8; }
.site-newsletter p { color: rgba(240,235,225,.7); max-width: 48ch; margin: 0 auto 1.75rem; font-size: .95rem; line-height: 1.75; }
.site-newsletter .nl-form { display: flex; gap: .75rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.site-newsletter .nl-form input { flex: 1; min-width: 220px; padding: .75rem 1rem; background: rgba(255,255,255,.08); border: 1.5px solid rgba(196,180,154,.3); border-radius: var(--r); color: #fff; font-size: .9rem; font-family: var(--font-b); outline: none; }
.site-newsletter .nl-form input:focus { border-color: var(--ochre); }
.site-newsletter .nl-form input::placeholder { color: rgba(196,180,154,.5); }
/* Fine-print "Unsubscribe any time." note — small and faint. Scoped under
   .site-newsletter so it beats `.site-newsletter p` (which otherwise forces it to
   .95rem / .7 opacity). */
.site-newsletter .site-nl-note { margin-top: 0.85rem; font-size: 0.68rem; color: rgba(240,235,225,0.38); }

.site-footer {
  background: var(--umber);
  color: rgba(240,235,225,0.7);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-brand .site-logo { font-size: 1.35rem; color: #fff; display: block; margin-bottom: 0.75rem; }
.footer-brand p { font-size: 0.875rem; max-width: 34ch; line-height: 1.6; }

.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col a { color: rgba(240,235,225,0.65); font-size: 0.875rem; transition: color var(--transition); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(196,180,154,0.2);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(240,235,225,0.4);
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */

/* Notices — WooCommerce's stylesheet loads after ours and ties on specificity,
   so !important is needed to pull its green/grey defaults onto the site palette. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-body) !important;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--umber) !important;
  background: var(--canvas-light) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--ochre) !important;
  /* Subtle round on the top corners under the thick border; keep the bottom
     corners on the normal radius. */
  border-radius: 2px 2px var(--radius) var(--radius) !important;
}
.woocommerce-message::before { color: var(--ochre) !important; } /* keep the success check */
/* Info notices ("cart empty", coupon prompt): drop WC's decorative glyph — it
   renders as a stray box and adds nothing. Text-only, with normal padding. */
.woocommerce-info::before { content: none !important; display: none !important; }
.woocommerce-info { padding-left: 1.25rem !important; }
.woocommerce-error { border-top: 3px solid #c0392b !important; }
.woocommerce-error::before { color: #c0392b !important; }
/* Inline notice buttons ("View cart" etc.) → quiet outline, matching the site */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  background: transparent !important;
  color: var(--umber) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 1.05rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  border-color: var(--ochre) !important;
  color: var(--ochre) !important;
  background: transparent !important;
  transform: none;
}

/* Product page */
.woocommerce div.product div.images .woocommerce-product-gallery__image { border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce div.product div.summary { padding-left: clamp(1rem, 3vw, 2rem); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--umber);
}

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

/* Buttons in WC */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--ochre);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--ochre-light);
  color: #fff;
  transform: translateY(-1px);
}

/* Secondary WC buttons (Return to shop, Continue shopping, etc.) default to a
   lavender-grey in WooCommerce's stylesheet, which loads after ours and wins the
   tie — !important pulls them to a clean site outline. More specific per-button
   rules (Update cart, notice buttons) still override this. */
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop a.button,
.woocommerce a.button:not(.alt):not(.checkout-button):not([name]),
.woocommerce button.button:not(.alt):not([name]),
.woocommerce input.button:not(.alt):not([name]) {
  background: transparent !important;
  color: var(--umber) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  /* Match the site's button type: compact, uppercase, 600 (not WC's bold 700). */
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.62rem 1.1rem !important;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce .return-to-shop a.button:hover,
.woocommerce a.button:not(.alt):not(.checkout-button):not([name]):hover,
.woocommerce button.button:not(.alt):not([name]):hover,
.woocommerce input.button:not(.alt):not([name]):hover {
  background: transparent !important;
  border-color: var(--ochre) !important;
  color: var(--ochre) !important;
  transform: none;
}

/* Product loop grid */
.woocommerce ul.products li.product {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.woocommerce ul.products li.product:hover { box-shadow: 0 8px 32px rgba(44,36,22,0.1); transform: translateY(-2px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--umber);
  padding: 0.5rem 1rem 0;
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--umber);
  padding: 0 1rem;
}

/* Cart */
.woocommerce table.cart td, .woocommerce table.cart th {
  border-color: var(--border);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-color: var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  background: var(--bg-card);
  color: var(--umber);
  transition: border-color var(--transition);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--ochre); outline: none; box-shadow: 0 0 0 3px rgba(139,105,20,0.12); }

/* ============================================================
   CART — premium two-column layout (items + sticky summary)
   ============================================================ */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
/* JS wraps the heading + notices + form into .cart-left so the summary (col 2)
   top-aligns with the "Cart" heading rather than the items table. */
.woocommerce-cart .cart-left { grid-column: 1; min-width: 0; }
.woocommerce-cart .cart-left > h1 { margin: 0 0 1.75rem; }
.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  width: 100% !important;
  float: none !important;
  position: sticky;
  top: 2rem;
}
.woocommerce-cart .cart-collaterals .cross-sells { display: none; }

/* Items rendered as cards, not a table. WooCommerce outputs a <table>; we
   re-flow every part with display:block so the layout is robust at ALL widths
   (the 6-column table crushed the image + wrapped titles on narrower screens). */
.woocommerce-cart table.cart,
.woocommerce-cart table.cart tbody,
.woocommerce-cart table.cart tbody tr,
.woocommerce-cart table.cart tbody td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
}
.woocommerce-cart table.cart thead { display: none; } /* column headers make no sense in a card */

.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 168px 1fr;
  column-gap: 1.75rem;
  row-gap: 0.3rem;
  align-items: start;
  position: relative;
  padding: 1.75rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.woocommerce-cart table.cart tr.cart_item:first-child { padding-top: 0.25rem !important; }

/* Thumbnail — left, spanning the detail rows */
.woocommerce-cart td.product-thumbnail {
  grid-column: 1;
  grid-row: 1 / span 5;
}
.woocommerce-cart td.product-thumbnail img {
  /* Render 10% oversized and pull it back with negative margins on all sides,
     so the artwork reads bigger while the layout still reserves the original
     168px footprint (nothing else shifts). Margin % is width-relative, so -5%
     each side absorbs the 10% overflow and keeps it centered. */
  width: 110% !important;
  max-width: 110% !important;
  height: auto;
  margin: -5%;
  display: block;
  background: transparent;
}
/* Framed prints have more built-in whitespace, so bump those 20% (‑10% margins). */
.woocommerce-cart td.product-thumbnail img.gas-cart-thumb--framed {
  width: 120% !important;
  max-width: 120% !important;
  margin: -10%;
}

/* Title + variation */
.woocommerce-cart td.product-name { grid-column: 2; }
.woocommerce-cart td.product-name a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--umber);
}
.woocommerce-cart td.product-name a:hover { color: var(--ochre); }
.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name dl.variation {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.woocommerce-cart td.product-name dl.variation dt { font-weight: 600; float: left; clear: left; margin-right: 0.35rem; }
.woocommerce-cart td.product-name dl.variation dd { margin: 0; }
.woocommerce-cart td.product-name dl.variation dd p { margin: 0; }

/* Price / quantity / subtotal — one labeled line each (labels from data-title) */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-quantity,
.woocommerce-cart td.product-subtotal {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.12rem 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--umber);
}
.woocommerce-cart td.product-price { margin-top: 0.6rem; }
.woocommerce-cart td.product-subtotal { font-weight: 600; }
.woocommerce-cart td.product-price::before,
.woocommerce-cart td.product-quantity::before,
.woocommerce-cart td.product-subtotal::before {
  content: attr(data-title);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Quantity */
.woocommerce-cart td.product-quantity .quantity input.qty {
  width: 66px;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--canvas-light);
  color: var(--umber);
}

/* Remove — top-right corner of the card */
.woocommerce-cart td.product-remove {
  position: absolute;
  top: 1.6rem;
  right: 0;
}

/* Remove — quiet circle that darkens on hover */
.woocommerce-cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* Hide the font "×" (weight + optical centering vary by font); draw our own
     thin, perfectly-centered × via an SVG mask instead. */
  font-size: 0 !important;
  color: transparent !important;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition);
}
.woocommerce-cart td.product-remove a.remove::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--text-secondary);
  transition: background var(--transition);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.woocommerce-cart td.product-remove a.remove:hover {
  background: var(--umber) !important;
  border-color: var(--umber);
}
.woocommerce-cart td.product-remove a.remove:hover::before { background: #fff; }

/* Coupon + update row — one aligned line, compact buttons.
   Uses floats, not flex: display:flex on a <td> strips its table-cell
   behavior and the cell collapses to content width. */
.woocommerce-cart td.actions {
  padding: 1.5rem 0 0 !important;
  border: none !important;
  overflow: hidden; /* contain the floats */
}
.woocommerce-cart td.actions .coupon { float: left; display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.woocommerce-cart td.actions .coupon label { display: none; }
.woocommerce-cart td.actions .coupon input#coupon_code {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--canvas-light);
  color: var(--umber);
  min-width: 170px;
}
/* Both action buttons: compact, same height, quiet outline style. Apply coupon
   sits with the input on the left; Update cart is pushed to the far right and
   stays low-key (it's secondary and usually disabled until a qty change). */
.woocommerce-cart td.actions button[name="apply_coupon"],
.woocommerce-cart td.actions button[name="update_cart"] {
  padding: 0.62rem 1.05rem !important;
  font-size: 0.8rem !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--umber) !important;
  border: 1.5px solid var(--border) !important;
}
.woocommerce-cart td.actions button[name="apply_coupon"] { float: none; }
.woocommerce-cart td.actions button[name="update_cart"] { float: right; }
.woocommerce-cart td.actions button[name="apply_coupon"]:hover,
.woocommerce-cart td.actions button[name="update_cart"]:not(:disabled):hover {
  border-color: var(--ochre) !important;
  color: var(--ochre) !important;
}
.woocommerce-cart td.actions button[name="update_cart"]:disabled { opacity: 0.4; cursor: default; }

/* Coupons are rarely offered, so collapse the field behind a quiet link. JS adds
   .coupon-collapsible; without JS the field stays visible so it's never lost. */
.woocommerce-cart .coupon-toggle {
  float: left;
  background: none !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.woocommerce-cart .coupon-toggle:hover { color: var(--ochre) !important; }
.woocommerce-cart td.actions.coupon-collapsible .coupon { display: none; }
.woocommerce-cart td.actions.coupon-collapsible.coupon-open .coupon { display: flex; }
.woocommerce-cart td.actions.coupon-collapsible.coupon-open .coupon-toggle { display: none; }

/* Summary panel */
.woocommerce-cart .cart_totals {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  box-shadow: 0 12px 44px rgba(44, 36, 22, 0.07);
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--umber);
  margin-bottom: 1.1rem;
}
.woocommerce-cart .cart_totals table { border: none; margin: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  border: none;
  border-top: 1px solid var(--border);
  padding: 0.9rem 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--umber);
}
.woocommerce-cart .cart_totals table tr:first-child th,
.woocommerce-cart .cart_totals table tr:first-child td { border-top: none; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--umber);
}
/* Shipment block — consistent sizing (method a touch larger, meta + link small) */
.woocommerce-cart .cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart .cart_totals #shipping_method li { margin: 0; }
.woocommerce-cart .cart_totals #shipping_method label { font-size: 0.9rem; color: var(--umber); }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 0.8rem; color: var(--text-secondary); margin: 0.4rem 0 0.2rem; }
.woocommerce-cart .cart_totals a.shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ochre);
}
/* Replace WooCommerce's rough icon-font glyph with a crisp pencil (edit) mark */
.woocommerce-cart .cart_totals a.shipping-calculator-button::after { display: none !important; }
.woocommerce-cart .cart_totals a.shipping-calculator-button::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

/* Express checkout (Apple/Google Pay) — kept but de-emphasized under the
   primary button: narrower and centered so it reads as a secondary option.
   No injected label — the wrapper still renders (empty) without a wallet. */
.woocommerce-cart .wcpay-express-checkout-wrapper {
  max-width: 280px;
  margin: 1.4rem auto 0;
}

/* Proceed to checkout — premium dark, no more purple */
.woocommerce-cart .wc-proceed-to-checkout { padding: 1.35rem 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--umber) !important;
  color: var(--canvas-light) !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
  box-shadow: 0 8px 24px rgba(44, 36, 22, 0.22);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover {
  background: #3d3020 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(44, 36, 22, 0.28);
}

/* Trust cues under the summary (added via woocommerce_after_cart_totals) */
.cart-reassure {
  list-style: none !important;
  margin: 1.3rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.6rem;
}
.cart-reassure li {
  list-style: none !important;
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.cart-reassure li::marker { content: ""; }
.cart-reassure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--ochre);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart .cart-collaterals { position: static; grid-column: 1; }
}

/* Mobile tweaks — the card layout is the base above; just tighten it and let
   the coupon/update stack full-width. */
@media (max-width: 600px) {
  .woocommerce-cart table.cart tr.cart_item { grid-template-columns: 104px 1fr; column-gap: 1.1rem; }
  /* keep the 10% oversize + negative-margin bleed from the base rule */
  .woocommerce-cart td.product-name a { font-size: 1.25rem; }

  .woocommerce-cart td.actions .coupon { float: none; flex-wrap: wrap; }
  .woocommerce-cart td.actions .coupon input#coupon_code { flex: 1; }
  .woocommerce-cart td.actions button[name="update_cart"] { float: none !important; width: 100%; margin-top: 0.75rem !important; }
}

/* ============================================================
   CHECKOUT — two-column (form left, sticky summary + payment right).
   JS wraps the parts into .checkout-left / .checkout-right.
   ============================================================ */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.woocommerce-checkout .checkout-left  { grid-column: 1; min-width: 0; }
.woocommerce-checkout .checkout-right { grid-column: 2; position: sticky; top: 2rem; }

/* Section headings */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .checkout-section-heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--umber);
  margin: 0 0 1.25rem;
}
.woocommerce-checkout .checkout-right #order_review_heading { margin-top: 0; }
.woocommerce-checkout .checkout-section-heading { margin-top: 2.25rem; }

/* "Ship to a different address?" is a WooCommerce <h3> — it's a toggle label,
   not a section heading, so keep it small and sans-serif, not big display serif.
   Two IDs so it beats the #customer_details h3 rule above. */
.woocommerce-checkout #customer_details h3#ship-to-different-address {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--umber);
  margin: 0.5rem 0 1rem;
}
/* Align the checkbox with its label text (default baseline sits them off). */
.woocommerce-checkout #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address input.input-checkbox { margin: 0; }

/* Card form: drop WooCommerce's outer grey fieldset box so the Stripe card
   fields aren't double-boxed. */
.woocommerce-checkout #payment fieldset.wc-payment-form {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* WooCommerce floats the billing/shipping columns (col2-set); without clearing,
   the Payment heading floats up beside them. Stack the columns full-width and
   clear before Payment so it sits flush left below the form. */
.woocommerce-checkout .checkout-left { display: flow-root; }
.woocommerce-checkout #customer_details .col2-set .col-1,
.woocommerce-checkout #customer_details .col2-set .col-2 { float: none; width: 100%; }
.woocommerce-checkout .checkout-section-heading,
.woocommerce-checkout #payment { clear: both; }

/* Express checkout — de-emphasized, at the top of the form */
.woocommerce-checkout .wcpay-express-checkout-wrapper { max-width: 340px; margin: 0 0 1.75rem; }

/* Form fields on shared lines instead of one long stack. Flexbox (not grid):
   WooCommerce's floated field rows + a very wide country <select> distorted the
   grid tracks so widths never lined up. Flex-basis math lines every row's left
   and right edges up exactly. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
  flex: 1 1 100%; /* full width by default */
  min-width: 0;
  max-width: none !important; /* WC caps .form-row width, which held the wide rows short of the pairs */
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 0 1rem !important;
}
/* Pairs — two per line (each 50% minus half the gap) */
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #shipping_first_name_field,
.woocommerce-checkout #shipping_last_name_field,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_email_field { flex: 1 1 calc(50% - 0.5rem); }
/* Trio — city / state / zip (each a third minus its share of two gaps) */
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_postcode_field,
.woocommerce-checkout #shipping_city_field,
.woocommerce-checkout #shipping_state_field,
.woocommerce-checkout #shipping_postcode_field { flex: 1 1 calc(33.333% - 0.667rem); }
/* Street address (wider) + apartment/suite share a line */
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #shipping_address_1_field { flex: 1 1 calc(64% - 0.5rem); }
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_2_field { flex: 1 1 calc(36% - 0.5rem); }
/* The apartment field's label is hidden, so bottom-align both inputs. */
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_address_2_field { display: flex; flex-direction: column; justify-content: flex-end; }

.woocommerce-checkout .form-row label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container,
.woocommerce-checkout .form-row .select2-container .select2-selection {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 { margin-top: 0; }

@media (max-width: 640px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row { flex: 1 1 100%; }
}

/* Express checkout not shown at checkout — people pick it on the cart. */
.woocommerce-checkout .wcpay-express-checkout-wrapper,
.woocommerce-checkout .wc-block-components-express-payment,
.woocommerce-checkout #wcpay-express-checkout-wrapper { display: none !important; }

/* US-only store: the country is locked to US (hidden input still submits), so
   hide its leftover label row. */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field { display: none !important; }

/* Redundant Mailchimp opt-in — the newsletter runs on MailPoet, whose opt-in is
   the one we keep. (Better still: deactivate Mailchimp for WooCommerce.) */
.woocommerce-checkout p.mailchimp-newsletter { display: none !important; }

/* Privacy blurb removed (filter empties it) — hide any leftover wrapper. */
.woocommerce-checkout .woocommerce-privacy-policy-text { display: none !important; }

/* Order-summary + payment card */
.woocommerce-checkout #order_review {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 12px 44px rgba(44, 36, 22, 0.07);
}
/* No inner border on the table — the #order_review card is the only box. */
.woocommerce-checkout .woocommerce-checkout-review-order-table { border: none !important; margin: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  border: none;
  border-top: 1px solid var(--border);
  padding: 0.8rem 0;
  color: var(--umber);
  background: transparent;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { border-top: none; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--umber);
}
/* Line-item name: the painting TITLE reads as a bold serif; the variation lines
   (size / finish) de-emphasized in sans so the hierarchy is clear. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--umber);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .product-quantity {
  font-weight: 400;
  color: var(--text-secondary);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .variation,
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0.4rem 0 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation dt { font-weight: 600; }

/* Mobile overflow fixes: keep select2's hidden native <select> from spilling,
   and stop the Stripe card iframes from exceeding the column width. */
.woocommerce-checkout .form-row select.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}
.woocommerce-checkout #payment .StripeElement,
.woocommerce-checkout #payment iframe { max-width: 100% !important; }

/* Payment section — now its own card in the left column (under the form),
   where the card fields have room. Strip WC's tinted method list. */
.woocommerce-checkout .checkout-left #payment {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.75rem !important;
  box-shadow: 0 12px 44px rgba(44, 36, 22, 0.07);
}
.woocommerce-checkout #payment ul.payment_methods {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1rem;
}
.woocommerce-checkout #payment .payment_box { background: var(--canvas) !important; border-radius: var(--radius); }
.woocommerce-checkout #payment .payment_box::before { border-bottom-color: var(--canvas) !important; }

/* Place order — premium dark button, no more purple */
.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  background: var(--umber) !important;
  color: var(--canvas-light) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 1.1rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(44, 36, 22, 0.22);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.woocommerce-checkout #place_order:hover {
  background: #3d3020 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(44, 36, 22, 0.28);
}

/* Coupon toggle at the top — quiet line, not a boxed notice */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  font-size: 0.85rem;
}
/* Revealed coupon form — just the input + button inline, no boxed decoration */
.woocommerce-checkout form.checkout_coupon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 2rem !important;
}
.woocommerce-checkout form.checkout_coupon p.form-row {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}
.woocommerce-checkout form.checkout_coupon .form-row-first { flex: 1 1 auto; }
.woocommerce-checkout form.checkout_coupon #coupon_code { width: 100% !important; }
.woocommerce-checkout form.checkout_coupon .clear { display: none; }
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
  background: transparent !important;
  color: var(--umber) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 0.62rem 1.1rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
  white-space: nowrap;
}
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
  border-color: var(--ochre) !important;
  color: var(--ochre) !important;
}

@media (max-width: 980px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  /* Reset the explicit columns, or grid-column:2 spawns an implicit 2nd column
     and the layout never actually stacks. */
  .woocommerce-checkout .checkout-left,
  .woocommerce-checkout .checkout-right { grid-column: 1 / -1; }
  .woocommerce-checkout .checkout-right { position: static; margin-top: 2rem; }
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb { color: var(--text-secondary); font-size: 0.85rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--ochre); }

/* Star ratings */
.woocommerce .star-rating span::before { color: var(--ochre); }

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--umber); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom-color: var(--border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-color: var(--border); background: var(--bg-card); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--canvas-light); }

/* Sale badge */
.woocommerce span.onsale {
  background: var(--ochre);
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   SINGLE PRODUCT PAGE LAYOUT
   ============================================================ */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .related.products { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}

/* ============================================================
   PAINTING DETAIL META
   ============================================================ */
.painting-meta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.painting-meta__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.painting-meta__row:last-child { border-bottom: none; }
.painting-meta__label { color: var(--text-secondary); }
.painting-meta__value { font-weight: 500; }

/* ============================================================
   TESTIMONIALS / COLLECTOR QUOTES
   ============================================================ */
.quote-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.5rem 1.75rem;
}
.quote-block blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--umber);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.quote-block cite { font-size: 0.8rem; color: var(--text-secondary); font-style: normal; letter-spacing: 0.05em; }

/* ============================================================
   PRINT TYPES SECTION
   ============================================================ */
.print-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.print-type-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: default;
}
.print-type-card:hover { border-color: var(--ochre); box-shadow: 0 4px 20px rgba(139,105,20,0.1); }
.print-type-card h4 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.5rem; }
.print-type-card p { font-size: 0.875rem; color: var(--text-secondary); max-width: 36ch; }
.print-type-card .price-from { margin-top: 1rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--ochre); }

/* ============================================================
   UTILITY
   ============================================================ */
/* ============================================================
   COMMISSIONS PAGE
   ============================================================ */

/* Hero */
.commissions-hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}
.commissions-hero__content h1 {
  margin: 0.4rem 0 1.25rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.commissions-hero__lead {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 54ch;
  margin-bottom: 2rem;
}

.commissions-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .commissions-hero__inner { grid-template-columns: 1fr; }
}
.commissions-hero__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/2;
}
.commissions-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Process steps */
.commissions-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 680px) {
  .commissions-steps { grid-template-columns: 1fr; }
}

.commission-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.commission-step__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--linen-light);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ochre);
  margin-top: 2px;
}
.commission-step__body h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.commission-step__body p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Pricing table */
.commissions-pricing-section {
  background: var(--canvas-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Full-width pricing block: all copy (heading, intro, table, note) in the left
   column; a painting-in-place photo filling the right column, cropped from the left. */
.commissions-pricing-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
}
.commissions-pricing-tablecol { min-width: 0; }
.commissions-pricing-tablecol .section-header { margin-bottom: 1.75rem; }
.commissions-pricing-imgcol {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.commissions-pricing-imgcol img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  object-position: left center; /* crop from the left — keep the painting side */
  display: block;
  border-radius: 2px;
}
/* Inline "form" links (pricing note + How-it-works step 1) that jump to the inquiry form. */
.commission-inline-link {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.commission-inline-link:hover { color: var(--ochre-light); }
.commissions-pricing-caption {
  margin: 0.7rem auto 0;
  max-width: 70%;
  text-align: center;
  font-family: var(--font-d);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--umber-mid);
}
@media (max-width: 768px) {
  .commissions-pricing-cols { grid-template-columns: 1fr; }
  .commissions-pricing-imgcol { min-height: 0; }
  .commissions-pricing-imgcol img { height: 300px; flex: none; }
}
.commissions-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.commissions-pricing-table thead tr {
  border-bottom: 2px solid var(--border);
}
.commissions-pricing-table th {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.65rem 1rem;
  text-align: left;
}
.commissions-pricing-table th:not(:first-child),
.commissions-pricing-table td:not(:first-child) {
  text-align: right;
  padding-left: 1rem;
}
.commissions-pricing-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.commissions-pricing-table tbody tr:last-child { border-bottom: none; }
.commissions-pricing-table tbody tr:hover { background: var(--canvas); }
.commissions-pricing-table td {
  padding: 0.75rem 1rem;
  color: var(--text-primary);
}
.commissions-pricing-table td:first-child {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
}
.commissions-pricing-table td:last-child { color: var(--text-secondary); }
.commissions-pricing-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Example commissions */
.commissions-examples-section {
  background: var(--canvas);
}
/* Grid (not CSS columns) so pieces read left-to-right across the top — newest
   first — instead of stacking top-to-bottom down each column. Natural heights,
   no crop; rows top-align. */
.commissions-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .commissions-examples { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .commissions-examples { grid-template-columns: 1fr; }
}
.commission-example {
  margin: 0;
  min-width: 0;
}
/* True packed masonry: JS distributes items into the shortest column in order,
   so the newest sit along the top AND the columns pack tight (no ragged gaps),
   keeping natural heights / no crop. The grid rules above are the no-JS fallback. */
.commissions-examples.js-masonry { display: flex; align-items: flex-start; gap: 1.25rem; }
.commissions-examples.js-masonry .masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.commission-example img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  background: var(--linen-light);
}
.commission-example figcaption {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--umber-mid);
  text-align: center;
  margin-top: 0.55rem;
}

/* Form section */
.commissions-form-section {
  background: var(--canvas-light);
  border-top: 1px solid var(--border);
}
.commissions-form-wrap {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .commissions-form-wrap { grid-template-columns: 1fr; }
}
.commissions-form-intro h2 { margin: 0.4rem 0 1rem; }
.commissions-form-intro p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.commissions-form-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.commissions-form-detail {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.commissions-form-detail svg {
  width: 18px;
  height: 18px;
  color: var(--ochre);
  flex-shrink: 0;
}

.commissions-form-body {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Placeholder when CF7 not installed */
.commissions-form-placeholder {
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ============================================================
   CONTACT FORM 7 OVERRIDES
   ============================================================ */
.wpcf7-form p {
  margin-bottom: 1.1rem;
}
/* Reference-photo helper text + rights notice */
.wpcf7-form p.cf7-intro { margin-bottom: 0.4rem; color: var(--text-primary); }
.wpcf7-form p.cf7-fineprint { font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary); }
.wpcf7-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--canvas-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--umber);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px rgba(139,105,20,0.1);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--linen); }
.wpcf7-form textarea { resize: vertical; min-height: 110px; }

/* Two-column row for first/last name */
.cf7-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
/* Zero the per-field <p> margins inside the row so both columns start at the same
   top. Otherwise CF7's auto-<p> gives the first field margin-top:0 (first-child) and
   the second field a top margin, dropping the Email column ~16px below Name. */
.cf7-row-two > p { margin: 0; }
@media (max-width: 560px) {
  .cf7-row-two { grid-template-columns: 1fr; }
  .cf7-row-two > p:last-child { margin-top: 1rem; }
}

/* Radio / checkbox groups */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.wpcf7-form .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.wpcf7-form .wpcf7-list-item input[type="radio"],
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ochre);
  cursor: pointer;
  flex-shrink: 0;
}
.wpcf7-form .wpcf7-list-item-label {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* File upload */
.wpcf7-form input[type="file"] {
  padding: 0.6rem 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border: none;
  background: none;
  box-shadow: none;
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 2rem;
  background: var(--ochre);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--ochre-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139,105,20,0.35);
}

/* Validation */
.wpcf7-not-valid-tip {
  font-size: 0.78rem;
  color: #c0392b;
  margin-top: 0.3rem;
  display: block;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

/* Response messages */
.wpcf7-response-output {
  margin-top: 1.25rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  border: 1.5px solid transparent;
}
.wpcf7-mail-sent-ok {
  background: #f0faf5;
  border-color: #27ae60;
  color: #1a6e3d;
}
.wpcf7-mail-sent-ng,
.wpcf7-aborted {
  background: #fdf3f2;
  border-color: #c0392b;
  color: #7b1f14;
}
.wpcf7-spam-blocked {
  background: #fdf8f0;
  border-color: var(--ochre);
  color: var(--umber-mid);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ============================================================
   PAGE HERO (shared)
   ============================================================ */
.page-hero {
  padding: clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3rem);
  border-bottom: 1px solid var(--linen-light);
}
.page-hero h1 {
  margin: .4rem 0 1rem;
  font-size: clamp(2.25rem,5vw,3.5rem);
}
.page-hero p {
  color: var(--umber-mid);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 58ch;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem,5vw,4rem);
  align-items: start;
}
.about-intro__image img {
  border-radius: var(--r);
  width: 100%;
}
.about-placeholder {
  background: var(--linen-light);
  border-radius: var(--r);
  aspect-ratio: 3/4;
}
.about-intro__content p { line-height: 1.85; color: var(--umber-mid); }
.about-intro__content p + p { margin-top: 1.25rem; }

.about-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: start;
}
.about-section__inner h2 {
  font-size: clamp(1.5rem,3vw,2.25rem);
  padding-top: .25rem;
}
.about-section__body p { color: var(--umber-mid); line-height: 1.85; }
.about-section__body p + p { margin-top: 1.1rem; }
.about-section__body a { color: var(--ochre); }

.about-facts {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2rem;
}
.about-fact {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-size: .9rem;
  color: var(--umber-mid);
}
.about-fact__icon {
  font-size: .9rem;
  color: var(--linen);
  width: 1.25rem;
  flex-shrink: 0;
  text-align: center;
}
.about-fact a { color: var(--ochre); }

.about-faith {
  background: var(--umber);
  padding: clamp(3rem,8vw,6rem) 0;
}
.about-faith__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 0 clamp(1.25rem,4vw,2.5rem);
}
.about-faith__inner h2 { color: #fff; font-size: clamp(1.5rem,3.5vw,2.5rem); margin: .5rem 0 .25rem; }
.about-faith__verse { color: var(--linen); font-family: var(--font-d); font-style: italic; font-size: 1rem; margin-bottom: 2rem; }
.about-faith__body { text-align: left; }
.about-faith__body p { color: rgba(240,235,225,.78); line-height: 1.85; }
.about-faith__body p + p { margin-top: 1.1rem; }

.about-connect {
  background: var(--canvas-light, #F7F4EF);
  padding: clamp(3rem,8vw,5.5rem) 0;
  text-align: center;
}
.about-connect h2 { font-size: clamp(1.5rem,3vw,2.25rem); margin: .4rem 0 1rem; }
.about-connect p { color: var(--umber-mid); max-width: 56ch; margin: 0 auto; line-height: 1.8; }
.about-connect a { color: var(--ochre); }

@media (max-width: 768px) {
  .about-intro__grid,
  .about-section__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   EXHIBITIONS PAGE
   ============================================================ */
.current-exhibition {
  background: var(--umber);
  color: var(--canvas-light, #F7F4EF);
}
.current-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
  padding: clamp(3rem,7vw,5rem) 0;
}
.current-content .eyebrow { color: var(--linen); display: block; margin-bottom: .5rem; }
.current-content h2 { color: #fff; margin-bottom: 1.25rem; font-size: clamp(1.5rem,3.5vw,2.5rem); }
.current-content p { color: rgba(240,235,225,.78); line-height: 1.8; margin-bottom: 1rem; max-width: 50ch; }
.current-meta { margin: 1.5rem 0; display: flex; flex-direction: column; gap: .5rem; }
.current-meta-row { display: flex; gap: .75rem; align-items: baseline; font-size: .875rem; }
.current-meta-label { color: rgba(196,180,154,.6); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; min-width: 80px; flex-shrink: 0; }
.current-meta-val { color: rgba(240,235,225,.85); }
.current-painting-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; padding: .6rem 1rem;
  background: rgba(139,105,20,.25); border: 1px solid rgba(139,105,20,.4);
  border-radius: var(--r); font-size: .8rem; color: #E8D5A8;
  text-decoration: none;
}
.current-painting-badge strong { color: #fff; }
.current-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 3/4; background: var(--umber-mid); }
.current-img img { width: 100%; height: 100%; object-fit: cover; }
.btn-ghost-u {
  display: inline-block; background: transparent; color: rgba(240,235,225,.8);
  border: 1.5px solid rgba(196,180,154,.3); border-radius: var(--r);
  padding: .7rem 1.4rem; font-size: .875rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; transition: border-color var(--tr), color var(--tr);
  font-family: var(--font-b); text-decoration: none;
  margin-top: 1.5rem;
}
.btn-ghost-u:hover { border-color: rgba(196,180,154,.7); color: #fff; }

.past-exhibitions { border-top: 1px solid var(--linen-light); }
.solo-list { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }
.solo-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 2rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--linen-light);
}
.solo-card:last-child { border-bottom: none; }
.solo-year { font-family: var(--font-d); font-size: 2.5rem; font-weight: 400; color: var(--linen); line-height: 1; padding-top: .25rem; }
.solo-card__content h3 { font-family: var(--font-d); font-style: italic; font-size: 1.4rem; margin-bottom: .25rem; }
.solo-card__venue { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--umber-mid); margin-bottom: .75rem; }
.solo-card__desc { color: var(--umber-mid); font-size: .95rem; line-height: 1.75; max-width: 60ch; }
.juried-section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--linen-light); }
.juried-list { margin-top: 1.75rem; border-top: 1px solid var(--linen-light); }
.juried-row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 1.5rem;
  align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--linen-light);
}
.juried-year { font-family: var(--font-d); font-size: 1rem; color: var(--linen); }
.juried-content h4 { font-family: var(--font-d); font-style: italic; font-size: 1.1rem; margin-bottom: .15rem; }
.juried-content p { font-size: .82rem; color: var(--umber-mid); }
.juried-venue { font-size: .78rem; color: var(--linen); text-align: right; white-space: nowrap; }

@media (max-width: 900px) {
  .current-inner,
  .solo-card { grid-template-columns: 1fr; }
  .solo-year { font-size: 1.5rem; }
  .juried-row { grid-template-columns: 60px 1fr; }
  .juried-venue { display: none; }
}

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-hero {
  padding: clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3rem);
  border-bottom: 1px solid var(--linen-light);
}
.shop-hero h1 { margin: .4rem 0 1rem; font-size: clamp(2.25rem,5vw,3.5rem); }
.shop-hero__sub {
  color: var(--umber-mid);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 58ch;
}

.shop-section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: end;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linen-light);
  margin-bottom: 0;
}
.shop-section-head h2 { font-size: clamp(1.75rem,4vw,2.75rem); margin: .3rem 0 0; }
.shop-section-head__sub { color: var(--umber-mid); font-size: .9rem; line-height: 1.8; }

/* ORIGINALS — alternating editorial layout */
.originals-list { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); }

.original-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
  padding: clamp(3rem,6vw,5rem) 0;
  border-bottom: 1px solid var(--linen-light);
}
.original-card:last-child { border-bottom: none; }
.original-card--reverse { direction: rtl; }
.original-card--reverse > * { direction: ltr; }

.original-card__image-wrap {
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--linen-light);
  line-height: 0;
  transition: opacity var(--tr);
}
.original-card__image-wrap:hover { opacity: .92; }
.original-card__image-wrap img { width: 100%; height: auto; display: block; }
.original-card__placeholder { aspect-ratio: 4/3; background: var(--linen-light); }

.original-card__content { padding: .5rem 0; }
.original-card__meta-top { margin-bottom: .5rem; }
.original-card__year {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--linen);
}
.original-card__title {
  font-family: var(--font-d);
  font-size: clamp(1.6rem,3vw,2.25rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: .5rem;
}
.original-card__title a { color: var(--umber); text-decoration: none; }
.original-card__title a:hover { color: var(--ochre); }
.original-card__dims {
  font-size: .78rem;
  color: var(--umber-mid);
  letter-spacing: .04em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.original-card__desc {
  color: var(--umber-mid);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  font-family: var(--font-d);
  font-style: italic;
  font-size: 1.05rem;
}
.original-card__footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.original-card__price {
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--umber);
}
.original-card__prints-note {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--umber-mid);
}
.original-card__prints-note a { color: var(--ochre); }

/* INTERLUDE */
.shop-interlude {
  background: var(--umber);
  padding: clamp(3rem,6vw,5rem) 0;
  text-align: center;
}
.shop-interlude__quote {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem,4vw,2.5rem);
}
.shop-interlude__quote p {
  font-family: var(--font-d);
  font-style: italic;
  font-size: clamp(1.25rem,3vw,1.75rem);
  color: rgba(240,235,225,.9);
  line-height: 1.6;
  margin-bottom: .75rem;
}
.shop-interlude__quote cite {
  font-size: .8rem;
  color: var(--linen);
  letter-spacing: .08em;
  font-style: normal;
}

/* PRINTS GRID */
.prints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.print-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--umber);
}
.print-card:hover .print-card__image img { opacity: .88; }
.print-card__image {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--linen-light);
  margin-bottom: 1rem;
  line-height: 0;
}
.print-card__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity var(--tr);
  aspect-ratio: 4/3;
  object-fit: cover;
}
.print-card__placeholder { aspect-ratio: 4/3; background: var(--linen-light); }
.print-card__title {
  font-family: var(--font-d);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: .2rem;
}
.print-card__dims { font-size: .72rem; color: var(--umber-mid); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.print-card__price { font-size: .9rem; color: var(--ochre); font-weight: 500; }

/* COMMISSION CTA */
.shop-commission-cta {
  background: var(--canvas-light, #F7F4EF);
  border-top: 1px solid var(--linen-light);
  padding: clamp(3rem,6vw,5rem) 0;
}
.shop-commission-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.shop-commission-cta h2 { font-size: clamp(1.5rem,3vw,2.25rem); margin: .3rem 0 .75rem; }
.shop-commission-cta p { color: var(--umber-mid); max-width: 50ch; line-height: 1.8; }

@media (max-width: 900px) {
  .shop-section-head { grid-template-columns: 1fr; }
  .original-card,
  .original-card--reverse { grid-template-columns: 1fr; direction: ltr; }
  .original-card__title { font-size: clamp(1.4rem,4vw,1.8rem); }
  .shop-commission-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   HOMEPAGE UPDATES — matching live preview
   ========================================================== */

/* Hero */
.hero-eyebrow{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,180,154,.85);margin-bottom:.75rem}
.hero-title{font-family:var(--font-d);font-size:clamp(2.75rem,7vw,5.25rem);font-weight:400;color:#fff;line-height:1.05;margin-bottom:1rem;max-width:16ch}
.hero-title em{font-style:italic;color:#E8D5A8}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.72);max-width:48ch;line-height:1.65;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* Shop grid */
.shop-cta{text-align:center;margin-top:2.25rem}
.price-original{font-family:var(--font-d);font-size:1.3rem;font-weight:600;color:var(--umber)}
.price-prints{font-size:.75rem;color:var(--umber-mid)}

/* Featured painting — landscape full-bleed layout */
.featured-work.is-landscape{grid-template-columns:1fr;gap:0}
.featured-work.is-landscape .featured-img-wrap{aspect-ratio:unset;box-shadow:none;max-height:none;border-radius:0;margin:0 calc(clamp(1.25rem,4vw,2.5rem) * -1)}
.featured-work.is-landscape .featured-img-wrap img{width:100%;height:auto;object-fit:cover}
.feat-layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:1.25rem 0;align-items:start}
.feat-layout__copy p{color:var(--umber-mid);line-height:1.75;max-width:none;margin:0}
.feat-meta{display:flex;flex-direction:column;gap:.5rem}
.feat-meta__painting,.feat-meta__prints{display:flex;flex-direction:column;gap:.25rem}
.feat-meta__label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--linen)}
.feat-meta__val{font-size:.875rem;color:var(--umber-mid);line-height:1.5}
.feat-meta__price{font-family:var(--font-d);font-size:1.1rem;color:var(--umber);font-weight:500}
.feat-meta__avail{color:var(--ochre)}
.featured-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}

/* About strip — dark */
.about-inner{display:grid;grid-template-columns:340px 1fr;gap:4rem;align-items:center;padding:clamp(3rem,7vw,5.5rem) 0}
.about-img{border-radius:var(--rl);overflow:hidden;aspect-ratio:3/4;background:var(--umber-mid)}
.about-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.about-content .eyebrow{color:var(--linen)}
.about-content h2{color:#fff;margin:.5rem 0 1.25rem;font-size:clamp(1.5rem,3.5vw,2.25rem)}
.about-content p{color:rgba(240,235,225,.78);max-width:54ch;line-height:1.8;margin-bottom:1rem}
.about-verse{margin-top:1.75rem;padding:1.25rem 1.5rem;border-left:2px solid rgba(196,180,154,.35);color:rgba(240,235,225,.6);font-family:var(--font-d);font-style:italic;font-size:1.05rem;line-height:1.6}
.about-verse cite{display:block;margin-top:.4rem;font-style:normal;font-size:.7rem;font-family:var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:rgba(196,180,154,.45)}

/* Prints section */
.prints-section{background:var(--canvas-light);border-top:1px solid var(--linen-light);border-bottom:1px solid var(--linen-light)}
.prints-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.prints-hero__content h2{margin:.4rem 0 1.25rem}
.prints-hero__content p{color:var(--umber-mid);line-height:1.75;margin-bottom:1.25rem}
.collector-copy{max-width:66ch;margin-top:1rem}
.collector-copy p{color:var(--umber-mid);line-height:1.8;margin-bottom:1.15rem}
.collector-copy a{color:var(--ochre);text-decoration:underline;text-underline-offset:2px}
.collector-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.collector-hero{align-items:start}
.collector-media img{width:100%;height:auto;display:block;border-radius:var(--r)}
@media (max-width:900px){ .collector-media{margin-top:1.5rem} }
.fn-star{font-size:.62em;vertical-align:super;line-height:0;margin:0 -0.12em 0 0.04em}
.process-cta{text-align:center;margin-top:2.75rem}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{padding:1.5rem 0;border-top:1px solid var(--linen-light)}
.faq-item:first-child{border-top:none}
.faq-q{font-family:var(--font-d);font-size:1.25rem;color:var(--umber);margin-bottom:.5rem}
.faq-a{color:var(--umber-mid);line-height:1.75;margin:0}
.process-note{max-width:none;margin:2.25rem auto 0;text-align:center;font-family:var(--font-d);font-style:italic;font-size:.95rem;color:var(--umber-mid);line-height:1.6}
.prints-details{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--linen-light)}
.print-detail{display:flex;gap:.75rem;align-items:flex-start}
.print-detail__icon{width:36px;height:36px;background:var(--linen-light);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--umber-mid)}
.print-detail__icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.print-detail__text strong{display:block;font-size:.8rem;font-weight:600;color:var(--umber);margin-bottom:.1rem}
.print-detail__text span{font-size:.8rem;color:var(--umber-mid)}

/* Newsletter — inline block */
.writings-newsletter{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--linen-light)}
.newsletter-col{background:var(--canvas-light);padding:clamp(3rem,8vw,5.5rem) clamp(1.25rem,4vw,3rem);text-align:center}
.newsletter-col p{margin-left:auto;margin-right:auto}
.newsletter-col .nl-form{justify-content:center}
.newsletter-col .eyebrow{display:block;margin-bottom:.5rem}
.newsletter-col h2{font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:1rem}
.newsletter-col h2 em{font-style:italic;color:var(--ochre)}
.newsletter-col p{color:var(--umber-mid);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem;max-width:38ch}
.nl-form{display:flex;flex-direction:column;gap:.75rem}
.nl-form input{width:100%;padding:.75rem 1rem;background:var(--canvas);border:1.5px solid var(--linen-light);border-radius:var(--r);color:var(--umber);font-size:.9rem;font-family:var(--font-b);outline:none;transition:border-color .22s ease}
.nl-form input:focus{border-color:var(--ochre)}
.nl-form input::placeholder{color:var(--linen)}
.nl-note{margin-top:.6rem;font-size:.75rem;color:var(--linen)}

@media(max-width:900px){
  .about-inner{grid-template-columns:1fr;gap:2rem}
  .about-img{max-width:300px}
  .feat-layout{grid-template-columns:1fr}
  .prints-hero{grid-template-columns:1fr}
  .prints-details{grid-template-columns:1fr}
  .writings-newsletter{grid-template-columns:1fr}
  .newsletter-col{border-left:none;border-top:1px solid var(--linen-light)}
}

/* ==========================================================
   SINGLE PRODUCT PAGE
   ========================================================== */

/* Breadcrumb */
.product-breadcrumb{padding:1rem 0;font-size:.75rem;color:var(--linen)}
.product-breadcrumb a{color:var(--umber-mid)}
.product-breadcrumb a:hover{color:var(--ochre)}
.product-breadcrumb span{margin:0 .35rem}

/* Painting stage — full-width, scale(1.18) fill */
.painting-stage{background:var(--canvas);padding:1.5rem 0 0;overflow:visible}
.painting-stage__img{overflow:visible;text-align:center}
/* Mockups are transparent PNGs with a baked-in soft shadow — show the whole
   image, never cropped, and let the shadow render fully. */
.painting-stage__img img{max-width:100%;max-height:82vh;width:auto;height:auto;display:inline-block;border-radius:0;transform:none}
.painting-stage__thumbs{display:flex;flex-wrap:wrap;gap:.6rem;padding:.85rem 0 0;margin:0}
.thumb-btn{width:72px;height:52px;border:2px solid var(--linen-light);border-radius:2px;overflow:hidden;cursor:pointer;padding:0;background:none;transition:border-color var(--tr);flex-shrink:0}
.thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-btn.active{border-color:var(--umber)}
.thumb-btn:hover:not(.active){border-color:var(--umber-mid)}

/* Product layout — image + details (left), sticky purchase box (right) */
.product-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(2rem,5vw,4rem);align-items:start;padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem)}
.product-media{min-width:0}
.product-media .product-details{margin-top:clamp(1.5rem,3vw,2.5rem)}

/* Left — details */
.product-title{font-family:var(--font-d);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:400;line-height:1.1;margin-bottom:.5rem}
.product-meta{display:flex;flex-wrap:wrap;gap:.35rem .75rem;font-size:.78rem;color:var(--umber-mid);margin-bottom:1.5rem}
.product-meta span{display:flex;align-items:center;gap:.3rem}
.product-meta span::before{content:"·";color:var(--linen)}
.product-meta span:first-child::before{display:none}
.product-desc{font-family:var(--font-d);font-style:italic;font-size:1.05rem;line-height:1.8;color:var(--umber-mid);max-width:56ch;padding-left:.9rem;border-left:2px solid var(--linen-light);margin-bottom:2rem}
.product-provenance{margin-top:1.5rem}
.product-provenance h4{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--linen);margin-bottom:.75rem}
.product-provenance ul{display:flex;flex-direction:column;gap:.45rem;list-style:none}
.product-provenance li{font-size:.82rem;color:var(--umber-mid);display:flex;align-items:baseline;gap:.5rem}
.product-provenance li::before{content:"—";color:var(--linen);font-size:.7rem;flex-shrink:0}

/* Right — sticky purchase box */
.purchase-panel{background:var(--canvas);border:1px solid var(--linen-light);border-radius:var(--r);overflow:hidden;position:sticky;top:80px}

/* Panel tabs */
.panel-tabs{display:flex;border-bottom:1px solid var(--linen-light)}
.panel-tab{flex:1;padding:.85rem .5rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-align:center;cursor:pointer;background:none;border:none;font-family:var(--font-b);color:var(--umber-mid);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--tr)}
.panel-tab.active{color:var(--umber);border-bottom-color:var(--umber)}
.panel-tab:hover:not(.active){color:var(--umber);background:var(--linen-light)}

/* Panel body */
.panel-body{padding:1.5rem}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Original tab */
.orig-avail{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ochre);margin-bottom:1.25rem}
.orig-avail::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ochre);flex-shrink:0}
.orig-avail--sold{color:var(--umber-mid)}
.orig-avail--sold::before{background:#C62828} /* gallery red dot — sold */
.orig-avail--onview{color:var(--umber-mid)}
.orig-avail--onview::before{background:var(--ochre)} /* on view at a gallery — active, not sold */
.gas-onview-link{display:inline-flex;margin-top:.5rem}
.orig-price{font-family:var(--font-d);font-size:2rem;font-weight:500;color:var(--umber);margin-bottom:1.5rem}
.orig-unavail-note{font-size:.875rem;color:var(--umber-mid);line-height:1.7}

/* Frame / finish toggle buttons */
.frame-option{margin-bottom:1.25rem}
.frame-option label,.print-finish label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--umber-mid);display:block;margin-bottom:.5rem}
.frame-btns{display:flex;gap:.5rem}
.frame-btn{flex:1;padding:.5rem;font-size:.78rem;font-weight:500;border:1.5px solid var(--linen-light);border-radius:var(--r);background:transparent;color:var(--umber-mid);cursor:pointer;transition:all var(--tr);font-family:var(--font-b);text-align:center}
.frame-btn.active{border-color:var(--umber);color:var(--umber);background:rgba(44,36,22,.04)}
.frame-note{font-size:.72rem;color:var(--umber-mid);margin-top:.5rem}

/* WC single add-to-cart overrides */
.single_add_to_cart_button,.product .single_add_to_cart_button{display:block;width:100%;padding:.9rem;font-size:.9rem;font-weight:600;letter-spacing:.04em;background:var(--umber);color:var(--canvas);border:none;border-radius:var(--r);cursor:pointer;transition:background var(--tr);font-family:var(--font-b);text-align:center;margin-top:1.25rem}
.single_add_to_cart_button:hover{background:#1a1509;color:var(--canvas)}
.btn-buy{display:block;width:100%;padding:.9rem;font-size:.9rem;font-weight:600;letter-spacing:.04em;background:var(--umber);color:var(--canvas);border:none;border-radius:var(--r);cursor:pointer;transition:background var(--tr);font-family:var(--font-b);text-align:center;margin-top:1.25rem}
.btn-buy:hover{background:#1a1509}
.btn-buy:disabled{opacity:.6;cursor:not-allowed}

/* Reassurance list */
.panel-reassure{display:flex;flex-direction:column;gap:.5rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--linen-light)}
.panel-reassure p{font-size:.72rem;color:var(--umber-mid);display:flex;align-items:baseline;gap:.4rem}
.panel-reassure p::before{content:"✓";color:var(--ochre);font-size:.65rem;flex-shrink:0}

/* Prints tab */
.prints-intro{font-size:.82rem;color:var(--umber-mid);line-height:1.7;margin-bottom:1.25rem}
.print-sizes{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.print-size-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;border:1.5px solid var(--linen-light);border-radius:var(--r);cursor:pointer;transition:all var(--tr)}
.print-size-row:hover,.print-size-row.active{border-color:var(--umber);background:rgba(44,36,22,.03)}
.print-size-row__left{display:flex;flex-direction:column;gap:.1rem}
.print-size-label{font-size:.85rem;font-weight:500;color:var(--umber)}
.print-size-sub{font-size:.68rem;color:var(--umber-mid)}
.print-size-price{font-family:var(--font-d);font-size:1.1rem;font-weight:500;color:var(--umber)}
.print-finish{margin-bottom:1.25rem}

/* Related paintings */
.related-paintings{border-top:1px solid var(--linen-light);padding:clamp(2.5rem,5vw,4rem) 0}
.related-paintings h2{font-family:var(--font-d);font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:400;margin-bottom:1.75rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}
.related-card{cursor:pointer;display:block;color:inherit}
.related-card img{width:100%;height:auto;border-radius:2px;transition:opacity var(--tr);margin-bottom:.6rem;aspect-ratio:4/3;object-fit:cover}
.related-card:hover img{opacity:.88}
.related-card__title{font-family:var(--font-d);font-style:italic;font-size:.95rem;color:var(--umber);margin-bottom:.15rem}
.related-card__price{font-size:.75rem;color:var(--ochre);font-weight:500}

@media(max-width:900px){
  .product-layout{grid-template-columns:1fr}
  .purchase-panel{position:static}
  .painting-stage__img img{max-height:60vh}
}