/** Shopify CDN: Minification failed

Line 1274:2 Unexpected ","

**/
/* ==========================================================================
   TRANSITIONAL SPECIFICITY SHIM — every selector below is prefixed `html body`
   --------------------------------------------------------------------------
   The three pillar page bodies still contain their original inline <style>
   copy of this library. An inline <style> in the body comes AFTER this asset
   in document order, so at equal specificity the OLD rules win: an audit found
   70 selectors tying exactly, which meant the asset changed almost nothing.

   `html body` adds two element selectors, so these rules outrank the inline
   copy without needing it removed first.

   REMOVE THE PREFIX once the bodies are clean:
     1. add config/shopify-config.json (client_id / client_secret)
     2. node scripts/sync-pillar-css.js        # strips the inline <style>
     3. strip `html body ` from this file, re-push the asset
   ========================================================================== */

/* ==========================================================================
   NEF Pillar Page Component Library
   --------------------------------------------------------------------------
   Canonical source. The three pillar pages inline a copy of this file inside a
   <style> tag in their Shopify page body (Pages are rich text, so there is no
   theme asset hook available to them):

     /pages/tsw-symptom
     /pages/antiinflammatorisk-kost-eksem
     /pages/naturliga-alternativ-kortison-barn

   When you change this file you MUST re-inline it into all three page bodies,
   or they drift. `scripts/sync-pillar-css.js` does that.

   Conventions (see also themes/nateks-dev/README.md):
     - Barcelona sets html { font-size: 10px }, so 1rem = 10px. Every rem
       font-size here is the intended px value * 1.6.
     - Dark mode via html[data-scheme="dark"] — this tracks the on-page
       Light/Dark toggle. A prefers-color-scheme query would NOT.
     - Accent / positive / negative are pinned per scheme rather than derived
       from --color-button, which goes near-black in the dark scheme and kills
       contrast on small text.

   SPECIFICITY WARNING
     The page body renders inside `.rte`, and component-rte.css sets
       .rte li  { padding-left: 0.8rem; margin: 1.6rem 0; font-size: 1.8rem; }
       .rte ul  { padding-left: 2rem; margin: 0 0 1.6rem 2.4rem; }
     Those are specificity (0,1,1) — identical to a bare `.nef-x li`. Which one
     wins then depends purely on source order, which is fragile and was the
     cause of the collapsed checklist bug (text rendered under its own bullet).
     Every list rule below is therefore prefixed with `.rte` to reach (0,2,1)
     and win outright. Do not remove those prefixes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
/*
 * Design tokens live on :root, NOT on .nef-article.
 *
 * They used to be declared only inside the .nef-article rule below, which meant
 * they were scoped to that subtree. .nef-hero is a SIBLING — it renders inside
 * .rte, above .nef-layout, by design — so `var(--nef-radius)` resolved to
 * nothing there, `border-radius` became invalid and was dropped, and the hero
 * video rendered with square corners while every rounded component inside the
 * article looked correct. Verified in the browser: computed --nef-radius was
 * "1.2rem" on .nef-article and "" on .nef-hero.
 *
 * On :root every nef- component gets the tokens regardless of where it sits in
 * the page body, which matters because these guides are authored as HTML and
 * the markup nesting is not guaranteed.
 */
:root {
  --nef-radius: 1.2rem;
  --nef-radius-sm: 0.8rem;
}

html body .nef-article {
  /* Accent follows the THEME, not an invented green. --color-button is the
     theme's primary (dark blue); --color-foreground is black/grey/white
     depending on the active scheme. The old #4a7c59 appears nowhere in
     brand-assets/color-palette.md. */
  --nef-accent: rgb(var(--color-button));
  --nef-accent-strong: rgb(var(--color-button));
  --nef-accent-rgb: var(--color-button);
  --nef-link: rgb(var(--color-foreground));
  --nef-positive: #3d6a4a;
  --nef-positive-rgb: 74, 124, 89;
  --nef-negative: #b0483a;
  --nef-negative-rgb: 176, 72, 58;
  /* Warm tan used by the Johannas-tips card. Pinned per scheme like the
     others — see the note above. */
  --nef-warm: #c9a27a;
  /* The tan itself is decorative only. The attribution line uses this darker
     tone: at 14.4px/700 it is normal-size text for WCAG, so it needs 4.5:1 —
     the tan reads 4.31 on white and fails. This is 6.02. */
  --nef-warm-strong: #7f5c37;
  --nef-warm-rgb: 201, 162, 122;
  --nef-radius: 1.2rem;
  --nef-radius-sm: 0.8rem;

  max-width: 100%;
  line-height: 1.75;
  font-size: 1.68rem;
  color: rgb(var(--color-foreground));
}

html[data-scheme='dark'] body .nef-article {
  /* Dark scheme: --color-button goes near-black and would vanish, so accents
     fall back to the foreground (white/grey). */
  --nef-accent: rgb(var(--color-foreground));
  --nef-accent-strong: rgb(var(--color-foreground));
  --nef-accent-rgb: var(--color-foreground);
  --nef-link: rgb(var(--color-foreground));
  --nef-positive: #8fc4a0;
  --nef-positive-rgb: 143, 196, 160;
  --nef-negative: #e8907f;
  --nef-negative-rgb: 232, 144, 127;
  --nef-warm: #dcb88f;
  --nef-warm-strong: #e3c6a4;
  --nef-warm-rgb: 220, 184, 143;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
html body .nef-article h2 {
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  font-size: 2.56rem;
  font-weight: 700;
  color: rgb(var(--color-foreground-title));
  scroll-margin-top: calc(var(--header-height) + 2rem);
}
html body .nef-article h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.92rem;
  font-weight: 600;
  color: rgb(var(--color-foreground-title));
}
html body .nef-article p { margin: 0 0 1em; }
html body .rte .nef-article ul,
html body .rte .nef-article ol { margin: 0 0 1.25em; padding-left: 1.5em; }
html body .rte .nef-article li { margin: 0.4em 0; padding-left: 0; }
html body .nef-article a {
  color: var(--nef-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html body .nef-article a:hover { color: var(--nef-link); text-decoration-thickness: 0.2rem; }

/* --------------------------------------------------------------------------
   Direct answer block
   -------------------------------------------------------------------------- */
html body .rte .nef-answer {
  background: rgb(var(--color-background-secondary));
  border-left: 0.4rem solid var(--nef-accent);
  padding: 1.25em 1.5em;
  border-radius: 0 var(--nef-radius-sm) var(--nef-radius-sm) 0;
  margin: 0 0 1.5em;
  font-size: 1.68rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Table of contents — inline (mobile) + sidebar (desktop)
   -------------------------------------------------------------------------- */
html body .rte .nef-toc-inline {
  background: rgb(var(--color-background-secondary));
  border-radius: var(--nef-radius-sm);
  margin: 0 0 2em;
  border: 0.1rem solid rgba(var(--color-border), 1);
}

@media screen and (min-width: 1200px) { html body .nef-toc-inline { display: none; } }
html body .nef-toc-inline summary {
  padding: 0.875em 1.25em;
  font-weight: 600;
  font-size: 1.52rem;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html body .nef-toc-inline summary::-webkit-details-marker { display: none; }
html body .nef-toc-inline summary::after {
  content: '';
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
html body .nef-toc-inline[open] summary::after { transform: rotate(180deg); }
html body .rte .nef-toc-inline ol { margin: 0; padding: 0 1.25em 1em 2.5em; font-size: 1.472rem; }
html body .rte .nef-toc-inline li { margin: 0.25em 0; padding-left: 0; line-height: 1.5; }
html body .nef-toc-inline a { color: var(--nef-accent); text-decoration: none; }
html body .nef-toc-inline a:hover { text-decoration: underline; }

html body .nef-layout {
  display: grid;
  /* minmax(0, …) lets the column shrink below its content (e.g. the 52rem compare table),
     so only .nef-compare scrolls on phones instead of the whole page. Plain 1fr cannot. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--main-padding);
  align-items: flex-start;
}
@media screen and (min-width: 1200px)  {
  html body .nef-layout { grid-template-columns: minmax(0, 0.68fr) minmax(0, 0.32fr); }
}

html body .nef-toc-sidebar { display: none; }
@media screen and (min-width: 1200px)  {
  html body .nef-toc-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    background: rgb(var(--color-background-secondary));
    border-radius: var(--nef-radius);
    padding: 2.4rem;
  }
}
html body .nef-toc-sidebar h3 {
  margin: 0 0 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(var(--color-foreground-title));
}
html body .rte .nef-toc-sidebar ol { margin: 0; padding: 0; list-style: none; }

/*
 * Single continuous track, drawn once on the <ol>. The previous version put a
 * border-left on every <li> AND another on every <a> (offset by -0.2rem), which
 * rendered as two parallel lines on the active item whenever the negative
 * margin did not land exactly on the li border. The indicator is now an
 * absolutely positioned overlay on the link, so there is only ever one line.
 */
html body .rte .nef-toc-sidebar ol { position: relative; padding-left: 0.2rem; }
html body .rte .nef-toc-sidebar ol::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.2rem;
  background: rgba(var(--color-border), 1);
  border-radius: 0.2rem;
}
html body .rte .nef-toc-sidebar li { margin: 0; padding-left: 0; border-left: none; }
/*
 * `border-left: none` is a defensive override, not dead code. Until every page
 * body has had its stale inline <style> stripped by scripts/sync-pillar-css.js,
 * the old rule `.nef-toc-sidebar a { border-left: .2rem solid transparent }`
 * (0,1,1) is still in the document. This selector is (0,2,1) so it wins from
 * the <head> regardless of source order — which is what produced the doubled
 * line in the first place.
 */
html body .rte .nef-toc-sidebar a {
  position: relative;
  display: block;
  border-left: none;
  margin-left: 0;
  padding: 0.7rem 0 0.7rem 1.2rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: rgba(var(--color-foreground), 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
html body .nef-toc-sidebar a::before {
  content: '';
  position: absolute;
  left: -0.2rem;
  top: 0;
  bottom: 0;
  width: 0.2rem;
  border-radius: 0.2rem;
  background: transparent;
  transition: background-color 0.15s ease;
}
html body .nef-toc-sidebar a:hover { color: rgb(var(--color-foreground)); }
html body .nef-toc-sidebar a.is-active { color: var(--nef-accent); font-weight: 600; }
html body .nef-toc-sidebar a.is-active::before { background: var(--nef-accent); }

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */
html body .rte .nef-callout,
html body .rte .nef-warning {
  background: rgb(var(--color-background-secondary));
  border-left: 0.4rem solid var(--nef-accent);
  border-radius: 0 var(--nef-radius-sm) var(--nef-radius-sm) 0;
  padding: 1em 1.25em;
  margin: 1.5em 0;
}
html body .rte .nef-warning { border-left-color: var(--nef-negative); }

/* --------------------------------------------------------------------------
   Johannas tips
   --------------------------------------------------------------------------
   `.nef-tip` is ALWAYS Johanna speaking. Confirmed as a rule, not a default:
   it is the on-page form of the "Johannas Tips" module in the brand system, so
   it always carries her portrait and name. Generic, unattributed asides belong
   in `.nef-callout` — never use `.nef-tip` for them.

   The markup is fixed and cannot be changed from CSS:

     <div class="nef-tip"><strong>Johannas tips:</strong> …prose… </div>

   The prose is a bare text node, not an element, so it cannot be targeted or
   placed. That rules out grid/flex layout here (a text node would become an
   untargetable anonymous item). Instead the portrait is absolutely positioned
   and the card reserves space for it with padding — robust regardless of how
   the text node flows.
   -------------------------------------------------------------------------- */
html body .rte .nef-tip {
  position: relative;
  /* `border` shorthand deliberately replaces the old 0.4rem left rule. */
  border: 0.1rem solid rgba(var(--nef-warm-rgb), 0.3);
  border-radius: var(--nef-radius);
  background: rgba(var(--nef-warm-rgb), 0.07);
  margin: 2.5em 0;
  padding: 2.2rem 2.4rem 2.2rem calc(6.4rem + 3.6rem);
  line-height: 1.7;
}

/* Portrait. Cropped to 50% 20% because the source is a 320x480 full-body
   shot — centring it would frame her torso rather than her face. */
html body .nef-tip::before {
  content: '';
  position: absolute;
  left: 2.4rem;
  top: 2.2rem;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background-image: url("/cdn/shop/files/naturligt-eksemfri_480x480.jpg?v=1725218261");
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0 0.4rem rgba(var(--nef-warm-rgb), 0.45);
}

/* "Johannas tips:" becomes the attribution line above her words. */
html body .nef-tip strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--nef-warm-strong);
  font-size: 1.44rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  html body .rte .nef-tip {
    padding: 2rem 1.8rem 1.8rem;
  }
  /* Stack on narrow screens: portrait sits above the attribution line rather
     than squeezing the measure down to a few words per line. */
  html body .nef-tip::before {
    position: static;
    display: block;
    width: 5.2rem;
    height: 5.2rem;
    margin: 0 0 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
html body .rte .nef-timeline {
  margin: 2em 0;
  padding: 0 0 0 2.4rem;
  border-left: 0.2rem solid rgba(var(--color-border), 1);
  list-style: none;
}
html body .rte .nef-timeline li { position: relative; margin: 0 0 2em; padding-left: 0; }
html body .rte .nef-timeline li:last-child { margin-bottom: 0; }
html body .nef-timeline li::before {
  content: '';
  position: absolute;
  left: -3.1rem;
  top: 0.5rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--nef-accent);
  border: 0.3rem solid rgb(var(--color-background));
}
html body .nef-timeline__phase {
  display: block;
  font-size: 1.28rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nef-accent);
  margin: 0 0 0.3em;
}
html body .nef-timeline__title {
  display: block;
  font-size: 1.76rem;
  font-weight: 600;
  color: rgb(var(--color-foreground-title));
  margin: 0 0 0.4em;
}
html body .nef-timeline p { margin: 0 0 0.5em; }

/* --------------------------------------------------------------------------
   Comparison table
   --------------------------------------------------------------------------
   Editorial, not spreadsheet. No outer box, no vertical rules, no filled
   header band — the header is separated by a single accent-weight rule and the
   rows by hairlines, with generous vertical rhythm. The row-header column
   carries the emphasis instead of a background fill.
   -------------------------------------------------------------------------- */
html body .rte .nef-compare {
  margin: 2.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Explicit resets: the stale inline copy draws a box around the table and
     rounds it. You cannot override a property you do not declare. */
  border: none;
  border-radius: 0;
}
html body .nef-compare table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: 1.52rem;
}
html body .nef-compare caption {
  caption-side: top;
  text-align: left;
  font-size: 1.44rem;
  color: rgba(var(--color-foreground), 0.7);
  padding: 0 0 1.2rem;
}
html body .nef-compare th,
html body .nef-compare td {
  padding: 1.6rem 2rem 1.6rem 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
  border: none;
}
html body .nef-compare th:last-child,
html body .nef-compare td:last-child { padding-right: 0; }

html body .nef-compare thead th {
  /* Reset: the stale inline copy fills the header band. */
  background: none;
  padding-bottom: 1.2rem;
  font-size: 1.28rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(var(--color-foreground), 0.65);
  border-bottom: 0.2rem solid rgba(var(--nef-accent-rgb), 0.45);
}
/* The empty top-left corner cell should read as blank, not as a column head. */
html body .nef-compare thead th:first-child { color: transparent; }

html body .nef-compare tbody th {
  font-weight: 600;
  color: rgb(var(--color-foreground-title));
  width: 22%;
  padding-right: 2.4rem;
}
html body .nef-compare tbody td { color: rgba(var(--color-foreground), 0.85); }
html body .nef-compare tbody tr + tr th,
html body .nef-compare tbody tr + tr td {
  border-top: 0.1rem solid rgba(var(--color-border), 1);
}

@media (max-width: 640px)  {
  html body .nef-compare th,
html body .nef-compare td { padding: 1.3rem 1.4rem 1.3rem 0; }
  html body .nef-compare tbody th { width: auto; white-space: normal; }
}

/* --------------------------------------------------------------------------
   Checklist
   --------------------------------------------------------------------------
   Was an empty square outline, which read as an unticked checkbox and — with
   the padding-left losing to .rte li — sat on top of its own text. Now a green
   check glyph, matching the konsultation "passar för" list.
   -------------------------------------------------------------------------- */
html body .rte .nef-check {
  margin: 2em 0;
  padding: 1.5em 1.75em;
  background: rgb(var(--color-background-secondary));
  border: 0.1rem solid rgba(var(--color-border), 1);
  border-radius: var(--nef-radius);
}
html body .nef-check h3 {
  margin: 0 0 0.9em;
  font-size: 1.76rem;
  font-weight: 700;
  color: rgb(var(--color-foreground-title));
}
html body .rte .nef-check ul { margin: 0; padding: 0; list-style: none; }
html body .rte .nef-check li {
  position: relative;
  margin: 0 0 0.85em;
  padding-left: 3rem;
  line-height: 1.6;
}
html body .rte .nef-check li:last-child { margin-bottom: 0; }
html body .nef-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--nef-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html body .nef-check p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Passar / passar inte
   --------------------------------------------------------------------------
   Mirrors .konsult-for-whom__card: tinted fill + matching border + 4px top
   rule + coloured card title + check / x glyph per item. Kept visually
   identical so the pattern reads the same on the konsultation page and here.
   -------------------------------------------------------------------------- */
html body .rte .nef-fits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2.5em 0;
}
@media screen and (min-width: 700px)  {
  html body .nef-fits { grid-template-columns: 1fr 1fr; }
}
html body .nef-fits__col {
  position: relative;
  padding: 3.2rem 2.8rem 2.8rem;
  border-radius: 1.6rem;
  overflow: hidden;
  background: rgba(var(--nef-positive-rgb), 0.07);
  border: 0.1rem solid rgba(var(--nef-positive-rgb), 0.28);
}
html body .nef-fits__col::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--nef-positive);
}
html body .nef-fits__col--not {
  background: rgba(var(--nef-negative-rgb), 0.06);
  border-color: rgba(var(--nef-negative-rgb), 0.24);
}
html body .nef-fits__col--not::before { background: var(--nef-negative); }

html body .nef-fits__col h4 {
  margin: 0 0 2rem;
  font-family: var(--font-heading-family, serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--nef-positive);
}
html body .nef-fits__col--not h4 { color: var(--nef-negative); }

html body .rte .nef-fits__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.2rem; }
html body .rte .nef-fits__col li {
  position: relative;
  margin: 0;
  padding-left: 2.8rem;
  font-size: 1.6rem;
  line-height: 1.55;
}
html body .nef-fits__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--nef-positive);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html body .nef-fits__col--not li::before {
  background-color: var(--nef-negative);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Collection bridges
   --------------------------------------------------------------------------
   The CTA was a bare text link and disappeared into the card. It is now a
   filled button — this is the page's revenue bridge, so it should read as the
   most clickable thing in the card.
   -------------------------------------------------------------------------- */
html body .rte .nef-bridge {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin: 2.5em 0;
}
@media screen and (min-width: 700px)  {
  html body .nef-bridge { grid-template-columns: repeat(3, 1fr); }
}
html body .nef-bridge__card {
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  background: rgb(var(--color-background-secondary));
  border: 0.1rem solid rgba(var(--color-border), 1);
  border-radius: var(--nef-radius);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
html body .nef-bridge__card:hover {
  border-color: rgba(var(--nef-accent-rgb), 0.5);
  transform: translateY(-2px);
}
html body .nef-bridge__card h4 {
  margin: 0 0 0.5em;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(var(--color-foreground-title));
}
html body .nef-bridge__card p {
  margin: 0 0 1.6rem;
  font-size: 1.52rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.8);
  flex-grow: 1;
}
/* `.rte` prefix for the same reason as the quiz button — see note there. */
html body .rte .nef-bridge__card a {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text, 255, 255, 255));
  font-size: 1.52rem;
  font-weight: 600;
  padding: 1.2rem 2rem;
  border-radius: var(--nef-radius-sm);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
html body .nef-bridge__card a::after {
  content: '';
  width: 1.4rem;
  height: 1.4rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.15s ease;
}
html body .rte .nef-bridge__card a:hover {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text, 255, 255, 255));
  opacity: 0.9;
  text-decoration: none;
}
html body .nef-bridge__card a:hover::after { transform: translateX(3px); }



/* --------------------------------------------------------------------------
   Related links
   -------------------------------------------------------------------------- */
html body .rte .nef-related {
  margin: 3em 0 2em;
  padding: 1.75em;
  background: rgb(var(--color-background-secondary));
  border-radius: var(--nef-radius);
}
html body .nef-related h3 {
  margin: 0 0 0.75em;
  font-size: 1.76rem;
  font-weight: 700;
  color: rgb(var(--color-foreground-title));
}
html body .rte .nef-related ul { margin: 0; padding-left: 1.5em; }
html body .rte .nef-related li { margin: 0.4em 0; padding-left: 0; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */
html body .rte .nef-sources {
  margin: 2.5em 0;
  border: 0.1rem solid rgba(var(--color-border), 1);
  border-radius: var(--nef-radius-sm);
  overflow: hidden;
}
html body .nef-sources summary {
  padding: 1.2em 1.4em;
  font-size: 1.68rem;
  font-weight: 600;
  color: rgb(var(--color-foreground-title));
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(var(--color-background-secondary));
}
html body .nef-sources summary::-webkit-details-marker { display: none; }
html body .nef-sources summary::after {
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  margin-left: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}
html body .nef-sources[open] summary::after { transform: rotate(180deg); }
html body .nef-sources__content { padding: 1.4em; }
html body .rte .nef-sources ol { margin: 0; padding-left: 2.4rem; }
html body .rte .nef-sources li {
  margin: 0 0 0.7em;
  padding-left: 0;
  font-size: 1.52rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.85);
}
html body .nef-sources__note {
  margin: 1.2em 0 0;
  padding-top: 1em;
  border-top: 0.1rem solid rgba(var(--color-border), 1);
  font-size: 1.44rem;
  color: rgba(var(--color-foreground), 0.75);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
html body .rte .faq-section { margin: 3em 0; padding: 0; }
html body .faq-section > h2 {
  margin: 0 0 1rem;
  padding: 0 0 0.75rem;
  border-bottom: 0.2rem solid rgba(var(--color-border), 1);
}
html body .faq-section details { margin: 0; border-bottom: 0.1rem solid rgba(var(--color-border), 1); }
html body .faq-section details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 0;
  font-size: 2rem; /* same as article body (.rte p) */
  font-weight: 600;
  color: rgb(var(--color-foreground-title));
  cursor: pointer;
  list-style: none;
}
html body .faq-section details summary::-webkit-details-marker { display: none; }
html body .faq-section details summary::after {
  content: '';
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  margin-left: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}
html body .faq-section details[open] summary::after { transform: rotate(180deg); }
html body .faq-section .faq-answer {
  padding: 0 0 2rem;
  line-height: 1.7;
  font-size: 2rem; /* same as article body (.rte p) */
  color: rgba(var(--color-foreground), 0.85);
}
html body .rte .faq-section .faq-answer p,
html body .rte .faq-section .faq-answer li { font-size: 2rem; }

/* --------------------------------------------------------------------------
   Quiz CTA
   --------------------------------------------------------------------------
   Reuses the sitewide quiz-push-banner pattern (icon + copy + button on one
   row, stacking on mobile) rather than the bespoke centred badge block, so the
   quiz reads the same wherever it appears. Colours come from theme vars so it
   survives the dark toggle, which the original banner's hardcoded #F5F1EB
   does not.
   -------------------------------------------------------------------------- */
html body .rte .nef-quiz-cta {
  background: rgb(var(--color-background-secondary));
  border: 0.1rem solid rgba(var(--color-border), 1);
  border-radius: var(--nef-radius);
  padding: 2.4rem 2.8rem;
  margin: 2.5em 0;
}
html body .nef-quiz-cta__container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/*
 * Legacy markup support. The original block had no wrapper element —
 * badge / h3 / p / a were direct children of .nef-quiz-cta:
 *
 *   <div class="nef-quiz-cta">
 *     <span class="nef-quiz-cta__badge">Personligt resultat</span>
 *     <h3>…</h3> <p>…</p> <a class="nef-quiz-cta__btn">…</a>
 *   </div>
 *
 * Grid with explicit placement reproduces the same three-column layout without
 * needing that wrapper, so the component looks correct on pages whose body has
 * not yet been migrated. The badge is repurposed as the icon tile: its text is
 * hidden and replaced by the clipboard glyph. Once every page is migrated this
 * whole block can go.
 */
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.4rem;
  text-align: left;
}
html body .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) .nef-quiz-cta__badge {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
  padding: 0;
  border-radius: var(--nef-radius);
  background: rgba(var(--nef-accent-rgb), 0.12);
  color: transparent;
  font-size: 0;
  letter-spacing: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) .nef-quiz-cta__badge::before {
  content: '';
  width: 2.8rem;
  height: 2.8rem;
  background-color: var(--nef-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.76rem;
  font-weight: 600;
  line-height: 1.3;
}
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: none;
  font-size: 1.52rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.75);
}
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) .nef-quiz-cta__btn {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}
@media (max-width: 640px)  {
  html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 1.2rem;
  }
  html body .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) .nef-quiz-cta__badge,
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) h3,
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) p,
html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) .nef-quiz-cta__btn {
    grid-column: 1;
    grid-row: auto;
  }
  html body .rte .nef-quiz-cta:not(:has(.nef-quiz-cta__container)) .nef-quiz-cta__btn {
    width: 100%;
    justify-content: center;
  }
}
html body .nef-quiz-cta__icon {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: var(--nef-radius);
  background: rgba(var(--nef-accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .nef-quiz-cta__icon::before {
  content: '';
  width: 2.8rem;
  height: 2.8rem;
  background-color: var(--nef-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html body .nef-quiz-cta__content { flex: 1; }
html body .nef-quiz-cta__content h3 {
  margin: 0 0 0.4rem;
  font-size: 1.76rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--color-foreground-title));
}
html body .nef-quiz-cta__content p {
  margin: 0;
  font-size: 1.52rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.75);
}
/*
 * `.rte` prefix is load-bearing: `.nef-article a` is (0,1,1) and would
 * otherwise out-specify a lone `.nef-quiz-cta__btn` (0,1,0), painting the
 * button label accent-green on an accent-green fill.
 */
html body .rte .nef-quiz-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text, 255, 255, 255));
  padding: 1.2rem 2.4rem;
  border-radius: var(--nef-radius-sm);
  font-size: 1.52rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
html body .rte .nef-quiz-cta__btn:hover {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text, 255, 255, 255));
  opacity: 0.9;
  text-decoration: none;
}


@media (max-width: 640px)  {
  html body .nef-quiz-cta__container { flex-direction: column; text-align: center; }
  html body .nef-quiz-cta__btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   E-E-A-T byline
   --------------------------------------------------------------------------
   Author, review date and medical-review status directly under the H1. These
   are the YMYL trust signals Google looks for, and the same ones the
   trust-page section surfaces.
   -------------------------------------------------------------------------- */
html body .rte .nef-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 2rem;
  margin: 0 0 2em;
  padding: 1.6rem 0;
  border-top: 0.1rem solid rgba(var(--color-border), 1);
  border-bottom: 0.1rem solid rgba(var(--color-border), 1);
  font-size: 1.44rem;
  color: rgba(var(--color-foreground), 0.75);
}
html body .nef-meta__item { display: inline-flex; align-items: center; gap: 0.7rem; }
html body .nef-meta__item strong { color: rgb(var(--color-foreground-title)); font-weight: 600; }
html body .nef-meta__item::before {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-color: var(--nef-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
html body .nef-meta__item--author::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
html body .nef-meta__item--updated::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
html body .nef-meta__item--read::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
}
html body .nef-meta__item--sources::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Inline figures
   -------------------------------------------------------------------------- */
html body .rte .nef-figure { margin: 2.5em 0; }
html body .nef-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nef-radius);
}
html body .nef-figure figcaption {
  margin: 1.2rem 0 0;
  font-size: 1.36rem;
  line-height: 1.55;
  color: rgba(var(--color-foreground), 0.65);
}

/* --------------------------------------------------------------------------
   Medical disclaimer
   -------------------------------------------------------------------------- */
html body .rte .medical-disclaimer {
  margin: 4rem 0 1.6rem;
  padding: 2.4rem;
  background: rgb(var(--color-background-secondary));
  border: 0.1rem solid rgba(var(--color-border), 1);
  border-left: 0.4rem solid #3b82f6;
  border-radius: 0 var(--nef-radius-sm) var(--nef-radius-sm) 0;
}
html body .medical-disclaimer h4 {
  margin: 0 0 1.2rem;
  font-size: 1.68rem;
  font-weight: 700;
  color: rgb(var(--color-foreground-title));
}
html body .medical-disclaimer p {
  margin: 0 0 1.2rem;
  /* Smaller than the 1.68rem h4 so the heading reads as the heading — without
     this it inherits .nef-article's 1.68rem and the two look the same weight. */
  font-size: 1.44rem;
  line-height: 1.7;
  color: rgba(var(--color-foreground), 0.85);
}
html body .medical-disclaimer p:last-child { margin-bottom: 0; }
html body .rte .medical-disclaimer ul { margin: 0.8rem 0 1.2rem; padding-left: 2.4rem; }
html body .rte .medical-disclaimer li { margin: 0.3em 0; padding-left: 0; font-size: 1.44rem; line-height: 1.7; color: rgba(var(--color-foreground), 0.85); }
html body .medical-disclaimer strong { color: rgb(var(--color-foreground-title)); }

/* --------------------------------------------------------------------------
   Hero (video)
   --------------------------------------------------------------------------
   Full-bleed video banner with an overlay caption, sitting above .nef-layout.
   Introduced by eksem-hos-barn, which used it unstyled — this page loaded no
   pillar CSS at all until it was added to the theme's handle list, so this
   and .nef-age-tabs below rendered as bare markup with no rules to draw them.
   -------------------------------------------------------------------------- */
html body .nef-hero {
  position: relative;
  width: 100%;
  height: 42rem;
  max-height: 60vh;
  overflow: hidden;
  border-radius: var(--nef-radius);
  margin: 0 0 3rem;
}
html body .nef-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html body .nef-hero__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.2rem 2.4rem 2.4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}
html body .nef-hero__overlay p {
  margin: 0;
  color: #fff;
  font-size: 1.92rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 60rem;
}
@media (max-width: 640px) {
  html body .nef-hero { height: 28rem; border-radius: var(--nef-radius-sm); }
  html body .nef-hero__overlay p { font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   Age tabs
   --------------------------------------------------------------------------
   A segmented control switching between age-specific panels. JS (shipped in
   the page body, not this asset — it is page-specific behaviour) toggles
   .is-active; the CSS below only needs to style both states, not drive them.
   -------------------------------------------------------------------------- */
html body .nef-age-tabs { margin: 2rem 0 2.5em; }
html body .nef-age-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 2rem;
  border-bottom: 0.1rem solid rgba(var(--color-border), 1);
  padding-bottom: 1.6rem;
}
html body .nef-age-tabs__btn {
  padding: 0.9rem 1.8rem;
  border: 0.1rem solid rgba(var(--color-border), 1);
  border-radius: 100px;
  background: rgb(var(--color-background-secondary));
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.44rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
html body .nef-age-tabs__btn:hover {
  border-color: rgb(var(--color-button));
  color: rgb(var(--color-foreground));
}
html body .nef-age-tabs__btn.is-active {
  background: rgb(var(--color-button));
  border-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text, 255, 255, 255));
}
html body .nef-age-tabs__panel { display: none; }
html body .nef-age-tabs__panel.is-active {
  display: block;
  /* No-JS / print / crawler fallback: with no click ever firing, every panel
     still needs to be reachable content rather than permanently display:none.
     .is-active is applied server-side to the first panel in the markup, so
     this only matters for a user with JS disabled clicking an inert button —
     acceptable given the page still reads correctly top to bottom. */
}
html body .rte .nef-age-tabs__panel p { margin: 0 0 1em; }
@media (max-width: 640px) {
  html body .nef-age-tabs__nav { gap: 0.6rem; }
  html body .nef-age-tabs__btn { padding: 0.8rem 1.4rem; font-size: 1.36rem; }
}

/* --------------------------------------------------------------------------
   Medical disclaimer modifier: child content
   --------------------------------------------------------------------------
   Same component, distinguished with a softer accent so a parent-facing
   disclaimer reads slightly differently from the standard adult one, without
   introducing a second color.
   -------------------------------------------------------------------------- */
html body .medical-disclaimer--child {
  border-left-color: var(--nef-warm);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 640px)  {
  html body .nef-article h2 { font-size: 2.16rem; }
  html body .rte .nef-check { padding: 1.25em; }
  html body .rte .nef-related { padding: 1.25em; }
  html body .rte .nef-quiz-cta { padding: 2rem 1.6rem; }
  html body .nef-fits__col { padding: 2.8rem 2rem 2.4rem; }
}


/* ==========================================================================
   Article Deep — scoped overrides
   ==========================================================================
   Guides moved onto templates/page.article-deep.json render inside
   .article-deep-section (the section's schema `class`). Nothing below changes
   the design; it re-states the rounding at a specificity the stale inline
   copies cannot reach.

   WHY THIS IS NEEDED
     These pages used to carry a ~31KB copy of this file in a <style> tag in
     the Shopify page body. That copy uses the same `html body .nef-…`
     qualifiers as this asset, so it matches at EQUAL specificity — and being
     later in document order, it wins. Anything added to this file after a copy
     was taken therefore does not reach the page, which is why the hero and the
     table of contents still render square-cornered while the rules above round
     them.

     scripts/sync-pillar-css.js strips those blocks and is the actual fix.
     Until it has been run against every guide, the extra class here raises
     specificity from (0,1,2) to (0,2,2) and the rounding lands regardless.

     Delete this block once no page body contains an inline <style> copy.
   ========================================================================== */
html body .article-deep-section .nef-hero {
  border-radius: var(--nef-radius);
  overflow: hidden;
}

html body .rte .article-deep-section .nef-toc-inline,
html body .article-deep-section .rte .nef-toc-inline {
  border-radius: var(--nef-radius-sm);
  overflow: hidden;
}

html body .article-deep-section .nef-toc-sidebar {
  border-radius: var(--nef-radius);
}

html body .article-deep-section .nef-figure img {
  border-radius: var(--nef-radius);
}

/* Any other media dropped into a guide body — an <img>, <video> or embedded
   <iframe> written straight into the page HTML rather than through a figure —
   picks up the same rounding, so a new guide does not have to know the class
   names to look right. */
html body .article-deep-section .rte > img,
html body .article-deep-section .rte > p > img,
html body .article-deep-section .rte > video,
html body .article-deep-section .rte > iframe {
  border-radius: var(--nef-radius);
}

@media (max-width: 640px) {
  html body .article-deep-section .nef-hero {
    border-radius: var(--nef-radius-sm);
  }
}


/* ==========================================================================
   Dark scheme, "auto" setting
   ==========================================================================
   Barcelona's scheme attribute has THREE states: light, dark and auto, and
   auto is the DEFAULT — the live storefront renders with data-scheme="auto".
   The rules above match only [data-scheme='dark'], the explicit toggle, so
   under the default setting with an OS dark preference the page background
   went dark (base.css handles that) while every surface defined in this file
   stayed on its LIGHT values. Measured on the bildgalleri: page background
   rgb(31,31,31), filter panel #faf5f2.

   assets/base.css already pairs each [data-scheme=dark] rule with a
   [data-scheme=auto] copy inside a prefers-color-scheme query. These are the
   missing halves: identical declarations, no new values.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  , so 1rem = 10px. Every rem
       font-size here is the intended px value * 1.6.
     - Dark mode via html[data-scheme='auto'] — this tracks the on-page
       Light/Dark toggle. A prefers-color-scheme query would NOT.
     - Accent / positive / negative are pinned per scheme rather than derived
       from --color-button, which goes near-black in the dark scheme and kills
       contrast on small text.

   SPECIFICITY WARNING
     The page body renders inside `.rte`, and component-rte.css sets
       .rte li { padding-left: 0.8rem; margin: 1.6rem 0; font-size: 1.8rem; }
  html[data-scheme='auto'] body .nef-article {
  /* Dark scheme: --color-button goes near-black and would vanish, so accents
     fall back to the foreground (white/grey). */
  --nef-accent: rgb(var(--color-foreground));
  --nef-accent-strong: rgb(var(--color-foreground));
  --nef-accent-rgb: var(--color-foreground);
  --nef-link: rgb(var(--color-foreground));
  --nef-positive: #8fc4a0;
  --nef-positive-rgb: 143, 196, 160;
  --nef-negative: #e8907f;
  --nef-negative-rgb: 232, 144, 127;
  --nef-warm: #dcb88f;
  --nef-warm-strong: #e3c6a4;
  --nef-warm-rgb: 220, 184, 143;
}
}