/*
 * Site Team Base: the design layer.
 *
 * Not a thin reset. A real design system the WordPress Site Team pipeline extends
 * and overrides from the approved design contract. It ships:
 *   1. Fluid foundations   - guards, tokens, everything scales 360px to 1600px+.
 *   2. Layout primitives    - full-bleed by default, container-query responsive.
 *   3. Visual primitives     - grain, gradient, blend, hairline, clip, cursor.
 *   4. Signature sections    - 15 archetype treatments, token-driven.
 *   5. Craft + motion        - states, and the CSS side of the GSAP motion engine.
 *
 * Everything reads a token, so re-theming is a token edit. The pipeline appends
 * per-project overrides after this file; it does not fork it. Full width is the
 * DEFAULT for signature zones, and nothing here depends on the host theme's
 * content-width behaving, so the design survives being dropped into any theme.
 */

/* ------------------------------------------------------------------ *
 * 1. Reset + fluid foundations
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
/* Overflow guard: flex/grid children default to min-width:auto and can push a
 * container wider than the viewport. Zero it everywhere structural. */
.wp-block-columns > *, .wp-block-column, .wp-block-group, [class*="bento-"], .sig__inner > * { min-width: 0; }
/* Client-editable locked headings: one long unbroken token can never overflow. */
:where(h1, h2, h3, h4, .stat-number, .eyebrow) { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }

:root {
  /* Layout fallbacks so constrained content self-heals on a foreign host that
   * never defines these WordPress custom properties. */
  --wp--style--global--content-size: var(--wp--style--global--content-size, 760px);
  --wp--style--global--wide-size: var(--wp--style--global--wide-size, 1200px);
  --container: var(--wp--style--global--wide-size, 1200px);
  --gut: clamp(1.5rem, 4vw, 4rem);
  --measure: 68ch;
  --sig-pad-y: clamp(3.5rem, 8vw, 8rem);
  --sig-gap: clamp(2rem, 5vw, 5rem);
  --radius: 12px;
  --line: var(--wp--preset--color--line, #e7e5e4);
  --shadow-1: 0 1px 2px rgba(12, 10, 9, .06), 0 8px 24px rgba(12, 10, 9, .06);
  --shadow-2: 0 2px 6px rgba(12, 10, 9, .08), 0 24px 60px rgba(12, 10, 9, .12);
  /* Motion tokens, shared by this file and assets/motion.js so nothing drifts. */
  --reveal-y: 24px;
  --reveal-dur: 0.7s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms;
  --dur-entrance: 700ms;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * 2. Typography rhythm
 * ------------------------------------------------------------------ */
.entry-content p, .wp-block-post-content p { max-width: var(--measure); }
:where(.entry-content, .wp-block-post-content) > * + * { margin-block-start: 1.5rem; }
.eyebrow, .has-eyebrow {
  display: inline-block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.is-mono { font-family: var(--wp--preset--font-family--mono); }

/* ------------------------------------------------------------------ *
 * 3. Layout primitives (full-bleed by default, container-query responsive)
 * ------------------------------------------------------------------ */

/* Full-bleed: any .sig section, .full-bleed utility, or the header/footer spans
 * the viewport edge to edge on its own. alignfull in Site Team Base uses the FSE
 * mechanism; the :not(.alignfull) rule guarantees full width everywhere else
 * (foreign host, REST injection). overflow-x is already clipped above so the
 * 100vw breakout never adds a scrollbar. */
.sig, .full-bleed { padding-block: var(--sig-pad-y); }
.sig:not(.alignfull), .full-bleed:not(.alignfull),
.site-header, .site-footer { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.site-header, .site-footer { padding-block: 0; }
/* The readable column inside a full-bleed section. */
.sig__inner, .site-header > .wp-block-group, .site-footer > .wp-block-group {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
.sig__inner.is-narrow { max-width: var(--wp--style--global--content-size); }

/* Sections respond to their OWN rendered width, not the viewport, so a section
 * never breaks when embedded narrower than the screen. */
@supports (container-type: inline-size) {
  .sig, .full-bleed { container-type: inline-size; }
}

/* Editorial asymmetry: uneven split, not centered 50/50. */
.sig-feature .wp-block-columns, .sig-split .wp-block-columns { align-items: center; gap: var(--sig-gap); }
.sig-feature .wp-block-column:first-child { flex-basis: 58%; }
.sig-feature .wp-block-column:last-child { flex-basis: 42%; }
.sig-feature.is-flipped .wp-block-columns { flex-direction: row-reverse; }

/* Bento: real CSS grid, spanning tiles. */
.sig-bento .is-bento, .sig-bento .is-layout-grid.is-bento {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(160px, auto); gap: 1rem;
}
.sig-bento .bento-lg { grid-column: span 4; grid-row: span 2; }
.sig-bento .bento-md { grid-column: span 3; }
.sig-bento .bento-sm { grid-column: span 2; }
.sig-bento .bento-tall { grid-column: span 2; grid-row: span 2; }

.pull-up { margin-block-start: clamp(-6rem, -8vw, -3rem); position: relative; z-index: 2; }
.is-sticky-media .wp-block-column:first-child > * { position: sticky; top: 6rem; }
.bleed-media { aspect-ratio: 16 / 9; }
.bleed-media img { width: 100%; height: 100%; object-fit: cover; }

/* Aspect-ratio media utilities (kill layout shift). */
.ar-16-9 { aspect-ratio: 16 / 9; } .ar-4-5 { aspect-ratio: 4 / 5; }
.ar-1-1 { aspect-ratio: 1 / 1; } .ar-21-9 { aspect-ratio: 21 / 9; } .ar-3-4 { aspect-ratio: 3 / 4; }
[class*="ar-"] > img, [class*="ar-"] > .wp-block-image, [class*="ar-"] img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * 4. Visual primitives (opt-in texture, per the contract's effects block)
 * ------------------------------------------------------------------ */
/* Film grain / noise overlay: fixed, non-interactive, cheap, subtle. */
.grain::after, .noise::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain, .noise { position: relative; }
/* Tonal / mesh gradient washes, driven by tokens. */
.wash-radial { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 60%); }
.wash-mesh {
  background:
    radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), transparent),
    radial-gradient(50% 50% at 85% 30%, color-mix(in srgb, var(--wp--preset--color--accent-2, var(--wp--preset--color--accent)) 16%, transparent), transparent);
}
/* Duotone image treatment via blend. */
.duotone { position: relative; background: var(--wp--preset--color--accent); }
.duotone img { mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.1); }
/* Hairline system: rule lines as a real primitive, not ad hoc borders. */
.hairline { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.hairline-t { border-top: 1px solid var(--line); } .hairline-b { border-bottom: 1px solid var(--line); }
/* Clip-path reveal (paired with motion.js, class or data-attribute). */
[data-clip-reveal], .clip-reveal { clip-path: inset(0 100% 0 0); }
/* Opt-in custom cursor, off by default. Accessible: pointer stays functional. */
.cursor-dot { cursor: none; }
.ff-cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--accent); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; }
@media (hover: none) { .cursor-dot { cursor: auto; } .ff-cursor { display: none; } }

/* ------------------------------------------------------------------ *
 * 5. Signature section treatments (15 archetypes, token-driven defaults)
 * ------------------------------------------------------------------ */
/* Hero */
.sig-hero { padding-block: clamp(4rem, 10vw, 10rem); position: relative; }
.sig-hero :is(h1, .wp-block-heading, .wp-block-post-title) { font-size: var(--wp--preset--font-size--mega, 5rem); line-height: .98; letter-spacing: -.03em; }
.sig-hero p:not(.eyebrow) { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); }
.sig-hero .wp-block-image img { border-radius: var(--radius); box-shadow: var(--shadow-2); }
/* Statement */
.sig-statement { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--background); text-align: center; }
.sig-statement :is(h2, .wp-block-heading) { font-size: var(--wp--preset--font-size--display, 3.5rem); max-width: 20ch; margin-inline: auto; }
.sig-statement :is(a, p) { color: inherit; }
/* Oversized statement: one word/number fills the view */
.sig-oversized :is(h1, h2) { font-size: var(--wp--preset--font-size--mega, 8rem); line-height: .9; text-align: center; }
/* Feature */
.sig-feature .wp-block-image img { border-radius: var(--radius); box-shadow: var(--shadow-1); }
/* Split-scroll narrative: one column sticky, the other scrolls */
.sig-split .wp-block-column:first-child > * { position: sticky; top: 12vh; }
/* Bento already covered above */
/* Stats */
.sig-stats .wp-block-columns { gap: var(--sig-gap); text-align: center; }
.sig-stats .count-up, .sig-stats .stat-number { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display, 3.5rem); font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent); }
.sig-stats .stat-label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); letter-spacing: .04em; }
/* CTA */
.sig-cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); text-align: center; }
.sig-cta :is(h2, p, a) { color: inherit; }
.sig-cta :is(h2, .wp-block-heading) { font-size: var(--wp--preset--font-size--display, 3.5rem); max-width: 18ch; margin-inline: auto; }
/* Marquee band */
.sig-marquee { overflow: hidden; }
.sig-marquee .marquee { display: flex; gap: 3rem; white-space: nowrap; font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 6vw, 5rem); text-transform: uppercase; }
/* Ticker (logos/press) */
.sig-ticker .marquee { display: flex; gap: 4rem; align-items: center; opacity: .7; }
/* Editorial index: numbered/dated list */
.sig-index .idx-row { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem; align-items: baseline; padding-block: 1.4rem; border-top: 1px solid var(--line); transition: padding-inline var(--dur-micro) var(--ease); }
.sig-index .idx-row:hover { padding-inline-start: 1rem; }
.sig-index .idx-num { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); }
.sig-index .idx-row h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); }
/* Quote wall: asymmetric masonry-ish grid */
.sig-quotes .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sig-quotes blockquote, .sig-quotes .q-card { background: var(--wp--preset--color--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); margin: 0; }
.sig-quotes .q-card:nth-child(3n+1) { grid-row: span 2; }
/* Before / after */
.sig-beforeafter .ba { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); }
.sig-beforeafter .ba > * { position: absolute; inset: 0; }
.sig-beforeafter .ba .after { clip-path: inset(0 0 0 50%); }
/* Image break: full-bleed image, no text */
.sig-imagebreak { padding-block: 0; }
.sig-imagebreak img { width: 100%; height: clamp(40vh, 60vh, 80vh); object-fit: cover; }
/* Pinned / scroll gallery */
.sig-gallery .g-track { display: grid; gap: 1.5rem; }
.sig-gallery .g-track img { border-radius: var(--radius); }
/* Horizontal showcase (motion.js drives the scroll) */
.sig-showcase .h-scroll { display: flex; gap: var(--sig-gap); }
.sig-showcase .h-panel { flex: 0 0 min(80vw, 640px); }
/* Sticky spec */
.sig-spec .wp-block-columns { align-items: start; gap: var(--sig-gap); }
.sig-spec .spec-list { position: sticky; top: 12vh; }
.sig-spec dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; }
.sig-spec dt { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }

/* Cards (shared tile treatment) */
.card, .sig-bento .is-tile { background: var(--wp--preset--color--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover, .sig-bento .is-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------------ *
 * 6. Components + states
 * ------------------------------------------------------------------ */
a { color: var(--wp--preset--color--accent); text-underline-offset: .18em; }
a:hover { text-decoration: underline; }
.wp-block-button__link { transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); will-change: transform; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); filter: brightness(1.04); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; }
.site-header { border-bottom: 1px solid var(--line); }
.site-header.is-sticky { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); }
.wp-block-navigation a { color: var(--wp--preset--color--text); }
.wp-block-navigation a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
:where(input, textarea, select) { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; font: inherit; background: var(--wp--preset--color--background); color: var(--wp--preset--color--text); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
:where(input, textarea, select):focus { border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent); outline: none; }
.form-error { color: #b91c1c; font-size: var(--wp--preset--font-size--small); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--wp--preset--color--text); color: var(--wp--preset--color--background); padding: .6rem 1rem; }
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ *
 * 7. Motion (CSS side; assets/motion.js drives the classes)
 * ------------------------------------------------------------------ */
.reveal, .reveal-stagger > * { opacity: 1; }
[data-scroll-progress] { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--wp--preset--color--accent); z-index: 100; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
  .js .reveal[data-reveal="left"] { transform: translateX(calc(var(--reveal-y) * -1.5)); }
  .js .reveal[data-reveal="right"] { transform: translateX(calc(var(--reveal-y) * 1.5)); }
  .js .reveal[data-reveal="scale"] { transform: scale(.94); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
  .js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
  .js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
  .js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
  .js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
  .js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
  .js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .40s; }
}

/* ------------------------------------------------------------------ *
 * 8. Responsive (container queries, with a viewport-media fallback)
 * ------------------------------------------------------------------ */
@supports (container-type: inline-size) {
  @container (max-width: 700px) {
    .sig-feature .wp-block-column:first-child, .sig-feature .wp-block-column:last-child { flex-basis: 100%; }
    .sig-bento .is-bento { grid-template-columns: repeat(2, 1fr); }
    .sig-bento [class*="bento-"] { grid-column: span 2; grid-row: auto; }
    .sig-quotes .q-grid { grid-template-columns: 1fr; }
    .sig-quotes .q-card:nth-child(3n+1) { grid-row: auto; }
    .sig-split .wp-block-column:first-child > *, .sig-spec .spec-list, .is-sticky-media .wp-block-column:first-child > * { position: static; }
    .sig-index .idx-row { grid-template-columns: 2.5rem 1fr; }
    .pull-up { margin-block-start: 0; }
  }
  @container (min-width: 701px) and (max-width: 1024px) {
    .sig-bento .is-bento { grid-template-columns: repeat(4, 1fr); }
  }
}
@supports not (container-type: inline-size) {
  @media (max-width: 781px) {
    .sig-feature .wp-block-column:first-child, .sig-feature .wp-block-column:last-child { flex-basis: 100%; }
    .sig-bento .is-bento { grid-template-columns: repeat(2, 1fr); }
    .sig-bento [class*="bento-"] { grid-column: span 2; grid-row: auto; }
    .sig-quotes .q-grid { grid-template-columns: 1fr; }
    .is-sticky-media .wp-block-column:first-child > *, .sig-split .wp-block-column:first-child > *, .sig-spec .spec-list { position: static; }
    .pull-up { margin-block-start: 0; }
  }
}

/* ------------------------------------------------------------------ *
 * 9. RTL + print
 * ------------------------------------------------------------------ */
[dir="rtl"] .sig-feature .wp-block-columns { flex-direction: row-reverse; }
[dir="rtl"] .sig-feature.is-flipped .wp-block-columns { flex-direction: row; }
@media print {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .sig-statement, .sig-cta { background: none !important; color: var(--wp--preset--color--text) !important; }
  .site-header.is-sticky, .wp-block-button, .skip-link, .grain::after, .noise::after { display: none !important; }
}


/* ================================================================== *
 * Benny Cigars: design-contract overrides + bespoke component styling
 * Spine: a cigar box opened in daylight -- warm cedar and cream, one
 * antique-gold accent, no italics anywhere. Everything below reads a
 * token; nothing here is a re-fork of the base layer above.
 * ================================================================== */
:root {
  --radius: 0px;
  --shadow-1: 0 1px 2px rgba(42,27,18,.08), 0 8px 24px rgba(42,27,18,.08);
  --shadow-2: 0 14px 36px rgba(42,27,18,.10), 0 24px 60px rgba(42,27,18,.12);
}

/* No italics anywhere, for any purpose -- explicit client rule, enforced at
 * the CSS layer so a client toggling italic in the editor can never render it. */
em, i, cite, .wp-block-quote, .wp-block-quote p, blockquote, blockquote p,
:where([style*="font-style:italic"]), :where([style*="font-style: italic"]) {
  font-style: normal !important;
}

/* Bug fix, base layer: [data-clip-reveal] starts fully clipped (inset(0 100% 0 0))
 * and is only opened by motion.js's initClipReveal(), which is skipped outright
 * under prefers-reduced-motion. Unpatched, a reduced-motion visitor never sees
 * that content at all. Never leave content permanently hidden by default. */
@media (prefers-reduced-motion: reduce) {
  [data-clip-reveal], .clip-reveal { clip-path: none !important; }
}

:where(input, textarea, select) { border-radius: 0; }
.sig-stats .count-up, .sig-stats .stat-number { font-weight: 600; }

/* Pull quotes: an oversized upright quote-mark glyph + a left gold rule,
 * never italic. */
.pull-quote { position: relative; padding-left: 1.75rem; border-left: 3px solid var(--wp--preset--color--accent); }
.pull-quote::before {
  content: "\201C"; display: block; font-family: var(--wp--preset--font-family--display);
  font-size: 3.5rem; line-height: .6; color: var(--wp--preset--color--accent); margin-bottom: .5rem;
}

/* ------------------------------------------------------------------ *
 * Header / logo / nav
 * ------------------------------------------------------------------ */
.site-header .bc-logo { display: flex; align-items: center; }
.site-header .bc-logo img { height: 42px; width: auto; display: block; }
.site-header .wp-block-navigation { font-family: var(--wp--preset--font-family--body); }
.site-header .wp-block-navigation a { font-weight: 500; letter-spacing: .01em; }
.site-header .wp-block-navigation a.current-menu-item, .site-header .wp-block-navigation-item.current-menu-item > a {
  color: var(--wp--preset--color--accent); font-weight: 700;
}
.site-header.is-sticky.is-scrolled { box-shadow: var(--shadow-1); }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * Buttons: gold-fill primary, outline secondary, both crafted states
 * ------------------------------------------------------------------ */
.wp-block-button__link { text-transform: uppercase; font-size: var(--wp--preset--font-size--small); letter-spacing: .06em; }
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1.5px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--text); background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast);
}
.wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Ghost-button guard: an outline button's border is accent-gold, which
 * disappears on a section whose OWN background is that same accent gold
 * (sig-cta). Swap the outline treatment to accent-contrast ink there so the
 * button stays visible instead of reading as plain text until hover. */
.sig-cta .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--accent-contrast); color: var(--wp--preset--color--accent-contrast);
}
.sig-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-contrast); color: var(--wp--preset--color--accent);
}
.sig-cta .wp-block-button__link:focus-visible { outline-color: var(--wp--preset--color--accent-contrast); }

/* ------------------------------------------------------------------ *
 * Back to top -- lion-head crest mark, recolored white on the gold circle
 * ------------------------------------------------------------------ */
#site-back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 140; width: 54px; height: 54px; border-radius: 50%;
  background: var(--wp--preset--color--text); border: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s var(--ease-out), background .3s ease;
  animation: bc-toppulse 2.2s ease-in-out infinite;
}
#site-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#site-back-to-top:hover, #site-back-to-top:focus-visible { background: var(--wp--preset--color--accent); }
#site-back-to-top img { width: 24px; height: 24px; filter: brightness(0) invert(1); display: block; pointer-events: none; }
@keyframes bc-toppulse {
  0% { box-shadow: 0 0 0 0 rgba(192,138,52,.55); }
  70% { box-shadow: 0 0 0 18px rgba(192,138,52,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,138,52,0); }
}
@media (prefers-reduced-motion: reduce) { #site-back-to-top { animation: none; } }

/* ------------------------------------------------------------------ *
 * Craft process / editorial index -- earned numbering
 * ------------------------------------------------------------------ */
.sig-index .idx-num { font-size: 1.1rem; }

/* ------------------------------------------------------------------ *
 * Queen Makeda signature moment -- shifting gold frame + wipe reveal.
 * Combines three already-tested primitives (clip-reveal, parallax, tilt)
 * instead of new JS: a restrained, tasteful "immersive-lite" treatment.
 * ------------------------------------------------------------------ */
.qm-frame { position: relative; filter: drop-shadow(0 18px 40px rgba(42,27,18,.20)); }
.qm-frame::before {
  content: ""; position: absolute; inset: -10px; border: 2px solid var(--wp--preset--color--accent); z-index: 2; pointer-events: none;
}
.qm-frame::after {
  content: ""; position: absolute; inset: -20px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
  z-index: 2; pointer-events: none;
}
.qm-frame img { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ *
 * FAQ accordion -- native <details>/<summary>, no plugin
 * ------------------------------------------------------------------ */
.bc-faq { border-top: 1px solid var(--line); }
.bc-faq details { border-bottom: 1px solid var(--line); }
.bc-faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--large);
}
.bc-faq summary::-webkit-details-marker { display: none; }
.bc-faq summary::after {
  content: "+"; font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; color: var(--wp--preset--color--accent);
  flex: none; transition: transform var(--dur-micro) var(--ease);
}
.bc-faq details[open] summary::after { transform: rotate(45deg); }
.bc-faq .bc-faq-a { padding: 0 0 1.5rem; max-width: var(--measure); color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ *
 * Blend compare table (core/table) -- pending values stay visible & honest
 * ------------------------------------------------------------------ */
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--small); }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--line); padding: .85rem 1rem; text-align: left; vertical-align: top; }
.wp-block-table thead th {
  font-family: var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
  color: var(--wp--preset--color--muted); background: var(--wp--preset--color--surface);
}
.wp-block-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent); }
.bc-pending { color: var(--wp--preset--color--muted); font-style: normal; }
.bc-pending::before { content: "PENDING \00b7 "; font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------------------------ *
 * Showcase panels (blend browse) -- sig-showcase specific card craft
 * ------------------------------------------------------------------ */
.sig-showcase .h-panel { background: var(--wp--preset--color--surface); border: 1px solid var(--line); padding: 1.75rem; }
.sig-showcase .h-panel img { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 1.25rem; transition: transform .5s var(--ease); }
.sig-showcase .h-panel:hover img { transform: scale(1.03); }
.sig-showcase .h-panel h3 { margin-bottom: .5rem; }

/* ------------------------------------------------------------------ *
 * Marquee band -- brand words at speed
 * ------------------------------------------------------------------ */
.sig-marquee { border-block: 1px solid var(--line); }
.sig-marquee .marquee { color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------------ *
 * Forms -- Retailer Inquiry: labeled fields, honeypot, error/sending/success
 * ------------------------------------------------------------------ */
.bc-form { max-width: 640px; }
.bc-form .bc-field { margin-bottom: 1.25rem; }
.bc-form label { display: block; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--muted); margin-bottom: .4rem; }
.bc-form input, .bc-form textarea { width: 100%; }
.bc-form .bc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bc-form .bc-field.has-error input, .bc-form .bc-field.has-error textarea { border-color: #b91c1c; }
.bc-form .bc-field-error { display: none; color: #b91c1c; font-size: var(--wp--preset--font-size--small); margin-top: .35rem; }
.bc-form .bc-field.has-error .bc-field-error { display: block; }
.bc-form .bc-submit { position: relative; }
.bc-form .bc-status { margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); display: none; font-size: var(--wp--preset--font-size--small); }
.bc-form .bc-status.is-visible { display: block; }
.bc-form .bc-status.is-sending { color: var(--wp--preset--color--muted); }
.bc-form .bc-status.is-success { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--text); }
.bc-form .bc-status.is-error { border-color: #b91c1c; color: #b91c1c; }
.bc-form button[disabled] { opacity: .6; cursor: not-allowed; }

/* ------------------------------------------------------------------ *
 * Shop grid + product cards (Store API driven)
 * ------------------------------------------------------------------ */
.bc-shop-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.bc-shop-toolbar label { font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--muted); margin-right: .5rem; }
.bc-shop-toolbar select { border: 1px solid var(--line); padding: .55rem .8rem; background: var(--wp--preset--color--background); font: inherit; }
.bc-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2rem; }
.bc-product-card { background: var(--wp--preset--color--surface); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.bc-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.bc-product-card a { color: inherit; text-decoration: none; display: block; }
.bc-product-card .bc-pc-media { aspect-ratio: 1/1; overflow: hidden; background: var(--wp--preset--color--background); }
.bc-product-card .bc-pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bc-product-card:hover .bc-pc-media img { transform: scale(1.04); }
.bc-product-card .bc-pc-body { padding: 1.25rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.bc-product-card h3 { font-size: 1.15rem; margin: 0 0 .3rem; }
.bc-product-card .bc-pc-price { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); font-weight: 600; font-size: 1.2rem; margin-top: auto; padding-top: .75rem; }
.bc-product-card .bc-pc-meta { font-size: .78rem; color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .05em; }
.bc-shop-empty, .bc-shop-loading { padding: 3rem 0; text-align: center; color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ *
 * Journal archive cards (core/query)
 * ------------------------------------------------------------------ */
.bc-journal .wp-block-post-featured-image img { aspect-ratio: 4/3; object-fit: cover; }
.bc-journal .wp-block-post-title a { color: var(--wp--preset--color--text); text-decoration: none; }
.bc-journal .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }


/* ================================================================== *
 * Fix pass, 2026-08-31: real defects found on manual review after the
 * initial build. Root cause for most of these: the base theme's own
 * "mega"/"display" font-size presets were left at their generic huge
 * defaults instead of being remapped to design-contract.json's actual
 * type scale (h1 max 3.4rem/54px, not 8rem/128px).
 * ================================================================== */

/* 1. Hero H1 was rendering at ~88px (up to 128px on wide screens) because
 * .sig-hero targets --wp--preset--font-size--mega, which theme.json never
 * remapped from the base theme's own clamp(3.5rem,...,8rem). Override the
 * token itself so every consumer of --mega corrects at once, matching the
 * contract's real h1 scale. */
:root {
  --wp--preset--font-size--mega: clamp(2.25rem, 1.6rem + 2.2vw, 3.4rem);
  --wp--preset--font-size--display: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
}

/* 2. The "4,000 cigars" pull-quote inherits --display's SIZE via WordPress's
 * own has-display-font-size class, but never got a font-FAMILY override, so
 * it rendered in Karla (body) at a huge size instead of Fraunces (display).
 * That combination read as oversized, heavy body text -- fix the face. */
.pull-quote.has-display-font-size,
.sig-statement .pull-quote {
  font-family: var(--wp--preset--font-family--display);
  line-height: 1.15;
}

/* 3. FAQ section was rendering full 100vw instead of the constrained
 * content column every other section uses -- it carries the .sig class
 * directly (making it full-bleed) with no .sig__inner-equivalent content
 * constraint inside it. Add that constraint at higher specificity than
 * the base .sig:not(.alignfull) full-bleed rule. */
.sig.bc-faq-section:not(.alignfull) {
  width: auto;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
.sig.bc-faq-section .sig__inner { max-width: none; padding-inline: 0; }

/* 4. Marquee band was set in Fraunces (display serif) at up to 5rem --
 * client dislikes this treatment outright. Switch to the same tracked,
 * uppercase Karla label style already used for eyebrows sitewide, sized
 * down to read as a ticker, not a second headline. */
.sig-marquee .marquee {
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* 5. Back-to-top lion icon: the source image's own visual weight sits
 * left-and-down of its canvas center, so simple width/height squish read
 * as off-center inside the circular button. Nudge via object-position
 * rather than re-cropping the source asset. */
#site-back-to-top img {
  object-fit: contain;
  object-position: 46% 50%;
}

/* 6. New component: lion-head divider, matching the worksite2.cc /
 * worksite3.cc pattern the client specifically asked to replicate --
 * a centered icon between two hairline rules, in the site's own gold. */
.bc-divider {
  display: flex; align-items: center; justify-content: center; gap: 2.25rem;
  max-width: 840px; margin-inline: auto; padding-block: 1rem;
}
.bc-divider__line {
  flex: 1 1 auto; height: 2px;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}
.bc-divider__crown {
  width: 64px; height: auto; flex: none;
}

/* 8. Header icon cluster: account + cart floated apart under
 * justify-content:space-between, reading as disconnected pieces instead
 * of one nav bar. Group them into a tight right-hand cluster. */
.site-header .wp-block-group.is-content-justification-space {
  gap: clamp(1rem, 3vw, 2.5rem);
}
.site-header .wp-block-woocommerce-customer-account,
.site-header .wc-block-mini-cart {
  margin-inline-start: 0;
}
.site-header .wp-block-woocommerce-customer-account { margin-inline-start: auto; }


/* ================================================================== *
 * Benny Cigars, pass 2 (2026-08-31): defect fixes + the craft the
 * contract's "expressive" motion tier actually calls for.
 *
 * Everything here reads a token. Three real defects fixed at root
 * cause, then the hover/motion/rhythm work that takes this from
 * "correct" to something with a point of view.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * DEFECT 1. Block-gap seams. WordPress injects margin-block-start on
 * every child of a flow/constrained container, at three nesting levels.
 * Where adjacent sections carry different backgrounds that margin shows
 * through as a strip of the page background: a seam between sections,
 * and the pale band above the footer. Zero-specificity :where() rules
 * generate it, so plain selectors win with no !important.
 * ------------------------------------------------------------------ */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; margin-block-end: 0; }
.entry-content > *,
.wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

/* ------------------------------------------------------------------ *
 * DEFECT 2. Product renders shipped on a white studio background, which
 * read as stark white boxes against cream. The white is now removed from
 * the asset itself (alpha), so the frame/letterbox treatment that used to
 * hide it has to go too, or it reintroduces a box.
 * ------------------------------------------------------------------ */
.bc-product-figure,
.bc-product-figure img { background: transparent; box-shadow: none; }
.bc-product-figure img { mix-blend-mode: multiply; }

/* ------------------------------------------------------------------ *
 * DEFECT 3. The hero stacked a 1068px-tall 16:9 letterbox under the copy,
 * leaving a long dead scroll before the next section. Rebuild it as a
 * composed editorial hero: copy left, portrait image right, one screen.
 * Pure CSS grid placement, so the block markup stays client-editable.
 * ------------------------------------------------------------------ */
@media (min-width: 900px) {
  .sig-hero .sig__inner {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .sig-hero .sig__inner > :not(figure) { grid-column: 1; max-width: 34rem; }
  .sig-hero .sig__inner > figure {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
    aspect-ratio: 4 / 5;
  }
}
.sig-hero { padding-block: clamp(3rem, 6vw, 6rem); }
.sig-hero .sig__inner > figure { position: relative; }
.sig-hero .sig__inner > figure img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(42, 27, 18, .18);
}
/* A gold rule that rides the image's lower-left corner: the accent doing
 * structural work rather than sitting flat on a button. */
.sig-hero .sig__inner > figure::after {
  content: ""; position: absolute; left: -14px; bottom: -14px;
  width: 42%; height: 1px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out) .35s;
}
.sig-hero.is-in .sig__inner > figure::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ *
 * "Two ways" paths. Was a 718x599 near-empty tile beside two smaller,
 * unequal ones: the intro outweighed the two choices that are the actual
 * point of the section. Promote the intro out of the card system, then
 * give the two paths equal, substantial cards.
 * ------------------------------------------------------------------ */
.sig-bento .bento-lg {
  grid-column: 1 / -1;
  grid-row: auto;
  background: transparent;
  border: 0;
  padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 46rem;
}
.sig-bento .bento-lg h2 { margin-bottom: .75rem; }
.sig-bento .bento-sm {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.sig-bento .bento-sm .wp-block-buttons { margin-top: auto; padding-top: 1.5rem; }
@media (max-width: 780px) {
  .sig-bento .bento-sm { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ *
 * Lion-head divider: a gold rule broken by the brand's own crest,
 * the pattern used on worksite2.cc / worksite3.cc.
 * ------------------------------------------------------------------ */
.bc-divider {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 840px; margin-inline: auto;
  padding-block: clamp(1rem, 2vw, 2rem);
}
.bc-divider__line {
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent));
  transform: scaleX(0); transform-origin: right;
  transition: transform 1s var(--ease-out);
}
.bc-divider__line:last-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent), transparent);
  transform-origin: left;
}
.bc-divider.is-in .bc-divider__line { transform: scaleX(1); }
.bc-divider__crest { width: 46px; height: auto; flex: none; opacity: .92; }

/* ------------------------------------------------------------------ *
 * CRAFTED STATES. The contract's motion tier is "expressive": every
 * clickable thing gets an intentional state, not a framework default.
 * ------------------------------------------------------------------ */

/* Cards: lift, shadow bloom, border warms to gold, and a gold rule wipes
 * across the top edge. The reveal transition is scoped off the hover
 * properties so hovering is snappy (.22s) instead of inheriting the
 * .7s entrance easing and feeling sluggish. */
.card, .sig-bento .is-tile, .bc-product-card, .sig-showcase .h-panel {
  position: relative;
  transition:
    transform .34s var(--ease-out),
    box-shadow .34s var(--ease-out),
    border-color .34s var(--ease-out),
    background-color .34s var(--ease-out);
}
.sig-bento .bento-sm::before,
.bc-product-card::before,
.sig-showcase .h-panel::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.sig-bento .bento-sm:hover, .sig-bento .bento-sm:focus-within,
.bc-product-card:hover, .bc-product-card:focus-within,
.sig-showcase .h-panel:hover, .sig-showcase .h-panel:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(42, 27, 18, .14);
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--line));
}
.sig-bento .bento-sm:hover::before, .sig-bento .bento-sm:focus-within::before,
.bc-product-card:hover::before, .bc-product-card:focus-within::before,
.sig-showcase .h-panel:hover::before, .sig-showcase .h-panel:focus-within::before {
  transform: scaleX(1);
}

/* Buttons: gold sweeps in from the left instead of a flat colour swap. */
.wp-block-button__link {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .3s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.wp-block-button__link::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--accent-contrast);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::after,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible::after { transform: scaleX(1); }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,27,18,.16); }

/* Images inside feature/split/showcase blocks: a slow, deliberate scale. */
.sig-feature .wp-block-image, .sig-split .wp-block-image, .bc-pc-media { overflow: hidden; }
.sig-feature .wp-block-image img,
.sig-split .wp-block-image img { transition: transform .8s var(--ease-out); }
.sig-feature .wp-block-image:hover img,
.sig-split .wp-block-image:hover img { transform: scale(1.035); }

/* Inline links: a gold underline that wipes in, replacing the browser default. */
.entry-content p a:not(.wp-block-button__link) {
  text-decoration: none; position: relative;
  background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .4s var(--ease-out);
}
.entry-content p a:not(.wp-block-button__link):hover { background-size: 100% 1px; }

/* Nav: the same gold wipe, so the header belongs to the same system. */
.site-header .wp-block-navigation a {
  position: relative;
  background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
  background-size: 0% 1px; background-position: 0 calc(100% + 2px); background-repeat: no-repeat;
  transition: background-size .35s var(--ease-out), color .25s var(--ease-out);
}
.site-header .wp-block-navigation a:hover { background-size: 100% 1px; }
.site-header .wp-block-navigation .current-menu-item a { background-size: 100% 1px; }

/* ------------------------------------------------------------------ *
 * Section rhythm. Every section was the same full-width stack at the
 * same padding. Alternate the tonal ground so the page has a pulse, and
 * let the eyebrow carry a short gold rule so section openings read as
 * deliberate rather than defaulted.
 * ------------------------------------------------------------------ */
.eyebrow { display: flex; align-items: center; gap: .75rem; }
.eyebrow::before {
  content: ""; width: clamp(1.5rem, 3vw, 2.5rem); height: 1px;
  background: var(--wp--preset--color--accent); flex: none;
}
.sig-statement { position: relative; }
.sig-statement .pull-quote { border-left-color: var(--wp--preset--color--accent); }

/* Reduced motion: everything above resolves to its end state, nothing
 * is ever left mid-transition or invisible. */
@media (prefers-reduced-motion: reduce) {
  .bc-divider__line,
  .sig-hero .sig__inner > figure::after { transform: none !important; transition: none !important; }
  .sig-bento .bento-sm::before, .bc-product-card::before, .sig-showcase .h-panel::before { display: none; }
  .wp-block-button__link::after { display: none; }
}

/* Hero copy is now a real wrapper block, so column 1 is one grid item
 * instead of five stacked rows that stretched the hero to 1676px. */
@media (min-width: 900px) {
  .sig-hero .sig__inner > .bc-hero-copy { grid-column: 1; grid-row: 1; max-width: 34rem; }
  .sig-hero .sig__inner > figure { grid-column: 2; grid-row: 1; }
}
.bc-hero-copy > * + * { margin-block-start: 1.25rem; }
.bc-hero-copy .wp-block-buttons { margin-block-start: 2rem; }

/* Divider lines: visible by default so a blocked CDN or failed JS can never
 * leave them collapsed. They only start hidden when JS is confirmed present,
 * then draw in on reveal. */
.bc-divider__line { transform: scaleX(1); }
.js .bc-divider.reveal:not(.is-in) .bc-divider__line { transform: scaleX(0); }
.js .bc-divider.is-in .bc-divider__line { transform: scaleX(1); }
.bc-divider.reveal { opacity: 1 !important; }

/* ================================================================== *
 * Benny Cigars, pass 3 (2026-08-31): the actual rebuild.
 *
 * Two real systems, built from the patterns on worksite1/2/3 but
 * translated to this brand's light ground rather than copied:
 *   1. A full-bleed photo hero on every page (worksite3's structure,
 *      warm cream scrim instead of the dark one, because the spine is
 *      "a cigar box opened in daylight, not a lounge at midnight").
 *   2. The crest divider system (worksite1/2's wrap/line/badge), used
 *      throughout the pages and in the footer, with an on-dark variant.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * 1. FULL-BLEED PHOTO HERO
 * The image stays a real, client-editable image block; it is promoted
 * to a background layer by position, not replaced by a CSS background.
 * ------------------------------------------------------------------ */
.sig-hero.has-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(86vh, 760px);
  padding-block: clamp(3rem, 7vw, 7rem);
}
.sig-hero.has-photo.is-short { min-height: min(52vh, 430px); }

/* the photo layer */
.sig-hero.has-photo > figure,
.sig-hero.has-photo .sig__inner > figure {
  position: absolute; inset: 0; margin: 0; z-index: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.sig-hero.has-photo figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  border-radius: 0; box-shadow: none;
  transform: scale(1.04);
  transition: transform 1.6s var(--ease-out);
}
.sig-hero.has-photo.is-in figure img { transform: scale(1); }
/* kill the pass-2 corner rule; the hero is a different animal now */
.sig-hero.has-photo .sig__inner > figure::after { display: none; }

/* the warm scrim: cream on the reading side, clearing to the photo */
.sig-hero.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--wp--preset--color--background) 96%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--background) 92%, transparent) 34%,
    color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent) 58%,
    transparent 85%
  );
}
/* a gold hairline sealing the bottom edge */
.sig-hero.has-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--wp--preset--color--accent) 75%, transparent) 22%,
    color-mix(in srgb, var(--wp--preset--color--accent) 75%, transparent) 78%,
    transparent);
}
.sig-hero.has-photo .sig__inner { position: relative; z-index: 2; width: 100%; }
.sig-hero.has-photo .bc-hero-copy { max-width: 40rem; }
.sig-hero.has-photo.is-short .bc-hero-copy { max-width: 46rem; }

/* undo pass 2's two-column hero: the photo is the ground now */
@media (min-width: 900px) {
  .sig-hero.has-photo .sig__inner { display: block; }
  .sig-hero.has-photo .sig__inner > .bc-hero-copy { grid-column: auto; max-width: 40rem; }
}

/* headline weight on the photo ground */
.sig-hero.has-photo h1 { text-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent); }
.sig-hero.has-photo.is-short h1 { font-size: clamp(2rem, 1.5rem + 1.9vw, 2.9rem); }
.sig-hero.has-photo.is-short p { margin-bottom: 0; }

/* kinetic headline: words rise in sequence, gold-to-ink settle */
.sig-hero .split-words .st-w { display: inline-block; }

/* ------------------------------------------------------------------ *
 * 2. CREST DIVIDER SYSTEM
 * wrap > line + badge + line. Used between content blocks throughout,
 * and in the footer, with a variant for dark grounds.
 * ------------------------------------------------------------------ */
.bc-divider-wrap { padding-block: clamp(1.5rem, 4vw, 3.5rem); }
.bc-divider {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  max-width: 840px; margin-inline: auto;
  padding-inline: var(--gut);
}
.bc-divider__line, .bc-divider-line {
  flex: 1 1 auto; height: 1px; display: block;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--accent) 72%, transparent));
  transform: scaleX(1); transform-origin: right;
  transition: transform 1.1s var(--ease-out);
}
.bc-divider__line:last-of-type, .bc-divider-line:last-of-type {
  background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 72%, transparent), transparent);
  transform-origin: left;
}
.js .bc-divider.reveal:not(.is-in) .bc-divider__line,
.js .bc-divider.reveal:not(.is-in) .bc-divider-line { transform: scaleX(0); }
.js .bc-divider.is-in .bc-divider__line,
.js .bc-divider.is-in .bc-divider-line { transform: scaleX(1); }
.bc-divider.reveal { opacity: 1 !important; }

.bc-divider__crest, .bc-divider-badge {
  width: clamp(34px, 4vw, 48px); height: auto; flex: none; display: block;
  opacity: .95;
  transition: transform .9s var(--ease-out);
}
.bc-divider__crest img, .bc-divider-badge img { width: 100%; height: auto; display: block; }
.js .bc-divider.reveal:not(.is-in) .bc-divider__crest { transform: scale(.7) rotate(-8deg); }
.js .bc-divider.is-in .bc-divider__crest { transform: none; }

/* dark-ground variant (footer, statement bands) */
.bc-divider-on-dark .bc-divider__line,
.bc-divider-on-dark .bc-divider-line {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--accent) 85%, transparent));
}
.bc-divider-on-dark .bc-divider__line:last-of-type,
.bc-divider-on-dark .bc-divider-line:last-of-type {
  background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 85%, transparent), transparent);
}
.bc-divider-on-dark .bc-divider__crest img { filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.05); }

/* ------------------------------------------------------------------ *
 * 3. FOOTER: crest, divider, and the social row
 * ------------------------------------------------------------------ */
.site-footer .bc-divider-wrap { padding-block: clamp(1.25rem, 3vw, 2.5rem); }
.bc-social {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding-block: .5rem;
}
.bc-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
  color: var(--wp--preset--color--accent);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out),
              transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.bc-social a:hover, .bc-social a:focus-visible {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-contrast);
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-3px);
}
.bc-social svg { width: 18px; height: 18px; display: block; fill: currentColor; }

/* ------------------------------------------------------------------ *
 * 4. Reduced motion: everything resolves to its end state.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sig-hero.has-photo figure img { transform: none !important; transition: none !important; }
  .bc-divider__line, .bc-divider-line, .bc-divider__crest { transform: none !important; transition: none !important; }
}

/* Hero full-bleed fix: the base rule is .sig:not(.alignfull), so adding
 * alignfull to the hero opted it OUT of full-bleed. Cover both cases. */
.sig.alignfull, .sig-hero.has-photo {
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
}
/* The hero image block ships an inline margin-top from the editor, which
 * beats a plain margin:0 and stopped the absolute layer covering the section. */
.sig-hero.has-photo figure { margin: 0 !important; inset: 0 !important; height: 100% !important; }

/* The hero photo sits inside .sig__inner, so making that wrapper relative
 * made IT the positioning context and the photo only covered the inner
 * column, not the section. Keep the wrapper static and lift the copy
 * instead, so the photo resolves against the hero section itself. */
.sig-hero.has-photo .sig__inner { position: static; }
.sig-hero.has-photo .bc-hero-copy,
.sig-hero.has-photo .sig__inner > *:not(figure) { position: relative; z-index: 2; }

/* Scrim tuning: the first pass washed the photograph out almost entirely
 * and the framing sat on empty sky. Hold enough cream under the reading
 * column for contrast, then clear fast so the field actually reads. */
.sig-hero.has-photo figure img { object-position: center 66%; }
.sig-hero.has-photo::before {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--wp--preset--color--background) 93%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--background) 84%, transparent) 38%,
    color-mix(in srgb, var(--wp--preset--color--background) 34%, transparent) 66%,
    color-mix(in srgb, var(--wp--preset--color--background) 6%, transparent) 88%,
    transparent 100%
  );
}
/* A second, vertical wash keeps the very top legible under the header
 * without flattening the whole frame. */
.sig-hero.has-photo .sig__inner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--wp--preset--color--background) 42%, transparent) 0%,
    transparent 28%);
}
.sig-hero.has-photo h1 { text-shadow: none; }

/* ------------------------------------------------------------------ *
 * Hero, corrected: a soft gradient cannot carry two paragraphs of body
 * copy over a busy photograph -- the copy was genuinely unreadable
 * against the leaves. Give the copy its own cream panel and let the
 * photograph run clean beside it. The panel is the design device; the
 * scrim now only softens the panel's outer edge.
 * ------------------------------------------------------------------ */
.sig-hero.has-photo::before {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--background) 18%, transparent) 42%,
    transparent 68%);
}
.sig-hero.has-photo .sig__inner::before { display: none; }

.sig-hero.has-photo .bc-hero-copy {
  background: color-mix(in srgb, var(--wp--preset--color--background) 95%, transparent);
  backdrop-filter: blur(3px);
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  border-left: 2px solid var(--wp--preset--color--accent);
  box-shadow: 0 24px 60px rgba(42, 27, 18, .16);
  max-width: 41rem;
}
@media (min-width: 1100px) { .sig-hero.has-photo .bc-hero-copy { max-width: 44rem; } }
.sig-hero.has-photo .bc-hero-copy > *:first-child { margin-block-start: 0; }
.sig-hero.has-photo.is-short .bc-hero-copy { max-width: 48rem; }

/* Anchor the hero copy panel to the reading edge rather than floating it
 * centred, so the panel and the scrim agree on which side the copy lives. */
.sig-hero.has-photo .bc-hero-copy { margin-inline: 0 auto; }
@media (max-width: 899px) {
  .sig-hero.has-photo { min-height: min(72vh, 560px); }
  .sig-hero.has-photo .bc-hero-copy { margin-inline: 0; }
}
/* Footer sits on the surface tone; its divider needs the on-dark crest
 * treatment only where the ground is genuinely dark, which it is not here,
 * so the standard gold crest is correct. Give the footer rows breathing room. */
.site-footer .bc-social { margin-block: clamp(1rem, 2vw, 1.75rem); }

/* WordPress prints its constrained-layout auto-margins inline in <head>,
 * AFTER this stylesheet, so an equal-specificity rule loses the tie and the
 * panel kept centring. Repeating the class outranks it without !important. */
.sig-hero.has-photo .sig__inner > .bc-hero-copy.bc-hero-copy {
  margin-left: 0; margin-right: auto;
}
/* With the panel now anchored left, pull the scrim back so the right half
 * is clean photograph rather than a washed middle ground. */
.sig-hero.has-photo::before {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--wp--preset--color--background) 46%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--background) 12%, transparent) 40%,
    transparent 62%);
}

/* Core's constrained-layout auto-margin is itself !important, so a more
 * specific selector alone still loses. Matching !important at higher
 * specificity is the correct tool against a framework !important. */
.sig-hero.has-photo .sig__inner > .bc-hero-copy.bc-hero-copy {
  margin-left: 0 !important; margin-right: auto !important;
}

/* ================================================================== *
 * HERO, rebuilt to the Round 1 composition (2026-08-31).
 *
 * Not a photo behind everything with a panel over it -- that buried the
 * subject. This is a split: copy on clean cream at the left, photograph
 * holding the right side and bleeding off the viewport edge, so Benny
 * stays fully visible. Feathered where the photo meets the cream.
 * ================================================================== */
.sig-hero.has-photo {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(78vh, 660px);
  padding-block: clamp(3rem, 6vw, 6rem);
  background: var(--wp--preset--color--background);
}
.sig-hero.has-photo.is-short { min-height: min(46vh, 380px); }

/* photo: right side, bleeding off the right edge, full height */
.sig-hero.has-photo .sig__inner > figure,
.sig-hero.has-photo > figure {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important;
  width: 54vw !important; height: 100% !important; margin: 0 !important;
  z-index: 0;
}
.sig-hero.has-photo figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%;
  box-shadow: none; border-radius: 0;
}
/* feather the photo's inner edge into the cream instead of a hard seam */
.sig-hero.has-photo .sig__inner > figure::before,
.sig-hero.has-photo > figure::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    var(--wp--preset--color--background) 0%,
    color-mix(in srgb, var(--wp--preset--color--background) 62%, transparent) 12%,
    transparent 34%);
}
/* the whole-section scrim and the panel are gone */
.sig-hero.has-photo::before { display: none; }
.sig-hero.has-photo .sig__inner::before { display: none; }
.sig-hero.has-photo .bc-hero-copy {
  background: none; backdrop-filter: none; box-shadow: none;
  border-left: 0; padding: 0;
  max-width: 33rem;
}
.sig-hero.has-photo .sig__inner > .bc-hero-copy.bc-hero-copy {
  margin-left: 0 !important; margin-right: auto !important;
}
.sig-hero.has-photo.is-short .bc-hero-copy { max-width: 40rem; }
/* keep the gold hairline sealing the section's bottom edge */
.sig-hero.has-photo::after { z-index: 3; }

/* Stack on narrow screens: copy first, photo a full-width band beneath. */
@media (max-width: 899px) {
  .sig-hero.has-photo { min-height: 0; padding-bottom: 0; }
  .sig-hero.has-photo .sig__inner > figure,
  .sig-hero.has-photo > figure {
    position: relative !important; width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    height: clamp(260px, 46vw, 400px) !important;
    margin-top: clamp(2rem, 5vw, 3rem) !important;
  }
  .sig-hero.has-photo .sig__inner > figure::before,
  .sig-hero.has-photo > figure::before {
    background: linear-gradient(180deg, var(--wp--preset--color--background) 0%, transparent 22%);
  }
  .sig-hero.has-photo .bc-hero-copy { max-width: none; }
}

/* Copy was running 155px under the photograph, back over the subject.
 * Hold it inside the cream half. Repeated class + !important because an
 * earlier max-width in this same file and core's layout CSS both compete. */
.sig-hero.has-photo .bc-hero-copy.bc-hero-copy {
  max-width: min(30rem, 42vw) !important;
}
@media (min-width: 1400px) {
  .sig-hero.has-photo .bc-hero-copy.bc-hero-copy { max-width: min(34rem, 40vw) !important; }
}
@media (max-width: 899px) {
  .sig-hero.has-photo .bc-hero-copy.bc-hero-copy { max-width: none !important; }
}
/* seal the photo to the true viewport edge (scrollbar was leaving a sliver) */
.sig-hero.has-photo .sig__inner > figure,
.sig-hero.has-photo > figure { right: -1px !important; }

/* Drive both halves off one variable so the copy can never run under the
 * photograph again, whatever the container maths does at a given width. */
.sig-hero.has-photo { --bc-photo-w: 52vw; --bc-copy-inset: 190px; }
.sig-hero.has-photo .sig__inner > figure,
.sig-hero.has-photo > figure {
  width: calc(var(--bc-photo-w) + 4px) !important;
  right: -2px !important;
}
.sig-hero.has-photo .bc-hero-copy.bc-hero-copy {
  max-width: min(31rem, calc(100vw - var(--bc-photo-w) - var(--bc-copy-inset))) !important;
}
@media (max-width: 899px) {
  .sig-hero.has-photo .bc-hero-copy.bc-hero-copy { max-width: none !important; }
  .sig-hero.has-photo .sig__inner > figure,
  .sig-hero.has-photo > figure { width: 100vw !important; right: auto !important; }
}

/* Hero gutter fix: .sig__inner is a 1200px container centred across the FULL
 * viewport, so on a wide screen its left edge landed ~350px in -- pushing the
 * copy hard against the photograph and leaving a dead cream void to its left.
 * For this hero the container is left-anchored to the viewport instead, with a
 * modest inset, so the copy sits properly inside the cream half at any width. */
.sig-hero.has-photo .sig__inner {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(1.5rem, 6vw, 7rem) !important;
  padding-right: 0 !important;
}
.sig-hero.has-photo .bc-hero-copy.bc-hero-copy {
  max-width: min(33rem, calc(100vw - var(--bc-photo-w) - 8vw - 2rem)) !important;
}
@media (max-width: 899px) {
  .sig-hero.has-photo .sig__inner {
    padding-left: var(--gut) !important;
    padding-right: var(--gut) !important;
  }
  .sig-hero.has-photo .bc-hero-copy.bc-hero-copy { max-width: none !important; }
}

/* Hero was running 123vh -- past the fold -- because the approved copy puts a
 * four-line headline plus two full paragraphs in it inside a 528px column.
 * Widen the column and tighten the hero's own type so the whole composition
 * lands on one screen. Copy is untouched; only its measure and rhythm change. */
.sig-hero.has-photo .bc-hero-copy.bc-hero-copy {
  max-width: min(38rem, calc(100vw - var(--bc-photo-w) - 7vw - 2rem)) !important;
}
.sig-hero.has-photo { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); min-height: min(76vh, 700px); }
.sig-hero.has-photo h1 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  line-height: 1.06;
  margin-bottom: .35em;
}
.sig-hero.has-photo .bc-hero-copy p { font-size: 1rem; line-height: 1.6; }
.sig-hero.has-photo .bc-hero-copy > * + * { margin-block-start: .9rem; }
.sig-hero.has-photo .bc-hero-copy .wp-block-buttons { margin-block-start: 1.6rem; }
@media (max-width: 899px) {
  .sig-hero.has-photo .bc-hero-copy.bc-hero-copy { max-width: none !important; }
}

/* 40/60 split: the photograph moves left to close the ~190px of dead cream
 * that sat between the copy and the image. The feather narrows from 34% to
 * 18% at the same time -- widening the photo alone would have put the extra
 * width inside the soft gradient instead of showing as actual photograph.
 * Copy width derives from --bc-photo-w, so it re-fits itself automatically. */
.sig-hero.has-photo { --bc-photo-w: 60vw; }
.sig-hero.has-photo .sig__inner > figure::before,
.sig-hero.has-photo > figure::before {
  background: linear-gradient(90deg,
    var(--wp--preset--color--background) 0%,
    color-mix(in srgb, var(--wp--preset--color--background) 58%, transparent) 8%,
    transparent 18%);
}
.sig-hero.has-photo .bc-hero-copy.bc-hero-copy {
  max-width: min(36rem, calc(100vw - var(--bc-photo-w) - 6vw - 1.5rem)) !important;
}
@media (max-width: 899px) {
  .sig-hero.has-photo .bc-hero-copy.bc-hero-copy { max-width: none !important; }
  .sig-hero.has-photo .sig__inner > figure::before,
  .sig-hero.has-photo > figure::before {
    background: linear-gradient(180deg, var(--wp--preset--color--background) 0%, transparent 22%);
  }
}

/* ================================================================== *
 * Benny Cigars, pass 4 (2026-08-31): client review round.
 * ================================================================== */

/* ---- 1. Hero type: lead paragraph softened, eyebrow restored ------- *
 * The eyebrow is a <p class="eyebrow">, so an earlier blanket rule on
 * hero paragraphs was overriding its size and making the hero eyebrow
 * 16px against 13px everywhere else. Exclude it, and soften the lead
 * from 21.8px to 18px so it reads as emphasis, not a second size.
 * Core marks preset font-size classes !important, hence the match.     */
.sig-hero.has-photo .bc-hero-copy p:not(.eyebrow) { font-size: 1rem; }
.sig-hero.has-photo .bc-hero-copy p.has-large-font-size { font-size: 1.125rem !important; line-height: 1.55; }
.sig-hero.has-photo .bc-hero-copy p.eyebrow {
  font-size: var(--wp--preset--font-size--small) !important;
  letter-spacing: .12em;
}

/* ---- 2. Footer: divider centred, statements centred ---------------- */
.site-footer { padding-top: 0 !important; }
.site-footer .bc-divider-wrap { padding-block: clamp(1.75rem, 3.2vw, 2.75rem) !important; }
.site-footer .bc-divider { max-width: 640px; }
.site-footer p { text-align: center; }
.site-footer .wp-block-group[style*="border-top"] { text-align: center; }

/* ---- 3. Centred section openings ---------------------------------- */
.sig-bento .bento-lg { text-align: center; margin-inline: auto; }
.sig-bento .bento-lg .eyebrow { justify-content: center; }
.sig-bento .bento-lg p { margin-inline: auto; max-width: 44rem; }
.bc-craft h2 { text-align: center; }
.bc-craft > .sig__inner > .eyebrow,
.bc-craft .eyebrow { justify-content: center; }

/* ---- 4. Marquee: readable, not a whisper -------------------------- */
.sig-marquee .marquee {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: .14em;
  gap: 2.5rem;
}

/* ---- 5. Pull quote: no rule, an oversized mark, real presence ------ */
.pull-quote {
  border-left: 0 !important;
  padding-left: 0 !important;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto !important;
}
.pull-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: .72;
  color: var(--wp--preset--color--accent);
  margin: 0 0 .1em;
  opacity: .9;
}
.sig-statement .pull-quote {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.42;
  font-weight: 500;
}
/* the supporting line under the quote: give it weight instead of leaving
 * it as undifferentiated body text */
.sig-statement .pull-quote + p,
.sig-statement p:not(.pull-quote):not(.eyebrow) {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--background) 72%, transparent);
}

/* ---- 6. FAQ marker: a filled gold disc, sitewide ------------------- */
.bc-faq summary::after {
  content: "+";
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-contrast);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.3rem; font-weight: 400; line-height: 1;
  transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.bc-faq summary:hover::after { background: var(--wp--preset--color--text); color: var(--wp--preset--color--background); }
.bc-faq details[open] summary::after { transform: rotate(45deg); }

/* ---- 7. Queen Makeda: the featured blend, given real ceremony ------ *
 * Scoped with :has() to the section that actually holds the portrait,
 * so the other .sig-split sections are untouched.                     */
.sig-split:has(.qm-frame) { background: var(--wp--preset--color--surface); }
.sig-split:has(.qm-frame) .wp-block-columns { align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }

.qm-frame { position: relative; filter: drop-shadow(0 22px 48px rgba(42,27,18,.24)); }
.qm-frame::before {
  content: ""; position: absolute; inset: -14px; z-index: 2; pointer-events: none;
  border: 2px solid var(--wp--preset--color--accent);
}
.qm-frame::after {
  content: ""; position: absolute; inset: -26px; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 42%, transparent);
}
/* gold corner ticks on the outer frame */
.qm-frame-wrap { position: relative; display: block; }
.qm-frame-wrap::before, .qm-frame-wrap::after {
  content: ""; position: absolute; width: 22px; height: 22px; z-index: 3; pointer-events: none;
  border: 2px solid var(--wp--preset--color--accent);
}
.qm-frame-wrap::before { top: -33px; left: -33px; border-right: 0; border-bottom: 0; }
.qm-frame-wrap::after { bottom: -33px; right: -33px; border-left: 0; border-top: 0; }

.sig-split:has(.qm-frame) h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  margin-bottom: .5rem;
}
.sig-split:has(.qm-frame) h2::before {
  content: ""; display: block; width: 72px; height: 2px;
  background: var(--wp--preset--color--accent);
  margin-bottom: 1rem;
}
.sig-split:has(.qm-frame) .has-large-font-size { font-size: 1.15rem !important; line-height: 1.6; }

/* tasting-note row under the Queen copy */
.qm-notes {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.qm-notes li {
  font-family: var(--wp--preset--font-family--body);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .5rem .85rem;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
  color: var(--wp--preset--color--muted);
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.qm-notes li:hover {
  border-color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
  color: var(--wp--preset--color--text);
}

@media (prefers-reduced-motion: reduce) {
  .bc-faq summary::after { transition: none; }
}

/* Corner ticks hang off the portrait's own column rather than an extra
 * wrapper element, so no markup change and no block-validity risk. */
.sig-split:has(.qm-frame) .wp-block-column:first-child {
  position: relative;
  padding: 34px;
}
.sig-split:has(.qm-frame) .wp-block-column:first-child::before,
.sig-split:has(.qm-frame) .wp-block-column:first-child::after {
  content: ""; position: absolute; width: 24px; height: 24px; z-index: 3; pointer-events: none;
  border: 2px solid var(--wp--preset--color--accent);
}
.sig-split:has(.qm-frame) .wp-block-column:first-child::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.sig-split:has(.qm-frame) .wp-block-column:first-child::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.qm-frame::before { inset: -12px; }
.qm-frame::after { inset: -22px; }

/* Footer crest: the group below the divider carried its own top margin,
 * leaving 29px above the crest and 53px below. Zero that so the wrap's
 * own symmetric padding actually centres the lion in the gap. */
.site-footer .bc-divider-wrap { padding-block: 2rem !important; }
.site-footer .bc-divider-wrap + * { margin-top: 0 !important; }

/* ================================================================== *
 * Benny Cigars, pass 5 (2026-09-01): the Home structural rebuild.
 *
 * Home is no longer nine near-identical bands. New archetypes, each
 * with its own shape, so the page has rhythm:
 *   hero photo -> numbered paths -> oversized proof -> offset row ->
 *   image break -> Queen ceremony -> ledger -> marquee -> FAQ -> CTA
 * ================================================================== */

/* ---- Shared section rhythm: alternate density, not one padding ----- */
.sig-paths       { padding-block: clamp(3rem, 6vw, 6rem); }
.sig-proof       { padding-block: clamp(4rem, 9vw, 9rem); background: var(--wp--preset--color--surface); }
.sig-blendteaser { padding-block: clamp(2rem, 4vw, 4rem); }
.sig-imagebreak  { padding-block: 0; }
.sig-queen       { padding-block: clamp(4rem, 8vw, 8rem); }
.sig-ledger      { padding-block: clamp(3.5rem, 7vw, 7rem); }

/* the divider band itself, halved per review */
.bc-divider-wrap { padding-block: clamp(.85rem, 2vw, 1.75rem); }

/* ---- 1. Two paths: numbered editorial blocks, not cards ----------- */
.bc-paths-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.bc-paths-head h2 { margin-bottom: .6rem; }
.bc-paths-head p { margin-inline: auto; max-width: 42rem; }
.bc-paths {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.bc-path {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
  transition: background-color .4s var(--ease-out);
}
.bc-path + .bc-path { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent); }
.bc-path:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent); }
.bc-path__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
  margin: 0 0 .75rem;
}
.bc-path h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); margin: 0 0 .6rem; max-width: 20ch; }
.bc-path p { color: var(--wp--preset--color--muted); max-width: 34ch; }
/* the button stretches over the whole block, so the block is the target */
.bc-path .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (max-width: 780px) {
  .bc-paths { grid-template-columns: 1fr; }
  .bc-path + .bc-path { border-left: 0; }
}

/* ---- 2. The proof: the number as a graphic behind the sentence ----- */
.sig-proof .sig__inner { position: relative; text-align: center; }
.bc-bignum {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: clamp(7rem, 26vw, 26rem);
  line-height: .78;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--wp--preset--color--accent) 46%, transparent);
  text-align: center;
  pointer-events: none;
  user-select: none;
  margin-bottom: -.34em;
}
.sig-proof .pull-quote { position: relative; z-index: 2; }
.sig-proof .bc-attrib {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-top: 1.25rem;
}
.sig-proof .bc-tail {
  max-width: 42rem; margin: 2rem auto 0;
  color: var(--wp--preset--color--muted);
}

/* ---- 3. Blends teaser: offset row, render bleeding off the left ---- */
.bc-offset { align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.bc-offset__media { flex-basis: 46% !important; }
.bc-offset__copy  { flex-basis: 54% !important; }
.bc-lineup-render { margin: 0; }
.bc-lineup-render img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 46px rgba(42,27,18,.20));
  transition: transform .8s var(--ease-out);
}
.bc-blendteaser-note { display: none; }
.sig-blendteaser .bc-offset__media:hover img { transform: translateY(-6px); }
@media (min-width: 900px) {
  .sig-blendteaser .bc-offset__media { margin-left: calc(-1 * clamp(2rem, 7vw, 8rem)); }
}
@media (max-width: 899px) {
  .bc-offset__media, .bc-offset__copy { flex-basis: 100% !important; }
}

/* ---- 4. Image break: one edge-to-edge photograph, no copy --------- */
.sig-imagebreak .bc-break-img { margin: 0; }
.sig-imagebreak .bc-break-img img {
  width: 100vw; height: clamp(240px, 42vh, 460px);
  object-fit: cover; object-position: center 58%; display: block;
}
.sig-imagebreak {
  border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

/* ---- 5. Queen Makeda: the ceremony section ------------------------ *
 * Contract exception, granted: a deep plum ground and heavier gold
 * ornament, drawn from the band's own artwork. Reversible -- it is
 * confined to this one section and one colour variable.              */
.sig-queen {
  --qm-ground: #2E1E33;
  --qm-gold: #D8AE5C;
  background: var(--qm-ground);
  color: #F3E7D2;
  position: relative;
  overflow: hidden;
}
.sig-queen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 22% 30%, color-mix(in srgb, var(--qm-gold) 16%, transparent), transparent 70%),
    radial-gradient(60% 60% at 85% 75%, color-mix(in srgb, #6B2D4B 40%, transparent), transparent 70%);
}
.sig-queen .sig__inner { position: relative; z-index: 2; }
.sig-queen :is(h2, p, li) { color: #F3E7D2; }
.sig-queen .eyebrow { color: var(--qm-gold); }
.sig-queen .eyebrow::before { background: var(--qm-gold); }
/* no rule between eyebrow and headline here -- it read as a stray line */
.sig-queen h2::before { content: none !important; }
.sig-queen h2 {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1.02;
  margin-bottom: .75rem;
}
.sig-queen .has-large-font-size { font-size: 1.15rem !important; line-height: 1.65; }

/* the frame: a real double rule with mitred gold corners, not tabs */
.sig-queen .bc-queen__media { position: relative; padding: 30px; }
.sig-queen .qm-frame { position: relative; margin: 0; }
.sig-queen .qm-frame img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.sig-queen .qm-frame::before {
  content: ""; position: absolute; inset: -12px; z-index: 2; pointer-events: none;
  border: 2px solid var(--qm-gold);
}
.sig-queen .qm-frame::after {
  content: ""; position: absolute; inset: -22px; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--qm-gold) 50%, transparent);
}
.sig-queen .bc-queen__media::before,
.sig-queen .bc-queen__media::after {
  content: ""; position: absolute; width: 30px; height: 30px; z-index: 3; pointer-events: none;
  border: 2px solid var(--qm-gold);
}
.sig-queen .bc-queen__media::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.sig-queen .bc-queen__media::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.sig-queen .qm-notes li {
  border-color: color-mix(in srgb, var(--qm-gold) 55%, transparent);
  color: #E8D9BC;
}
.sig-queen .qm-notes li:hover {
  border-color: var(--qm-gold);
  background: color-mix(in srgb, var(--qm-gold) 16%, transparent);
  color: #FFF6E4;
}
.sig-queen .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--qm-gold); color: #F3E7D2;
}
.sig-queen .wp-block-button.is-style-outline .wp-block-button__link::after { background: var(--qm-gold); }
.sig-queen .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--qm-ground); }

/* ---- 6. Ledger: a held numeral beside the narrative --------------- */
.bc-ledger { gap: clamp(2rem, 5vw, 5rem); }
.bc-ledger__mark { flex-basis: 34% !important; }
.bc-ledger__body { flex-basis: 66% !important; }
.bc-ledger__num {
  position: sticky; top: 18vh;
  border-top: 2px solid var(--wp--preset--color--accent);
  padding-top: 1.25rem;
}
.bc-ledger__num span {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: .86;
  letter-spacing: -.03em;
  color: var(--wp--preset--color--accent);
}
.bc-ledger__num em {
  display: block; font-style: normal;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-top: .6rem; max-width: 15ch;
}
.bc-ledger__body p { max-width: 58ch; }
/* eyebrows sit left with their headline, never centred */
.sig-ledger .eyebrow, .sig-blendteaser .eyebrow { justify-content: flex-start; text-align: left; }
@media (max-width: 899px) {
  .bc-ledger__mark, .bc-ledger__body { flex-basis: 100% !important; }
  .bc-ledger__num { position: static; }
}

/* ---- 7. Footer: crest straddles the seam, lines pulled together --- */
.site-footer { position: relative; overflow: visible; }
.site-footer .bc-divider-wrap {
  padding-block: 0 !important;
  margin-top: calc(-1 * clamp(22px, 2.4vw, 34px)) !important;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
  position: relative; z-index: 3;
}
.site-footer .bc-divider__crest {
  background: var(--wp--preset--color--surface);
  padding-inline: 14px;
}
.site-footer .bc-divider-wrap + * { margin-top: 0 !important; }
.site-footer p { margin-block: .2rem !important; line-height: 1.5; }
.site-footer .wp-block-group[style*="border-top"] > p + p { margin-top: .15rem !important; }

@media (prefers-reduced-motion: reduce) {
  .bc-lineup-render img { transition: none; }
}

/* Footer crest, corrected: a negative margin was guesswork and left the
 * lion sitting inside the footer. Collapse the wrap to zero height at the
 * footer's very top edge and translate the divider up half its own height,
 * so it straddles the seam exactly regardless of the crest's size. */
.site-footer { padding-top: 0 !important; position: relative; overflow: visible; }
.site-footer .bc-divider-wrap {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  position: relative;
  z-index: 4;
}
.site-footer .bc-divider { transform: translateY(-50%); }
.site-footer .bc-divider__crest { background: none; padding-inline: 12px; }
.site-footer .bc-divider-wrap + * { margin-top: clamp(2.5rem, 4vw, 3.5rem) !important; }

/* The crest chip padding was eating its own width under border-box sizing,
 * shrinking the lion to 12px. Space it with margin, and give the footer
 * crest a little more presence since it now anchors the seam. */
.site-footer .bc-divider__crest {
  padding-inline: 0 !important;
  margin-inline: 12px;
  width: clamp(40px, 4.4vw, 56px) !important;
}

/* The proof quote lost its size when the section was renamed from
 * sig-statement to sig-proof, and the oversized quote-mark now competes
 * with the 4,000 numeral. The numeral is the graphic here, so the mark
 * stands down and the sentence gets its scale back. */
.sig-proof .pull-quote {
  font-size: clamp(1.3rem, 2.1vw, 1.95rem) !important;
  line-height: 1.4;
  font-weight: 500;
  max-width: 34ch;
  margin-inline: auto !important;
}
.sig-proof .pull-quote::before { content: none !important; }
.sig-proof .bc-bignum { margin-bottom: -.28em; }

/* ---- Queen Makeda, corrected -------------------------------------- *
 * The box photograph was measured at rgb(42,31,57) against a ground of
 * rgb(46,30,51) -- it was dissolving into the section, so the gold frame
 * appeared to enclose nothing. The medallion is the right asset: it is
 * the brand's own mark, it is already ornate, and its transparency lets
 * it sit on the plum instead of fighting it. The rectangular frame and
 * corner brackets come off -- the medallion is its own ornament.       */
.sig-queen .bc-queen__media { padding: 0; }
.sig-queen .bc-queen__media::before,
.sig-queen .bc-queen__media::after { content: none !important; }

.sig-queen .qm-medallion { position: relative; margin: 0; }
.sig-queen .qm-medallion::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--qm-gold) 30%, transparent) 0%,
    color-mix(in srgb, var(--qm-gold) 12%, transparent) 42%,
    transparent 68%);
  pointer-events: none;
}
.sig-queen .qm-medallion img {
  position: relative; z-index: 1;
  width: 100%; height: auto; display: block;
  box-shadow: none;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.55));
  transition: transform .9s var(--ease-out);
}
.sig-queen .bc-queen__media:hover .qm-medallion img { transform: translateY(-6px) scale(1.015); }

/* a thin gold ring echoing the medallion, set off its edge */
.sig-queen .qm-medallion::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; width: 104%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--qm-gold) 34%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sig-queen .qm-medallion img { transition: none; }
}

/* ================================================================== *
 * Review round, 2026-09-01
 * ================================================================== */

/* ---- 1. The gold ring around the medallion comes off --------------- */
.sig-queen .qm-medallion::after { content: none !important; }

/* ---- 2. Queen ground: plum out, the palette's own espresso in ------
 * This retires the contract exception entirely -- the section now uses
 * a colour that was already in the approved palette.                  */
.sig-queen {
  --qm-ground: var(--wp--preset--color--text);
  --qm-gold: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--text);
}
.sig-queen::before {
  background: radial-gradient(68% 58% at 26% 34%,
    color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent), transparent 72%);
}
.sig-queen :is(h2, p, li) { color: var(--wp--preset--color--background); }
.sig-queen .qm-notes li { color: color-mix(in srgb, var(--wp--preset--color--background) 82%, transparent); }
.sig-queen .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--background); }
.sig-queen .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--wp--preset--color--text); }

/* ---- 3. The creed line, replacing the scrolling ticker ------------- */
.bc-creed {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
  text-align: center;
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* ---- 4. Two Ways: kill the injected gap, bottom-align the buttons -- *
 * Core's block-gap was adding margin-top to the second path, dropping
 * 02 below 01. With that zeroed and each path a flex column, the
 * buttons sit on a common baseline whatever the heading wraps to.     */
.bc-paths > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.bc-paths { align-items: stretch; }
.bc-path { display: flex; flex-direction: column; height: 100%; }
.bc-path h3 { min-height: 2.4em; }
.bc-path p { flex: 1 1 auto; }
.bc-path .wp-block-buttons { margin-top: auto; padding-top: 1.5rem; }
@media (max-width: 780px) {
  .bc-path h3 { min-height: 0; }
}

/* ---- 5. Buttons: one size for both styles, and actually centred ---- *
 * Core gives is-style-outline different padding from the filled button,
 * so the pair rendered 57px and 48px tall and sat on different lines.  */
.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  padding: .95rem 1.65rem !important;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
}
.wp-block-buttons { align-items: stretch; }
.sig-cta .wp-block-buttons,
.sig-proof .wp-block-buttons,
.bc-paths-head .wp-block-buttons { justify-content: center; }

/* Two Ways: centre everything inside each path column -- the number,
 * the heading, the body and the button -- to match the centred section
 * head above them. The columns are flex, so both text-align and
 * align-items are needed for the block-level children to actually sit
 * centre rather than just their text. */
.bc-path { text-align: center; align-items: center; }
.bc-path .bc-path__num { margin-inline: auto; }
.bc-path h3 { max-width: 24ch; margin-inline: auto; }
.bc-path p { max-width: 36ch; margin-inline: auto; }
.bc-path .wp-block-buttons { justify-content: center; width: 100%; }

/* ---- Shop grid: two up, not six across ---------------------------- *
 * auto-fill with a 260px min was producing six columns on a wide screen,
 * shrinking a six-SKU boutique catalogue into a supermarket shelf. Two
 * substantial cards per row suits the range; the grid is capped so the
 * cards stay a sane size on very wide screens.                        */
.bc-shop-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1080px;
  margin-inline: auto;
}
.bc-shop-grid .bc-product-card .bc-pc-media { aspect-ratio: 4 / 3; }
.bc-shop-grid .bc-product-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.bc-shop-grid .bc-product-card .bc-pc-price { font-size: 1.35rem; }
@media (max-width: 640px) {
  .bc-shop-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================== *
 * Blog / Journal, 2026-09-01
 *
 * A real reading layout: a quiet titled opening, a full-bleed feature
 * image, then a narrow measure with proper editorial typography. This
 * lives in the `single` and `home` templates, so it applies to every
 * existing post and every post written from here on, with no per-post
 * work. See the standing rule recorded in global CLAUDE.md.
 * ================================================================== */

/* ---- Post opening ------------------------------------------------- */
.bc-post-head {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.bc-post-head .eyebrow { justify-content: center; }
.bc-post-title {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.bc-post-meta {
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.bc-post-meta > * { margin: 0; }
.bc-post-meta a { color: var(--wp--preset--color--accent); text-decoration: none; }
.bc-post-meta .bc-post-cat::before {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--wp--preset--color--accent); margin-right: 1rem; vertical-align: middle;
}

/* ---- Feature image: full-bleed band -------------------------------- */
.bc-post-hero { margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); }
.bc-post-hero img {
  width: 100vw; height: clamp(280px, 52vh, 560px);
  object-fit: cover; object-position: center 50%; display: block;
}
.bc-post-hero { border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }

/* ---- The article body: one narrow, readable measure ---------------- */
.bc-post-body { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.bc-post-body .sig__inner { max-width: 44rem; }
.bc-post-body .wp-block-post-content > * { margin-block: 0 1.35rem; }
.bc-post-body .wp-block-post-content p {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: none;
}
/* a drop cap on the opening paragraph, set in the display face */
.bc-post-body .wp-block-post-content > p:first-of-type::first-letter {
  float: left;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 3.9em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--wp--preset--color--accent);
}
.bc-post-body .wp-block-post-content :is(h2, h3) {
  margin-block: clamp(2.25rem, 4vw, 3rem) .75rem;
  line-height: 1.15;
}
.bc-post-body .wp-block-post-content h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.bc-post-body .wp-block-post-content h2::before {
  content: ""; display: block; width: 54px; height: 2px;
  background: var(--wp--preset--color--accent); margin-bottom: 1rem;
}
.bc-post-body .wp-block-post-content h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
/* quotes reuse the site's pull-quote language: a big mark, no rule */
.bc-post-body .wp-block-post-content :is(blockquote, .wp-block-quote) {
  border: 0; padding: 0; margin-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.bc-post-body .wp-block-post-content :is(blockquote, .wp-block-quote)::before {
  content: "\201C"; display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: .7;
  color: var(--wp--preset--color--accent); margin-bottom: .1em;
}
.bc-post-body .wp-block-post-content :is(blockquote, .wp-block-quote) p {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4; font-weight: 500;
}
.bc-post-body .wp-block-post-content :is(blockquote, .wp-block-quote) cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.bc-post-body .wp-block-post-content figure { margin-block: clamp(2rem, 4vw, 3rem); }
.bc-post-body .wp-block-post-content figure img { width: 100%; height: auto; display: block; }
.bc-post-body .wp-block-post-content figcaption {
  margin-top: .75rem; text-align: center;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.bc-post-body .wp-block-post-content ul,
.bc-post-body .wp-block-post-content ol { padding-left: 1.35rem; }
.bc-post-body .wp-block-post-content li { margin-bottom: .5rem; line-height: 1.7; }
.bc-post-body .wp-block-post-content hr {
  border: 0; height: 1px; margin-block: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent), transparent);
}

/* ---- Previous / next --------------------------------------------- */
.bc-post-nav { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4rem); }
.bc-post-nav__row { gap: 1.5rem; }
.bc-post-nav a {
  text-decoration: none;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  transition: color .3s var(--ease-out);
}
.bc-post-nav a:hover { color: var(--wp--preset--color--accent); }
.bc-post-nav .bc-nav-prev a::before { content: "\2190"; margin-right: .6rem; color: var(--wp--preset--color--accent); }
.bc-post-nav .bc-nav-next a::after  { content: "\2192"; margin-left: .6rem; color: var(--wp--preset--color--accent); }

.bc-post-cta { padding-block: clamp(3rem, 6vw, 5rem); }
.bc-post-cta h2 { max-width: 20ch; margin-inline: auto; }

/* ---- Journal archive: editorial cards, not a plain grid ----------- */
.bc-journal { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }
.bc-journal .wp-block-post-template {
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem);
}
.bc-journal .wp-block-post-template > li {
  display: flex; flex-direction: column;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.bc-journal .wp-block-post-featured-image { margin-bottom: 1.25rem; overflow: hidden; }
.bc-journal .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.bc-journal .wp-block-post-template > li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.bc-journal .wp-block-post-title {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.22; margin: 0 0 .6rem;
}
.bc-journal .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--text); }
.bc-journal .wp-block-post-template > li:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }
.bc-journal .wp-block-post-excerpt { color: var(--wp--preset--color--muted); font-size: .95rem; line-height: 1.65; }
.bc-journal .wp-block-post-excerpt__more-link { color: var(--wp--preset--color--accent); text-decoration: none; }
.bc-journal .wp-block-query-pagination { margin-top: clamp(2.5rem, 5vw, 4rem); gap: 1rem; }
.bc-journal .wp-block-query-pagination a { color: var(--wp--preset--color--accent); text-decoration: none; }

@media (max-width: 899px) {
  .bc-journal .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .bc-journal .wp-block-post-template { grid-template-columns: 1fr !important; }
  .bc-post-body .wp-block-post-content > p:first-of-type::first-letter { font-size: 3.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-journal .wp-block-post-featured-image img { transition: none; }
}

/* The post feature image sits inside a constrained main, so alignfull
 * alone did not reach the viewport edge. Break it out explicitly. */
.bc-post-hero {
  width: 100vw; max-width: 100vw;
  margin-inline: calc(50% - 50vw) !important;
}

/* ================================================================== *
 * Product pages + shop refinements, 2026-09-02
 * ================================================================== */

/* ---- Shop: three across, and the filter bar pulled up ------------- */
.bc-shop-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: none;
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
}
.bc-shop-grid .bc-product-card .bc-pc-media { aspect-ratio: 1 / 1; }
@media (max-width: 980px) { .bc-shop-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 620px) { .bc-shop-grid { grid-template-columns: 1fr !important; } }

/* halve the gap between the crest divider and the filter row */
.bc-shop-toolbar { margin-top: 0; padding-top: 0; }
.archive-product .bc-divider-wrap,
body.post-type-archive-product .bc-divider-wrap { padding-block: clamp(.5rem, 1vw, .9rem); }
.bc-shop-section { padding-block-start: clamp(1rem, 2vw, 1.75rem) !important; }

/* ---- Product page: the opening ------------------------------------ */
.bc-product-top { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.bc-crumbs {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.bc-crumbs a { color: var(--wp--preset--color--accent); text-decoration: none; }

.bc-product-cols { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.bc-product-media { flex-basis: 52% !important; }
.bc-product-detail { flex-basis: 48% !important; }

/* the gallery gets the site's gold double frame */
.bc-product-media .wp-block-woocommerce-product-image-gallery { position: relative; }
.bc-product-media .wp-block-woocommerce-product-image-gallery img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 24px 56px rgba(42,27,18,.18);
}
.bc-product-media .wp-block-woocommerce-product-image-gallery::before {
  content: ""; position: absolute; inset: -12px; z-index: 2; pointer-events: none;
  border: 2px solid var(--wp--preset--color--accent);
}
.bc-product-media .wp-block-woocommerce-product-image-gallery::after {
  content: ""; position: absolute; inset: -22px; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 42%, transparent);
}
.bc-product-media { padding: 24px; }

.bc-product-title {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.05; margin: 0 0 .5rem;
}
.bc-product-price .woocommerce-Price-amount,
.bc-product-price {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  margin: 0 0 1.25rem;
}
.bc-product-price del { opacity: .5; margin-right: .5rem; }
.bc-product-summary {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 42ch; margin-bottom: 1.75rem;
}
.bc-product-assurance {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* the add-to-cart form, in the site's own controls */
.bc-product-cart form.cart { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; margin: 0; }
.bc-product-cart .quantity input[type="number"] {
  width: 5.5rem; height: 100%; min-height: 3.25rem;
  border: 1px solid var(--line); border-radius: 0;
  text-align: center; font: inherit;
  background: var(--wp--preset--color--background);
}
.bc-product-cart button[type="submit"],
.bc-product-cart .single_add_to_cart_button {
  min-height: 3.25rem; padding: .95rem 2rem;
  border: none; border-radius: 0; cursor: pointer;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-contrast);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), filter .22s var(--ease-out);
}
.bc-product-cart button[type="submit"]:hover,
.bc-product-cart .single_add_to_cart_button:hover {
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,27,18,.20); filter: brightness(1.05);
}
/* variation selects */
.bc-product-cart .variations { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.bc-product-cart .variations th,
.bc-product-cart .variations td { padding: .35rem 0; text-align: left; border: 0; }
.bc-product-cart .variations label {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .09em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.bc-product-cart .variations select {
  width: 100%; min-height: 3rem; border-radius: 0;
  border: 1px solid var(--line); background: var(--wp--preset--color--background); font: inherit;
}
.bc-product-cart .woocommerce-variation-price { margin-block: .75rem; }

/* ---- The blend story ---------------------------------------------- */
.bc-product-story {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--wp--preset--color--surface);
}
.bc-product-story .eyebrow { justify-content: flex-start; margin-bottom: 1rem; }
.bc-product-details .wc-tabs,
.bc-product-details .woocommerce-tabs ul.tabs { display: none; }
.bc-product-details .woocommerce-Tabs-panel { display: block !important; }
.bc-product-details h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  margin-block: 0 1rem;
}
.bc-product-details p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; }
.bc-product-details table.shop_attributes { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.bc-product-details table.shop_attributes th,
.bc-product-details table.shop_attributes td {
  padding: .8rem 1rem; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
.bc-product-details table.shop_attributes th {
  width: 34%;
  font-family: var(--wp--preset--font-family--body);
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); font-weight: 700;
  background: color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent);
}

/* ---- Related products --------------------------------------------- */
.bc-product-related { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bc-product-related h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.bc-related-grid .wp-block-product-template,
.bc-related-grid ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none; padding: 0; margin: 0;
}
.bc-related-grid li {
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
  text-align: center;
}
.bc-related-grid img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease-out); }
.bc-related-grid li:hover img { transform: scale(1.04); }
.bc-related-grid .wp-block-post-title { font-size: 1.05rem; line-height: 1.25; margin: 1rem 0 .35rem; }
.bc-related-grid .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--text); }
.bc-related-grid li:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }
.bc-related-grid .wc-block-components-product-price { color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--display); }

@media (max-width: 899px) {
  .bc-product-media, .bc-product-detail { flex-basis: 100% !important; }
  .bc-related-grid .wp-block-product-template,
  .bc-related-grid ul.wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .bc-related-grid .wp-block-product-template,
  .bc-related-grid ul.wp-block-post-template { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-related-grid img { transition: none; }
}

/* Shop: the section holding the filter bar carried the standard 72.56px
 * section padding plus a 24px block-gap margin, putting ~97px between the
 * crest divider and the filters. Halve it. */
.sig:has(.bc-shop-toolbar) {
  padding-top: 2.25rem !important;
  margin-top: 0 !important;
}

/* ================================================================== *
 * Blends page rebuild, 2026-09-02
 *
 * The four blends are the page. Each gets its own full row under its
 * own crest, alternating side to side, rather than a table plus a
 * horizontal strip. The comparison matrix follows once the reader
 * knows what they are comparing.
 * ================================================================== */

.bc-blend-intro { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); text-align: center; }
.bc-blend-intro .eyebrow { justify-content: center; }
.bc-blend-intro h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: 20ch; margin-inline: auto; }

/* ---- One blend, one row ------------------------------------------- */
.bc-blend-row { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.bc-blend-row:nth-of-type(even) { background: var(--wp--preset--color--surface); }
.bc-blend__cols { gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bc-blend__media { flex-basis: 42% !important; }
.bc-blend__copy { flex-basis: 58% !important; }
.bc-blend-row.is-flipped .bc-blend__cols { flex-direction: row-reverse; }

.bc-blend-crest { margin: 0; position: relative; }
.bc-blend-crest img {
  width: 100%; height: auto; display: block;
  max-width: 340px; margin-inline: auto;
  filter: drop-shadow(0 22px 40px rgba(42, 27, 18, .28));
  transition: transform .9s var(--ease-out);
}
.bc-blend-row:hover .bc-blend-crest img { transform: translateY(-8px) scale(1.02); }
/* a gold disc sitting behind the crest so it reads as mounted, not floating */
.bc-blend-crest::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; width: min(94%, 330px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent) 46%,
    transparent 70%);
  pointer-events: none;
}
.bc-blend-crest img { position: relative; z-index: 1; }

.bc-blend__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--accent) 72%, transparent);
  margin: 0 0 .4rem;
}
.bc-blend__name {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  margin: 0 0 .85rem;
}
.bc-blend__name::before {
  content: ""; display: block; width: 60px; height: 2px;
  background: var(--wp--preset--color--accent); margin-bottom: .9rem;
}
.bc-blend__copy p:not(.bc-blend__num) {
  font-size: 1.05rem; line-height: 1.7; max-width: 52ch;
  color: var(--wp--preset--color--muted);
}
.bc-blend__notes { margin-top: 1.4rem; }
.bc-blend__copy .wp-block-buttons { margin-top: 1.6rem; }

@media (max-width: 899px) {
  .bc-blend__media, .bc-blend__copy { flex-basis: 100% !important; }
  .bc-blend-row.is-flipped .bc-blend__cols { flex-direction: column; }
  .bc-blend-crest img { max-width: 240px; }
}

/* ---- The comparison matrix ---------------------------------------- */
.bc-compare { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.bc-compare .eyebrow { justify-content: center; }
.bc-compare h2 { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.bc-compare .wp-block-table { overflow-x: auto; }
.bc-compare table { border-collapse: collapse; width: 100%; min-width: 640px; }
.bc-compare thead th {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--body);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: .9rem 1rem; text-align: left; border: 0;
}
.bc-compare tbody td {
  padding: .9rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
  vertical-align: top; font-size: .95rem;
}
.bc-compare tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent); }
.bc-compare tbody tr:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 9%, transparent); }
.bc-compare tbody td:first-child {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.1rem; font-weight: 600; color: var(--wp--preset--color--text);
}
/* PENDING cells read as an honest gap, not a mistake */
.bc-compare td:where(:not(:first-child)) { color: var(--wp--preset--color--muted); }

/* ---- The One, two facings ----------------------------------------- */
.bc-twofacings {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
  text-align: center;
}
.bc-twofacings :is(h2, h3, p) { color: var(--wp--preset--color--background); }
.bc-twofacings .eyebrow { justify-content: center; color: var(--wp--preset--color--accent); }
.bc-twofacings .eyebrow::before { background: var(--wp--preset--color--accent); }
.bc-twofacings h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem); max-width: 24ch; margin-inline: auto;
}
.bc-twofacings > .sig__inner > p { max-width: 52ch; margin-inline: auto; opacity: .82; }
.bc-facings { gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2rem, 4vw, 3.25rem); }
.bc-facing { text-align: center; }
.bc-facing__img { margin: 0 0 1.25rem; }
.bc-facing__img img {
  width: 100%; height: auto; max-width: 260px; margin-inline: auto; display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5));
  transition: transform .8s var(--ease-out);
}
.bc-facing:hover .bc-facing__img img { transform: translateY(-6px); }
.bc-facing h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 .5rem;
  color: var(--wp--preset--color--accent) !important;
}
.bc-facing p { max-width: 34ch; margin-inline: auto; opacity: .8; font-size: .98rem; }

@media (max-width: 780px) {
  .bc-facings { gap: 2.5rem; }
  .bc-facing__img img { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-blend-crest img, .bc-facing__img img { transition: none; }
}

/* the shop gap, nudged to the half you actually asked for */
.sig:has(.bc-shop-toolbar) { padding-top: 3rem !important; }

/* ================================================================== *
 * Blends round 2, 2026-09-02
 * ================================================================== */

/* ---- Section tones that actually read as different ---------------- *
 * parchment against cream was only ~20 points apart and read as flat
 * cream down the whole page. Alternate against the espresso instead.  */
.bc-blend-row:nth-of-type(even) { background: transparent; }
.bc-blend-row.is-flipped {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
}
.bc-blend-row.is-flipped :is(h3, p) { color: var(--wp--preset--color--background); }
.bc-blend-row.is-flipped .bc-blend__copy p:not(.bc-blend__num) {
  color: color-mix(in srgb, var(--wp--preset--color--background) 78%, transparent);
}
.bc-blend-row.is-flipped .qm-notes li {
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
  color: color-mix(in srgb, var(--wp--preset--color--background) 82%, transparent);
}
.bc-blend-row.is-flipped .qm-notes li:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
  color: var(--wp--preset--color--background);
}
.bc-blend-row.is-flipped .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--background);
}
.bc-blend-row.is-flipped .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--text);
}
.bc-blend-row.is-flipped .bc-blend-crest::before {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent) 46%, transparent 70%);
}
/* the two-facings band follows a dark row, so lighten it to keep the pulse */
.bc-twofacings {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
}
.bc-twofacings :is(h2, h3, p) { color: var(--wp--preset--color--text); }
.bc-twofacings > .sig__inner > p { opacity: 1; color: var(--wp--preset--color--muted); }
.bc-facing p { opacity: 1; color: var(--wp--preset--color--muted); }
.bc-facing__img img { filter: drop-shadow(0 20px 40px rgba(42,27,18,.25)); }

/* ---- The comparison, as cards rather than a flat table ------------ */
.bc-spec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.bc-spec {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  background: var(--wp--preset--color--background);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent);
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out), border-color .34s var(--ease-out);
}
.bc-spec:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(42,27,18,.14);
  border-color: var(--wp--preset--color--accent);
}
.bc-spec__crest { height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.bc-spec__crest img { max-height: 92px; width: auto; display: block; }
.bc-spec__name {
  font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.2;
  text-align: center; margin: 0 0 1rem; padding-bottom: .85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent);
}
.bc-spec__list { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.bc-spec__row { display: flex; flex-direction: column; gap: .15rem; }
.bc-spec__row dt {
  font-family: var(--wp--preset--font-family--body);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--wp--preset--color--muted);
}
.bc-spec__row dd { margin: 0; font-size: .95rem; line-height: 1.45; }
.bc-spec__row.is-pending dd { color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent); }
.bc-pending-mark {
  font-size: .78rem; font-style: normal; letter-spacing: .04em;
  border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--muted) 55%, transparent);
}
@media (max-width: 980px) { .bc-spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bc-spec-grid { grid-template-columns: 1fr; } }

/* ---- FAQ band: full bleed, not a floating box --------------------- */
.sig.bc-faq-section:not(.alignfull) {
  width: 100vw !important; max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-inline: 0 !important;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.sig.bc-faq-section > .sig__inner,
.sig.bc-faq-section .bc-faq {
  max-width: var(--container); margin-inline: auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}

/* ================================================================== *
 * Product + Blends corrections, 2026-09-02
 * ================================================================== */

/* ---- The blend story was spanning the full 1900px ------------------ *
 * Its .sig__inner had picked up max-width:none, so the copy ran hard
 * left with a huge void to the right. Pin it narrow and centred.      */
.bc-product-story > .sig__inner,
.bc-product-story > .sig__inner.is-narrow {
  max-width: 46rem !important;
  margin-inline: auto !important;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)) !important;
}
.bc-product-story .eyebrow { justify-content: flex-start; }

/* ---- The gold frame now wraps the real featured image -------------- *
 * The WooCommerce gallery block was rendering at zero height (its only
 * image was Woo's own zoom icon), so the frame drew as a small empty
 * rectangle. The template uses the featured image instead; frame that. */
.bc-product-media .wp-block-woocommerce-product-image-gallery::before,
.bc-product-media .wp-block-woocommerce-product-image-gallery::after { content: none !important; }

.bc-product-media .bc-product-figure { position: relative; margin: 0; }
.bc-product-media .bc-product-figure img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 24px 56px rgba(42, 27, 18, .18);
}
.bc-product-media .bc-product-figure::before {
  content: ""; position: absolute; inset: -12px; z-index: 2; pointer-events: none;
  border: 2px solid var(--wp--preset--color--accent);
}
.bc-product-media .bc-product-figure::after {
  content: ""; position: absolute; inset: -22px; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 42%, transparent);
}
/* a transparent product render needs no drop shadow -- it would trace a
 * rectangle around an image that has no rectangle. */
.bc-product-media .bc-product-figure img[src$=".png"],
.bc-product-media .bc-product-figure img[src*="nobg"] {
  box-shadow: none;
  filter: drop-shadow(0 22px 42px rgba(42, 27, 18, .24));
}

/* ---- Blends: one optical size for crests and box renders ---------- *
 * The medallions are near-square and the box renders are portrait, so
 * matching them on height alone left the Maduro/Habano columns looking
 * mismatched. Give every mark the same square box and let it fit.     */
.bc-spec__crest { height: 128px; }
.bc-spec__crest img {
  max-height: 128px; max-width: 100%; width: auto;
  object-fit: contain; margin-inline: auto;
}
.bc-blend-crest img { max-width: none; width: 100%; }
.bc-blend__media { display: flex; align-items: center; justify-content: center; }
.bc-blend-crest {
  width: 100%; max-width: 320px;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.bc-blend-crest img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
@media (max-width: 899px) { .bc-blend-crest { max-width: 230px; } }

/* ================================================================== *
 * About + Partner rebuild, 2026-09-02
 * ================================================================== */

/* ---- About: the three principles ---------------------------------- */
.bc-values { padding-block: clamp(3rem, 6vw, 5rem); }
.bc-values > .sig__inner > p { max-width: 58ch; }
.bc-principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.bc-principle {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
  transition: background-color .35s var(--ease-out);
}
.bc-principle + .bc-principle { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent); }
.bc-principle:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent); }
.bc-principle__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--accent) 72%, transparent);
  margin: 0 0 .6rem;
}
.bc-principle__text {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.35; margin: 0;
}
@media (max-width: 780px) {
  .bc-principles { grid-template-columns: 1fr; }
  .bc-principle + .bc-principle { border-left: 0; }
}

/* ---- Partner: the four reasons ------------------------------------ */
.bc-reasons-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.bc-reasons-sec > .sig__inner > p { max-width: 62ch; }
.bc-reasons {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.bc-reasons > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.bc-reason {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.1rem, 1.8vw, 1.6rem);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
  transition: background-color .35s var(--ease-out);
}
.bc-reason + .bc-reason { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent); }
.bc-reason:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent); }
.bc-reason__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
  margin: 0 0 .5rem;
}
.bc-reason h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin: 0 0 .5rem; }
.bc-reason p { font-size: .95rem; line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0; }
@media (max-width: 980px) {
  .bc-reasons { grid-template-columns: repeat(2, 1fr); }
  .bc-reason:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) {
  .bc-reasons { grid-template-columns: 1fr; }
  .bc-reason + .bc-reason { border-left: 0; }
}

/* ---- Partner: the inquiry form, given real presentation ----------- */
.bc-form {
  max-width: 640px; margin-inline: auto;
  background: var(--wp--preset--color--background);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 36%, transparent);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.bc-form .bc-field { margin-bottom: 1.15rem; }
.bc-form input, .bc-form textarea, .bc-form select {
  border-radius: 0; min-height: 3rem;
  border: 1px solid var(--line);
  background: var(--wp--preset--color--background);
}
.bc-form button[type="submit"] {
  min-height: 3.25rem; padding: .95rem 2rem; border: 0; border-radius: 0; cursor: pointer;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-contrast);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), filter .22s var(--ease-out);
}
.bc-form button[type="submit"]:hover {
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,27,18,.20); filter: brightness(1.05);
}

/* ================================================================== *
 * Round 6, 2026-09-02
 *
 * About hero crop, principle balance, three distinct treatments for
 * the 4,000-cigar proof, two distinct ledgers, shop and partner
 * alignment, and post navigation that reads as navigation.
 * ================================================================== */

/* ---- 1. About hero: a portrait source inside a landscape box ------ *
 * about-hero-founder.webp is 1350x1800 (aspect .75) and the hero box
 * is 1.67, so a cover crop keeps only 45% of the image height. Centred,
 * that band opens below his hairline. Biasing to 18% puts the whole
 * head in frame with headroom to spare.                              */
body.page-id-115 .sig-hero.has-photo .sig__inner > figure img {
  object-position: 38% 18% !important;
}
@media (max-width: 899px) {
  body.page-id-115 .sig-hero.has-photo .sig__inner > figure img {
    object-position: 45% 14% !important;
  }
}

/* ---- 2. About principles: the block-gap margin, a fourth time ----- *
 * .bc-principles is a flow container, so core injects
 * margin-block-start:24px on children two and three and leaves the
 * first alone, which puts the three cards on three different
 * baselines. Zero it and lay them out on a real grid.                */
.bc-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
}
.bc-principles > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.bc-principle {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-top: 1.15rem;
  border-top: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}
.bc-principle > * { margin: 0 !important; }
.bc-principle__num {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1;
  color: var(--wp--preset--color--accent);
}
.bc-principle__text {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--wp--preset--color--muted);
  max-width: 34ch;
}
@media (max-width: 860px) { .bc-principles { grid-template-columns: 1fr; } }

/* ---- 3. One proof, three pages, three treatments ------------------ *
 * The 4,000-cigar line is the client's own copy and appears, worded
 * differently, in all three source documents. The words stay; the
 * identical outlined-numeral treatment on all three does not.
 * Home keeps the numeral as a graphic. About becomes a dark testimony
 * band. Partner reads as a sell-through record.                      */

/* About: a dark band, the words carrying it alone */
body.page-id-115 .sig-proof {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
}
body.page-id-115 .sig-proof .bc-bignum { display: none; }
body.page-id-115 .sig-proof .sig__inner {
  max-width: 56rem;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 62%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 62%, transparent);
}
body.page-id-115 .sig-proof .pull-quote {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  line-height: 1.24;
  color: var(--wp--preset--color--background);
  margin: 0 auto;
  /* the inner already caps the measure; a ch cap on top of it drove the
   * quote down to seven short ragged lines */
  max-width: none;
  text-wrap: balance;
}
body.page-id-115 .sig-proof .bc-tail {
  color: color-mix(in srgb, var(--wp--preset--color--background) 70%, transparent);
  margin-top: 1.75rem;
}

/* Partner: the number as a ledger entry beside the sentence */
body.page-id-118 .sig-proof { background: var(--wp--preset--color--background); }
body.page-id-118 .sig-proof .sig__inner {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
  text-align: left;
  padding: clamp(2rem, 4vw, 3.25rem);
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 42%, transparent);
}
body.page-id-118 .sig-proof .bc-bignum {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: .9;
  color: var(--wp--preset--color--accent);
  -webkit-text-stroke: 0;
  text-align: left;
  margin: 0 !important;
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}
body.page-id-118 .sig-proof .pull-quote {
  grid-column: 2;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
  text-align: left !important;
  /* core's constrained layout emits margin-inline:auto !important on
   * every child, which pushed the tail 153px right of the quote */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page-id-118 .sig-proof .bc-tail {
  grid-column: 2;
  margin: 1.1rem 0 0;
  max-width: 52ch;
  font-size: .98rem;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page-id-118 .sig-proof .bc-bignum {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 800px) {
  body.page-id-118 .sig-proof .sig__inner { grid-template-columns: 1fr; row-gap: 1.5rem; }
  body.page-id-118 .sig-proof .bc-bignum {
    grid-row: auto;
    border-right: 0;
    padding-right: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
    padding-bottom: .75rem;
  }
  body.page-id-118 .sig-proof .pull-quote,
  body.page-id-118 .sig-proof .bc-tail { grid-column: 1; }
}

/* ---- 4. Two pages carry the 30-years stat ------------------------- *
 * Home keeps the held numeral pinned beside the narrative. About lays
 * it flat across the top of a single column, so the two pages do not
 * read as the same page twice.                                       */
body.page-id-115 .bc-ledger { display: block; }
body.page-id-115 .bc-ledger__mark,
body.page-id-115 .bc-ledger__body { flex-basis: auto !important; width: 100%; }
body.page-id-115 .bc-ledger__num {
  position: static;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  border-top: 0;
  border-bottom: 2px solid var(--wp--preset--color--accent);
  padding: 0 0 1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
body.page-id-115 .bc-ledger__num span { font-size: clamp(2.8rem, 5.5vw, 4.5rem); }
body.page-id-115 .bc-ledger__num em {
  margin: 0 0 .35rem;
  max-width: none;
  font-style: normal;
}
body.page-id-115 .bc-ledger__body p { max-width: 66ch; }

/* ---- 5. Shop: the filter bar ran the full window ------------------ *
 * The toolbar and grid live in a bare div with no .sig__inner, so they
 * spanned 1868px at a 1900 window while every other section stopped at
 * 1200, which reads as the filters being shoved into the left corner. */
.bc-shop-toolbar,
.bc-shop-grid,
.bc-shop-empty {
  max-width: var(--container);
  margin-inline: auto;
}

/* ---- 6. Partner: the retailer inquiry block ----------------------- *
 * The section had no width cap, so the heading started at the window
 * edge while the form itself sat centred 600px away from it.         */
.sig:has(.bc-form) > .sig__inner {
  max-width: var(--container) !important;
  margin-inline: auto !important;
  text-align: center;
}
.sig:has(.bc-form) .eyebrow { justify-content: center; text-align: center; }
.sig:has(.bc-form) > .sig__inner > h2 { max-width: 22ch; margin-inline: auto; }
.sig:has(.bc-form) > .sig__inner > p:not(.eyebrow) { max-width: 54ch; margin-inline: auto; }
.bc-form { text-align: left; }

/* ---- 7. Partner split: pin the column, not each child ------------- *
 * .sig-split pinned every direct child of the first column
 * independently, so the eyebrow slid down over the headline on scroll.
 * Pinning the column as one unit keeps their spacing intact.         */
.sig-split .wp-block-column:first-child > * { position: static !important; }
.sig-split .wp-block-column:first-child {
  position: sticky;
  top: 108px;
  align-self: start;
}
@media (max-width: 899px) {
  .sig-split .wp-block-column:first-child { position: static; }
}

/* ---- 7b. Body copy drifting right of its own heading -------------- *
 * Core's constrained layout puts margin-inline:auto !important on any
 * child carrying its own max-width. In a CENTRED section that is what
 * centres the text and is correct. In a LEFT-ALIGNED one it pushes the
 * body copy 210-260px right of the heading it belongs to, which is the
 * same defect flagged on the retailer inquiry block -- it was never
 * limited to that block. Only the left-aligned sections are listed
 * here; the centred ones (sig-cta, sig-paths, bc-compare,
 * bc-blend-intro, the About proof) still need their auto margins.    */
.bc-values > .sig__inner > *,
.bc-reasons-sec > .sig__inner > *,
.bc-faq-section > .sig__inner > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- 8. .is-narrow was a no-op everywhere ------------------------- *
 * .sig__inner.is-narrow set max-width from
 * var(--wp--style--global--content-size), and this site never defines
 * that custom property -- so the declaration was invalid at computed
 * value time and the class silently did nothing. Every section marked
 * narrow has been rendering at the full 1200 container, and the two
 * places that genuinely read narrow today (the product story, the
 * retailer form) only do so because they carry their own overrides.
 * Give the var a real fallback so the class means something, and pin
 * the FAQ sections at the width they already render at, so clearing
 * this debt changes nothing that is already signed off.             */
.sig__inner.is-narrow { max-width: var(--wp--style--global--content-size, 56rem); }
.sig.bc-faq-section .sig__inner.is-narrow { max-width: var(--container); }

/* ---- 9. Post navigation, as navigation ---------------------------- *
 * These were two shrink-wrapped label pills carrying no post title, so
 * there was nothing to make stand out. The template now sets
 * showTitle, which gives each link a real title plus a
 * .post-navigation-link__label eyebrow, and the row is a flow
 * container so this grid actually governs it.                        */
.bc-post-nav__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
.bc-post-nav__row > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.bc-post-nav .bc-nav-prev,
.bc-post-nav .bc-nav-next {
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.9rem);
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 38%, transparent);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.bc-post-nav .bc-nav-next { text-align: right; }
/* the first and last post each render an empty wrapper on the side with
 * no neighbour; without this it draws as a bordered empty card */
.bc-post-nav .bc-nav-prev:not(:has(a)),
.bc-post-nav .bc-nav-next:not(:has(a)) {
  border-color: transparent;
  background: none;
  pointer-events: none;
}
.bc-post-nav .bc-nav-prev:hover,
.bc-post-nav .bc-nav-next:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(42, 27, 18, .12);
}
/* the old rule set the whole link in tracked uppercase muted body type,
 * which was right when the link was only the words "Previous post" and
 * wrong now that it carries the post title. Uppercase belongs on the
 * eyebrow alone. */
.bc-post-nav a {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  color: var(--wp--preset--color--text);
}
.bc-post-nav a:hover { color: var(--wp--preset--color--accent); }
.bc-post-nav .post-navigation-link__label {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: .5rem;
}
/* the arrows belonged on the eyebrow, not stranded above the title */
.bc-post-nav .bc-nav-prev a::before,
.bc-post-nav .bc-nav-next a::after { content: none !important; }
.bc-post-nav .bc-nav-prev .post-navigation-link__label::before {
  content: "\2190"; margin-right: .55rem;
}
.bc-post-nav .bc-nav-next .post-navigation-link__label::after {
  content: "\2192"; margin-left: .55rem;
}
.bc-post-nav .post-navigation-link__title {
  display: block;
  color: var(--wp--preset--color--text);
  transition: color .3s ease;
}
.bc-post-nav .bc-nav-prev:hover .post-navigation-link__title,
.bc-post-nav .bc-nav-next:hover .post-navigation-link__title {
  color: var(--wp--preset--color--accent);
}
@media (max-width: 700px) {
  .bc-post-nav__row { grid-template-columns: 1fr; }
  .bc-post-nav .bc-nav-next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-post-nav .bc-nav-prev,
  .bc-post-nav .bc-nav-next { transition: none; }
  .bc-post-nav .bc-nav-prev:hover,
  .bc-post-nav .bc-nav-next:hover { transform: none; }
}

/* ================================================================== *
 * Round 7, 2026-09-02 — header rebuild + the motion pass
 * ================================================================== */

/* ---- 1. Header: two zones instead of four -------------------------- *
 * The row was a flex space-between with FOUR children (logo, nav,
 * account, cart), so the nav was pushed hard against the logo and left
 * a ~527px void before the icons -- the "squishy, left-justified, miles
 * from the cart" look. The nav and the two icons now live in one
 * .bc-header-actions group, so the row is genuinely logo-left /
 * actions-right, and only the logo sits on the left.                 */
.site-header .bc-header-row {
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}
.site-header .bc-header-actions {
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
  flex-wrap: nowrap;
}

/* the nav was 343px wide carrying five items; give it room to breathe */
.site-header .wp-block-navigation .wp-block-navigation__container {
  gap: clamp(1.15rem, 1.9vw, 2.15rem);
}
.site-header .wp-block-navigation { flex: none; }

/* ---- 2. Header height, so the logo can actually be seen ----------- *
 * The logo was rendering 75x42 from a 1399x787 source inside a 64px
 * header. Height is now driven by the logo itself plus fluid padding.  */
.site-header .bc-logo {
  display: flex;
  align-items: center;
  flex: none;
}
.site-header .bc-logo img {
  height: clamp(44px, 3.2vw, 58px);
  width: auto;
  display: block;
  transition: height .4s cubic-bezier(.16, 1, .3, 1);
}

/* ---- 3. Condense on scroll ---------------------------------------- *
 * A 92px sticky header is right at rest and too much once you are
 * reading, so it gives height back after 90px of scroll. Motion.js
 * already toggles .is-scrolled at 8px, which is too twitchy to hang a
 * size change on -- the paired snippet toggles .is-condensed at 90px.
 * Padding is an inline style on the block, hence the !important.      */
.site-header {
  transition: padding .4s cubic-bezier(.16, 1, .3, 1),
              background-color .3s ease,
              box-shadow .3s ease;
}
.site-header.is-condensed {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.site-header.is-condensed .bc-logo img { height: clamp(34px, 2.3vw, 40px); }

@media (max-width: 780px) {
  .site-header .bc-logo img { height: 40px; }
  .site-header.is-condensed .bc-logo img { height: 34px; }
}

/* core/navigation keeps the five items inline all the way down to 600px
 * before its overlay takes over, and in that band the logo and the first
 * nav item close to within 19px. Tighten the nav itself rather than let
 * it collide. */
@media (max-width: 900px) and (min-width: 600px) {
  .site-header .wp-block-navigation .wp-block-navigation__container { gap: .8rem; }
  .site-header .wp-block-navigation a { font-size: .8rem; letter-spacing: .04em; }
  .site-header .bc-header-actions { gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .bc-logo img { transition: none; }
}

/* ---- 4. Motion: staggered card entrances -------------------------- *
 * The engine ships .reveal-stagger and nothing used it -- every section
 * faded in as one flat block. The card groups now stagger their own
 * children. The pre-hide is scoped to .js and the theme also carries
 * CSS transition-delay fallbacks, so a blocked GSAP still animates and
 * a blocked JS shows everything outright.                            */
.js .bc-principles.reveal-stagger > *,
.js .bc-reasons.reveal-stagger > *,
.js .bc-paths.reveal-stagger > *,
.js .bc-spec-grid.reveal-stagger > *,
.js .bc-facings.reveal-stagger > * {
  will-change: opacity, transform;
}
/* the theme's nth-child delays stop at 6; the spec grid can run longer */
.js .bc-spec-grid.reveal-stagger.is-in > *:nth-child(7) { transition-delay: .48s; }
.js .bc-spec-grid.reveal-stagger.is-in > *:nth-child(8) { transition-delay: .56s; }

/* ---- 5. Motion: the counted numerals ------------------------------ *
 * countUp() reads its target out of the element's own text and writes
 * back through toLocaleString(), so "4,000" counts up and comes back
 * with its comma intact. Nothing here hardcodes a number, which means
 * editing the copy later cannot desync the animation.                 */
.bc-bignum.count-up,
.bc-ledger__num span.count-up {
  font-variant-numeric: tabular-nums;
}

/* ---- 6. Motion: magnetic primary CTAs ----------------------------- *
 * core/button puts a custom className on the wrapper div, not the <a>,
 * and motion.js already matches .btn-magnetic -- so this needs no
 * data-attribute on the anchor and keeps the block valid.            */
.btn-magnetic { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .btn-magnetic { will-change: auto; transform: none !important; }
}

/* ================================================================== *
 * Round 8, 2026-09-03
 * ================================================================== */

/* ---- 1. About principles: equal height ----------------------------- *
 * Two rules named .bc-principles exist in this file (an earlier pass
 * and the 2026-09-02 fix pass). The later one sets align-items:start,
 * which cascades over the earlier grid rule and left card 3 taller
 * than 1 and 2 (it wraps to a third line) while the others sat short.
 * Stretching all three to the row's own height is the fix -- flex
 * children with flex-direction:column already fill a stretched parent
 * height correctly, so nothing else about the card needs to change. */
.bc-principles { align-items: stretch !important; }
.bc-principle { height: 100%; }

/* ---- 2. "Common Questions" centered on every page ------------------ *
 * The heading inherited the section's left-aligned rule from the round
 * 6 fix (correct for the two-column blocks it also covers). Centering
 * it here does not touch that rule -- text-align is independent of the
 * margin-auto fix, and no page currently has body copy between the
 * heading and the accordion (checked all four), but the second
 * selector covers one if it's ever added, without reaching into the
 * FAQ answers themselves (those are nested inside .bc-faq, a sibling
 * wp:html block, not a direct child of .sig__inner). */
.bc-faq-section > .sig__inner > h2 { text-align: center; }
.bc-faq-section > .sig__inner > p { text-align: center; margin-inline: auto; max-width: 56ch; }

/* ---- 3. Nav links: a premium hover, not a 1px afterthought --------- *
 * The header's links had a subtle 1px underline mechanism (added in an
 * earlier pass); the footer's had NOTHING -- confirmed live, plain
 * inherited text color, position:static, no hover mechanism at all.
 * Both get the same base mechanism here, then the shared hover
 * treatment below: a center-out underline instead of left-to-right, a
 * small gold mark that rises in above the link, and a color/tracking
 * shift together -- reads as a considered interaction, not a browser
 * default with one CSS line added.                                    */
.site-footer .wp-block-navigation a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
}
.site-header .wp-block-navigation a,
.site-footer .wp-block-navigation a {
  background-position: 50% 100% !important;
  transition: background-size .45s var(--ease-out), color .3s var(--ease-out), letter-spacing .3s var(--ease-out) !important;
}
.site-header .wp-block-navigation a:hover,
.site-footer .wp-block-navigation a:hover {
  color: var(--wp--preset--color--accent);
  letter-spacing: .025em;
}
.site-header .wp-block-navigation a::before,
.site-footer .wp-block-navigation a::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  transform: translate(-50%, 5px) scale(0);
  opacity: 0;
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out);
  pointer-events: none;
}
.site-header .wp-block-navigation a:hover::before,
.site-footer .wp-block-navigation a:hover::before {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
.site-header .wp-block-navigation .current-menu-item a::before {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .wp-block-navigation a,
  .site-footer .wp-block-navigation a,
  .site-header .wp-block-navigation a::before,
  .site-footer .wp-block-navigation a::before { transition: none; }
}

/* ---- 4. Header account link: icon + label ------------------------- *
 * displayStyle switched from icon_only to icon_and_text at the block
 * level (header template part), which is what actually renders "Login"
 * / "My Account" -- this just gives the pair sane spacing and stops
 * the label wrapping or crowding the cart icon.                       */
.site-header .wc-block-customer-account__link {
  display: flex; align-items: center; gap: .45rem;
  white-space: nowrap;
}
.site-header .wc-block-customer-account__link .label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  letter-spacing: .01em;
}
.site-header .wp-block-woocommerce-customer-account { width: auto; }
@media (max-width: 480px) {
  .site-header .wc-block-customer-account__link .label { display: none; }
}

/* ---- 5. Journal hero photos: real photography, custom crops -------- *
 * Each of the three live posts now carries a real photo (see punch
 * list) instead of the italic-set typographic card it shipped with.
 * .bc-post-hero crops hard (100vw x a ~400-560px band), so each image
 * needs its own vertical bias the same way the About hero did.        */
body.postid-119 .bc-post-hero img { object-position: center 40%; } /* Benny in the tobacco field */
body.postid-121 .bc-post-hero img { object-position: center 50%; } /* cigar in hand, close-up */
body.postid-120 .bc-post-hero img { object-position: center 40%; } /* Queen Makeda box */

/* ---- 6. My Account: a centered card, not a flush-left form --------- */
body.woocommerce-account .entry-content {
  display: flex; justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
body.woocommerce-account .woocommerce {
  width: 100%; max-width: 26rem;
}
body.woocommerce-account .woocommerce > h2 {
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 1.75rem;
}
body.woocommerce-account .woocommerce-form-login {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
body.woocommerce-account .woocommerce-form-row { margin-bottom: 1.1rem; }
body.woocommerce-account .woocommerce-form-login label {
  display: block; margin-bottom: .4rem;
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--wp--preset--color--muted);
}
body.woocommerce-account .woocommerce-form-login .input-text {
  width: 100%; border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--background);
  padding: .7rem .85rem; font: inherit; color: var(--wp--preset--color--text);
}
body.woocommerce-account .woocommerce-form-login .input-text:focus {
  outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px;
}
body.woocommerce-account .woocommerce-form-login .form-row:has(button) {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.4rem;
}
body.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: var(--wp--preset--color--muted);
  margin: 0;
}
body.woocommerce-account .woocommerce-LostPassword {
  text-align: center; margin: 1.25rem 0 0;
  font-size: .92rem;
}
body.woocommerce-account .woocommerce-LostPassword a { color: var(--wp--preset--color--accent); }

/* ---- 7. Mini-cart drawer: the Benny mark at the top ---------------- *
 * The drawer is Interactivity-API-driven, mounted once at page load
 * and toggled by aria-hidden (confirmed: it exists in the DOM before
 * the cart icon is ever clicked), so a pure-CSS generated image is
 * reliable here -- no click-timing/mutation-observer race to manage.  */
.wp-block-woocommerce-mini-cart-contents {
  padding-top: 4.25rem !important;
  position: relative;
}
.wp-block-woocommerce-mini-cart-contents::before {
  /* content:url() looks right in devtools (computed width/height read back
   * exactly what's declared) but Chromium does not actually constrain a
   * generated-content IMAGE to that box -- it paints at the source file's
   * own intrinsic size regardless, which put a huge uncropped logo across
   * the whole lower half of the drawer. background-image + background-size
   * is the version of this trick that's actually reliably sized. */
  content: "";
  position: absolute;
  top: 1.5rem; left: 50%;
  width: 84px; height: 47px;
  transform: translateX(-50%);
  display: block;
  background: url("https://bcigars.cc/wp-content/uploads/2026/08/logo-primary.png") no-repeat center / contain;
}
/* Deliberately NOT repositioning .wc-block-components-drawer__close-wrapper:
 * it already sits top-right via WooCommerce's own default styles, and
 * forcing position:absolute on it collapsed its width to 0, which in turn
 * zeroed the close icon's own SVG size (confirmed: the icon disappeared
 * while the 32x32 click target stayed put) -- some percentage-based sizing
 * inside WooCommerce's own CSS depends on that wrapper staying in flow. */

/* ---- 8. Metallic buttons -------------------------------------------- *
 * Every real call-to-action across the site -- core content buttons,
 * add-to-cart, the mini-cart's own checkout/cart buttons, the cart and
 * checkout submit buttons, the login button -- was a flat single-tone
 * fill (theme.json's default button element style) with a plain
 * translateY lift. A metallic sweep replaces the flat fill; the lift
 * and shadow stay. Deliberately NOT applied to .wp-element-button
 * broadly: that class also lands on the mini-cart's small close icon
 * and quantity controls, which should stay plain.                     */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.woocommerce-form-login__submit,
.single_add_to_cart_button,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__shopping-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 12%) 0%,
    color-mix(in srgb, var(--wp--preset--color--accent) 100%, white 30%) 28%,
    var(--wp--preset--color--accent) 48%,
    color-mix(in srgb, var(--wp--preset--color--accent) 100%, white 40%) 66%,
    color-mix(in srgb, var(--wp--preset--color--accent) 85%, black 10%) 100%
  ) !important;
  background-size: 230% 100% !important;
  background-position: 0% 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.16) !important;
  transition: background-position .6s ease, transform .22s var(--ease-out), box-shadow .22s var(--ease-out) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.woocommerce-form-login__submit:hover,
.single_add_to_cart_button:hover,
.wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__shopping-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-position: 100% 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.16), 0 10px 24px rgba(42,27,18,.2) !important;
}
/* the mini-cart's own outline-style "View cart" button: same shimmer,
 * as the fill it reveals on hover rather than its resting state */
.wc-block-mini-cart__footer-cart.is-style-outline {
  transition: background-position .6s ease, color .3s ease, transform .22s var(--ease-out) !important;
}
.wc-block-mini-cart__footer-cart.is-style-outline:hover {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 12%) 0%,
    color-mix(in srgb, var(--wp--preset--color--accent) 100%, white 30%) 28%,
    var(--wp--preset--color--accent) 48%,
    color-mix(in srgb, var(--wp--preset--color--accent) 100%, white 40%) 66%,
    color-mix(in srgb, var(--wp--preset--color--accent) 85%, black 10%) 100%
  ) !important;
  color: var(--wp--preset--color--accent-contrast) !important;
}

/* Core outline buttons ("Find it in the Shop" etc.) already had a gold
 * ::after sweep-in on hover from an earlier pass -- flat var(--accent),
 * set directly on the base .wp-block-button__link::after rule (it's
 * always that color, just scaleX(0) until hover triggers the reveal).
 * Make that fill the same metallic gradient instead of a flat tone, so
 * outline and solid buttons read as one system. Deliberately NOT
 * !important: .sig-queen's own gold-token override
 * (.sig-queen .wp-block-button.is-style-outline ...::after) is four
 * classes deep to this rule's three, so it still wins on specificity
 * alone and stays untouched. */
.wp-block-button.is-style-outline .wp-block-button__link::after {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 12%) 0%,
    color-mix(in srgb, var(--wp--preset--color--accent) 100%, white 30%) 28%,
    var(--wp--preset--color--accent) 48%,
    color-mix(in srgb, var(--wp--preset--color--accent) 100%, white 40%) 66%,
    color-mix(in srgb, var(--wp--preset--color--accent) 85%, black 10%) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button:not(.is-style-outline) .wp-block-button__link,
  .woocommerce-form-login__submit,
  .single_add_to_cart_button,
  .wc-block-mini-cart__footer-checkout,
  .wc-block-mini-cart__shopping-button,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .wc-block-mini-cart__footer-cart.is-style-outline {
    transition: none !important;
  }
}

/* ================================================================== *
 * Round 9, 2026-09-03
 * ================================================================== */

/* ---- 1. FAQ closing paragraph: actually centred -------------------- *
 * Round 8 set text-align:center on it, which was only half the job.
 * The round 6 rule (.bc-faq-section > .sig__inner > * { margin-left:0
 * !important }) beat the plain margin-inline:auto that came with it,
 * so the 532px box stayed pinned to the left edge of a 1200px
 * container with its text centred INSIDE that left-hanging box --
 * which reads as "not centred", correctly. Restore the auto margins at
 * matching weight, for the paragraph only: the heading is centred by
 * text-align (it spans the full width) and the accordion must stay
 * full width and left-aligned, so neither wants auto margins.
 * Affects About, Partner and Blends; Home has no closing paragraph.  */
.bc-faq-section > .sig__inner > p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 2. Form labels sit above the field, never inside it ----------- *
 * WooCommerce's checkout/cart blocks use a floating-label pattern: the
 * label is position:absolute INSIDE the input box and shrinks upward on
 * focus. Every hand-built form on this site already stacks its labels
 * (the retailer inquiry form, the login form, the contact form), so
 * these were the only fields breaking the pattern. Static-positioning
 * the label and returning the input to normal padding converts them to
 * the same stacked treatment without touching WooCommerce markup.     */
/* WooCommerce writes the INPUT first and the LABEL second, then floats the
 * label back up over the field with position:absolute. Simply un-absoluting
 * the label therefore drops it BELOW its own input. Making the wrapper a
 * flex column and pulling the label to order:-1 puts it above the field
 * without touching WooCommerce's markup or DOM order (so its own focus and
 * validation scripts, which walk these nodes, keep working). */
.wc-block-components-text-input,
.wc-block-components-address-form__country,
.wc-block-components-address-form__state {
  margin-top: 1.15rem;
  display: flex !important;
  flex-direction: column;
}
.wc-block-components-text-input > label,
.wc-block-components-address-form__country > label,
.wc-block-components-address-form__state > label {
  order: -1;
}
.wc-block-components-text-input > label,
.wc-block-components-address-form__country label,
.wc-block-components-address-form__state label,
.wc-block-components-combobox label {
  position: static !important;
  transform: none !important;
  display: block !important;
  margin: 0 0 .4rem !important;
  padding: 0 !important;
  font-size: var(--wp--preset--font-size--small) !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wp--preset--color--muted) !important;
  max-width: none !important;
}
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input textarea,
.wc-block-components-address-form__country input,
.wc-block-components-address-form__state input {
  height: auto !important;
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}

/* ---- 3. The same stacked treatment, applied to the site's own
 * palette so checkout stops looking like stock WooCommerce --------- */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea {
  border: 1px solid var(--wp--preset--color--line) !important;
  border-radius: 0 !important;
  background: var(--wp--preset--color--background) !important;
  color: var(--wp--preset--color--text) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus {
  outline: 2px solid var(--wp--preset--color--accent) !important;
  outline-offset: 1px;
}

/* ---- 4. Contact page ---------------------------------------------- *
 * The <select> never picked up a width: the rule that stretches form
 * controls covers input and textarea only, so the dropdown rendered
 * 296px against 542px text fields. */
.bc-form select { width: 100%; }

/* Every other hero on the site is copy-left / photo-right. The contact
 * page has no photo, and the two-column grid left the whole right half
 * empty, which reads as an unfinished layout rather than a deliberate
 * one. A single centred column is the honest text-only variant. */
.sig-hero:not(.has-photo) .sig__inner { display: block; }
.sig-hero:not(.has-photo) .bc-hero-copy {
  max-width: 44rem !important;
  margin-inline: auto;
  text-align: center;
}
.sig-hero:not(.has-photo) .bc-hero-copy .eyebrow { justify-content: center; }

/* The form itself is centred inside its own narrow section, but its
 * fields are left-aligned -- a centred form field is unreadable. */
#contact-form .bc-form { margin-inline: auto; }