/* Esther Perez Gallery — component CSS.
   Tokens live in theme.json (exposed as --wp--preset-* vars).
   This file styles components + page sections. */

/* ---------- Self-hosted fonts (no Google request: perf + GDPR) ----------
   Cormorant Garamond 500/600 (display) + Inter (body). latin + latin-ext. */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/CormorantGaramond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/CormorantGaramond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/CormorantGaramond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/CormorantGaramond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Mirror the most-used tokens for legibility in selectors below.
     theme.json owns the values; these are aliases for the spec. */
  --color-bg: var(--wp--preset--color--bg);
  --color-surface: var(--wp--preset--color--surface);
  --color-ink: var(--wp--preset--color--ink);
  --color-ink-muted: var(--wp--preset--color--ink-muted);
  --color-accent: var(--wp--preset--color--accent);
  --color-line: var(--wp--preset--color--line);
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --space-10: 128px; --space-11: 160px; --space-12: 192px;
  --tracking-eyebrow: 0.14em;
  /* ONE display type scale — every Cormorant heading draws from these so sizes
     relate across the whole site (previously 9 ad-hoc sizes → inconsistent). */
  --fs-hero: clamp(2.6rem, 6vw, 4.25rem);            /* homepage hero only */
  --fs-display: clamp(2rem, 3.4vw, 3rem);            /* section / painting-of-month / hire / about / institutions titles */
  --fs-display-sm: clamp(1.5rem, 2.2vw, 1.875rem);   /* sub-sections: use-case, product, cta */
  --fs-title: 1.375rem;                              /* 22px — card / tile titles */
  --shadow-card: 0 1px 2px rgba(28, 26, 23, 0.04), 0 8px 24px rgba(28, 26, 23, 0.06);
  --shadow-modal: 0 24px 64px rgba(28, 26, 23, 0.18), 0 2px 8px rgba(28, 26, 23, 0.08);
  --radius-sm: 2px;
  --radius-lg: 4px;

  /* --- Redesign token layer (6/1) --- */
  --epg-ink-overlay: 28 26 23;          /* warm near-black for scrims/shadows */
  --epg-dur-fast: 140ms; --epg-dur: 240ms; --epg-dur-slow: 480ms;
  --epg-ease: cubic-bezier(.2, .6, .2, 1);
  --epg-ease-out: cubic-bezier(.16, 1, .3, 1);
  --epg-art-ratio: 4 / 5;
  --epg-zoom: 1.05;
  --epg-autoplay: 6500ms;

  /* --- Direction: Deep Navy & Gold (Option B) --- */
  --color-navy: #16243F;
  --color-navy-2: #1E2E4D;
  --color-gold: #C9A24B;
  --color-on-navy: #F4EEE0;
  --color-on-navy-muted: #BFC6D4;

  /* Full-viewport hero height math (one source of truth for header height). */
  --ep-header-h: 178px;
  --hero-pad: clamp(16px, 3vh, 40px);
  --hero-chrome: clamp(72px, 9vh, 100px);   /* reserved bottom zone for the slider controls */
  /* subtract header, top pad, the controls zone, AND the gilt frame's mat+border (~100px)
     so the WHOLE framed painting fits ABOVE the controls — never clipped, never overlapping. */
  --hero-art-h: clamp(280px, calc(100svh - var(--ep-header-h) - var(--hero-pad) - var(--hero-chrome) - 100px), 860px);
}
.admin-bar { --ep-header-h: 210px; }      /* + 32px WP admin bar (desktop) */
@media (max-width: 860px) {
  :root { --ep-header-h: 112px; }         /* mobile header (top bar + brand row; nav is in the drawer) */
  .admin-bar { --ep-header-h: 158px; }    /* + 46px mobile admin bar */
}

/* Drop this class on any section to flip it to the navy/gold ground. It REASSIGNS
   the color tokens locally, so every component inside (buttons, frames, cards,
   slider controls) adopts the dark scheme with no per-component edits. */
.epg-ground-navy {
  --color-bg: var(--color-navy);
  --color-surface: var(--color-navy-2);
  --color-ink: var(--color-on-navy);
  --color-ink-muted: var(--color-on-navy-muted);
  --color-accent: var(--color-gold);
  --color-line: rgba(201, 162, 75, 0.30);
  background: var(--color-navy);
  color: var(--color-on-navy);
}
/* On navy: primary buttons go gold; the painting frame gets a gold mat line;
   slider progress/controls lighten so they read on the dark ground. */
.epg-ground-navy .epg-btn--primary { background: var(--color-gold); color: var(--color-navy); border-color: var(--color-gold); }
.epg-ground-navy .epg-btn--primary:hover { background: #D9B461; color: var(--color-navy); }
.epg-ground-navy .epg-hero__art { border-color: rgba(201, 162, 75, 0.5); box-shadow: 0 28px 70px -18px rgba(0,0,0,0.7); }
.epg-ground-navy .epg-hero-slider__progress { background: rgba(244, 238, 224, 0.18); }
.epg-ground-navy .epg-hero-slider__btn { background: rgba(244, 238, 224, 0.06); }
.epg-ground-navy .epg-hero-slider__btn:hover { background: var(--color-gold); color: var(--color-navy); }

/* Reset noise we don't want from TT5/WC defaults. */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); margin: 0; }
h1 { line-height: 1.05; letter-spacing: -0.005em; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-ink); }

/* Focus rings — visible only for keyboard users, never for mouse clicks.
   Restricted to interactive elements so it can't paint a brass box around
   informational containers (WC notices, etc). */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent); color: var(--color-bg); }

/* ---------- Buttons ---------- */
.epg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--space-6);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--epg-dur) var(--epg-ease), color var(--epg-dur) var(--epg-ease), border-color var(--epg-dur) var(--epg-ease);
}
.epg-btn--primary    { background: var(--color-ink); color: var(--color-bg); }
.epg-btn--primary:hover { background: var(--color-accent); color: var(--color-bg); }
.epg-btn--secondary  { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.epg-btn--secondary:hover { background: var(--color-ink); color: var(--color-bg); }
.epg-btn--ghost {
  background: transparent; color: var(--color-ink);
  padding: 0 var(--space-1); height: auto;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-accent);
  align-self: flex-start;  /* don't stretch in flex-column parents */
  width: max-content;       /* width follows text, not container */
  letter-spacing: 0.04em; text-transform: uppercase;
  padding-bottom: var(--space-1);
}
.epg-btn--ghost:hover { color: var(--color-accent); }

/* ---------- Eyebrow label (small-caps brass) ---------- */
.epg-eyebrow {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-accent); display: inline-block;
}

/* ---------- Header / Nav ---------- */
/* ---------- Top bar (utility row) ---------- */
.epg-topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em;
  opacity: 0.82;   /* recede the utility strip to a hairline — see the gallery first, not the chrome */
}
.epg-topbar:hover, .epg-topbar:focus-within { opacity: 1; }
.epg-topbar__inner {
  max-width: 1440px; margin: 0 auto;
  padding: 6px var(--space-7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.epg-topbar__account { color: var(--color-ink-muted); text-decoration: none; letter-spacing: 0.02em; }
.epg-topbar__account span { color: var(--color-line); margin: 0 2px; }
.epg-topbar__account:hover { color: var(--color-accent); }
.epg-topbar__right { display: flex; align-items: center; gap: var(--space-5); }
.epg-topbar__social { display: inline-flex; align-items: center; gap: var(--space-3); }
.epg-topbar__social a { color: var(--color-ink-muted); display: inline-flex; transition: color var(--epg-dur) var(--epg-ease); }
.epg-topbar__social a:hover { color: var(--color-accent); }
.epg-topbar__social a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.epg-topbar__phone { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink-muted); text-decoration: none; letter-spacing: 0.02em; }
.epg-topbar__phone strong { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.epg-topbar__phone:hover, .epg-topbar__phone:hover strong { color: var(--color-accent); }
.epg-topbar__bh { padding-left: var(--space-4); border-left: 1px solid var(--color-accent); color: var(--color-accent); font-weight: 600; letter-spacing: 0.04em; }

/* ---------- Header: brand row (2) + nav row (3) ---------- */
.epg-nav { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.epg-nav__bar {
  max-width: 1440px; margin: 0 auto;
  padding: var(--space-4) var(--space-7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.epg-nav__logo {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  letter-spacing: 0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; line-height: 1;
}
.epg-nav__logo small {
  display: block; font-family: var(--font-body); font-size: 10px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink-muted); font-weight: 500; margin-top: 2px;
}
.epg-nav__logo-img { max-height: 52px; width: auto; flex: 0 0 auto; }
/* Logo image + brand wordmark sit side by side (image left, "Esther Perez" right). */
.epg-nav__logo-text { display: inline-block; }
.epg-nav__actions { display: flex; align-items: center; gap: var(--space-4); }

/* search */
/* Icon-trigger search: just a magnifier until clicked, then the field expands.
   Cleaner/gallery-grade vs. a persistent "Search…" box. */
.epg-search { display: flex; align-items: center; border-bottom: 1px solid transparent; transition: border-color var(--epg-dur) var(--epg-ease); }
.epg-search.is-open { border-bottom-color: var(--color-line); }
.epg-search.is-open:focus-within { border-bottom-color: var(--color-accent); }
.epg-search input {
  width: 0; opacity: 0; border: 0; background: transparent;
  font-family: var(--font-body); font-size: 14px; color: var(--color-ink); padding: 6px 0;
  transition: width var(--epg-dur) var(--epg-ease), opacity var(--epg-dur) var(--epg-ease), padding var(--epg-dur) var(--epg-ease);
}
.epg-search.is-open input { width: clamp(140px, 16vw, 220px); opacity: 1; padding: 6px 8px 6px 4px; }
.epg-search input::placeholder { color: var(--color-ink-muted); }
.epg-search input:focus { outline: none; }
.epg-search__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; color: var(--color-ink); cursor: pointer; }
.epg-search__btn:hover { color: var(--color-accent); }
.epg-search__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* cart (icon) */
.epg-nav__cart { position: relative; display: inline-flex; align-items: center; color: var(--color-ink); text-decoration: none; }
.epg-nav__cart:hover { color: var(--color-accent); }
.epg-nav__cart:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.epg-nav__cart .epg-cart-count {
  position: absolute; top: -5px; right: -7px; min-width: 14px; height: 14px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-navy);
  font-family: var(--font-body); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 8px; line-height: 1;
}

/* nav links row */
.epg-nav__links {
  display: flex; justify-content: center; align-items: center; gap: var(--space-7);
  padding: var(--space-3) var(--space-7);
  border-top: 1px solid var(--color-line);
}
.epg-nav__link {
  position: relative;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink); text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--epg-dur) var(--epg-ease);
}
.epg-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--epg-dur) var(--epg-ease);
}
.epg-nav__link:hover { color: var(--color-accent); }
.epg-nav__link[aria-current="page"], .epg-nav__link.is-current { color: var(--color-accent); }
.epg-nav__link:hover::after,
.epg-nav__link[aria-current="page"]::after,
.epg-nav__link.is-current::after { transform: scaleX(1); }
.epg-nav__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.epg-nav__link--accent { color: var(--color-accent); }

/* mobile toggle */
.epg-nav__toggle {
  display: none; background: transparent; border: 1px solid var(--color-ink);
  width: 44px; height: 44px; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; border-radius: var(--radius-sm);
}
.epg-nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--color-ink); position: relative; }
.epg-nav__toggle span::before, .epg-nav__toggle span::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--color-ink); }
.epg-nav__toggle span::before { top: -6px; }
.epg-nav__toggle span::after  { top: 6px; }

@media (max-width: 860px) {
  .epg-topbar__inner { padding: 8px var(--space-5); }
  .epg-topbar__account { display: none; }
  .epg-nav__bar { padding: var(--space-3) var(--space-5); }
  .epg-search { display: none; }
  .epg-nav__toggle { display: inline-flex; }
  .epg-nav__links {
    position: fixed; inset: 0; z-index: 49;
    background: var(--color-bg);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 96px var(--space-5) var(--space-6);
    border-top: 0; overflow-y: auto;
    transform: translateX(100%); transition: transform 280ms var(--epg-ease);
  }
  .epg-nav[data-open="true"] .epg-nav__links { transform: translateX(0); }
  .epg-nav__link { font-size: 18px; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); letter-spacing: 0.08em; }
  .epg-nav__link::after { display: none; }
  .epg-nav__link.is-current, .epg-nav__link[aria-current] { padding-left: var(--space-3); border-left: 2px solid var(--color-accent); }
  .epg-nav__logo { font-size: 22px; }
  .epg-nav__logo small { font-size: 9px; }
}
@media (max-width: 480px) {
  .epg-topbar__social { display: none; }
}

/* ---------- Galleries mega-menu ---------- */
.epg-nav__link--galleries { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; cursor: pointer; }
.epg-nav__chev { transition: transform var(--epg-dur) var(--epg-ease); }
.epg-nav__link--galleries[aria-expanded="true"] { color: var(--color-accent); }
.epg-nav__link--galleries[aria-expanded="true"] .epg-nav__chev { transform: rotate(180deg); }

.epg-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-surface);
  border-top: 1px solid var(--color-accent);
  box-shadow: 0 18px 40px rgb(var(--epg-ink-overlay) / 0.12);
  z-index: 60;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--epg-dur) var(--epg-ease), transform var(--epg-dur) var(--epg-ease);
}
.epg-mega[data-open] { opacity: 1; transform: none; pointer-events: auto; }
.epg-mega[hidden] { display: none; }
.epg-mega__inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-7);
  display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: var(--space-7);
}
.epg-mega__col .epg-eyebrow { margin-bottom: var(--space-4); }
.epg-mega__themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.epg-mega__card { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-ink); }
.epg-mega__thumb {
  flex: 0 0 auto; width: 46px; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--color-bg); border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
}
.epg-mega__thumb picture { display: block; width: 100%; height: 100%; }
.epg-mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.epg-mega__label { font-family: var(--font-display); font-size: 20px; line-height: 1.15; transition: color var(--epg-dur) var(--epg-ease); }
.epg-mega__label small { font-family: var(--font-body); font-size: 11px; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; margin-left: 5px; vertical-align: middle; }
.epg-mega__card:hover .epg-mega__label, .epg-mega__card:focus-visible .epg-mega__label { color: var(--color-accent); }
.epg-mega__card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.epg-mega__col--rail { border-left: 1px solid var(--color-line); padding-left: var(--space-7); }
.epg-mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.epg-mega__links a { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.03em; color: var(--color-ink); text-decoration: none; }
.epg-mega__links a:hover { color: var(--color-accent); }

.epg-mega-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgb(var(--epg-ink-overlay) / 0.18);
  opacity: 0; pointer-events: none; transition: opacity var(--epg-dur);
}
.epg-mega-scrim[data-open] { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  /* Inline accordion inside the mobile drawer */
  .epg-mega { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; border-top: 0; background: transparent; }
  .epg-mega__inner { grid-template-columns: 1fr; padding: var(--space-4) 0; gap: var(--space-5); }
  .epg-mega__col--rail { border-left: 0; padding-left: 0; }
  .epg-mega-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .epg-mega { transition: opacity var(--epg-dur) var(--epg-ease); transform: none; }
  .epg-mega[data-open] { transform: none; }
}

/* (Shabbos banner + checkout-block CSS removed with the feature.) */

/* ---------- Hero ---------- */
.epg-hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: var(--space-9);
  padding: var(--space-9) var(--space-7);
  max-width: 1440px; margin: 0 auto;
  border-bottom: 1px solid var(--color-line);
}
.epg-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
/* (Removed dead static-hero rules .epg-hero__eyebrow/__title/__intro — the slider
   uses .epg-eyebrow / .epg-hero__title [below] / .epg-hero__provenance.) */
.epg-hero__ctas { display: flex; gap: var(--space-5); margin-top: var(--space-4); align-items: center; }
.epg-hero__art {
  background: var(--color-surface);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.epg-hero__art img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 900px) {
  .epg-hero { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-7) var(--space-5); }
}

/* =========================================================================
   .epg-frame — reusable museum frame (gilt fillet + mat + hairline + cast
   shadow + glass sheen). Used hero / Painting-of-Month / grid / PDP.
   ========================================================================= */
.epg-frame {
  position: relative;
  display: inline-flex;
  padding: clamp(16px, 2.2vw, 36px);                 /* the mat */
  background: var(--color-surface);                  /* navy-2 on dark, cream on light */
  border: 7px solid transparent;
  border-image: linear-gradient(145deg, #E3C677, #C9A24B 45%, #9A7A33) 1;
  box-shadow: var(--shadow-card);
}
.epg-frame::after {                                  /* faint glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.epg-frame img { display: block; box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.55); }  /* gold hairline fillet */
.epg-frame--hug { width: auto; height: auto; max-width: 100%; }
.epg-frame--hug img { width: auto; height: auto; max-width: 100%; }

/* =========================================================================
   Hero — cinematic single-painting gallery wall (cross-dissolve)
   ========================================================================= */
.epg-hero-slider { position: relative; overflow: hidden; }
/* Sit the navy hero flush under the navy header — kill WordPress's default
   block-gap margin that was revealing a cream strip between the two. */
.epg-hero-slider.epg-ground-navy { margin-block-start: 0; margin-top: 0; }
.epg-hero-slider__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 62% 42%, rgba(201, 162, 75, 0.12), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, #101B30 100%);
}
.epg-hero-slider__stage {
  position: relative; z-index: 1;
  /* FULL-VIEWPORT gallery room — fills the viewport below the header.
     svh avoids the iOS address-bar clip; --ep-header-h handles admin-bar + mobile. */
  min-height: 100vh;                              /* old-browser fallback */
  min-height: calc(100svh - var(--ep-header-h));
}
/* Keep the sticky header below the FIXED admin bar on desktop (logged-in only;
   on mobile WP's admin bar scrolls away, so no offset needed there). */
@media screen and (min-width: 783px) {
  .admin-bar .epg-nav { top: 32px; }
}
.epg-hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1200ms var(--epg-ease);
}
.epg-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Layer A — ambient backdrop: the SAME painting, blurred + navy-graded, fills every
   edge so there's no dead space at any aspect ratio. Blurred so heavily it reads as
   pure atmosphere, never a discernible face. */
.epg-hero-slide__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.14);
  filter: blur(64px) brightness(0.5) saturate(1.1);
}
.epg-hero-slide.is-active .epg-hero-slide__bg { animation: epg-kenburns 18s var(--epg-ease-out) forwards; }
@keyframes epg-kenburns { from { transform: scale(1.14); } to { transform: scale(1.22); } }
/* Layer B — crisp museum lighting (separate element so the gradients aren't blurred) */
.epg-hero-slide__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 68% 60% at 42% 46%, rgba(244, 238, 224, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(22, 36, 63, 0.70), rgba(16, 27, 48, 0.86));
  box-shadow: inset 0 0 240px 90px rgba(11, 18, 33, 0.72);
}

.epg-hero-slider .epg-hero {
  position: relative; z-index: 2;
  border-bottom: 0;
  width: 100%; max-width: 1320px; margin: 0 auto;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--hero-pad) var(--hero-chrome);   /* bottom pad clears the controls */
}
/* Layer C — the whole painting, sharp, height-driven so it commands the viewport;
   object-fit:contain = never cropped (kavod-safe). The sharp canvas never moves. */
.epg-hero-slider .epg-hero__art { justify-self: center; align-self: center; }
/* FIXED museum opening — a constant 4:5 box, pixel-identical size + position on EVERY
   slide (no jump during the cross-dissolve). object-fit:contain + the navy mat absorb
   each painting's slight aspect difference; the whole painting always shows (kavod-safe). */
.epg-hero-slider .epg-hero__art img {
  block-size: var(--hero-art-h);
  inline-size: calc(var(--hero-art-h) * 0.8);   /* 4:5 portrait opening */
  max-block-size: none; max-inline-size: 100%;
  object-fit: contain; object-position: center;
  background: var(--color-surface);              /* mat tone fills any letterbox gutter seamlessly */
}
.epg-hero-slider .epg-frame { padding: clamp(14px, 1.8vw, 28px); }
/* the auction-label caption */
.epg-hero-slider .epg-hero__copy { gap: var(--space-3); }
.epg-hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance;
  color: var(--color-ink); margin: 0;
  font-feature-settings: "liga", "dlig", "onum";
}
.epg-hero__provenance { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-ink); max-width: 46ch; margin: 6px 0 0; opacity: 0.92; }
.epg-hero__meta { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; color: var(--color-ink-muted); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.epg-hero__ctas { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); flex-wrap: wrap; }
.epg-hero__cta { display: inline-flex; align-items: center; gap: 0.6rem; }
.epg-arrow { transition: transform var(--epg-dur) var(--epg-ease); }
.epg-hero__cta:hover .epg-arrow { transform: translateX(4px); }
.epg-hero__ghost {
  position: relative; font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none; padding-bottom: 3px;
}
.epg-hero__ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--epg-dur) var(--epg-ease); }
.epg-hero__ghost:hover::after, .epg-hero__ghost:focus-visible::after { transform: scaleX(1); }

/* chrome — on a plinth, hairline circles + gold timer + counter */
.epg-hero-slider__controls {
  position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 3vh, 2.5rem); z-index: 3;
  display: flex; align-items: center; gap: var(--space-4);
  max-width: 1320px; margin: 0 auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-7));
}
.epg-hero-slider__count { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; color: var(--color-ink); opacity: 0.85; font-variant-numeric: tabular-nums; }
.epg-hero-slider__progress { position: relative; flex: 1 1 auto; max-width: 220px; height: 1px; background: rgba(244, 238, 224, 0.22); overflow: hidden; }
.epg-hero-slider__progress > span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--color-accent); }
.epg-hero-slider.is-playing .epg-hero-slider__progress > span { animation: epg-progress var(--epg-autoplay) linear forwards; }
@keyframes epg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.epg-hero-slider__nav { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.epg-hero-slider__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--color-ink);
  border: 1px solid rgba(244, 238, 224, 0.4); border-radius: 50%;
  cursor: pointer;
  transition: background var(--epg-dur) var(--epg-ease), color var(--epg-dur) var(--epg-ease), border-color var(--epg-dur) var(--epg-ease);
}
.epg-hero-slider__btn:hover { background: var(--color-accent); color: var(--color-navy); border-color: var(--color-accent); }
.epg-hero-slider__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.epg-hero-slider__toggle .epg-icon-play { display: none; }
.epg-hero-slider.is-paused .epg-hero-slider__toggle .epg-icon-pause { display: none; }
.epg-hero-slider.is-paused .epg-hero-slider__toggle .epg-icon-play { display: inline; }

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

/* Skip-to-content link — off-screen until keyboard-focused (a11y / WIG). */
.epg-skip-link {
  position: fixed; top: 0; left: 0; z-index: 1000;
  transform: translateY(-120%);
  background: var(--color-navy); color: var(--color-on-navy, #F4EEE0);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 12px 20px; border-bottom-right-radius: var(--radius-sm);
  text-decoration: none; box-shadow: var(--shadow-modal);
  transition: transform var(--epg-dur) var(--epg-ease);
}
.epg-skip-link:focus-visible,
.epg-skip-link:focus { transform: translateY(0); outline: 2px solid var(--color-accent); outline-offset: 2px; }
:target.epg-page, #epg-main:focus { outline: none; scroll-margin-top: var(--ep-header-h); }
/* The front-page <main> landmark wrapper must not pick up WordPress's default
   top-level block gap (~1.2rem) above the dark hero — that gap shows as a cream
   strip under the navy header. Zero it only on the main that holds the hero. */
main#epg-main:has(.epg-hero-slider) { margin-block-start: 0; }

/* Floating WhatsApp button — on-brand navy/gold (not WhatsApp green), bottom-right. */
.epg-whatsapp {
  position: fixed; z-index: 90;
  right: clamp(16px, 3vw, 28px);
  bottom: max(clamp(16px, 3vw, 28px), env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: #C9A24B; /* brighter navy-gold (button sits on navy, outside the ground-navy context) */
  border: 1px solid rgba(201, 162, 75, 0.45);
  box-shadow: var(--shadow-modal);
  text-decoration: none;
  transition: transform var(--epg-dur) var(--epg-ease), background-color var(--epg-dur) var(--epg-ease), color var(--epg-dur) var(--epg-ease);
}
.epg-whatsapp:hover { transform: translateY(-3px); background: #C9A24B; color: var(--color-navy); }
.epg-whatsapp:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .epg-whatsapp { transition: none; }
  .epg-whatsapp:hover { transform: none; }
}

/* Hide the default reCAPTCHA v3 badge (it collides with the WhatsApp button and is ugly
   on a gallery). Google permits this as long as the attribution text is shown — we put
   that line in the footer (.epg-recaptcha-note). visibility:hidden keeps reCAPTCHA working. */
.grecaptcha-badge { visibility: hidden; }
.epg-recaptcha-note {
  margin: 14px auto 0; padding: 0 clamp(var(--space-5), 5vw, var(--space-7));
  font-family: var(--font-body); font-size: 11px; line-height: 1.5;
  color: rgba(244, 238, 224, 0.45); text-align: center;
}
.epg-recaptcha-note a { color: rgba(244, 238, 224, 0.65); text-decoration: underline; }
.epg-recaptcha-note a:hover { color: #C9A24B; }


@media (max-width: 860px) {
  /* Full-bleed ambient stage on mobile too: painting up top (whole, contain),
     caption below on the navy ground; backdrop + scrim still fill the screen. */
  .epg-hero-slider .epg-hero {
    grid-template-columns: 1fr;       /* art first, then caption */
    align-content: center;
    gap: var(--space-4);
    padding-block: var(--hero-pad) calc(var(--hero-pad) + 56px);
    text-align: left;
  }
  .epg-hero-slider .epg-hero__art img { block-size: clamp(260px, 50svh, 460px); inline-size: calc(clamp(260px, 50svh, 460px) * 0.8); max-block-size: none; }
  /* On mobile, center the arrows directly under the painting (per Jeffrey) and
     drop the progress/count so the nav isn't pushed into the WhatsApp corner. */
  .epg-hero-slider__controls { bottom: var(--space-4); justify-content: center; padding-right: clamp(1.5rem, 4vw, 3.5rem); }
  .epg-hero-slider__nav { margin-left: 0; }
  .epg-hero-slider__count, .epg-hero-slider__progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .epg-hero-slide { transition: opacity 1ms; }
  .epg-hero-slide.is-active .epg-hero-slide__bg { animation: none; transform: scale(1.14); }
  .epg-hero-slider.is-playing .epg-hero-slider__progress > span { animation: none; transform: scaleX(1); }
}

/* ============================================================
   HERO — "THE VIEWING ROOM" (5-expert panel verdict, 6/2).
   ONE darkened gallery wall (no two-column seam, no second ground):
   the painting is HUNG framed + matted under a single top-down light
   cone, and the type floats lower-left as a museum wall-label. The mat
   re-grounds the amateur photo as an object on the wall; museum light +
   vignette forgive imperfect lighting. Painting stays whole (kavod).
   ============================================================ */
.epg-hero-slider.epg-ground-navy { background: #0E1422; }
.epg-hero-slide__bg { filter: blur(74px) brightness(0.34) saturate(1.05); }

/* one continuous wall: a single top-down light cone over the hung work,
   a deep vignette, and a faint floor value-shift for gravity */
.epg-hero-slide__scrim {
  background:
    radial-gradient(ellipse 50% 52% at 64% 4%, rgba(248, 242, 224, 0.20), transparent 56%),
    linear-gradient(180deg, rgba(14, 20, 34, 0) 50%, rgba(3, 6, 12, 0.6) 100%);
  box-shadow: inset 0 0 340px 120px rgba(3, 6, 12, 0.88);
}

.epg-hero-slide { align-items: stretch; }
.epg-hero-slider .epg-hero {
  flex: 1; height: 100%;
  max-width: 1500px; margin: 0 auto; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 0.82fr 1.18fr;   /* placard (left) · hung work (right) */
  align-items: stretch;
  padding: 0 clamp(2rem, 6vw, 5.5rem);
  border-bottom: 0;
}

/* the hung, framed + matted canvas — placed in the RIGHT column under the light cone */
.epg-hero-slider .epg-hero__art {
  grid-column: 2; grid-row: 1;
  justify-self: center; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: visible;
  aspect-ratio: auto;
  transform: translateY(-3vh);                       /* hung slightly high */
  padding: clamp(12px, 1.5vw, 22px);                 /* the cream MAT reveal */
  background: #F4EDDD;
  border: clamp(7px, 0.8vw, 12px) solid #C9A24B;     /* gilt frame */
  border-image: linear-gradient(135deg, #EBD08A 0%, #C9A24B 42%, #8C6B2A 100%) 1;
  box-shadow:
    0 30px 55px -16px rgba(0, 0, 0, 0.72),           /* cast shadow */
    0 80px 70px -56px rgba(0, 0, 0, 0.6);            /* soft contact shadow */
}
.epg-hero-slider .epg-hero__art img {
  display: block; width: auto; height: auto;
  block-size: auto; inline-size: auto;
  max-block-size: min(64vh, calc(100svh - var(--ep-header-h) - 150px));
  max-inline-size: min(38vw, 480px);
  object-fit: contain; background: none;
}

/* the wall-label / placard, floated low-left in the wall's dead air */
.epg-hero-slider .epg-hero__copy {
  grid-column: 1; grid-row: 1;
  justify-content: flex-end;
  padding-bottom: clamp(2.75rem, 12vh, 7.5rem);
  max-width: 42ch; gap: var(--space-3);
}
.epg-hero-slider .epg-hero__title { font-size: clamp(2.15rem, 4.2vw, 3.4rem); line-height: 1.0; }
.epg-hero__rule { display: block; width: 54px; height: 1px; margin: 10px 0 4px; background: linear-gradient(90deg, var(--color-gold), rgba(201,162,75,0)); }
.epg-hero__prov { font-family: var(--font-body); font-style: italic; font-size: 13px; line-height: 1.6; letter-spacing: 0.01em; color: rgba(244, 238, 224, 0.72); margin: 6px 0 0; max-width: 40ch; }

/* CTA hierarchy — ONE dominant gold action + one quiet text link */
.epg-hero-slider .epg-hero__ctas { margin-top: var(--space-5); gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.epg-hero-slider .epg-hero__ctas .epg-btn--primary {
  background: var(--color-gold); color: #1A2236; border: 0; border-radius: 2px;
  padding: 14px 26px; min-height: 0; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px;
  transition: background var(--epg-dur) var(--epg-ease), transform var(--epg-dur) var(--epg-ease);
}
.epg-hero-slider .epg-hero__ctas .epg-btn--primary:hover { background: #D9B45E; color: #1A2236; transform: translateY(-1px); }

.epg-hero-slider__controls { max-width: none; padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
/* Reserve a right gutter so the right slider arrow always clears the fixed
   WhatsApp button (56px + its right offset + a gap). Per Jeffrey 2026-06-08:
   the WhatsApp button was covering the right arrow. */
.epg-hero-slider__controls { padding-right: calc(56px + clamp(16px, 3vw, 28px) + var(--space-4)); }

@media (max-width: 860px) {
  .epg-hero-slide { align-items: center; }
  .epg-hero-slider .epg-hero {
    grid-template-columns: 1fr; gap: var(--space-5);
    height: auto; align-content: center; padding: 0 var(--space-5);
  }
  .epg-hero-slider .epg-hero__art { grid-column: 1; grid-row: auto; transform: none; margin-top: var(--space-6); }
  .epg-hero-slider .epg-hero__art img { max-block-size: 40svh; max-inline-size: 72vw; }
  .epg-hero-slider .epg-hero__copy { grid-column: 1; grid-row: auto; justify-content: flex-start; padding-bottom: var(--space-7); max-width: none; }
  .epg-hero-slide__scrim {
    background:
      radial-gradient(ellipse 82% 38% at 50% 12%, rgba(248, 242, 224, 0.14), transparent 58%),
      linear-gradient(180deg, rgba(14, 20, 34, 0) 46%, rgba(3, 6, 12, 0.62) 100%);
    box-shadow: inset 0 0 160px 60px rgba(3, 6, 12, 0.8);
  }
}

/* ---------- Provenance credential strip (quiet pedigree, gallery register) ---------- */
.epg-credential { background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding: var(--space-5) var(--space-7); }
.epg-credential__line {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-4); max-width: 1100px; margin: 0 auto;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-ink-muted); text-align: center;
}
.epg-credential__line i { color: var(--color-accent); font-style: normal; font-size: 7px; }

/* ---------- Section header ---------- */
.epg-section { padding: clamp(var(--space-8), 8vw, var(--space-10)) var(--space-7); max-width: 1440px; margin: 0 auto; }
.epg-section__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-7);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-line);
}
.epg-section__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display); line-height: 1.1; text-wrap: balance;
}
.epg-section__lead { color: var(--color-ink-muted); max-width: 56ch; font-size: 16px; }
.epg-section__cta { white-space: nowrap; }
@media (max-width: 700px) {
  .epg-section__header { flex-direction: column; align-items: flex-start; }
}

/* ---------- Featured gallery wall ---------- */
.epg-grid {
  display: grid; gap: clamp(var(--space-5), 3vw, var(--space-7));
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (min-width: 1040px) { .epg-grid { grid-template-columns: repeat(4, 1fr); } }
.epg-tile {
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; color: var(--color-ink);
}
/* Museum-matted tile: cream mat + thin frame + soft shadow; lifts on hover and reveals
   gold corner ticks — echoes the hero's gilt frame without 8 heavy gold frames. */
.epg-tile__frame {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: clamp(12px, 1.6vw, 22px);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/5; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--epg-dur) var(--epg-ease), box-shadow var(--epg-dur) var(--epg-ease), border-color var(--epg-dur) var(--epg-ease);
}
.epg-tile__frame img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.30);
  transition: transform 500ms ease-out;
}
/* gold corner ticks (revealed on hover) */
.epg-tile__frame::before, .epg-tile__frame::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1.5px solid var(--color-accent); opacity: 0;
  transition: opacity var(--epg-dur) var(--epg-ease);
}
.epg-tile__frame::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.epg-tile__frame::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.epg-tile__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title);
  color: var(--color-ink); margin: var(--space-2) 0 0 0;
  transition: color var(--epg-dur) var(--epg-ease);
}
.epg-tile__meta {
  font-family: var(--font-body); font-size: 12px; color: var(--color-ink-muted);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.epg-tile__price { font-family: var(--font-body); font-size: 13px; color: var(--color-ink-muted); font-weight: 400; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.epg-tile:hover .epg-tile__frame, .epg-tile:focus-visible .epg-tile__frame {
  transform: translateY(-6px); box-shadow: var(--shadow-modal); border-color: var(--color-accent);
}
.epg-tile:hover .epg-tile__frame::before, .epg-tile:hover .epg-tile__frame::after,
.epg-tile:focus-visible .epg-tile__frame::before, .epg-tile:focus-visible .epg-tile__frame::after { opacity: 1; }
.epg-tile:hover .epg-tile__title { color: var(--color-accent); }
.epg-tile:hover .epg-tile__frame img { transform: scale(1.02); }

/* ---- Discount badges (per-painting sale labels) ---- */
/* Compact corner bubble — top-right so it clears the top-left corner bracket. */
.epg-sale-bubble {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--color-accent); color: #1a1a1f;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.epg-tile__price-was {
  text-decoration: line-through; color: var(--color-ink-muted);
  opacity: 0.6; margin-right: 6px; font-weight: 400;
}
.epg-tile__price-now { font-weight: 500; }
/* Single product page */
.epg-product__price-was {
  text-decoration: line-through; opacity: 0.5; margin-right: 10px;
  font-size: 0.62em; vertical-align: middle; font-weight: 400;
}
.epg-product__price-pct {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--font-body); font-size: 0.42em; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent);
}
.epg-product__discount-reason {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--color-accent); margin: 8px 0 0;
}
.epg-tile:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .epg-tile:hover .epg-tile__frame, .epg-tile:focus-visible .epg-tile__frame { transform: none; }
  .epg-tile:hover .epg-tile__frame img { transform: none; }
}

/* ---------- News / Posts listing — core Query Loop styled into matted gallery cards ---------- */
.epg-news { margin-top: var(--space-6); }
.epg-news .wp-block-post-template {
  display: grid; gap: clamp(var(--space-5), 3vw, var(--space-7));
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0; padding: 0; list-style: none;
  /* WP's constrained layout caps this at contentSize (~729px) → leaves a big right gutter.
     Override so the grid fills the page's content width (matches the title + divider). */
  max-width: none !important; width: 100%;
}
@media (min-width: 980px) { .epg-news .wp-block-post-template { grid-template-columns: repeat(3, 1fr); } }
/* Neutralize WP's flex-layout sizing (it injects width:33% on each item, which would
   shrink to 1/9 inside the grid cell) so each post fills its grid column. */
.epg-news .wp-block-post {
  display: flex; flex-direction: column; gap: var(--space-2); margin: 0;
  width: auto !important; max-width: none !important; flex: initial !important;
}
/* matted featured image — landscape 4:3, whole painting shown (contain → never crops a sacred face) */
.epg-news .wp-block-post-featured-image {
  position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-card);
  transition: transform var(--epg-dur) var(--epg-ease), box-shadow var(--epg-dur) var(--epg-ease), border-color var(--epg-dur) var(--epg-ease);
}
.epg-news .wp-block-post-featured-image a,
.epg-news .wp-block-post-featured-image > img {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  padding: clamp(10px, 1.4vw, 18px); box-sizing: border-box;
}
.epg-news .wp-block-post-featured-image img {
  width: auto !important; height: auto !important; max-width: 100%; max-height: 100%;
  aspect-ratio: auto !important; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.30);
}
.epg-news .wp-block-post-featured-image::before,
.epg-news .wp-block-post-featured-image::after {
  content: ""; position: absolute; width: 12px; height: 12px; z-index: 2;
  border: 1.5px solid var(--color-accent); opacity: 0; transition: opacity var(--epg-dur) var(--epg-ease);
}
.epg-news .wp-block-post-featured-image::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.epg-news .wp-block-post-featured-image::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.epg-news .wp-block-post:hover .wp-block-post-featured-image {
  transform: translateY(-6px); box-shadow: var(--shadow-modal); border-color: var(--color-accent);
}
.epg-news .wp-block-post:hover .wp-block-post-featured-image::before,
.epg-news .wp-block-post:hover .wp-block-post-featured-image::after { opacity: 1; }
/* visual order within the card: image · date · title · excerpt (DOM is image·title·date·excerpt) */
.epg-news .wp-block-post-featured-image { order: 0; }
.epg-news .wp-block-post-date  { order: 1; }
.epg-news .wp-block-post-title { order: 2; }
.epg-news .wp-block-post-excerpt { order: 3; }
/* date — small-caps brass meta, above the title */
.epg-news .wp-block-post-date { margin: 0; }
.epg-news .wp-block-post-date time {
  font-family: var(--font-body); font-size: 12px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-accent);
}
/* title — gallery serif at card scale (not the giant display size) */
.epg-news .wp-block-post-title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title);
  line-height: 1.18; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.epg-news .wp-block-post-title a { color: var(--color-ink); text-decoration: none; transition: color var(--epg-dur) var(--epg-ease); }
.epg-news .wp-block-post:hover .wp-block-post-title a { color: var(--color-accent); }
/* excerpt — muted body, clamped to keep cards even */
.epg-news .wp-block-post-excerpt { margin: var(--space-2) 0 0; }
.epg-news .wp-block-post-excerpt p, .epg-news .wp-block-post-excerpt__excerpt {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--color-ink-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.epg-news .wp-block-post-excerpt__more-text { display: none; }
@media (prefers-reduced-motion: reduce) {
  .epg-news .wp-block-post:hover .wp-block-post-featured-image { transform: none; }
}

/* ---------- Painting of the Month (navy spotlight interlude) ---------- */
.epg-pom { position: relative; overflow: hidden; padding-block: clamp(var(--space-8), 10vh, var(--space-10)); }
.epg-pom::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 56% 60% at 34% 50%, rgba(201, 162, 75, 0.10), transparent 62%);
}
.epg-pom__inner {
  position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-7));
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.epg-pom__art { justify-self: center; }
.epg-pom__art img { max-block-size: clamp(300px, 52vh, 500px); width: auto; height: auto; max-width: 100%; object-fit: contain; }
.epg-pom__index { font-family: var(--font-display); font-size: 18px; color: var(--color-on-navy-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; margin: 0 0 6px; }
.epg-pom__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-ink); margin: 4px 0 0; text-wrap: balance; }
.epg-pom__note { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--color-ink); opacity: 0.92; max-width: 46ch; margin: 14px 0 0; }
.epg-pom__price { font-family: var(--font-body); font-size: 16px; color: var(--color-accent); font-variant-numeric: tabular-nums; margin: 14px 0 0; }
.epg-pom__ctas { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
@media (max-width: 860px) {
  .epg-pom__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .epg-pom__art { order: -1; }
}

/* ---------- Shared forms ---------- */
.epg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.epg-form { max-width: 720px; }
.epg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.epg-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); font-family: var(--font-body); font-size: 13px; color: var(--color-ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.epg-form input, .epg-form select, .epg-form textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--color-ink); text-transform: none; letter-spacing: 0;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.epg-form input:focus, .epg-form select:focus, .epg-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.epg-form__check { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: var(--color-ink); text-transform: none; letter-spacing: 0; margin: var(--space-3) 0; }
.epg-form__check input { width: auto; }
.epg-form__submit { margin-top: var(--space-3); min-height: 56px; }
.epg-form__note { font-size: 14px; color: var(--color-ink-muted); margin-top: var(--space-3); }
.epg-form__note a, .epg-form__success a { color: var(--color-accent); }
.epg-form__success { font-family: var(--font-display); font-size: 22px; line-height: 1.5; color: var(--color-ink); max-width: 56ch; padding: var(--space-5) 0; }
.epg-form__error { color: #9b2226; font-size: 15px; margin-bottom: var(--space-4); }
@media (max-width: 600px) { .epg-form__row { grid-template-columns: 1fr; } }

/* Hide the redundant WP page title ("Hire") on the custom-paintings page — the
   block supplies its own headline. */
body:has(.epg-hire-intro) .epg-page__title { display: none; }

/* ---------- Custom Paintings (commissions) ---------- */
.epg-hire-intro {
  position: relative; overflow: hidden;
  padding-block: clamp(var(--space-8), 9vh, var(--space-10));
  /* break out of the 1100px page content width → full-bleed navy band like the hero */
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* Sit the full-bleed band flush under the header: zero the page's top spacing at the
   source (main padding/margin + content margin) on the Custom Paintings page only. */
body:has(.epg-hire-intro) main.epg-page { margin-top: 0 !important; padding-top: 0 !important; }
/* lift the 1100px page-content cap on this page so the hire sections use the site's
   1440 .epg-section standard (matches the homepage; trims the oversized L/R gutters) */
body:has(.epg-hire-intro) .epg-page > .entry-content { margin-top: 0 !important; max-width: none !important; }
.epg-hire-intro__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 56% 60% at 32% 50%, rgba(201, 162, 75, 0.10), transparent 62%); }
.epg-hire-intro__inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-7)); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.epg-hire-intro__art { justify-self: center; }
.epg-hire-intro__art img { max-block-size: clamp(300px, 48vh, 460px); width: auto; height: auto; max-width: 100%; object-fit: contain; }
.epg-hire__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.02em; color: var(--color-ink); margin: 6px 0 0; text-wrap: balance; }
.epg-hire__lead { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-ink); opacity: 0.92; max-width: 48ch; margin: 16px 0 0; }
.epg-hire__anchor { font-family: var(--font-body); font-size: 16px; color: var(--color-ink); margin: 16px 0 var(--space-5); }
.epg-hire__anchor strong { color: var(--color-accent); font-variant-numeric: tabular-nums; }
.epg-hire-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-5), 3vw, var(--space-7)); }
.epg-hire-step__no { font-family: var(--font-display); font-size: 28px; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.epg-hire-step__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: var(--space-2) 0; color: var(--color-ink); }
.epg-hire-step__body { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--color-ink-muted); }
@media (max-width: 900px) {
  .epg-hire-intro__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .epg-hire-intro__art { order: -1; }
  .epg-hire-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .epg-hire-steps { grid-template-columns: 1fr; } }

/* ===== Custom Paintings page — tighten whitespace + add structure (6/2) ===== */
/* process + form read as ONE connected flow → tight gap between them, breathing room outside */
.epg-hire-process { padding-block: clamp(var(--space-7), 4vw, var(--space-8)) var(--space-6); }
.epg-hire-process .epg-section__header { margin-bottom: var(--space-6); }
.epg-hire-process .epg-hire-steps { gap: clamp(var(--space-5), 2vw, var(--space-6)); max-width: none !important; width: 100%; align-items: stretch; }

/* Each step = a small gilt-FRAMED work on the wall, led by a bespoke line-art icon.
   Icons carry comprehension; the gold numeral fills the width as "expensive" structure. */
.epg-hire-step {
  --epg-step-fill: #ECE7DB;             /* card interior; also occludes icon overlaps seamlessly */
  --epg-step-accent: #C9A24B;           /* decorative gold dabs */
  position: relative; list-style: none;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--epg-step-fill);
  padding: clamp(var(--space-5), 1.8vw, var(--space-6));
  color: #8A6A2B;                       /* contrast-safe brass for icon strokes on cream (AA) */
}
.epg-hire-step::before {                /* inner gilt hairline → double-rule frame, matches the hero */
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(201, 162, 75, 0.55); pointer-events: none;
}
.epg-hire-step__icon { line-height: 0; margin-bottom: var(--space-4); }
.epg-step-ico { width: 52px; height: 52px; display: block; }
.epg-hire-step__no { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; color: #8A6A2B; font-variant-numeric: tabular-nums; }
.epg-hire-step__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: var(--space-2) 0; color: var(--color-ink); }
.epg-hire-step__body { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--color-ink-muted); max-width: 38ch; }
.epg-hire-steps__foot { text-align: center; margin: var(--space-7) auto 0; max-width: 62ch; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; color: var(--color-ink-muted); }

/* form — two columns: a navy persuasion panel beside a lifted form card */
.epg-hire-formwrap { padding-block: var(--space-6) clamp(var(--space-7), 4vw, var(--space-8)); scroll-margin-top: calc(var(--ep-header-h) + var(--space-4)); }
.epg-hire-form__grid {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: start; max-width: 1180px; margin: 0 auto;
}
.epg-hire-form__aside, .epg-hire-form__panel { min-width: 0; }
.epg-hire-form__panel .epg-form :is(input:not([type=radio]):not([type=checkbox]), select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }

/* grouped fieldsets + warm microcopy */
.epg-form__group { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.epg-form__group legend { display: block; width: 100%; font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--color-ink); padding: 0 0 8px; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.epg-form__field em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.6; font-size: 11px; }
.epg-form__help { display: block; font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--color-ink-muted); margin-top: 6px; }
.epg-form__shabbos { font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--color-ink-muted); margin: 8px 0 0; }
/* occasion CHIPS — native radios styled (keyboard + SR accessible, no custom JS) */
.epg-form__field--chips { display: block; margin-bottom: var(--space-4); }
.epg-form__chips-label { display: block; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 10px; }
.epg-form__chips-label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.6; font-size: 11px; }
.epg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.epg-chip__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.epg-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 16px; border: 1px solid var(--color-line); border-radius: 999px; font-family: var(--font-body); font-size: 14px; color: var(--color-ink); cursor: pointer; transition: background var(--epg-dur) var(--epg-ease), color var(--epg-dur) var(--epg-ease), border-color var(--epg-dur) var(--epg-ease); }
.epg-chip:hover { border-color: var(--color-accent); }
.epg-chip__input:checked + .epg-chip { background: var(--color-navy); color: #F4EEE0; border-color: var(--color-navy); }
.epg-chip__input:focus-visible + .epg-chip { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* success state — the wax seal closes the brief→sealed→COA motif */
.epg-form__success { text-align: center; padding: var(--space-5) 0; max-width: none; }
.epg-form__success .epg-seal { width: 64px; height: 64px; color: #8A6A2B; margin: 0 auto var(--space-4); display: block; }
.epg-form__success p { font-family: var(--font-display); font-size: 21px; line-height: 1.5; color: var(--color-ink); max-width: 48ch; margin: 0 auto; }
.epg-form__success a { color: var(--color-accent); }
/* empty gallery (a category with no paintings assigned yet) */
.epg-shop__empty { max-width: 60ch; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-ink-muted); padding: var(--space-6) 0 var(--space-8); }
.epg-shop__empty a { color: var(--color-accent); }

.epg-hire-form__aside {
  background: #16243F; color: #F4EEE0; border-radius: 4px;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  position: relative; overflow: hidden;
}
.epg-hire-form__aside .epg-eyebrow { color: #C9A24B; }
/* Bespoke eyebrow on the Custom Artwork intro — a touch larger per Jeffrey (2026-06-07). */
.epg-hire-intro__copy .epg-eyebrow { font-size: 16px; letter-spacing: 0.16em; }
.epg-hire-form__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-sm); color: #F4EEE0; margin: 6px 0 0; line-height: 1.1; text-wrap: balance; }
.epg-hire-form__lead { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: rgba(244, 238, 224, 0.85); margin: 14px 0 0; }
.epg-hire-form__assure { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.epg-hire-form__assure li { position: relative; padding-left: 26px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(244, 238, 224, 0.9); }
.epg-hire-form__assure li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 11px; height: 6px; border-left: 1.5px solid #C9A24B; border-bottom: 1.5px solid #C9A24B; transform: rotate(-45deg); }
.epg-hire-form__call { margin: var(--space-6) 0 0; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; color: rgba(244, 238, 224, 0.65); }
.epg-hire-form__call a { display: inline-block; margin-top: 4px; color: #C9A24B; font-family: var(--font-display); font-size: 24px; text-decoration: none; letter-spacing: 0; }
.epg-hire-form__call a:hover { color: #D9B45E; }

.epg-hire-form__panel {
  background: #FCFAF4; border: 1px solid var(--color-line); border-radius: 4px;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  box-shadow: 0 22px 55px -30px rgba(16, 27, 48, 0.4);
}
.epg-hire-form__panel .epg-form { max-width: none; }
.epg-hire-form__panel .epg-form__success { padding-block: var(--space-3); }

@media (max-width: 860px) {
  .epg-hire-form__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* ---------- Use-case cards (for-synagogues / schools / homes) ---------- */
.epg-usecases {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.epg-usecase {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  transition: border-color var(--epg-dur) var(--epg-ease), background var(--epg-dur) var(--epg-ease);
  text-decoration: none; color: var(--color-ink);
}
.epg-usecase__title { font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight: 500; }
.epg-usecase__body { color: var(--color-ink-muted); font-size: 15px; line-height: 1.6; flex: 1; }
.epg-usecase__cta { color: var(--color-accent); font-size: 14px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.epg-usecase:hover { border-color: var(--color-accent); }

/* ---------- About strip ---------- */
.epg-about {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8);
  padding: var(--space-9) var(--space-7);
  max-width: 1440px; margin: 0 auto;
  border-top: 1px solid var(--color-line);
  align-items: center;
}
.epg-about__art {
  background: var(--color-surface); border: 1px solid var(--color-line);
  padding: var(--space-6); aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.epg-about__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.epg-about__title { font-size: var(--fs-display); line-height: 1.1; text-wrap: balance; }
.epg-about__body { font-size: 17px; line-height: 1.7; color: var(--color-ink-muted); max-width: 60ch; }
@media (max-width: 900px) {
  .epg-about { grid-template-columns: 1fr; }
}

/* ---------- Generic page (cart, checkout, about, etc) ---------- */
.epg-page {
  padding-top: var(--space-7);
  padding-bottom: var(--space-9);
}
.epg-page__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display); line-height: 1.05;
  margin: 0 0 var(--space-7) 0;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.epg-page .wp-block-shortcode { margin: 0; }
/* Content pages — readable measure */
.epg-page p,
.epg-page ul,
.epg-page ol { max-width: 68ch; }
.epg-page h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15;
  margin: var(--space-7) 0 var(--space-4) 0;
}
.epg-page h2:first-of-type { margin-top: 0; }

/* WooCommerce cart/checkout (shortcode output) — restyle to our tokens */
.woocommerce-cart .cart_totals, .woocommerce-cart .cart-collaterals { font-family: var(--font-body); }
.woocommerce table.shop_table {
  border: 1px solid var(--color-line); background: var(--color-surface);
  border-collapse: collapse; width: 100%;
}
.woocommerce table.shop_table th {
  background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line);
  text-align: left;
}
.woocommerce table.shop_table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
  font-family: var(--font-body); font-size: 15px;
}
.woocommerce table.shop_table td.product-name a {
  font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--color-ink);
}
.woocommerce table.shop_table img { max-width: 80px; }
/* Quantity stepper — −/+ buttons flanking a single number input.
   Both .epg-qty (custom wrapper) and .quantity (WC) supported. */
.epg-qty,
.woocommerce .quantity {
  display: inline-flex !important;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  width: max-content;
}
.epg-qty__btn {
  width: 40px; height: 48px;
  background: transparent;
  border: none;
  font-family: var(--font-body); font-size: 18px; font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--epg-dur) var(--epg-ease);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  user-select: none;
}
.epg-qty__btn:hover { background: var(--color-surface); }
.epg-qty__btn--minus { border-right: 1px solid var(--color-line); }
.epg-qty__btn--plus { border-left: 1px solid var(--color-line); }
.epg-qty__btn:active { background: var(--color-line); }

.woocommerce .quantity input.qty,
.epg-qty input.qty {
  width: 56px; height: 48px; text-align: center;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  color: var(--color-ink);
  border-radius: 0;
  -moz-appearance: textfield;
  outline: none;
}
.woocommerce .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.epg-qty input.qty::-webkit-inner-spin-button,
.epg-qty input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* WC cart "remove" X button — restyle to brand */
.woocommerce a.remove,
.woocommerce-cart a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-ink-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: color 180ms, background-color 180ms, border-color 180ms !important;
}
.woocommerce a.remove:hover,
.woocommerce-cart a.remove:hover {
  background: var(--color-ink) !important;
  color: var(--color-bg) !important;
  border-color: var(--color-ink) !important;
}

/* Product cell in cart — make the row roomier */
.woocommerce table.shop_table td.product-remove { width: 48px; padding-left: var(--space-3) !important; }
.woocommerce table.shop_table td.product-thumbnail img { max-width: 72px; height: auto; }
.woocommerce table.shop_table th { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.woocommerce .actions .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.wc-proceed-to-checkout .checkout-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--space-6);
  background: var(--color-ink); color: var(--color-bg);
  border: 1px solid var(--color-ink);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--epg-dur) var(--epg-ease), color var(--epg-dur) var(--epg-ease);
  text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .actions .button:hover,
.wc-proceed-to-checkout .checkout-button:hover { background: var(--color-accent); border-color: var(--color-accent); }
.woocommerce .button.alt { background: var(--color-ink); }

/* Cart totals box */
.woocommerce .cart_totals h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line);
}
.woocommerce-cart .wc-proceed-to-checkout { margin-top: var(--space-5); }

/* Proceed-to-checkout button shouldn't stretch full-width awkwardly. */
.woocommerce .wc-proceed-to-checkout {
  display: flex; justify-content: flex-end;
}
.woocommerce .wc-proceed-to-checkout .button,
.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 320px;
  max-width: 420px;
  padding: 0 var(--space-7) !important;
  height: 56px !important;
  white-space: nowrap !important;
}
@media (max-width: 600px) {
  .woocommerce .wc-proceed-to-checkout .button,
  .woocommerce .wc-proceed-to-checkout .checkout-button { width: 100% !important; max-width: none; }
}

/* WC block-based cart checkout button (newer WC) */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-container button,
.wc-block-cart__submit-button {
  display: inline-flex !important; width: auto !important;
  min-width: 240px; max-width: 360px;
  padding: 0 var(--space-7) !important;
  height: 52px !important;
  background: var(--color-ink) !important; color: var(--color-bg) !important;
  border: 1px solid var(--color-ink) !important;
  font-family: var(--font-body) !important; font-size: 14px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
}
.wc-block-cart__submit-button:hover { background: var(--color-accent) !important; border-color: var(--color-accent) !important; }

/* Checkout form */
.woocommerce form .form-row label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink-muted); margin-bottom: var(--space-2); display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%; padding: 0 var(--space-4); min-height: 48px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  font-family: var(--font-body); font-size: 16px; color: var(--color-ink);
  border-radius: var(--radius-sm);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--color-accent); }

.woocommerce-checkout #payment {
  background: var(--color-surface); border: 1px solid var(--color-line); padding: var(--space-5);
}
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 500; }

/* Empty cart message */
.woocommerce .cart-empty {
  font-family: var(--font-display); font-size: 24px; color: var(--color-ink-muted);
  padding: var(--space-7) 0;
}
.woocommerce .return-to-shop { margin-top: var(--space-5); }

/* WooCommerce notices — beat WC's default green/blue/red specificity. */
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message,
body .woocommerce-message {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-top: 2px solid var(--color-accent) !important;
  padding: var(--space-4) var(--space-5) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  margin: 0 0 var(--space-5) 0 !important;
  display: flex !important; align-items: center !important; gap: var(--space-3) !important;
  list-style: none !important;
}
.woocommerce .woocommerce-message::before,
body .woocommerce-message::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important; height: 22px !important;
  background: var(--color-accent) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center / 16px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center / 16px;
  position: static !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
}
.woocommerce .woocommerce-message a.button,
body .woocommerce-message a.button {
  background: transparent !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-line) !important;
  height: 36px !important; padding: 0 var(--space-4) !important;
  font-size: 12px !important;
  margin-left: auto !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-eyebrow) !important;
}
.woocommerce .woocommerce-message a.button:hover,
body .woocommerce-message a.button:hover { background: var(--color-ink) !important; color: var(--color-bg) !important; }

.woocommerce .woocommerce-info,
body .woocommerce-info {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border-top: 2px solid var(--color-accent) !important;
  border-left: none !important; border-right: none !important; border-bottom: none !important;
  padding: var(--space-4) var(--space-5) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  margin: 0 0 var(--space-5) 0 !important;
}
.woocommerce .woocommerce-info::before,
body .woocommerce-info::before { color: var(--color-accent) !important; }

.woocommerce .woocommerce-error,
body .woocommerce-error {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border-top: 2px solid #B5421B !important;
  border-left: none !important; border-right: none !important; border-bottom: none !important;
  padding: var(--space-4) var(--space-5) !important;
  font-family: var(--font-body) !important;
}
.woocommerce-notices-wrapper { margin-bottom: var(--space-5); }

/* WooCommerce BLOCKS notice banner (cart/checkout block UI) — override the default blue/green */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-warning {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-top: 2px solid var(--color-accent) !important;
  border-radius: 0 !important;
  padding: var(--space-4) var(--space-5) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  margin: 0 0 var(--space-5) 0 !important;
  display: flex !important; align-items: center !important; gap: var(--space-3) !important;
  outline: none !important;
  box-shadow: none !important;
}
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible,
.wc-block-components-notice-banner:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 2px solid var(--color-accent) !important;
}
.wc-block-components-notice-banner.is-error {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border: none !important;
  border-top: 2px solid #B5421B !important;
}
/* SVG icon inside the banner — WC nests it under variable structure; cover both. */
.wc-block-components-notice-banner svg,
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__content svg,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__svg {
  fill: var(--color-accent) !important;
  color: var(--color-accent) !important;
  width: 22px !important; height: 22px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.wc-block-components-notice-banner.is-error svg { fill: #B5421B !important; color: #B5421B !important; }
.wc-block-components-notice-banner__content { color: var(--color-ink) !important; flex: 1; }

/* Empty-cart message wrapper */
.wc-empty-cart-message { margin-bottom: var(--space-5); }
.wp-block-woocommerce-empty-cart-block { padding: var(--space-7) 0; }

/* ---------- Single product page — restructured ----------
   HERO row: painting (constrained max-height) + info column with key buying details.
   DETAILS row: below hero, full-width with reading-width constraint.
   RELATED row: below details, full grid. */
.epg-product {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-7) var(--space-9);
}
.epg-product__crumbs {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink-muted);
  display: flex; gap: var(--space-2); align-items: center;
  margin: 0 0 var(--space-5) 0; padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.epg-product__crumbs a { color: var(--color-ink-muted); }
.epg-product__crumbs a:hover { color: var(--color-accent); }

.epg-product__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: var(--space-8);
  align-items: start;
}

/* The painting — constrained, centered, with a soft mat */
.epg-product__art {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: var(--space-5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  max-height: 640px;        /* the key constraint — painting never dominates */
  aspect-ratio: 4 / 5;
}
/* The AVIF pipeline wraps the painting in a <picture> that shrinks to the image's
   intrinsic size; stretch it so the <img> can fill the frame. */
.epg-product__art picture { display: block; width: 100%; height: 100%; line-height: 0; }
.epg-product__art img {
  /* Fill the frame proportionally. object-fit:contain keeps the painting's true
     shape (no distortion, no cropping); width/height:100% lets small images scale
     UP to fill the frame instead of sitting tiny. Re-exporting a low-res image then
     only improves sharpness — it no longer affects layout. */
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.epg-product__info {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  position: sticky; top: 88px;   /* sticks below the sticky header */
}
.epg-product__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; margin: 0;
}
.epg-product__subject { color: var(--color-ink-muted); font-size: 15px; line-height: 1.55; max-width: 48ch; margin: 0; }
.epg-product__price {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin: 0;
}
.epg-product__price-total {
  font-family: var(--font-display); font-size: var(--fs-display-sm); font-weight: 500; color: var(--color-ink); line-height: 1.1;
}
.epg-product__price-breakdown {
  font-family: var(--font-body); font-size: 13px; color: var(--color-ink-muted);
  letter-spacing: 0.02em;
}
.epg-product__price-breakdown[hidden] { display: none; }
.epg-product__price-breakdown strong { color: var(--color-accent); font-weight: 500; }
/* Hide WC's default variation price — we maintain our own */
.woocommerce-variation-price { display: none !important; }

/* Assurance bullets — quiet trust signals under the CTAs */
.epg-product__assurances {
  list-style: none; padding: 0; margin: var(--space-3) 0 0 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  border-top: 1px solid var(--color-line); padding-top: var(--space-4);
}
.epg-product__assurances li {
  font-family: var(--font-body); font-size: 13px; color: var(--color-ink-muted);
  display: flex; align-items: center; gap: var(--space-3);
}
.epg-product__assurances li span { color: var(--color-accent); font-size: 9px; }

.epg-product__add-to-cart {
  margin-top: var(--space-3); padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.epg-product__add-to-cart .variations { width: 100%; margin: var(--space-4) 0; border-collapse: separate; border-spacing: 0; }
.epg-product__add-to-cart .variations td { padding: var(--space-2) 0; vertical-align: middle; }
.epg-product__add-to-cart .variations td.label { font-size: 13px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-muted); width: 35%; }
.epg-product__add-to-cart .reset_variations { display: none !important; }
.epg-product__add-to-cart .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 var(--space-7);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--color-ink); color: var(--color-bg);
  cursor: pointer; transition: background var(--epg-dur) var(--epg-ease);
  width: 100%; margin-top: var(--space-3);
}
.epg-product__add-to-cart .single_add_to_cart_button:hover { background: var(--color-accent); }
.epg-product__add-to-cart .quantity { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); }
.epg-product__add-to-cart .quantity input.qty {
  width: 64px; height: 48px; text-align: center;
  border: 1px solid var(--color-line); background: var(--color-surface);
  font-family: var(--font-body); font-size: 16px; color: var(--color-ink);
}
/* Frame button — full-width secondary CTA */
.epg-product__secondary-ctas { margin-top: var(--space-3); }
.epg-product__frames-trigger {
  width: 100%;
  height: 52px;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--epg-dur) var(--epg-ease), color var(--epg-dur) var(--epg-ease);
  padding: 0 var(--space-4);
}
.epg-product__frames-trigger:hover {
  background: var(--color-ink); color: var(--color-bg);
}
/* Once a frame is chosen, show its thumbnail at the left of the button. */
.epg-product__frames-trigger.has-frame { justify-content: flex-start; gap: 12px; height: auto; min-height: 52px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.epg-frame-chip__img {
  width: 38px; height: 38px; flex: none; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--color-line); background: #fff;
}
.epg-product__frames-trigger:hover .epg-frame-chip__img { border-color: var(--color-bg); }
.epg-frame-chip__text { text-align: left; line-height: 1.35; }
/* Checkout review-order line: painting thumbnail + small inline frame thumb
   (theme review-order.php override). !important beats WC's global img{height:auto}. */
.epg-checkout__line { display: flex; align-items: flex-start; gap: 14px; }
.epg-checkout__thumbs { flex: none; line-height: 0; }
.epg-checkout__thumb { width: 54px !important; height: 54px !important; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-line); background: #fff; display: block; margin: 0; }
.epg-checkout__name { display: block; }
.epg-checkout__title { display: block; }
.epg-checkout__frameline { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.epg-checkout__frame-thumb { width: 30px !important; height: 30px !important; object-fit: cover; border-radius: 3px; border: 1px solid var(--color-line); background: #fff; display: block; flex: none; margin: 0; }
.epg-checkout__controls { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.epg-checkout__qty { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.epg-checkout__qty-btn { width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--color-ink); display: flex; align-items: center; justify-content: center; }
.epg-checkout__qty-btn:hover { background: var(--color-ink); color: var(--color-bg); }
.epg-checkout__qty-input { width: 34px; height: 28px; border: none; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); text-align: center; background: transparent; font-size: 13px; pointer-events: none; }
.epg-checkout__remove { font-size: 12px; color: var(--color-ink-muted); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }
.epg-checkout__remove:hover { color: #a3322b; }
.woocommerce-checkout-review-order-table.is-loading { opacity: 0.5; pointer-events: none; }
/* Details wrap — full width below hero, reading-width content */
.epg-product__details-wrap {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-line);
  display: flex; justify-content: center;
}
.epg-product__details {
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column;
  gap: 0;
}
.epg-product__details details {
  border-top: 1px solid var(--color-line);
  padding: var(--space-5) 0;
}
.epg-product__details details:first-child { border-top: none; padding-top: var(--space-3); }
.epg-product__details summary {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-ink); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 0;
}
.epg-product__details summary::-webkit-details-marker { display: none; }
.epg-product__details summary::after { content: "+"; color: var(--color-accent); font-size: 22px; font-weight: 300; line-height: 1; transition: transform 200ms; }
.epg-product__details details[open] summary::after { content: "−"; }
.epg-product__details details > div { padding-top: var(--space-4); color: var(--color-ink-muted); font-size: 16px; line-height: 1.75; }
.epg-product__details details > div p { margin: 0 0 var(--space-3) 0; }
.epg-product__details details > div p:last-child { margin-bottom: 0; }
.epg-product__details details > div a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); }
.epg-product__details details > div a:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); }

.epg-related {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--color-line);
}

/* ---------- Single product responsive ---------- */
@media (max-width: 960px) {
  .epg-product { padding: var(--space-4) var(--space-5) var(--space-8); }
  .epg-product__hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .epg-product__info {
    position: static;
    padding-top: 0;
  }
  .epg-product__art {
    max-height: 480px;
    aspect-ratio: auto;
    min-height: 360px;
  }
  .epg-product__title { font-size: clamp(28px, 6vw, 36px); }
  .epg-product__details-wrap { margin-top: var(--space-7); padding-top: var(--space-5); }
}
@media (max-width: 520px) {
  .epg-product__art { padding: var(--space-3); max-height: 380px; min-height: 280px; }
  .epg-product__crumbs { font-size: 11px; gap: 6px; }
}

/* ---------- Institutions landing page ---------- */
.epg-institutions { max-width: 1100px; margin: 0 auto; padding: var(--space-9) var(--space-7); }
.epg-institutions__hero {
  text-align: center; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-line);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: center;
}
.epg-institutions__title { font-size: var(--fs-display); line-height: 1.05; max-width: 24ch; }
.epg-institutions__lead { color: var(--color-ink-muted); font-size: 18px; line-height: 1.7; max-width: 60ch; }
.epg-institutions__features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-7);
  margin: var(--space-9) 0;
}
.epg-institutions__feature h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  margin-bottom: var(--space-3); color: var(--color-ink);
}
.epg-institutions__feature p { color: var(--color-ink-muted); font-size: 15px; line-height: 1.7; }
.epg-institutions__cta {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8);
  padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-line);
  margin-top: var(--space-8);
}
.epg-institutions__cta-copy h2 { font-family: var(--font-display); font-size: var(--fs-display-sm); margin: var(--space-2) 0 var(--space-3); }
.epg-institutions__cta-copy p { color: var(--color-ink-muted); font-size: 16px; line-height: 1.7; }
.epg-institutions__form { display: flex; flex-direction: column; gap: var(--space-4); }
.epg-institutions__form label {
  display: flex; flex-direction: column; gap: var(--space-2);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink);
}
.epg-institutions__form .input,
.epg-institutions__form input.input,
.epg-institutions__form textarea.input {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  height: 52px; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: 16px;
  color: var(--color-ink); letter-spacing: 0;
  text-transform: none; font-weight: 400;
  transition: border-color var(--epg-dur) var(--epg-ease), background var(--epg-dur) var(--epg-ease);
  width: 100%;
}
.epg-institutions__form .input:hover { border-color: var(--color-ink-muted); }
.epg-institutions__form .input:focus,
.epg-institutions__form input.input:focus,
.epg-institutions__form textarea.input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
}
.epg-institutions__form textarea.input {
  height: auto; min-height: 132px; padding: var(--space-3) var(--space-4); resize: vertical;
  line-height: 1.55;
}
.epg-institutions__check { flex-direction: row !important; align-items: center; gap: var(--space-3) !important; cursor: pointer; padding: var(--space-2) 0; }
.epg-institutions__check input {
  width: 20px; height: 20px; cursor: pointer;
  accent-color: var(--color-ink);
}
.epg-institutions__form button[type="submit"].epg-btn {
  height: 56px; margin-top: var(--space-3);
  background: var(--color-ink) !important; color: var(--color-bg) !important;
  border: 1px solid var(--color-ink) !important;
}
.epg-institutions__form button[type="submit"].epg-btn:hover {
  background: var(--color-accent) !important; border-color: var(--color-accent) !important;
}
.epg-institutions__note { font-size: 13px; color: var(--color-ink-muted); text-transform: none; letter-spacing: 0; font-style: italic; margin-top: var(--space-2); }
@media (max-width: 800px) {
  .epg-institutions__cta { grid-template-columns: 1fr; }
}

/* ---------- WooCommerce variation tweaks ---------- */
.variations_form .variations { margin: var(--space-4) 0; }
.variations_form .variations select {
  height: 52px; padding: 0 var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-line);
  font-family: var(--font-body); font-size: 15px; color: var(--color-ink);
  border-radius: var(--radius-sm); width: 100%;
}
.variations_form .single_variation_wrap { margin-top: var(--space-4); }
.variations_form .woocommerce-variation-price { font-family: var(--font-display); font-size: 26px; color: var(--color-ink); }
.variations_form .woocommerce-variation-availability { font-size: 13px; color: var(--color-ink-muted); margin-top: var(--space-2); }

/* Hide the duplicate "From $XX" price once a variation is selected (the variations_form already shows it) */
.woocommerce-variation-price { padding: var(--space-2) 0; }
.epg-product__price + .epg-product__add-to-cart .single_variation .woocommerce-variation-price + * { margin-top: var(--space-2); }

/* Variation swatches from `woo-variation-swatches` plugin — restyle to match buttons */
.variations .wvs-attribute-pre-fix { margin: 0; }
ul.variable-items-wrapper {
  display: flex !important; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; list-style: none;
}
ul.variable-items-wrapper li.variable-item {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-ink) !important;
  min-width: 56px; height: 44px; padding: 0 var(--space-4) !important;
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer; transition: color 200ms, background-color 200ms, border-color 200ms !important;
  box-shadow: none !important;
}
ul.variable-items-wrapper li.variable-item:hover {
  border-color: var(--color-ink) !important;
  background: var(--color-surface) !important;
}
ul.variable-items-wrapper li.variable-item.selected,
ul.variable-items-wrapper li.variable-item.wvs-hover {
  border-color: var(--color-ink) !important;
  background: var(--color-ink) !important;
  color: var(--color-bg) !important;
  outline: none !important; box-shadow: none !important;
}
ul.variable-items-wrapper li.variable-item.disabled {
  opacity: 0.4 !important; cursor: not-allowed !important;
  text-decoration: line-through;
}
.variable-items-wrapper .variable-item-span { color: inherit !important; }

/* ---------- Footer ---------- */
.epg-footer {
  background: var(--color-navy); color: var(--color-on-navy);
  border-top: 1px solid rgba(201, 162, 75, 0.40);
  padding: var(--space-9) var(--space-7) var(--space-6);
  margin-top: var(--space-10);
}
.epg-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  max-width: 1440px; margin: 0 auto;
}
.epg-footer__brand .epg-footer__logo {
  font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--color-on-navy);
}
.epg-footer__about { color: rgba(244, 238, 224, 0.7); font-size: 15px; line-height: 1.7; margin-top: var(--space-4); max-width: 40ch; }
.epg-footer__col h4 {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-gold); margin-bottom: var(--space-4);
}
.epg-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.epg-footer__col a { color: var(--color-on-navy); font-size: 15px; text-decoration: none; }
.epg-footer__col a:hover { color: var(--color-gold); }
.epg-footer__bottom {
  border-top: 1px solid rgba(245, 239, 228, 0.12);
  margin-top: var(--space-8); padding-top: var(--space-5);
  display: flex; justify-content: space-between;
  color: rgba(245, 239, 228, 0.5); font-size: 13px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  max-width: 1440px; margin-left: auto; margin-right: auto;
}
@media (max-width: 900px) {
  .epg-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .epg-footer__grid { grid-template-columns: 1fr; }
  .epg-footer__bottom { flex-direction: column; gap: var(--space-3); }
}

/* =========================================================================
   About page (epg/about) — editorial artist profile
   ========================================================================= */
.epg-aboutp { margin: 0; }
/* full-bleed bands butt directly together — kill default block margins (incl. the
   cream slivers that otherwise show above the navy hero and between the navy CTA
   band and the navy footer). Scoped to the About page via :has(). */
.epg-aboutp > section { margin-block: 0; }
body:has(.epg-aboutp) #epg-main { margin-top: 0; }
body:has(.epg-aboutp) #epg-main + .wp-block-template-part { margin-top: 0; }
body:has(.epg-aboutp) .epg-footer { margin-top: 0; }

/* Hero band (navy) */
.epg-aboutp__hero { margin-block-start: 0; padding: clamp(var(--space-8), 9vw, var(--space-11)) var(--space-6); }
.epg-aboutp__hero-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.82fr) 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center;
}
.epg-aboutp__hero-art { margin: 0; }
.epg-aboutp__hero-art img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(201, 162, 75, 0.45);
  box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.7);
}
.epg-aboutp__cap {
  margin-top: var(--space-3); text-align: center;
  font-size: 12.5px; letter-spacing: 0.05em; font-style: italic;
  color: var(--color-on-navy-muted);
}
.epg-aboutp__hero-copy .epg-eyebrow { color: var(--color-gold); }
.epg-aboutp__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1.02;
  margin: var(--space-3) 0 var(--space-4); color: var(--color-on-navy);
}
.epg-aboutp__lede {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.5;
  color: var(--color-on-navy); max-width: 32ch; margin: 0;
}

/* Story (parchment) */
.epg-aboutp__story { padding: clamp(var(--space-9), 10vw, var(--space-11)) var(--space-6); max-width: 1080px; margin: 0 auto; }
.epg-aboutp__prose { max-width: 60ch; margin: 0 auto; }
.epg-aboutp__prose p { font-size: 1.0625rem; line-height: 1.85; color: var(--color-ink); margin: 0 0 var(--space-5); }
.epg-aboutp__prose p:last-child { margin-bottom: 0; }
.epg-aboutp__first { font-size: 1.28rem; line-height: 1.7; }
.epg-aboutp__first::first-letter {
  float: left; font-family: var(--font-display); font-weight: 600;
  font-size: 3.4em; line-height: 0.78; padding: 6px 10px 0 0; color: var(--color-accent);
}
.epg-aboutp__quote {
  max-width: 28ch; margin: clamp(var(--space-8), 8vw, var(--space-10)) auto;
  text-align: center; border: 0; padding: 0;
}
.epg-aboutp__quote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.38;
  color: var(--color-navy); margin: 0;
}
.epg-aboutp__quote::before,
.epg-aboutp__quote::after {
  content: ""; display: block; width: 56px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, rgba(201,162,75,0), var(--color-gold), rgba(201,162,75,0));
}
.epg-aboutp__quote::before { margin-bottom: var(--space-5); }
.epg-aboutp__quote::after  { margin-top: var(--space-5); }

/* Self-portrait feature (parchment) */
.epg-aboutp__feature {
  max-width: 1080px; margin: 0 auto;
  padding: 0 var(--space-6) clamp(var(--space-9), 10vw, var(--space-11));
  display: grid; grid-template-columns: 1fr minmax(0, 0.78fr);
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center;
}
.epg-aboutp__feature-art { margin: 0; justify-self: center; }
.epg-aboutp__feature-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display); line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4); color: var(--color-navy);
}
.epg-aboutp__feature-copy p { font-size: 1.0625rem; line-height: 1.8; color: var(--color-ink); max-width: 40ch; margin: 0; }

/* CTA band (navy) */
.epg-aboutp__cta { text-align: center; padding: clamp(var(--space-9), 9vw, var(--space-11)) var(--space-6); }
.epg-aboutp__cta-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); color: var(--color-on-navy); margin: 0 0 var(--space-3); }
.epg-aboutp__cta-lede { color: var(--color-on-navy-muted); max-width: 46ch; margin: 0 auto var(--space-6); line-height: 1.7; }
.epg-aboutp__cta-row { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .epg-aboutp__hero-inner { grid-template-columns: 1fr; }
  .epg-aboutp__hero-art { max-width: 440px; margin: 0 auto; }
  .epg-aboutp__hero-copy { text-align: center; }
  .epg-aboutp__hero-copy .epg-hero__rule { margin-left: auto; margin-right: auto; }
  .epg-aboutp__lede { max-width: none; }
  .epg-aboutp__feature { grid-template-columns: 1fr; text-align: center; }
  .epg-aboutp__feature-art { order: -1; max-width: 340px; }
  .epg-aboutp__feature-copy .epg-hero__rule { margin-left: auto; margin-right: auto; }
  .epg-aboutp__feature-copy p { margin-left: auto; margin-right: auto; }
}

/* ---------- FAQ accordion ([epg_faq] shortcode, /faq/ page) ---------- */
.epg-faq { max-width: 760px; margin: var(--space-6) auto var(--space-8); }
.epg-faq__item {
  border-bottom: 1px solid var(--color-line);
}
.epg-faq__item:first-child { border-top: 1px solid var(--color-line); }
.epg-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  font-family: var(--font-display); font-size: var(--fs-title); line-height: 1.3;
  color: var(--color-ink); position: relative;
}
.epg-faq__q::-webkit-details-marker { display: none; }
.epg-faq__q::after {
  content: "+"; margin-left: auto; font-size: 1.5rem; line-height: 1;
  color: var(--color-accent); transition: transform var(--epg-dur) var(--epg-ease);
}
.epg-faq__item[open] .epg-faq__q::after { content: "\2013"; }
.epg-faq__q:hover { color: var(--color-accent); }
.epg-faq__q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.epg-faq__a {
  padding: 0 var(--space-5) var(--space-5) 0;
  color: var(--color-ink-muted); font-family: var(--font-body); max-width: 64ch;
}
.epg-faq__a p { margin: 0; line-height: 1.7; }
.epg-faq__a a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }