.gform_validation_container,.gfield--type-honeypot,.gform_hidden,.gfield--type-hidden,.gfield_visibility_hidden,.gform_ajax_frame{display:none!important}.screen-reader-text,.hidden_sub_label,.hidden_label>.gfield_label{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.gform_button,.gform_next_button,.gform_previous_button) svg{width:1em;height:1em}:where(.site-hopp){position:absolute;left:-9999px;top:0;z-index:100}:where(.site-hopp:focus){left:12px;top:12px;padding:10px 16px;background:#000;color:#fff}:where(.gform_required_legend){display:none}@media (max-width:860px){body:has(:is(input:not([type=hidden]),select,textarea):focus) :is(.site-mobillist,.site-mlist){visibility:hidden}}@media (hover:hover){.site-drop:hover>ul[hidden]{display:block!important}.site-drop>ul::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px}}
body{margin:0}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* 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,.site{--dark-27:#2a2620;--dark-28:#2b2924;--dark-44:#57534a;--dark-63:#8d887b;--dark-76:#d2ae3c;--dark-78:#d8b540;--dark-90:#e3dfd3;--dark-93:#ece7da;--dark-94:#efeadb;--acc-97:#f7f4ea;--acc-a45:rgba(226,192,78,.45);--dark-a12:rgba(59,55,43,.12);--dark-a16:rgba(59,55,43,.16);--dark-a22:rgba(59,55,43,.22);--dark-a35:rgba(59,55,43,.35);--dark-a90:rgba(59,55,43,.9);--acc:#E2C04E;--s-accent-h:var(--dark-78);--dark:#3b372b;--s-bg:#f6f6f6;--s-grey:#EBEBEB;--s-line:var(--dark-a12);--s-line2:var(--dark-a22);--s-dov:var(--dark-44);--s-ok:#2f6b3a;--s-white:#ffffff;--s-tint:var(--acc-97);--s-sand:var(--dark-94);--s-guld:var(--dark-76);--s-ljus:var(--dark-90);--s-text2:var(--dark);--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(--dark);font:16px/1.55 var(--sans);letter-spacing:.56px}
.site{container-type:inline-size}
.site img{height:auto}
.site *{min-width:0}
.site a{color:inherit}
.site button,.site input,.site select,.site textarea{font-family:var(--sans);color:var(--dark);letter-spacing:.3px}
.site svg{flex:0 0 auto}
:focus-visible{outline:2px solid var(--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(--acc);color:var(--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(--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(--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(--acc)}
.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(--dark);position:relative}
.burg span::after{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--dark)}
.mobmeny{display:none}

/* Hjälte */
.hjalte{position:relative;color:var(--s-white);background:var(--dark-27)}
.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(--acc)}
.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:var(--dark-93);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:var(--dark-93);text-decoration:none}
.betyg b{color:var(--acc);letter-spacing:2px}
.hittakort{justify-self:end;width:100%;max-width:420px;background:var(--s-white);color:var(--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(--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(--acc)}
.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(--acc)}
.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(--acc);color:var(--dark);border-color:var(--acc);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(--dark)}
html body .tj.shop .sub{color:var(--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(--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%,var(--dark-63) 34% 37%,var(--dark-28) 38% 100%);box-shadow:0 14px 18px -10px var(--dark-a35)}
.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(--acc) 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(--dark);color:var(--s-white);border-color:var(--dark)}
.panel.mork p{color:var(--s-ljus)}
.panel.mork .sub{color:var(--acc)}
.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(--acc);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(--acc);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(--acc);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 var(--dark-a16)}
.acc details{border-bottom:1px solid var(--dark-a16)}
.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(--dark);border-bottom:2px solid var(--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(--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(--dark);color:var(--s-white);border-color:var(--dark)}
.val label:has(input:focus-visible){outline:2px solid var(--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(--dark);box-shadow:0 0 0 3px var(--acc-a45)}
.tack{display:none;background:var(--s-tint);border-radius:4px;padding:14px;font-weight:700}
.tack.syns{display:block}

/* Sidfot */
.sf{background:var(--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(--acc)}
.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(--acc)}
.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(--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(--dark);letter-spacing:-.5px;margin:20px 0 0}
.artikel ul{margin:0;padding-left:20px;display:grid;gap:6px}
.artikel a{color:var(--dark);text-underline-offset:3px}
.artikel strong{color:var(--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(--dark);color:var(--s-white);border-radius:4px;padding:22px;display:grid;gap:4px}
.siffror b{font:600 40px/1 var(--serif);color:var(--acc);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(--dark)}
.gdpr a{color:var(--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(--acc)}

@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. */


/* 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(--acc)!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 var(--dark-a35)!important}

/* 4. Brödtext 16 px och mörkare */
html body{font-size:16px}
html body p{color:var(--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(--dark)!important;border:0!important}
html body .siffror b{color:var(--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(--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(/wp-content/themes/176abs-child/assets/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(var(--dark-a90),var(--dark-a90)),url(/wp-content/themes/176abs-child/assets/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:var(--dark-63);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(--dark);margin:0 0 6px;padding:0}
.abs-gf .gfield_required{color:var(--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(--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(--acc);outline-offset:1px;border-color:var(--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(--dark);border-color:var(--dark);color:var(--s-white)}
.abs-gf .gfield_radio input:focus-visible+label{outline:2px solid var(--acc);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(--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(--acc);color:var(--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:var(--dark-93);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(--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(--dark)}.kort-lista .foto2 .ikon svg{width:100%;height:100%}
.abs-gf .gform_fields>.spacer{display:none}.abs-gf .gform_fields>.gfield:not(.gfield--width-half){grid-column:1/-1}
.acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);justify-self:center;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}details[open]>summary::after{transform:translateY(3px) rotate(225deg)}

span.gb-shape,span.gb-shape+span[class="gb-text"],span[class="gb-text"]:has(+span.gb-shape){display:contents!important;color:inherit!important;font:inherit!important;letter-spacing:inherit!important}

@supports (color:oklch(from red l c h)){:root,.site{--dark-27:oklch(from var(--dark) 0.271 calc(c * 0.589) h);--dark-28:oklch(from var(--dark) 0.281 calc(c * 0.450) h);--dark-44:oklch(from var(--dark) 0.443 calc(c * 0.731) h);--dark-63:oklch(from var(--dark) 0.627 calc(c * 0.955) h);--dark-76:oklch(from var(--dark) 0.763 calc(c * 6.448) h);--dark-78:oklch(from var(--dark) 0.783 calc(c * 6.577) h);--dark-90:oklch(from var(--dark) 0.903 calc(c * 0.800) h);--dark-93:oklch(from var(--dark) 0.928 calc(c * 0.870) h);--dark-94:oklch(from var(--dark) 0.937 calc(c * 0.989) h);--acc-97:oklch(from var(--acc) 0.967 calc(c * 0.100) h);--acc-a45:rgb(from var(--acc) r g b / .45);--dark-a12:rgb(from var(--dark) r g b / .12);--dark-a16:rgb(from var(--dark) r g b / .16);--dark-a22:rgb(from var(--dark) r g b / .22);--dark-a35:rgb(from var(--dark) r g b / .35);--dark-a90:rgb(from var(--dark) r g b / .9)}}

/* ---------- Proffsgranskningen 2026-10-29 ---------- */
/* Kortens bild i mobil: följer textens höjd i stället för bildens egen (WP:s height-attribut gav 1 500 px höga kort) */
@container (max-width:760px){
  .relaterat .tj{grid-template-rows:none}
  .tj img{height:0!important;min-height:100%}
}
/* Överrubriker och faktaetiketter: mörkare guld som text på ljus botten (5,3:1), guldet kvar på mörkt */
html body .sub,html body .faktarad span{color:#7d6410!important}
html body .hj-text .sub,html body .mork .sub,html body .panel.mork .sub,html body .sf .sub{color:var(--acc)!important}
/* Fokus syns även på mörk botten */
.sf :focus-visible,.mork :focus-visible,.med-slitbana :focus-visible,.hjalte :focus-visible{outline-color:var(--acc)}
/* Ankare och tabbsteg stannar under sidhuvudet och ovanför ringlisten */
html{scroll-padding-top:90px}
@media (max-width:760px){html{scroll-padding-top:76px;scroll-padding-bottom:60px}}
/* Mobilmenyn: rullar själv när telefonen är låg, menyknappen 44 px */
@container (max-width:760px){
  .burg{width:44px;height:44px}
  .mobmeny:not([hidden]){max-height:calc(100dvh - 61px - 50px);overflow-y:auto;overscroll-behavior:contain}
  .mobmeny a[aria-current]{color:#7d6410}
  .sh .logo{display:flex;align-items:center;min-height:44px}
  .smul a{display:inline-flex;align-items:center;min-height:44px}
  .sf .bolag{align-items:center;row-gap:0}
  .sf li a,.sf .dackteam,.sf .bolag a,.hj-text .dackteam,.betyg,.lank,a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
}
.meny.stangd .undermeny{display:none!important}
/* Formuläret: fält och ärendeknappar syns som fält (3,3:1), knapparna 44 px */
.abs-gf input[type=text],.abs-gf input[type=tel],.abs-gf input[type=email],.abs-gf textarea,.abs-gf .gfield_radio label{border-color:#8a8f9c}
.abs-gf .gfield_radio label{min-height:44px;display:inline-flex;align-items:center}
/* Regnr-rutan: rad under när numret saknas */
.hittakort .fel{margin:8px 0 0;font-size:14px;font-weight:600;color:#a32020}
.hittakort .fel:empty{display:none}
/* Radlängd i brödtexten */
.artikel p,.artikel ul,.artikel ol{max-width:60ch}

/* Artiklarnas datum */
.topp .uppdaterad{margin:0;font-size:14px;color:var(--s-dov)}