/* =========================================================
   Design tokens (from ESC-96 design system, design-system.html)
   ========================================================= */
:root {
  --navy: #1B2A4A;
  --navy-700: #23355A;
  --navy-600: #2E436D;
  --navy-500: #4A608A;
  --heritage-red: #8A1C2B;
  --heritage-red-700: #6E1622;
  --brass: #B08D57;
  --brass-300: #D4BC8E;
  --pewter: #8A8D91;
  --warm-white: #F7F5F1;
  --ink: #1C1C1E;
  --border: #E4E1DB;
  --white: #FFFFFF;

  --surface: var(--white);
  --surface-secondary: var(--warm-white);
  --surface-tertiary: #EFEDEA;
  --on-surface: var(--ink);
  --on-surface-secondary: #4A4A4E;
  --on-surface-muted: #6E6E73;
  --primary: var(--navy);
  --primary-hover: var(--navy-700);
  --primary-active: var(--navy-600);
  --on-primary: var(--white);
  --accent: var(--heritage-red);
  --accent-hover: var(--heritage-red-700);
  --on-accent: var(--white);
  --accent-secondary: var(--brass);
  --on-accent-secondary: var(--ink);
  --success: #2E7D32;
  --warning: #B35900;
  --danger: #B71C1C;
  --info: #1B4F72;
  --border-default: var(--border);
  --focus-ring: rgba(26, 115, 232, 0.5);

  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-display: 3rem;
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-h5: 1rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-caption: 0.875rem;
  --text-overline: 0.75rem;

  --leading-display: 1.15;
  --leading-h1: 1.2;
  --leading-h2: 1.25;
  --leading-h3: 1.3;
  --leading-h4: 1.4;
  --leading-body: 1.65;
  --leading-caption: 1.45;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --max-width: 1280px;
  --gutter: 1.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 28, 30, 0.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root {
    --text-display: 2.25rem;
    --text-h1: 1.75rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-h4: 1.125rem;
    --gutter: 1rem;
  }
}

/* ---------------- Reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--primary-hover); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
h5 { font-size: var(--text-h5); font-weight: 600; }
.display { font-size: var(--text-display); line-height: var(--leading-display); font-family: var(--font-serif); font-weight: 700; color: var(--primary); }
.overline { font-size: var(--text-overline); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--accent); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--on-surface-muted); }
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link.screen-reader-text:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; z-index: 999; background: var(--primary); color: var(--on-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }

/* ---------------- Layout ---------------- */
.container { width: 100%; max-width: var(--max-width); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
@media (max-width: 767px) { .section { padding-top: var(--space-12); padding-bottom: var(--space-12); } }
.section-secondary { background: var(--surface-secondary); }
.grid { display: grid; gap: var(--gutter); }
.grid > * { min-width: 0; } /* prevent wide children (e.g. images) blowing out the track */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Shop by Branch (homepage): 2-up instead of the general 1-column mobile
   collapse above — more specific (2 classes) so it wins regardless of
   source order. */
@media (max-width: 767px) { .grid-3.branch-grid { grid-template-columns: repeat(2, 1fr); } }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ---------------- Trust bar ---------------- */
.top-bar { background: var(--primary); color: var(--on-primary); font-size: var(--text-caption); padding: var(--space-2) 0; overflow: hidden; }
.top-bar-track { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.top-bar-track__dup { display: none; }
.top-bar span { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.top-bar svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Mobile: all 4 items on one line as a continuously looping marquee
   (left-to-right) instead of wrapping to multiple lines. .top-bar-track__dup
   is an exact copy of the same items (rendered by header.php, not CSS —
   content duplication can't be done in CSS alone) placed immediately after
   the first set; animating the combined track from -50% to 0% moves exactly
   one full copy's width each loop, so the seam between the end of one copy
   and the start of the next is invisible. */
@media (max-width: 767px) {
  .top-bar { padding: var(--space-1) 0; font-size: 0.75rem; }
  .top-bar-track {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: var(--space-6);
    animation: pp-top-bar-marquee 16s linear infinite;
  }
  .top-bar-track__dup { display: flex; flex-wrap: nowrap; flex-shrink: 0; gap: var(--space-6); }
  .top-bar span { justify-content: center; }
}
@keyframes pp-top-bar-marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  /* Fall back to the plain wrapped layout instead of a static double-wide
     track — without the animation, the duplicated copy would otherwise
     just sit there unmoving next to the first one. */
  .top-bar-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .top-bar-track__dup { display: none; }
}

/* ---------------- Header ---------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border-default); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.logo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--primary); text-decoration: none; }
.logo:hover { color: var(--primary); }
.logo-mark { width: 44px; height: 44px; background: var(--white); color: var(--on-primary); display: grid; place-items: center; border-radius: var(--radius-sm); overflow: hidden; }
.logo-mark img { width: 44px; height: 44px; object-fit: contain; }
.header-search { flex: 1 1 320px; max-width: 520px; position: relative; }
.header-search input[type="search"] { width: 100%; padding: var(--space-3) var(--space-4); padding-right: 2.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-secondary); font-size: var(--text-body); }
.header-search button { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: var(--primary); color: var(--on-primary); border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-quote { display: flex; align-items: center; gap: var(--space-4); }
.header-phone { font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.header-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; margin-left: -6px; margin-top: -12px; }
.nav-primary { position: relative; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); }
.nav-primary .container { display: flex; align-items: center; gap: var(--space-6); }
.nav-primary ul { list-style: none; display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; }
.nav-primary a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; color: var(--on-surface); font-weight: 600; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav-primary a:hover, .nav-primary .current-menu-item > a { color: var(--accent); border-bottom-color: var(--accent); }
.mobile-menu-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--primary); }
.nav-close { display: none; }

/* ---------------- Mega menu (Main Navigation) ---------------- */
/* Top-level items with children show a caret and open a full-width panel.
   Depth-1 items are column headings, depth-2 items are the column links. */
.nav-primary .has-mega-menu > a::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform var(--duration-fast); }
.mega-menu-panel {
  /* display:block + visibility (not display:none) so the close can be
     delayed — see the transition below. The 2px overlap with the nav bar
     removes the subpixel dead zone that used to break :hover while moving
     from the top-level item into the panel. */
  display: block; visibility: hidden; opacity: 0;
  position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 95;
  background: var(--primary); color: var(--on-primary);
  border-top: 3px solid var(--accent);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  transition: opacity var(--duration-fast) ease, visibility 0s linear 0.3s;
}
.has-mega-menu:hover > .mega-menu-panel,
.has-mega-menu:focus-within > .mega-menu-panel,
.has-mega-menu.is-open > .mega-menu-panel {
  visibility: visible; opacity: 1;
  transition-delay: 0s;
}
.mega-menu-panel { max-height: calc(100vh - 140px); overflow-y: auto; }
.mega-menu-panel .container { display: block; }
/* Groups flow down each column and wrap into the next (CSS multicol), so
   short groups pack under tall ones instead of leaving empty grid cells.
   Each group is kept intact via break-inside: avoid. */
.nav-primary ul.mega-menu-grid { display: block; columns: 200px 5; column-gap: var(--space-8); padding: var(--space-6) 0 var(--space-2); }
.nav-primary .mega-menu-col { display: block; break-inside: avoid; margin-bottom: var(--space-6); }
.nav-primary .mega-menu-col > a { display: flex; width: 100%; padding: 0 0 var(--space-2); color: var(--brass-300); font-size: var(--text-body); font-weight: 700; text-transform: none; letter-spacing: 0; white-space: normal; border-bottom: 1px solid rgba(247, 245, 241, 0.2); }
.nav-primary .mega-menu-col > a:hover { color: var(--warm-white); border-bottom-color: rgba(247, 245, 241, 0.2); }
.nav-primary ul.mega-menu-sub { display: block; margin-top: var(--space-2); }
.nav-primary .mega-menu-sub a { display: flex; width: 100%; padding: var(--space-1) 0; color: var(--on-primary); font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; border-bottom: 0; }
.nav-primary .mega-menu-sub a::before { content: "▸"; color: var(--brass); margin-right: var(--space-2); font-size: 0.8em; }
.nav-primary .mega-menu-sub a:hover { color: var(--brass-300); border-bottom: 0; }
@media (max-width: 991px) {
  .header-search { order: 3; flex: 1 1 100%; max-width: none; margin-top: var(--space-2); }
  /* Logo, account/cart icons, and the hamburger toggle must win the first
     row no matter how narrow the viewport gets — otherwise, with every item
     at the same default order, the phone/quote block (between them in the
     DOM) can fill the row first and push the toggle onto a line of its own
     between the logo and phone/quote rows. Giving it this low priority here
     (not only inside the narrower 767px block below) keeps that from
     happening at tablet widths (768–991px) too. */
  .header-quote { order: 4; flex: 1 1 100%; margin-top: var(--space-2); }
  .site-header .container { flex-wrap: wrap; min-height: auto; padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .nav-primary { display: none; }
  /* Opening the menu used to drop it into normal document flow, so a long
     mega-menu (branch + product categories) pushed the footer down and the
     visitor had to scroll the whole page to reach the bottom links. It's now
     a fixed panel pinned under the header with its own scrollbar, sized to
     whatever vertical space is actually left (--pp-header-h is measured and
     set by assets/js/main.js, since the header's own height changes as the
     top bar/search wrap at different widths). */
  .nav-primary.is-open {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--pp-header-h, 128px);
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-lg);
    z-index: 98;
  }
  body.pp-nav-open { overflow: hidden; }
  .mobile-menu-toggle { display: block; }

  /* Close button: pinned to the top of the scrollable panel (position:
     sticky within .nav-primary.is-open's own scroll area) so it's always
     reachable, even after scrolling down a long mega-menu — re-tapping the
     hamburger also closes it, but that icon never visually becomes an X. */
  .nav-close {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4) var(--gutter);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-secondary);
    border: 0;
    border-bottom: 1px solid var(--border-default);
    color: var(--primary);
    font-weight: 600;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .nav-close:hover { color: var(--accent); }

  /* Mega menu collapses to a tap-to-open accordion on mobile. */
  .nav-primary .container { display: block; }
  .nav-primary ul { display: block; gap: 0; }
  .nav-primary .menu-bar > li > a { display: flex; justify-content: space-between; width: 100%; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
  .nav-primary .has-mega-menu.is-open > a::after { transform: rotate(180deg); }
  .has-mega-menu > .mega-menu-panel { display: none; position: static; visibility: visible; opacity: 1; transition: none; box-shadow: none; border-top: 0; background: transparent; color: var(--on-surface); max-height: none; overflow: visible; }
  .has-mega-menu.is-open > .mega-menu-panel { display: block; }
  .nav-primary ul.mega-menu-grid { columns: 1; padding: var(--space-2) 0 var(--space-4) var(--space-4); }
  .nav-primary .mega-menu-col { margin-bottom: var(--space-2); }
  .nav-primary .mega-menu-col > a { color: var(--primary); border-bottom-color: var(--border-default); }
  .nav-primary .mega-menu-col > a:hover { color: var(--accent); }
  .nav-primary .mega-menu-sub a { color: var(--on-surface); padding-left: var(--space-3); white-space: normal; }
  .nav-primary .mega-menu-sub a:hover { color: var(--accent); }
}

/* ---------------- Buttons ---------------- */
.btn, a.button, button.button, input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-body); line-height: 1.4;
  text-decoration: none; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  min-height: 44px; background: var(--accent); color: var(--on-accent);
}
.btn:hover, a.button:hover, button.button:hover, input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary, .woocommerce a.button.alt { background: var(--primary); color: var(--on-primary); }
.btn-secondary:hover, .woocommerce a.button.alt:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--border-default); }
.btn-ghost:hover { background: var(--surface-secondary); color: var(--primary); }
.btn-text { background: transparent; color: var(--primary); padding-left: var(--space-2); padding-right: var(--space-2); min-height: auto; }
.btn-text:hover { text-decoration: underline; background: transparent; }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-body-lg); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-caption); min-height: 36px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------------- Forms ---------------- */
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.form-field .hint { display: block; margin-top: var(--space-1); font-size: var(--text-caption); color: var(--on-surface-muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], input[type="file"], textarea, select,
.woocommerce table.shop_table td select, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
  width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface); color: var(--on-surface); font-size: var(--text-body); line-height: 1.4;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
legend { font-weight: 700; margin-bottom: var(--space-3); }
.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.radio-pill input, .checkbox-pill input { position: absolute; opacity: 0; }
.radio-pill label, .checkbox-pill label { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: 999px; cursor: pointer; font-weight: 500; }
.radio-pill input:checked + label, .checkbox-pill input:checked + label { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Quantity — WooCommerce's native .quantity/.qty restyled as the design's
   − / + stepper (main.js injects the buttons into any .quantity). */
.quantity-stepper, .woocommerce .quantity { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-1); }
.woocommerce .quantity .qty { width: 56px; min-height: 44px; text-align: center; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface); -moz-appearance: textfield; appearance: textfield; }
.woocommerce .quantity .qty::-webkit-outer-spin-button, .woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-stepper button { width: 44px; min-height: 44px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: var(--text-h4); font-weight: 600; line-height: 1; color: var(--primary); cursor: pointer; }
.quantity-stepper button:hover { background: var(--surface-tertiary); }

/* ---------------- Cards / product grid ---------------- */
.card, ul.products li.product {
  background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--duration-base), transform var(--duration-base);
  padding: 0 !important; margin: 0 !important;
}
.card:hover, ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-media { aspect-ratio: 4 / 3; background: var(--white); position: relative; overflow: hidden; }
/* A percentage width/height on the img doesn't reliably resolve against
   this grid/flex-item box (confirmed by direct testing on the live
   homepage — with display:grid; place-items:center the img fell back to
   rendering at its own intrinsic pixel size instead of filling the box,
   however big the box was). Taking the img out of that layout with
   position:absolute + inset:0 sizes it against .card-media's own definite
   box instead, which isn't subject to that resolution quirk, so
   width/height:100% + object-fit:contain actually fill the box now. */
.card-media img, .card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.card-title { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 700; margin-bottom: var(--space-2); line-height: 1.3; }
.card-title a { color: var(--primary); text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.price, .woocommerce .price, ul.products li.product .price { font-weight: 700; color: var(--accent); font-size: var(--text-h4); }
.rating, .woocommerce .star-rating { color: var(--brass); font-weight: 600; font-size: var(--text-caption); }
.badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-navy, .onsale { background: var(--primary) !important; color: var(--on-primary) !important; position: absolute; top: 12px; left: 12px; z-index: 2; }
.badge-outline { background: transparent; border: 1px solid var(--border-default); color: var(--on-surface-secondary); }

ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); list-style: none; padding: 0; margin: 0 0 var(--space-8); }
@media (max-width: 1199px) { ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) { ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3) !important; } }
ul.products li.product { position: relative; } /* anchor for the .onsale badge */
/* The whole card content sits inside one link — no underlines inside cards. */
ul.products li.product a { text-decoration: none; }
ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-serif); font-size: var(--text-h4); color: var(--primary); padding: var(--space-4) var(--space-4) 0; }
ul.products li.product .price { padding: 0 var(--space-4) var(--space-4); display: block; }
/* Fill the full 4:3 frame on every card. A handful of product photos are
   uploaded much smaller than the ~500x500 catalog standard (e.g. 200x200),
   and the previous "never crop" behavior (object-fit: contain) let those
   display small and letterboxed instead of matching their neighbors —
   explicitly traded for consistent sizing across the grid, at the cost of
   a small edge-crop on photos whose aspect ratio isn't already 4:3. */
ul.products li.product a img {
  display: block;
  /* Photos are never cropped — object-fit: contain shows the full artwork,
     letterboxed inside the 4:3 frame if the source isn't already that
     ratio. width:100% + aspect-ratio still forces every card to the same
     box size regardless of the source photo's native resolution (a few
     product photos are uploaded much smaller than the ~500x500 standard);
     that part stays even though cropping doesn't. */
  width: 100%;
  height: auto;
  border-radius: 0;
  margin: 0;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--white);
}
/* Stretch the link so the add-to-cart button pins to the bottom of every card. */
ul.products li.product .woocommerce-LoopProduct-link { flex: 1; display: block; }
ul.products li.product .button { margin: auto var(--space-4) var(--space-4); }
/* "Select options" / "Add to cart" wraps to 2 lines on the mobile 2-column
   product grid — the button's horizontal padding alone leaves too little
   room at that column width. Tighter padding plus a slightly smaller size
   keeps it to one line without shrinking the button into an awkward shape. */
@media (max-width: 767px) {
  ul.products li.product .button { font-size: 0.8125rem; padding: var(--space-2) var(--space-3); white-space: nowrap; }
}

/* Product category tiles (shop page when Woo is set to show categories) —
   match the homepage "Shop by branch" cards: photo on top, serif name
   centered below, count in heritage red instead of the browser's default
   yellow <mark> highlight. */
ul.products li.product-category a { text-decoration: none; }
ul.products li.product-category img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--surface-secondary); margin: 0; }
ul.products li.product-category .woocommerce-loop-category__title { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 700; color: var(--primary); text-align: center; padding: var(--space-4); line-height: 1.3; }
ul.products li.product-category mark.count, ul.products li.product-category .count { background: none; color: var(--accent); font: inherit; font-weight: 700; padding: 0; }

/* Star ratings — WooCommerce's default stylesheet (which we dequeue)
   supplied the star font; this replaces it with plain Unicode stars.
   Unprefixed on purpose: ratings also render via shortcodes on non-Woo
   pages (e.g. the homepage best-sellers section). */
.star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; font-size: 1em; width: 5.4em; letter-spacing: 0.1em; display: block; }
ul.products li.product .star-rating { margin: var(--space-2) var(--space-4) 0; }
.star-rating::before { content: "★★★★★"; color: var(--border-default); float: left; top: 0; left: 0; position: absolute; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: "★★★★★"; top: 0; position: absolute; left: 0; color: var(--brass); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 1199px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }

/* ---------------- Breadcrumbs ---------------- */
.woocommerce-breadcrumb, .breadcrumb { font-size: var(--text-caption); color: var(--on-surface-muted); padding: var(--space-4) 0; display: block; }
.woocommerce-breadcrumb a, .breadcrumb a { color: var(--on-surface-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover, .breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
/* The breadcrumb trail renders as an <ol> (see inc/woocommerce.php) — reset
   the list so items sit inline with "/" separators instead of numbers. */
.breadcrumb ol, .woocommerce-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li, .woocommerce-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after, .woocommerce-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--on-surface-muted); }
.breadcrumb li[aria-current="page"] { color: var(--on-surface); font-weight: 600; }

/* ---------------- Pagination ---------------- */
.pagination, nav.woocommerce-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-8); }
nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.pagination a, .pagination span, nav.woocommerce-pagination a, nav.woocommerce-pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--border-default); font-weight: 600; text-decoration: none; color: var(--on-surface); }
.pagination .current, nav.woocommerce-pagination .current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
/* Page-link buttons at 44px each plus gap overran a phone-width screen
   before they could wrap, so the whole row poked past the page edge. */
@media (max-width: 480px) {
  .pagination, nav.woocommerce-pagination { gap: var(--space-1); }
  nav.woocommerce-pagination ul { gap: var(--space-1); }
  .pagination a, .pagination span, nav.woocommerce-pagination a, nav.woocommerce-pagination span { min-width: 36px; height: 36px; padding: 0 var(--space-1); font-size: var(--text-caption); }
}

/* ---------------- Hero ---------------- */
.hero { background: var(--surface-secondary); padding: var(--space-16) 0; }
.hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.hero h1 { margin-bottom: var(--space-4); }
.hero p { font-size: var(--text-body-lg); color: var(--on-surface-secondary); margin-bottom: var(--space-6); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-visual { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 100%); border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--brass-300); box-shadow: var(--shadow-lg); overflow: hidden; }
/* Same fix as .card-media img below: height:100% doesn't reliably resolve
   against this grid-item wrapper's aspect-ratio-derived height. */
.hero-visual img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
/* "Make it yours" heading (homepage): at the default --text-h2 size this
   wraps to 2 lines as soon as the 2-column layout kicks in (≥768px) — the
   column's own width scales continuously with the viewport up to the
   1280px container cap, not in discrete steps, so a single fixed override
   only happened to fit some widths in testing and still wrapped at others.
   A fluid clamp() tracks that scaling directly (coefficients fitted against
   the column's measured width at 768/992/1280px) so it fits on one line
   throughout 768–1280px and beyond, rather than at a couple of sample
   breakpoints. */
@media (min-width: 768px) {
  .make-it-yours-copy h2 { font-size: clamp(1.0625rem, calc(2.54vw - 2.5px), 1.875rem); }
}
/* Responsive YouTube embeds pasted as raw <iframe> markup into page/post
   content (e.g. "Share > Embed" from YouTube) — these ship with fixed
   width/height HTML attributes (commonly 560x315) that don't shrink below
   that width, causing horizontal overflow on mobile. Only overridden below
   767px — desktop/tablet keep the embed's original fixed size. Defined
   before the hero section's own iframe rule below so that one (sized
   against its own 4:3 container) still wins there. */
@media (max-width: 767px) {
	iframe[src*="youtube.com"], iframe[data-src*="youtube.com"],
	iframe[src*="youtu.be"], iframe[data-src*="youtu.be"] { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; }
}
.hero-video { padding: 0; background: #000; }
.hero-video iframe { width: 100%; height: 100%; border: none; display: block; border-radius: var(--radius-lg); }
@media (max-width: 767px) { .hero .container { grid-template-columns: 1fr; } .hero-visual { order: -1; } }

/* ---------------- Shop / archive layout ---------------- */
.plp-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 991px) { .plp-layout { grid-template-columns: 1fr; } }
.filters, .widget-area.shop-sidebar { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: 140px; }
.filters .widget, .widget-area.shop-sidebar .widget { margin-bottom: var(--space-5); }
.filters h4 { margin-bottom: var(--space-3); font-size: var(--text-h5); }
/* The "Product Categories" heading main.js injects gets its own rule
   (rather than sharing .filters h4) so its size can change independently
   of the Filter Everything widget's own section headings. */
.widget-area.shop-sidebar .widget-title { margin-bottom: var(--space-3); font-size: var(--text-body); }

/* WordPress core "Categories" widget inside the shop sidebar — default
   output is a plain bulleted list; restyle to match the rest of the filter
   panel, and (via assets/js/main.js) collapse to 10 entries with a
   "Show All" / "Show less" toggle instead of one long scroll. */
.widget-area.shop-sidebar .wp-block-categories-list {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2);
}
.widget-area.shop-sidebar .wp-block-categories-list .cat-item {
	font-size: var(--text-body); color: var(--on-surface-muted);
}
.widget-area.shop-sidebar .wp-block-categories-list .cat-item a { color: var(--on-surface); font-weight: 400; text-decoration: none; }
.widget-area.shop-sidebar .wp-block-categories-list .cat-item a:hover { color: var(--accent); text-decoration: none; }
/* WordPress adds .current-cat to whichever category archive is currently
   being viewed — the only one that should read as bold/highlighted. */
.widget-area.shop-sidebar .wp-block-categories-list .cat-item.current-cat a { color: var(--accent); font-weight: 700; }
/* Generic hide — used on individual <li>s (10-item limit, search mismatch)
   and on the "Show All" toggle itself (hidden while a search is active). */
.widget-area.shop-sidebar .pp-term-hidden { display: none; }
.widget-area.shop-sidebar .pp-terms-search {
	width: 100%; margin-bottom: var(--space-3); min-height: 40px;
	padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md);
	background: var(--surface); font-size: var(--text-caption);
}
.widget-area.shop-sidebar .pp-terms-search:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.widget-area.shop-sidebar .pp-terms-toggle {
	display: inline-flex; align-items: center; margin-top: var(--space-3);
	background: none; border: 0; padding: 0; color: var(--primary); font-weight: 600;
	font-size: var(--text-caption); cursor: pointer; text-decoration: none;
}
.widget-area.shop-sidebar .pp-terms-toggle:hover { color: var(--accent); text-decoration: none; }
.plp-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.category-intro { margin-bottom: var(--space-8); }
.category-intro p { max-width: 72ch; }
/* .section .category-intro (2 classes), not just .category-intro, so this
   beats .section p a below (1 class + 2 elements) — that rule was winning
   over a plain .category-intro a and keeping these links at --primary. */
.section .category-intro a { color: var(--accent); }
.section .category-intro a:hover { color: var(--accent-hover); }
.woocommerce-result-count, .woocommerce-ordering { margin: 0; }

/* ---------------- PDP ---------------- */
.pdp-layout, div.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-10); }
@media (max-width: 991px) { .pdp-layout, div.product { grid-template-columns: 1fr; gap: var(--space-6); } }
.gallery-main, .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); display: grid; place-items: center; margin-bottom: var(--space-4); overflow: hidden; }
.gallery-main { background: var(--surface-secondary); }
.woocommerce-product-gallery__image { background: #fff; }
/* Same fix as .card-media img above: height:100% doesn't reliably resolve
   against this grid-item wrapper's aspect-ratio-derived height. */
.gallery-main img, .woocommerce-product-gallery__image img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
/* On galleries with 2+ images, FlexSlider sets an inline
   `display:block; float:left; width:...px` on .woocommerce-product-gallery__image
   to lay out slides side by side — that inline style overrides the
   `display:grid; place-items:center` above (inline beats any non-!important
   class rule), so the <a> inside reverts to a block element that fills the
   slide's full width, which previously stretched the image with it. Centering
   the <a> itself keeps the image inset at its natural size regardless of
   whether FlexSlider has taken over the parent's display mode. */
.woocommerce-product-gallery__image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pdp-title, .product_title { margin-bottom: var(--space-3); }
.pdp-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); color: var(--on-surface-muted); font-size: var(--text-caption); }
.pdp-price-block { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.pdp-price, div.product p.price { font-size: 2rem; font-weight: 700; color: var(--accent); }
.pdp-lead-time { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--success); font-weight: 600; }
.customizer, .pp-engraving-fields { background: var(--surface-secondary); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.customizer h3, .pp-engraving-fields h3 { margin-bottom: var(--space-4); }
.option-row { margin-bottom: var(--space-4); }
.option-row label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.engrave-preview { border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; background: var(--surface); color: var(--on-surface-muted); margin-bottom: var(--space-4); }
.pdp-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--on-surface-secondary); }
.trust-item svg { flex-shrink: 0; color: var(--brass); }

/* ---------------- Single product page (WooCommerce markup → pdp.html) ----------------
   Woo renders gallery + summary + tabs + related inside div.product; the
   grid below places them to match pdp.html (gallery left, summary right,
   tabs under the summary, related full-width). */
.single-product div.product { align-items: start; }
.single-product div.product .woocommerce-product-gallery { grid-row: 1 / span 2; min-width: 0; }
.single-product div.product .summary { min-width: 0; margin-bottom: 0; }
.single-product div.product .woocommerce-tabs { grid-column: 1 / -1; }
.single-product div.product .related.products { grid-column: 1 / -1; }
@media (max-width: 991px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related.products { grid-column: 1; grid-row: auto; }
}

/* Gallery — flexslider markup (Woo enqueues the JS; its CSS came from the
   dequeued WooCommerce stylesheets, so the essentials are rebuilt here). */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-viewport { overflow: hidden; position: relative; border-radius: var(--radius-lg); background: var(--surface-secondary); }
.woocommerce-product-gallery .slides { margin: 0; padding: 0; list-style: none; }
.woocommerce-product-gallery .slides::after { content: ""; display: block; clear: both; }
.woocommerce-product-gallery .slides > li { position: relative; }
.flexslider .slides > li { display: none; backface-visibility: hidden; }
.flexslider .slides > li:first-child { display: block; }
.woocommerce-product-gallery .slides img { width: 100%; display: block; border-radius: var(--radius-lg); }
/* Thumbnails — match the design's .gallery-thumbs row. */
.flex-control-thumbs { display: flex; gap: var(--space-3); list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.flex-control-thumbs li { flex: 0 0 80px; width: 80px; }
.flex-control-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); cursor: pointer; opacity: 0.65; display: block; border: 2px solid transparent; transition: opacity var(--duration-fast), border-color var(--duration-fast); }
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--accent); }
/* Flexslider direction nav (Woo gallery prev/next) — overlay arrows on the
   featured photo. Woo's flexslider injects this nav; styled to match design. */
.flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.flex-direction-nav li { position: absolute; top: 40%; z-index: 5; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--primary); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: background var(--duration-fast), color var(--duration-fast); }
.flex-direction-nav li:hover { background: var(--primary); color: var(--on-primary); }
.flex-direction-nav li a { display: block; width: 100%; height: 100%; position: relative; color: transparent; font-size: 0; line-height: 0; text-decoration: none; }
.flex-direction-nav li a::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.flex-direction-nav li.flex-nav-prev { left: var(--space-3); }
.flex-direction-nav li.flex-nav-prev a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.flex-direction-nav li.flex-nav-prev:hover a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.flex-direction-nav li.flex-nav-next { right: var(--space-3); }
.flex-direction-nav li.flex-nav-next a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
.flex-direction-nav li.flex-nav-next:hover a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }

/* Zoom trigger icon (wc-product-gallery-zoom) */
.woocommerce-product-gallery__trigger { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--primary); display: grid; place-items: center; text-decoration: none; box-shadow: var(--shadow-sm); }
.woocommerce-product-gallery__trigger:hover { background: var(--primary); color: var(--on-primary); }

/* Summary — rating row, stock badge, price, meta. */
.woocommerce-product-rating { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.woocommerce-product-rating .star-rating { margin: 0; }
.woocommerce-review-link { color: var(--on-surface-muted); font-size: var(--text-caption); text-decoration: none; }
.woocommerce-review-link:hover { color: var(--primary); }
.single-product div.product p.price { margin-bottom: var(--space-5); }
.single-product div.product p.price del { color: var(--on-surface-muted); font-weight: 400; font-size: 0.65em; margin-right: var(--space-2); }
.single-product div.product p.price ins { text-decoration: none; }
.single-product .stock { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: var(--text-caption); font-weight: 600; border: 1px solid var(--border-default); color: var(--on-surface-secondary); background: var(--surface); }
.single-product .stock.in-stock { color: var(--success); border-color: var(--success); }
.single-product .stock.out-of-stock { color: var(--danger); border-color: var(--danger); }
.woocommerce-product-details__short-description { margin-bottom: var(--space-5); color: var(--on-surface-secondary); }
.product_meta { border-top: 1px solid var(--border-default); padding-top: var(--space-4); font-size: var(--text-caption); color: var(--on-surface-muted); display: block; width: 100%; text-align: left; }
.product_meta > span { display: inline-block; margin-right: var(--space-4); margin-bottom: var(--space-1); }
.single-product .posted_in { display: inline-block; }
.product_meta a, .single-product .woocommerce-Tabs-panel a { color: var(--accent); text-decoration: none; }
.product_meta a:hover, .single-product .woocommerce-Tabs-panel a:hover { text-decoration: underline; }

/* Add to cart form — boxed like the design's .customizer module. */
.single-product form.cart { background: var(--surface-secondary); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.single-product form.cart .quantity { margin: 0; height: 56px; }
.single-product form.cart .quantity .qty { height: 100%; min-height: 0; }
.single-product form.cart .quantity-stepper button { height: 100%; min-height: 0; }
.single-product .single_add_to_cart_button { background: var(--accent) !important; color: var(--on-accent) !important; flex: 1 1 220px; height: 56px; min-height: 56px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-body-lg); }
.single-product .single_add_to_cart_button:hover { background: var(--accent-hover) !important; }

/* Variations (variable products keep Woo's default templates). */
.single-product .variations { width: 100%; border: 0; margin: 0; }
.single-product .variations td { display: block; width: 100%; padding: 0 0 var(--space-3); border: 0; }
.single-product .variations label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.single-product .variations select { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-body); }
.single-product .reset_variations { display: inline-block; font-size: var(--text-caption); color: var(--on-surface-muted); margin-bottom: var(--space-3); }
.single-product .woocommerce-variation { width: 100%; }
.single-product .woocommerce-variation-price { margin-bottom: var(--space-3); }

/* Product add-on fields (Custom Artwork uploads, Size/Finish selects, etc.)
   rendered by add-ons plugins inside form.cart. */
.single-product form.cart .product-addon,
.single-product form.cart .ppom-field-wrapper,
.single-product form.cart .wc-pao-addon { width: 100%; margin-bottom: var(--space-4); }
.single-product form.cart .product-addon label,
.single-product form.cart .product-addon .product-addon-name,
.single-product form.cart .ppom-field-wrapper label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.single-product form.cart .product-addon input[type="text"],
.single-product form.cart .product-addon textarea,
.single-product form.cart .product-addon select,
.single-product form.cart input.ppom-input,
.single-product form.cart select.ppom-input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-body); }
.single-product form.cart .product-addon textarea { min-height: 96px; }
.single-product form.cart .product-addon .description,
.single-product form.cart .product-addon small { display: block; margin-top: var(--space-1); font-size: var(--text-caption); color: var(--on-surface-muted); }
.single-product form.cart select,
.single-product form.cart input[type="file"],
.single-product form.cart .form-row { width: 100%; max-width: 100%; }
.single-product form.cart input[type="file"] { font-size: var(--text-caption); padding: var(--space-3); border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: var(--surface); }

/* Reviews tab. */
#reviews .commentlist { list-style: none; margin: 0; padding: 0; }
#reviews .commentlist .comment { border-bottom: 1px solid var(--border-default); padding: var(--space-4) 0; }
#reviews .comment_container { display: flex; gap: var(--space-4); align-items: flex-start; }
#reviews .comment_container img.avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
#reviews .comment-text .star-rating { margin: 0 0 var(--space-2); }
#reviews .comment-form, .comment-form { max-width: 640px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 50%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-body); }
.comment-form textarea { min-height: 140px; }
@media (max-width: 767px) { .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; } }
.comment-form .submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-body); cursor: pointer; transition: background var(--duration-fast); }
.comment-form .submit:hover { background: var(--accent-hover); color: var(--on-accent); }
#reviews .comment-form label { display: block; font-weight: 600; margin-bottom: var(--space-2); }

/* Related / upsells — same cards as the homepage Best Sellers. */
.related.products, .upsells.products { margin-top: var(--space-8); }
.related.products > h2, .upsells.products > h2 { margin-bottom: var(--space-6); }
/* Related/upsells use the base 3-column product grid (3 desktop / 2 tablet / 2 mobile). */

/* Overflow safeguards — long words/URLs or oversized plugin text must never
   push the PDP wider than the page container. */
.single-product div.product > * { min-width: 0; }
.single-product .summary, .single-product .woocommerce-tabs { overflow-wrap: break-word; }
/* Option-field help text from add-on plugins (e.g. "Please choose your
   required finish") renders at body size, not heading size. */
.single-product form.cart :where(h1, h2, h3, h4, h5, p) { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: 1.5; }

/* Native WooCommerce tabs restyled to match design tabs */
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-5); list-style: none; padding: 0; display: flex; gap: var(--space-2); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--on-surface-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--primary); border-bottom-color: var(--accent); }
.accordion-item { border-bottom: 1px solid var(--border-default); }
.accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; background: none; border: 0; font-weight: 600; font-size: var(--text-body); text-align: left; cursor: pointer; }
.accordion-body { padding-bottom: var(--space-4); color: var(--on-surface-secondary); }
.accordion-header[aria-expanded="true"] .chevron { transform: rotate(180deg); }


/* ---------------- Cart / Checkout (WooCommerce native markup, restyled) ---------------- */
.woocommerce table.shop_table { border: 1px solid var(--border-default); border-radius: var(--radius-lg); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--surface-secondary); font-family: var(--font-serif); color: var(--primary); padding: var(--space-3) var(--space-4); text-align: left; }
.woocommerce table.shop_table td { padding: var(--space-4); border-top: 1px solid var(--border-default); vertical-align: middle; }
.woocommerce-cart-form, .woocommerce-checkout-review-order { margin-bottom: var(--space-6); }

/* Cart page layout: items left, totals card right (matches cart.html). */
.woocommerce-cart div.woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.woocommerce-cart div.woocommerce .woocommerce-notices-wrapper,
.woocommerce-cart div.woocommerce .cart-empty, .woocommerce-cart div.woocommerce .return-to-shop { grid-column: 1 / -1; }
@media (max-width: 991px) { .woocommerce-cart div.woocommerce { grid-template-columns: minmax(0, 1fr); } }

/* Cart line items. */
.woocommerce .product-thumbnail img { width: 100px; height: 100px; min-width: 100px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-secondary); display: block; }
.woocommerce .product-name a { font-family: var(--font-serif); font-weight: 700; color: var(--primary); text-decoration: none; font-size: var(--text-h5); }
.woocommerce .product-name a:hover { text-decoration: underline; }
.woocommerce .variation { margin-top: var(--space-1); font-size: var(--text-caption); color: var(--on-surface-muted); }
.woocommerce .variation dt, .woocommerce .variation dd { display: inline; margin: 0; }
.woocommerce .variation dd { margin-right: var(--space-2); }
.woocommerce td.product-remove a.remove { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-default); color: var(--danger); text-decoration: none; font-size: var(--text-h5); line-height: 1; }
.woocommerce td.product-remove a.remove:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }
.woocommerce td.product-quantity .quantity { background: var(--surface-secondary); }
.woocommerce td.product-subtotal .woocommerce-Price-amount { color: var(--accent); font-weight: 700; }
.woocommerce .actions { background: var(--surface-secondary); }
.woocommerce .actions::after { content: ""; display: block; clear: both; }
.woocommerce .actions .coupon { float: left; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.woocommerce .actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.woocommerce .actions .coupon input#coupon_code { width: 240px; flex: 0 0 auto; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); }
.woocommerce .actions > .button { float: right; margin-left: 0; }
@media (max-width: 767px) {
  .woocommerce .actions .coupon { float: none; margin-bottom: var(--space-3); }
  .woocommerce .actions .coupon input#coupon_code { flex: 1 1 100%; }
  /* The "Apply coupon" button is a flex child of .coupon alongside the
     input — without its own full-width rule it stayed shrink-wrapped to its
     label instead of stacking full width under the field. */
  .woocommerce .actions .coupon .button { flex: 1 1 100%; width: 100%; }
  .woocommerce .actions > .button { float: none; display: block; width: 100%; }
}

/* Order summary card. */
.cart_totals, #order_review { background: var(--surface-secondary); border-radius: var(--radius-lg); padding: var(--space-6); }
.cart_totals h2, #order_review h3 { margin-top: 0; }
.cart_totals table.shop_table { width: 100%; border: 0; border-radius: 0; }
.cart_totals ul { list-style: none; margin: 0; padding: 0; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { background: transparent; border: 0; border-bottom: 1px solid var(--border-default); padding: var(--space-3) 0; font-family: var(--font-sans); text-align: left; }
.cart_totals table.shop_table td { text-align: right; }
.cart_totals table.shop_table tr:last-child th, .cart_totals table.shop_table tr:last-child td { border-bottom: 0; }
.cart_totals .order-total th, .cart_totals .order-total td { font-weight: 600; font-size: var(--text-h4); }
.cart_totals .order-total .woocommerce-Price-amount { color: var(--primary); }
.wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout .checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: var(--space-4); background: var(--accent) !important; color: var(--on-accent) !important; border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-body-lg); text-decoration: none; }
.wc-proceed-to-checkout .checkout-button:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Cart table on small screens — stacked rows (Woo's smallscreen CSS was
   part of the dequeued defaults, rebuilt here). */
@media (max-width: 767px) {
  .woocommerce table.shop_table.cart thead, .woocommerce-cart-form table.shop_table thead { display: none; }
  .woocommerce table.shop_table.cart tr, .woocommerce-cart-form table.shop_table tr { display: block; border-top: 1px solid var(--border-default); padding: var(--space-3) 0; }
  .woocommerce table.shop_table.cart td, .woocommerce-cart-form table.shop_table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); border: 0; padding: var(--space-2) 0; text-align: right; }
  .woocommerce table.shop_table.cart td::before, .woocommerce-cart-form table.shop_table td::before { content: attr(data-title); font-weight: 600; text-align: left; color: var(--on-surface-muted); }
  .woocommerce table.shop_table.cart td.product-thumbnail, .woocommerce-cart-form table.shop_table td.product-thumbnail { justify-content: center; }
  .woocommerce table.shop_table.cart td.product-remove, .woocommerce-cart-form table.shop_table td.product-remove { justify-content: flex-end; }
  .woocommerce table.shop_table.cart td.product-thumbnail::before, .woocommerce table.shop_table.cart td.product-remove::before, .woocommerce table.shop_table.cart td.actions::before,
  .woocommerce-cart-form table.shop_table td.product-thumbnail::before, .woocommerce-cart-form table.shop_table td.product-remove::before, .woocommerce-cart-form table.shop_table td.actions::before { content: none; }

  /* td.actions holds the coupon form AND the "Update cart" button as two
     direct children — the generic label:value flex row above put them
     side by side in a single non-wrapping line, so Update cart was squeezed
     against the coupon form and ran off the edge of the screen instead of
     the three controls (coupon field, Apply coupon, Update cart) stacking.
     Switching it to block lets each child's own full-width rule apply. */
  .woocommerce table.shop_table.cart td.actions, .woocommerce-cart-form table.shop_table td.actions { display: block; }

  /* td.product-name holds more than one child — the product link AND its
     variation list (size/finish/etc.) — so the generic label:value flex row
     above laid all three (label, link, variation list) out as separate
     side-by-side flex items with nowhere to go, overflowing the screen at
     narrow widths (seen at 360px). Stack it as a block instead: label on its
     own line, then the name and variation details below, left-aligned so
     the variation list (often a full sentence) can wrap normally. */
  .woocommerce table.shop_table.cart td.product-name, .woocommerce-cart-form table.shop_table td.product-name {
    display: block;
    text-align: left;
  }
  .woocommerce table.shop_table.cart td.product-name::before, .woocommerce-cart-form table.shop_table td.product-name::before {
    display: block;
    margin-bottom: var(--space-1);
  }
}

/* ---------------- Checkout page (matches cart.html) ----------------
   Fields left, order review + payment right; Woo's two-column floats were
   part of the dequeued defaults, rebuilt here. */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 991px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } }
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; min-width: 0; }
.woocommerce-checkout #customer_details > .col-1, .woocommerce-checkout #customer_details > .col-2 { width: 100%; float: none; padding: 0; margin-bottom: var(--space-6); }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review, .woocommerce-checkout #payment { grid-column: 2; min-width: 0; }
@media (max-width: 991px) { .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review, .woocommerce-checkout #payment { grid-column: 1; grid-row: auto; } }

/* Form rows: labels bold, full-width fields, half-width name pairs. */
.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce form .form-row label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - var(--space-2)); }
.woocommerce form .form-row-first { float: left; }
.woocommerce form .form-row-last { float: left; }
.woocommerce form .form-row-wide { clear: both; }
.woocommerce form .form-row select, .woocommerce form .form-row .select2-container { width: 100%; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-family: var(--font-serif); color: var(--primary); }
/* Select2 (country/state dropdowns). */
.select2-container--default .select2-selection--single { min-height: 48px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; padding: 0 var(--space-4); color: var(--on-surface); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; top: 1px; right: 6px; }
.select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--primary); box-shadow: var(--shadow-focus); outline: none; }
.select2-dropdown { border: 1px solid var(--border-default); border-radius: var(--radius-md); }

/* Order review card — same treatment as the cart totals card. */
#order_review table.shop_table { border: 0; border-radius: 0; background: transparent; }
#order_review table.shop_table th, #order_review table.shop_table td { background: transparent; border: 0; border-bottom: 1px solid var(--border-default); padding: var(--space-3) 0; font-family: var(--font-sans); text-align: left; }
#order_review table.shop_table tr:last-child th, #order_review table.shop_table tr:last-child td { border-bottom: 0; }
#order_review table.shop_table td, #order_review table.shop_table .product-total, #order_review table.shop_table thead th:last-child, #order_review table.shop_table tfoot td { text-align: right; }
#order_review table.shop_table td.product-name, #order_review table.shop_table th, #order_review table.shop_table thead th:first-child { text-align: left; }
#order_review .order-total th { font-family: var(--font-serif); color: var(--primary); font-weight: 700; }
#order_review .order-total td, #order_review .order-total td strong { font-weight: 700; font-size: inherit; }
#order_review .order-total .woocommerce-Price-amount { color: var(--primary); }
#order_review table.shop_table ul { list-style: none; margin: 0; padding: 0; }
#order_review .product-name .product-quantity { color: var(--on-surface-muted); font-weight: 400; }
#order_review .variation, .woocommerce .variation dd p { margin: 0; }
#order_review .variation dd p, .woocommerce .variation dd p { display: inline; }
#order_review .product-name .variation { font-size: var(--text-caption); color: var(--on-surface-muted); margin-top: var(--space-1); }

/* Payment card. */
.woocommerce-checkout #payment { background: var(--surface-secondary); border-radius: var(--radius-lg); padding: 0; margin-top: var(--space-6); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.woocommerce-checkout #payment .wc_payment_method { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.woocommerce-checkout #payment .wc_payment_method:last-child { border-bottom: 0; }
.woocommerce-checkout #payment .wc_payment_method > label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--primary); cursor: pointer; }
/* Payment method logos capped at 100px. */
.woocommerce-checkout #payment .wc_payment_method img { max-width: 100px; height: auto; vertical-align: middle; }
.woocommerce-checkout #payment .payment_box { margin: var(--space-3) 0 0; padding: 0; background: none; border: 0; font-size: var(--text-caption); color: var(--on-surface-secondary); }
.woocommerce-checkout #payment .payment_box p { margin: 0; }
.woocommerce-checkout #payment .place-order { margin: var(--space-4) 0 0; padding: 0; }
.woocommerce-checkout #place_order { width: 100%; min-height: 56px; background: var(--accent) !important; color: var(--on-accent) !important; border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-body-lg); }
.woocommerce-checkout #place_order:hover { background: var(--accent-hover) !important; }
.woocommerce-terms-and-conditions-wrapper { font-size: var(--text-caption); color: var(--on-surface-secondary); margin-bottom: var(--space-4); }

/* ---------------- WooCommerce notices (success / info / error) ----------------
   Woo's notice styles were part of the dequeued defaults — rebuilt to match
   the design system's .notice pattern. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); list-style: none; background: var(--surface); border: 1px solid var(--border-default); border-left: 4px solid var(--info); border-radius: var(--radius-md); color: var(--on-surface); }
.woocommerce-message { border-left-color: var(--success); }
.woocommerce-error { border-left-color: var(--danger); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.woocommerce-message::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }
.woocommerce-info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231B4F72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }
.woocommerce-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B71C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--primary); }
.woocommerce-message .button, .woocommerce-message .wc-forward, .woocommerce-info .button, .woocommerce-error .button { margin-left: auto; flex-shrink: 0; min-height: 44px; }
.woocommerce-error li { width: 100%; }
@media (max-width: 767px) {
  .woocommerce-message, .woocommerce-info, .woocommerce-error { flex-wrap: wrap; }
  .woocommerce-message .button, .woocommerce-message .wc-forward { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------------- Quote flow (page-quote.php) ---------------- */
.quote-progress { display: flex; justify-content: space-between; margin-bottom: var(--space-8); position: relative; }
.quote-progress::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: var(--border-default); z-index: 0; }
.quote-step { position: relative; z-index: 1; text-align: center; flex: 1; }
.quote-step .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-default); margin: 0 auto var(--space-2); display: grid; place-items: center; font-weight: 700; font-size: var(--text-caption); }
.quote-step.active .dot, .quote-step.completed .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.quote-step-label { font-size: var(--text-caption); font-weight: 600; color: var(--on-surface-muted); }
.quote-step.active .quote-step-label { color: var(--accent); }
.quote-panel { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); }
@media (max-width: 767px) { .quote-panel { padding: var(--space-5); } }
.quote-nav { display: flex; justify-content: space-between; margin-top: var(--space-8); }
.quote-fieldset { display: none; }
.quote-fieldset.is-active { display: block; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--primary); color: var(--on-primary); padding: var(--space-16) 0 var(--space-6); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); margin-bottom: var(--space-10); }
@media (max-width: 991px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4, .footer-col .widget-title { color: var(--brass-300); font-size: var(--text-h5); margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-caption); color: rgba(255,255,255,0.7); }

/* ---------------- Notices / empty / error states ---------------- */
.notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border-left: 4px solid var(--primary); background: var(--surface-secondary); }
.notice-success { border-left-color: var(--success); }
.empty-state, .error-state { text-align: center; padding: var(--space-16) var(--space-6); }
.empty-state-icon { width: 80px; height: 80px; margin: 0 auto var(--space-4); color: var(--pewter); }
.error-code { font-size: 6rem; font-family: var(--font-serif); font-weight: 700; color: var(--primary); line-height: 1; }

/* ---------------- Utility ---------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.max-w-prose { max-width: 70ch; }

/* ---------------- Ninja Forms (newsletter + general forms) ----------------
Styles Ninja Forms' own markup so it matches the design. Scoped to the
homepage newsletter (.newsletter-form wraps the [ninja_form id="5"]
shortcode in front-page.php). */
.newsletter-form { max-width: 540px; margin: 0 auto; text-align: left; }
.newsletter-form .nf-form-content nf-fields-wrap{ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-4); padding: 0; margin: 0; }
.newsletter-form .nf-field-container { margin: 0; flex: 1 1 240px; position: relative; }
.newsletter-form .nf-field-container.submit-container { flex: 0 0 auto; }
/* Label stays in the DOM for accessibility but the design is placeholder-only. */
.newsletter-form .nf-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.newsletter-form .nf-field-element input[type="email"],
.newsletter-form .nf-field-element input[type="text"] { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-body); line-height: 1.4; }
.newsletter-form .nf-field-element input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.newsletter-form .nf-error .nf-field-element input { border-color: var(--danger); }
.newsletter-form .nf-error-msg { color: var(--danger); font-size: var(--text-caption); margin-top: var(--space-1); }
.newsletter-form .nf-field-element input.nf-element[type="button"],
.newsletter-form .nf-field-element input[type="submit"],
.newsletter-form .nf-field-element button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-body); line-height: 1.4; cursor: pointer; transition: background var(--duration-fast); }
.newsletter-form .nf-field-element input.nf-element[type="button"]:hover,
.newsletter-form .nf-field-element input[type="submit"]:hover,
.newsletter-form .nf-field-element button:hover { background: var(--accent-hover); }
.newsletter-form .nf-response-msg { text-align: center; color: var(--success); font-weight: 600; margin-top: var(--space-4); }
.newsletter-form .nf-form-errors .nf-error-msg { text-align: center; }

/* With NF3's custom-element markup, the flex items of nf-fields-wrap are
   the <nf-field> elements themselves — let the email field grow to fill. */
.newsletter-form nf-fields-wrap > nf-field { flex: 1 1 240px; min-width: 0; }
.newsletter-form nf-fields-wrap > nf-field:last-child { flex: 0 0 auto; }

/* Product Add-Ons container spans the full form width. */
.wc-pao-addons-container { width: 100%; }

/* Filter Everything renders its selected-terms chips both inside the
   shop/category description (a leftover in the description content) and in
   its standard spot above the results — hide the in-description duplicate. */
.page-description .wpc-custom-selected-terms, .category-intro .wpc-custom-selected-terms { display: none; }

/* Notice icons take the section accent color. */
.notice svg { flex-shrink: 0; color: var(--primary); }

/* Utility: clear floats (e.g. after Woo's floated form rows). */
.clear { clear: both; }

/* Requested adjustments (shop tables, order review, filter chips, ratings). */
.woocommerce table.shop_table { width: 100%; }
.woocommerce table.shop_table td.product-total { text-align: right; }
/* Hide Filter Everything's selected-terms chips inside the shop header
   (they already render above the results). */
.woocommerce-products-header .wpc-custom-selected-terms { display: none; }
/* Star ratings: sans font and brass color, forced over plugin styles. */
.star-rating span, .star-rating span:before { font-family: var(--font-sans) !important; color: var(--brass) !important; }

/* ---------------- Content links + form buttons ---------------- */
/* Links inside page content (hero text, sections) — navy, no underline. */
.hero p a, .section p a, .section li a { color: var(--primary); text-decoration: none; }
.hero p a:hover, .section p a:hover, .section li a:hover { text-decoration: underline; }

/* Ninja Forms submit buttons match the primary button design site-wide
   (the newsletter-scoped rules above remain for its inline layout). */
.nf-form-content .nf-field-element input.nf-element[type="button"],
.nf-form-content .nf-field-element input[type="submit"],
.nf-form-content .nf-field-element button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-body); line-height: 1.4; cursor: pointer; transition: background var(--duration-fast); }
.nf-form-content .nf-field-element input.nf-element[type="button"]:hover,
.nf-form-content .nf-field-element input[type="submit"]:hover,
.nf-form-content .nf-field-element button:hover { background: var(--accent-hover); color: var(--on-accent); }
.nf-before-form-content .nf-form-fields-required {display: none;}

/* Capability statement — the "If You Require Assistance…" call-out inside the
   Why We're Better content: heritage red, with breathing room above. */
.capability-assist :is(h1, h2, h3, h4, strong) { color: var(--accent); }
.capability-assist :is(h1, h2, h3, h4), .capability-assist p:has(strong) { margin-top: var(--space-10); }

/* ---------------- Single post content ---------------- */
/* Photos: one per line, centered. */
.post-content img { display: block; width: auto; max-width: 100%; height: auto; object-fit: contain; margin-left: auto; margin-right: auto; margin-bottom: var(--space-4); }
.post-content figure, .post-content .wp-block-image { display: block; margin: 0 auto var(--space-4); text-align: center; }
.post-content figure img, .post-content .wp-block-image img { margin-bottom: var(--space-2); }
.post-content figcaption { font-size: var(--text-caption); color: var(--on-surface-muted); text-align: center; }

/* Buttons inside post content use the default button design. */
.post-content .wp-block-button__link,
.post-content .wp-element-button,
.post-content a.button,
.post-content button:not([type="number"]),
.post-content input[type="button"],
.post-content input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-body); line-height: 1.4; text-decoration: none; cursor: pointer; transition: background var(--duration-fast); }
.post-content .wp-block-button__link:hover,
.post-content .wp-element-button:hover,
.post-content a.button:hover,
.post-content button:not([type="number"]):hover,
.post-content input[type="button"]:hover,
.post-content input[type="submit"]:hover { background: var(--accent-hover); color: var(--on-accent); }

/* WordPress image alignment classes. */
.alignleft {
	display: inline;
	float: left;
	margin-right: 15px !important;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 15px !important;
}

/* Links nested inside button elements stay white and un-underlined. */
.post-content button:not([type="number"]) a {
	color: #fff;
	text-decoration: none;
}

.post-content button:not([type="number"]) a:hover {
	color: #fff;
	text-decoration: none;
}

/* Comment form: uniform label width so fields align in a column;
   fields at 60% width (10% wider than before). */
.comment-form label { display: block; width: 100%; font-weight: 600; margin-bottom: var(--space-2); padding: 0; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; vertical-align: top; }
@media (max-width: 767px) {
	.comment-form label { width: 100%; padding-top: 0; margin-bottom: var(--space-1); display: block; }
	.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; }
}

/* ---------------- Single post layout + blog sidebar ---------------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--space-8); align-items: start; }
@media (max-width: 991px) { .post-layout { grid-template-columns: 1fr; } }
.post-sidebar { position: sticky; top: 140px; }
@media (max-width: 991px) { .post-sidebar { position: static; } }
.post-widget, .post-sidebar .widget, .post-sidebar .widget_block, .post-sidebar .widget-area .widget { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.post-widget .widget-title, .post-widget h4, .post-sidebar .widget-title, .post-sidebar h2, .post-sidebar h3, .post-sidebar h4 { margin: 0 0 var(--space-3); font-family: var(--font-serif); color: var(--primary); font-size: var(--text-h3); }
.post-widget ul, .post-sidebar .widget ul, .post-sidebar .widget_block ul { list-style: none; margin: 0; padding: 0; }
.post-widget li, .post-sidebar .widget li, .post-sidebar .widget_block li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border-default); }
.post-widget li:last-child, .post-sidebar .widget li:last-child, .post-sidebar .widget_block li:last-child { border-bottom: 0; }
.post-widget a, .post-sidebar .widget a, .post-sidebar .widget_block a { color: var(--on-surface); text-decoration: none; }
.post-widget a:hover { color: var(--accent); text-decoration: underline; }
.post-widget .post-date { display: block; font-size: var(--text-overline); color: var(--on-surface-muted); }
.post-widget select, .post-widget input[type="text"], .post-widget input[type="search"] { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-body); }

/* Comment section styled like the About Us contact form card. */
.comments-area { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-8); }
.comments-area .comment-reply-title, .comments-area h2, .comments-area h3 { margin-top: 0; font-family: var(--font-serif); color: var(--primary); }
.comment-form p { margin-bottom: var(--space-4); }
.comment-form .required { color: var(--danger); }
.comment-form .comment-notes, .comment-form .logged-in-as { font-size: var(--text-caption); color: var(--on-surface-muted); }

/* ---------------- My Account (login / register) ----------------
   Card design matching the About Us contact form. Woo's column CSS was part
   of the dequeued defaults, rebuilt here. */
.woocommerce .u-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 767px) { .woocommerce .u-columns { grid-template-columns: 1fr; } }
.woocommerce .u-columns .u-column1, .woocommerce .u-columns .u-column2 { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); }
.woocommerce .u-columns h2 { margin-top: 0; font-family: var(--font-serif); color: var(--primary); }
.woocommerce form.woocommerce-form-login .form-row, .woocommerce form.woocommerce-form-register .form-row { display: block; width: 100%; margin-bottom: var(--space-4); float: none; padding: 0; }
.woocommerce form.woocommerce-form-login label, .woocommerce form.woocommerce-form-register label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.woocommerce form.woocommerce-form-login .input-text, .woocommerce form.woocommerce-form-register .input-text { width: 100%; min-height: 48px; }
.woocommerce .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.woocommerce .woocommerce-form-login__rememberme input { width: auto; }
.woocommerce .woocommerce-LostPassword { margin: var(--space-4) 0 0; }
.woocommerce .woocommerce-LostPassword a { color: var(--primary); text-decoration: none; }
.woocommerce .woocommerce-LostPassword a:hover { text-decoration: underline; }
.woocommerce form.woocommerce-form-login .button, .woocommerce form.woocommerce-form-register .button { min-height: 48px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--primary); text-decoration: none; font-weight: 600; font-size: var(--text-caption); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.woocommerce-account .woocommerce-MyAccount-content table { width: 100%; }

/* ---------------- My Account: login-only card ----------------
   When registration on My Account is disabled, inc/woocommerce.php wraps
   the login form in .u-columns.pp-login-only (one card, centered). */
.woocommerce .u-columns.pp-login-only { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 767px) { .woocommerce .u-columns.pp-login-only { grid-template-columns: 1fr; } }

/* ---------------- My Account: password visibility toggle ----------------
   WooCommerce's frontend JS wraps password fields in .password-input and
   appends a .show-password-input button (toggles .display-password when the
   password is visible). Default Woo styles are dequeued, so we style it here:
   eye icon overlaid inside the field, right-hand side. */
.woocommerce .password-input { position: relative; display: block; width: 100%; }
.woocommerce .password-input .input-text { padding-right: 52px; }
.woocommerce .show-password-input {
	position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
	width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
	border: 0; border-radius: var(--radius-sm); background-color: transparent; box-shadow: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.woocommerce .show-password-input:hover { background-color: var(--surface-tertiary); }
.woocommerce .show-password-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.woocommerce .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* ---------------- My Account: lost/reset password card ----------------
   The WooCommerce reset form renders without the .u-columns wrapper, so the
   form itself is styled as the same card used for login/register. Covers both
   the "request reset link" form and the "choose new password" form (they share
   the .woocommerce-ResetPassword.lost_reset_password classes). */
.woocommerce form.woocommerce-ResetPassword { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 560px; margin-left: auto; margin-right: auto; }
.woocommerce form.woocommerce-ResetPassword .form-row { display: block; width: 100%; margin-bottom: var(--space-4); float: none; padding: 0; }
.woocommerce form.woocommerce-ResetPassword label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.woocommerce form.woocommerce-ResetPassword .input-text { width: 100%; min-height: 48px; }
.woocommerce form.woocommerce-ResetPassword .button { min-height: 48px; }

/* ---------------- My Account: content forms as cards ----------------
   Forms inside the account area (edit address, account details, add payment
   method) render as the same bordered card used across the account pages.
   Full width at every breakpoint. */
.woocommerce-account .woocommerce-MyAccount-content > form { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); width: 100%; box-sizing: border-box; }
.woocommerce-account .woocommerce-MyAccount-content > form > h3 { margin-top: 0; font-family: var(--font-serif); color: var(--primary); }
.woocommerce-account .woocommerce-MyAccount-content > form .form-row label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.woocommerce-account .woocommerce-MyAccount-content > form .input-text, .woocommerce-account .woocommerce-MyAccount-content > form select { min-height: 48px; }
.woocommerce-account .woocommerce-MyAccount-content > form fieldset { border: 0; padding: 0; margin: var(--space-5) 0 0; }
.woocommerce-account .woocommerce-MyAccount-content > form .button { min-height: 48px; }
.woocommerce-account .woocommerce-MyAccount-content > form::after { content: ""; display: block; clear: both; }

/* ---------------- My Account: separate login/register pages ----------------
   /my-account/ (logged out) shows only the Login card; the page-register.php
   template wraps the shortcode in .pp-register-page and shows only Register.
   The visible card drops to the single centered layout, and each form carries
   a cross-link (pp-account-switch) to the other page. */
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 { display: none; }
body.woocommerce-account:not(.logged-in) #customer_login.u-columns { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pp-register-page #customer_login .u-column1 { display: none; }
.pp-register-page #customer_login.u-columns { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 767px) {
	body.woocommerce-account:not(.logged-in) #customer_login.u-columns, .pp-register-page #customer_login.u-columns { grid-template-columns: 1fr; }
}
.woocommerce .pp-account-switch { margin: var(--space-4) 0 0; font-size: var(--text-caption); color: var(--on-surface-secondary); }

/* ---------------- My Account: left sidebar navigation ----------------
   Logged-in account pages place the navigation as a vertical card in a left
   sidebar, content on the right. On tablet/mobile it stacks back on top.
   The :has() guard keeps the logged-out login/register layout untouched. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { grid-column: 2; }
.woocommerce-account .woocommerce-MyAccount-navigation { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; flex-wrap: nowrap; margin-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; width: 100%; box-sizing: border-box; }
@media (max-width: 991px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { grid-column: 1 / -1; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a { display: inline-flex; width: auto; }
}

/* Gap between side-by-side buttons (e.g. View / Invoice in the orders table) */
.woocommerce-account .woocommerce-MyAccount-content .button + .button { margin-left: var(--space-2); }

/* Account tables (Orders, Downloads) on small screens: forcing a 640px
   min-width + horizontal scroll pushed the table past the page edge instead
   of containing it, since the single-column mobile grid track has no
   explicit min-width:0. Stack each row as label/value pairs instead — same
   technique as the cart table, and it reads the same data-title attributes
   WooCommerce already renders on these cells — so the table stays full
   width with no scrolling in either direction. */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead { display: none; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr { display: block; border-top: 1px solid var(--border-default); padding: var(--space-3) 0; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); border: 0; padding: var(--space-2) 0; text-align: right; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before { content: attr(data-title); font-weight: 600; text-align: left; color: var(--on-surface-muted); }
}

/* ---------------- Footer bottom bar links ----------------
   The Privacy / Terms / Accessibility links inherited the global navy link
   color and were invisible on the navy footer. */
.footer-bottom a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-bottom a:hover { color: var(--white); text-decoration: underline; }
/* Privacy/Terms/Accessibility is now an editable menu (Appearance > Menus >
   Footer — Legal Links) instead of hardcoded links — styled to read the
   same as before: inline, centered, separated by "·". */
.footer-legal-menu { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; }
.footer-legal-menu li:not(:last-child)::after { content: "\00b7"; margin-left: var(--space-2); color: rgba(255,255,255,0.5); }

/* ---------------- Checkout: billing/shipping cards ----------------
   Billing details, shipping address, and order notes render as bordered
   cards — same card style as the contact/login forms. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); }
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 { margin-top: 0; }
.woocommerce-checkout #customer_details > .col-1, .woocommerce-checkout #customer_details > .col-2 { margin-bottom: 0; }
.woocommerce-checkout .woocommerce-billing-fields::after,
.woocommerce-checkout .woocommerce-shipping-fields::after,
.woocommerce-checkout .woocommerce-additional-fields::after { content: ""; display: block; clear: both; }

/* ---------------- Order Received page ----------------
   Intro row: thank-you notice + order overview on the left, the payment
   gateway message ("We will send our invoice…") on the right — removes the
   long stretch of whitespace under the overview list. */
.woocommerce-order .pp-thankyou-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-8); }
.woocommerce-order .pp-thankyou-intro--solo { grid-template-columns: 1fr; }
@media (max-width: 767px) { .woocommerce-order .pp-thankyou-intro { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Billing and shipping addresses side by side (Woo's float CSS is dequeued,
   so the columns were stacking full width). */
.woocommerce .woocommerce-columns--addresses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.woocommerce .woocommerce-columns--addresses > .woocommerce-column { width: 100%; max-width: none; float: none; padding: 0; }
@media (max-width: 767px) { .woocommerce .woocommerce-columns--addresses { grid-template-columns: 1fr; } }

/* Requested verbatim: left-align product totals in shop tables. */
.woocommerce table.shop_table td.product-total {text-align: left;}

/* Breathing room between the order details table and the address columns. */
.woocommerce-order .woocommerce-customer-details { margin-top: var(--space-8); }

/* ---------------- Mobile responsiveness fixes ----------------
   Grid tracks must be allowed to shrink below their content's min-content
   width, otherwise the shop layout and product cards overflow the viewport
   on phones (seen on /products/ at ~390px). */
.plp-layout { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 991px) { .plp-layout { grid-template-columns: minmax(0, 1fr); } }
.plp-layout > * { min-width: 0; }
ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Filter card internals (Filter Everything) must never exceed the card. */
.filters, .widget-area.shop-sidebar { min-width: 0; }
.filters .wpc-filters-widget-wrapper, .filters .wpc-filters-scroll-container, .filters .wpc-filter-content, .filters .wpc-filters-section, .filters .wpc-filter-header { max-width: 100%; min-width: 0; }
.filters input.wpc-filter-search-field { min-width: 0; max-width: 100%; }
.filters .wpc-range-slider-wrapper, .filters .wpc-range-slider, .filters .wpc-price-filter-widget-content-wrapper { max-width: 100%; min-width: 0; }
@media (max-width: 991px) { .filters, .widget-area.shop-sidebar { position: static; } }

/* Shop toolbar: stack result count and sorting on small screens. */
@media (max-width: 767px) {
	.plp-header { flex-direction: column; align-items: stretch; }
	.plp-header .woocommerce-ordering select { width: 100%; }
}

/* Checkout single-column track must be shrinkable too. */
@media (max-width: 991px) { .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); } }

/* Mobile header: logo + account/cart icons + menu stay on the top row;
   phone number + "Request Custom Quote" drop to their own full-width row
   below the search bar (.header-quote is order:4, right after
   .header-search's order:3 from the 991px breakpoint above), spread edge to
   edge, instead of being hidden or squeezed in alongside the icons. */
@media (max-width: 767px) {
	.site-header .container { gap: var(--space-2); }
	.header-actions { gap: var(--space-2); }
	.header-actions svg { width: 20px; height: 20px; }
	/* Even with .header-quote and .header-search both pushed off the first
	   row (above), the logo text alone was still wide enough at common phone
	   widths (confirmed at 390px, and down to 360px) to push the hamburger
	   toggle past the end of the row and onto a line of its own, since
	   flex-wrap can only move whole items, not shrink them. Shrinking the
	   logo lockup and the account/cart icons here is what actually buys back
	   the room the toggle needs. */
	.logo { font-size: 0.9375rem; gap: 6px; }
	.logo-mark { width: 28px; height: 28px; }
	.logo-mark img { width: 28px; height: 28px; }
	.header-quote {
		flex: 1 1 100%; justify-content: space-between; order: 4; margin-top: var(--space-2);
		/* Collapsed by assets/js/main.js once the page scrolls away from the
		   top, so this row doesn't permanently eat into the sticky header's
		   share of a small phone screen while browsing. max-height (not
		   display:none) so it can animate shut instead of snapping away. */
		overflow: hidden; max-height: 80px; opacity: 1;
		transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-fast) ease, margin-top var(--duration-base) var(--ease-out);
	}
	.header-quote.is-collapsed { max-height: 0; opacity: 0; margin-top: 0; }
	.header-phone { font-size: var(--text-caption); }
}