/* ================================================================
   Warning Lights Inc. storefront — design system stylesheet.
   Visual direction: light industrial base, dark anchors, amber accent.
   Type: Barlow Condensed (display) + DM Sans (text). No build step.
   ================================================================ */

/* ----------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------- */
:root {
  --bg:         #FAFAF8;
  --s1:         #F3F1ED;
  --s2:         #EAE7E1;
  --s3:         #E0DDD7;
  --border:     #D4CFC7;
  --border2:    #C2BBB0;
  --amber:      #F5A020;
  --amber-dk:   #C47D0A;
  --amber-lt:   #FFB840;
  --amber-glow: rgba(245,160,32,0.10);
  --red:        #CC2936;
  --green:      #28A745;
  --ink:        #1A1612;
  --ink2:       #4A3F34;
  --ink3:       #8A7A68;
  --ink4:       #C8BFB2;
  --font:       'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:    'Barlow Condensed', 'DM Sans', system-ui, sans-serif;
  --r:          3px;
  --max:        1280px;
  --header-h:   60px;

  /* Legacy aliases — keep existing inline styles / template classes working. */
  --muted:       var(--ink3);
  --line:        var(--border);
  --bg-alt:      var(--s1);
  --surface:     var(--s1);
  --accent:      var(--amber);
  --accent-dark: var(--amber-dk);
  --navy:        #141210;
  --good:        var(--green);
  --bad:         var(--red);
}

/* ----------------------------------------------------------------
   RESET / BASE
   ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-dk); text-decoration: none; }
a:hover { color: var(--amber); }
ul,ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input,textarea,select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r); }
svg { display: inline-block; vertical-align: middle; }
[x-cloak] { display: none !important; }

h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -.01em; }
h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 700; text-transform: uppercase; margin: 0 0 .5rem; }
h2 { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; text-transform: uppercase; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; }
/* Content h4s are Woodmart subtitles (title-subtitle / info-box-subtitle), which
   the legacy site coloured with its primary; templates don't use h4. */
h4 { color: var(--amber); }
p { margin: 0 0 1rem; }
strong { font-weight: 700; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--s2); padding: .1em .4em; border-radius: 3px; font-size: .9em; }

/* ----------------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
main { padding-bottom: 4rem; min-height: 60vh; }
.section { padding: 72px 0; }
.section-sm { padding: 44px 0; }
.section-xs { padding: 28px 0; }
section + section { margin-top: 0; }
main > section, main > h1, main > h2, main > article, main > div { margin-top: 1.5rem; }
main > h1:first-child, main > .breadcrumbs:first-child { margin-top: 1rem; }

/* ----------------------------------------------------------------
   TYPOGRAPHY HELPERS
   ---------------------------------------------------------------- */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-dk); display: block; margin-bottom: 10px; }
.section-title { font-family: var(--display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; text-transform: uppercase; }
.section-sub { font-size: 15px; color: var(--ink2); margin-top: 8px; line-height: 1.65; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.text-amber { color: var(--amber-dk); }
/* Emphasis in WP headings: Woodmart's wd-underline-colored colours the word
   rather than underlining it. */
.wp-block-heading u { color: var(--amber); text-decoration: none; }
.text-muted, .meta { color: var(--ink3); }
.meta { font-size: .9rem; }

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 200; background: var(--bg); border-bottom: 1px solid var(--border); transition: box-shadow .25s; }
.site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.07), 0 1px 0 var(--border); }
.header-row, .header-inner { max-width: var(--max); margin: 0 auto; padding: 8px 20px; min-height: var(--header-h); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Brand logo */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.logo img { height: 40px; width: auto; }
@media (max-width: 860px) { .logo img { height: 34px; } }
/* Typographic wordmark fallback (if no image) */
.logo-mark { color: var(--amber); }
.logo-inc { color: var(--ink3); font-weight: 600; }

/* Search */
.search { position: relative; display: flex; align-items: center; background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); overflow: visible; flex: 1 1 240px; max-width: 320px; transition: border-color .15s; }
.search:focus-within { border-color: var(--amber); }
.search input { flex: 1; background: none; border: none; padding: 8px 12px; color: var(--ink); font-size: 14px; min-width: 0; outline: none; }
.search input::placeholder { color: var(--ink3); }
.search button { border: none; background: none; color: var(--ink3); padding: 8px 12px; font-size: 0; flex-shrink: 0; transition: color .15s; }
.search button::before { content: ""; display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon-search) center/contain no-repeat; mask: var(--icon-search) center/contain no-repeat; }
.search button:hover { color: var(--amber-dk); }
:root { --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='17' y1='17' x2='22' y2='22'/%3E%3C/svg%3E"); }
.suggest { position: absolute; top: 100%; left: 0; right: 0; margin: 6px 0 0; padding: 4px; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 12px 28px rgba(0,0,0,.14); display: none; z-index: 50; }
.suggest.show { display: block; }
.suggest li a { display: flex; justify-content: space-between; gap: 1rem; padding: 8px 10px; color: var(--ink); border-radius: var(--r); }
.suggest li a:hover { background: var(--s1); color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.mini-cart { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13.5px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--border2); border-radius: var(--r); white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.mini-cart:hover { border-color: var(--amber); color: var(--amber-dk); }
.mini-cart.added { border-color: var(--green); background: rgba(40,167,69,.1); color: var(--green); }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; padding: 8px; background: none; border: 1px solid var(--border2); border-radius: var(--r); color: var(--ink); font-size: 0; }
.nav-toggle::before, .nav-toggle::after, .nav-toggle span { content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 1px; }

/* ----------------------------------------------------------------
   PRIMARY NAV (in-header inline bar)
   ---------------------------------------------------------------- */
.main-nav { border-top: 1px solid var(--border); background: var(--bg); }
.main-nav .container { padding-top: 2px; padding-bottom: 2px; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav > li { position: relative; }
.nav > li > a { display: block; padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink2); border-radius: var(--r); white-space: nowrap; transition: color .15s, background .15s; }
.nav > li > a:hover { color: var(--ink); background: var(--s2); }
@media (min-width: 861px) { .nav > li:has(.subnav) > a:after { font-weight: bolder; content: "\25BE"; position: relative; top: 3px; font-size: 22px; line-height: 13px; } }
.subnav { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 12px 28px rgba(0,0,0,.14); z-index: 40; }
.nav > li:hover .subnav, .nav > li:focus-within .subnav { display: block; }
.subnav a { display: block; padding: 8px 10px; color: var(--ink2); border-radius: var(--r); font-size: 13.5px; }
.subnav a:hover { background: var(--s1); color: var(--ink); }

/* Mobile-only drawer chrome — hidden on desktop where .main-nav is the inline bar. */
.mobile-nav-head { display: none; }

/* Mobile nav drawer */
@media (max-width: 860px) {
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .account-name { display: none; }
  .mini-cart { padding: 8px 10px; }
  .nav-toggle { display: flex; }
  .main-nav { display: none; }
  .main-nav.open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 300;
    background: var(--bg); overflow-y: auto;
    animation: drawer-in .18s ease;
  }
  .main-nav.open .mobile-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 8px 20px; min-height: var(--header-h);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .mobile-nav-head .logo img { height: 34px; }
  .nav-close {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; line-height: 1; color: var(--ink);
    background: none; border: 1px solid var(--border); border-radius: var(--r);
    transition: color .15s, border-color .15s;
  }
  .nav-close:hover { color: var(--amber-dk); border-color: var(--amber); }
  .main-nav .container { width: 100%; max-width: none; margin: 0; padding: 8px 0 40px; }
  .nav { flex-direction: column; gap: 0; }
  .nav > li > a { display: block; padding: 16px 20px; font-size: 18px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--border); border-radius: 0; transition: background .15s, color .15s; }
  .nav > li > a:hover, .nav > li > a:active { background: var(--s1); color: var(--amber-dk); }
  .subnav { position: static; display: block; border: none; box-shadow: none; background: transparent; padding: 0 0 8px; }
  .subnav a { display: block; font-size: 15px; padding: 12px 20px 12px 36px; border-bottom: 1px solid var(--border); border-radius: 0; }
  .subnav a:hover { background: var(--s1); }
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ----------------------------------------------------------------
   BREADCRUMBS
   ---------------------------------------------------------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 14px 0 0; font-size: 12px; color: var(--ink3); }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; color: var(--ink3); opacity: .5; }
.breadcrumbs a { color: var(--ink2); }
.breadcrumbs a:hover { color: var(--amber-dk); }

/* Admin (back-office) sub-header band: a distinct dark bar under the main header
   that signals you are in the /management admin section. */
.admin-subheader { background: var(--navy); border-bottom: 2px solid var(--amber); margin-bottom: 1rem; }
.admin-subheader .container { display: flex; align-items: center; gap: 14px; padding-top: 11px; padding-bottom: 11px; }
.admin-subheader .breadcrumbs ol { padding: 0; color: rgba(255,255,255,.65); }
.admin-subheader .breadcrumbs a { color: rgba(255,255,255,.85); }
.admin-subheader .breadcrumbs a:hover { color: var(--amber-lt); }
.admin-subheader .breadcrumbs li + li::before { color: rgba(255,255,255,.4); opacity: 1; }
.admin-badge { flex: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; font-weight: 700; line-height: 1; color: var(--navy); background: var(--amber);
  padding: 5px 10px; border-radius: var(--r); }

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  border-radius: var(--r);
  border: 1.5px solid var(--amber);
  background: var(--amber); color: #1A1000;
  transition: all .15s; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--amber-lt); border-color: var(--amber-lt); color: #1A1000; box-shadow: 0 4px 18px rgba(245,160,32,.28); }
.btn.primary, .btn-amber { background: var(--amber); color: #1A1000; border-color: var(--amber); }
.btn.primary:hover, .btn-amber:hover { background: var(--amber-lt); border-color: var(--amber-lt); }
.btn.ghost, .btn-outline { background: transparent; color: var(--ink); border-color: var(--border2); box-shadow: none; }
.btn.ghost:hover, .btn-outline:hover { border-color: var(--amber); color: var(--amber-dk); background: transparent; box-shadow: none; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink2); padding: 10px 14px; box-shadow: none; }
.btn-ghost:hover { color: var(--amber-dk); background: transparent; box-shadow: none; }
.btn.small, .btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn.block { display: flex; width: 100%; justify-content: center; }
.btn svg { flex-shrink: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

button.link { background: none; border: 0; padding: 0; color: var(--amber-dk); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-size: .9rem; font-family: inherit; }
button.link:hover { color: var(--amber); }
button.link.danger { color: var(--red); }

/* ----------------------------------------------------------------
   ANNOUNCEMENT BANNER
   ---------------------------------------------------------------- */
.announce { background: var(--amber); color: #170F00; padding: 11px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13.5px; font-weight: 600; text-align: center; flex-wrap: wrap; }
.announce .pill { background: rgba(0,0,0,.15); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------------------
   HERO (dark anchor)
   ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 80px 0 92px; margin-top: 0; border-radius: 0;
  background: #0E0C09 url("/static/img/hero-highway.jpg") center right / cover no-repeat;
  color: #EDE4D2;
  --bg: #0E0C09; --s1: #141210; --s2: #1C1915;
  --border: #2B2520; --border2: #39322A;
  --ink: #EDE4D2; --ink2: #A89880; --ink3: #6A5B45;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,12,9,.94) 0%, rgba(14,12,9,.82) 34%, rgba(14,12,9,.40) 66%, rgba(14,12,9,.62) 100%),
    radial-gradient(ellipse 80% 55% at 50% 120%, rgba(245,160,32,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 40%, rgba(245,160,32,.05) 0%, transparent 60%);
}
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--amber) 30%, var(--amber) 70%, transparent 100%); opacity: .25; }
.hero > .container, .hero-content { position: relative; }
.hero h1 { font-family: var(--display); font-size: clamp(40px, 7vw, 84px); font-weight: 800; letter-spacing: -.03em; line-height: .95; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero p { font-size: 17px; color: var(--ink2); line-height: 1.65; max-width: 56ch; margin-bottom: 28px; }
.hero .btn.ghost { color: var(--ink); border-color: var(--border2); }
.hero .btn.ghost:hover { color: var(--amber); border-color: var(--amber); }

/* ----------------------------------------------------------------
   TRUST STRIP
   ---------------------------------------------------------------- */
.trust-strip { background: var(--s1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 calc(50% - 50vw); }
.trust-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 22px 20px; border-right: 1px solid var(--border); }
.trust-item:last-child { border-right: none; }
.trust-icon { color: var(--amber); flex-shrink: 0; }
.trust-label { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.trust-sub { font-size: 12px; color: var(--ink3); margin-top: 2px; }
@media (max-width: 760px) { .trust-items { grid-template-columns: 1fr 1fr; } .trust-item:nth-child(2) { border-right: none; } .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
@media (max-width: 480px) { .trust-items { grid-template-columns: 1fr; } .trust-item { border-right: none; border-bottom: 1px solid var(--border); } .trust-item:last-child { border-bottom: none; } }

/* ----------------------------------------------------------------
   CATEGORY GRID + CHIPS
   ---------------------------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 1.5rem 0 2.5rem; }
.cat-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .15s; }
.cat-tile:hover { border-color: var(--amber); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .25s ease; }
.cat-tile:hover img { transform: scale(1.03); }
.cat-band { position: absolute; inset-inline: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; background: rgb(0 0 0 / .55); color: #fff; text-align: center; }
.cat-band strong { font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff; }
.cat-band span { font-size: 11px; color: rgb(255 255 255 / .8); }
@media (max-width: 760px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 1.5rem; }
.chip { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); color: var(--ink2); font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s; }
.chip:hover { border-color: var(--amber); color: var(--amber-dk); }

/* ----------------------------------------------------------------
   ARTICLE GRID
   ---------------------------------------------------------------- */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 1.5rem 0; }
.article-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); color: var(--ink); transition: border-color .15s; }
.article-tile:hover { border-color: var(--amber); color: var(--ink); }
.article-tile img { border-radius: var(--r); margin-bottom: 8px; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.article-tile img.contain { object-fit: contain; }
.article-tile strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.article-tile span { color: var(--ink3); font-size: 13px; }
.article-tile .article-more { margin-top: auto; padding-top: 8px; color: var(--amber-dk); font-weight: 600; }
.article-tile:hover .article-more { text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------------------
   PRODUCT GRID + CARDS
   ---------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 1.25rem 0; }
.card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.card:hover { border-color: var(--amber); }
.card-media { aspect-ratio: 1/1; background: var(--s2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .25s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.card-body h3 a { color: var(--ink); }
.card-body h3 a:hover { color: var(--amber-dk); }
.card-body form { margin-top: auto; padding-top: 6px; }
.card-body .btn { width: 100%; justify-content: center; }
.sku, .product-sku { color: var(--ink3); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.oos { color: var(--red); font-weight: 600; font-size: .85rem; margin-top: auto; }
.sf-feed--list .grid { grid-template-columns: 1fr; }
.card--row { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: 300px; }
.card--row .card-media { align-self: start; }
.card--row .card-body { padding: 18px 22px; gap: 8px; min-height: 0; }
.card--row .card-body h3 { font-size: 16px; }
.card--row .card-body form { max-width: 240px; }
.card--row .card-body > * { flex-shrink: 0; }
.card-desc { font-size: 14px; color: var(--ink2); }
.card--row .card-desc { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.card-desc > :first-child { margin-top: 0; }
.card-desc > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .card--row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .card--row .card-body { padding: 12px 14px; }
  .card--row .card-desc { flex: none; max-height: 9rem; }
}
.result-count { color: var(--ink3); font-size: 13px; margin: 0 0 1rem; }
.pagination { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 2rem 0; color: var(--ink3); font-size: 13px; }

/* Effective pricing display */
.price, .price-wrap { font-weight: 700; margin: 4px 0 6px; }
.price-wrap { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price.big, .price-wrap.big { font-size: 1.6rem; margin: 6px 0; }
.price-wrap .msrp, .msrp { color: var(--ink3); font-weight: 500; text-decoration: line-through; font-size: .85em; }
.price-wrap .your-price, .your-price { color: var(--amber-dk); }
.price-wrap .save { color: var(--green); font-weight: 600; font-size: .8em; }
.price-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: var(--amber-dk); border: 1px solid rgba(245,160,32,.35); }

/* Badges */
.badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--green); color: #fff; }
.badge.good { background: var(--green); color: #fff; }
.badge.bad { background: var(--red); color: #fff; }
.badge-canada { background: none; color: var(--red); border: 1px solid rgba(204,41,54,.3); }
.badge-new { background: none; color: var(--amber-dk); border: 1px solid rgba(245,160,32,.4); }
.badge-preorder { background: var(--amber); color: #170F00; }
.badge-sale { background: var(--red); color: #fff; }

/* ----------------------------------------------------------------
   PRODUCT DETAIL
   ---------------------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 1.5rem; }
.product-media img, .gallery-main { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); }
.gallery-main { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; border: none; }

/* Product image gallery (thumbnails + click-to-load video slides). */
.gallery-main .gallery-slide { width: 100%; height: 100%; }
.gallery-play { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.gallery-play .play-badge { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 24px; }
.gallery-main .video-embed { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--ink, #222); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gallery-nav:hover { background: #fff; }
.gallery-nav.prev { left: 8px; }
.gallery-nav.next { right: 8px; }

/* 360° viewer */
.spin360 { margin-top: 10px; }
.spin360-open { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); cursor: pointer; font-weight: 600; }
.spin360-modal { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.85); }
.spin360-stage { width: min(90vw, 90vh); aspect-ratio: 1/1; touch-action: none; cursor: ew-resize; user-select: none; }
.spin360-frame { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.spin360-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 28px; line-height: 1; cursor: pointer; }
.spin360-hint { margin-top: 14px; color: #fff; opacity: .8; font-size: 14px; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gallery-thumb { position: relative; width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); cursor: pointer; overflow: hidden; }
.gallery-thumb.active { border-color: var(--brand, #b32d2e); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb .thumb-play { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.product-info h1 { font-family: var(--display); font-size: clamp(22px, 3vw, 34px); font-weight: 700; text-transform: uppercase; line-height: 1.1; margin-bottom: 14px; }
.product-info .meta { font-size: 13px; color: var(--ink3); margin-bottom: 20px; }
.product-info .meta a { color: var(--amber-dk); }
.product-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-dk); margin-bottom: 12px; }
.product-status.out { color: var(--red); }
.preorder-note { color: var(--amber-dk); font-weight: 600; margin: 4px 0 8px; }
.notice.preorder { border-left: 3px solid var(--amber); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: pulse 2s ease-in-out infinite; }
.product-status.out .status-dot { background: var(--red); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.product-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin: 24px 0; }
.product-meta-item { background: var(--s1); padding: 12px 14px; }
.product-meta-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 3px; }
.product-meta-value { font-size: 14px; font-weight: 600; color: var(--ink); }
.stock { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.stock.in { color: var(--green); }
.stock.out { color: var(--red); }
.product-price { margin: 12px 0; }
.product-unavailable, .price-unavailable { color: var(--ink3); font-weight: 600; margin: 12px 0; }

/* ----------------------------------------------------------------
   PAGE HERO
   ---------------------------------------------------------------- */
:root { --hero-min-h: 52vh; }
.page-hero {
  position: relative; overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  padding: 84px 0;
  min-height: max(420px, var(--hero-min-h, 52vh));
  display: flex; align-items: center;
}
.page-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--s1); }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cover-scaled past the container, like a CSS background-video: YouTube has
   no object-fit, so the iframe is oversized and centred instead. */
.page-hero-media iframe {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 177.78vh); height: max(100%, 56.25vw);
  border: 0; pointer-events: none;
}
.page-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-video-frame { opacity: 0; transition: opacity .6s ease; }
.page-hero-video-frame.is-ready { opacity: 1; }
/* has-media only renders when there is something to show behind the text --
   a video with no poster stays plain, on the page's normal background. */
.page-hero.has-media {
  --bg: #0E0C09; --s1: #141210; --s2: #1C1915;
  --border: #2B2520; --border2: #39322A;
  --ink: #EDE4D2; --ink2: #A89880; --ink3: #6A5B45;
  color: var(--ink);
}
.page-hero.has-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,12,9,.94) 0%, rgba(14,12,9,.82) 34%, rgba(14,12,9,.40) 66%, rgba(14,12,9,.62) 100%);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero-crumbs { margin-bottom: 20px; }
.page-hero-crumbs .breadcrumbs ol { padding: 0; color: var(--ink) }
.page-hero-crumbs .breadcrumbs a { color: var(--ink) }
.page-hero-body { max-width: 640px; }
.page-hero-body h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; margin-bottom: 14px; color: var(--ink); }
.page-hero-subtitle { font-size: 17px; line-height: 1.6; max-width: 56ch; margin-bottom: 24px; color: var(--ink); }
.page-hero-subtitle p { margin: 0 0 12px; }
.page-hero-subtitle p:last-child { margin-bottom: 0; }
.page-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Off-screen for sighted users, still read by screen readers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.add-form { display: flex; align-items: flex-end; gap: 12px; margin: 1.25rem 0; flex-wrap: wrap; }
.add-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.short-desc { color: var(--ink2); margin-top: 1rem; }
.product-desc { margin-top: 2.5rem; max-width: 75ch; color: var(--ink2); }

/* Tabs */
.product-tabs { margin-top: 56px; }
.tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn { padding: 11px 20px; font-size: 13.5px; font-weight: 600; color: var(--ink3); border: none; background: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; margin-bottom: -1px; }
.tab-btn:hover { color: var(--ink2); }
.tab-btn.active { color: var(--amber-dk); border-bottom-color: var(--amber); }
.tab-content { padding: 32px 0; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 11px 0; font-size: 14px; vertical-align: top; }
.spec-table td:first-child { font-weight: 600; color: var(--ink2); width: 40%; padding-right: 16px; }
.spec-table td:last-child { color: var(--ink); }

.related-section { padding-top: 56px; border-top: 1px solid var(--border); margin-top: 56px; }

/* ----------------------------------------------------------------
   PROSE
   ---------------------------------------------------------------- */
/* The page/article body fills main.container's 1240px content box; no
   container of its own. Widens blog articles too — article.html and page.html
   share this wrapper (spec §3.2.1). */
.prose { color: var(--ink2); }
.prose h2, .prose h3 { color: var(--ink); margin-top: 1.5rem; }
/* A subtitle h4 sits directly on its title, as Woodmart's title-wrapper did:
   the section spacing moves above the h4 instead of between the pair. */
.prose h4 { margin: 1.5rem 0 .25rem; }
.prose h4 + h2, .prose h4 + h3 { margin-top: 0; }
.prose .featured { border-radius: var(--r); margin: 1rem auto; border: 1px solid var(--border); max-height: 500px; }
.prose a { color: var(--amber-dk); text-decoration: underline; text-underline-offset: 2px; }
/* ".prose a" (0,1,1) would otherwise underline a storefront button in content. */
.prose a.btn, .prose a.article-tile, .prose .card-body h3 a { text-decoration: none; }
.prose .card-body h3 { margin: 0; }
.prose a.article-tile { color: var(--ink); }
/* Core text alignment (block editor: Align text); WordPress's rule isn't loaded headless. */
.prose .has-text-align-center { text-align: center; }

/* WordPress inline-image alignment classes (both migrated posts and new
   ones authored directly in WordPress use these on <img> and, when the
   image carries a caption, on the wrapping <figure>). */
.prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose img.alignleft { float: left; margin: 4px 20px 12px 0; }
.prose img.alignright { float: right; margin: 4px 0 12px 20px; }
.prose img.aligncenter { display: block; float: none; margin: 12px auto; }
.prose img.alignnone { float: none; margin: 12px 0; }
.prose figure { margin: 12px 0; max-width: 100%; }
.prose figure.alignleft { float: left; margin: 4px 20px 12px 0; }
.prose figure.alignright { float: right; margin: 4px 0 12px 20px; }
.prose figure.aligncenter { margin: 12px auto; text-align: center; }
.prose figure.aligncenter img { margin-inline: auto; }
.prose .clear { clear: both; }
.prose figcaption { font-size: 12.5px; color: var(--ink3); margin-top: 6px; }
.prose p { overflow: hidden; } /* clears floated images so following paragraphs wrap, not stack below */
.prose ul { list-style: disc; }

/* WordPress tables (one migrated post has a plain <table>; keep it legible
   and horizontally scrollable on narrow screens rather than overflowing). */
.prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.prose caption { text-align: left; font-weight: 600; margin-bottom: 8px; color: var(--ink2); }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; font-size: 14px; }
.prose th { background: var(--s2); font-weight: 600; color: var(--ink); white-space: nowrap; }
/* Warranty-terms cells hold multi-item product lists; they must wrap. The
   table stays scrollable via .prose table's overflow-x (spec §3.2.2). */
.prose td { white-space: normal; }
.prose .wp-block-table.aligncenter table { width: max-content; max-width: 100%; margin-inline: auto; }
/* Core Columns block. Core's block-library stylesheet is not loaded headless,
   so we ship the layout; 782px matches core's own stacking boundary. */
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin: 1.5rem 0; }
.prose .wp-block-column  { flex-basis: 100%; min-width: 0; }
@media (min-width: 782px) {
  .prose .wp-block-columns { flex-wrap: nowrap; }
  .prose .wp-block-column  { flex: 1 1 0; }
  /* Opt-in asymmetric splits, one pair per ratio the legacy site actually uses
     (block editor: Advanced -> "Additional CSS class(es)"). Pin the NARROWER
     column's basis and leave the wider one on flex: 1 1 0, so it absorbs the
     24px gap. Equal width remains the default when no class is present. */
  .prose .wp-block-columns.sf-cols-1-2 > .wp-block-column:first-child { flex: 0 1 33.333%; }
  .prose .wp-block-columns.sf-cols-2-1 > .wp-block-column:last-child  { flex: 0 1 33.333%; }
  .prose .wp-block-columns.sf-cols-5-7 > .wp-block-column:first-child { flex: 0 1 41.667%; }
  .prose .wp-block-columns.sf-cols-7-5 > .wp-block-column:last-child  { flex: 0 1 41.667%; }
  .prose .wp-block-columns.sf-cols-1-3 > .wp-block-column:first-child { flex: 0 1 25%; }
  .prose .wp-block-columns.sf-cols-3-1 > .wp-block-column:last-child  { flex: 0 1 25%; }
}
/* Core's opt-out of mobile stacking, honoured for narrow icon/tile rows. */
.prose .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; }
.prose .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex: 1 1 0; }
.prose .sf-badges img { max-height: 300px; width: auto; }
/* Core's per-column vertical alignment (block editor: Column -> "Change vertical
   alignment"). The row keeps align-items: flex-start; a column opts out. */
.prose .wp-block-column.is-vertically-aligned-center { align-self: center; }
/* Core Buttons block: sync restyles each button as .btn, so this only lays out the row. */
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1rem 0; }
.prose .wp-block-buttons.is-content-justification-center { justify-content: center; }
.prose .wp-block-group.is-layout-grid { display: grid; grid-template-columns: 1fr; gap: 32px 24px; margin: 1.5rem 0; }
@media (min-width: 601px) { .prose .wp-block-group.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { .prose .wp-block-group.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Centering belongs to the icon/tile patterns, not to grid layout itself: the
   roles grid on join-sws-team holds headings, prose and bullet lists, which have
   to stay left-aligned. sf-icons and sf-tiles are the only classed grids in the
   corpus, so scoping here changes neither of them.

   Horizontal only. Grid items stretch to the tallest in their row, so centering
   on the main axis too floated each tile's contents to its own middle and left
   the icons sitting at different heights across a row. */
.prose .sf-icons .wp-block-group,
.prose .sf-tiles .wp-block-group { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.prose .is-layout-grid figure { margin: 0; }
.prose .is-layout-grid h4 { margin: 0; }
.prose .sf-tiles h4 { color: var(--ink); font-size: 15px; padding-bottom: 4px; border-bottom: 2px solid var(--amber); }
.prose .sf-icons figure img { height: 34px; width: auto; border-radius: 0; }
.prose .sf-check { position: relative; padding-left: 50px; margin: 1.5rem 0; }
.prose .sf-check > figure { position: absolute; left: 0; top: 0; width: 30px; margin: 0; }
.prose .sf-check h3 { margin-top: 0; }
.prose .sf-numbered { counter-reset: sf-num; }
.prose .sf-numbered .wp-block-column { position: relative; padding-left: 50px; counter-increment: sf-num; }
.prose .sf-numbered .wp-block-column::before { content: counter(sf-num); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: #fff; font-size: 15px; font-weight: 700; line-height: 30px; text-align: center; }
.prose .sf-numbered h3 { margin-top: 0; }
.prose .sf-check > :last-child { margin-bottom: 0; }
.prose .sf-check-lg { padding-left: 56px; }
.prose .sf-check-lg > figure { width: 44px; }
@media (min-width: 782px) and (max-width: 899px) {
  .prose .sf-check-lg { padding-left: 0; }
  .prose .sf-check-lg > figure { position: static; width: 44px; margin: 0 0 8px; }
}
.prose img.is-style-rounded, .prose .is-style-rounded img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.prose .sf-flush { margin-top: 0; margin-bottom: 0; }
.prose .wp-block-separator.is-style-wide { border: 0; border-top: 2px solid var(--ink); opacity: 1; margin: .5rem 0; }
.prose .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 60px; height: 0; border: 0; border-top: 1px solid var(--amber); opacity: 1; margin: 1rem 0; }

/* Core Media & Text block (image beside text, stacks at core's 600px boundary). */
.prose .wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; align-items: center; margin: 1.5rem 0; }
.prose .wp-block-media-text > .wp-block-media-text__media   { grid-column: 1; grid-row: 1; margin: 0; }
.prose .wp-block-media-text > .wp-block-media-text__content { grid-column: 2; grid-row: 1; padding: 0 8%; }
.prose .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.prose .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media   { grid-column: 2; }
.prose .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; }
.prose .wp-block-media-text__media img { width: 100%; height: auto; }
@media (max-width: 600px) {
  .prose .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100%; }
  .prose .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media   { grid-column: 1; grid-row: 1; }
  .prose .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { grid-column: 1; grid-row: 2; padding: 16px 0 0; }
}

/* ----------------------------------------------------------------
   FORMS
   ---------------------------------------------------------------- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=url], textarea, select, .form-input {
  width: 100%; padding: 10px 14px; background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); color: var(--ink); font-size: 14px; font-family: var(--font); transition: border-color .15s; outline: none;
}
textarea { line-height: 1.5; }
input:focus, textarea:focus, select:focus, .form-input:focus { border-color: var(--amber); }
input::placeholder, textarea::placeholder { color: var(--ink3); }
input[type=checkbox], input[type=radio] { accent-color: var(--amber); width: 15px; height: 15px; }
.add-form input[type=number], .qty { width: 5rem; }

/* ----------------------------------------------------------------
   CART & CHECKOUT
   ---------------------------------------------------------------- */
/* htmx's outerHTML swap inserts the replacement #checkout-box before removing
   the old one, which causes a layout jump. Clearing overflow-anchor fixes it */
html:has(#checkout-box) { overflow-anchor: none; }
.cart-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.cart-table th { text-align: left; border-bottom: 2px solid var(--border); padding: 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.cart-table td { border-bottom: 1px solid var(--border); padding: 14px 8px; vertical-align: middle; }
.cart-product { display: flex; gap: 12px; align-items: center; }
.cart-product img { border-radius: var(--r); border: 1px solid var(--border); background: var(--s2); object-fit: contain; }
.cart-product a { color: var(--ink); font-weight: 600; }
.cart-product a:hover { color: var(--amber-dk); }
.cart-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.cart-summary .subtotal { font-size: 1.2rem; }
.cart-summary .subtotal strong { font-family: var(--display); font-size: 1.6rem; color: var(--amber-dk); }
.cart-summary .btn { margin-top: 8px; }

.checkout-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
.checkout-grid > aside { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; position: sticky; top: calc(var(--header-h) + 20px); }
.checkout-grid > aside h2 { font-size: 1.1rem; }
.stack { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.stack > label, .add-form label, .stack label:not(.check):not(.radio-row) { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Simulator cart-composer: rows (product + qty + trailing remove icon) with
   consistent spacing between lines and around the add-line button. */
#sim-lines { display: grid; gap: 12px; }
.sim-line { grid-template-columns: 1fr 1fr auto; align-items: end; }
.sim-line .sim-remove { padding: 9px 4px; line-height: 1; }
.sim-line .sim-remove svg { pointer-events: none; display: block; }
.sim-add { margin: 10px 0 0; }
.field-error { color: var(--red); font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; }
.summary-lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.summary-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.checkout-fieldset, .pricing-form fieldset, .simulator-form fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin: 12px 0; }
.checkout-fieldset legend, .pricing-form legend, .simulator-form legend { font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 0 6px; }
.radio-row, .check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 400 !important; font-size: 14px; text-transform: none !important; letter-spacing: 0 !important; }
.radio-row span:first-of-type { flex: 1; }
.radio-meta { color: var(--ink3); font-weight: 600; }
.po-fields { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.coupon-entry { margin: 1rem 0; }
.summary-totals { width: 100%; border-collapse: collapse; margin-top: 12px; }
.summary-totals td { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.summary-totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.summary-totals tr.discount td, .discount { color: var(--green); }
.summary-totals tr.grand td { font-weight: 700; font-size: 1.1rem; border-bottom: none; padding-top: 10px; }
.summary-totals tr.grand td:last-child { font-family: var(--display); color: var(--amber-dk); }

#checkout-form .paypal-buttons-container { display: flex; flex-direction: column; gap: 10px; }
#checkout-form .paypal-buttons-container paypal-button { width: 100%; }
#checkout-form .btn { justify-content: center; }

.notice { padding: 12px 16px; border-radius: var(--r); margin: 1rem 0; font-size: 14px; }
.notice.success, .notice.ok { background: rgba(40,167,69,.08); border: 1px solid rgba(40,167,69,.3); color: #1c7430; }
.notice.error { background: rgba(204,41,54,.06); border: 1px solid rgba(204,41,54,.3); color: var(--red); }
.confirmation { text-align: center; padding: 4rem 1rem; }
.confirmation h1 { color: var(--green); }

/* ----------------------------------------------------------------
   IDENTITY / ACCOUNT / AUTH
   ---------------------------------------------------------------- */
.currency-switcher { display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.currency-switcher a { color: var(--ink2); font-weight: 600; font-size: 12px; padding: 6px 10px; line-height: 1; }
.currency-switcher a:hover { background: var(--s2); color: var(--ink); }
.currency-switcher a.active { background: var(--amber); color: #1A1000; }
.currency-note { color: var(--ink3); font-size: 13px; }

.account-menu { display: inline-flex; align-items: center; gap: 8px; }
.account-link { font-weight: 600; color: var(--ink2); white-space: nowrap; font-size: 13.5px; }
.account-link:hover { color: var(--amber-dk); }
.account-register { opacity: .9; font-weight: 500; }
.account-dd { position: relative; display: inline-block; }
.account-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--s2); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font: inherit; }
.account-trigger:hover { background: var(--s3); }
.account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: #1A1000; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.account-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.account-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 14px 34px rgba(0,0,0,.16); padding: 6px; z-index: 50; }
.account-pop a { display: block; padding: 9px 12px; border-radius: var(--r); color: var(--ink2); font-size: 13.5px; }
.account-pop a:hover { background: var(--s1); color: var(--ink); }
.account-pop-head { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.account-pop-head .meta { font-size: 12px; }
.account-roles { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.account-logout { width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: var(--r); color: var(--red); cursor: pointer; font: inherit; font-size: 13.5px; }
.account-logout:hover { background: rgba(204,41,54,.06); }

.auth-card { max-width: 460px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); }
.auth-card.wide { max-width: 560px; }
.auth-card h1 { margin-top: 0; }
.auth-links { margin-top: 1rem; display: flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.inline { display: inline; }
.ta-right { text-align: right; }
.narrow { max-width: 520px; }
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.account-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.role-chip { display: inline-block; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.account-roles .role-chip { margin: 0; }
.account-head .role-chip { margin-left: 6px; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 1.5rem 0; }
.account-tile { display: block; padding: 20px; border: 1px solid var(--border); border-radius: var(--r); color: inherit; background: var(--s1); transition: border-color .15s, transform .15s; }
.account-tile:hover { border-color: var(--amber); transform: translateY(-2px); color: inherit; }
.account-tile h2 { margin: 0 0 6px; font-size: 1.1rem; }
.account-tile.admin { border-color: var(--ink2); }
.tile-cta { color: var(--amber-dk); font-weight: 600; font-size: 13.5px; }

.address-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.address-card { border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: var(--s1); }
.address-card.is-default { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.address-card h3 { margin: 0 0 4px; font-size: 1rem; }
.address-card p { margin: 2px 0; }
.address-actions { display: flex; gap: 8px; }

/* ----------------------------------------------------------------
   ADMIN / PRICING TABLES
   ---------------------------------------------------------------- */
.admin-section { margin: 2rem 0; }
.admin-section h2 { margin-bottom: 6px; }
table.order-pricing, table.pricing-rules, table.admin-table, .orders-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
table.order-pricing th, table.order-pricing td, table.pricing-rules th, table.pricing-rules td,
table.admin-table th, table.admin-table td, .orders-table th, .orders-table td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: top;
}
table.order-pricing th, table.pricing-rules th, table.admin-table th, .orders-table th {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3);
}
.pricing-rules .actions { white-space: nowrap; }
.pricing-rules .actions a, .pricing-rules .actions .link { margin-right: 8px; }
.status-chip { background: var(--s2); color: var(--ink2); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.status-chip.ok { background: rgba(40,167,69,.1); color: #1c7430; }
.status-chip.off { background: rgba(204,41,54,.08); color: var(--red); }
/* Neither delivered nor failed: the relay never answered, so a human has to
   check. Amber rather than red -- nothing is known to have gone wrong. */
.status-chip.warn { background: rgba(212,138,14,.12); color: #8a5a00; }
.decision-cell { display: flex; gap: 8px; }
.simulator-result { margin-top: 1.5rem; padding: 16px 20px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); }
.simulator-result tr.applied { background: rgba(40,167,69,.08); }
.decision-summary .final strong { font-family: var(--display); font-size: 1.4rem; color: var(--amber-dk); }
.order-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin: 1.5rem 0; }

/* ----------------------------------------------------------------
   PROMO CARD
   ---------------------------------------------------------------- */
.promo-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.promo-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.promo-title { font-family: var(--display); font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; text-transform: uppercase; line-height: 1.1; margin-bottom: 8px; }
.promo-desc { font-size: 14px; color: var(--ink2); line-height: 1.55; }

/* ----------------------------------------------------------------
   FOOTER (dark anchor)
   ---------------------------------------------------------------- */
/* No top margin: a full-bleed banner is the last thing on most content pages
   now, and 80px of page background between it and the footer read as a gap
   rather than as breathing room. Pages that need space before the footer can
   put it on their own last element. */
.site-footer {
  background: #141210; border-top: 1px solid #2B2520; margin-top: 0; color: #A89880;
  --bg: #0D0B08; --s1: #0D0B08; --s2: #1C1915; --border: #2B2520; --border2: #39322A;
  --ink: #EDE4D2; --ink2: #A89880; --ink3: #7A6B58;
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; padding: 52px 20px 40px; max-width: var(--max); margin: 0 auto; }
.site-footer h3 { color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer p { font-size: 13px; color: var(--ink3); line-height: 1.7; max-width: 280px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { color: var(--ink2); font-size: 13px; }
.site-footer a:hover { color: var(--amber); text-decoration: none; }
.footer-contact { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.footer-contact a { color: var(--ink2); }
.footer-contact a:hover { color: var(--amber); }
.footer-legal { border-top: 1px solid var(--border); padding: 18px 20px; font-size: 12px; color: var(--ink3); max-width: var(--max); margin: 0 auto; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .site-footer p { max-width: none; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .product-detail, .checkout-grid, .order-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .checkout-grid > aside { position: static; }
  .section { padding: 48px 0; }
}
@media (max-width: 480px) {
  .two-col { grid-template-columns: 1fr; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 12px; padding: 8px; }
  .cart-table td { border: none; padding: 6px 4px; }
}

/* htmx loading indicators — provided here because we set htmx includeIndicatorStyles:false
   (its auto-injected <style> tag is blocked by our CSP style-src 'self'). */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Product-page feature blocks (families, sounds, downloads, diagrams, videos). */
.family-table, .product-sounds, .product-downloads, .product-diagrams, .product-videos, .related-products { margin-top: 40px; }
.family-table .table-scroll { overflow-x: auto; }
.family-table table { border-collapse: collapse; width: 100%; }
.family-table th, .family-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.family-table tr.own { background: var(--surface-2, #f6f6f7); font-weight: 600; }
/* Top-seller column: a labelled checkmark gutter ahead of the spec columns. */
.family-table th.top-seller-col { width: 1%; text-align: center; white-space: nowrap; }
.family-table td.top-seller { width: 1%; text-align: center; }
.family-table .top-seller-mark { color: var(--accent, #b00); font-weight: 700; }
.sound-list, .download-list { list-style: none; margin: 0; padding: 0; }
.sound-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sound-label { min-width: 64px; font-weight: 600; }
.download-list li { margin-bottom: 6px; }
.file-badge { display: inline-block; min-width: 34px; padding: 1px 6px; margin-right: 8px; border-radius: 3px; background: var(--ink, #222); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.diagram-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.diagram-grid img { max-width: 320px; height: auto; border: 1px solid var(--border); }
.video-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.video-placeholder { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--border); background: var(--surface-2, #f6f6f7); cursor: pointer; border-radius: 6px; }
.video-play { color: var(--brand, #b32d2e); }
.video-embed { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border: 0; }
.prose iframe.video-embed { display: block; margin: 1.5rem auto; }
/* Map embeds authored as a raw wp:html <iframe>. The sanitizer allows class
   globally but drops width/height, so the box is sized here rather than on the
   element -- the same split the video embed above already uses. */
.prose iframe.sf-map { display: block; width: 100%; min-height: 200px; aspect-ratio: 4 / 1; border: 0; margin: 1.5rem 0; }
/* WordPress's own inline image (the paragraph toolbar's "Inline image"). Core
   sizes it with a style attribute, which the sanitizer strips and CSP would
   block anyway, so an icon placed inline in a paragraph is sized here. Scoped
   to <img> inside <p>, which nothing else in the corpus uses.

   display matters as much as the size: the global img rule near the top of
   this file makes every image a block, which put the icon on its own line. */
.prose p img { display: inline; height: 2.5em; width: auto; vertical-align: -1em; margin-right: .4em; border-radius: 0; }

/* ---- storefront-native forms ([sf-form]) ---- */
/* The wrapper is the scroll target for #sf-form-{key} links, so it -- not the
   linking page -- owns the offset that keeps the sticky header clear. */
.sf-form-wrapper { scroll-margin-top: 96px; margin: 2rem 0; }
.sf-form-title { margin: 0 0 1rem; }
.sf-form { max-width: 640px; }
.sf-form fieldset.sf-field { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; }
.sf-form fieldset.sf-field legend { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.sf-form input[type="file"] { padding: 8px 0; }
.sf-field.has-error input, .sf-field.has-error textarea, .sf-field.has-error select { border-color: var(--red); }
.sf-field-error { color: var(--red); font-size: 12px; font-weight: 600; text-transform: none; }
/* The honeypot is removed from the visual and accessibility trees; a human
   never sees it, an automated form filler usually does. */
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-pardot-form { width: 100%; min-height: 640px; border: 0; }

/* ---------------------------------------------------------------- features */
/* Fragments spliced into a page body by the [sf-*] resolver. */
/* Testimonials: one carousel frame for every group. Customers stack avatar,
   name and stars over a quote bubble; employees sit photo beside quote. The
   track is a swipeable scroll-snap row even before site.js enhances it. */
.sf-testimonials { --per-view: 3; --gap: 24px; position: relative; margin: 1.5rem 0; }
.sf-testimonials--employees { --per-view: 2; }
@media (max-width: 860px) { .sf-testimonials { --per-view: 2; } .sf-testimonials--employees { --per-view: 1; } }
@media (max-width: 600px) { .sf-testimonials { --per-view: 1; } }
.sf-carousel-track { display: flex; gap: var(--gap); padding: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-carousel-track::-webkit-scrollbar { display: none; }
/* Scoped through .sf-testimonials: ".prose figure/img/figcaption" (0,1,1) would
   otherwise re-add margins, square the avatars and shrink the caption. */
.sf-testimonials .sf-testimonial { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); scroll-snap-align: start; margin: 0; padding: 24px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); }
.sf-testimonials .sf-testimonial-avatar, .prose .sf-review img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.sf-testimonial-avatar--blank circle { fill: var(--s3); }
.sf-testimonial-avatar--blank path { fill: var(--bg); }
.sf-testimonials .sf-testimonial-name, .prose .sf-review h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.sf-testimonial-company, .prose .sf-review h3 + p { margin: 0; font-size: 14px; color: var(--ink3); }
.sf-testimonial-stars, .prose .sf-review .sf-stars { color: var(--amber); font-size: 15px; letter-spacing: 2px; }
.sf-testimonial-quote, .prose .sf-review > p:last-child { margin: 0; font-size: 15px; color: var(--ink2); }
/* Arrows reuse the product gallery's buttons, revealed on hover or keyboard
   focus; touch screens swipe instead. */
.sf-testimonials .sf-carousel-nav { opacity: 0; transition: opacity .15s; }
.sf-testimonials:hover .sf-carousel-nav, .sf-testimonials:focus-within .sf-carousel-nav { opacity: 1; }
@media (hover: none) { .sf-testimonials .sf-carousel-nav { display: none; } }

.prose .sf-review { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; margin: 0 0 1.5rem; }
.prose .sf-review > figure { grid-row: 1 / span 3; margin: 0; }
.prose .sf-review h3 { align-self: end; }
.prose .sf-review .sf-stars { margin: 0; align-self: start; }
.prose .sf-review > p:last-child { grid-column: 1 / -1; margin-top: 18px; overflow: visible; }
.sf-testimonials--customers .sf-testimonial > figcaption { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-size: inherit; color: inherit; }
.sf-testimonial-who { display: flex; flex-direction: column; gap: 2px; }
/* A review credited to an organisation alone has no name; its company leads. */
.sf-testimonial-who > .sf-testimonial-company:first-child { font-size: 15px; font-weight: 700; color: var(--ink); }
/* No card frame here: the quote bubble carries the frame's surface instead,
   its notch pointing up at the avatar's centre. */
.sf-testimonials--customers .sf-testimonial { background: none; border: 0; }
.sf-testimonials--customers .sf-testimonial-quote, .prose .sf-review > p:last-child { position: relative; padding: 20px 22px; background: var(--s1); border-radius: var(--r); }
.sf-testimonials--customers .sf-testimonial-quote::before, .prose .sf-review > p:last-child::before { content: ""; position: absolute; top: -10px; left: 26px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--s1); }

.sf-testimonials--employees .sf-testimonial { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "avatar quote" "avatar name"; column-gap: 24px; align-items: center; }
.sf-testimonials--employees .sf-testimonial-avatar { grid-area: avatar; width: 120px; height: 120px; }
.sf-testimonials--employees .sf-testimonial-quote { grid-area: quote; align-self: end; margin-bottom: 12px; }
.sf-testimonials--employees .sf-testimonial > figcaption { grid-area: name; align-self: start; margin: 0; font-size: inherit; color: inherit; }
.sf-testimonials--employees .sf-testimonial-name { text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 480px) {
  .sf-testimonials--employees .sf-testimonial { grid-template-columns: 1fr; grid-template-areas: "avatar" "quote" "name"; justify-items: center; text-align: center; }
}

.sf-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 1.5rem 0; }
.sf-team-member { text-align: center; }
.sf-team-member img { display: inline; width: 100%; max-width: 252px; height: auto; border-radius: var(--r); margin-bottom: 12px; }
.sf-team-member h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.sf-team-member p { margin: 0; font-size: 14px; color: var(--ink2); }

/* Listings sit two across; each card is a column so the apply button can be
   pushed to its foot and the buttons line up whatever the sections do.

   That depends on the grid's default stretch. align-items: start sized every
   card to its own content instead, which left the frames ragged and gave
   .sf-job-apply's margin-top: auto no slack to push against, so the button
   landed wherever the text happened to end. */
.sf-jobs { margin: 1.5rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-job { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); padding: 16px 20px; }
.sf-job-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.sf-job-vacancy { font-size: 13px; font-weight: 500; color: var(--ink3); }
.sf-job p { margin: 0 0 8px; color: var(--ink2); font-size: 14px; }
/* The listing stays open; only its sections collapse. */
.sf-job-section { border-top: 1px solid var(--border); }
.sf-job-section > summary { cursor: pointer; padding: 8px 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.sf-job-section[open] > summary { margin-bottom: 4px; }
/* The gap belongs to the section, not to its last paragraph: it has to clear
   the NEXT section's top border. The last child's own margin is zeroed below so
   the space stays a predictable 12px instead of stacking with it, whether the
   section ends in a paragraph or a bullet list. */
.sf-job-text { color: var(--ink2); font-size: 14px; padding-bottom: 12px; }
.sf-job-text :first-child { margin-top: 0; }
.sf-job-text ul, .sf-job-text ol { margin: 0 0 8px; padding-left: 1.25rem; }
.sf-job-text :last-child { margin-bottom: 0; }
.sf-job-apply { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) { .sf-jobs { grid-template-columns: 1fr; } }
/* The application form the apply button scrolls to sits under the sticky
   #site-header, so offset the scroll target (design doc §3.5.1). The smooth
   scroll itself is already handled by html { scroll-behavior: smooth }. */
.sf-form { scroll-margin-top: 96px; }

/* Single source of truth for "is this screen big enough for the viewer".
   static/js/pdf-library.js reads this custom property rather than repeating
   the query as a matchMedia string, which would drift. 860px is the site's
   existing mobile-nav breakpoint (see .nav-toggle); the height clause rejects
   landscape phones (~844x390), which pass a width test but have no room for a
   600px stage. */
.sf-pdf-library { --pdf-viewer: 0; margin: 1.5rem 0; }
@media (min-width: 860px) and (min-height: 600px) {
  .sf-pdf-library { --pdf-viewer: 1; }
}
/* [sf-pdf]: one document, always open, no chrome of its own. The gate is the
   library's, repeated rather than shared because static/js/pdf-doc.js reads
   --pdf-viewer off this element. */
.sf-pdf-doc { --pdf-viewer: 0; margin: 1.5rem 0; }
@media (min-width: 860px) and (min-height: 600px) {
  .sf-pdf-doc { --pdf-viewer: 1; }
}
.sf-pdf-group { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; margin-bottom: 8px; }
/* Scoped through .prose because the library always renders inside
   pages/page.html's <article class="prose">, and ".prose h2, .prose h3" (0,1,1)
   would otherwise out-specify a bare class and re-apply its 1.5rem top margin
   inside this bordered box. Same specificity trap as .pdfv-page-input below. */
.sf-pdf-group-title, .prose .sf-pdf-group-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
/* The row is server-rendered for EVERY screen -- title, Open, Download -- so
   its layout is unconditional. A large screen adds exactly one thing: the
   title becomes a toggle button, styled by .sf-pdf-toggle/.sf-pdf-caret below
   wherever it appears. */
.sf-pdf-group ul.sf-pdf-items { margin: 0; padding-left: 0; list-style: none; }
.sf-pdf-item { margin-bottom: 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.sf-pdf-item:last-child { border-bottom: 0; }
.sf-pdf-row { display: flex; align-items: center; gap: 12px; }
/* The title is a plain span until the gate passes, then a button. Both take the
   same padding so the row height does not shift between the two states. */
.sf-pdf-title { flex: 1; padding: 9px 0; color: var(--ink); }
/* A real <button> so it is keyboard- and AT-reachable, restyled to read as a row. */
.sf-pdf-toggle {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 14px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.sf-pdf-toggle:hover .sf-pdf-title { text-decoration: underline; }
.sf-pdf-caret { display: inline-block; transition: transform 120ms ease; color: var(--ink2); }
.sf-pdf-item.is-open .sf-pdf-caret { transform: rotate(90deg); }
/* Also scoped through .prose: ".prose a" (0,1,1) beats a bare class, so the
   resting colour was being overridden while the :hover rule (0,2,0) won --
   leaving the links changing colour in the opposite direction from written. */
.sf-pdf-open, .sf-pdf-download,
.prose .sf-pdf-open, .prose .sf-pdf-download {
  flex: none; font-size: 13px; color: var(--ink2); white-space: nowrap;
  /* .prose a sets an underline at rest, so without this the hover rule below
     "adds" an underline that is already there and hover is only a colour
     change -- the same inverted-hover symptom the colour fix addressed. */
  text-decoration: none;
}
.sf-pdf-open:hover, .sf-pdf-download:hover,
.prose .sf-pdf-open:hover, .prose .sf-pdf-download:hover { color: var(--ink); text-decoration: underline; }
.sf-pdf-viewer { padding: 0 0 14px; }
@media (max-width: 560px) {
  /* Narrow phones: let the actions drop under the title rather than squeezing
     it to a few characters. */
  .sf-pdf-row { flex-wrap: wrap; gap: 4px 12px; }
  .sf-pdf-title { flex: 1 0 100%; padding: 9px 0 0; }
  .sf-pdf-open, .sf-pdf-download { padding-bottom: 9px; }
}

/* Viewer chrome (built by static/js/pdf-viewer.js). */
/* position:relative anchors the absolutely-positioned outline panel. */
.pdfv-root { display: flex; flex-direction: column; position: relative; }
.pdfv-bar {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 8px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--s1);
}
.pdfv-spacer { flex: 1; }
.pdfv-btn {
  min-width: 30px; height: 28px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.pdfv-btn-wide { font-size: 12.5px; }
.pdfv-btn:hover:not(:disabled) { border-color: var(--ink2); }
.pdfv-btn:disabled { opacity: .4; cursor: default; }
/* Selector is deliberately over-specific. The global form rule above —
   "input[type=text], … { width: 100%; padding: 10px 14px; … }" — scores 0,1,1
   and so beats a lone .pdfv-page-input class (0,1,0), which stretched this
   input across the whole toolbar. Every property that rule sets has to be
   restated here, not just the width. */
.pdfv-bar input.pdfv-page-input {
  flex: none;
  width: 58px; height: 28px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 13px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.pdfv-page-total { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* Document sections (the PDF outline). Absolute so the panel floats over the
   stage instead of resizing it — a resize would re-trigger the fit and reflow
   the spread every time the panel opened. */
.pdfv-outline {
  /* 44px is the rendered height of .pdfv-bar above (6px padding x2 + 28px
     button + 1px borders + 8px margin). Change the bar's box and this panel
     detaches from it silently. */
  position: absolute; top: 44px; right: 0; z-index: 5;
  width: min(340px, 90%); max-height: 320px; overflow: auto;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--r);
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.pdfv-outline-list { margin: 0; padding: 0 0 0 10px; list-style: none; }
.pdfv-outline > .pdfv-outline-list { padding-left: 0; }
.pdfv-outline-link {
  display: block; width: 100%; padding: 4px 6px; margin: 0;
  background: none; border: 0; border-radius: 4px;
  font: inherit; font-size: 13px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.pdfv-outline-link:hover { background: var(--s2); }

/* The inline stage is a FIXED height, not a max-height: the script fits the
   spread to the stage box, so it needs a stable height to measure. 600px is
   the cap asked for; the vh term keeps it on screen on short displays.
   Keep the 10px padding and the .pdfv-spread gap in sync with PAD/GAP in
   static/js/pdf-viewer.js, which subtracts them when computing the fit. */
.pdfv-stage {
  height: min(600px, 70vh); overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--s1);
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.pdfv-spread { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pdfv-canvas { display: block; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.15); max-width: none; }
.pdfv-status { margin: 0 0 8px; font-size: 13.5px; color: var(--ink2); flex: none; }
.pdfv-status.is-error { color: var(--red); }

/* Full-window overlay — this replaces zoom controls: rather than stepping a
   scale up and down, you promote the same viewer into the whole window and the
   fit-to-height recomputes against the larger box. */
.pdfv-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(17, 17, 19, .86);
  display: flex; padding: 20px;
}
.pdfv-overlay .pdfv-root {
  flex: 1; min-width: 0; max-width: 1600px; margin: 0 auto;
  background: #fff; border-radius: var(--r); padding: 12px;
}
.pdfv-overlay .pdfv-stage { height: auto; flex: 1; min-height: 0; }
body.pdfv-locked { overflow: hidden; }

@media (max-width: 720px) {
  .pdfv-stage { height: min(420px, 60vh); }
  .pdfv-overlay { padding: 8px; }
}

.sf-video-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin: 1.5rem 0; }
.sf-video-toolbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 1.5rem; }
.sf-video-toolbar[hidden], .sf-video-empty[hidden] { display: none; }
.sf-video-search { grid-column: -2 / -1; }
.sf-video-search input { width: 100%; box-sizing: border-box; }
.sf-video-toolbar + .sf-video-list { margin-top: 16px; }
.sf-video-empty { margin: 1.5rem 0; color: var(--ink2); }
.sf-video { margin: 0; }
/* Both shapes occupy the same 16:9 box, so a page mixing resolved and
   unresolved posters keeps its grid aligned. Scoped under .sf-video, like
   .video-embed below, rather than left as unprefixed globals: .video-play
   itself stays global because product-features.html's placeholder button
   reuses it (partials/product-features.html:76). */
/* .video-poster is an <a>, not a <button> (progressive enhancement:
   library.html's sf-video-list comment). display:block plus the resets
   below already give it the button's old box model; text-decoration:none is
   the one reset an anchor needs that a button never did. */
.sf-video .video-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; background: var(--surface-2, #f6f6f7); cursor: pointer;
  border-radius: 6px; overflow: hidden; text-decoration: none;
}
.sf-video .video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-video .video-poster .video-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 24px;
}
.sf-video .video-fallback { border: 1px solid var(--border); }
.sf-video iframe.video-embed { max-width: none; width: 100%; aspect-ratio: 16 / 9; margin: 0 }
.sf-video video.video-embed { display: block; max-width: none; width: 100%; aspect-ratio: 16 / 9; margin: 0; object-fit: contain; background: #000; }
.sf-video figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink2); }

/* Banners contribute no vertical space of their own: what a band needs above
   and below depends on the page it sits on, so the page owns that, and two
   banners placed together stack flush. */
.sf-cta-banner { margin: 0; }
.sf-cta-banner-slot { min-height: 0; }

.sf-feed { margin: 1.5rem 0; }
.sf-feed .article-tile:first-child { grid-column: 1 / -1; }
@media (min-width: 782px) {
  .sf-feed .article-tile:first-child { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto auto 1fr; column-gap: 24px; row-gap: 8px; align-items: start; }
  .sf-feed .article-tile:first-child img { grid-row: 1 / span 4; margin: 0; aspect-ratio: auto; }
  .sf-feed .article-tile:first-child strong { font-size: 20px; }
  .sf-feed .article-tile:first-child span { font-size: 14px; }
  .sf-feed .article-tile:first-child .article-more { margin-top: 0; padding-top: 4px; align-self: start; }
}