/* Layout: www-startsidan putsad i samma formspråk som webbshopen (prototyp v5): Åströms färger och knappar, 1410 px, sandton, kort med 4 px hörn, mörk sidfot. Sajten är alltid ljus som www. */
:root{
  --s-accent:#E2C04E; --s-accent-h:#d8b540; --s-dark:#3b372b; --s-bg:#f6f6f6; --s-grey:#EBEBEB; --s-line:rgba(59,55,43,.12); --s-line2:rgba(59,55,43,.22); --s-dov:#6f6a5e; --s-ok:#2f6b3a; --s-white:#ffffff; --s-tint:#f7f4ea; --s-sand:#efeadb; --s-guld:#8a7320; --s-ljus:#e3dfd3; --s-text2:#4d493d; --s-blue:#1f4fa8;
  --serif:"new-science-serif",Georgia,"Times New Roman",serif; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--s-bg)}
body{color:var(--s-dark);font:16px/1.55 var(--sans);letter-spacing:.56px}
.s{container-type:inline-size}
.s img{height:auto}
.s *{min-width:0}
.s a{color:inherit}
.s button,.s input,.s select,.s textarea{font-family:var(--sans);color:var(--s-dark);letter-spacing:.3px}
.s svg{flex:0 0 auto}
:focus-visible{outline:2px solid var(--s-dark);outline-offset:2px}
.inre{max-width:1410px;margin:0 auto;padding-inline:32px;width:100%}
.sub{font:600 13px/1.2 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--s-guld)}
.h2{font:600 clamp(30px,3.4cqi,48px)/1.08 var(--serif);letter-spacing:-1px;margin:0;text-wrap:balance}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:2px;border:0;font:400 16px var(--sans);letter-spacing:.4px;background:var(--s-accent);color:var(--s-dark);cursor:pointer;text-decoration:none;transition:border-radius .2s ease,background .15s ease;white-space:nowrap}
.btn:hover{border-radius:22px}
.btn.mork{background:var(--s-dark);color:var(--s-white)}
.btn.kant{background:transparent;color:var(--s-white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.btn.kant:hover{background:var(--s-white);color:var(--s-dark)}
.lank{font-weight:700;font-size:15px;text-underline-offset:4px;display:inline-flex;align-items:center;gap:8px}
.mock{font-size:12.5px;color:var(--s-dov)}

/* Sidhuvud */
.sh{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--s-white);border-bottom:1px solid var(--s-line)}
.sh .inre{display:flex;align-items:center;gap:28px;min-height:72px}
.sh .logo img{height:48px;width:auto;display:block}
.sh nav{display:flex;gap:24px;font-size:15px;font-weight:600;margin-left:auto}
.sh nav a{text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.sh nav a:hover{border-color:var(--s-accent)}
.sh .knappar{display:flex;gap:10px}
.sh .knappar .btn{height:42px;padding:0 18px;font-size:15px}
.burg{display:none;border:0;background:none;width:40px;height:40px;cursor:pointer;place-items:center;margin-left:auto}
.burg span{display:block;width:22px;height:14px;border-block:2px solid var(--s-dark);position:relative}
.burg span::after{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--s-dark)}
.mobmeny{display:none}

/* Hjälte */
.hjalte{position:relative;color:var(--s-white);background:#2a2620}
.hjalte .foto{position:absolute;inset:0;background:none 70% 60%/cover no-repeat}
.hjalte .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,28,22,.88) 0%,rgba(31,28,22,.62) 42%,rgba(31,28,22,.08) 75%)}
.hjalte .inre{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end;padding-block:96px 64px;min-height:600px}
.hj-text{display:grid;gap:22px;max-width:620px;align-self:center}
.hj-text .sub{color:var(--s-accent)}
.hjalte h1{font:600 clamp(42px,5.2cqi,68px)/1 var(--serif);letter-spacing:-2px;margin:0;text-wrap:balance}
.hjalte p{margin:0;font-size:17px;color:#ece7da;max-width:52ch}
.hj-knappar{display:flex;gap:12px;flex-wrap:wrap}
.betyg{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#ece7da;text-decoration:none}
.betyg b{color:var(--s-accent);letter-spacing:2px}
.hittakort{justify-self:end;width:100%;max-width:420px;background:var(--s-white);color:var(--s-dark);border-radius:4px;padding:22px;display:grid;gap:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hittakort h2{font:600 24px/1.15 var(--serif);margin:0;letter-spacing:-.4px}
.hittakort p{margin:0;font-size:14px;color:var(--s-dov)}
.skylt{display:flex;align-items:stretch;border:2px solid var(--s-dark);border-radius:4px;overflow:hidden;height:58px;background:var(--s-white)}
.skylt .eu{background:var(--s-blue);color:#fff;width:36px;display:grid;place-items:center;align-content:center;gap:2px;font:800 13px var(--sans)}
.skylt .eu i{width:14px;height:14px;border-radius:50%;border:1.5px dotted #f2cf3a}
.skylt input{border:0;font:800 26px/1 var(--sans);letter-spacing:4px;padding:0 14px;width:100%;text-transform:uppercase;background:transparent;outline:0}
.skylt:focus-within{box-shadow:0 0 0 3px var(--s-accent)}
.hittakort .btn{width:100%}
.hittakort .smal{font-size:13px;color:var(--s-dov);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Gult infofält */
.infofalt{background:var(--s-accent)}
.infofalt .inre{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding-block:18px;font-size:14.5px;font-weight:600}
.infofalt span{display:inline-flex;align-items:center;gap:8px}
.infofalt svg{width:18px;height:18px}

/* Sektioner */
.sekt{padding-block:96px 0}
.sekt-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.sekt-top>div{display:grid;gap:12px;max-width:720px}
.sekt-top p{margin:0;color:var(--s-text2)}

/* Tjänster */
.tjanster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tj{background:var(--s-white);border-radius:4px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;border:1px solid var(--s-line);transition:transform .15s ease,border-color .15s ease}
.tj:hover{transform:translateY(-3px);border-color:var(--s-line2)}
.tj img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;max-width:100%}
.tj .tx{padding:18px 20px 20px;display:grid;gap:8px;align-content:start}
.tj b{font:600 22px/1.15 var(--serif);letter-spacing:-.3px}
.tj span{font-size:14.5px;color:var(--s-text2)}
.tj em{font-style:normal;font-weight:700;font-size:14px;display:inline-flex;gap:8px;align-items:center;margin-top:4px}
.tj em::after{content:"→";color:var(--s-guld)}
.tjanster:has(.tj.shop){grid-template-columns:repeat(3,minmax(0,1fr))}
.tj.shop{background:var(--s-accent);color:var(--s-dark);border-color:var(--s-accent);grid-column:span 2;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:none}
.tj.shop:hover{border-color:var(--s-accent-h)}
.shopbild{display:flex;align-items:center;justify-content:center;overflow:hidden;height:100%;min-height:300px}
html body .tj.shop .shopbild{background:transparent!important}
.shopbild img{width:236px!important;height:236px!important;aspect-ratio:auto!important;max-width:none!important;flex:none;object-fit:contain;mix-blend-mode:multiply;margin-left:-118px}
.shopbild img:first-child{margin-left:0}
.tj.shop .tx{padding:36px 40px;align-content:center;gap:12px}
.tj.shop span{color:var(--s-dark)}
html body .tj.shop .sub{color:var(--s-dark)!important;opacity:.75}
.tj.shop b{font-size:36px;line-height:1.1}
.tj.shop .tx>span:not(.sub){font-size:16px}
.tj.shop i.btn{font-style:normal;justify-self:start;margin-top:8px;background:var(--s-dark);color:var(--s-white)}

/* Webbshopsbandet */
.shopband{margin-top:96px;background:radial-gradient(90% 140% at 90% 0%,var(--s-white) 0 30%,var(--s-sand) 100%);border-block:1px solid var(--s-line)}
.shopband .inre{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;align-items:center;padding-block:72px}
.shopband .txt{display:grid;gap:18px;align-content:start}
.shopband p{margin:0;color:var(--s-text2)}
.satt{display:grid;gap:10px;font-size:14.5px}
.satt div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center}
.satt svg{width:20px;height:20px}
.satt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.kort-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dack{background:var(--s-white);border:1px solid var(--s-line);border-radius:4px;padding:16px;display:grid;gap:12px;text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.dack:hover{transform:translateY(-2px);border-color:var(--s-line2)}
.dack .foto2{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(100% 80% at 50% 45%,var(--s-white) 0 50%,var(--s-tint) 100%);border-radius:4px}
.dack .foto2 img{width:78%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.ring{width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--s-white) 0 33%,#8d887b 34% 37%,#2b2924 38% 100%);box-shadow:0 14px 18px -10px rgba(59,55,43,.35)}
.dack .sub{font-size:11px}
.dack b{font:600 20px/1.15 var(--serif)}
.dack .rad{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--s-line);padding-top:12px}
.dack .rad span{font-size:12.5px;color:var(--s-ok);font-weight:700}
.dack .rad strong{font:800 19px var(--sans);font-variant-numeric:tabular-nums}
.eul{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--s-dov);font-weight:600}
.eul em{font-style:normal;color:#fff;border-radius:3px;min-width:20px;height:20px;display:inline-grid;place-items:center;font:800 11px var(--sans)}
.gB{background:#5aa52a}.gC{background:#b5a816}.gD{background:#e09a1b}

/* Två paneler */
.paneler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.panel{border-radius:4px;overflow:hidden;display:grid;grid-template-rows:240px auto;background:var(--s-white);border:1px solid var(--s-line)}
.panel img{width:100%;height:100%;object-fit:cover;display:block}
.panel .tx{padding:28px;display:grid;gap:14px;align-content:start}
.panel p{margin:0;color:var(--s-text2)}
.panel ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;font-size:14.5px}
.panel li{display:flex;gap:8px;align-items:flex-start}
.panel li::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--s-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%233b372b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.panel.mork{background:var(--s-dark);color:var(--s-white);border-color:var(--s-dark)}
.panel.mork p{color:var(--s-ljus)}
.panel.mork .sub{color:var(--s-accent)}
.panel .knapprad{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}

/* Därför Åströms */
.darfor{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:56px;align-items:start}
.punkter{display:grid;gap:22px}
.punkter div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px}
.punkter .ik{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--s-accent);display:grid;place-items:center}
.punkter .ik svg{width:22px;height:22px}
.punkter b{font:600 20px/1.2 var(--serif)}
.punkter span{font-size:15px;color:var(--s-text2)}
.citat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.citat figure{margin:0;background:var(--s-white);border:1px solid var(--s-line);border-radius:4px;padding:22px;display:grid;gap:14px;align-content:space-between}
.citat blockquote{margin:0;font:500 18px/1.45 var(--serif);letter-spacing:0}
.citat figcaption{font-size:13px;color:var(--s-dov);display:flex;gap:8px;align-items:center}
.citat figcaption b{color:var(--s-accent);letter-spacing:2px}
.betygsrad{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.betygsrad strong{font:800 44px/1 var(--sans);letter-spacing:-1px}
.betygsrad span{color:var(--s-dov);font-size:14.5px}
.betygsrad b{color:var(--s-accent);font-size:20px;letter-spacing:3px}

/* Gotlandstext */
.gotland{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;border-top:1px solid var(--s-line2);padding-top:56px}
.gotland .tx{display:grid;gap:14px;max-width:68ch;color:var(--s-text2)}
.gotland .tx p{margin:0}

/* Frågor */
.fragor{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.acc{border-top:1px solid rgba(59,55,43,.16)}
.acc details{border-bottom:1px solid rgba(59,55,43,.16)}
.acc summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:14px;align-items:center;padding:18px 0 20px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary b{font:600 21px/1.25 var(--serif)}
.pil{width:18px;height:18px;display:grid;place-items:center;transition:transform .2s ease}
.pil::before{content:"";width:9px;height:9px;border-right:2px solid var(--s-dark);border-bottom:2px solid var(--s-dark);transform:translateY(-3px) rotate(45deg)}
details[open]>summary .pil{transform:rotate(180deg)}
.acc .in{padding:0 0 30px;color:var(--s-text2);max-width:64ch}
.acc .in p{margin:0}
.acc .in a{color:var(--s-dark)}

/* Kontakt */
.kontakt{margin-top:96px;background:var(--s-grey)}
.kontakt .inre{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding-block:72px}
.kontakt .tx{display:grid;gap:18px;align-content:start}
.kontakt p{margin:0;color:var(--s-text2)}
.kfakta{display:grid;gap:12px;font-size:15px}
.kfakta div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.kfakta svg{width:20px;height:20px;margin-top:2px}
.kform{background:var(--s-white);border-radius:4px;padding:28px;display:grid;gap:16px}
.kform .rub{font:700 14px var(--sans)}
.val{display:flex;flex-wrap:wrap;gap:8px}
.val label{position:relative;border:1px solid var(--s-line2);border-radius:2px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;background:var(--s-white)}
.val input{position:absolute;opacity:0;pointer-events:none}
.val label:has(input:checked){background:var(--s-dark);color:var(--s-white);border-color:var(--s-dark)}
.val label:has(input:focus-visible){outline:2px solid var(--s-dark);outline-offset:2px}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f{display:grid;gap:6px;font-size:13.5px;font-weight:700}
.f.hel{grid-column:1/-1}
.f input,.f textarea{height:48px;border:1px solid var(--s-line2);border-radius:2px;padding:0 14px;font:500 16px var(--sans);background:var(--s-white);width:100%}
.f textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--s-dark);box-shadow:0 0 0 3px rgba(226,192,78,.45)}
.tack{display:none;background:var(--s-tint);border-radius:4px;padding:14px;font-weight:700}
.tack.syns{display:block}

/* Sidfot */
.sf{background:var(--s-dark);color:var(--s-white);margin-top:0}
.sf .inre{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:64px 28px;font-size:14.5px}
.sf img{height:48px;width:auto}
.sf b{display:block;font:600 20px/1.4 var(--serif);letter-spacing:.5px;margin-bottom:12px}
.sf ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;color:var(--s-ljus)}
.sf ul a{text-decoration:none}
.sf ul a:hover{color:var(--s-accent)}
.sf p{margin:12px 0 0;color:var(--s-ljus);max-width:34ch}
.sf .bolag{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;font-size:12.5px;color:var(--s-ljus);display:flex;gap:18px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.tj:hover,.dack:hover{transform:none}}

/* ---------- mobil ---------- */
@container (max-width:1100px){
  .sh nav{display:none}
  .sh .knappar{margin-left:auto}
  .tjanster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tjanster:has(.tj.shop){grid-template-columns:repeat(2,minmax(0,1fr))}
  .tj.shop{grid-column:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .shopbild{min-height:0;aspect-ratio:16/10}
  .shopbild img{width:140px!important;height:140px!important;margin-left:-70px}
  .tj.shop .tx{padding:18px 20px 20px;gap:8px;align-content:start}
  .tj.shop b{font-size:24px}
  .hjalte .inre{grid-template-columns:minmax(0,1fr);align-items:start}
  .hittakort{justify-self:start}
}
@container (max-width:760px){
  .inre{padding-inline:16px}
  .sh .inre{min-height:60px;gap:10px}
  .sh .logo img{height:40px}
  .sh .knappar{display:none}
  .burg{display:grid}
  .mobmeny{display:grid;padding:4px 16px 16px;border-top:1px solid var(--s-line)}
  .mobmeny[hidden]{display:none}
  .mobmeny a{padding:12px 0;font-weight:700;text-decoration:none;border-bottom:1px solid var(--s-line)}
  .mobmeny .btn{margin-top:12px}
  .hjalte .foto{background-position:72% 50%}
  .hjalte .foto::after{background:linear-gradient(180deg,rgba(31,28,22,.55) 0%,rgba(31,28,22,.85) 60%,rgba(31,28,22,.95) 100%)}
  .hjalte .inre{padding-block:48px 28px;min-height:0;gap:28px}
  .hjalte h1{font-size:40px;letter-spacing:-.6px}
  .hjalte p{font-size:16px}
  .hittakort{max-width:none;padding:18px}
  .infofalt .inre{display:grid;gap:10px;font-size:14px}
  .sekt{padding-block:64px 0}
  .sekt-top{margin-bottom:22px}
  .h2{font-size:32px;letter-spacing:-.6px}
  .tjanster{grid-template-columns:minmax(0,1fr);gap:12px}
  .tj{grid-template-columns:112px minmax(0,1fr);grid-template-rows:none}
  .tj img{aspect-ratio:auto;height:100%}
  .tj .tx{padding:14px 16px}
  .tj b{font-size:19px}
  .tj span{font-size:13.5px}
  .tjanster:has(.tj.shop){grid-template-columns:minmax(0,1fr)}
  .tj.shop{grid-template-columns:112px minmax(0,1fr);grid-template-rows:none}
  .shopbild{height:100%;aspect-ratio:auto}
  .shopbild img{width:120px!important;height:120px!important;margin-left:0}
  .shopbild img:nth-child(n+2){display:none}
  .tj.shop .tx{padding:14px 16px}
  .tj.shop b{font-size:19px}
  .tj.shop .tx>span:not(.sub){font-size:13.5px}
  .tj.shop i.btn{height:38px;padding:0 14px;font-size:14px;margin-top:4px}
  .shopband{margin-top:64px}
  .shopband .inre{grid-template-columns:minmax(0,1fr);padding-block:48px;gap:28px}
  .kort-lista{grid-template-columns:minmax(0,1fr);gap:10px}
  .dack{grid-template-columns:96px minmax(0,1fr);align-items:center;padding:12px}
  .dack .foto2{aspect-ratio:1}
  .dack .rad{grid-column:1/-1}
  .paneler,.darfor,.citat,.gotland,.fragor{grid-template-columns:minmax(0,1fr)}
  .darfor,.gotland,.fragor{gap:28px}
  .panel{grid-template-rows:180px auto}
  .panel .tx{padding:20px}
  .panel ul{grid-template-columns:minmax(0,1fr)}
  .kontakt{margin-top:64px}
  .kontakt .inre{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:48px}
  .kform{padding:18px}
  .fg{grid-template-columns:minmax(0,1fr)}
  .sf .inre{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .sf .inre>div:first-child{grid-column:1/-1}
}

/* ===== Gemensamt för undersidorna ===== */
.sh nav .meny{position:relative}
.sh nav .meny>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-left:8px}
.undermeny{position:absolute;left:-18px;top:100%;padding-top:14px;display:none;z-index:30}
.undermeny div{background:var(--s-white);border:1px solid var(--s-line);border-radius:4px;box-shadow:0 24px 50px -24px rgba(31,28,22,.45);padding:8px;display:grid;min-width:260px}
.undermeny a{padding:9px 12px;border-radius:2px;border:0!important;font-weight:600}
.undermeny a:hover{background:var(--s-tint)}
.meny:hover .undermeny,.meny:focus-within .undermeny{display:block}
.sh nav a.pa{border-color:var(--s-accent)}
.smul{font-size:13.5px;color:var(--s-dov);display:flex;gap:8px;flex-wrap:wrap}
.smul a{text-decoration:none}
.smul a:hover{text-decoration:underline}

.topp{background:radial-gradient(90% 140% at 90% 0%,var(--s-white) 0 30%,var(--s-sand) 100%);border-bottom:1px solid var(--s-line)}
.topp .inre{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:40px 56px}
.topp.utan .inre{grid-template-columns:minmax(0,1fr);max-width:1410px}
.topp .txt{display:grid;gap:20px;align-content:start}
.topp h1{font:600 clamp(36px,4.2cqi,56px)/1.04 var(--serif);letter-spacing:-1.4px;margin:0;text-wrap:balance}
.topp .ingress{margin:0;font-size:18px;color:var(--s-text2);max-width:58ch}
.topp .ingress p{margin:0 0 12px}
.topp .knapprad{display:flex;gap:12px;flex-wrap:wrap}
.topp .bild{border-radius:4px;overflow:hidden;aspect-ratio:4/3;max-width:100%;box-shadow:0 30px 50px -34px rgba(31,28,22,.55)}
.topp .bild img{width:100%;height:100%;object-fit:cover;display:block}
.faktarad{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-width:640px}
.faktarad div{background:var(--s-white);border:1px solid var(--s-line);border-radius:4px;padding:14px 16px;display:grid;gap:2px}
.faktarad span{font:600 12px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--s-guld)}
.faktarad b{font:600 21px/1.2 var(--serif)}
.faktarad small{font-size:13px;color:var(--s-dov)}
.btn.kant2{background:transparent;color:var(--s-dark);box-shadow:inset 0 0 0 1px var(--s-line2)}
.btn.kant2:hover{background:var(--s-white)}

.lasyta{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:start;padding-block:64px 0}
.artikel{display:grid;gap:16px;max-width:72ch;font-size:17px;line-height:1.7;color:var(--s-text2)}
.artikel p{margin:0}
.artikel h2,.artikel h3{font:600 28px/1.15 var(--serif);color:var(--s-dark);letter-spacing:-.5px;margin:20px 0 0}
.artikel ul{margin:0;padding-left:20px;display:grid;gap:6px}
.artikel a{color:var(--s-dark);text-underline-offset:3px}
.artikel strong{color:var(--s-dark)}
.artikel figure{margin:16px 0;border-radius:4px;overflow:hidden}
.artikel figure img{width:100%;display:block;aspect-ratio:16/8;object-fit:cover}
.artikel figcaption{font-size:13px;color:var(--s-dov);padding-top:8px}
.sidokort{position:sticky;top:96px;background:var(--s-white);border:1px solid var(--s-line);border-radius:4px;padding:24px;display:grid;gap:14px}
.sidokort h2{font:600 24px/1.2 var(--serif);margin:0;letter-spacing:-.4px}
.sidokort p{margin:0;font-size:14.5px;color:var(--s-text2)}
.sidokort .btn{width:100%}
.sidokort .rad{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:14px;align-items:start}
.sidokort .rad svg{width:18px;height:18px;margin-top:2px}
.sidokort hr{border:0;border-top:1px solid var(--s-line);margin:2px 0;width:100%}
.sidokort .shopmini{background:var(--s-tint);border-radius:4px;padding:14px;display:grid;gap:10px}
.sidokort .shopmini b{font:600 18px var(--serif)}
.sidokort .skylt{height:50px}
.sidokort .skylt input{font-size:22px}

.relaterat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.relaterat .tj{grid-template-rows:auto 1fr}

.siffror{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.siffror div{background:var(--s-dark);color:var(--s-white);border-radius:4px;padding:22px;display:grid;gap:4px}
.siffror b{font:600 40px/1 var(--serif);color:var(--s-accent);letter-spacing:-1px}
.siffror span{font-size:14px;color:var(--s-ljus)}

.artikelkort{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.artikelkort .tj img{aspect-ratio:16/8}
.artikelkort .tj .sub{font-size:12px}

.kontaktsida{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;padding-block:56px 0}
.kontaktsida .artikel{font-size:16px}
.f .valfri{font-weight:500;color:var(--s-dov)}
.gdpr{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:13.5px;color:var(--s-text2);align-items:start}
.gdpr input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--s-dark)}
.gdpr a{color:var(--s-dark)}
.felt{color:#8a4b14;font-size:12.5px;font-weight:700;display:none}
.f.fel input,.gdpr.fel input{outline:2px solid #8a4b14}
.f.fel .felt,.gdpr.fel .felt{display:block}
.villkor{font-size:13px;color:var(--s-dov);margin:0}
.notis-sida{max-width:720px;padding-block:72px 96px;display:grid;gap:16px}
.notis-sida h1{font:600 clamp(36px,5cqi,54px)/1.04 var(--serif);letter-spacing:-1px;margin:0}
.notis-sida p{margin:0;color:var(--s-text2);font-size:17px}
.prova{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--s-ljus);background:rgba(255,255,255,.08);border-radius:4px;padding:10px 14px;grid-column:1/-1}
.prova b{color:var(--s-accent)}

@container (max-width:1100px){
  .lasyta{grid-template-columns:minmax(0,1fr);gap:40px}
  .sidokort{position:static}
  .relaterat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:760px){
  .topp .inre{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:20px 32px}
  .topp h1{font-size:34px;letter-spacing:-.6px}
  .topp .ingress{font-size:16px}
  .topp .bild{order:-1;aspect-ratio:16/10}
  .lasyta{padding-block:40px 0}
  .artikel{font-size:16px}
  .artikel h2,.artikel h3{font-size:24px}
  .relaterat,.artikelkort,.siffror,.kontaktsida{grid-template-columns:minmax(0,1fr)}
  .kontaktsida{gap:32px;padding-block:32px 0}
  .siffror b{font-size:32px}
  .mobmeny .under{padding-left:14px;font-weight:600}
}
/* Kontaktsidan: samma luft ovanför sidfoten som övriga sidor (100 px) */
.kontaktsida{padding-bottom:100px}

/* Puts v1: samma innehåll och funktion, bara utseendet närmare astromssanda.se. Läggs sist, gäller både www- och webbshop-prototypen. */
:root{
  --s-guld:#d2ae3c;      /* etiketter i Åströms guld i stället för oliv */
  --s-dov:#57534a;       /* mindre grått i småtexter */
  --s-text2:#3b372b;
}

/* 1. Platt bakgrund överst i stället för beige toning (som Åströms grå sektioner) */
html body .sokhuvud, html body .topp, html body .shopband{background:var(--s-bg)!important}
/* Webbshoppens startsida (www:s .hjalte är fotot och ska stå kvar) */
/* Produktbilder på vitt, inte sandtoning */
html body .foto:not(.hjalte > .foto), html body .foto2, html body .bild, html body .battbild, html body .shopbild{background:var(--s-white)!important}

/* 2. Etiketter i Åströms stil: 14 px, guld, vikt 600, luftigare */
html body .sub{font:600 14px/1.3 var(--sans)!important;letter-spacing:1.4px!important;color:var(--s-accent)!important}
/* Märkesraden på däckkorten är ingen etikett: lugn, mörk, inga versaler */
html body .dack .sub, html body .rad-kort .sub{font:600 13px/1.3 var(--sans)!important;letter-spacing:.2px!important;text-transform:none!important;color:var(--s-dov)!important}

/* 3. Kort: vita utan tunn kantlinje, mer luft, på grå botten */
html body .dack, html body .panel:not(.mork), html body .tj:not(.shop), html body .sidokort, html body .rad-kort,
html body .citat figure, html body .leverans label, html body .lev label{border-color:transparent!important;box-shadow:none!important}
html body .dack:hover, html body .tj:not(.shop):hover{border-color:transparent!important;box-shadow:0 10px 24px -14px rgba(59,55,43,.35)!important}

/* 4. Brödtext 16 px och mörkare */
html body{font-size:16px}
html body p{color:var(--s-dark)}

/* 5. Pris/ingår högst upp på tjänstesidorna: kvar, men som lugn textrad utan lådor */
html body .faktarad > *{background:transparent!important;border:0!important;padding-left:0!important;box-shadow:none!important}

/* 6. Sifferrutorna på Om oss: kvar, men ljusa med mörka siffror */
html body .siffror > *{background:var(--s-white)!important;color:var(--s-dark)!important;border:0!important}
html body .siffror b{color:var(--s-dark)!important}

/* 7. Omdömen: samma tre citat, större text och utan ramar (närmare Åströms stora citat) */
html body .citat figure{background:transparent!important;padding-left:0!important;padding-right:0!important}
html body .citat blockquote, html body .citat figure > p:first-child{font-family:var(--serif)!important;font-size:20px!important;line-height:1.35!important}
html body .siffror > * *{color:var(--s-dov)!important}
html body .siffror b, html body .siffror strong{color:var(--s-dark)!important}

/* Puts v2 = v1 + två detaljer från astromssanda.se: fälgteckningen (Mask-Group-2) och slitbane-fotot. */

/* Fälgteckningen i kanterna, som i Åströms "Dags för däckhotell"-ruta. Vänster = bilden som den är, höger = spegelvänd. */
html body .med-falg{position:relative;overflow:hidden;isolation:isolate}
html body .med-falg::before, html body .med-falg::after{content:"";position:absolute;z-index:-1;top:50%;width:300px;aspect-ratio:500/560;background:url(falgar.webp) no-repeat center/contain;pointer-events:none;transform:translateY(-50%)}
html body .med-falg::before{left:-190px}
html body .med-falg::after{right:-190px;transform:translateY(-50%) scaleX(-1)}
@media (max-width:760px){html body .med-falg::before, html body .med-falg::after{width:170px;opacity:.8}}

/* Slitbane-fotot som svag struktur i mörka partier */
html body .med-slitbana{background:linear-gradient(rgba(59,55,43,.9),rgba(59,55,43,.9)),url(slitbana.webp) center/cover!important}

/* Däck utan bild: ringen med "Bild saknas" (samma som butikens v5.css) */
html body .ring{position:relative;container-type:inline-size}
html body .ring::after{content:"Bild saknas";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 clamp(9px,5cqw,12px) var(--sans);letter-spacing:.8px;text-transform:uppercase;color:#8d887b;white-space:nowrap}
@container (max-width:140px){html body .ring::after{content:none}}

/* Gravity Forms 1 i prototypens formulärstil (GF:s egen CSS är avstängd på sajten, temat stylade formuläret förut) */
.abs-gf{background:var(--s-white);border-radius:4px;padding:28px;align-self:start}
.abs-gf .gform_wrapper{margin:0}
.abs-gf .gform_validation_container,.abs-gf .gfield--type-honeypot{display:none!important;position:absolute!important;left:-9000px!important}
.abs-gf .gform_required_legend{font-size:12.5px;color:var(--s-dov);margin:0 0 14px}
.abs-gf .gform_fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;border:0}
.abs-gf .gfield{grid-column:1/-1;margin:0;padding:0;border:0;min-width:0}
.abs-gf .gfield--width-half{grid-column:span 1}
@media (max-width:600px){.abs-gf .gfield--width-half{grid-column:1/-1}.abs-gf{padding:20px}}
.abs-gf .gfield_label,.abs-gf legend.gfield_label{display:block;font:600 14px/1.3 var(--sans);color:var(--s-dark);margin:0 0 6px;padding:0}
.abs-gf .gfield_required{color:var(--s-dark);margin-left:2px}
.abs-gf .gfield_required_text,.abs-gf .gfield_required_asterisk{font-weight:600}
.abs-gf input[type=text],.abs-gf input[type=tel],.abs-gf input[type=email],.abs-gf textarea{width:100%;box-sizing:border-box;font:500 16px/1.4 var(--sans);color:var(--s-dark);background:var(--s-white);border:1px solid var(--s-line2);border-radius:2px;padding:11px 12px;margin:0}
.abs-gf input:focus,.abs-gf textarea:focus{outline:2px solid var(--s-accent);outline-offset:1px;border-color:var(--s-dark)}
.abs-gf textarea{min-height:110px;resize:vertical}
.abs-gf .ginput_complex label,.abs-gf .gform-field-label--type-sub{font-size:12px;color:var(--s-dov)}
/* Vad gäller det: knappar */
.abs-gf .gfield_radio{display:flex;flex-wrap:wrap;gap:8px}
.abs-gf .gfield_radio .gchoice{position:relative;margin:0}
.abs-gf .gfield_radio input{position:absolute;opacity:0;width:1px;height:1px}
.abs-gf .gfield_radio label{display:inline-block;font:600 13.5px var(--sans);border:1px solid var(--s-line2);border-radius:2px;padding:8px 12px;background:var(--s-white);cursor:pointer;margin:0}
.abs-gf .gfield_radio input:checked+label{background:var(--s-dark);border-color:var(--s-dark);color:var(--s-white)}
.abs-gf .gfield_radio input:focus-visible+label{outline:2px solid var(--s-accent);outline-offset:2px}
/* Samtycke */
.abs-gf .gfield--type-consent .ginput_container_consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.abs-gf .gfield--type-consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--s-dark)}
.abs-gf .gfield--type-consent .gfield_label{display:none}
/* Fel */
.abs-gf .gfield_error input,.abs-gf .gfield_error textarea{border-color:#b3261e}
.abs-gf .validation_message,.abs-gf .gfield_validation_message{color:#b3261e;font-size:13px;margin-top:6px}
.abs-gf .gform_validation_errors{border:1px solid #b3261e;background:#fdf1f0;border-radius:2px;padding:12px 14px;margin-bottom:16px;font-size:14px}
.abs-gf .gform_validation_errors h2{font:600 14px var(--sans);margin:0}
/* Skicka */
.abs-gf .gform_footer,.abs-gf .gform-page-footer,.abs-gf .gfield--type-submit{grid-column:1/-1;margin:0;padding:0}
.abs-gf input[type=submit],.abs-gf button[type=submit]{width:100%;font:600 16px var(--sans);background:var(--s-accent);color:var(--s-dark);border:0;border-radius:2px;padding:14px 22px;cursor:pointer}
.abs-gf input[type=submit]:hover,.abs-gf button[type=submit]:hover{background:var(--s-accent-h)}
.abs-gf .gform_confirmation_message{font-size:16px;line-height:1.5}
.abs-gf .gform_ajax_spinner{margin-left:8px}

.hj-text .dackteam{display:inline-flex;align-items:center;gap:12px;color:#ece7da;font-size:14px;text-decoration:none;margin-top:4px}.hj-text .dackteam img{height:30px;width:auto;display:block}.hj-text .dackteam:hover span{text-decoration:underline}
.sf .dackteam{display:inline-flex;align-items:center;gap:10px;margin-top:14px;color:inherit;text-decoration:none;font-size:13.5px}.sf .dackteam img{height:26px;width:auto;display:block}.sf .dackteam:hover span{text-decoration:underline}
.btn:not(.kant):not(.kant2):not(.mork){color:var(--s-dark)}
.sh nav .meny{display:flex;align-items:center}.sh nav .meny>a{display:block}
.kort-lista .foto2 .ikon{width:64px;height:64px;color:var(--s-dark)}.kort-lista .foto2 .ikon svg{width:100%;height:100%}