/* Gustavian Vintage — riktning A (kategori) + B (guide).
   Medvetna val, tvärtemot fleetens feedsajtlook:
   - antikva i rubrikerna; system-ui/Arial är det starkaste directory-tecknet
   - benvit botten, inte gråblå
   - dämpad olivgrön/terrakotta accent, aldrig REA-orange
   - produktkort utan skugga och rundade hörn: tunn ram, mycket luft
*/

:root{
  --papper:#FBF9F4;      /* sidbotten */
  --papper-2:#F5F0E6;    /* faktarutor, avvikande sektioner */
  --vit:#FFFFFF;
  --blek:#EDE7DC;        /* bildplatshållare */
  --linje:#DED5C6;
  --linje-svag:#EBE5DA;
  --black:#2A2622;       /* rubriker, stark text */
  --text:#3A352E;
  --text-2:#4A443C;      /* brödtext */
  --mut:#85796B;         /* dämpad */
  --mut-2:#9B8E7D;
  --oliv:#5A6650;        /* primär accent */
  --oliv-m:#3D4636;
  --terra:#7C3B2E;       /* sekundär, används sparsamt */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --radius:0px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papper:#1B1916; --papper-2:#242019; --vit:#221F1A; --blek:#2C2822;
    --linje:#3A342C; --linje-svag:#302B24;
    --black:#F2EDE3; --text:#E4DDD0; --text-2:#D3CABB;
    --mut:#A0937F; --mut-2:#8B7F6D;
    --oliv:#9AAB8C; --oliv-m:#B6C3A9; --terra:#C98A76;
  }
}
:root[data-theme="dark"]{
  --papper:#1B1916; --papper-2:#242019; --vit:#221F1A; --blek:#2C2822;
  --linje:#3A342C; --linje-svag:#302B24;
  --black:#F2EDE3; --text:#E4DDD0; --text-2:#D3CABB;
  --mut:#A0937F; --mut-2:#8B7F6D;
  --oliv:#9AAB8C; --oliv-m:#B6C3A9; --terra:#C98A76;
}

*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papper);color:var(--text);
  font-family:var(--sans);line-height:1.7;min-width:0;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--black);line-height:1.2;margin:1.5em 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3.25rem);margin:.2em 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-top:1.8em}
h3{font-size:clamp(1.2rem,1.8vw,1.4rem)}
p{margin:0 0 1.1em}
a{color:var(--oliv);text-decoration:none}
a:hover{color:var(--oliv-m);text-decoration:underline}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.mut,.small{color:var(--mut);font-size:.9rem}
hr{border:0;border-top:1px solid var(--linje);margin:2em 0}

/* ------------------------------------------------------------- huvud */
.site-head{border-bottom:1px solid var(--linje);background:var(--papper);position:relative}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 16px}
/* clamp + mindre letter-spacing på små skärmar: annars är logotypen ensam
   bredare än 390px och spräcker viewporten (nowrap). */
.logo{font-family:var(--serif);font-size:clamp(1.05rem,4.2vw,1.5rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--black);text-decoration:none;white-space:nowrap;min-width:0}
.logo:hover{text-decoration:none;color:var(--black)}
.huvudmeny{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.huvudmeny a{font-size:.94rem;color:var(--text-2);letter-spacing:.02em}
.huvudmeny a:hover,.huvudmeny a[aria-current]{color:var(--black);text-decoration:none;
  border-bottom:1px solid var(--oliv);padding-bottom:2px}
.nav-toggle{display:none;background:none;border:1px solid var(--linje);color:var(--text);
  font-size:1.2rem;padding:6px 12px;cursor:pointer;min-height:44px}

/* ------------------------------------------------------------- hero */
/* Stor bild direkt under menyn på startsidan. Full bredd, begränsad höjd
   så att H1 och ingress ändå syns utan att man skrollar på en laptop. */
.hero{width:100%;background:var(--blek);overflow:hidden;position:relative;
  height:clamp(240px,42vh,460px);margin-bottom:8px}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Mjuk övergång upptill: headern ligger mot papperstonen, inte mot bilden,
   så logotyp och meny behåller sin kontrast oavsett motiv. */
.hero::before{content:"";position:absolute;inset:0 0 auto;height:34%;
  background:linear-gradient(to bottom,var(--papper),transparent);pointer-events:none}
@media (max-width:680px){
  .hero{height:clamp(190px,32vh,280px)}
}

/* ------------------------------------------------------------- kategori-hero */
/* Bild i full bredd med H1 och ingress som lager ovanpå. Scrimen går från
   mörk vänsterkant till genomskinlig höger, eftersom bilderna är gjorda med
   motivet till höger och en lugn mörk vänsterhalva. Extra bottenscrim så att
   texten håller kontrast även om bilden är ljus just där. */
.kat-hero{position:relative;width:100%;overflow:hidden;
  min-height:clamp(300px,40vw,440px);background:var(--black);margin-bottom:26px}
.kat-hero>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%}
.kat-hero-lager{position:relative;z-index:2;display:flex;align-items:flex-end;
  min-height:clamp(300px,40vw,440px);padding:40px 0 34px;
  background:
    linear-gradient(to right, rgba(26,23,20,.86) 0%, rgba(26,23,20,.72) 38%,
                    rgba(26,23,20,.30) 68%, rgba(26,23,20,.12) 100%),
    linear-gradient(to top, rgba(26,23,20,.55) 0%, transparent 46%)}
.brodsmula-hero{padding:0 0 10px;color:#C9C0B2}
.brodsmula-hero a{color:#C9C0B2}
.brodsmula-hero a:hover{color:#FBF9F4}
.kat-hero h1{color:#FBF9F4;margin:0 0 .35em;max-width:17ch;
  text-shadow:0 1px 18px rgba(0,0,0,.35)}
.kat-hero-text{max-width:56ch}
.kat-hero-text p{color:#EFE9DE;font-size:1.05rem;line-height:1.7;margin:0 0 .6em;
  text-shadow:0 1px 14px rgba(0,0,0,.4)}
.kat-hero-text p:last-child{margin-bottom:0}
.kat-hero-text a{color:#DCE3D2;text-decoration:underline}

@media (max-width:680px){
  .kat-hero,.kat-hero-lager{min-height:clamp(260px,60vw,340px)}
  .kat-hero-lager{padding:28px 0 24px;
    background:
      linear-gradient(to right, rgba(26,23,20,.84) 0%, rgba(26,23,20,.66) 100%),
      linear-gradient(to top, rgba(26,23,20,.65) 0%, transparent 58%)}
  .kat-hero h1{max-width:none}
  .kat-hero-text p{font-size:.98rem}
}

/* ------------------------------------------------------------- brödsmula */
.brodsmula{font-size:.8rem;color:var(--mut);letter-spacing:.03em;padding:18px 0 0}
.brodsmula a{color:var(--mut)}
.brodsmula span{margin:0 .45em}

/* ------------------------------------------------------------- sidlayout */
.sidhuvud{padding-top:8px}
.tvaspalt{display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap}
.spalt-text{flex-grow:1;flex-basis:0;min-width:0;max-width:720px}
.spalt-sido{width:300px;flex-shrink:0}
/* Smal mätarkolumn i guidemallen (datum, innehåll). Egen klass i stället för
   inline width, annars vinner den över media queries och låser mobilen. */
.spalt-meta{width:150px;flex-shrink:0;order:0}
.prod-bildspalt{width:46%;flex-shrink:0;min-width:0}
.lasbar{max-width:68ch}
.lasbar p,.spalt-text p{color:var(--text-2);font-size:1.03rem}

/* ------------------------------------------------------------- avdelare */
.avdelare{display:flex;align-items:center;gap:20px;margin:2.6em 0 1.4em}
.avdelare::before,.avdelare::after{content:"";height:1px;background:var(--linje);flex-grow:1}
.avdelare span{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mut)}

/* ------------------------------------------------------------- toc */
.toc{border-left:1px solid var(--linje);padding-left:26px}
.toc h2,.toc .toc-rubrik{font-family:var(--serif);font-size:1.18rem;margin:0 0 .6em;color:var(--black)}
.toc ul{margin:0;padding-left:18px}
.toc li{margin:.45em 0;font-size:.92rem}
.toc a{color:var(--oliv)}

/* ------------------------------------------------------------- filter */
.filterrad{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:1.4em 0}
.filterrad .etikett{font-size:.85rem;color:var(--mut);margin-right:4px}
.chip{display:inline-block;font-family:inherit;font-size:.85rem;padding:9px 17px;border-radius:999px;
  border:1px solid var(--linje);background:transparent;color:var(--text-2);cursor:pointer;
  text-decoration:none;line-height:1.3;min-height:38px}
.chip:hover{border-color:var(--mut);color:var(--black);text-decoration:none}
.chip[aria-pressed="true"],.chip.pa{background:var(--black);border-color:var(--black);color:var(--papper)}
.chip.pa:hover{color:var(--papper)}

/* ------------------------------------------------------------- produktrutnät (riktning A) */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:26px;margin:1.5em 0}
.pk{background:var(--vit);border:1px solid var(--linje);display:flex;flex-direction:column}
.pk-bild{display:block;position:relative;background:var(--blek);aspect-ratio:4/3;overflow:hidden}
.pk-bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pk-bild img{mix-blend-mode:normal}}
.pk-utanbild{display:block;width:100%;height:100%}
.pk-rea{position:absolute;top:12px;left:12px;background:var(--terra);color:#FBF9F4;
  font-size:.66rem;letter-spacing:.1em;padding:4px 9px;text-transform:uppercase;z-index:2}
.pk-kropp{padding:16px 16px 18px;display:flex;flex-direction:column;flex-grow:1}
.pk-brand{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2);margin-bottom:7px}
.pk-namn{font-family:var(--serif);font-size:1.18rem;margin:0 0 .5em;line-height:1.3}
.pk-namn a{color:var(--black)}
.pk-namn a:hover{color:var(--oliv-m)}
.pk-det{font-size:.83rem;color:var(--mut);margin-bottom:.9em;flex-grow:1}
.pk-pris{font-size:1.1rem;color:var(--black);margin-bottom:.85em}
.pk-pris s{color:var(--mut-2);font-size:.85rem;margin-right:.3em}
.pk-butik{font-size:.8rem;color:var(--mut-2);font-weight:400}

/* ------------------------------------------------------------- knappar */
.btn{display:inline-block;text-align:center;padding:11px 18px;background:var(--oliv);
  color:#FBF9F4 !important;text-decoration:none;font-size:.88rem;letter-spacing:.03em;
  border:1px solid var(--oliv);cursor:pointer;font-family:inherit;min-height:44px;line-height:1.5}
.btn:hover{background:var(--oliv-m);border-color:var(--oliv-m);text-decoration:none}
.btn-go{display:block}
.btn-sek{background:transparent;color:var(--oliv) !important;border-color:var(--oliv)}
.btn-sek:hover{background:transparent;color:var(--oliv-m) !important;border-color:var(--oliv-m)}

/* ------------------------------------------------------------- urval (riktning B) */
.art-produkter{margin:2.2em 0}
.art-prod-ingress{font-size:.92rem;color:var(--mut);margin:-.3em 0 1.2em}
.urval{border-top:2px solid var(--black);margin:.4em 0 1em}
.urval-rad{display:flex;gap:22px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--linje-svag)}
.urval-bild{width:132px;height:132px;flex-shrink:0;background:var(--blek);display:block;overflow:hidden}
.urval-bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .urval-bild img{mix-blend-mode:normal}}
.urval-kropp{flex-grow:1;min-width:0}
.urval-brand{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);margin-bottom:6px}
.urval-namn{font-family:var(--serif);font-size:1.3rem;margin:0 0 .4em;line-height:1.25}
.urval-namn a{color:var(--black)}
.urval-motiv{font-size:.95rem;line-height:1.65;color:var(--text-2);margin:0 0 .8em}
.urval-fot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.urval-pris{font-size:1.12rem;color:var(--black)}
.urval-pris s{color:var(--mut-2);font-size:.85rem;margin-right:.3em}
.urval-lank{font-size:.88rem;color:var(--oliv);border-bottom:1px solid var(--linje);padding-bottom:2px}
.urval-lank:hover{border-color:var(--oliv);text-decoration:none}

/* enskild möbel i brödtext */
.enskild{display:flex;gap:22px;align-items:flex-start;background:var(--papper-2);
  border:1px solid var(--linje);padding:20px;margin:1.8em 0}
.enskild-bild{width:150px;height:150px;flex-shrink:0;background:var(--blek);display:block;overflow:hidden}
.enskild-bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.enskild-kropp{flex-grow:1;min-width:0}

/* ------------------------------------------------------------- tabeller */
.tabell-wrap{overflow-x:auto;margin:1.4em 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--vit)}
th,td{border:1px solid var(--linje);padding:.6em .8em;text-align:left;vertical-align:top}
th{background:var(--papper-2);color:var(--black);font-weight:600;font-size:.85rem;
  letter-spacing:.03em}
caption{caption-side:top;text-align:left;font-family:var(--serif);font-size:1.1rem;
  color:var(--black);padding-bottom:.5em}
.pristab td:not(:first-child){white-space:nowrap}
.prisnot{font-size:.8rem;color:var(--mut-2);font-style:italic;margin-top:.6em}

/* ------------------------------------------------------------- faktaruta */
.faktaruta{background:var(--papper-2);border:1px solid var(--linje);padding:22px 26px;margin:1.8em 0}
.faktaruta h3{margin-top:0;font-size:1.2rem}
.faktaruta p:last-child,.faktaruta ul:last-child{margin-bottom:0}
.faktaruta-rad{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--linje-svag)}
.faktaruta-rad:last-child{border-bottom:0}

/* artikelinnehåll */
.art-bild{margin:1.8em 0}
/* WP-bilderna är ofta 1500px+ och blir orimligt dominanta i en läsbar spalt.
   Håll dem inom textbredden och begränsa höjden. Gäller även lösa <img> i
   textblock (Gutenberg-innehåll där bilden inte låg i en figure), men BARA
   i brödtexten — produktkorten har egna behållare (.pk-bild/.urval-bild)
   och får inte träffas av width:auto. */
.art-bild img,
.lasbar>img,.lasbar>p>img,.lasbar>figure>img,
.spalt-text>img,.spalt-text>p>img{max-height:560px;width:auto;max-width:100%}
.lasbar>img,.lasbar>p>img,.spalt-text>img,.spalt-text>p>img{margin:1.6em 0}
.art-bild-full img,.art-bild-center img{margin-inline:auto}
.art-bild figcaption{font-size:.83rem;color:var(--mut);font-style:italic;margin-top:.6em}
.art-bild-vanster{float:left;margin:.4em 1.8em 1.2em 0;max-width:46%}
.art-bild-hoger{float:right;margin:.4em 0 1.2em 1.8em;max-width:46%}
blockquote{margin:1.8em 0;padding:0 0 0 22px;border-left:2px solid var(--mut);
  font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.55;color:var(--text-2)}
blockquote cite{display:block;font-size:.85rem;font-style:normal;font-family:var(--sans);
  color:var(--mut);margin-top:.7em}
.art-faq details{border-bottom:1px solid var(--linje-svag);padding:.9em 0}
.art-faq summary{cursor:pointer;font-family:var(--serif);font-size:1.12rem;color:var(--black)}
.art-faq details>div{padding-top:.7em;color:var(--text-2)}

/* ------------------------------------------------------------- kort/lista */
.kortrad{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:1.4em 0}
.kort{border-top:2px solid var(--black);padding-top:14px;text-decoration:none;display:block}
.kort:hover{text-decoration:none}
.kort-titel{font-family:var(--serif);font-size:1.25rem;color:var(--black);margin-bottom:.35em;display:block}
.kort-text{font-size:.9rem;color:var(--mut);line-height:1.6;display:block}

/* Guidekort med bild — mjukare ingång än enbart text. */
.kortrad-bild{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:30px}
.kort-medbild{border-top:0;padding-top:0}
.kort-bild{display:block;background:var(--blek);aspect-ratio:3/2;overflow:hidden;margin-bottom:14px}
.kort-bild img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.kort-medbild:hover .kort-bild img{transform:scale(1.03)}
.kort-medbild .kort-kropp{display:block;border-top:2px solid var(--black);padding-top:13px}
.kort-medbild:hover .kort-titel{color:var(--oliv-m)}

/* ------------------------------------------------------------- annonser */
.annons{margin:2.4em 0}
.annons-sido{margin:0 0 2em}
.annons ins{display:block}
/* Platshållare medan NOINDEX_ALL är på (inga riktiga annonser i bygget). */
.annons-platshallare{background:var(--papper-2);border:1px dashed var(--linje);
  min-height:250px;display:flex;align-items:center;justify-content:center;
  color:var(--mut-2);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.lanklista a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 0;border-bottom:1px solid var(--linje-svag);color:var(--black)}
.lanklista a:hover{text-decoration:none;color:var(--oliv-m)}
.lanklista .titel{font-family:var(--serif);font-size:1.15rem}
.lanklista .antal{font-size:.82rem;color:var(--mut-2);white-space:nowrap}

/* ------------------------------------------------------------- paginering */
.paginering{display:flex;gap:8px;flex-wrap:wrap;margin:2em 0;align-items:center}
.paginering a,.paginering span{padding:9px 14px;border:1px solid var(--linje);
  font-size:.88rem;color:var(--text-2);min-height:40px;display:inline-flex;align-items:center}
.paginering .nu{background:var(--black);border-color:var(--black);color:var(--papper)}

/* ------------------------------------------------------------- fot */
.site-fot{margin-top:4em;border-top:1px solid var(--linje);background:var(--papper)}
.fot-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
  flex-wrap:wrap;padding:36px 16px 30px}
.fot-logo{font-family:var(--serif);font-size:1rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.fot-lankar{display:flex;gap:22px;flex-wrap:wrap;font-size:.88rem}
.fot-not{font-size:.78rem;color:var(--mut-2);max-width:460px;line-height:1.6}

/* ------------------------------------------------------------- mobil */
@media (max-width:900px){
  .tvaspalt{flex-direction:column;gap:32px}
  .spalt-sido,.spalt-meta,.prod-bildspalt{width:100%;flex-shrink:1;flex-basis:auto}
  .spalt-text{max-width:100%;flex-basis:auto}
  /* Metadata-kolumnen hör till texten den beskriver — lägg den först. */
  .spalt-meta:empty{display:none}
  .toc{border-left:0;border-top:1px solid var(--linje);padding-left:0;padding-top:18px}
}
@media (max-width:680px){
  .head-inner{flex-wrap:wrap}
  .nav-toggle{display:block}
  .huvudmeny{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding-top:8px}
  body.nav-open .huvudmeny{display:flex}
  .huvudmeny a{padding:12px 0;width:100%;border-bottom:1px solid var(--linje-svag);min-height:44px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
  .urval-rad{gap:14px}
  .urval-bild{width:88px;height:88px}
  .enskild{flex-direction:column}
  .enskild-bild{width:100%;height:auto;aspect-ratio:4/3}
  .art-bild-vanster,.art-bild-hoger{float:none;margin:1.5em 0;max-width:100%}
  blockquote{font-size:1.1rem}
}

/* Fokus syns alltid — även på mörk botten. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--oliv);outline-offset:2px}