/* Sidspecifikt som komponenter.css inte har: listrader och produktlayout. */
/* Sista skyddet mot sidled: ett enda för brett element ska inte kunna göra hela
   sidan skrollbar i x-led. Innehåll som MÅSTE vara brett (tabeller) får egen
   overflow-x där det byggs. */
html, body { overflow-x:hidden; max-width:100%; }
/* min-width:0 på namnkolumnen: utan den kan ett grid-barn aldrig krympa under
   sitt min-content, och raden sköt ut sidan i sidled på en liten telefon eller
   vid 400 % zoom (320 CSS-px): hela dokumentet fick horisontell scroll medan
   bottennavet stod still. Långa produktnamn bryts nu i stället. */
.varurad { display:grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap:14px;
  align-items:center; padding:10px 4px; border-bottom:1px solid var(--line-soft);
  text-decoration:none; }
.varurad > * { min-width:0; }
.varurad .namn { overflow-wrap:anywhere; }
/* Sektionsrubrikerna i panelerna är h2 (sökmotorerna läser strukturen) men
   ser ut som etiketterna: .meta ger snitt och storlek, det här tar bort
   webbläsarens rubrikmarginal och fetstil. */
h2.meta, h3.meta { margin:0; font-weight:400; }
/* Butikslistan på /butiker/: ikonen är smalare än en produktbild. */
.butiklista .varurad { grid-template-columns:auto minmax(0, 1fr) auto auto; }
/* Under 560 px: namnet överst med priset till höger, status på raden under.
   Förut föll priset ner som en egen rad under bilden, för lagerrutan spände
   över de två sista kolumnerna och sköt priset till nästa rad. */
@media (max-width: 560px) {
  .varurad, .butiklista .varurad { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap:3px; }
  .varurad .mini, .varurad .bikon { grid-column:1; grid-row:1 / span 2; }
  .varurad .namn { grid-column:2; grid-row:1; }
  .varurad .lager { grid-column:2; grid-row:2; }
  .varurad .fran { grid-column:3; grid-row:1 / span 2; align-self:center; }
}
/* Prisraden på produktsidan under 560 px: butiksnamnet och priset på första
   raden, lagerstatus och "Om butiken" på den andra. Förut bröts namnet,
   "Om butiken", statusen och priset över fyra rader var. */
@media (max-width: 560px) {
  .prisrad { grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"namn namn pris" "lager om pris";
    gap:3px 10px; padding:11px 4px; align-items:center; }
  .prisrad .butik { display:contents; }
  .prisrad .butik > a:first-child { grid-area:namn; font-size:15px; }
  .prisrad .butik > a.meta { grid-area:om; justify-self:start; font-size:11.5px; }
  .prisrad .lager { grid-area:lager; }
  .prisrad .pris { grid-area:pris; font-size:17px; }
}
.varurad:last-child { border-bottom:0; }
.varurad:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.varurad .mini { width:44px; height:44px; object-fit:contain; border-radius:8px;
  background:var(--raise); }
.varurad .namn { font-size:14.5px; line-height:1.3; }
.varurad .namn .meta { display:block; margin-top:2px; }
.varurad .fran { font-family:var(--mono); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.varurad .fran .enhet { font-weight:400; font-size:11px; color:var(--ink-3); }
.produktrad { display:grid; grid-template-columns: minmax(220px, 340px) 1fr;
  gap:clamp(20px, 4vw, 44px); align-items:start; }
@media (max-width: 720px) { .produktrad { grid-template-columns: 1fr; } }
.produktbild { width:100%; aspect-ratio:1; object-fit:contain; }
/* Brödsmulor och footerlänkar var ~19 px höga och satt tätt, under WCAG 2.2:s
   24 px för klickytor, och svåra att träffa med tummen. Padding i stället för
   större text, så raden ser likadan ut. */
.brodsmulor { margin-bottom: 18px; }
.brodsmulor a { text-decoration:none; display:inline-block; padding:4px 2px;
  min-height:24px; line-height:16px; }
.sidfot a, footer a { display:inline-block; padding:4px 2px; min-height:24px; }
.brodsmulor a:hover { color:var(--ink); }
.bikon { width:28px; height:28px; border-radius:7px; object-fit:contain;
  background:#fff; padding:3px; box-sizing:border-box; flex:0 0 auto; }
.bikon.stor { width:44px; height:44px; border-radius:10px; }
.bikon.bokstav { display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:14px; color:#3a3145; }
/* Ingen nowrap: "🏬 butik i Helsingborg" ensamt är ~165 px och var största
   orsaken till att raden inte kunde krympa. */
.bmark { white-space:normal; }
.bento { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  grid-auto-flow:dense; }
.bento .cub { display:flex; flex-direction:column; gap:4px; padding:14px;
  border:1px solid var(--line-soft); border-radius:14px; background:var(--paper);
  text-decoration:none; }
.bento .cub:hover { border-color:var(--line); }
.bento .cub .bild { height:110px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:10px; margin-bottom:8px; }
.bento .cub.stor { grid-column:span 2; grid-row:span 2; }
.bento .cub.stor .bild { flex:1; min-height:230px; }
.bento .cub .bild img { max-width:82%; max-height:88%; object-fit:contain; }
.bento .cub .tal { font-family:var(--mono); font-weight:700; font-size:26px; line-height:1; }
@media (max-width: 720px) { .bento { grid-template-columns:repeat(2, 1fr); } }
.karusell { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:thin; }
.kkort { flex:0 0 172px; scroll-snap-align:start; display:flex; flex-direction:column;
  gap:5px; padding:12px; border:1px solid var(--line-soft); border-radius:14px;
  text-decoration:none; }
.kkort:hover { border-color:var(--line); }
.kkort .bild { height:118px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:10px; }
.kkort .bild img { max-width:84%; max-height:90%; object-fit:contain; }
.kkort .nm { font-size:12.5px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kkort .meta b { color:var(--ink); font-family:var(--mono); }
.sektion-tunn { padding-block: clamp(24px, 4vw, 44px); }
.kortprov { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
  gap:12px; margin-top:14px; }
.kortprov img { width:100%; aspect-ratio:63/88; object-fit:cover;
  border-radius:6px; background:var(--raise); }
.kortprov .meta { margin-top:5px; display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.produkttext { color:var(--ink-2); font-size:14.5px; max-width:60ch; }
/* Fördelningsstaplarna: samma anatomi som i appens stil/app.css, kopierade
   hit för att setsidorna ritar rariteterna med dem och den publika sajten
   laddar inte appens stilark. Ändras den ena bör den andra följa med. */
.fdel-lista { display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
.fdrad { display:grid; grid-template-columns:minmax(90px,26%) 1fr auto; gap:10px;
  align-items:center; }
.fdnamn { font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.fdband { height:8px; background:var(--line-soft); border-radius:var(--radie-pill);
  overflow:hidden; }
.fdband i { display:block; height:100%; background:var(--c); border-radius:var(--radie-pill); }
.fdtal { font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
/* Prishistoriken på produktsidan: stegkurva i SVG, ritad vid bygget. Rutan
   sträcks till panelens bredd (preserveAspectRatio none), så linjerna hålls
   jämntjocka med non-scaling-stroke i stället för att tänjas med den. */
.prisgraf { display:block; width:100%; height:120px; margin-top:12px; overflow:visible; }
.prisgraf path { fill:none; stroke:var(--ink); stroke-width:2;
  vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.prisgraf path.slut { stroke:var(--ink-3); stroke-dasharray:4 4; }
.prisgraf .golv { stroke:var(--line-soft); stroke-width:1; vector-effect:non-scaling-stroke; }
.grafaxel { display:flex; justify-content:space-between; gap:12px; margin-top:6px; }
.fakta { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:8px 18px;
  margin:16px 0 0; font-size:14px; }
.fakta dt { color:var(--ink-3); font-family:var(--mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.fakta dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
@media (max-width: 420px) { .fakta { grid-template-columns:1fr; gap:2px; }
  .fakta dd { margin-bottom:8px; } }
/* Frågor och svar: frågan är en riktig h2, svaret står direkt under. */
.faq .fraga { font-family:inherit; font-size:16.5px; font-weight:650; line-height:1.3;
  margin:20px 0 6px; color:var(--ink); }
.faq .svar { margin:0; color:var(--ink-2); font-size:14.5px; max-width:68ch; }
/* Kortkolls betyg: siffran och fem rutor som fylls efter den. */
.betygrutor { display:inline-flex; gap:3px; vertical-align:middle; }
.betygrutor i { width:14px; height:14px; border-radius:4px; display:block;
  background:linear-gradient(90deg, var(--accent) var(--f), var(--line-soft) var(--f)); }
.betygbricka { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.betygbricka .av { font-weight:400; font-size:11px; color:var(--ink-3); }
.delpoang { display:grid; grid-template-columns:max-content minmax(60px, 1fr) max-content;
  gap:8px 12px; align-items:center; margin-top:14px; max-width:520px; font-size:13px; }
.delpoang .band { height:8px; border-radius:var(--radie-pill); background:var(--line-soft);
  overflow:hidden; }
.delpoang .band i { display:block; height:100%; background:var(--accent);
  border-radius:var(--radie-pill); }
.delpoang .tal { font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--ink-2); }
/* Lobbyn på butikssidorna: sektioner med en rad rutor var. På desktop ett
   rutnät med en eller två större rutor, på mobil en rad som rullas i sidled
   med scroll-snap. Bildytorna har fast proportion, så inget hoppar när de
   lata bilderna kommer. Resten av varorna ligger i <details> under raden. */
.lobbysek { margin-top:clamp(28px, 4vw, 44px); }
.lobbyhuvud { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.lobbyhuvud h2 { font-family:var(--display); font-weight:400; margin:0; line-height:1.05;
  font-size:clamp(21px, 2.6vw, 28px); }
.lobbyrad { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px;
  grid-auto-flow:dense; }
.lruta { display:flex; flex-direction:column; gap:5px; padding:10px; min-width:0;
  border:1px solid var(--line-soft); border-radius:14px; background:var(--paper);
  text-decoration:none; color:inherit; }
.lruta:hover { border-color:var(--line); }
.lruta .bild { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:10px; overflow:hidden; }
.lruta .bild img { width:84%; height:84%; object-fit:contain; }
.lruta .nm { font-size:12.5px; font-weight:600; line-height:1.3; min-height:2.6em;
  overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.lruta .pr { font-family:var(--mono); font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums; margin-top:auto; }
.lruta .pr .enhet { font-weight:400; font-size:11px; color:var(--ink-3); }
.lruta .st { font-family:var(--mono); font-size:10.5px; color:var(--ink-3); line-height:1.3; }
.lruta .st.ja { color:var(--ok); }
.lruta.stor { grid-column:span 2; grid-row:span 2; padding:14px; }
.lruta.stor .bild { flex:1; aspect-ratio:auto; min-height:180px; }
.lruta.stor .nm { font-size:16px; min-height:0; }
.lruta.stor .pr { font-size:22px; margin-top:0; }
.lruta.stor .st { font-size:11.5px; }
.lobbyrad.spegel .lruta.stor { grid-column:5 / span 2; }
.lobbyfler { margin-top:12px; }
.lobbyfler > summary { cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; color:var(--ink); padding:9px 16px;
  border:1px solid var(--line-soft); border-radius:var(--radie-pill); list-style:none; }
.lobbyfler > summary::-webkit-details-marker { display:none; }
.lobbyfler > summary:hover { border-color:var(--line); }
.lobbyfler[open] > summary { margin-bottom:10px; }
.lobbylankar { display:flex; flex-wrap:wrap; gap:6px 16px; }
.lobbylankar a { text-decoration:none; font-size:13px; color:var(--ink-2); padding:3px 0; }
.lobbylankar a b { font-family:var(--mono); font-weight:600; color:var(--ink); }
.lobbynav { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
@media (max-width: 980px) {
  .lobbyrad { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .lobbyrad.spegel .lruta.stor { grid-column:3 / span 2; }
}
@media (max-width: 720px) {
  .lobbyrad, .lobbyrad.spegel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;
    margin-inline:calc(-1 * clamp(16px, 4vw, 32px)); padding-inline:clamp(16px, 4vw, 32px);
    scroll-padding-inline:clamp(16px, 4vw, 32px); }
  .lobbyrad::-webkit-scrollbar { display:none; }
  .lruta { flex:0 0 148px; scroll-snap-align:start; }
  .lruta.stor { flex:0 0 236px; padding:12px; }
  .lruta.stor .bild { flex:none; aspect-ratio:1.25; min-height:0; }
  .lruta.stor .nm { font-size:14.5px; min-height:2.6em; }
  .lruta.stor .pr { font-size:18px; margin-top:auto; }
}