/* ==========================================================================
   Vårgårda Kullager — stylesheet
   Design tokens and component styles ported from "Vargarda Kullager.dc.html".
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root{
  color-scheme: light;
  --bg:         oklch(0.965 0.006 85);
  --surface:    oklch(0.995 0.004 90);
  --surface2:   oklch(0.925 0.008 85);
  --fg:         oklch(0.21 0.012 70);
  --fg2:        oklch(0.45 0.012 70);
  --fg3:        oklch(0.62 0.012 70);
  --line:       oklch(0.87 0.009 80);
  --accent:     oklch(0.34 0.105 262);
  --accent-fg:  oklch(0.99 0.005 85);
  --ink:        oklch(0.19 0.012 70);
  --ink-fg:     oklch(0.96 0.006 85);
  --ink-line:   oklch(0.31 0.012 70);

  --wrap: 1240px;
  --gut: 28px;
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:         oklch(0.175 0.009 72);
  --surface:    oklch(0.215 0.010 72);
  --surface2:   oklch(0.265 0.011 72);
  --fg:         oklch(0.955 0.006 85);
  --fg2:        oklch(0.78 0.008 85);
  --fg3:        oklch(0.63 0.010 85);
  --line:       oklch(0.315 0.011 72);
  --accent:     oklch(0.72 0.115 252);
  --accent-fg:  oklch(0.16 0.025 262);
  --ink:        oklch(0.245 0.011 72);
  --ink-fg:     oklch(0.96 0.006 85);
  --ink-line:   oklch(0.36 0.012 72);
}

/* --- Base --------------------------------------------------------------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--fg); }

img{ max-width:100%; }
input, textarea, select, button{ font:inherit; color:inherit; }
input::placeholder, textarea::placeholder{ color:var(--fg3); }
input:focus, textarea:focus, select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
::selection{ background:var(--accent); color:var(--accent-fg); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:12px 18px; background:var(--accent); color:var(--accent-fg); border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; color:var(--accent-fg); }

/* --- Layout primitives -------------------------------------------------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.section{ max-width:var(--wrap); margin:0 auto; padding:88px var(--gut) 0; }
.section--tight{ padding-top:56px; }
.section--last{ padding-bottom:96px; }
.section--page-top{ padding-top:72px; }

.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.eyebrow--muted{ color:var(--fg3); }

h1,h2,h3{ font-family:var(--font-display); margin:0; }

.h1{
  font-weight:800; font-size:clamp(42px,5.2vw,70px); line-height:.98;
  letter-spacing:-.035em; margin:26px 0 0; text-wrap:balance;
}
.h1--page{ font-size:clamp(38px,4.6vw,60px); margin:16px 0 0; max-width:18ch; }
.h1--contact{ font-size:clamp(36px,4.4vw,56px); margin:16px 0 0; }

.h2{
  font-weight:800; font-size:clamp(32px,3.6vw,46px);
  letter-spacing:-.03em; margin:16px 0 0;
}
.h2--narrow{ max-width:16ch; text-wrap:balance; }

.lead{
  font-size:19px; line-height:1.62; color:var(--fg2);
  max-width:52ch; margin:26px 0 0; text-wrap:pretty;
}
.lead--page{ font-size:18px; max-width:60ch; margin-top:22px; }
.lead--contact{ font-size:18px; max-width:46ch; margin-top:20px; }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 28px; border-radius:6px; border:1px solid transparent;
  font-weight:600; font-size:16px; cursor:pointer; text-align:center;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--accent{ background:var(--accent); color:var(--accent-fg); border-color:transparent; }
.btn--accent:hover{ background:var(--fg); color:var(--bg); }
.btn--outline{ background:var(--surface); color:var(--fg); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn--sm{ height:46px; padding:0 22px; font-size:15px; }
.btn--md{ height:50px; padding:0 26px; }
.btn--lg{ height:54px; padding:0 30px; }
.btn--pill{ height:38px; padding:0 20px; border-radius:999px; font-size:14px; }
/* Accent button sitting on the dark "ink" panel */
.cta .btn--accent:hover{ background:var(--ink-fg); color:var(--ink); }

/* --- Header ------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 3px 0 var(--accent);
}
.site-header__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:76px; display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand__logo{
  height:54px; width:auto; object-fit:contain; display:block; background:#fff; border-radius:6px;
  padding:5px 10px; border:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap; }
.nav__link{
  display:inline-flex; align-items:center; height:38px; padding:0 15px;
  border-radius:6px; font-size:15px; font-weight:500; color:var(--fg2);
  transition:color .2s ease, background-color .2s ease;
}
.nav__link:hover{ color:var(--fg); }
.nav__link[aria-current="page"]{ color:var(--fg); background:var(--surface2); }

.header__actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

.theme-toggle{
  height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  cursor:pointer; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg2);
  transition:border-color .2s ease, color .2s ease;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--fg); }
.dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); display:block; flex:0 0 auto; }
.dot--sm{ width:8px; height:8px; }
.dot--xs{ width:7px; height:7px; }
.dot--badge{ width:6px; height:6px; }

/* --- Hero --------------------------------------------------------------- */
.hero{
  max-width:var(--wrap); margin:0 auto; padding:80px var(--gut) 72px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:60px; align-items:center;
}
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg2);
}
.hero__accent{ color:var(--accent); }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.chips{
  display:flex; flex-wrap:wrap; gap:26px; margin:40px 0 0; padding:0; list-style:none;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--fg3); text-transform:uppercase;
}
.chips li{ display:flex; align-items:center; gap:9px; }

.hero__media{ position:relative; padding-left:12px; }
.hero__frame{
  aspect-ratio:4/5; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--surface2);
  box-shadow:0 40px 90px -40px color-mix(in oklab, var(--accent) 45%, transparent);
}
.hero__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__card{
  position:absolute; left:-16px; bottom:40px;
  background:var(--ink); color:var(--ink-fg); border-radius:8px; padding:18px 22px;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.6);
}
.hero__card-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.6;
}
.hero__card-value{
  font-family:var(--font-display); font-weight:700; font-size:24px;
  letter-spacing:-.02em; margin-top:8px;
}
.hero__card-meta{ font-family:var(--font-mono); font-size:12px; opacity:.75; margin-top:4px; }

/* --- Facts strip -------------------------------------------------------- */
.facts{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.facts__clip{ overflow:hidden; }
.facts__grid{
  margin-right:-1px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.fact{ padding:30px 28px; border-right:1px solid var(--line); text-align:center; }
.fact__title{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.fact__body{ font-size:14px; line-height:1.55; color:var(--fg2); margin-top:7px; text-wrap:pretty; }

/* --- Section heads ------------------------------------------------------ */
.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:24px;
}

/* --- Cards -------------------------------------------------------------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; margin-top:36px;
}
.cards--products{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:24px; }

.card{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  border-color:var(--accent); transform:translateY(-4px);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.45);
}
.card__tile{
  height:200px; flex:0 0 auto; width:100%; object-fit:cover; display:block;
  border-bottom:1px solid var(--line); background:var(--surface2);
}
.card__tile--sm{ height:168px; }
.card__body{ padding:32px; display:flex; flex-direction:column; gap:16px; flex:1; }
.card__body--sm{ padding:22px 22px 24px; gap:10px; }
.card__kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg3);
}
.card__title{ font-weight:700; font-size:27px; letter-spacing:-.025em; }
.card__title--sm{ font-size:20px; letter-spacing:-.02em; }
.card__text{ font-size:16px; line-height:1.6; color:var(--fg2); margin:0; text-wrap:pretty; }
.card__text--sm{ font-size:15px; line-height:1.58; }
.card__spec{
  font-family:var(--font-mono); font-size:12px; color:var(--fg3);
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; list-style:none; }
.tags li{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:6px 10px; border-radius:4px; background:var(--surface2); color:var(--fg2);
}

/* --- Reasons ------------------------------------------------------------ */
.reasons{ margin-top:44px; border-top:1px solid var(--line); }
.reasons__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:48px 72px; padding-top:44px;
}
.reason{ display:flex; flex-direction:column; }
.reason__num{
  font-family:var(--font-display); font-weight:800; font-size:42px;
  letter-spacing:-.03em; color:var(--accent); line-height:1;
}
.reason__title{ font-weight:700; font-size:20px; letter-spacing:-.02em; margin:18px 0 0; }
.reason__body{ font-size:15px; line-height:1.62; color:var(--fg2); margin:10px 0 0; text-wrap:pretty; }

/* --- Brands ------------------------------------------------------------- */
.brands-panel{
  border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:38px 32px;
}
.brands-panel__head{
  display:flex; flex-wrap:wrap; gap:20px; align-items:baseline; justify-content:space-between;
}
.brands-panel__note{ font-size:14px; color:var(--fg3); }
.brands{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.brands li{
  font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.02em;
  color:var(--fg2); border:1px solid var(--line); border-radius:6px; padding:12px 20px;
  background:var(--bg); transition:border-color .2s ease, color .2s ease;
}
.brands li:hover{ border-color:var(--accent); color:var(--fg); }

/* --- CTA ---------------------------------------------------------------- */
.cta{
  background:var(--ink); color:var(--ink-fg); border-radius:12px;
  padding:clamp(36px,5vw,64px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px; align-items:center;
}
.cta__title{ font-weight:800; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.03em; text-wrap:balance; }
.cta__text{ font-size:17px; line-height:1.6; opacity:.75; margin:20px 0 0; max-width:46ch; text-wrap:pretty; }
.cta__actions{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.cta__mail{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
  color:var(--ink-fg); opacity:.7; border-bottom:1px solid var(--ink-line); padding-bottom:2px;
}
.cta__mail:hover{ color:var(--ink-fg); opacity:1; }

/* --- Products page ------------------------------------------------------ */
.prod-head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:16px; border-bottom:2px solid var(--fg);
}
.prod-head h2{
  font-weight:800; font-size:26px; letter-spacing:-.025em;
  /* Toppmenyn är klistrad och 77px hög — annars hamnar rubriken bakom den
     när man kommer hit via #ankare från startsidan. */
  scroll-margin-top:100px;
}
.prod-head__note{ font-family:var(--font-mono); font-size:12px; color:var(--fg3); }

.callout{
  border:1px dashed var(--line); border-radius:10px; padding:36px; background:var(--surface);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; align-items:center;
}
.callout h2{ font-weight:700; font-size:24px; letter-spacing:-.02em; }
.callout p{ font-size:16px; line-height:1.6; color:var(--fg2); margin:10px 0 0; max-width:52ch; text-wrap:pretty; }
.callout__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

/* --- Contact page ------------------------------------------------------- */
.contact{
  max-width:var(--wrap); margin:0 auto; padding:72px var(--gut) 96px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:56px; align-items:start;
}
.contact-rows{ margin-top:40px; border-top:1px solid var(--line); }
.contact-row{ display:flex; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); margin:0; }
.contact-row dt{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg3); flex:0 0 108px; padding-top:3px;
}
.contact-row dd{ font-size:16px; line-height:1.5; color:var(--fg); margin:0; }

.pill-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pill-link{
  display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 24px;
  border:1px solid var(--line); border-radius:6px; background:var(--surface);
  color:var(--fg); font-weight:600; font-size:16px;
  transition:border-color .2s ease, color .2s ease;
}
.pill-link:hover{ border-color:var(--accent); color:var(--accent); }

.form-card{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:clamp(24px,3vw,36px);
}
.form-grid{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg3);
}
.input, .select{
  height:46px; padding:0 14px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); font-size:15px; width:100%;
}
.select{ padding:0 12px; }
.textarea{
  padding:13px 14px; border:1px solid var(--line); border-radius:6px; background:var(--bg);
  font-size:15px; line-height:1.55; resize:vertical; font-family:inherit; width:100%;
}
.form-submit{ width:100%; margin-top:4px; }
.form-note{
  font-family:var(--font-mono); font-size:11px; line-height:1.6;
  color:var(--fg3); margin:0; letter-spacing:.03em;
}
.form-note[data-state="error"]{ color:var(--accent); }

/* --- Footer ------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); background:var(--surface); }
.site-footer__grid{
  max-width:var(--wrap); margin:0 auto; padding:56px var(--gut) 32px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px;
}
.site-footer__logo{
  height:58px; width:auto; object-fit:contain; display:block; background:#fff; border-radius:6px;
  padding:6px 10px; border:1px solid var(--line);
}
.site-footer__blurb{ font-size:14px; line-height:1.6; color:var(--fg2); margin:16px 0 0; max-width:36ch; }
.site-footer__head{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg3);
}
.site-footer__list{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  margin:14px 0 0; padding:0; list-style:none; font-size:15px; color:var(--fg2);
}
.site-footer__list a{ color:var(--fg2); }
.site-footer__list a:hover{ color:var(--accent); }
.site-footer__bottom{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) 40px; }
.site-footer__bottom > div{
  border-top:1px solid var(--line); padding-top:20px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--fg3); text-transform:uppercase;
}


/* --- Klickbara produktkort ---------------------------------------------- */
.card--link{ color:inherit; text-decoration:none; }
.card--link:hover,
.card--link:focus-visible{ color:inherit; }
.card--link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.card__spec{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.card__more{
  color:var(--fg3); font-size:14px; flex:0 0 auto;
  transition:color .2s ease, transform .2s ease;
}
.card--link:hover .card__more{ color:var(--accent); transform:translateX(3px); }

/* --- Produktmodal -------------------------------------------------------- */
.pmodal{
  padding:0; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--fg);
  max-width:min(720px, calc(100vw - 32px)); width:100%;
  max-height:min(88vh, 900px); overflow:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
}
.pmodal::backdrop{
  background:color-mix(in oklab, var(--ink) 72%, transparent);
  backdrop-filter:blur(3px);
}
.pmodal__img{
  display:block; width:100%; height:clamp(180px,32vh,300px);
  object-fit:cover; border-bottom:1px solid var(--line); background:var(--surface2);
}
.pmodal__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--fg);
  font-size:22px; line-height:1; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.pmodal__close:hover{ border-color:var(--accent); background:var(--bg); }
.pmodal__body{ padding:clamp(24px,3.5vw,36px); display:flex; flex-direction:column; gap:18px; }
.pmodal__title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.2vw,34px);
  letter-spacing:-.03em; margin:0;
}
.pmodal__lead{ font-size:18px; line-height:1.6; color:var(--fg); margin:0; text-wrap:pretty; }
.pmodal__text{ font-size:16px; line-height:1.68; color:var(--fg2); margin:0; text-wrap:pretty; }
.pmodal__block{ display:flex; flex-direction:column; gap:10px; }
.pmodal__h{
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg3); margin:0;
}
.pmodal__list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
}
.pmodal__list li{
  font-size:14px; padding:7px 12px; border-radius:4px;
  background:var(--surface2); color:var(--fg2);
}
.pmodal__spec{
  font-family:var(--font-mono); font-size:12px; color:var(--fg3);
  margin:0; padding-top:16px; border-top:1px solid var(--line);
}
.pmodal__cta{ align-self:flex-start; }

/* Fallback utan JavaScript: :target visar detaljen infälld i sidan i stället
   för som overlay. Med JS aktivt tar dialogen över och den här regeln gäller
   aldrig. */
html:not(.js) .pmodal:target{
  display:block; position:static; margin:24px auto 0;
  max-height:none; max-width:100%;
}
html:not(.js) .pmodal__close{ display:none; }

@media (max-width:520px){
  .pmodal{ max-width:100%; max-height:94vh; border-radius:10px; }
  .pmodal__cta{ align-self:stretch; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  .card--link:hover .card__more{ transform:none; }
}


/* --- Vanliga frågor ------------------------------------------------------ */
.faq{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:32px 56px; margin-top:28px;
}
.faq__item{ display:flex; flex-direction:column; gap:8px; }
.faq__q{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  letter-spacing:-.015em; margin:0; text-wrap:balance;
}
.faq__a{ font-size:15px; line-height:1.65; color:var(--fg2); margin:0; text-wrap:pretty; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px){
  :root{ --gut:20px; }
  .site-header__inner{ height:auto; flex-wrap:wrap; gap:14px; padding-block:14px; }
  .nav{ order:3; width:100%; margin-left:0; justify-content:flex-start; gap:4px; }
  .header__actions{ margin-left:auto; }
  .hero{ padding-top:56px; gap:44px; }
  .hero__media{ padding-left:0; }
  .hero__card{ left:0; bottom:20px; }
  .section{ padding-top:64px; }
  .callout__actions{ justify-content:flex-start; }
  .contact{ padding-top:56px; gap:40px; }
  .contact-row{ flex-direction:column; gap:6px; }
  .contact-row dt{ flex-basis:auto; padding-top:0; }
  /* Menyn radbryts här och blir 135px hög. */
  .prod-head h2{ scroll-margin-top:158px; }
}

@media (max-width: 520px){
  .btn{ width:100%; }
  .actions .btn, .cta__actions .btn, .callout__actions .btn{ width:100%; }
  .brands-panel{ padding:26px 20px; }
  .card__body{ padding:24px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .card:hover{ transform:none; }
}

@media print{
  .site-header, .theme-toggle, .skip-link{ display:none; }
  body{ background:#fff; color:#000; }
}