/* Skydetid — runtime styling. Tokens fra theme.json (var(--wp--preset--…)). Teknisk/maskulint, palette A. */

:root{
  --sd-sans: var(--wp--preset--font-family--sans, "IBM Plex Sans", system-ui, sans-serif);
  --sd-cond: var(--wp--preset--font-family--cond, "IBM Plex Sans Condensed", sans-serif);
  --sd-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
  --sd-base: var(--wp--preset--color--base, #F5F2ED);
  --sd-surface: var(--wp--preset--color--surface, #FFFFFF);
  --sd-subtle: var(--wp--preset--color--subtle, #EDE9E2);
  --sd-line: var(--wp--preset--color--line, #DED8CE);
  --sd-ink: var(--wp--preset--color--ink, #1A1C1A);
  --sd-ink-soft: var(--wp--preset--color--ink-soft, #5A5F57);
  --sd-accent: var(--wp--preset--color--accent, #274A2B);
  --sd-accent-ink: var(--wp--preset--color--accent-ink, #FCFDFB);
  --sd-gunmetal: var(--wp--preset--color--gunmetal, #1F2421);
  --sd-steel: var(--wp--preset--color--steel, #8A9299);
  --sd-shadow: 0 1px 2px rgba(20,24,20,.05), 0 14px 34px -20px rgba(20,24,20,.30);
}

/* ---- base ---------------------------------------------------------------- */
body{ background:var(--sd-base); color:var(--sd-ink); font-family:var(--sd-sans); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--sd-cond); font-weight:700; letter-spacing:-0.02em; line-height:1.08; }
.site-main{ padding-block:var(--wp--preset--spacing--60, 2.25rem) var(--wp--preset--spacing--70, 3.25rem); }

/* sprite-ikoner: neutral boks, arver ikke farve (v2 er baked duotone) */
.ic{ width:20px; height:20px; display:inline-block; flex:0 0 auto; vertical-align:middle; }

/* ---- top-strip ----------------------------------------------------------- */
.topstrip{ background:var(--sd-gunmetal); color:#D7DBD5; font-family:var(--sd-mono); font-size:11.5px; letter-spacing:.06em; }
.tswrap{ max-width:1140px; margin:0 auto; padding:0 24px; height:30px; display:flex; align-items:center; gap:18px; }
.topstrip b{ color:#fff; font-weight:500; } .topstrip .sep{ color:#57605A; }
@media(max-width:640px){ .topstrip .sep, .topstrip span:nth-child(n+3){ display:none; } }

/* ---- header -------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--sd-base) 85%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--sd-line); transition:transform .25s ease; }
.site-header[data-hidden="true"]{ transform:translateY(-100%); }
.shwrap{ max-width:1140px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; gap:26px; }
.brand{ display:flex; align-items:center; }
.brand-logo{ height:38px; width:auto; display:block; }
.mainnav{ display:flex; gap:20px; margin-left:6px; font-size:14.5px; font-weight:500; }
.mainnav a{ padding:6px 0; color:var(--sd-ink-soft); border-bottom:2px solid transparent; text-decoration:none; }
.mainnav a:hover{ color:var(--sd-ink); border-color:var(--sd-accent); }
.searchbtn{ margin-left:auto; display:flex; align-items:center; gap:9px; height:40px; padding:0 14px; border:1px solid var(--sd-line); border-radius:9px; background:var(--sd-surface); color:var(--sd-ink-soft); font-family:var(--sd-mono); font-size:12.5px; letter-spacing:.04em; cursor:pointer; }
.searchbtn .ic{ width:18px; height:18px; }
.searchbtn kbd{ border:1px solid var(--sd-line); border-radius:5px; padding:1px 6px; font-family:var(--sd-mono); font-size:11px; }

/* ---- mobile bottom tab-bar ---------------------------------------------- */
.mobile-tabbar{ display:none; }
@media(max-width:820px){
  .mainnav{ display:none; }
  .searchbtn span, .searchbtn kbd{ display:none; }
  .mobile-tabbar{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40; background:var(--sd-surface); border-top:1px solid var(--sd-line); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -6px 24px -16px rgba(20,24,20,.4); }
  .mobile-tabbar .tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px; background:none; border:0; color:var(--sd-ink-soft); font-family:var(--sd-mono); font-size:10px; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
  .mobile-tabbar .tab .ic{ width:22px; height:22px; }
  .mobile-tabbar .tab.is-active{ color:var(--sd-accent); }
  body{ padding-bottom:64px; }
}

/* ---- post grid (index/archive) ------------------------------------------ */
.post-grid .wp-block-post-template{ gap:18px; }
.post-grid li{ background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:12px; overflow:hidden; box-shadow:var(--sd-shadow); }
.post-grid .wp-block-post-featured-image{ margin:0; border-bottom:1px solid var(--sd-line); }
.post-grid .wp-block-post-title{ margin:14px 18px 6px; }
.post-grid .wp-block-post-title a{ text-decoration:none; }
.post-grid .wp-block-post-excerpt{ margin:0 18px 18px; color:var(--sd-ink-soft); font-size:14px; }

/* ---- footer -------------------------------------------------------------- */
.site-footer{ margin-top:40px; background:var(--sd-gunmetal); color:#C9CEC7; }
.fwrap{ max-width:1140px; margin:0 auto; padding:46px 24px 26px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.flogo{ height:26px; filter:brightness(0) invert(1); opacity:.92; }
.fbrand p{ font-size:13.5px; color:#9AA29A; margin:12px 0 0; max-width:38ch; }
.site-footer h4{ font-family:var(--sd-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7E877E; margin:0 0 12px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; }
.site-footer a{ color:#C9CEC7; text-decoration:none; } .site-footer a:hover{ color:#fff; }
.fdisc-wrap{ border-top:1px solid #333a34; }
.fdisc{ max-width:1140px; margin:0 auto; padding:16px 24px 40px; font-size:12.5px; color:#8B938B; }
.fdisc strong{ color:#B7BEB6; }
@media(max-width:820px){ .fwrap{ grid-template-columns:1fr 1fr; } .fbrand{ grid-column:1 / -1; } }

/* ---- header shrink (JS sætter data-shrunk) ------------------------------- */
.site-header .shwrap{ transition:height .2s ease; }
.site-header[data-shrunk="true"] .shwrap{ height:56px; }

/* ---- søge-overlay -------------------------------------------------------- */
.sd-overlay{ position:fixed; inset:0; z-index:60; display:grid; align-items:start; justify-items:center; }
.sd-overlay[hidden], .sd-sheet[hidden]{ display:none; }
.sd-overlay-bg{ position:absolute; inset:0; background:rgba(20,24,20,.34); backdrop-filter:blur(2px); }
.sd-overlay-panel{ position:relative; width:min(680px,92vw); margin-top:12vh; background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:14px; box-shadow:0 30px 80px -30px rgba(20,24,20,.55); overflow:hidden; }
.sd-search-form{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--sd-line); }
.sd-search-form .ic{ width:22px; height:22px; }
.sd-search-form input{ flex:1; border:0; outline:0; font-family:var(--sd-sans); font-size:18px; color:var(--sd-ink); background:transparent; }
.sd-close{ border:1px solid var(--sd-line); background:var(--sd-base); border-radius:8px; width:32px; height:32px; cursor:pointer; color:var(--sd-ink-soft); font-size:14px; }
.sd-results{ max-height:52vh; overflow:auto; padding:6px; }
.sd-res{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:8px; text-decoration:none; color:var(--sd-ink); }
.sd-res:hover{ background:var(--sd-subtle); }
.sd-res-t{ font-weight:600; }
.sd-res-s{ font-family:var(--sd-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--sd-accent); }
.sd-empty{ padding:16px; color:var(--sd-ink-soft); font-size:14px; }

/* ---- mobil kategori-sheet ------------------------------------------------ */
.sd-sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; }
.sd-sheet-panel{ position:relative; width:100%; background:var(--sd-surface); border-top-left-radius:16px; border-top-right-radius:16px; padding:16px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -20px 60px -30px rgba(20,24,20,.5); }
.sd-sheet-head{ display:flex; justify-content:space-between; align-items:center; font-family:var(--sd-cond); font-size:19px; font-weight:700; margin-bottom:12px; }
.sd-sheet-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sd-sheet-grid a{ display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--sd-line); border-radius:10px; text-decoration:none; color:var(--sd-ink); font-weight:600; }
.sd-sheet-grid img{ width:30px; height:30px; }

/* ---- article_with_sidebar (Raft-arv: reusable block "Side med Floating Sidebar" 491) ---- */
/* Flex-container (aside sticky-TOC + article) med flexWrap:nowrap kollapsede ikke på mobil,
   så sidebar + artikel klemtes side-om-side og floodede ud over skærmen. Lad flex-børn
   krympe (min-width:0), og stak til én kolonne under 820px. Desktop-layout uændret. */
.article_with_sidebar-floating > aside,
.article_with_sidebar-floating > article{ min-width:0; }
@media(max-width:820px){
  .wp-block-group.article_with_sidebar-floating{ flex-direction:column !important; flex-wrap:wrap !important; }
  .article_with_sidebar-floating > aside{ position:static !important; width:100% !important; flex:1 1 100% !important; }
  /* Otter "o-sticky" låser TOC'en til desktop-bredden (~517px) og slipper den aldrig på mobil → tving responsiv */
  .article_with_sidebar-floating .o-sticky,
  .article_with_sidebar-floating .wp-block-rank-math-toc-block{ position:static !important; width:auto !important; max-width:100% !important; }
}
/* Dobbelt-TOC-fix: den gamle rank-math/toc-block tømmes i PHP (render_block). Den
   efterladte sticky-sidebar/wrapper folder vi bort, så kun skydetid/toc står tilbage.
   :empty rammer den tømte TOC + en sidebar/aside der intet andet indhold har. */
.wp-block-rank-math-toc-block:empty{ display:none !important; }
.article_with_sidebar-floating > aside:empty{ display:none !important; }
/* Sidebar der KUN indeholdt TOC'en (nu tom) klapper sammen, og artiklen fylder bredden. */
.article_with_sidebar-floating:has(> aside:empty) > article{ flex:1 1 100% !important; width:100% !important; }

/* ============================================================================
   >>> GUIDE-SYSTEM (portet fra trygtireden/babynest, skydetid-tokens) <<<
   Single-source TOC · pros/cons · badges · hurtigt-svar · FAQ · legal-factbox.
   Palette A (forest/gunmetal), IBM Plex. Mobile-first, 0 vandret overflow.
   NB: cons bruger 'danger' (#7A2E2E) som coral/danger-token. Ingen ikon-filer —
   ✓/✗ er inline data-URI i ::before (som babynest). Ingen stjerner/ratings.
   ============================================================================ */
:root{
  --sd-accent-tint: var(--wp--preset--color--accent-tint, #E7EEE4);
  --sd-danger: var(--wp--preset--color--danger, #7A2E2E);
  --sd-brass: var(--wp--preset--color--brass, #9A7B3F);
  --sd-r: 12px; --sd-r-sm: 8px;
}

/* Anker-scroll-margin: spring-links lander under den sticky header (66px). */
.site-main h2[id], .site-main h3[id]{ scroll-margin-top: 84px; }

/* --- Brødkrummer --- */
.sd-breadcrumbs{ font-family:var(--sd-mono); font-size:12px; letter-spacing:.02em; color:var(--sd-ink-soft); margin:0 0 1rem; }
.sd-breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .1rem; }
.sd-breadcrumbs li{ display:inline-flex; align-items:center; }
.sd-breadcrumbs li + li::before{ content:"/"; color:var(--sd-line); margin:0 .5rem; }
.sd-breadcrumbs a{ color:var(--sd-ink-soft); text-decoration:none; }
.sd-breadcrumbs a:hover{ color:var(--sd-accent); }
.sd-breadcrumbs [aria-current="page"]{ color:var(--sd-ink); }

/* --- SINGLE-SOURCE TOC: "Hurtigt overblik" (kollapsbar <details>) ----------
   Den ENESTE indholdsfortegnelse. Native <details> = tastatur-tilgængelig,
   ingen JS. Åben på desktop, kan foldes; teknisk gunmetal-kant + mono-tal. --- */
.sd-toc{
  background:var(--sd-surface); border:1px solid var(--sd-line);
  border-left:3px solid var(--sd-accent); border-radius:var(--sd-r);
  margin:1.5rem 0 2rem; box-shadow:var(--sd-shadow); overflow:hidden;
}
.sd-toc__title{
  display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none;
  padding:.9rem 1.1rem; font-family:var(--sd-cond); font-weight:700; font-size:1.05rem;
  color:var(--sd-ink); -webkit-tap-highlight-color:transparent;
}
.sd-toc__title::-webkit-details-marker{ display:none; }
.sd-toc__title:focus-visible{ outline:3px solid var(--sd-accent); outline-offset:-3px; }
.sd-toc__ico{ color:var(--sd-accent); flex:0 0 auto; }
.sd-toc__title > span{ flex:1 1 auto; }
.sd-toc__chev{ color:var(--sd-ink-soft); flex:0 0 auto; transition:transform .2s ease; }
.sd-toc[open] .sd-toc__chev{ transform:rotate(180deg); }
.sd-toc__list{
  margin:0; padding:0 1.2rem 1.05rem; list-style:none;
  counter-reset:sdtoc; columns:2; column-gap:2rem;
}
.sd-toc__list li{ margin:.34rem 0; break-inside:avoid; counter-increment:sdtoc; }
.sd-toc__list a{ display:inline-flex; gap:.55rem; align-items:baseline; color:var(--sd-accent); text-decoration:none; font-size:.95rem; line-height:1.4; }
.sd-toc__list a::before{ content:counter(sdtoc, decimal-leading-zero); font-family:var(--sd-mono); font-size:.78rem; font-weight:600; color:var(--sd-ink-soft); flex:0 0 auto; }
.sd-toc__list a:hover{ color:var(--sd-ink); text-decoration:underline; }
@media(max-width:600px){ .sd-toc__list{ columns:1; padding-bottom:.9rem; } }
/* Editor-preview (server-renderet): giv luft, arv frontend-look. */
.sd-toc-editor .sd-toc{ margin-top:0; }

/* --- HURTIGT SVAR: "Det korte svar først" ------------------------------- */
.sd-quickanswer{
  background:var(--sd-accent-tint); border:1px solid var(--sd-accent);
  border-radius:var(--sd-r); padding:1.25rem 1.4rem; margin:1.4rem 0 1.8rem; font-size:1.03rem;
}
.sd-quickanswer > *:first-child{ margin-top:0; }
.sd-quickanswer > *:last-child{ margin-bottom:0; }
.sd-quickanswer strong{ color:var(--sd-accent); }
.sd-quickanswer .sd-qa-label{
  display:block; font-family:var(--sd-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sd-accent); margin-bottom:.35rem;
}

/* --- PROS / CONS (to søskende-lister, ✓ grøn / ✗ danger; data-URI, ingen ikon-filer) --- */
.sd-proscons--cols{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin:1.6rem 0; }
@media(min-width:720px){ .sd-proscons--cols{ grid-template-columns:1fr 1fr; gap:1.5rem; } }
.sd-proscons__col{ min-width:0; }
.sd-proscons__label{
  display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem;
  font-family:var(--sd-mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.sd-proscons__col--pros .sd-proscons__label{ color:var(--sd-accent); }
.sd-proscons__col--cons .sd-proscons__label{ color:var(--sd-danger); }

.sd-pros, .sd-cons{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.sd-pros li, .sd-cons li{ position:relative; padding-left:2.1rem; line-height:1.5; margin:0; }
.sd-pros li::before, .sd-cons li::before{
  content:""; position:absolute; left:0; top:.05em; width:1.4rem; height:1.4rem;
  border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:.95rem;
}
.sd-pros li::before{
  background-color:color-mix(in srgb, var(--sd-accent) 18%, var(--sd-surface));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l2.8 2.8L12.5 5' fill='none' stroke='%23274A2B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sd-cons li::before{
  background-color:color-mix(in srgb, var(--sd-danger) 16%, var(--sd-surface));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%237A2E2E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Bagudkompatibel: den gamle indlejrede pros/cons-pattern (sd-proscons uden --cols). */
.sd-proscons:not(.sd-proscons--cols) ul ul{ list-style:none; padding-left:0; }

/* --- BADGE-pill (over kort, top-venstre). Mono-uppercase. Ingen stjerner. --- */
.sd-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--sd-mono); font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:6px; line-height:1; border:1px solid transparent; white-space:nowrap;
}
.sd-badge--favorit{ background:var(--sd-accent); color:var(--sd-accent-ink); }
.sd-badge--budget{ background:transparent; color:var(--sd-accent); border-color:var(--sd-accent); }
.sd-badge--premium{ background:var(--sd-gunmetal); color:#ECEFE9; }
/* SVG-ikon i badges (mask → arver badge-farven). Ejer: "lidt mere visuel evt. med SVG-ikon".
   favorit = reticle (sigte/"vores valg"), budget = pris-tag, premium = diamant. */
.sd-badge--favorit::before, .sd-badge--budget::before, .sd-badge--premium::before{
  content:""; width:.95em; height:.95em; flex:0 0 auto; margin-left:-.06em;
  background:currentColor;
  -webkit-mask:var(--sd-badge-ico) center/contain no-repeat; mask:var(--sd-badge-ico) center/contain no-repeat;
}
.sd-badge--favorit{ --sd-badge-ico: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'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.sd-badge--budget{ --sd-badge-ico: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.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.4.6l6.4 6.4a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.sd-badge--premium{ --sd-badge-ico: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='M6 3h12l4 6-10 12L2 9Z'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E"); }
/* Faktisk brugte varianter i guide-content: --pick ("Vi anbefaler") + --sale ("Tilbud").
   --pick får solid forest-fill + reticle-ikon → tydeligt "vores valg" ved produktnavnet. */
.sd-badge--pick{ background:var(--sd-accent); color:var(--sd-accent-ink); border-color:transparent; --sd-badge-ico: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'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.sd-badge--sale{ --sd-badge-ico: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.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 2.8 12V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.4.6l6.4 6.4a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.sd-badge--pick::before, .sd-badge--sale::before{
  content:""; width:.95em; height:.95em; flex:0 0 auto; margin-left:-.06em;
  background:currentColor;
  -webkit-mask:var(--sd-badge-ico) center/contain no-repeat; mask:var(--sd-badge-ico) center/contain no-repeat;
}
/* Absolut placering top-venstre over et kort: forælder skal have position:relative. */
.sd-badge-anchor{ position:relative; }
.sd-badge--pinned{ position:absolute; top:.7rem; left:.7rem; z-index:2; box-shadow:0 2px 8px -2px rgba(20,24,20,.4); }

/* --- Produktkort (rammer badge + pros/cons) --- */
.sd-productcard{
  background:var(--sd-surface); border:1px solid var(--sd-line); border-radius:var(--sd-r);
  overflow:hidden; box-shadow:var(--sd-shadow); margin:1.4rem 0;
}
.sd-productcard__media{ position:relative; }
.sd-productcard__body{ padding:1.1rem 1.25rem 1.3rem; }

/* --- LEGAL / 18+ FAKTABOKS (E-E-A-T + Våbenloven). Genbruger factbox-label. --- */
.sd-legalbox{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--sd-subtle); border:1px solid var(--sd-line); border-left:4px solid var(--sd-brass);
  border-radius:var(--sd-r); padding:1.1rem 1.25rem; margin:1.6rem 0;
}
.sd-legalbox__ic{ width:34px; height:34px; flex:0 0 auto; }
.sd-legalbox__label{
  font-family:var(--sd-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sd-brass); margin:0 0 .25rem;
}
.sd-legalbox p{ margin:.15rem 0 0; line-height:1.55; }

/* --- FAQ-BLOCK (skydetid/faq): kollapsbar accordion + FAQPage-schema (PHP) --- */
.sd-faq{ margin:1.8rem 0; }
.sd-faq__heading{ font-family:var(--sd-cond); font-weight:700; letter-spacing:-.02em; line-height:1.1; font-size:1.875rem; margin:0 0 1rem; }
.sd-faq__item{
  border:1px solid var(--sd-line); border-radius:var(--sd-r-sm); background:var(--sd-surface);
  margin:.6rem 0; overflow:hidden;
}
.sd-faq__item[open]{ border-color:var(--sd-accent); }
.sd-faq__q{
  display:flex; align-items:center; gap:.7rem; cursor:pointer; list-style:none;
  padding:.95rem 1.15rem; font-family:var(--sd-cond); font-weight:700; font-size:1.08rem; line-height:1.25;
  color:var(--sd-ink); -webkit-tap-highlight-color:transparent;
}
.sd-faq__q::-webkit-details-marker{ display:none; }
.sd-faq__q:focus-visible{ outline:3px solid var(--sd-accent); outline-offset:-3px; }
.sd-faq__q::after{
  content:""; flex:0 0 auto; width:16px; height:16px; margin-left:auto; align-self:center;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .2s ease;
}
.sd-faq__item[open] .sd-faq__q::after{ transform:rotate(180deg); }
.sd-faq__a{ padding:0 1.15rem 1.05rem; }
.sd-faq__a > *:first-child{ margin-top:0; }
.sd-faq__a > *:last-child{ margin-bottom:0; }
.sd-faq__a p{ line-height:1.6; color:var(--sd-ink-soft); }
.sd-faq__end{ height:0; margin:0; padding:0; border:0; } /* usynlig sentinel (se sd_faq_render_html) */
/* Editor-tilstand */
.sd-faq-edit__row{ border:1px dashed var(--sd-line); border-radius:var(--sd-r-sm); padding:.8rem 1rem; margin:.6rem 0; }
.sd-faq-edit__q{ font-family:var(--sd-cond); font-weight:700; font-size:1.05rem; }
.sd-faq-edit__a{ margin-top:.35rem; color:var(--sd-ink-soft); }

/* --- Mono-værdier (delt: comparison-table + spec-block). IBM Plex Mono, tabular. --- */
.sd-mono{ font-family:var(--sd-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* --- COMPARE-TABEL "Sammenlign hurtigt" (.sd-compare / is-style-compare) -----------
   Produkt-sammenligning der heade anbefalingerne: spec-ikoner i kolonneoverskrifter,
   IBM Plex Mono-værdier, sticky header. Wrapper .sd-compare-wrap giver vandret scroll
   på mobil (arver .wp-block-table{overflow-x:auto}); tabellen kollapser ikke, men
   scroller rent — 0 layout-overflow. Palette A: subtle header, forest ikon-accent. */
.sd-compare-wrap{ margin:1.6rem 0; }
.sd-compare{ margin:0; }
.sd-compare table{ width:100%; border-collapse:collapse; background:var(--sd-surface); font-size:.95rem; }
.sd-compare thead th{
  position:sticky; top:0; z-index:1; background:var(--sd-subtle);
  border-bottom:1px solid var(--sd-line); padding:.7rem .8rem; vertical-align:bottom;
  font-family:var(--sd-cond); font-weight:700; letter-spacing:-.01em; color:var(--sd-ink); line-height:1.15;
}
.sd-compare .sd-th-spec{ text-align:left; white-space:nowrap; }
.sd-compare .sd-th-spec .ic{ width:18px; height:18px; margin-right:.35rem; vertical-align:-3px; }
.sd-compare .sd-th-spec span{ display:inline; }
.sd-compare tbody th[scope="row"]{
  font-family:var(--sd-cond); font-weight:700; letter-spacing:-.01em; color:var(--sd-ink);
  padding:.7rem .8rem; border-top:1px solid var(--sd-line); text-align:left; min-width:11rem;
}
.sd-compare tbody td{ padding:.7rem .8rem; border-top:1px solid var(--sd-line); color:var(--sd-ink); white-space:nowrap; }
.sd-compare tbody tr:nth-child(even) td,
.sd-compare tbody tr:nth-child(even) th[scope="row"]{ background:color-mix(in srgb, var(--sd-subtle) 42%, transparent); }
.sd-compare figcaption{
  margin-top:.7rem; font-size:.82rem; color:var(--sd-ink-soft); line-height:1.5; text-align:left;
}
@media(max-width:520px){
  .sd-compare table{ font-size:.9rem; }
  .sd-compare thead th, .sd-compare tbody th[scope="row"], .sd-compare tbody td{ padding:.6rem .65rem; }
}

/* --- "Passer til dig hvis …"-linje (per-produkt, jf. trygtiredens benefit-framing) --
   Kort accent-tintet linje der matcher køberen til produktet, over fordele/ulemper. */
.sd-fits{
  background:var(--sd-accent-tint); border-left:3px solid var(--sd-accent);
  border-radius:var(--sd-r-sm); padding:.6rem .85rem; margin:1rem 0 .4rem;
  font-size:.98rem; line-height:1.5;
}
.sd-fits strong{ color:var(--sd-accent); }

/* --- SPEC-BLOCK (skydetid/spec): titlet spec-tabel, ikon + label + mono-værdi ------
   Matcher comparison-table'ens spec-ikon+mono-look, men som egen selvstændig blok til
   produktsider. Mobile-first: <dl>-grid stakker rent ved 390px, 0 vandret overflow.
   Teknisk/maskulin, palette A (forest-kant + gunmetal-mono). Ingen ratings/stjerner. */
.sd-spec{
  background:var(--sd-surface); border:1px solid var(--sd-line);
  border-left:3px solid var(--sd-accent); border-radius:var(--sd-r);
  margin:1.6rem 0; box-shadow:var(--sd-shadow); overflow:hidden;
}
.sd-spec__heading{
  font-family:var(--sd-cond); font-weight:700; letter-spacing:-.02em; line-height:1.12;
  font-size:1.25rem; color:var(--sd-ink);
  margin:0; padding:.95rem 1.15rem .85rem; border-bottom:1px solid var(--sd-line);
  background:var(--sd-subtle);
}
.sd-spec__list{ margin:0; padding:0; }
/* Hver spec = én række: label (ikon+navn) venstre, mono-værdi højre. Grid holder
   værdi-kolonnen på linje (comparison-table-fornemmelse) på desktop. */
.sd-spec__row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  gap:.6rem 1rem; padding:.7rem 1.15rem; border-top:1px solid var(--sd-line);
}
.sd-spec__row:first-child{ border-top:0; }
/* Zebra: skiftende varm subtle for scannbarhed på lange lister. */
.sd-spec__row:nth-child(even){ background:color-mix(in srgb, var(--sd-subtle) 42%, transparent); }
.sd-spec__label{
  display:flex; align-items:center; gap:.55rem; min-width:0;
  font-family:var(--sd-sans); font-weight:500; font-size:.95rem; color:var(--sd-ink-soft);
}
.sd-spec__label > span{ min-width:0; overflow-wrap:anywhere; }
.sd-spec__ic{ width:20px; height:20px; flex:0 0 auto; } /* v2 duotone — arver ikke farve */
.sd-spec__value{
  font-size:.98rem; font-weight:500; color:var(--sd-ink);
  text-align:right; white-space:nowrap; align-self:center;
}
/* Editor-tilstand: rækker som redigerbare felter (icon-select + label + værdi). */
.sd-spec-edit{ padding-bottom:.4rem; }
.sd-spec-edit .sd-spec__heading{ background:transparent; border-bottom:1px dashed var(--sd-line); }
.sd-spec-edit__row{
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.6rem; align-items:end;
  border:1px dashed var(--sd-line); border-radius:var(--sd-r-sm); padding:.7rem .85rem; margin:.6rem 1rem;
}
.sd-spec-edit__ctl{ display:flex; align-items:center; gap:.15rem; }
.sd-spec-edit__add{ margin:.4rem 1rem .2rem; }
/* Mobil: stak label over værdi (venstrejusteret), rene rækker, 0 overflow ved 390px. */
@media(max-width:520px){
  .sd-spec__row{ grid-template-columns:1fr; gap:.2rem .55rem; padding:.75rem 1rem; }
  .sd-spec__value{ text-align:left; padding-left:calc(20px + .55rem); white-space:normal; overflow-wrap:anywhere; }
  .sd-spec-edit__row{ grid-template-columns:1fr; }
}

/* --- EVIDENS-STAK (E-E-A-T) — pattern-varianten (patterns/evidence-stack.php)
   OG den render-time-injicerede .sd-evidence--auto-boks. Kort med accent-kant, så
   metode-transparensen står tydeligt. tov-playbook §7 / marketing-law BG-2. ------ */
.sd-evidence{
  background:var(--sd-surface); border:1px solid var(--sd-line);
  border-left:3px solid var(--sd-accent); border-radius:var(--sd-r);
  margin:2rem 0; padding:1.15rem 1.25rem; box-shadow:var(--sd-shadow);
}
.sd-evidence > :first-child{ margin-top:0; }
.sd-evidence > :last-child{ margin-bottom:0; }
.sd-evidence h3, .sd-evidence__title{
  font-family:var(--sd-cond); font-weight:700; letter-spacing:-.02em; line-height:1.12;
  color:var(--sd-ink); margin:1.1rem 0 .5rem;
}
.sd-evidence h3:first-of-type{ margin-top:0; }
.sd-evidence__title{ display:flex; align-items:center; gap:.55rem; font-size:1.2rem; margin:0 0 .6rem; }
.sd-evidence__ico{ color:var(--sd-accent); flex:0 0 auto; }
.sd-evidence p{ margin:.5rem 0; color:var(--sd-ink); font-size:.98rem; line-height:1.6; }
/* Forfatter-ekspertise-linje (både pattern-klassen og auto-boksens .sd-evidence__by). */
.sd-evidence .sd-author-expertise, .sd-evidence__by{
  color:var(--sd-ink-soft); font-size:.9375rem; font-style:italic; margin-top:.75rem;
}
@media(max-width:520px){ .sd-evidence{ padding:1rem 1.05rem; } }

/* Render-time-related-slider-wrapper: luft over pluginnets .apr-related-container. */
.sd-related-auto{ margin-top:2.25rem; }

/* --- SEKTIONS-SEPARATOR (.sd-sep) — hårfin streg + centreret reticle-ikon (palette A).
   patterns/separator.php + auto-injiceret før udvalgte store H2'er (functions.php).
   Ikonet er sprite-referencen #i-reticle-zero (baked duotone), .ic-neutral boks. --- */
.sd-sep{
  display:flex; align-items:center; gap:1.1rem;
  margin:3rem auto; max-width:100%;
}
.sd-sep__rule{
  flex:1 1 auto; height:1px; border:0;
  background:linear-gradient(to right, transparent, var(--sd-line) 22%, var(--sd-line) 78%, transparent);
}
.sd-sep__ico{ flex:0 0 auto; width:30px; height:30px; opacity:.9; }
/* Auto-injiceret variant får samme look; ekstra luft så den adskiller sektioner. */
.sd-sep--auto{ margin-block:3.25rem; }
@media(max-width:520px){
  .sd-sep{ gap:.8rem; margin:2.25rem auto; }
  .sd-sep__ico{ width:26px; height:26px; }
}

/* --- Reklamelink-mærkning inline (markedsføringsloven: per-link "Reklamelink") --- */
.sd-adlink-note{ font-family:var(--sd-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sd-ink-soft); }

/* --- PICK-CALLOUT (.sd-pick-callout): "Skal du vælge et X — se det, vi selv ville vælge".
   Sender info-/regel-/pillar-sider videre til money-guides (jf. trygtiredens produkt-CTA,
   men palette A: accent-tint + reticle-ikon, intet fugle-foto). Aldrig et affiliate-link —
   kun intern navigation. Accent-tintet kort m. forest-venstrekant; knap = accent-fyld + pil. */
.sd-pick-callout{
  display:flex; align-items:center; gap:1.15rem;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sd-accent) 12%, transparent) 0%, transparent 55%),
    var(--sd-accent-tint);
  border:1px solid var(--sd-accent); border-left:4px solid var(--sd-accent);
  border-radius:var(--sd-r); padding:1.25rem 1.4rem; margin:2rem 0;
  box-shadow:var(--sd-shadow);
}
.sd-pick-callout__ic{
  flex:0 0 auto; width:60px; height:60px; display:grid; place-items:center;
  background:var(--sd-surface); border:1px solid var(--sd-accent); border-radius:50%;
  box-shadow:0 2px 0 color-mix(in srgb, var(--sd-accent) 40%, transparent);
}
.sd-pick-callout__ic .ic{ width:32px; height:32px; }
.sd-pick-callout__body{ min-width:0; }
.sd-pick-callout__kicker{
  font-family:var(--sd-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sd-accent); margin:0 0 .2rem;
}
.sd-pick-callout__title{
  font-family:var(--sd-cond); font-weight:700; letter-spacing:-.02em; line-height:1.12;
  font-size:1.35rem; color:var(--sd-ink); margin:0 0 .4rem;
}
.sd-pick-callout__text{ margin:0 0 .9rem; color:var(--sd-ink); font-size:.98rem; line-height:1.55; }
.sd-pick-callout__btn{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--sd-accent); color:var(--sd-accent-ink); text-decoration:none;
  font-family:var(--sd-sans); font-weight:600; font-size:.95rem;
  padding:.7rem 1.2rem; border-radius:10px; line-height:1;
  /* border-box så width:100% (mobil ≤560px) rummer sin egen padding og ikke
     skubber 3px ud over indholdskolonnen → 0 vandret side-overflow på telefon. */
  box-sizing:border-box; max-width:100%;
}
.sd-pick-callout__btn::after{ content:"\2192"; font-weight:700; }
.sd-pick-callout__btn:hover{ background:var(--sd-gunmetal); color:#ECEFE9; text-decoration:none; }
/* Mobil: stak ikon over tekst, knap fuld bredde (matcher trygtiredens &lt;560px-adfærd). */
@media(max-width:560px){
  .sd-pick-callout{ flex-direction:column; align-items:flex-start; gap:.85rem; padding:1.1rem 1.15rem; }
  .sd-pick-callout__btn{ width:100%; justify-content:center; }
}

/* --- Mobil-hærdning: intet vandret overflow fra guide-moduler --- */
.site-main img, .site-main table, .site-main pre{ max-width:100%; }
.site-main .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.site-main *{ overflow-wrap:break-word; }

/* ==========================================================================
   IN-CONTENT LINKS — "det skal tydeligt ligne links" (Task 1)
   Problem: prose-links i artikelbrødteksten arvede tekstfarve (a{color:inherit})
   og havde ingen understregning → umuligt at se de var klikbare. Vi giver dem
   forest-accent + synlig understregning + tydelig hover/fokus. Scope: KUN
   brødtekst-links i .entry-content/.wp-block-post-content. Vi holder os KLAR af
   hovednav, knapper (.cta/.buybtn/.apr-card-button), badges, breadcrumbs,
   pick-callout, affiliate-produktlinks (.apr-*) og TOC (egen styling nedenfor).
   Kontrast: #274A2B på surface/base ≥ 8:1 (WCAG AA/AAA).
   NB: WordPress global-styles (theme.json) sætter a:where(:not(.wp-element-button))
   {color; text-decoration:none} inline i <head>. Vores selektor er mere specifik
   (klasse-scoped) og vinder derfor cascade. Udelukkelses-listen må IKKE indeholde
   [class*="wp-block-post"] — det ville ramme selve .wp-block-post-content og
   ekskludere alle brødtekst-links (dvs. hele scope'et). --------------------- */
/* Brødtekst-links i entry-content. Udelukkelses-listen skrives ÉN gang; :hover og
   :focus-visible nestes (native CSS-nesting) så listen ikke driver ud af sync. */
:is(.entry-content, .wp-block-post-content) a:not(
  .apr-container a, .apr-slider-container a, .apr-related-container a,
  .apr-product-single-container a, .apr-compare-container a, .apr-disclosure a,
  .sd-toc a, .sd-breadcrumbs a, .sd-pick-callout a, .wp-block-buttons a,
  .wp-block-button a, [class*="apr-"], .cta, .buybtn, .apr-card-button,
  .sd-badge, .wp-block-post-title a, .wp-block-post-featured-image a, figure a
){
  color:var(--sd-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb, var(--sd-accent) 55%, transparent);
  transition:color .15s ease, text-decoration-color .15s ease;

  &:hover{
    color:var(--sd-accent-hover, #1d3a22);
    text-decoration-thickness:2px;
    text-decoration-color:currentColor;
  }
  &:focus-visible{
    outline:2px solid var(--sd-accent);
    outline-offset:2px;
    text-decoration-color:currentColor;
    border-radius:2px;
  }
}
/* Accent-hover-token (bruges også af pluginnet). Én forest-nuance mørkere. */
:root{ --sd-accent-hover: var(--wp--preset--color--accent-hover, #1d3a22); }

/* ==========================================================================
   TOC "Hurtigt overblik" — tydeligere tap-bare jump-links (Task 1)
   Gør TOC-linkene til åbenlyse links: accent-farve (allerede), understregning på
   hover/fokus + en diskret "#"-affordance, og komfortabel tap-højde (≥40px) på
   mobil. Baserer sig på den eksisterende .sd-toc__list-styling ovenfor. ------ */
.sd-toc__list a{
  padding-block:.15rem;            /* lidt luft; tap-mål øges på mobil nedenfor */
  border-radius:6px;
  transition:color .15s ease;
}
/* "#"-affordance efter tallet — signalerer "spring til sektion". */
.sd-toc__list a::after{
  content:"#";
  font-family:var(--sd-mono); font-size:.72rem; font-weight:600;
  color:var(--sd-line); margin-left:.15rem; align-self:baseline;
  transition:color .15s ease; flex:0 0 auto;
}
.sd-toc__list a:hover,
.sd-toc__list a:focus-visible{ color:var(--sd-ink); text-decoration:underline; text-underline-offset:2px; }
.sd-toc__list a:hover::after,
.sd-toc__list a:focus-visible::after{ color:var(--sd-accent); }
.sd-toc__list a:focus-visible{ outline:2px solid var(--sd-accent); outline-offset:2px; }
/* Mobil: komfortabel række-højde (≥40px) så jump-links er lette at ramme. */
@media(max-width:600px){
  .sd-toc__list a{ min-height:40px; align-items:center; padding-block:.3rem; }
  .sd-toc__list li{ margin:.15rem 0; }
}

/* ==========================================================================
   SLIDER-BREAKOUT på undersider — "lidt mere wiggle room" (Task 2)
   Lad produkt-slidere i GUIDE-/underside-brødtekst bryde en anelse bredere ud
   end indholds-kolonnen (860px) for luft, men ALDRIG bredere end viewporten.
   Selvcentrerende + selv-klampende formel: på desktop op til 1240px med 16px
   gutter i hver side; på smalle skærme/telefon kollapser den automatisk til
   indholdsbredden (16px inset) → 0 vandret side-overflow.

   Matematik (indholdskolonnen er centreret, is-layout-constrained):
     width  = min(100vw - 32px, 1240px)                 // aldrig > viewport-32
     margin = calc(50% - min(50vw - 16px, 620px))       // centrerer W i viewport
   Ved 1280/1920: 1240px bred, 16px+ gutter. Ved ≤~1272: fuld (viewport-32),
   16px gutter. Telefon 390: = 358px (= indholdsbredden), ingen synlig breakout.

   VIGTIGT: WordPress' constrained-layout sætter
     .is-layout-constrained > :where(:not(.align*)) { margin-left/right:auto !important }
   på hver blok-child. Vores wrappere ER sådanne children, så vi MÅ bruge
   !important på margin-left/right (fysiske longhands, matcher WP's) for at vinde.
   Vores selektor-specificitet (0,2,0) > WP's (0,1,0), så !important-reglen vinder.

   Scope: KUN slidere inde i .entry-content/.wp-block-post-content. Front-siden
   (.homepage .apr-slider-container) ligger UDENFOR post-content og røres ikke.
   Glider-track'en beholder sit overflow-x:hidden (arves fra .glider-contain). */
:is(.entry-content, .wp-block-post-content) :is(
  .sd-hub-slider, .sd-related-auto, .apr-related-container, .apr-slider-container
){
  /* Transform-baseret centrering: garanteret LIGE breakout i begge sider på alle
     bredder (undgår margin-over-constraint hvor browseren ignorerer margin-right). */
  width:min(100vw - 32px, 1240px);
  max-width:none !important;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}
/* Undgå dobbelt-breakout: en slider-container NESTED i en allerede udbrudt
   wrapper (.sd-hub-slider / .sd-related-auto) skal IKKE bryde ud igen — den skal
   blot fylde den udbrudte forælder (WP's margin:auto centrerer den). */
:is(.entry-content, .wp-block-post-content) :is(.sd-hub-slider, .sd-related-auto)
  :is(.apr-slider-container, .apr-related-container){
  width:auto;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* <<< GUIDE-SYSTEM slut >>> */

/* ==========================================================================
   MOBILE INTERACTION ANIMATIONS  (søg + kategorier — app-agtig, tilføjet 2026-07-23)
   Kun transform/opacity (GPU), korte durations, restrained easing (palette A).
   Mekanik: ui.js toggler .is-open (display kan ikke animeres, så [hidden] fjernes
   ved open og sættes igen efter exit-transition). Reduced-motion-guarden nedenfor
   (samt den sidste globale) slår alle transforms/animationer fra.
   ========================================================================== */

/* Fælles easing/tempo-tokens for dette afsnit */
:root{ --sd-ease:cubic-bezier(.22,.61,.36,1); --sd-in:.18s; --sd-out:.13s; }

/* ---- søge-overlay: fade-in + panel slide-down/scale-up -------------------- */
/* base = "lukket, men stadig i DOM" (mens exit-transition spiller) */
.sd-overlay{ opacity:0; transition:opacity var(--sd-out) var(--sd-ease); will-change:opacity; }
.sd-overlay .sd-overlay-bg{ opacity:0; transition:opacity var(--sd-out) var(--sd-ease); }
.sd-overlay .sd-overlay-panel{
  transform:translateY(-8px) scale(.985); transform-origin:top center;
  transition:transform var(--sd-out) var(--sd-ease), opacity var(--sd-out) var(--sd-ease);
  opacity:0; will-change:transform,opacity;
}
.sd-overlay.is-open{ opacity:1; transition-duration:var(--sd-in); }
.sd-overlay.is-open .sd-overlay-bg{ opacity:1; transition-duration:var(--sd-in); }
.sd-overlay.is-open .sd-overlay-panel{
  transform:translateY(0) scale(1); opacity:1; transition-duration:var(--sd-in);
}

/* søge-resultater: billig, forskudt fade/slide-in efterhånden som de kommer */
@keyframes sd-res-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.sd-overlay.is-open .sd-res{ animation:sd-res-in var(--sd-in) var(--sd-ease) both; }
.sd-overlay.is-open .sd-res:nth-child(2){ animation-delay:.03s; }
.sd-overlay.is-open .sd-res:nth-child(3){ animation-delay:.06s; }
.sd-overlay.is-open .sd-res:nth-child(4){ animation-delay:.09s; }
.sd-overlay.is-open .sd-res:nth-child(5){ animation-delay:.12s; }
.sd-overlay.is-open .sd-res:nth-child(n+6){ animation-delay:.15s; }

/* ---- mobil kategori-sheet: bottom-sheet slide-up ------------------------- */
.sd-sheet{ opacity:0; transition:opacity var(--sd-out) var(--sd-ease); will-change:opacity; }
.sd-sheet .sd-overlay-bg{ opacity:0; transition:opacity var(--sd-out) var(--sd-ease); }
.sd-sheet .sd-sheet-panel{
  transform:translateY(12px); transition:transform var(--sd-out) var(--sd-ease); will-change:transform;
}
.sd-sheet.is-open{ opacity:1; transition-duration:var(--sd-in); }
.sd-sheet.is-open .sd-overlay-bg{ opacity:1; transition-duration:var(--sd-in); }
.sd-sheet.is-open .sd-sheet-panel{ transform:translateY(0); transition-duration:var(--sd-in); }

/* ---- tryk-feedback: touch-mål (kategorier + søg-knapper) ------------------ */
/* Kun touch (hover:none) så desktop ikke påvirkes. transform/opacity = ingen layout-thrash. */
@media (hover:none){
  .searchbtn, .sd-close, .sd-search-form .ic{ transition:transform var(--sd-out) var(--sd-ease); }
  .searchbtn:active{ transform:scale(.96); }
  .sd-close:active{ transform:scale(.92); }
  .mainnav a, .sd-sheet-grid a{ transition:transform var(--sd-out) var(--sd-ease), opacity var(--sd-out) var(--sd-ease); }
  .mainnav a:active, .sd-sheet-grid a:active{ transform:scale(.97); opacity:.85; }
  .mobile-tabbar .tab{ transition:transform var(--sd-out) var(--sd-ease), color var(--sd-out) var(--sd-ease); }
  .mobile-tabbar .tab:active{ transform:scale(.94); }
  .mobile-tabbar .tab:active .ic{ transform:scale(.94); }
  .sd-res{ transition:transform var(--sd-out) var(--sd-ease); }
  .sd-res:active{ transform:scale(.985); }
}

/* ---- bottom tab-bar: aktiv-indikator (pille glider/fader ind) ------------- */
.mobile-tabbar .tab{ position:relative; }
.mobile-tabbar .tab::after{
  content:""; position:absolute; top:3px; left:50%; width:26px; height:3px; border-radius:3px;
  background:var(--sd-accent); transform:translateX(-50%) scaleX(0); transform-origin:center;
  opacity:0; transition:transform var(--sd-in) var(--sd-ease), opacity var(--sd-in) var(--sd-ease);
}
.mobile-tabbar .tab.is-active::after{ transform:translateX(-50%) scaleX(1); opacity:1; }
.mobile-tabbar .tab.is-active .ic{ animation:sd-tab-pop var(--sd-in) var(--sd-ease); }
@keyframes sd-tab-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* ---- reduced motion (dette afsnit) — slå alt fra ------------------------- */
@media (prefers-reduced-motion: reduce){
  .sd-overlay, .sd-overlay .sd-overlay-bg, .sd-overlay .sd-overlay-panel,
  .sd-sheet, .sd-sheet .sd-overlay-bg, .sd-sheet .sd-sheet-panel,
  .searchbtn, .sd-close, .mainnav a, .sd-sheet-grid a,
  .mobile-tabbar .tab, .mobile-tabbar .tab::after, .sd-res{
    transition:none !important; animation:none !important; transform:none !important;
  }
  .sd-overlay.is-open, .sd-overlay.is-open .sd-overlay-bg, .sd-overlay.is-open .sd-overlay-panel,
  .sd-sheet.is-open, .sd-sheet.is-open .sd-overlay-bg, .sd-sheet.is-open .sd-sheet-panel,
  .mobile-tabbar .tab.is-active::after{ opacity:1 !important; }
}
/* === MOBILE INTERACTION ANIMATIONS slut === */

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* === COOKIE-BANNER (Complianz): centreret på skærmen ======================
   Complianz bager banner-positionen ind i sin genererede CSS, så det ikke er
   nok at flippe position=center i DB'en. Vi tvinger .cmplz-center til ægte
   skærm-centrering på alle viewports — temaejet + prod-sikkert. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  width:min(526px, calc(100vw - 32px)) !important;
  max-width:none !important;
  max-height:calc(100vh - 32px) !important;
  overflow-y:auto !important;
  z-index:2147483001 !important;
}
/* Blød baggrundsdæmp mens banneret er synligt. Guardet på .cmplz-show (det
   positive "vises nu"-signal Complianz sætter; skifter til .cmplz-dismissed ved
   accept/afvis → backdrop forsvinder). pointer-events:none = kan ALDRIG blokere
   sitet, kun et visuelt lag. */
#cmplz-cookiebanner-container:has(.cmplz-cookiebanner.cmplz-center.cmplz-show)::before{
  content:"";
  position:fixed !important;
  inset:0 !important;
  background:rgba(18,26,20,.42);
  pointer-events:none;
  z-index:2147483000;
}