/* ===== Köpklok – seriös profil (Robin 2026-10-22: "känns barnslig") =====
   Laddas sist, efter bitg.css. Ändrar bara utseendet – typsnitt, färger, hörn, skuggor – inga element flyttas.
   Ta bort "serious.css" ur css-listorna i site/render.py för att gå tillbaka. */
:root{
  --navy:#0f2130; --navy-2:#173247;
  --ink:#141c24; --muted:#5b6670; --line:#e2e6ea;
  --petrol:#173247; --petrol-d:#0f2130; --petrol-l:#eef2f5; --teal:#173247; --teal-d:#1d4a6b;
  --brass:#b38b45; --sun:#c9a45c; --sun-g:#0f2130;
  --orange:#1e6a46; --orange-d:#17563a; --orange-l:#e7f1eb;
  --good:#1e6a46; --bad:#a3392f;
  --cream:#f5f6f7; --cream2:#f5f6f7; --card:#fff;
  --shadow:0 1px 2px rgba(15,33,48,.06),0 10px 24px -18px rgba(15,33,48,.28);
  --shadow-sm:0 1px 2px rgba(15,33,48,.06);
  --r:8px;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --head:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body{background:#fff;color:var(--ink)}

/* rubriker i serif, allt annat (knappar, meny, etiketter) i sans */
h1,h2,h3,.prose h2,.page-hero h1,.home-hero h1,.cat-hero h1,.sub-group h2{font-family:var(--serif);font-weight:700;letter-spacing:-.005em}
h1{font-weight:700}
.prose h3,.prose h4,.tl-review h4.rev-h{font-family:var(--head);font-weight:700;color:var(--ink)}
.tl-card h3,.tl-card h2{font-family:var(--serif);font-weight:700}

/* ---------- header: mörk marin, ordmärke i serif ---------- */
#hdr{background:var(--navy);box-shadow:none;border-bottom:1px solid #0a1824}
.brand-name{font-family:var(--serif);font-weight:700;font-size:1.5rem;letter-spacing:0;color:#fff}
.brand-name b{color:var(--sun);font-weight:700}
.brand-mark{color:var(--sun);background:none}
.brand-mark svg{fill:none;stroke:currentColor}
.nav a,.nav-more > button{font-family:var(--head);font-weight:600;color:#cfd8df;border-radius:6px}
.nav a:hover,.nav a.on,.nav-more > button:hover,.nav-more.open > button{background:rgba(255,255,255,.08);color:#fff}
.hdr-search{border-radius:6px}
.mega{border-radius:8px;border:1px solid var(--line)}
@media(max-width:860px){.nav.open{background:var(--navy)}}

/* ---------- hjältar: lugna ytor, inga mönster eller färgtoner ---------- */
.cat-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.cat-hero .paws{display:none}
.page-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.home-hero{background:var(--navy)}
.home-hero::after{display:none}
.home-hero h1 em{color:var(--sun)}
.home-hero p{color:#c3ced6}
.home-stats span{color:#9fb0bd}

/* ---------- etiketter: inga gula/orange gradienter ---------- */
.cat-kicker{background:none;color:var(--brass);padding:0;border-radius:0;font-family:var(--head);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.win-flag,.home-feature .hf-flag{background:var(--navy);color:#fff;font-family:var(--head);font-weight:600;letter-spacing:.02em}
.tl-award{background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;letter-spacing:.03em}
.tl-rank{background:var(--navy);color:#fff;border-radius:6px;font-family:var(--head)}
.tl-card.winner .tl-rank,.tl-card.winner .tl-award{background:var(--brass);color:#fff}
.win-card{border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:8px;box-shadow:var(--shadow)}
.tl-card.winner{border:1px solid var(--line);border-top:3px solid var(--brass);box-shadow:var(--shadow)}
.home-feature{border-radius:8px}
.mini-tl{border-top:3px solid var(--brass);border-radius:8px}
.mini-tl .sl-rank{border-radius:4px;background:var(--navy-2)}
.mini-tl .sl-rank.r1{background:var(--brass)}
.mini-tl .sl-rank.r3{background:var(--navy-2)}
.mini-tl .sl-award{background:var(--petrol-l);color:var(--navy);border-radius:3px}
.draft-flag{border-radius:3px}

/* ---------- knappar: raka, lugna, ingen glöd eller lyft ---------- */
.btn,.btn-primary,.home-search button,.mini-tl .sl-btn,.mini-tl-all{border-radius:6px}
.btn-primary,.home-search button{background:var(--good);color:#fff;box-shadow:none}
.btn-primary:hover,.home-search button:hover{background:var(--orange-d);transform:none;box-shadow:none;color:#fff}
.win-cta,.home-feature a.hf-go{color:var(--good)}
.home-search input{border-radius:6px}

/* ---------- betyg ---------- */
.tl-score{border-radius:8px}
.cell-score{border-radius:4px;font-weight:700}
.subr .bar,.subr .bar i,.bar,.bar i{border-radius:2px}

/* ---------- kort och ytor: små hörn, tunna kanter, svaga skuggor ---------- */
.tl-card,.verdict,.faq-item,.ctable-wrap,.hub-card,.top-card,.method-strip div,.cat-card,.card,.art-card,.stat,
.sec-card,.spot-card,.recent-card,.rel-card,.score-method,.keydata,.prose table,.prose .pros-cons>div,.spec-dl,
.search-results a,.snippet-list li,.tl-review,.method-honesty,.modal-card{border-radius:8px}
.win-img,.rel-thumb,.prose-img,.prose-banner,.tl-review figure.rev-figure img,.home-feature img,.hub-card .hc-img,
.mini-tl .sl-thumb,.snippet-list .sl-thumb,.ctable .pname .ti{border-radius:6px}
.prose .callout{border-radius:0 6px 6px 0}
.tl-card,.faq-item,.hub-card,.top-card,.cat-card,.card,.rel-card{box-shadow:var(--shadow-sm)}
.cat-card:hover,.hub-card:hover,.top-card:hover,.rel-card:hover{transform:none;box-shadow:var(--shadow);border-color:#c5ccd3}
.tl-review{background:#f7f8f9}
.top-card .tc-ico{width:42px;height:42px;background:var(--petrol-l);border:0;border-radius:6px;color:var(--navy);
  display:grid;place-items:center;margin-bottom:4px}
.top-card .tc-ico svg{width:22px;height:22px}
.top-card:hover .tc-ico{background:var(--navy);color:var(--sun)}
.top-card .tc-subs{color:var(--muted);font-size:.82rem;line-height:1.4;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- pill-former blir raka ---------- */
.jump a,.chip,.chip-link,.usp,.select,.sec-card .cnt,.m-tags .t,.active-filter button,.cat-meta .m{border-radius:6px}
.jump a:hover{background:var(--petrol-l);color:var(--navy)}

/* ---------- listor och länkar ---------- */
.prose ul li::before{border-radius:2px;background-color:var(--navy-2)}
.prose h3,.prose h4{color:var(--ink)}
.prose .callout.tip{background:#f1f4f6}
.prose .callout.tip > strong:first-child{color:var(--navy)}
.tl-review a:not(.btn),.faq-a a,.tl-faq-a a{color:var(--teal-d)}
.footer{background:var(--navy)}
.footer a:hover{color:#fff}

/* I korthet: etikettkolumnen i versaler (emojin tas bort i render.py) */
.tl-review table td:first-child{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}

/* ---------- startsidan: populära sökningar + testvinnare just nu (2026-10-23) ---------- */
.home-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;max-width:560px}
.home-chips span{color:#9fb0bd;font-size:.9rem;font-weight:600;margin-right:2px}
.home-chips a{color:#e6edf2;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:.32em .75em;font-size:.88rem;font-weight:600}
.home-chips a:hover{border-color:var(--sun);color:#fff}
.home-winners{background:#fff;color:var(--ink);border-radius:8px;box-shadow:0 26px 60px -24px rgba(0,0,0,.55);padding:18px 20px 12px}
.hw-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px}
.hw-head b{font-family:var(--serif);font-size:1.15rem}
.hw-head a{color:var(--good);font-weight:700;font-size:.88rem}
.hw-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.hw-row:first-of-type{border-top:0}
.hw-img{width:64px;height:64px;border:1px solid var(--line);border-radius:6px;background:#fff;display:grid;place-items:center;overflow:hidden}
.hw-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.hw-body{display:flex;flex-direction:column;min-width:0}
.hw-cat{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.hw-name{font-weight:700;line-height:1.25;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-meta{font-size:.85rem;color:var(--muted)}
.hw-row:hover .hw-name{color:var(--good)}
.hw-score{--p:90;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.95rem;color:var(--ink);
  background:radial-gradient(closest-side,#fff 78%,transparent 80% 100%),conic-gradient(var(--good) calc(var(--p)*1%),#e3e8ec 0)}
.hw-note{margin:8px 0 0;font-size:.75rem;color:var(--muted)}
@media(max-width:560px){.hw-row{grid-template-columns:52px 1fr auto;gap:10px}.hw-img{width:52px;height:52px}.hw-name{white-space:normal}}

/* ---------- sökförslag under sökfälten ---------- */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 40px -16px rgba(15,33,48,.35);overflow:hidden;text-align:left}
.sugg a{display:flex;flex-direction:column;padding:.55em .9em;color:var(--ink);border-top:1px solid #eef1f4}
.sugg a:first-child{border-top:0}
.sugg a b{font-weight:600}
.sugg a small{color:var(--muted);font-size:.8rem}
.sugg a.on,.sugg a:hover{background:var(--petrol-l)}
.sugg a.all{font-weight:700;color:var(--good);font-size:.88rem}
.hdr-search{position:relative}
.home-winners .hw-note{margin:8px 0 0;font-size:.75rem;line-height:1.4;color:var(--muted);max-width:none}
.top-card{align-content:start}

/* sökträffar och förslag med vinnarens bild (2026-10-23) */
.search-results a{align-items:center}
.search-results a img{width:48px;height:48px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px;flex:none}
.search-results .sr-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.search-results .sr-go{color:var(--good);font-weight:700;white-space:nowrap}
.search-empty{margin-top:18px}
.search-empty span{color:var(--muted)}
.search-empty a{color:var(--ink);border-color:var(--line);background:#fff}
.search-empty a:hover{border-color:var(--good);color:var(--good)}
.sugg a{flex-direction:row;align-items:center;gap:10px}
.sugg a img,.sugg a i{width:36px;height:36px;object-fit:contain;flex:none;border-radius:4px;background:#fff}
.sugg a span{display:flex;flex-direction:column;min-width:0}
.sugg a.all{flex-direction:row}

[hidden]{display:none!important}

/* Startsidan: kategorier med produktbilder och egna, dämpade färgpaletter. */
.home-explore{background:#faf9f6;padding:64px 0 56px}
.explore-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.explore-kicker{display:block;margin-bottom:10px;color:#71603e;font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.explore-heading h2{font-size:clamp(1.9rem,3.4vw,2.65rem);letter-spacing:-.025em}
.explore-heading p{margin:12px 0 0;color:var(--muted);font-size:1.02rem}
.explore-all{display:inline-flex;align-items:center;gap:18px;flex:none;padding:10px 0;color:var(--navy);font-weight:600;border-bottom:1px solid #c5c9c4}
.explore-all:hover{color:var(--good);border-color:var(--good)}
.explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.explore-card{--scene:#e7eee7;--accent:#385b45;--orb:#d5e2d4;display:block;min-width:0;background:#fff;border:1px solid #e5e7e2;border-radius:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.explore-sand{--scene:#f1eadd;--accent:#79603b;--orb:#e7d9c3}
.explore-blue{--scene:#e5edf1;--accent:#3d6073;--orb:#d1dfe7}
.explore-rose{--scene:#f2e6e7;--accent:#895461;--orb:#e8d2d7}
.explore-peach{--scene:#f4e9de;--accent:#946341;--orb:#ecd8c2}
.explore-stone{--scene:#e8eae6;--accent:#526049;--orb:#d9ddd1}
.explore-scene{display:block;position:relative;height:190px;background:var(--scene);isolation:isolate;overflow:hidden}
.explore-scene::before{content:"";position:absolute;width:210px;height:210px;left:calc(50% - 105px);top:28px;border-radius:50%;background:var(--orb);z-index:-1}
.explore-card-top{position:absolute;inset:15px 18px auto;display:flex;align-items:center;justify-content:space-between;z-index:1}
.explore-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;color:var(--accent);background:rgba(255,255,255,.75)}
.explore-count{font-size:.79rem;color:var(--accent);font-weight:600}
.explore-card-top .explore-count{padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.78)}
.explore-products{position:absolute;inset:45px 32px 12px;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.explore-products img{width:54%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s ease}
.explore-products img+img{width:43%;height:84%;transform:rotate(5deg)}
.explore-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 20px 21px}
.explore-info h3{font-family:var(--serif);font-size:1.28rem;letter-spacing:-.015em}
.explore-subs{display:block;margin-top:7px;color:var(--muted);font-size:.81rem;line-height:1.45}
.explore-arrow{display:grid;place-items:center;width:33px;height:33px;flex:none;border:1px solid #dfe4df;border-radius:50%;font-size:1.25rem;color:var(--accent);transition:background .2s ease,color .2s ease,transform .2s ease}
.explore-card:focus-visible,.explore-all:focus-visible{outline:3px solid var(--accent,var(--navy));outline-offset:4px}
@media(hover:hover){
  .explore-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px -16px #243b4255;border-color:var(--accent)}
  .explore-card:hover .explore-products img:first-child{transform:translateY(-3px) rotate(-3deg)}
  .explore-card:hover .explore-products img+img{transform:translateY(-4px) rotate(1deg)}
}
.explore-card:is(:hover,:focus-visible) .explore-arrow{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(45deg)}
.explore-more-title{font-family:var(--head);font-weight:600;font-size:1rem;color:var(--muted);margin:30px 0 14px}
.explore-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.explore-compact{display:flex;align-items:center;gap:12px;padding:16px;background:var(--scene);border-color:transparent;border-radius:10px}
.explore-compact-info{flex:1;min-width:0}
.explore-compact h3{font-family:var(--head);font-size:1rem;font-weight:600;line-height:1.2}
.explore-compact .explore-count{display:block;margin-top:4px;font-size:.76rem}
.explore-compact .explore-arrow{width:22px;height:22px;border:0;background:none;font-size:1.1rem}
.explore-compact:is(:hover,:focus-visible) .explore-arrow{color:var(--accent);background:none}
@media(max-width:1000px){.explore-more{grid-template-columns:repeat(2,minmax(0,1fr))}.explore-grid{gap:14px}.explore-info{padding:17px 15px}.explore-products{left:18px;right:18px}}
@media(max-width:740px){
  .home-explore{padding:40px 0}
  .explore-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:22px}
  .explore-heading p{font-size:.97rem;max-width:42ch}
  .explore-all{padding:4px 0;font-size:.9rem}
  .explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .explore-scene{height:165px}.explore-card-top{inset:12px 12px auto}
  .explore-info h3{font-size:1.16rem}.explore-info{align-items:flex-start;min-height:109px}
  .explore-info .explore-arrow{width:25px;height:25px;font-size:1rem}
  .explore-products{inset:47px 12px 12px}.explore-scene::before{width:160px;height:160px;left:calc(50% - 80px)}
  .explore-compact{gap:10px;padding:14px 12px}.explore-compact .explore-icon{width:30px;height:30px}
  .explore-compact h3{font-size:.92rem}
}
@media(max-width:440px){
  .explore-scene{height:144px}.explore-card-top{inset:10px 10px auto}
  .explore-card-top .explore-icon{width:28px;height:28px}.explore-card-top .explore-icon svg{width:18px;height:18px}
  .explore-card-top .explore-count{font-size:.68rem;padding:2px 7px}
  .explore-info{padding:14px 12px;gap:5px;min-height:124px}.explore-info h3{font-size:1.07rem}
  .explore-subs{font-size:.75rem}.explore-info .explore-arrow{width:20px;height:20px;border:0}
  .explore-more{gap:8px}.explore-compact{gap:8px;padding:12px 10px}.explore-compact .explore-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){.explore-card,.explore-products img,.explore-arrow{transition:none}.explore-card:hover,.explore-card:hover .explore-products img,.explore-card:is(:hover,:focus-visible) .explore-arrow{transform:none}}