/*
  SHARED COMPONENTS — OrchestraInstruments.com mockups
  Each component here is reused, unmodified, across multiple page-type
  mockups (see MOCKUP-PLAN.md Section 2). Establishing them once, in a
  shared file, is what lets the later Elementor build treat them as
  Global Widget presets rather than per-template rebuilds (Section 12.3).
  Depends on tokens.css and base.css being loaded first.
*/

/* =========================================================
   PAGE HEADER BAND (breadcrumbs + title block, used on every
   page type except the Homepage — Section 21 breadcrumb rule)
   ========================================================= */
.page-head {
  padding-block: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--color-line);
}
.page-head__eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.family-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brass-deep);
  background: var(--color-brass-soft);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
}
.page-head h1 { max-width: 20ch; }
.page-head__lede { font-size: var(--text-md); color: var(--color-ink-soft); margin-top: var(--space-3); max-width: 62ch; }

/*
 * .page-head__layout / .page-head__media: only used when a template passes
 * $media_html into oi_core_page_head() (currently just single-oi_review.php,
 * showing a confirmed product photo beside the title) — every other call
 * site omits it, which keeps this a single stacked column exactly as
 * before, no visual change there.
 */
.page-head__layout--with-media {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.page-head__layout--with-media .page-head__main { flex: 1 1 320px; }
.page-head__media {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-3);
}
.page-head__media img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* =========================================================
   TWO-COLUMN HUB LAYOUT
   Main column = editorial prose. Aside = structured entity facts
   and navigation. Keeping these visually and structurally separate
   is the whole point (KNOWLEDGE-FOUNDATION.md: entities vs. pages).
   ========================================================= */
.hub-layout {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-7);
}
.hub-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.hub-aside { display: flex; flex-direction: column; gap: var(--space-5); }

@media (min-width: 1024px) {
  .hub-layout { grid-template-columns: 1fr 320px; align-items: start; }
  .hub-aside { position: sticky; top: calc(72px + var(--space-5)); }
}

.hub-block h2 { margin-bottom: var(--space-3); }
.hub-block p + p { margin-top: var(--space-3); }

/* =========================================================
   ENTITY FACT PANEL
   Structured data pulled straight from the oi_instrument entity —
   deliberately styled as a distinct "spec sheet", never blended
   into prose typography, per the "structured facts vs. editorial
   prose" requirement.
   ========================================================= */
.fact-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.fact-panel__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-4);
}
.fact-panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.fact-panel dt { color: var(--color-ink-faint); font-weight: 600; }
.fact-panel dd { color: var(--color-ink); font-weight: 700; text-align: right; }
.fact-panel__note {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* =========================================================
   CLUSTER NAVIGATION (aside) — links grouped by page type,
   reflecting the internal-linking hierarchy in CONTENT-TAXONOMY.md
   ========================================================= */
.cluster-nav {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.cluster-nav__title { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-3); }
.cluster-nav__group { margin-bottom: var(--space-4); }
.cluster-nav__group:last-child { margin-bottom: 0; }
.cluster-nav__group-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brass-deep);
  margin-bottom: var(--space-2);
}
.cluster-nav__group ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cluster-nav__group a { font-size: var(--text-sm); color: var(--color-ink-soft); text-decoration: none; }
.cluster-nav__group a:hover, .cluster-nav__group a:focus-visible { color: var(--color-brass-deep); text-decoration: underline; }

/* =========================================================
   ANATOMY DIAGRAM  (Section 11.8 media policy)
   ========================================================= */
.anatomy-diagram {
  display: grid;
  gap: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.anatomy-diagram__figure {
  aspect-ratio: 16/10;
  background: linear-gradient(160deg, var(--color-surface), var(--color-brass-soft));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-walnut);
}
.anatomy-diagram__legend { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
.anatomy-diagram__legend-item { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-sm); }
.anatomy-diagram__legend-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-walnut);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.anatomy-diagram__caption { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-ink-faint); }
@media (min-width: 640px) {
  .anatomy-diagram__legend { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   MINI CARDS: instrument type / brand (compact horizontal cards)
   ========================================================= */
.mini-card-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .mini-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mini-card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.mini-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-ink);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.mini-card:hover, .mini-card:focus-visible { box-shadow: var(--shadow-sm); border-color: var(--color-brass); color: var(--color-ink); }
.mini-card__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-brass-soft);
  color: var(--color-walnut);
  display: flex; align-items: center; justify-content: center;
}
.mini-card__icon svg { width: 20px; height: 20px; }
.mini-card h4 { font-size: var(--text-sm); }
.mini-card p { font-size: var(--text-xs); color: var(--color-ink-soft); margin-top: 2px; }

/* =========================================================
   PROBLEM / DIAGNOSTIC LIST (common problems -> How-To template)
   ========================================================= */
.problem-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.problem-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.problem-item__link { font-weight: 600; color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); }
.problem-item__link:hover { color: var(--color-brass-deep); }
.problem-item__tag { font-size: var(--text-xs); color: var(--color-ink-faint); flex-shrink: 0; }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}
.faq-item__trigger:hover { color: var(--color-brass-deep); }
.faq-item__icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform var(--duration-base) var(--ease-standard); }
.faq-item__trigger[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__body { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); color: var(--color-ink-soft); }
.faq-item__body[hidden] { display: none; }

/* =========================================================
   VERDICT BOX (Best Guide required one-sentence editorial verdict)
   ========================================================= */
.verdict-box {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-brass);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.verdict-box__icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--color-brass-deep); }
.verdict-box p { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; color: var(--color-ink); line-height: var(--leading-snug); max-width: 60ch; }

/* =========================================================
   COMPARISON TABLE (lite) — accessible custom table pattern,
   not Elementor's default table widget (Section 12.6).
   ========================================================= */
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.compare-table caption { text-align: left; font-size: var(--text-xs); color: var(--color-ink-faint); padding: var(--space-4) var(--space-5) 0; }
.compare-table th, .compare-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-line); }
.compare-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-faint); background: var(--color-bg-alt); }
.compare-table tbody th { font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }
.compare-table tbody tr:hover { background: var(--color-bg-alt); }

/* =========================================================
   UPDATE LOG (Section 11.2 required module)
   ========================================================= */
.update-log { display: flex; flex-direction: column; gap: var(--space-3); }
.update-log__item { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
.update-log__date { flex-shrink: 0; width: 8.5em; color: var(--color-ink-faint); font-weight: 600; }
.update-log__desc { color: var(--color-ink-soft); }

/* =========================================================
   SIMPLE NUMBERED / BULLET LIST (buying mistakes, criteria)
   ========================================================= */
.simple-list { display: flex; flex-direction: column; gap: var(--space-3); }
.simple-list__item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--text-sm); color: var(--color-ink-soft);
}
.simple-list__marker {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-caution-bg); color: var(--color-caution);
  font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   PRODUCT ANALYSIS BLOCK (per-product deep dive within a Best Guide)
   ========================================================= */
.analysis-block {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-surface);
}
.analysis-block__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.analysis-block__head h3 { font-size: var(--text-lg); }
.analysis-block__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .analysis-block__grid { grid-template-columns: repeat(2, 1fr); }
}
.analysis-block__qa dt { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-brass-deep); margin-bottom: var(--space-1); }
.analysis-block__qa dd { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-4); }

/* =========================================================
   AUTHOR / REVIEWER BLOCK
   Interim-policy compliant (Section 20.1 / 22.1): always shows a real
   author. Only shows a reviewer line once one is genuinely engaged —
   never a placeholder "expert reviewed" claim.
   ========================================================= */
.author-block {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.author-block__avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-brass-soft);
  color: var(--color-walnut);
  display: flex; align-items: center; justify-content: center;
}
.author-block__avatar svg { width: 22px; height: 22px; }
.author-block__name { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.author-block__name a { color: inherit; }
.author-block__meta { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: 1px; }
.author-block__reviewer-note {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-align: right;
  max-width: 22ch;
}

/* =========================================================
   DECISION TREE (Comparison template — "choose X if / choose Y if")
   ========================================================= */
.decision-tree { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .decision-tree { grid-template-columns: repeat(2, 1fr); } }
.decision-tree__branch {
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
}
.decision-tree__branch h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
.decision-tree__branch ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.decision-tree__branch li { font-size: var(--text-sm); color: var(--color-ink-soft); padding-left: var(--space-4); position: relative; }
.decision-tree__branch li::before { content: "✓"; position: absolute; left: 0; color: var(--color-verified); font-weight: 700; }

/* =========================================================
   SAFETY / CAUTION CALLOUT (How-To/Care/Diagnostic template)
   ========================================================= */
.safety-callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-caution-bg);
  border-left: 4px solid var(--color-caution);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.safety-callout__icon { flex-shrink: 0; width: 26px; height: 26px; color: var(--color-caution); }
.safety-callout strong { display: block; font-size: var(--text-sm); color: var(--color-caution); margin-bottom: var(--space-1); }
.safety-callout p { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* =========================================================
   NUMBERED STEP SEQUENCE (How-To/Care/Diagnostic template)
   ========================================================= */
.step-list { list-style: none; padding-left: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-4); }
.step-list__item {
  display: flex; gap: var(--space-4);
  counter-increment: step;
}
.step-list__item::before {
  content: counter(step);
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-walnut);
  color: var(--color-white);
  font-weight: 700;
  font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
}
.step-list__body h4 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.step-list__body p { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* =========================================================
   TROUBLESHOOTING TABLE (symptom -> likely cause -> fix)
   ========================================================= */
.trouble-table th, .trouble-table td { vertical-align: top; }

/* =========================================================
   BUY BOX (sidebar CTA cluster — sits inside the already-sticky
   .hub-aside). Multiple retailers, each its own affiliate offer,
   per merchant_offers repeater (KNOWLEDGE-FOUNDATION.md Section 3.3).
   ========================================================= */
.buy-box {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.buy-box__title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-faint); margin-bottom: var(--space-4); }
.buy-box__list { display: flex; flex-direction: column; gap: var(--space-3); }
.buy-box__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.buy-box__row:last-child { border-bottom: none; padding-bottom: 0; }
.buy-box__row > div:first-child { min-width: 0; flex: 1; }
.buy-box__row > a.btn { flex-shrink: 0; white-space: nowrap; }
.buy-box__retailer { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.buy-box__note { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: 1px; }
.buy-box__aff-tag { font-size: 0.6875rem; color: var(--color-ink-faint); font-weight: 400; }
.buy-box__foot { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

/* Inline micro-tag used next to any affiliate CTA in body content,
   for per-link clarity in addition to the page-level disclosure note. */
.aff-tag {
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  font-weight: 600;
  margin-left: var(--space-2);
}

/* =========================================================
   FILTER CHIPS (Family Archive skill-level filter)
   ========================================================= */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip {
  font-size: var(--text-xs); font-weight: 700;
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-line-deep);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  cursor: pointer;
}
.filter-chip[aria-pressed="true"] { background: var(--color-walnut); border-color: var(--color-walnut); color: var(--color-white); }
.filter-chip:hover:not([aria-pressed="true"]) { border-color: var(--color-brass); color: var(--color-ink); }

/* =========================================================
   SOURCING FLAG (Brand Hub stricter evidence rule, Section 9.3)
   ========================================================= */
.sourcing-flag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.6875rem; font-weight: 700;
  color: var(--color-caution);
  background: var(--color-caution-bg);
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
}
.sourcing-verified {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.6875rem; font-weight: 700;
  color: var(--color-verified);
  background: var(--color-verified-bg);
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
}

/* =========================================================
   BRAND IDENTITY BLOCK (Brand Hub header)
   ========================================================= */
.brand-identity { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.brand-identity__mark {
  flex-shrink: 0; width: 72px; height: 72px;
  border-radius: var(--radius-lg);
  background: var(--gradient-panel);
  color: var(--color-brass-soft);
  display: flex; align-items: center; justify-content: center;
}
.brand-identity__mark svg { width: 36px; height: 36px; }
.brand-identity__meta-row { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-2); }

/* =========================================================
   AUDIENCE SCOPE STATEMENT (Editorial Guide required opener)
   ========================================================= */
.scope-statement {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}
.scope-statement strong { color: var(--color-ink); }

/* =========================================================
   OFFER ROW (Review / Comparison "Where to buy" line items)
   ========================================================= */
.offer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); flex-wrap: wrap;
}
.offer-row__meta { font-size: var(--text-xs); color: var(--color-ink-faint); }
.offer-row > a.btn { flex-shrink: 0; white-space: nowrap; }

/* =========================================================
   CALLOUT LINK (prose-level CTA to a Best Guide/Comparison/Review —
   used on templates like Editorial Guide that deliberately carry no
   product cards or comparison tables of their own, Section 11.7)
   ========================================================= */
.callout-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  padding: var(--space-5); flex-wrap: wrap;
}
.callout-link p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-top: var(--space-1); }

/* =========================================================
   SEARCH RESULT ITEM (vertical list, distinct from grid cards)
   ========================================================= */
.search-result-list { display: flex; flex-direction: column; gap: var(--space-4); }
.search-result-item {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.search-result-item:hover { box-shadow: var(--shadow-sm); border-color: var(--color-brass); }
.search-result-item__path { font-size: var(--text-xs); color: var(--color-ink-faint); }
.search-result-item__title { font-size: var(--text-md); font-family: var(--font-display); }
.search-result-item__title a { color: var(--color-ink); text-decoration: none; }
.search-result-item__title a:hover { color: var(--color-brass-deep); }
.search-result-item__snippet { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* =========================================================
   EMPTY STATE (no results)
   ========================================================= */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4);
  padding: var(--space-8) var(--space-5);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-line-deep);
  border-radius: var(--radius-lg);
}
.empty-state__icon { width: 56px; height: 56px; color: var(--color-ink-faint); }
.empty-state h3 { font-size: var(--text-lg); }
.empty-state p { color: var(--color-ink-soft); max-width: 46ch; }
/* Real bug, not styling preference: `.empty-state { display: flex }` and the
   browser's own `[hidden] { display: none }` rule have identical (0,1,0)
   specificity, so whichever is declared later in the cascade wins — and an
   author stylesheet always loads after the UA default sheet. That silently
   overrode the `hidden` attribute on the Shop page's "no products match"
   message (templates/shop.php's [data-shop-empty]), so it rendered visible
   at the same time as the actual product grid, even though the JS filter
   logic in main.js was toggling `hidden` correctly the whole time. A
   same-element compound selector has higher specificity (0,2,0) than either
   rule alone, so this always wins regardless of source order. */
.empty-state[hidden] { display: none; }

/* =========================================================
   SITE HEADER + PRIMARY NAVIGATION
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
/* The header bar deliberately does NOT use .container (max-width: 1240px,
   the article/content width). Back to one row after a two-row layout made
   the sticky header noticeably taller — one row needs more horizontal
   budget than the content column to comfortably fit brand + 8 nav links +
   search without crowding, so it gets its own, wider max-width instead. */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-5);
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 3vw, var(--space-8));
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
  flex-shrink: 0;
}
.brand__mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover .brand__name { color: var(--color-walnut); }
.brand:hover .brand__mark { transform: scale(1.06) rotate(-2deg); }

/* `overflow-x: auto` used to live here as an extra-safety fallback in case
   the nav ever ran out of horizontal room on a narrow desktop window. Real
   bug this caused: per the CSS spec, setting only overflow-x to anything
   but `visible` forces the browser to also compute overflow-y as `auto`
   (a box can't scroll on one axis while staying visible on the other) —
   which silently clipped the mega menu's dropdown panel, since it's an
   absolutely-positioned descendant that extends below this element's own
   box. That's why the panel would never actually appear (just the arrow
   next to "Instruments" did). Removed — the nav's own sizing (nowrap
   labels, tightened gaps, the header's own wider max-width) was already
   enough to fit comfortably without needing this fallback. */
.primary-nav { display: none; min-width: 0; flex: 1 1 auto; }
.primary-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--space-4);
  width: max-content;
  margin-inline: auto;
}
.primary-nav__link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible {
  color: var(--color-brass-deep);
  border-bottom-color: var(--color-brass);
}
.primary-nav__link[aria-current="page"] {
  color: var(--color-brass-deep);
  border-bottom-color: var(--color-brass-deep);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Persistent inline search — a plain, always-visible box, not a button that
   opens a hidden panel. Hidden below 1024px (the hamburger's mobile-nav
   overlay has its own always-real search input instead, unchanged). Allowed
   to shrink on narrower desktop widths (min-width: 0 + a moderate basis)
   rather than forcing the row to overflow. .header-search-wrap is the
   positioning context for the suggestions dropdown (see .search-suggest-panel
   below) — it has to be a separate wrapper around the <form>, not the form
   itself, since the dropdown is a sibling of the form, not inside it. */
.header-search-wrap {
  position: relative;
  display: none;
  /* Widened from 220px/140px — that let the row's flexbox shrink it down
     far enough to truncate the "Search instruments" placeholder to
     "Search instr". This is comfortably enough room for the full
     placeholder plus the Search button at any width the header actually
     needs to support (see .site-header__bar's own wide max-width). */
  flex: 0 1 300px;
  min-width: 240px;
}
.header-search-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line-deep);
  border-radius: var(--radius-pill);
  padding: 0.4em 0.5em 0.4em 0.9em;
  box-sizing: border-box;
}
.header-search-inline svg { width: 16px; height: 16px; color: var(--color-ink-faint); flex-shrink: 0; }
.header-search-inline input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.header-search-inline input[type="search"]:focus { outline: none; }
.header-search-inline input[type="search"]::placeholder { color: var(--color-ink-faint); font-weight: 400; font-size: var(--text-xs); }
.header-search-inline:focus-within { border-color: var(--color-brass); }
.header-search-inline .btn { padding: 0.4em 0.9em; flex-shrink: 0; }

/* Custom search-suggestions dropdown — replaces an earlier native <datalist>
   attempt, which rendered as an obvious browser control rather than this
   site's own UI. Populated/shown by assets/js/main.js from the small,
   curated JSON block oi_core_search_suggestions() prints once per page
   (see template-parts.php). */
.search-suggest-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: 120;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.search-suggest-panel[hidden] { display: none; }
.search-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.65em 0.9em;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.search-suggest-item + .search-suggest-item { border-top: 1px solid var(--color-line); }
.search-suggest-item:hover,
.search-suggest-item[data-active="true"] {
  background: var(--color-bg-alt);
}
.search-suggest-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-item__type {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brass-deep);
  background: var(--color-brass-soft);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1.5px solid var(--color-line-deep);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--color-bg-alt); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .header-search-wrap { display: block; }
  .nav-toggle { display: none; }
}

/* =========================================================
   MOBILE NAVIGATION (overlay panel)
   ========================================================= */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-nav[data-open="true"] { transform: translateX(0); }

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.mobile-nav__search-wrap { position: relative; margin: var(--space-5); }
.mobile-nav__search {
  display: flex;
  gap: var(--space-2);
  border: 1.5px solid var(--color-line-deep);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
}
.mobile-nav__search svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-ink-faint); }
.mobile-nav__search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.mobile-nav__search input[type="search"]:focus { outline: none; }
.mobile-nav__search-wrap .search-suggest-panel { left: 0; right: 0; }

.mobile-nav__groups { padding: 0 var(--space-5) var(--space-7); }
.mobile-nav__group { border-bottom: 1px solid var(--color-line); padding-block: var(--space-3); }
.mobile-nav__group-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}
.mobile-nav__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.mobile-nav__link:hover, .mobile-nav__link:focus-visible { color: var(--color-brass-deep); }

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

/* =========================================================
   BREADCRUMBS  (scaffolded here; first full page-context use is
   the Instrument & Accessory Hub mockup, per MOCKUP-PLAN.md)
   ========================================================= */
.breadcrumbs {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; padding-left: 0; }
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-inline: var(--space-2);
  color: var(--color-line-deep);
}
.breadcrumbs a { color: var(--color-ink-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-brass-deep); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-ink-soft); font-weight: 600; }

/* =========================================================
   TRUST / METHODOLOGY STRIP
   ========================================================= */
.trust-strip {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.trust-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.trust-item__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brass-soft);
  color: var(--color-walnut-deep);
  display: flex; align-items: center; justify-content: center;
}
.trust-item__icon svg { width: 20px; height: 20px; }
.trust-item h3 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--space-1); }
.trust-item p { font-size: var(--text-sm); color: var(--color-ink-soft); }

@media (min-width: 640px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-strip { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   CARD GRID
   ========================================================= */
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* ---- Instrument family card ---- */
.family-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-ink);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.family-card:hover, .family-card:focus-visible {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brass);
  transform: translateY(-2px);
  color: var(--color-ink);
}
.family-card:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.family-card__icon {
  width: 48px; height: 48px;
  color: var(--color-walnut);
}
.family-card h3 { font-size: var(--text-md); }
.family-card p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.family-card__meta {
  margin-top: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-brass-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Hub teaser card (instrument/accessory hub entry point) ---- */
.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.hub-card:hover, .hub-card:focus-visible { box-shadow: var(--shadow-md); border-color: var(--color-brass); color: var(--color-ink); transform: translateY(-2px); }
.hub-card:active { transform: translateY(0); }
.hub-card__media {
  aspect-ratio: 16/10;
  /* Was a brass/parchment gradient — looked like a mismatched box the
     moment a real (white-background) product photo sat inside it. Every
     confirmed product photo this site uses has a plain white background,
     so the card's own media background is now plain white too, exactly
     matching those photos rather than fighting them. Icon placeholders
     (no confirmed photo yet) still read fine in walnut against white. */
  background: var(--color-white);
  /* Padding so the photo doesn't touch the card's own edges — a flush
     edge-to-edge photo read as a layout mistake rather than an
     intentional "product on a clean background" look. */
  padding: var(--space-4);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-walnut);
}
.hub-card__media svg { width: 56px; height: 56px; }
.hub-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.hub-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-brass-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hub-card h3 { font-size: var(--text-md); margin-top: var(--space-1); }
.hub-card p { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: var(--space-2); }
.hub-card__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.fact-chip {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.75em;
}

/* ---- Best-guide / product recommendation card ---- */
.rec-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.rec-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brass); transform: translateY(-2px); }
.rec-card:active { transform: translateY(0); }
.rec-card__media {
  aspect-ratio: 4/3;
  /* Plain white to match every confirmed product photo's own white
     background — see .hub-card__media comment above for why the previous
     gradient looked wrong the moment a real photo was placed inside it. */
  background: var(--color-white);
  /* Padding so the photo has visible air around it instead of touching
     the card edges — the superlative ribbon below is absolutely
     positioned, so it ignores this padding and still sits flush in the
     corner exactly as before. */
  padding: var(--space-4);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-walnut);
  position: relative;
}
.rec-card__media svg { width: 72px; height: 72px; }
.rec-card__superlative {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  right: var(--space-3);
  max-width: calc(100% - (var(--space-3) * 2));
  width: fit-content;
  background: var(--color-walnut);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-md, 8px); /* Was --radius-pill: a fully-rounded pill reads fine for a short 2-4 word badge (the intended length per acf-page-fields.php's own field instructions) but looks broken if a longer phrase ever wraps to 2 lines. A softer rounded-rect degrades gracefully either way. */
  box-shadow: var(--shadow-sm);
}
/* Ribbon color variety — purely decorative rotation, not a rating signal.
   Keep off red; walnut/jewel/forest/brass all sit inside the approved palette. */
.rec-card__superlative--jewel  { background: var(--color-jewel); }
.rec-card__superlative--forest { background: var(--color-forest); }
.rec-card__superlative--brass  { background: var(--gradient-cta); color: var(--color-walnut-deep); }
.rec-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.rec-card h3 { font-size: var(--text-md); }
.rec-card__brand { font-size: var(--text-sm); color: var(--color-ink-faint); }
.rec-card p.rec-card__note { font-size: var(--text-sm); color: var(--color-ink-soft); }
.rec-card__meta-row > a.btn { flex-shrink: 0; white-space: nowrap; }
.rec-card__meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.price-band {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-soft);
}
.price-band__dots { display: inline-flex; gap: 3px; margin-right: var(--space-2); vertical-align: middle; }
.price-band__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-line-deep); display: inline-block; }
.price-band__dot--filled { background: var(--color-brass-deep); }

/* =========================================================
   EDITORIAL ASSESSMENT INDICATOR
   Deliberately NOT a customer star-rating or aggregateRating display.
   This represents OUR OWN structured editorial scoring (once
   REVIEW-METHODOLOGY exists), always paired with a visible label and a
   link to the methodology — never a bare number that could be mistaken
   for a scraped/aggregated customer rating (Section 20 / 20.1).
   ========================================================= */
.assessment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.assessment__units {
  display: inline-flex;
  gap: 3px;
}
.assessment__unit {
  width: 15px; height: 15px;
  color: var(--color-line-deep);
}
.assessment__unit svg { width: 100%; height: 100%; }
.assessment__unit--filled { color: var(--color-brass-deep); }
.assessment__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-soft);
}
.assessment__link {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   PRODUCT CARD (denser than .rec-card — used in high-volume
   "popular products" grids where many items are shown at once)
   ========================================================= */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brass); transform: translateY(-2px); }
.product-card__media {
  aspect-ratio: 1/1;
  /* Plain white to match every confirmed product photo's own white
     background — see .hub-card__media comment above for why the previous
     gradient looked wrong the moment a real photo was placed inside it.
     This is the highest-traffic card style on the site (Shop, Popular
     Right Now, Family Archive, Brand Hub), so it's the one Allan actually
     screenshotted. */
  background: var(--color-white);
  /* Padding so the photo has visible air around it instead of touching
     the card edges — the badge below is absolutely positioned, so it
     ignores this padding and still sits flush in the corner as before. */
  padding: var(--space-4);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-walnut);
  position: relative;
}
.product-card__media svg { width: 52px; height: 52px; }
.product-card__badge {
  position: absolute; top: var(--space-2); right: var(--space-2);
  font-size: 0.6875rem; font-weight: 700;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line-deep);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
}
.product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__family { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-brass-deep); }
.product-card h4 { font-size: var(--text-base); line-height: var(--leading-snug); }
.product-card__brand { font-size: var(--text-xs); color: var(--color-ink-faint); }
.product-card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.product-card__footer .price-band { min-width: 0; }
.product-card__footer > a.btn { flex-shrink: 0; white-space: nowrap; }

/* =========================================================
   BADGES  (review-status badges, Section 11.4 / 20.1)
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--desk-research {
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line-deep);
}
.badge--expert {
  background: var(--color-verified-bg);
  color: var(--color-verified);
  border: 1px solid var(--color-verified);
}
.badge--tested {
  background: var(--color-brass-soft);
  color: var(--color-walnut-deep);
  border: 1px solid var(--color-brass-deep);
}

/* =========================================================
   AFFILIATE DISCLOSURE (inline strip)
   ========================================================= */
.disclosure-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  /* This almost always sits directly under a product/card grid (Shop
     sections, Best Guide picks, etc.) with no space of its own — it was
     butting straight up against the grid above it. */
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.disclosure-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.disclosure-note a { color: var(--color-ink-soft); }

/* =========================================================
   CONCERTS SHORTCODE — [oi_concerts]
   Rendered by class-oi-concerts.php's render_shortcode(). Deliberately
   reuses the site's existing card/grid visual language rather than
   introducing new tokens.
   ========================================================= */
.oi-concerts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
}
.oi-concert-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.oi-concert-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-alt);
}
.oi-concert-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.oi-concert-card__date {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brass-deep);
  margin: 0;
}
.oi-concert-card__title { margin: 0; font-size: var(--text-md); }
.oi-concert-card__venue { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); }
.oi-concert-card__cta {
  margin-top: var(--space-2);
  display: inline-block;
  font-weight: 600;
  font-size: var(--text-sm);
}

/* =========================================================
   AD MARKETPLACE — [oi_ad_zone] units + [oi_ad_creative_form]
   ========================================================= */
/* Deliberately restrained — a single small unit set off by a hairline rule
   rather than a filled, bordered "banner ad" box, so it reads as a quiet
   editorial-adjacent mention rather than something plastered on top of the
   page. Never renders at all when there's no approved ad for the zone
   (see render_zone()'s empty-candidates return) — no placeholder box ever
   shows. */
.ad-unit {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
}
.ad-unit__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}
.ad-unit__link {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.ad-unit__media img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.ad-unit__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-unit__title { font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); }
.ad-unit__text { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* Site-footer zone: full-width, sits quietly above the copyright line rather
   than competing with the footer's main navigation columns. */
.site-footer .ad-unit {
  border-top-color: var(--color-line-deep);
  margin-top: 0;
  margin-bottom: var(--space-4);
}
.site-footer .ad-unit__media img { width: 96px; height: 54px; }
.site-footer .ad-unit__title,
.site-footer .ad-unit__text { color: var(--color-white); }
.site-footer .ad-unit__label { color: #A6947A; }

.oi-ad-creative-form {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.oi-ad-creative-form h3 { margin-top: 0; }
.oi-ad-creative-form__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.oi-ad-creative-form__fields label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}
.oi-ad-creative-form__fields input,
.oi-ad-creative-form__fields textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

/* =========================================================
   NEWSLETTER SIGNUP
   ========================================================= */
.newsletter {
  background: var(--color-walnut-deep);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.newsletter h2 { color: var(--color-white); font-size: var(--text-xl); }
.newsletter p { color: #D9CDB8; font-size: var(--text-base); }
.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
}
.newsletter__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.newsletter__field label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #D9CDB8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.newsletter__row {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}
.newsletter__input {
  padding: 0.8em 1em;
  border-radius: var(--radius-md);
  border: 1.5px solid #5A4130;
  background: #382718;
  color: var(--color-white);
  font-size: var(--text-base);
  width: 100%;
}
.newsletter__input::placeholder { color: #A6947A; }
.newsletter__input:focus-visible { outline-color: var(--color-brass-soft); }
.newsletter__disclaimer { font-size: var(--text-xs); color: #B7A88C; }

@media (min-width: 640px) {
  .newsletter__row { flex-direction: row; }
  .newsletter__input { width: auto; flex: 1; }
}
@media (min-width: 1024px) {
  .newsletter { flex-direction: row; align-items: center; justify-content: space-between; }
  .newsletter__copy { max-width: 40ch; }
}

/* =========================================================
   SITE FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-walnut-deep);
  color: #C9BBA1;
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-block: var(--space-8);
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brass-soft);
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { color: #C9BBA1; text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--color-white); text-decoration: underline; }

.footer-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-white); margin-bottom: var(--space-3); }
.footer-brand svg { width: 28px; height: 28px; color: var(--color-brass-soft); }
.footer-brand span { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.footer-tagline { font-size: var(--text-sm); max-width: 32ch; }

.footer-bottom {
  border-top: 1px solid #4A3324;
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: #A6947A;
}

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =========================================================
   COOKIE CONSENT BAR
   In this site's own dark-walnut/brass palette (same tone as the footer),
   not the generic dark-navy widget it was modeled on — see
   class-oi-cookie-consent.php for what this does and doesn't gate.
   ========================================================= */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--color-walnut-deep);
  color: var(--color-brass-soft);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__bar,
.cookie-consent__panel {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cookie-consent__panel[hidden] { display: none; }
.cookie-consent__text { font-size: var(--text-sm); line-height: var(--leading-snug); max-width: 72ch; margin: 0; }
.cookie-consent__text a { color: var(--color-brass-soft); text-decoration: underline; }
.cookie-consent__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cookie-consent__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-brass-soft);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-right: auto;
}
.cookie-consent .btn--secondary {
  border-color: var(--color-brass-soft);
  color: var(--color-white);
}
.cookie-consent .btn--secondary:hover { background: rgba(255,255,255,0.06); }

.cookie-consent__categories { display: flex; flex-direction: column; gap: var(--space-4); }
.cookie-consent__category-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.cookie-consent__category-title { color: var(--color-white); font-weight: 600; font-size: var(--text-sm); margin: 0; }
.cookie-consent__category-note { font-size: var(--text-xs); color: var(--color-brass-soft); margin: 0.25em 0 0; max-width: 60ch; }

.cookie-consent__toggle {
  flex-shrink: 0;
  width: 40px; height: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-brass-soft);
  background: transparent;
  padding: 2px;
  cursor: pointer;
  position: relative;
}
.cookie-consent__toggle-knob {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-brass-soft);
  transition: transform var(--duration-base) var(--ease-standard);
}
.cookie-consent__toggle[aria-checked="true"] {
  background: var(--color-brass-deep);
  border-color: var(--color-brass-deep);
}
.cookie-consent__toggle[aria-checked="true"] .cookie-consent__toggle-knob {
  background: var(--color-white);
  transform: translateX(18px);
}
.cookie-consent__toggle--locked {
  background: var(--color-brass-deep);
  border-color: var(--color-brass-deep);
  cursor: not-allowed;
}
.cookie-consent__toggle--locked .cookie-consent__toggle-knob {
  background: var(--color-white);
  transform: translateX(18px);
}

@media (min-width: 900px) {
  .cookie-consent__bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookie-consent__text { flex: 1; }
}

/* =========================================================
   RECENTLY-UPDATED TICKER (homepage)
   A real, dated editorial-activity feed (oi_core_recent_guide_updates() in
   query-helpers.php) rendered as a slow, continuous horizontal scroll —
   added specifically in response to the site feeling static. The content
   is genuinely real (each item is an actual update_log row); the motion
   itself is presentation only, not implying anything false about the data.
   ========================================================= */
.update-ticker {
  background: var(--color-walnut-deep);
  overflow: hidden;
  padding-block: var(--space-3);
}
.update-ticker__track {
  display: flex;
  width: max-content;
  animation: oi-ticker-scroll 45s linear infinite;
}
.update-ticker:hover .update-ticker__track { animation-play-state: paused; }
.update-ticker__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
  padding-inline: var(--space-6);
  text-decoration: none;
  color: var(--color-brass-soft);
  font-size: var(--text-sm);
  border-right: 1px solid rgba(255,255,255,0.12);
}
.update-ticker__item:hover { color: var(--color-white); }
.update-ticker__date { font-weight: 700; color: var(--color-white); flex-shrink: 0; }
.update-ticker__note strong { color: var(--color-white); font-weight: 600; }
@keyframes oi-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .update-ticker__track { animation: none; }
  .update-ticker { overflow-x: auto; }
}

/* =========================================================
   CORNER "JUST PUBLISHED" TOAST
   Bottom-left, per the requested inspiration — but its actual bottom offset
   is set inline by assets/js/main.js at show-time, computed from the
   cookie-consent bar's current height (0 if already dismissed) so the two
   never overlap, rather than a fixed value that would collide with it.
   ========================================================= */
.site-toast {
  position: fixed;
  left: var(--space-5);
  bottom: 24px;
  z-index: 250;
  max-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-brass-deep);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  pointer-events: none;
}
.site-toast[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Same specificity-tie fix as .empty-state[hidden] elsewhere in this file:
   without this, `.site-toast { display: flex }` (a class selector) and the
   browser's own `[hidden] { display: none }` (an attribute selector) are
   equal specificity, and the author stylesheet loading after the UA sheet
   would silently win — leaving the toast visible even with `hidden` set. */
.site-toast[hidden] { display: none; }
.site-toast__link { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.site-toast__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brass-deep);
}
.site-toast__title { font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; line-height: var(--leading-snug); }
.site-toast__close {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-ink-faint);
  margin-left: auto;
}
.site-toast__close:hover { color: var(--color-ink); }
.site-toast__close svg { width: 12px; height: 12px; }

@media (max-width: 480px) {
  .site-toast { left: var(--space-4); right: var(--space-4); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-toast { transition: none; }
}

/* =========================================================
   MEGA MENU (Instruments nav item)
   Structure only inspired by reference sites (a promo panel + grouped
   columns) — every column and link here is real, live content: one column
   per oi_instrument_family term with >=1 published instrument, each linking
   to that instrument's actual Hub page (oi_core_instruments_by_family() in
   query-helpers.php), plus a small rotating carousel of real, confirmed-
   photo products (oi_core_mega_menu_products()). Opens on hover/focus
   (pure CSS, works with no JS at all) and toggles via click on the chevron
   for touch devices (assets/js/main.js just adds [data-open] on top of
   that same CSS rule).

   FULL-WIDTH POSITIONING: intentionally NOT `position: relative` on
   .primary-nav__item--mega. .mega-menu's `position: absolute` needs a
   positioned ancestor to resolve against — per CSS spec, `position: sticky`
   counts as positioned for this purpose, so removing relative here lets it
   fall through to .site-header (position: sticky, see further down this
   file), which spans the full viewport width. That's what makes `left: 0;
   right: 0;` below span edge-to-edge like the reference screenshot, instead
   of being capped to a small floating card under the trigger.
   ========================================================= */
.primary-nav__mega-trigger { display: inline-flex; align-items: center; gap: 2px; }
.primary-nav__chevron-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-ink-soft);
}
.primary-nav__chevron { width: 10px; height: 10px; transition: transform var(--duration-base) var(--ease-standard); }
.primary-nav__item--mega:hover .primary-nav__chevron,
.primary-nav__item--mega:focus-within .primary-nav__chevron,
.primary-nav__item--mega[data-open="true"] .primary-nav__chevron {
  transform: rotate(180deg);
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  margin-top: 0;
  z-index: 150;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.primary-nav__item--mega:hover .mega-menu,
.primary-nav__item--mega:focus-within .mega-menu,
.primary-nav__item--mega[data-open="true"] .mega-menu {
  display: block;
}
.mega-menu__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-6);
  max-width: var(--container-max);
  margin-inline: auto;
}
.mega-menu__promo {
  border-right: 1px solid var(--color-line);
  padding-right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mega-menu__promo-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brass-deep);
}
.mega-menu__promo-title { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); }
.mega-menu__promo-text { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-2); }
.mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5) var(--space-6);
}
.mega-menu__column-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-brass-soft);
}
.mega-menu__column-title:hover { color: var(--color-brass-deep); }
.mega-menu__column ul { display: flex; flex-direction: column; gap: var(--space-1); }
.mega-menu__column a {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
}
.mega-menu__column a:hover { color: var(--color-brass-deep); text-decoration: underline; }

/* Rotating product carousel inside .mega-menu__promo. One .mega-menu__slide
   is shown at a time via [data-active="true"] (no specificity fight with a
   browser UA rule here, unlike the [hidden] cases elsewhere in this file —
   this is a plain author-controlled attribute selector); assets/js/main.js
   swaps which slide/dot carries data-active on an interval. */
.mega-menu__carousel { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.mega-menu__slide { display: none; }
.mega-menu__slide[data-active="true"] { display: block; }
.mega-menu__slide-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  margin-bottom: var(--space-2);
}
.mega-menu__slide-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-2); }
.mega-menu__slide-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-2); }
.mega-menu__slide-ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mega-menu__carousel-dots { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
.mega-menu__carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-line);
  transition: background var(--duration-base) var(--ease-standard);
}
.mega-menu__carousel-dot[data-active="true"] { background: var(--color-brass-deep); }

/* =========================================================
   GUIDES & REVIEWS DROPDOWN (primary-nav__item--dropdown)
   Consolidates what used to be 5 separate top-level nav items
   (Best Guides / Reviews / Comparisons / Brands / Care) into one
   lightweight dropdown — same hover/focus/click-toggle CSS pattern
   as .mega-menu (assets/js/main.js's [data-mega-item] handlers are
   generic and already cover this, no new JS needed), but a much
   smaller floating panel rather than a full-width mega panel: this
   is a simple list, not a promo+columns layout, so it doesn't need
   the edge-to-edge treatment.
   ========================================================= */
.primary-nav__item--dropdown { position: relative; }
.primary-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  z-index: 150;
  width: 300px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.primary-nav__item--dropdown:hover .primary-nav__dropdown,
.primary-nav__item--dropdown:focus-within .primary-nav__dropdown,
.primary-nav__item--dropdown[data-open="true"] .primary-nav__dropdown {
  display: block;
}
.primary-nav__dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.primary-nav__dropdown-link:hover { background: var(--color-bg-alt); }
.primary-nav__dropdown-link-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.primary-nav__dropdown-link-desc { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* =========================================================
   ADVERTISE NAV ITEM — deliberately styled as a small highlighted
   CTA pill rather than a plain nav link (Allan: nav "skal virke
   stort og lækkert appellerende" to the advertiser audience), plus
   a mega panel reusing .mega-menu's existing promo pattern so the
   live ad packages get real promotional space, not just a link.
   ========================================================= */
.primary-nav__link--cta {
  background: var(--color-brass-deep);
  color: var(--color-white);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.primary-nav__link--cta:hover { background: var(--color-ink); color: var(--color-white); transform: translateY(-1px); }
.primary-nav__link--cta[aria-current="page"] { background: var(--color-ink); }
.primary-nav__chevron-btn--cta { color: var(--color-brass-deep); }
.mega-menu--advertise .mega-menu__inner { grid-template-columns: 280px 1fr; }
.nav-ad-packages { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-ad-package-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.nav-ad-package-card:hover { border-color: var(--color-brass); box-shadow: var(--shadow-sm); }
.nav-ad-package-card__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.nav-ad-package-card__price { font-size: var(--text-sm); font-weight: 700; color: var(--color-brass-deep); white-space: nowrap; }
.nav-ad-package-card__price span { font-weight: 400; color: var(--color-ink-soft); }

/* Mobile nav CTA link — mirrors .primary-nav__link--cta's pill treatment
   inside the mobile nav's own link list. */
.mobile-nav__link--cta {
  display: inline-block;
  background: var(--color-brass-deep);
  color: var(--color-white);
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-align: center;
}

/* =========================================================
   ADVERTISE LANDING PAGE (templates/advertise.php)
   A dedicated, premium-feeling sales page for the ad marketplace —
   kept deliberately restrained (generous whitespace, one accent
   color, no stock-photo clutter) rather than looking like a banner-
   ad network, per Allan's explicit "skal ikke se uprofessionelt ud"
   instruction. Reuses .btn--cta, .mini-card-grid, .faq-item,
   .hub-block, .empty-state as-is rather than inventing parallel
   versions of components that already exist.
   ========================================================= */
.ad-hero {
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-9) var(--space-8);
  text-align: center;
}
.ad-hero__inner { max-width: 68ch; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.ad-hero__inner h1 { font-size: var(--text-2xl); line-height: var(--leading-snug); margin-top: var(--space-3); max-width: 22ch; }
.ad-hero__lede { font-size: var(--text-md); color: var(--color-ink-soft); margin-top: var(--space-4); max-width: 58ch; }
.ad-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-7);
  margin: var(--space-6) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  width: 100%;
  max-width: 68ch;
}
.ad-hero__stat { display: flex; flex-direction: column; align-items: center; }
.ad-hero__stat strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-brass-deep); line-height: 1; }
.ad-hero__stat span { font-size: var(--text-xs); color: var(--color-ink-soft); margin-top: var(--space-1); text-align: center; max-width: 14ch; }

.ad-benefits {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}
.ad-benefit { text-align: center; }
.ad-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--space-3);
  color: var(--color-brass-deep);
  background: var(--color-brass-soft);
  border-radius: 50%;
}
.ad-benefit__icon svg { width: 24px; height: 24px; }
.ad-benefit h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.ad-benefit p { font-size: var(--text-sm); color: var(--color-ink-soft); max-width: 40ch; margin-inline: auto; }
@media (min-width: 768px) {
  .ad-benefits { grid-template-columns: repeat(3, 1fr); }
}

.ad-packages-section { padding-block: var(--space-9) var(--space-8); }
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pricing-card__ribbon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brass-deep);
  background: var(--color-brass-soft);
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
}
.pricing-card__zone { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-faint); margin-bottom: var(--space-2); }
.pricing-card__title { font-size: var(--text-md); margin-bottom: var(--space-2); max-width: 22ch; }
.pricing-card__price { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); margin-bottom: var(--space-3); }
.pricing-card__price span { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-soft); }
.pricing-card__desc { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-4); }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-card__features li {
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding-left: var(--space-5);
  position: relative;
}
.pricing-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  background: var(--color-brass-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l4 4 8-8' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l4 4 8-8' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pricing-card__features li:last-child { margin-bottom: 0; }
.pricing-card .btn--cta { margin-top: auto; }

.ad-how-it-works { padding-block: var(--space-8); border-top: 1px solid var(--color-line); }

/* =========================================================
   DISTRACTION-FREE CHECKOUT (Cart + Checkout pages)
   Allan, 2026-08-09: the checkout flow needed to feel "lækkert og
   sælgende og tryghedsskabende" (premium, persuasive, trust-building)
   with less scrolling to reach Place Order. Two changes, both scoped
   to page-generic.php's $is_wc_flow branch only — nothing here touches
   any other page:
     1. A stripped .site-header--minimal / .site-footer--minimal (see
        template-parts.php) instead of the full nav — standard
        e-commerce practice: every nav link and mega menu on a payment
        page is a way to click away before finishing the purchase.
     2. A CSS Grid restructure of WooCommerce's own real, unmodified
        cart/checkout markup (confirmed against WooCommerce's bundled
        cart.php / cart-totals.php / form-checkout.php templates) that
        puts the totals + Place Order button in a sticky right-hand
        column instead of far below the form, so it's visible without
        scrolling on desktop. Below ~900px this collapses back to a
        single column (a sticky sidebar doesn't help on a phone-width
        screen, and forcing one would just add visual clutter).
   ========================================================= */
.site-header--minimal .site-header__bar--minimal {
  max-width: var(--container-max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 3vw, var(--space-8));
  padding-block: var(--space-3);
}
.checkout-trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-brass-deep);
}
.checkout-trust-badge svg { width: 18px; height: 18px; }
.footer-bottom--minimal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.checkout-flow { max-width: 1100px; padding-block: var(--space-6) var(--space-9); }
.checkout-flow__title { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.checkout-flow__trust-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.checkout-flow__trust-bar svg { width: 18px; height: 18px; color: var(--color-brass-deep); flex-shrink: 0; }

/* Cart page: [woocommerce_cart] outputs form.woocommerce-cart-form (the
   product table) and div.cart-collaterals (totals + checkout button) as
   direct sibling children of .checkout-flow — real WooCommerce structure,
   confirmed against cart.php. Grid puts totals beside the table instead of
   beneath it. */
@media (min-width: 900px) {
  .checkout-flow--cart { display: grid; grid-template-columns: 1fr 360px; align-items: start; gap: var(--space-7); }
  .checkout-flow--cart .checkout-flow__title,
  .checkout-flow--cart .checkout-flow__trust-bar { grid-column: 1 / -1; }
  .checkout-flow--cart .cart-collaterals { position: sticky; top: calc(72px + var(--space-5)); }
}
.cart-collaterals { margin-top: var(--space-6); }
@media (min-width: 900px) { .cart-collaterals { margin-top: 0; } }
.cart_totals {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.cart_totals h2 { font-size: var(--text-md); margin-bottom: var(--space-4); }
.wc-proceed-to-checkout a {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
}

/* Checkout page: form.woocommerce-checkout itself becomes the grid
   container — #customer_details, #order_review_heading and #order_review
   are its own direct children (confirmed against form-checkout.php), so
   Grid can place all three without touching WooCommerce's markup at all. */
@media (min-width: 900px) {
  .checkout-flow--checkout .woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 400px;
    column-gap: var(--space-7);
    align-items: start;
  }
  .checkout-flow--checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  .checkout-flow--checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .checkout-flow--checkout #order_review {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: sticky;
    top: calc(72px + var(--space-5));
  }
}
#order_review_heading { font-size: var(--text-md); }
#order_review, .woocommerce-checkout-review-order {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
#customer_details.col2-set { display: block; }
#customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; }
.checkout-flow input.input-text,
.checkout-flow select,
.checkout-flow textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  padding: var(--space-3);
}
#place_order {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   HOMEPAGE EDITORIAL ORIENTATION BLOCK (front-page.php)
   Three columns on desktop, stacked on mobile. Prose, not cards —
   this is editorial copy explaining the site's scope and method,
   deliberately not styled as a feature grid.
   ========================================================= */
/* The grid declarations live HERE, not in an inline style attribute on the
   div. They were inline at first, which meant `grid-template-columns: 1fr`
   beat the media query below at every viewport width — inline styles
   outrank any stylesheet rule regardless of media query — so the block
   could never become three columns and rendered as one narrow strip. */
.oi-editorial-intro {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .oi-editorial-intro { grid-template-columns: repeat(3, 1fr); }
}
.oi-editorial-intro h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
/* No max-width on these paragraphs: the grid column is already the measure,
   and a 60ch cap inside a ~30ch column just adds a second constraint that
   does nothing on desktop and nothing on mobile either. */
.oi-editorial-intro p { font-size: var(--text-sm); color: var(--color-ink-soft); max-width: none; }
.oi-editorial-intro p + p { margin-top: var(--space-3); }

/* =========================================================
   STRING SIZING CALCULATOR — [oi_string_sizer]
   Deliberately styled as an editorial tool rather than a form:
   this is part of the page's argument about sizing, not a
   conversion device, so it uses the parchment/walnut palette
   rather than anything that reads as a checkout step.
   ========================================================= */
.oi-sizer {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-6);
}
.oi-sizer__intro h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.oi-sizer__intro p { font-size: var(--text-sm); color: var(--color-ink-soft); max-width: 60ch; }

.oi-sizer__controls {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-5);
}
@media (min-width: 640px) {
  .oi-sizer__controls { grid-template-columns: 1.2fr 1fr 0.8fr; align-items: end; }
}
.oi-sizer__field { display: flex; flex-direction: column; gap: var(--space-1); }
.oi-sizer__field > span {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}
.oi-sizer__field select,
.oi-sizer__field input {
  font: inherit;
  font-size: var(--text-sm);
  padding: 0.6em 0.9em;
  border: 1.5px solid var(--color-line-deep);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink);
  width: 100%;
  box-sizing: border-box;
}
.oi-sizer__field select:focus-visible,
.oi-sizer__field input:focus-visible { border-color: var(--color-brass); }

.oi-sizer__result {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.oi-sizer__result[hidden] { display: none; }
.oi-sizer__result h4 { font-size: var(--text-lg); color: var(--color-ink); margin-bottom: var(--space-2); }
.oi-sizer__result p { font-size: var(--text-sm); color: var(--color-ink-soft); margin-bottom: var(--space-3); }
.oi-sizer__note {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.oi-sizer__caveat {
  background: var(--color-caution-bg);
  border-left: 4px solid var(--color-caution);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}
.oi-sizer__caveat strong { display: block; color: var(--color-caution); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.oi-sizer__caveat p { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.oi-sizer__caveat p:last-child { margin-bottom: 0; }
.oi-sizer__foot { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-4); }

/* =========================================================
   CARE-PRODUCT MODULE (How-To template)
   Rendered by class-oi-care-products.php, directly after the
   step list. Text and CSS only — no product images, because
   the only images available would be hotlinked from
   m.media-amazon.com, which is the unresolved Associates
   compliance item and would also cost the mobile PageSpeed
   score that the 2.45.x asset work just bought back.
   ========================================================= */
.care-kit__intro {
  font-size: var(--text-md);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

.care-kit__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: 0;
  list-style: none;
}

.care-kit__item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.care-kit__head { margin-bottom: var(--space-3); }

.care-kit__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0;
}

.care-kit__maker {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin: var(--space-1) 0 0;
}

.care-kit__item p {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-3);
}

.care-kit__because {
  border-left: 3px solid var(--color-brass);
  padding-left: var(--space-3);
}
.care-kit__because strong { color: var(--color-brass-deep); }

.care-kit__caveat { color: var(--color-ink-faint); }
.care-kit__caveat strong { color: var(--color-caution); }

.care-kit__sources {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}
.care-kit__sources > span { font-weight: 600; }
.care-kit__sources a { color: var(--color-jewel); }

.care-kit__cta { margin-bottom: 0; }

/* The "do not buy this" block. Visually distinct from the product
   cards on purpose — on the flute and double-bass pages it is the
   most valuable thing on the page, and it must not read as an ad. */
.care-kit__avoid {
  background: var(--color-caution-bg);
  border-left: 4px solid var(--color-caution);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.care-kit__avoid-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-caution);
  margin: 0 0 var(--space-1);
}
.care-kit__avoid-what {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}
.care-kit__avoid p {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-3);
}
.care-kit__avoid p:last-child { margin-bottom: 0; }

.care-kit__disclosure {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  line-height: var(--leading-normal);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
}
.care-kit__disclosure a { color: var(--color-jewel); }