/* ═══════════════════════════════════════════════════════════════════════
   CS Auto – sajtens designsystem (redesign 2026)

   Prefix cs- på allt, så att det inte krockar med de äldre stilmallarna
   (layout.css m.fl.) som bokningsflödet och vissa komponenter fortfarande
   använder. Stor text överallt: inget under 18 px. Reg-skylten i
   bokningsheron har sina egna klasser (booking-hero__*) och är oförändrad.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --cs-navy:#0D172E; --cs-navy-deep:#0A1226; --cs-navy-soft:#18264A;
  --cs-milk:#FCFCFB; --cs-surface:#F3F5F9; --cs-line:#E2E7EF; --cs-line-strong:#CBD2DE;
  --cs-ink:#0D172E; --cs-ink-2:#3C4760; --cs-ink-3:#6B7690;
  --cs-green:#4DD97D; --cs-green-ink:#1E8A45; --cs-green-soft:#E6F9EC; --cs-green-fg:#06240F;
  --cs-red:#EF4444; --cs-yellow:#FBBF24; --cs-sky:#2CA8D3; --cs-link:#186F92;
  --cs-display:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cs-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Typskala - aldrig liten text */
  --cs-fs-0:18px; --cs-fs-1:20px; --cs-fs-2:22px; --cs-fs-3:26px;
  --cs-fs-h3:clamp(1.5rem,2.2vw,1.85rem);
  --cs-fs-h2:clamp(2.1rem,4vw,3.4rem);
  --cs-fs-h1:clamp(2.7rem,6.2vw,5.4rem);
  --cs-r:18px; --cs-r-sm:12px; --cs-r-pill:999px;
  --cs-wrap:1240px;
  --cs-head-h:92px;     /* huvudmenyns höjd */
  --cs-util-h:64px;     /* topplistens höjd (piller) */
  --cs-shadow:0 18px 50px rgba(13,23,46,.14);
}

/* ── Grund ─────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.cs-body{margin:0;overflow-x:clip;font-family:var(--cs-body);font-size:var(--cs-fs-1);line-height:1.55;color:var(--cs-ink);
  background:var(--cs-milk);-webkit-font-smoothing:antialiased}
.cs-body h1,.cs-body h2,.cs-body h3{font-family:var(--cs-display);letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.cs-body :where(a){color:inherit;text-decoration:none}
.cs-body img,.cs-body svg{max-width:100%}
.cs-body :where(button){font:inherit;cursor:pointer}
/* Gamla fontawesome.css sätter 2.5rem + navy på alla ikoner - nollställ i sajten */
.cs-body .fa-solid,.cs-body .fa-duotone,.cs-body .fa-regular,.cs-body .fa-brands{font-size:1em;color:inherit;line-height:1;--fa-primary-color:currentColor;--fa-secondary-color:currentColor;--fa-secondary-opacity:.4}
.cs-body :focus-visible{outline:3px solid var(--cs-green);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cs-body *{animation:none!important;transition:none!important;scroll-behavior:auto}}
.cs-wrap{width:min(100% - 40px,var(--cs-wrap));margin-inline:auto}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-skip{position:absolute;left:-999px;top:12px;z-index:1000;background:var(--cs-green);color:var(--cs-green-fg);padding:12px 18px;border-radius:var(--cs-r-pill);font-weight:700}
.cs-skip:focus{left:12px}
.cs-ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em}
.cs-body [id]{scroll-margin-top:calc(var(--cs-head-h) + 24px)}

/* ── Knappar & piller ─────────────────────────────────────────────── */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:var(--cs-r-pill);
  font-weight:700;font-size:var(--cs-fs-1);border:2px solid transparent;transition:transform .15s,filter .15s,background .15s;line-height:1.2;text-decoration:none}
.cs-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cs-btn--green{background:var(--cs-green);color:var(--cs-green-fg);border-color:var(--cs-green)}
.cs-btn--white{background:#fff;color:var(--cs-ink);border-color:#fff}
.cs-btn--outline{background:#fff;color:var(--cs-ink);border-color:var(--cs-line-strong)}
.cs-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cs-btn--ghost:hover{background:rgba(255,255,255,.12)}
.cs-btn--navy{background:var(--cs-navy);color:#fff;border-color:var(--cs-navy)}
.cs-btn--sm{padding:12px 20px;font-size:var(--cs-fs-0)}
.cs-pill{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:var(--cs-r-pill);font-weight:700;font-size:var(--cs-fs-0);
  transition:filter .15s,transform .1s;white-space:nowrap;border:0;line-height:1.2;text-decoration:none}
.cs-pill:hover{filter:brightness(1.12);transform:translateY(-1px)}
.cs-pill--red{background:var(--cs-red);color:#fff}
.cs-pill--white{background:#fff;color:#000}
.cs-pill--yellow{background:var(--cs-yellow);color:#000}
.cs-pill--green{background:var(--cs-green);color:var(--cs-green-fg)}
.cs-dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.7);animation:cs-pulse 2.5s ease-in-out infinite;flex:none}
.cs-dot--off{background:#EF4444;box-shadow:0 0 10px rgba(239,68,68,.6);animation:none}
@keyframes cs-pulse{0%,100%{box-shadow:0 0 4px rgba(52,211,153,.4)}50%{box-shadow:0 0 14px rgba(52,211,153,.9)}}

/* ── Meddelanden ───────────────────────────────────────────────────── */
.cs-flash-wrap{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;gap:8px;padding:0 16px 16px;pointer-events:none}
.cs-flash{pointer-events:auto;margin:0 auto;max-width:720px;width:100%;background:var(--cs-navy);color:#fff;border-radius:var(--cs-r-sm);padding:16px 22px;font-size:var(--cs-fs-0);font-weight:600;box-shadow:var(--cs-shadow);display:flex;gap:12px;align-items:center}
.cs-flash.error,.cs-flash.warning{background:var(--cs-red)}
.cs-flash.success{background:var(--cs-green);color:var(--cs-green-fg)}

/* ── Annons-banner (finns redan som element) ───────────────────────── */
.cs-body .announcement-banner{position:relative;z-index:101;font-size:var(--cs-fs-0);font-weight:700;padding:12px 16px;text-align:center;display:flex;gap:8px;justify-content:center;align-items:center}
.cs-body .announcement-banner + .cs-head{top:var(--cs-banner-h,48px)}

/* ── Header: flyter över heron, blir glas vid scroll ───────────────── */
.cs-head{position:fixed;inset:0 0 auto 0;z-index:100;color:#fff;border-bottom:1px solid transparent;
  transition:background .35s,backdrop-filter .35s,border-color .35s,box-shadow .35s}
.cs-util{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 0;height:var(--cs-util-h);
  overflow:visible;transition:height .35s,opacity .25s,padding .35s}
.cs-util__l,.cs-util__r{display:flex;gap:10px;flex-wrap:nowrap;align-items:center}
.cs-nav{display:flex;align-items:center;gap:24px;height:var(--cs-head-h)}
.cs-brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;color:#fff;font-family:var(--cs-display);font-weight:800;font-size:var(--cs-fs-3)}
.cs-brand img{height:46px;width:auto;display:block;transition:height .3s}
.cs-brand__chip{display:inline-flex;align-items:center;border-radius:10px;padding:6px 12px}
.cs-brand__chip img{height:34px}
.cs-brand .cs-brand__heart{color:var(--cs-red);font-size:20px}
.cs-menu{display:flex;align-items:center;gap:4px;margin:0 0 0 auto;list-style:none;padding:0}
.cs-menu > li{position:relative}
.cs-menu a,.cs-menu summary{display:flex;align-items:center;gap:6px;padding:12px 16px;border-radius:var(--cs-r-pill);font-weight:600;font-size:var(--cs-fs-0);color:#fff;transition:background .15s;white-space:nowrap;list-style:none;cursor:pointer}
.cs-menu a:hover,.cs-menu summary:hover,.cs-menu a.is-on{background:rgba(255,255,255,.16)}
.cs-menu__extra{display:none}
.cs-menu summary::-webkit-details-marker{display:none}
.cs-menu .cs-sub{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:rgba(13,23,46,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--cs-r-sm);padding:8px;display:grid;gap:2px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cs-menu .cs-sub a{border-radius:10px}
.cs-menu .cs-navbtn{background:var(--cs-green);color:var(--cs-green-fg);font-weight:700;padding:12px 20px;margin-left:4px}
.cs-menu .cs-navbtn:hover{filter:brightness(1.06);background:var(--cs-green)}
.cs-head-cta{display:flex;align-items:center;gap:14px;margin-left:auto}
.cs-menu + .cs-head-cta{margin-left:0}
.cs-head-phone{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--cs-fs-0);color:#fff;opacity:.92;white-space:nowrap}
.cs-head-book{padding:12px 22px;border-radius:14px;font-size:var(--cs-fs-0)}   /* "Boka": mindre padding, mindre radie */
.cs-burger{display:none;width:50px;height:50px;border-radius:14px;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;align-items:center;justify-content:center;flex:none;font-size:22px}

.cs-head.is-scrolled{background:rgba(13,23,46,.62);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(255,255,255,.14);box-shadow:0 10px 40px rgba(0,0,0,.28)}
.cs-head.is-scrolled .cs-util{height:0;opacity:0;padding:0;overflow:hidden;pointer-events:none}
.cs-head.is-scrolled .cs-nav{height:78px}
.cs-head.is-scrolled .cs-brand img{height:40px}
.cs-head.is-scrolled .cs-brand__chip img{height:30px}
/* Sidor utan mörk hero får alltid glas, annars står vit meny på vit yta */
.cs-head.is-solid{background:rgba(13,23,46,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(255,255,255,.14)}

/* Öppettider-panelen i topplisten */
.cs-drop{position:relative}
.cs-drop__panel{position:absolute;top:calc(100% + 10px);left:0;z-index:110;min-width:340px;background:rgba(13,23,46,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--cs-r-sm);padding:18px 20px;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.4);font-size:var(--cs-fs-0)}
.cs-drop__panel[hidden]{display:none}
.cs-drop__title{margin:0 0 10px;font-size:var(--cs-fs-2);font-family:var(--cs-display);font-weight:800;color:#fff}
.cs-drop__panel .cs-hours{margin-bottom:12px}
.cs-drop__panel .cs-drop__more{display:inline-flex;align-items:center;gap:8px;color:var(--cs-green);font-weight:700}

/* Öppettidslista (återanvänds i panel, sida, sidfot) */
.cs-hours{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cs-hours li{display:flex;justify-content:space-between;gap:18px;font-size:var(--cs-fs-0)}
.cs-hours li.is-today{font-weight:800}
.cs-hours li .cs-hours__t{font-weight:700;white-space:nowrap}
.cs-hours li.is-closed .cs-hours__t{opacity:.7}
.cs-hours--light li{color:var(--cs-ink)}
.cs-hours__lunch{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.16);font-size:var(--cs-fs-0);opacity:.9}
.cs-hours--light + .cs-hours__lunch,.cs-hours__lunch--light{border-top-color:var(--cs-line);color:var(--cs-ink-2);opacity:1}
.cs-open-now{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--cs-fs-0)}

/* ── Hero ───────────────────────────────────────────────────────────── */
.cs-hero{position:relative;display:flex;align-items:center;color:#fff;background:var(--cs-navy-deep);overflow:hidden;isolation:isolate}
.cs-hero--full{min-height:100svh}
.cs-hero--page{min-height:min(68svh,720px)}
.cs-hero--plain{min-height:0;background:linear-gradient(160deg,var(--cs-navy-soft),var(--cs-navy-deep))}
.cs-hero--spacer{min-height:0;height:calc(var(--cs-head-h) + var(--cs-util-h) + 12px);background:var(--cs-navy)}
.cs-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cs-hero__media--img{background-size:cover;background-position:center}
.cs-hero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,18,38,.55) 0%,rgba(10,18,38,.25) 35%,rgba(10,18,38,.55) 70%,rgba(10,18,38,.92) 100%)}
.cs-hero--page .cs-hero__shade{background:linear-gradient(180deg,rgba(10,18,38,.6) 0%,rgba(10,18,38,.35) 45%,rgba(10,18,38,.85) 100%)}
.cs-hero__inner{padding:calc(var(--cs-head-h) + var(--cs-util-h) + 70px) 0 110px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.cs-hero--page .cs-hero__inner{padding:calc(var(--cs-head-h) + var(--cs-util-h) + 40px) 0 70px}
.cs-hero--plain .cs-hero__inner{padding:calc(var(--cs-head-h) + var(--cs-util-h) + 28px) 0 54px;gap:14px}
.cs-hero--section{min-height:min(60svh,640px)}
.cs-hero--section .cs-hero__inner{padding:90px 0}
.cs-hero--section h1,.cs-hero--section h2.cs-hero__title{font-size:var(--cs-fs-h2)}
.cs-hero--full{min-height:max(100svh,var(--bh-minh,0px))}
/* Bokningsherons egen layout (content_alignment=left) */
.cs-hero--left .cs-hero__inner{text-align:left;align-items:flex-start}
.cs-hero--left .booking-hero__form,.cs-hero--left .cs-hero__chips{justify-content:flex-start}
.cs-hero__title{font-family:var(--cs-display);font-size:var(--cs-fs-h1);letter-spacing:-.02em;line-height:1.08;margin:0;max-width:17ch;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.cs-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--cs-r-pill);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);font-weight:600;font-size:var(--cs-fs-0);letter-spacing:.02em}
.cs-eyebrow .fa-duotone,.cs-eyebrow .fa-solid{font-size:1.05em}
.cs-hero h1{font-size:var(--cs-fs-h1);max-width:17ch;margin:0;text-shadow:0 6px 40px rgba(0,0,0,.45);color:inherit}
.cs-hero--page h1,.cs-hero--plain h1{font-size:var(--cs-fs-h2);max-width:24ch}
.cs-hero__lede{font-size:var(--cs-fs-3);max-width:40ch;color:rgba(255,255,255,.9);text-shadow:0 2px 20px rgba(0,0,0,.45);margin:0}
.cs-hero--page .cs-hero__lede,.cs-hero--plain .cs-hero__lede{font-size:var(--cs-fs-2);max-width:56ch}
.cs-hero__lede em{font-style:italic;color:var(--cs-green);font-weight:600}
.cs-hero__chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cs-hero__chips a,.cs-hero__chips span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--cs-r-pill);overflow-wrap:anywhere;
  background:rgba(10,18,38,.45);border:1px solid rgba(255,255,255,.2);font-size:var(--cs-fs-0);font-weight:600;backdrop-filter:blur(8px);color:#fff}
.cs-hero__chips a:hover{background:rgba(10,18,38,.7)}
.cs-hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.cs-scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:var(--cs-fs-0);font-weight:600;color:rgba(255,255,255,.8)}
.cs-scroll-cue svg{animation:cs-bob 1.8s ease-in-out infinite}
@keyframes cs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* Bokningsformuläret - EXAKT som tidigare (component-booking-hero.html). Rör ej. */
.booking-hero__form{display:flex;flex-wrap:wrap;gap:0;margin-bottom:12px;max-width:100%;justify-content:center}
.booking-hero__reg-input{flex:0 1 220px;min-width:120px;font-size:clamp(1rem,3vw,2rem);padding:14px 12px;border:2px solid var(--bh-text,#FFFFFF);border-left:none;
  border-radius:0;background:rgba(255,255,255,.95);color:#111;font-weight:700;text-transform:uppercase;letter-spacing:clamp(1px,.5vw,3px);outline:none;box-sizing:border-box}
.booking-hero__reg-eu{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#003399;padding:2px 8px;gap:1px;
  border-radius:8px 0 0 8px;border:2px solid var(--bh-text,#FFFFFF);border-right:none}
.booking-hero__reg-eu-stars{width:16px;height:16px}
.booking-hero__reg-eu-country{font-size:.75rem;font-weight:700;color:#fff;letter-spacing:0}
.booking-hero__reg-input::placeholder{color:#888;text-transform:none;font-weight:400;letter-spacing:0}
.booking-hero__reg-input:focus{border-color:var(--bh-sub,#4dd97d);background:#fff}
.booking-hero__submit{padding:14px 20px;font-size:clamp(.85rem,1.5vw,1.1rem);font-weight:700;background:var(--bh-cta,#4dd97d);color:var(--bh-cta-text,#FFFFFF);border:none;
  border-radius:0 8px 8px 0;cursor:pointer;white-space:nowrap;transition:filter .2s;display:flex;align-items:center;gap:8px;flex-shrink:0}
.booking-hero__submit:hover{filter:brightness(.9)}
@media (max-width:768px){
  .booking-hero__form{flex-wrap:wrap;gap:0}
  .booking-hero__reg-eu{border-radius:8px 0 0 8px}
  .booking-hero__reg-input{flex:1;min-width:0;border-radius:0 8px 8px 0;border-left:none;border-right:2px solid var(--bh-text,#FFFFFF);font-size:1.3rem;padding:14px 12px;letter-spacing:2px}
  .booking-hero__submit{width:100%;border-radius:8px;justify-content:center;margin-top:10px}
}
/* (slut på den oförändrade delen) */

/* ── Sektioner ─────────────────────────────────────────────────────── */
.cs-section{padding:clamp(64px,8vw,110px) 0}
.cs-section--surface{background:var(--cs-surface)}
.cs-section--navy{background:var(--cs-navy);color:#fff}
.cs-section--tight{padding-top:clamp(32px,4vw,56px)}
.cs-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.cs-sec-head--center{flex-direction:column;align-items:center;text-align:center}
.cs-sec-head h2,.cs-h2{font-size:var(--cs-fs-h2);margin:0}
.cs-sec-head p,.cs-lede{font-size:var(--cs-fs-2);color:var(--cs-ink-2);max-width:58ch;margin:10px 0 0}
.cs-sec-head--center p{margin-inline:auto}
.cs-section--navy .cs-sec-head p,.cs-section--navy .cs-lede{color:rgba(255,255,255,.82)}
.cs-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--cs-fs-0);letter-spacing:.06em;text-transform:uppercase;color:var(--cs-green-ink);margin-bottom:14px}
.cs-section--navy .cs-kicker{color:var(--cs-green)}
.cs-kicker .fa-duotone,.cs-kicker .fa-solid{font-size:1.15em}

/* Kort (tjänster, kategorier, verkstäder, puffar) */
.cs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:22px}
.cs-card{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r);padding:30px 30px 26px;display:flex;flex-direction:column;gap:14px;color:var(--cs-ink);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.cs-card:hover{transform:translateY(-4px);box-shadow:var(--cs-shadow);border-color:var(--cs-line-strong)}
.cs-card__ic{width:64px;height:64px;border-radius:18px;background:var(--cs-green-soft);color:var(--cs-green-ink);display:grid;place-items:center;font-size:28px}
.cs-card h3{font-size:var(--cs-fs-h3);margin:0}
.cs-card p{color:var(--cs-ink-2);font-size:var(--cs-fs-0);flex:1;margin:0;overflow-wrap:anywhere}
.cs-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;flex-wrap:wrap}
.cs-card__price{font-weight:700;font-size:var(--cs-fs-0);color:var(--cs-ink)}
.cs-card__price span{color:var(--cs-ink-3);font-weight:500}
.cs-card__go{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--cs-r-pill);background:var(--cs-navy);color:#fff;font-weight:700;font-size:var(--cs-fs-0)}
.cs-card__go:hover{background:var(--cs-navy-soft)}
.cs-card--img{padding:0;overflow:hidden}
.cs-card--img .cs-card__img{aspect-ratio:16/10;background:var(--cs-navy-soft) center/cover no-repeat}
.cs-card--img .cs-card__body{padding:26px 30px 26px;display:flex;flex-direction:column;gap:14px;flex:1}

/* Artikel + bild / prosa */
.cs-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.cs-split--img-left .cs-photo{order:-1}
.cs-split h2{font-size:var(--cs-fs-h2);margin:0 0 22px}
.cs-prose{font-size:var(--cs-fs-2);color:var(--cs-ink-2);max-width:62ch;overflow-wrap:anywhere}
.cs-prose p{margin:0 0 18px;font-size:inherit}
.cs-prose strong{color:var(--cs-ink)}
.cs-prose h2,.cs-prose h3,.cs-prose h4{color:var(--cs-ink);margin:28px 0 12px;font-family:var(--cs-display);letter-spacing:-.02em;line-height:1.15}
.cs-prose h2{font-size:var(--cs-fs-h2)}.cs-prose h3{font-size:var(--cs-fs-h3)}.cs-prose h4{font-size:var(--cs-fs-2)}
.cs-prose ul,.cs-prose ol{margin:0 0 18px;padding-left:1.3em}
.cs-prose li{margin:6px 0}
.cs-prose a{color:var(--cs-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cs-prose img{border-radius:var(--cs-r-sm);height:auto}
.cs-prose--light,.cs-prose--light strong,.cs-prose--light h2,.cs-prose--light h3{color:#fff}
.cs-prose--light a{color:var(--cs-green)}
.cs-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.cs-photo{position:relative;aspect-ratio:4/3;border-radius:var(--cs-r);overflow:hidden;background:
  radial-gradient(120% 90% at 80% 10%,rgba(77,217,125,.35),transparent 55%),
  radial-gradient(90% 90% at 10% 90%,rgba(44,168,211,.35),transparent 55%),
  linear-gradient(160deg,var(--cs-navy-soft),var(--cs-navy-deep));box-shadow:var(--cs-shadow);background-size:cover;background-position:center}
.cs-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Bild i sitt eget format (textblock med bild): hela bilden syns, aldrig beskuren eller uppskalad */
.cs-photo--free{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible;border-radius:0;display:flex;justify-content:center}
.cs-photo--free img{width:auto;height:auto;max-width:100%;max-height:min(72vh,680px);object-fit:contain;border-radius:var(--cs-r);box-shadow:var(--cs-shadow)}

/* Logoslinga (slider-komponenten) */
.cs-marquee{overflow:hidden;position:relative;padding:6px 0}
.cs-marquee::before,.cs-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.cs-marquee::before{left:0;background:linear-gradient(90deg,var(--cs-mq-bg,var(--cs-navy)),transparent)}
.cs-marquee::after{right:0;background:linear-gradient(270deg,var(--cs-mq-bg,var(--cs-navy)),transparent)}
.cs-marquee__track{display:flex;gap:40px;width:max-content;animation:cs-slide 40s linear infinite;align-items:center}
.cs-marquee:hover .cs-marquee__track{animation-play-state:paused}
@keyframes cs-slide{to{transform:translateX(-50%)}}
.cs-marquee__logo img{height:64px;width:auto;display:block;filter:grayscale(100%);transition:filter .3s;opacity:.9}
.cs-marquee__logo:hover img{filter:none;opacity:1}
.cs-brandchip{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:var(--cs-r-pill);border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);font-family:var(--cs-display);font-weight:700;font-size:var(--cs-fs-2);letter-spacing:.02em;white-space:nowrap}
.cs-brandchip i{width:10px;height:10px;border-radius:50%;background:var(--cs-green)}

/* Omdömen (Reco) */
.cs-reco{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r);padding:18px;box-shadow:var(--cs-shadow)}
.cs-reco iframe{width:100%;height:225px;border:0;display:block;border-radius:var(--cs-r-sm)}

/* Puff / teaser */
.cs-teaser{display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;padding:38px 44px;border-radius:var(--cs-r);
  background:linear-gradient(135deg,var(--cs-navy),var(--cs-navy-soft));color:#fff;box-shadow:var(--cs-shadow)}
.cs-teaser h3{font-size:var(--cs-fs-h2);margin:0}
.cs-teaser p{font-size:var(--cs-fs-2);color:rgba(255,255,255,.85);margin:10px 0 0;max-width:56ch}
.cs-teasers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px}

/* CTA-band */
.cs-cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.cs-cta h2{font-size:var(--cs-fs-h2);margin:0}
.cs-cta p{font-size:var(--cs-fs-2);color:var(--cs-ink-2);max-width:50ch;margin:0}
.cs-cta .cs-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* Tjänstsida: innehåll + bokningskort */
.cs-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:clamp(28px,4vw,56px);align-items:start}
.cs-bookbox{position:sticky;top:110px;background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r);padding:30px;box-shadow:var(--cs-shadow)}
.cs-bookbox h3{font-size:var(--cs-fs-h3);margin:0 0 16px}
.cs-checks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.cs-checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--cs-fs-0);color:var(--cs-ink-2)}
.cs-checks li .fa-duotone,.cs-checks li .fa-solid{color:var(--cs-green-ink);margin-top:3px}
.cs-price{font-family:var(--cs-display);font-size:var(--cs-fs-h2);font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.cs-price small{font-size:var(--cs-fs-0);font-weight:600;color:var(--cs-ink-3);letter-spacing:0}
.cs-bookbox .cs-btn{width:100%}
.cs-bookbox__alt{margin:18px 0 0;font-size:var(--cs-fs-0);color:var(--cs-ink-2);text-align:center;line-height:1.6}
.cs-bookbox__alt a{color:var(--cs-link);font-weight:700;white-space:nowrap}

/* Kontaktkort (hitta hit, verkstäder) */
.cs-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.cs-contact .cs-card{gap:8px}
.cs-contact .cs-card p{flex:0}
.cs-contact .cs-card a{color:var(--cs-link);font-weight:700}
.cs-map{border-radius:var(--cs-r);overflow:hidden;border:1px solid var(--cs-line);box-shadow:var(--cs-shadow);background:var(--cs-surface)}
.cs-map iframe{width:100%;height:460px;border:0;display:block}
.cs-map__note{padding:16px 22px;font-size:var(--cs-fs-0);color:var(--cs-ink-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.cs-map__note a{color:var(--cs-link);font-weight:700}

/* Tabeller (öppettider) */
.cs-table{width:100%;border-collapse:collapse;font-size:var(--cs-fs-1)}
.cs-table th,.cs-table td{padding:16px 18px;border-bottom:1px solid var(--cs-line);text-align:left}
.cs-table th{font-weight:700;color:var(--cs-ink-2)}
.cs-table tr.is-today td,.cs-table tr.is-today th{background:var(--cs-green-soft)}
.cs-table td.cs-closed{color:var(--cs-ink-3)}

/* ── Sidfot ─────────────────────────────────────────────────────────── */
.cs-foot{background:var(--cs-navy-deep);color:#fff;padding:72px 0 40px;font-size:var(--cs-fs-0)}
.cs-foot__grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px}
.cs-foot h4{font-family:var(--cs-display);font-size:var(--cs-fs-2);margin:0 0 16px;color:#fff}
.cs-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cs-foot a{color:rgba(255,255,255,.85);font-size:var(--cs-fs-0)}
.cs-foot a:hover{color:#fff;text-decoration:underline}
.cs-foot .cs-foot__big{font-family:var(--cs-display);font-size:var(--cs-fs-3);font-weight:700;display:block;color:#fff;margin-bottom:8px;overflow-wrap:anywhere}
.cs-foot__row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cs-foot .cs-foot__addr{color:rgba(255,255,255,.8);font-size:var(--cs-fs-1);line-height:1.5;margin:0 0 14px}
.cs-foot__logo{height:44px;width:auto;margin-bottom:22px;display:block}
.cs-foot__logo--chip{background:#fff;border-radius:10px;padding:8px 12px;display:inline-block;margin-bottom:22px}
.cs-foot__logo--chip img{height:32px;width:auto;display:block}
.cs-foot .cs-hours li{color:rgba(255,255,255,.85)}
.cs-foot .cs-hours__lunch{border-top-color:rgba(255,255,255,.16)}
.cs-foot__bottom{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(255,255,255,.7)}
.cs-foot__bottom a{display:inline-flex;align-items:center;gap:8px}
.cs-foot__credit{margin:28px 0 0;text-align:center;font-size:var(--cs-fs-0);color:rgba(255,255,255,.55)}
.cs-foot__credit a{color:rgba(255,255,255,.62)}
.cs-foot__credit a:hover{color:#fff}
.cs-foot__social{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.cs-foot__social a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--cs-r-pill);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.cs-foot__edit{color:rgba(255,255,255,.5)!important;font-size:var(--cs-fs-0);margin-left:8px}

/* Personalens flytande verktygsknapp */
.cs-fab{position:fixed;left:20px;bottom:20px;z-index:130;width:54px;height:54px;border-radius:50%;background:var(--cs-green);color:var(--cs-green-fg);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);border:0;font-size:22px}
.cs-fab-panel{position:fixed;left:20px;bottom:86px;z-index:130;background:rgba(13,23,46,.95);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16);border-radius:var(--cs-r-sm);padding:12px;display:none;min-width:260px;color:#fff}
.cs-fab-panel.is-open{display:grid;gap:4px}
.cs-fab-panel a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-weight:600;font-size:var(--cs-fs-0);color:#fff}
.cs-fab-panel a:hover{background:rgba(255,255,255,.12)}
.cs-fab-panel h5{margin:4px 12px 8px;font-size:var(--cs-fs-0);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}

/* Personalens penn-länkar i innehållet */
.cs-edit{display:inline-flex;align-items:center;gap:6px;font-size:var(--cs-fs-0);color:var(--cs-link);font-weight:700;margin-left:10px;vertical-align:middle}
.cs-edit--light{color:var(--cs-green)}

/* ── Mobil ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .cs-menu,.cs-head-phone{display:none}
  .cs-burger{display:inline-flex}
  .cs-head-cta,.cs-menu + .cs-head-cta{margin-left:auto}
  .cs-head.is-open .cs-menu{display:flex;position:absolute;left:20px;right:20px;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:4px;
    padding:14px;border-radius:var(--cs-r);background:rgba(13,23,46,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16);
    max-height:calc(100vh - 140px);overflow:auto}
  .cs-head.is-open .cs-menu a,.cs-head.is-open .cs-menu summary{font-size:var(--cs-fs-2);padding:14px 16px;white-space:normal;overflow-wrap:anywhere}
  .cs-head.is-open .cs-menu .cs-sub{position:static;background:transparent;border:0;box-shadow:none;padding:0 0 0 16px;backdrop-filter:none}
  .cs-head.is-open .cs-menu .cs-menu__extra{display:block;border-top:1px solid rgba(255,255,255,.16);margin-top:8px;padding-top:8px}
  .cs-split,.cs-detail{grid-template-columns:minmax(0,1fr)}
  .cs-foot__grid{grid-template-columns:1fr 1fr}
  .cs-split--img-left .cs-photo{order:0}
  .cs-bookbox{position:static}
  .cs-teaser{grid-template-columns:1fr}
}
@media (max-width:700px){
  :root{--cs-fs-0:18px;--cs-fs-1:19px;--cs-fs-2:21px;--cs-fs-3:24px;--cs-head-h:76px;--cs-util-h:0px}
  .cs-util{display:none}
  .cs-brand img{height:32px}
  .cs-brand__chip img{height:26px}
  .cs-nav{gap:12px}
  .cs-head-book{padding:12px 18px}
  .cs-burger{width:48px;height:48px}
  .cs-hero__inner{padding:calc(var(--cs-head-h) + 56px) 0 96px}
  .cs-hero--plain .cs-hero__inner{padding:calc(var(--cs-head-h) + 36px) 0 44px}
  .cs-hero--spacer{height:calc(var(--cs-head-h) + 12px)}
  .cs-section{padding:56px 0}
  .cs-card{padding:24px}
  .cs-card--img{padding:0}
  .cs-head.is-scrolled .cs-brand img{height:32px}
  .cs-head.is-scrolled .cs-brand__chip img{height:26px}
  .cs-head.is-scrolled .cs-nav{height:var(--cs-head-h)}
  .cs-teaser{padding:28px 24px}
  .cs-map iframe{height:320px}
  .cs-foot__grid{grid-template-columns:1fr}
  .cs-drop__panel{min-width:0;left:0;right:0}
}
@media (max-width:360px){
  .cs-brand img{height:28px}
  .cs-brand__chip img{height:22px}
  .cs-head-book{padding:12px 14px}
  .cs-nav{gap:8px}
}