/*
Theme Name: Ink Windows
Theme URI: https://inkwindows.com
Author: Ink Windows
Description: Custom theme for Ink Windows — a curated catalog of fountain pen ink samples, reviews, and pens.
Version: 1.8.4
Requires PHP: 8.1
Text Domain: inkwindows
*/

/* ============================================================
   Self-hosted faces the Font Library doesn't have (latin subset).
   Montserrat 400/600/800, Inter 400 and Lustria come from the Font Library.
   ============================================================ */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 22%, transparent);

  --color-accent: #DC0000;
  --color-accent-600: color-mix(in srgb, #DC0000 82%, black);
  --color-accent-700: color-mix(in srgb, #DC0000 65%, black);
  --color-accent-100: color-mix(in srgb, #DC0000 12%, #f3f2f2);
  /* Accent used as plain text sitting directly on the page background (links,
     ghost buttons) — as opposed to --color-accent's other job filling
     buttons/badges with white/dark text on top. Same value as --color-accent
     until dark mode needs to diverge them; see the dark block below. */
  --color-accent-ink: #C80000; /* red for text: 5:1 on the light greys; fills stay --color-accent */
  --color-pros-ink: #46667f; /* the teal, darkened to 5.5:1 for small text */

  --color-neutral-300: #d7d3d3;
  --color-highlight-1: #FAB95B; /* gold */
  --color-eyebrow: #82643a; /* the gold, darkened to 4.9:1 on the light page */
  --color-highlight-2: #547792; /* teal */

  --color-navy: #13293D;
  --color-navy-surface: #1D3C55;
  --color-navy-text: #FFFEFE;
  --color-navy-divider: color-mix(in srgb, #FFFEFE 15%, transparent);
  --color-header-hat: #121B26;

  /* Logomark brand palette (Ink Window Logo - Final): fixed values, not
     theme-dependent — the light/dark swap below picks which pair applies. */
  --logo-ink: #121B26;
  --logo-paper: #E8E2DB;
  --logo-amber: #FAB95B;
  --logo-amber-deep: #9C7140;

  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Lustria', Georgia, serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #201e1d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #201e1d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #201e1d 22%, transparent);

  --wrap: 1280px;
  /* Left/right page margin. Set per content type and per page by
     inc/layout-margins.php (Customizer + editor sidebar); this is only the
     fallback if that inline style is missing. */
  --gutter: 20px;
}

/* ============================================================
   Dark mode

   Site-wide light/dark toggle (assets/js/theme-toggle.js sets
   `data-theme` on <html> and persists it to localStorage under the key
   `theme`; a pre-paint script in header.php reads it before first
   render). This reuses the theme's own navy scale — already used to
   invert individual sections (.section-navy, .listing-filters,
   .pdp-buybox, .contact-info) — as the dark page canvas, so dark mode
   looks like more of the site rather than a bolted-on new palette:

     page bg     -> --color-header-hat (darkest of the three navy tones)
     surfaces    -> --color-navy       (one step up — cards, inputs)
     navy panels -> --color-navy-surface (unchanged; they already sit one
                    step up from --color-navy, so they keep reading as a
                    raised/featured band rather than blending into the
                    page)

   --color-accent stays true brand red for filled surfaces (buttons,
   badges, dots) — only --color-accent-ink and --color-accent-700 (both
   used as plain text) get a lighter shade, because #DC0000 body text does
   not clear WCAG AA on navy. This mirrors the pens/pen-reference app's
   own dark mode (src/styles/theme.css), which solved the same problem
   the same way, so red text reads the same shade of "brand red, lightened
   for dark" on both halves of the site.

   The pens app and this theme share one origin, so they already agree on
   a visitor's choice via localStorage — no extra sync needed.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: var(--color-header-hat);
    --color-surface: var(--color-navy);
    --color-text: var(--color-navy-text);
    --color-divider: var(--color-navy-divider);
    --color-neutral-300: color-mix(in srgb, var(--color-navy-text) 20%, var(--color-navy));
    --color-accent-ink: #ff6b5e;
    --color-accent-700: #ff9c8f;
    --color-eyebrow: var(--color-highlight-1);
    --color-pros-ink: var(--color-highlight-2);
    --color-accent-100: color-mix(in srgb, var(--color-accent) 22%, var(--color-navy));
    --shadow-sm: 0 1px 2px color-mix(in srgb, black 45%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, black 50%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, black 60%, transparent);
    color-scheme: dark;
  }
  :root:not([data-theme='light']) a:hover { color: var(--color-highlight-1); }
}
[data-theme='dark'] {
  --color-bg: var(--color-header-hat);
  --color-surface: var(--color-navy);
  --color-text: var(--color-navy-text);
  --color-divider: var(--color-navy-divider);
  --color-neutral-300: color-mix(in srgb, var(--color-navy-text) 20%, var(--color-navy));
  --color-accent-ink: #ff6b5e;
  --color-accent-700: #ff9c8f;
  --color-eyebrow: var(--color-highlight-1);
  --color-pros-ink: var(--color-highlight-2);
  --color-accent-100: color-mix(in srgb, var(--color-accent) 22%, var(--color-navy));
  --shadow-sm: 0 1px 2px color-mix(in srgb, black 45%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, black 50%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, black 60%, transparent);
  color-scheme: dark;
}
[data-theme='dark'] a:hover { color: var(--color-highlight-1); }
[data-theme='light'] { color-scheme: light; }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 30px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0 0 var(--space-3); padding-left: 20px; }
blockquote { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.5; margin: 0 0 var(--space-4); }
.text-muted { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.grayscale { filter: grayscale(1) contrast(1.08); }
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-text); color: var(--color-bg);
  padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* The side gutter is !important on purpose: many sections set vertical
   spacing with the `padding: X 0` shorthand (inline styles on the archive
   and single templates, .content-page, .hero-split, .footer-bottom .wrap…),
   which used to wipe the left/right margin to 0. Only the gutter is
   forced — top/bottom padding stays with each section. */
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #FFFEFE; }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-highlight-1); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent-ink); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   Tags
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; font-size: 12px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-ink); }
.tag-neutral { background: var(--color-neutral-300); color: var(--color-text); }

/* ============================================================
   Forms
   ============================================================ */
.field { margin-bottom: 18px; }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 8px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; }
label.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5;
  cursor: pointer; color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
label.checkbox-row input { accent-color: var(--color-accent); width: 17px; height: 17px; margin-top: 1px; flex: none; }
.checkbox-option { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin-bottom: 9px; cursor: pointer; }
.checkbox-option input { accent-color: var(--color-accent); width: 15px; height: 15px; }
/* Color shades sit indented under their family in the listing filter. */
.checkbox-option.is-child { padding-left: 22px; font-size: 13px; margin-bottom: 7px; }
.checkbox-option.depth-2 { padding-left: 44px; }

/* ============================================================
   Layout: header
   ============================================================ */
/* Text is --color-navy-text (an unconditional white), not --color-bg: the
   bar's own background is always --color-header-hat regardless of theme,
   so its text needs a color that's always light too — --color-bg is only
   "light" in light mode, and becomes this same dark tone in dark mode,
   which would make the text disappear into its own background.
   border-bottom is a no-op in light mode (the page below is already
   lighter than the bar) but keeps the bar legible as a distinct band in
   dark mode, where the page canvas is this same --color-header-hat. */
.promo-bar { background: var(--color-header-hat); color: var(--color-navy-text); border-bottom: 1px solid var(--color-navy-divider); }
.promo-bar .wrap {
  padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center;
  justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; text-align: center;
}
.promo-bar a { color: var(--color-navy-text); text-decoration: underline; font-weight: 700; white-space: nowrap; }

.site-header .wrap {
  padding-top: 22px; padding-bottom: 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
}
.site-logo-img { height: 64px; width: auto; display: block; }
.site-logo { display: flex; align-items: center; gap: 14px; }
.site-header .site-logo-img { height: 84px; }

/* Light/dark logomark pair: same [data-theme] + system-preference
   selectors as every other dark-mode value above, since an <img src>
   can't be driven by a CSS variable. */
.site-logo-img-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .site-logo-img-light { display: none; }
  :root:not([data-theme='light']) .site-logo-img-dark { display: block; }
}
[data-theme='dark'] .site-logo-img-light { display: none; }
[data-theme='dark'] .site-logo-img-dark { display: block; }

/* "Ink Windows" wordmark beside the icon — live text in Lustria
   (--font-display), not baked into the logo image, so it's always crisp
   and stays in sync with the real webfont. Same brand pairing as the
   icon: "Ink" takes the opposite neutral, "Windows" takes the amber for
   the current ground (regular amber on dark, the deeper amber on light —
   see --logo-* tokens above). */
.site-logo-word { display: flex; flex-direction: column; line-height: 0.92; font-family: var(--font-display); }
.site-logo-word-1, .site-logo-word-2 { font-size: 28px; }
.site-header .site-logo-word-1, .site-header .site-logo-word-2 { font-size: 36px; }
.site-logo-word-1 { color: var(--logo-ink); }
.site-logo-word-2 { color: var(--logo-amber-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .site-logo-word-1 { color: var(--logo-paper); }
  :root:not([data-theme='light']) .site-logo-word-2 { color: var(--logo-amber); }
}
[data-theme='dark'] .site-logo-word-1 { color: var(--logo-paper); }
[data-theme='dark'] .site-logo-word-2 { color: var(--logo-amber); }

.primary-nav { display: flex; align-items: center; gap: 36px; }
.primary-nav a { color: var(--color-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.primary-nav a:hover, .primary-nav a.is-active { color: var(--color-accent); }
.nav-item { position: relative; }
.nav-item > span {
  font-size: 14px; font-weight: 600; cursor: default; display: flex; align-items: center; gap: 4px;
  padding-bottom: 12px; margin-bottom: -12px;
}
.nav-item .nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; background: var(--color-bg);
  border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); min-width: 180px;
  z-index: 10; padding: 6px 0;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: block; }
.nav-item .nav-dropdown a { display: block; padding: 10px 16px; font-size: 14px; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-actions svg { display: block; }
.header-actions .btn { font-size: 13px; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 11px; margin: -11px; }

/* Header search: the icon opens a panel under the header, right-aligned to
   the page content and never wider than the screen (assets/js/nav.js). */
.site-header .wrap { position: relative; }
.header-search-toggle { background: none; border: none; cursor: pointer; padding: 10px; margin: -10px; display: flex; color: inherit; }
.header-search-toggle:hover, .header-search-toggle[aria-expanded="true"] { color: var(--color-accent); }
.header-search-form {
  position: absolute; z-index: 30; top: calc(100% - 12px); right: var(--gutter);
  width: min(440px, calc(100% - 2 * var(--gutter))); display: flex; gap: 8px; padding: 12px;
  background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-md);
}
.header-search-form[hidden] { display: none; }
.header-search-form .input { flex: 1; min-width: 0; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Site-wide light/dark toggle — see assets/js/theme-toggle.js. Same look
   as the pens/pen-reference app's own toggle, so it reads as one control
   across both halves of the site. */
.theme-toggle {
  appearance: none; flex: none; border: 1px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-text); padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 15px; line-height: 1; transition: border-color 120ms, background 120ms;
}
.theme-toggle:hover { border-color: var(--color-accent); background: var(--color-accent-100); }

.breadcrumbs { font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent); padding: 20px 0 0; }
.breadcrumbs a { color: inherit; display: inline-block; min-height: 24px; line-height: 24px; }
.breadcrumbs .current { color: var(--color-text); }

/* ============================================================
   Layout: footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--color-divider); }
.footer-grid {
  padding: 44px 0 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.footer-grid .site-logo { margin-bottom: 12px; }
.footer-grid .site-logo-img { height: 64px; }
.footer-blurb { font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent); max-width: 26ch; }
.footer-col-title {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800;
  margin: 0 0 12px; font-family: var(--font-heading);
}
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; margin-bottom: 16px; }
.footer-social { display: flex; gap: 12px; }
.footer-bottom { border-top: 1px solid var(--color-divider); }
.footer-bottom .wrap { padding: 16px 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* ============================================================
   Section helpers
   ============================================================ */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-tight { padding: clamp(32px, 5vw, 56px) 0; }
.section-roomy { padding: clamp(72px, 10vw, 128px) 0; }

/* Homepage section header (heading + "view all" link) and optional intro */
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.home-section-intro { font-size: 15px; line-height: 1.6; max-width: 64ch; margin: -20px 0 32px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.section-navy {
  background: var(--color-navy); --color-bg: var(--color-navy-surface); --color-text: var(--color-navy-text);
  --color-divider: var(--color-navy-divider); color: var(--color-navy-text);
}
.section-accent { background: var(--color-accent); color: #FFFEFE; }
.section-accent p { color: #fff; }
.eyebrow {
  display: block; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-eyebrow); font-weight: 800; margin-bottom: 16px;
}

/* Lets a block inside the_content() (e.g. the About page's navy panel and red
   accent quote, set to "Full width" in the block toolbar) bleed edge-to-edge
   even though it's nested inside a max-width .wrap wrapper. */
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.accent-inner { padding: clamp(48px, 7vw, 72px) 0; }
.accent-quote { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.5; margin: 0 0 20px; }
.accent-signoff { font-size: 15px; margin: 0; opacity: 0.9; }
.panel-heading { font-family: var(--font-heading); font-weight: 800; font-size: 16px; margin: 0 0 10px; color: var(--color-text); }
.panel-body { font-size: 14px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0; }
.about-hero-heading { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0; }
.contact-hero-heading { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; margin: 0 0 20px; }

/* ============================================================
   Card grid (inks / reviews)
   ============================================================ */
.grid-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px;
  background: var(--color-divider);
}
.grid-cards.grid-cards-fill { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Home "Freshly Decanted": two rows of 6 on desktop, 3-up / 2-up below. */
.grid-cards.grid-cards-featured { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cards-featured .card-item { padding: 14px; gap: 10px; }
.grid-cards-featured .card-item .card-image { aspect-ratio: 4/3; }
.grid-cards-featured .card-title { font-size: 14px; }
.grid-cards-featured .card-footer { flex-wrap: wrap; gap: 4px; }
@media (max-width: 1100px) { .grid-cards.grid-cards-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-cards.grid-cards-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-item {
  background: var(--color-bg); padding: 20px; display: flex; flex-direction: column;
  gap: 12px; color: var(--color-text); position: relative;
}
.card-item .card-image { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--color-surface); overflow: hidden; }
.card-item .card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-badge {
  position: absolute; top: 8px; left: 8px; background: var(--color-accent); color: #FFFEFE;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px;
}
.card-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 68%, transparent); margin: 0 0 4px; }
.card-title { font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin: 0 0 6px; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.card-price { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }

.placeholder-image {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: 11px; text-align: center; padding: 10px; line-height: 1.4;
}

/* ============================================================
   Property dot-rating
   ============================================================ */
.prop-list { display: flex; flex-direction: column; }
.prop-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.prop-label { font-size: 13.5px; }
.prop-dots { display: flex; gap: 3px; }
.prop-dots span { width: 9px; height: 9px; background: var(--color-neutral-300); display: inline-block; }
.prop-dots span.is-filled { background: var(--color-accent); }

/* ============================================================
   Ink Listing (archive-ink)
   ============================================================ */
.listing-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; }
/* Inks listing with the filter sidebar switched off (Inks listing Page). */
.listing-layout.no-filters { grid-template-columns: minmax(0, 1fr); }
.listing-filters { background: var(--color-navy); --color-bg: var(--color-navy-surface); --color-text: var(--color-navy-text); --color-divider: var(--color-navy-divider); color: var(--color-navy-text); padding: 24px; }
.listing-filters-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-divider); padding-bottom: 14px; margin-bottom: 20px; }
.listing-filters-head span { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.filter-group { border-bottom: 1px solid var(--color-divider); padding-bottom: 18px; margin-bottom: 18px; }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group-title { font-family: var(--font-heading); font-weight: 800; font-size: 13px; margin: 0 0 12px; }
.clear-filters { background: none; border: none; color: var(--color-accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.swatch { width: 12px; height: 12px; border: 1px solid var(--color-divider); display: inline-block; }
.listing-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.result-count { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.sort-select { display: flex; align-items: center; gap: 10px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.sort-select select { width: auto; min-height: 32px; font-size: 13px; padding: 4px 8px; }
.no-results { border: 2px dashed var(--color-divider); padding: 60px 20px; text-align: center; }
.listing-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 32px; }
.listing-pagination .nav-links { display: flex; align-items: center; gap: 14px; }

/* Search results (search.php) */
.search-page-form { display: flex; gap: 8px; max-width: 560px; margin: 0 0 40px; }
.search-page-form .input { flex: 1; min-width: 0; }
.search-group { margin-bottom: 56px; }
.search-page-list { list-style: none; margin: 0; padding: 0; }
.search-page-list li { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.search-page-list a { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-text); }
.search-page-list a:hover { color: var(--color-accent); }
.search-page-list p { margin: 6px 0 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* ============================================================
   Ink Product (single-ink)
   ============================================================ */
.pdp-layout { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); gap: 56px; padding: 24px 0 88px; }
.pdp-gallery-main { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--color-surface); overflow: hidden; }
.pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery-main .pdp-gallery-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.pdp-gallery-main .pdp-gallery-slide.is-active { opacity: 1; visibility: visible; }
.pdp-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.pdp-gallery-thumbs .placeholder-image, .pdp-gallery-thumbs img { aspect-ratio: 1/1; object-fit: cover; }
.pdp-gallery-thumb {
  display: block; position: relative; aspect-ratio: 1/1; padding: 0; border: 2px solid transparent; background: var(--color-surface); overflow: hidden;
  cursor: pointer; opacity: 0.6; transition: opacity .15s ease, border-color .15s ease;
}
.pdp-gallery-thumb img { display: block; width: 100%; height: 100%; }
.pdp-gallery-thumb:hover { opacity: 0.9; }
.pdp-gallery-thumb.is-active { border-color: var(--color-accent); opacity: 1; }
.pdp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pdp-buybox { background: var(--color-navy); --color-bg: var(--color-navy-surface); --color-text: var(--color-navy-text); --color-divider: var(--color-navy-divider); color: var(--color-navy-text); padding: 24px; margin-bottom: 24px; }
.pdp-buybox-label { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 14px; }
.size-options { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.size-option {
  padding: 9px 18px; border: 2px solid var(--color-divider); background: transparent; color: var(--color-text);
  font-family: var(--font-heading); font-weight: 800; font-size: 13px; cursor: pointer;
}
.size-option.is-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text); }
.price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.price-row .price { font-family: var(--font-heading); font-weight: 800; font-size: 26px; }
.price-row .stock-note { font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.wtb-list { display: flex; flex-direction: column; gap: 2px; background: var(--color-divider); }
.wtb-row { background: var(--color-bg); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; color: var(--color-text); }
.wtb-row .visit { font-size: 13px; color: var(--color-accent); font-weight: 700; }
.pdp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; font-size: 13.5px; }
.pdp-info-grid .key { display: block; color: color-mix(in srgb, var(--color-text) 68%, transparent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; }
/* auto-fit (not a fixed repeat(6,…)) so a shorter nib list — reviews list 5,
   the PDP lists 6 — fills the row evenly instead of leaving an empty trailing
   column of divider background where the missing cells would have been. */
.nib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--color-divider); }
.nib-grid .nib-cell { background: var(--color-bg); padding: 14px; }
.nib-grid .nib-cell .placeholder-image, .nib-grid .nib-cell img { aspect-ratio: 4/3; margin-bottom: 8px; }
.nib-grid .nib-cell p { font-size: 12px; text-align: center; margin: 0 0 4px; font-weight: 700; }
.nib-grid .nib-cell p:last-child { margin-bottom: 0; }
/* Ink PDP writing samples: fixed ~156px tiles — twice the ~78px gallery
   thumbnails (420px gallery column, 5 per row) — instead of stretching
   across the full page width. */
.nib-grid.nib-grid-compact { grid-template-columns: repeat(auto-fill, minmax(120px, 156px)); gap: 12px; background: none; }
.nib-grid-compact .nib-cell { padding: 10px; border: 1px solid var(--color-divider); }

/* ============================================================
   Ink Reviews (archive-review / taxonomy-review_category)
   ============================================================ */
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--color-divider); padding-bottom: 20px; margin-bottom: 32px; }
.category-tab {
  padding: 8px 16px; border: 2px solid var(--color-divider); background: transparent; color: var(--color-text);
  font-family: var(--font-heading); font-weight: 800; font-size: 13px; text-decoration: none; display: inline-block;
}
.category-tab.is-active { border-color: var(--color-accent); background: var(--color-accent); color: #FFFEFE; }
.featured-article {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  margin-bottom: 44px; padding: 32px; text-decoration: none;
}
.featured-article .card-image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.article-card .card-image { aspect-ratio: 16/10; }
/* Homepage "Latest Review" banner — the featured article panel, with its own links */
.review-banner { margin-bottom: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.review-banner .card-image { display: block; }
.review-banner .card-title a { color: inherit; text-decoration: none; }
.review-banner .card-title a:hover { text-decoration: underline; }
.review-banner .review-meta { margin: 0 0 12px; }
.review-banner-cta { padding: 4px 0; font-size: 13px; }
.stat-pill { font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--color-text) 68%, transparent); border: 1px solid var(--color-divider); padding: 2px 7px; }

/* ============================================================
   Ink Review Post (single-review)
   ============================================================ */
.review-hero { width: 100%; aspect-ratio: 21/9; margin-bottom: 32px; background: var(--color-surface); overflow: hidden; }
.review-hero img { width: 100%; height: 100%; object-fit: cover; }
.review-meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent); margin: 0 0 28px; }
.review-body p { font-size: 16px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0 0 40px; }
.review-body h2 { font-size: 22px; margin: 0 0 14px; }
.review-body img { margin-bottom: 40px; }
.at-a-glance-card { background: var(--color-surface); padding: 24px; }
.verdict-box { padding: 32px; margin-bottom: 48px; background: var(--color-navy-surface); }
.verdict-box h2, .verdict-box p { color: #FFFEFE; }
.similar-item { border-left: 2px solid var(--color-accent); padding-left: 14px; }
.similar-item p:first-child { font-weight: 800; font-size: 14px; margin: 0 0 3px; }
.similar-item p:last-child { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0; }
.use-item { display: flex; gap: 10px; align-items: baseline; }
.use-item .dot { width: 6px; height: 6px; background: var(--color-accent); flex: none; margin-top: 7px; }
.score-list { display: flex; flex-direction: column; }
.score-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 13.5px; }
.score-overall { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.score-overall .value { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-accent-ink); }
.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pros-cons-title { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; }
.pros-cons-title.pros { color: var(--color-pros-ink); }
.pros-cons-title.cons { color: var(--color-accent-ink); }
.pros-cons-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.faq-item p:first-child { font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin: 0 0 6px; }
.faq-item p:last-child { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 75%, transparent); margin: 0; }
.review-cta { border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 20px 0; margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; padding: clamp(48px, 7vw, 84px) 0 clamp(56px, 8vw, 96px); }
/* Built from Group blocks. WordPress prints its flow spacing (:root :where(.is-layout-flow) > *)
   after this file, so the resets below carry .contact-page to outrank it. */
.contact-page .contact-layout > * { margin-block: 0; }
.contact-info { background: var(--color-navy); --color-bg: var(--color-navy-surface); --color-text: var(--color-navy-text); --color-divider: var(--color-navy-divider); color: var(--color-navy-text); padding: 40px; }
.contact-page .contact-info > * { margin-block: 0; }
.contact-page .contact-info > .eyebrow { margin-bottom: 16px; }
.contact-page .contact-info > .contact-hero-heading { margin-bottom: 20px; }
.contact-intro { font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 44ch; }
.contact-page .contact-info > .contact-intro { margin-bottom: 16px; }
.contact-page .contact-info > .contact-intro:last-of-type { margin-bottom: 36px; }
/* A row: icon (from the is-email / is-whatsapp / is-instagram class), label, then the link. */
.contact-info-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.contact-info-row > * { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.contact-page .contact-info-row > * { margin-block: 0; }
.contact-info-row::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 2px; background: var(--color-accent); -webkit-mask: var(--contact-icon) center / contain no-repeat; mask: var(--contact-icon) center / contain no-repeat; }
.contact-info-row.is-email { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16'/%3E%3Cpath d='M2 6l10 7 10-7'/%3E%3C/svg%3E"); }
.contact-info-row.is-whatsapp { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
.contact-info-row.is-instagram { --contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black'/%3E%3C/svg%3E"); }
.contact-info-row:not(.is-email):not(.is-whatsapp):not(.is-instagram)::before { display: none; }
.contact-info-row > .contact-info-label { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.contact-page .contact-info-row > .contact-info-label { margin-bottom: 4px; }
.contact-page .contact-info-row + .contact-info-row { margin-top: 22px; }
.contact-form-wrap { border: 1px solid var(--color-divider); padding: 32px; }
.contact-page .contact-form-wrap > * { margin-block: 0; }
.contact-page .contact-form-wrap > * + * { margin-top: 18px; }

/* Fluent Forms, dressed as the theme's own fields (.field / .input / .btn-primary). */
.contact-form-wrap .fluentform .ff-el-group { margin-bottom: 18px; }
.contact-form-wrap .fluentform .ff-t-container { gap: 18px; }
.contact-form-wrap .fluentform .ff-t-cell .ff-el-group { margin-bottom: 18px; }
.contact-form-wrap .fluentform .ff-el-input--label { margin-bottom: 5px; }
.contact-form-wrap .fluentform .ff-el-input--label label { font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.contact-form-wrap .fluentform .ff-el-is-required.asterisk-right label::after { color: var(--color-accent-ink); }
.contact-form-wrap .fluentform .ff-el-form-control {
  width: 100%; min-height: 36px; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.4;
  color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: none;
}
.contact-form-wrap .fluentform .ff-el-form-control:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.contact-form-wrap .fluentform .ff-el-form-control:focus { border-color: var(--color-accent); outline: none; box-shadow: none; }
.contact-form-wrap .fluentform .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.contact-form-wrap .fluentform textarea.ff-el-form-control { min-height: 110px; resize: vertical; }
.contact-form-wrap .fluentform .ff-el-tc label.ff_tc_label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.contact-form-wrap .fluentform .ff-el-tc label.ff_tc_label > span, .contact-form-wrap .fluentform .ff-el-tc label.ff_tc_label > div { display: block; padding-top: 0 !important; width: auto; }
.contact-form-wrap .fluentform .ff-el-tc input[type="checkbox"] { accent-color: var(--color-accent); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.contact-form-wrap .fluentform .ff-el-tc a { color: var(--color-accent-ink); }
/* The optional "updates & offers" box (a one-option Checkbox field), styled like the consent box above it. */
.contact-form-wrap .fluentform .ff-el-form-check { margin: 0; }
.contact-form-wrap .fluentform .ff-el-form-check label.ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 78%, transparent); cursor: pointer; }
.contact-form-wrap .fluentform .ff-el-form-check input[type="checkbox"] { accent-color: var(--color-accent); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.contact-form-wrap .fluentform .ff_submit_btn_wrapper { margin-bottom: 0; }
.contact-form-wrap .fluentform .ff-btn-submit {
  display: flex; width: 100%; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
  background: var(--color-accent); color: #FFFEFE; box-shadow: none; opacity: 1;
}
.contact-form-wrap .fluentform .ff-btn-submit:hover { background: var(--color-accent-600); color: var(--color-highlight-1); }
.contact-form-wrap .fluentform .ff-btn-submit:active { background: var(--color-accent-700); }
.contact-form-wrap .fluentform .error, .contact-form-wrap .fluentform .text-danger { color: var(--color-accent-ink); font-size: 12.5px; margin-top: 4px; }
.contact-form-wrap .ff-errors-in-stack { border: 1px solid var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent-100); padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px; }
.contact-form-wrap .ff-errors-in-stack:empty { display: none; }
.contact-form-wrap .ff-message-success { border: none; box-shadow: none; background: transparent; color: var(--color-text); text-align: center; padding: 40px 0; font-size: 15px; }
.contact-form-wrap .ff-message-success p:first-child { font-family: var(--font-heading); font-weight: 800; font-size: 20px; margin: 0 0 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-error { border: 1px solid var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent-100); padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px; }

/* ============================================================
   About page
   ============================================================ */
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; padding: clamp(48px, 7vw, 84px) 0 clamp(32px, 5vw, 56px); }
.about-hero .placeholder-image, .about-hero img { width: 100%; aspect-ratio: 4/3; }
.about-body p { font-size: 17px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0 0 24px; }
.three-col-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 0; }
.three-col-panel > div { padding: 0 28px; border-right: 1px solid var(--color-divider); }
.three-col-panel > div:first-child { padding-left: 0; }
.three-col-panel > div:last-child { border-right: none; padding-right: 0; }

/* ============================================================
   Privacy / generic content page
   ============================================================ */
.content-page { padding: clamp(48px, 7vw, 72px) 0 80px; max-width: 76ch; }
.content-page.wide { max-width: none; }
.content-page h2 { font-size: 20px; margin: 28px 0 14px; }
.content-page p { font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0 0 24px; }
.content-page h3 { font-size: 16px; margin: 24px 0 10px; }
.content-page ul, .content-page ol { margin: 0 0 24px; padding-left: 22px; }
.content-page li { font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0 0 8px; }
.legal-cta { background: var(--color-navy); --color-bg: var(--color-navy-surface); --color-text: var(--color-navy-text); color: var(--color-navy-text); padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* On the navy panels the brand red reads at ~2.2:1; links, outline tags and
   ghost buttons there use the lighter accent the dark theme already uses. */
.section-navy, .listing-filters, .pdp-buybox, .contact-info, .legal-cta { --color-accent-ink: #ff9c8f; --color-eyebrow: var(--color-highlight-1); }
.legal-cta .legal-cta-heading { font-family: var(--font-heading); font-weight: 800; font-size: 16px; margin: 0 0 6px; }
.legal-cta .legal-cta-text { font-size: 14px; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.legal-cta .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; border: 1px solid transparent; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
  background: var(--color-accent); color: #FFFEFE;
}
.legal-cta .wp-block-button__link:hover { background: var(--color-accent-600); color: var(--color-highlight-1); }

/* ============================================================
   Home page
   ============================================================ */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero-split .placeholder-image, .hero-split img { width: 100%; aspect-ratio: 6/5; object-fit: cover; }
.hero-split h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.05; margin: 0 0 20px; letter-spacing: -0.02em; }
.hero-split p { font-size: 17px; line-height: 1.6; max-width: 52ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0 0 32px; }
.shipping-banner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(44px, 6vw, 72px) 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .listing-layout { grid-template-columns: 1fr; }
  .listing-filters { order: 2; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr column won't shrink below its widest
     unbreakable word, which pushed the page sideways on 320px phones. */
  .pdp-layout, .two-col, .contact-layout, .about-hero, .hero-split, .featured-article, .three-col-panel, .shipping-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .three-col-panel > div { border-right: none; border-bottom: 1px solid var(--color-divider); padding: 20px 0 !important; }
  /* Single-column ink page: keep the photo from filling the whole width. */
  .pdp-gallery { max-width: 75%; margin: 0 auto; }
  .three-col-panel > div:last-child { border-bottom: none; }
}
/* The full desktop nav needs ~850px; below 900 it collapses to the menu
   button (assets/js/nav.js uses the same threshold). */
@media (max-width: 900px) {
  .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(280px, 80vw); background: var(--color-bg); flex-direction: column; align-items: flex-start; gap: 0; padding: 80px 24px 24px; transform: translateX(100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); z-index: 40; }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav a { padding: 12px 0; width: 100%; }
  .nav-item { width: 100%; }
  .nav-item .nav-dropdown { position: static; display: block; box-shadow: none; border: none; padding-left: 12px; }
  .menu-toggle { display: block; }
  .site-header .wrap { flex-wrap: wrap; row-gap: 12px; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .contact-info, .contact-form-wrap { padding: 22px; }
  .field-row, .pros-cons-grid { grid-template-columns: 1fr; }
  .pdp-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pdp-gallery { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   Pelikan production timeline (template-pelikan.php)

   A span chart in pure CSS: each bar is positioned as a
   percentage of a shared decade axis, computed in PHP. The
   model name and production years are real text in the row —
   the bars are presentation layered on top, not a substitute,
   so the page reads correctly with CSS off and to a crawler.
   ============================================================ */

.pk-head { max-width: 62ch; margin: 0 0 36px; }
.pk-head h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; margin: 0 0 16px; }
.pk-rule { width: 64px; height: 3px; background: var(--color-accent); margin: 0 0 24px; }
.pk-intro { font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0; }

/* The axis is wide by nature — a century does not compress. Let the chart
   scroll sideways inside its own box rather than crushing the bars, and keep
   the page itself free of horizontal scroll. */
.pk-scroll { overflow-x: auto; padding-bottom: 4px; }
.pk-chart { min-width: 720px; }

/* Shared grid: label · track · owned count. The track column is what every
   percentage in the bars is relative to. */
/* The side columns are FIXED, not auto or minmax. Each row is its own grid, so
   an auto column sizes to that row's own content — a row reading "6 owned (1
   undated)" would get a wider third column, a narrower track, and therefore a
   different scale from the row above it. Same year, different x. Fixed widths
   are what keep every row (and the axis) on one shared coordinate system. */
.pk-axis,
.pk-row {
  display: grid;
  grid-template-columns: 196px 1fr 112px;
  gap: 0 16px;
  align-items: center;
}

/* ── Decade axis ─────────────────────────────────────────── */

.pk-axis { margin-bottom: 6px; }

/* The labels live in a track that occupies the same grid column as the rows'
   tracks below, so a label's `left` and a bar's `left` mean the same thing.
   Positioning them against .pk-axis instead would offset every one of them by
   the width of the label column. */
.pk-axis-track {
  position: relative;
  display: block;
  height: 22px;
}
.pk-axis-year {
  position: absolute;
  bottom: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── Rows ────────────────────────────────────────────────── */

.pk-rows { list-style: none; margin: 0; padding: 0; }

.pk-row { padding: 3px 0; min-height: 46px; }
.pk-row + .pk-row { border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); }

.pk-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
}
.pk-label:hover .pk-name { color: var(--color-accent); }
.pk-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}
.pk-years {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ── Track & bars ────────────────────────────────────────── */

.pk-track {
  position: relative;
  height: 22px;
  /* Decade gridlines. The period is set from PHP as --pk-decade so it always
     matches the axis labels above, whatever the date range grows to. */
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--color-text) 11%, transparent) 0 1px,
    transparent 1px var(--pk-decade, 10%)
  );
}

.pk-bar {
  position: absolute;
  top: 5px;
  height: 12px;
  /* A single-year run (the 400N, 1956) is under 1% of a century. It needs to
     stay wider than the owned-dot that sits on it, or the bar reads as a dot
     with no production span at all. */
  min-width: 7px;
  border-radius: 1px;
  background: var(--color-highlight-2);
}
.pk-row--vintage .pk-bar { background: var(--color-highlight-1); }
.pk-row--modern .pk-bar { background: var(--color-highlight-2); }

/* Still in production: fade the leading edge so the bar reads as open-ended
   rather than as a run that happens to stop this year. */
.pk-bar--open {
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
          mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}

.pk-dot {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 1.5px solid var(--color-bg);
  transform: translateY(-50%);
}

.pk-owned {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  text-align: right;
}
.pk-undated {
  display: block;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* ── Key & footnote ──────────────────────────────────────── */

.pk-key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.pk-key-item { display: inline-flex; align-items: center; gap: 7px; }
.pk-swatch { width: 18px; height: 8px; display: inline-block; }
.pk-swatch--vintage { background: var(--color-highlight-1); }
.pk-swatch--modern { background: var(--color-highlight-2); }
.pk-swatch--dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }

.pk-note {
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  max-width: 68ch;
}

@media (max-width: 640px) {
  .pk-chart { min-width: 660px; }
  .pk-axis,
  .pk-row { grid-template-columns: 132px 1fr 86px; gap: 0 10px; }
  .pk-name { font-size: 13px; }

  /* Label every second decade. At this width the full set collides into one
     unreadable run of digits; the gridlines still mark every decade, so the
     grid stays readable as minor ticks between labelled majors. */
  .pk-axis-year:nth-child(even) { display: none; }
}
=======
/* Inks listing with the filter sidebar switched off (Inks listing Page). */
.listing-layout.no-filters { grid-template-columns: minmax(0, 1fr); }