/* First Seafood — produkttabell och produktpopup
   ------------------------------------------------
   Överförd ur mockupens styles-v3.css. Formspråket är godkänt av kunden och
   ska inte ändras här utan att mockupen ändras först.

   Färg- och typvariablerna kommer från temat. Fallback-värdena nedan gör att
   tabellen ändå ser rätt ut om plugin:et aktiveras i ett tema som saknar dem.

   Filtrets per-grupp-regler ligger INTE här — grupperna kommer ur Excel och
   är inte kända vid byggtid. De genereras av FSP_Render::filter_css() och
   levereras via modulens frontend.css.php respektive wp_add_inline_style.
*/

/* .fsp-trimmatris: matrisen ensam, via [fsp_trimmatris] i ett kapitel (0.8.15). */
.fsp-produkttabell,
.fsp-trimmatris {
	--navy: #16243D;
	--navy-deep: #0E1A2E;
	--accent: #009BE1;
	--mist: #F5F7F9;
	--line: #E4E8ED;
	--text: #2B3645;
	--muted: #66717F;
	/* Djuplänkar (#skalldyr) rullar hit — headerraden är fixed (~110 px)
	   och får inte täcka verktygsraden. */
	scroll-margin-top: 120px;
}

/* ---- CoTheme-neutralisering: hover på flata knappar ----
   Temat målar ALLA <button> med primärfärgen på hover:

       button:hover { background: var(--cotheme-primary-hover, …); }

   Selektorn väger 0-1-1 och vinner därför över en klassregel utan
   pseudoklass (0-1-0). `.fsp-sorter { background: none }` räcker alltså
   inte — knappen får en fylld blå platta så fort pekaren nuddar den, och
   på kategoriknapparna härmar plattan dessutom det valda läget.

   Varje flat knapp måste ta tillbaka sin botten i sitt EGET hover-läge.
   `button.size` och `.pmodal-close` har redan egna hover-bottnar och är
   opåverkade. Samma fälla gäller padding, se .fsp-knapp nedan.

   Kategoriknappen undantar sitt VALDA läge med :not(). En ren
   `.fsp-knapp:hover` väger exakt lika mycket som
   `.fsp-knapp[aria-pressed="true"]` (båda 0-2-0), och då avgör källordningen
   — den valda knappen tappade sin navy botten och blev vit text på vitt.
   :not() lyfter regeln till 0-3-0 och håller den borta från den valda
   knappen oavsett var i filen den hamnar. */
.fsp-sorter:hover { background: none; }
.fsp-knapp:not([aria-pressed="true"]):hover { background: #fff; }

/* ============================================================
   Produkttabell — Avdeling Bergen (laks)
   Följer mönstret från kaiyoseafood.com/shellfish: varje produkt-
   grupp är en fristående tabell med eget mörkt huvud och egen
   kolumnrad, så rubrikerna aldrig scrollar bort.
   Data och texter kommer ur kundens Excel-spec.
   ============================================================ */

/* position: relative krävs — annars ankras de dolda radioknapparna mot
   sidan och webbläsaren scrollar till toppen vid klick på ett filter. */
.btable-wrap { position: relative; }

/* ---- Filterrad ---- */
.bfilter { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.bfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.bfilters label {
  font-size: 13px; font-weight: 600; padding: 9px 17px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: #fff; cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.bfilters label:hover { color: var(--navy); border-color: #c3cdd8; }

/* ---- Verktygsrad: sök, filter, sortering ---------------------------------
   Renderas alltid men visas bara när produktfilter.js har satt .fsp-js.
   Utan JavaScript är det .bfilters ovan som gäller — aldrig båda samtidigt. */

.fsp-verktyg { display: none; }
.fsp-js .fsp-verktyg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.fsp-js .bfilters { display: none; }

/* Etikett som bara finns för skärmläsare. */
.fsp-dold {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sök och type ligger på egen rad ovanför kategoriknapparna. */
.fsp-verktyg__rad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 0 100%; }

.fsp-sok { flex: 1 1 220px; max-width: 320px; }
.fsp-sok__falt {
  width: 100%; font-size: 13px; font-family: inherit; padding: 9px 14px;
  color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s ease;
}
.fsp-sok__falt::placeholder { color: var(--muted); }
.fsp-sok__falt:focus { border-color: var(--accent); outline: none; }
.fsp-sok__falt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fsp-knapprad { display: flex; flex-wrap: wrap; gap: 8px; }
.fsp-knapp {
  /* padding sätts explicit — CoTheme lägger 0.75em 1.5em på alla <button>. */
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 17px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: #fff; cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fsp-knapp:hover { color: var(--navy); border-color: #c3cdd8; }
.fsp-knapp[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.fsp-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Type: en förfining av söket, inte en andra navigation. Samma pillerform
   som knapparna, så raden hänger ihop visuellt. */
.fsp-typ { display: inline-flex; align-items: center; gap: 8px; }
.fsp-typ__etikett {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.fsp-select {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--navy);
  padding: 9px 34px 9px 15px; cursor: pointer; appearance: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23616A7B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  transition: border-color .15s ease;
}
.fsp-select:hover { border-color: #c3cdd8; }
.fsp-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fsp-treff { flex: 1 0 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
.fsp-treff:empty { display: none; }

/* Sorterbara kolumnrubriker. */
/* Etiketter och klickytor ska inte gå att markera.
   CoThemes ::selection målar med fokusfärgen mot vit text, så en markerad
   versaletikett blir en blå platta som ser ut som en bugg. Raden är dessutom
   en klickyta — minsta musdragning vid klick markerar texten under pekaren.
   Värdena lämnas markerbara: en innkjøper ska kunna kopiera «INTL / IVP /
   Vakuum» ur tabellen. */
.ptbl-row > summary,
.rc > i,
.ptbl-badge,
.pmodal-eyebrow,
.pmodal-flag,
.cap-sz,
.pp-media .ph {
  user-select: none;
  -webkit-user-select: none;
}

/* Men värdena inuti raden går att markera igen. */
.ptbl-row > summary .vname,
.ptbl-row > summary .rc.spec,
.ptbl-row > summary .rc.pack {
  user-select: text;
  -webkit-user-select: text;
}

.fsp-sorter {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 0; border: 0; background: none; cursor: default;
  /* Rubriken är en klickyta. Utan detta markeras texten vid klick, och
     CoTheme målar ::selection i fokusfärgen — det ser ut som en bugg. */
  user-select: none; -webkit-user-select: none;
}
.fsp-js .fsp-sorter { cursor: pointer; }
.fsp-js .fsp-sorter:hover { color: var(--navy); }
.fsp-js .fsp-sorter:hover .fsp-sorter__pil { opacity: .6; }
.fsp-sorter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pilen ligger blekt på alla rubriker, så det syns att de går att sortera.
   Bara under .fsp-js — utan JavaScript gör klicket ingenting. */
.fsp-sorter__pil { width: 7px; height: 7px; opacity: 0; transition: opacity .15s ease; }
.fsp-js .fsp-sorter:not([data-riktning]) .fsp-sorter__pil { opacity: .28; }
.fsp-js .fsp-sorter[data-riktning] { color: var(--navy); }
.fsp-sorter__pil::before {
  content: ''; display: block; width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 5px solid currentColor;
}
.fsp-sorter[data-riktning] .fsp-sorter__pil { opacity: 1; }
.fsp-sorter[data-riktning="fallande"] .fsp-sorter__pil { transform: rotate(180deg); }

/* Filtrerade rader och tabeller. Egen regel eftersom .bt-item och .ptbl-row
   har display satt av andra regler, och hidden annars förlorar. */
.fsp-js .bt-item[hidden],
.fsp-js .ptbl-row[hidden] { display: none; }

/* ---- Fristående tabell per produktgrupp ---- */
.ptbl {
  /* Tilstand fick 0.14fr från Variant 28 aug 2026 när chipsen blev fyra
     (Med skjell / Uten skjell ska rymmas på en rad); längsta variantnamnet
     tar ändå bara ~2/3 av sin spalt. */
  --ptc: 22px minmax(0,1.36fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,0.92fr) minmax(0,1.55fr);
  margin-top: 34px; border: 1px solid var(--line); border-top: 0; border-radius: 3px;
  overflow: hidden; background: #fff;
}
.ptbl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--navy); color: #fff; padding: 20px 26px;
}
.ptbl-head h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }

/* Länk vidare till kategorin hos Frysehuset. Ljusblå accent på navy —
   10:1, godkänd som textfärg (--fs-accent-light i designsystemet). Ligger
   mellan rubriken och badgen; margin-left auto skjuter den mot höger. */
.ptbl-lenke {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: #6FD0FF; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.ptbl-lenke:hover { color: #fff; border-bottom-color: #fff; }
.ptbl-lenke:focus-visible { outline: 2px solid #6FD0FF; outline-offset: 4px; }
.ptbl-lenke__pil { font-size: 15px; line-height: 1; }

.ptbl-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,255,255,0.12); border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}
.ptbl-cols {
  display: grid; grid-template-columns: var(--ptc); gap: 18px;
  padding: 14px 26px 12px; background: var(--mist); border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ---- Rad ---- */
/* .ptbl-sum är radens innehåll i den rena tabellen (utan utfällning) —
   samma grid som <summary>, men ingen pekare, ingen hover, inget som ser
   klickbart ut. Oslo, Nederland och Australia körs så. */
.ptbl-row + .ptbl-row { border-top: 1px solid var(--line); }
.ptbl-row > summary,
.ptbl-row > .ptbl-sum {
  display: grid; grid-template-columns: var(--ptc); gap: 18px; align-items: start;
  padding: 17px 26px; list-style: none;
}
.ptbl-row > summary { cursor: pointer; transition: background .15s ease; }

/* Ren tabell: caret-kolumnen finns kvar i DOM:en (sorteringens cellindex
   räknar på den) men tar ingen plats, och proportionerna är gjorda för
   Oslo/Nederland — kort variantnamn, lång formattext, korta värden — i
   stället för Bergens, där sista kolumnen bär storlekschips. */
.fsp-flat .ptbl {
  --ptc: minmax(0,1fr) minmax(0,1.75fr) minmax(0,0.8fr) minmax(0,0.65fr) minmax(0,0.85fr);
}
.fsp-flat .ptbl-cols > span:first-child,
.fsp-flat .ptbl-sum > span:first-child { display: none; }
.ptbl-row > summary::-webkit-details-marker { display: none; }
.ptbl-row > summary::marker { content: ''; }
.ptbl-row > summary:hover { background: #F8FAFC; }
.ptbl-row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ptbl-row[open] > summary { background: #F5F9FC; }

.rc { min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.rc > i { display: none; font-style: normal; }        /* kolumnetikett — bara mobil */
.rc.spec { font-weight: 500; color: var(--navy); }
.rc.pack { color: var(--muted); }
.rc.cond { display: flex; flex-wrap: wrap; gap: 6px; }
/* Kolumnetiketten (bara surfplatta/mobil) ska ligga på egen rad ovanför
   chipsen, inte som första flex-barn bredvid dem. */
.rc.cond > i { flex-basis: 100%; }

/* ---- Tilstand-chips ----
   Fersk/Fryst och sedan 28 aug 2026 även Med skjell/Uten skjell. Utan ram
   lästes fyra värden som en löpande textrad. Konturchip i samma familj som
   storlekschipsen men ofyllt: storlekarna är klickbara, tilstand är bara
   information. Fryst får medvetet ingen egen stil (Emelie 28 aug 2026):
   inget motiverar att fryst lyfts över fersk, och ett avvikande chip läses
   som «valt».

   Sedan 0.9.0 (E35) är Packaging chips av samma slag där raden går att fälla
   ut, och ett värde som har en bild blir en knapp med storlekschipsens
   fyllning — fyllt betyder klickbart i hela tabellen. */
.tag {
  display: inline-block; font-size: 12px; font-weight: 500; line-height: 1.3;
  padding: 5px 9px; border: 1px solid #cdd6e0; border-radius: 2px;
  color: var(--navy); background: #fff; white-space: nowrap;
}

/* Värdena kommer ur löpande text i Excel («INTL / IVP / vacuum-packed on
   tray») och börjar ofta med gemen. Som eget chip ser det fel ut. Versalen
   sätts här och inte i texten — CoTranslate nycklar på textnoden, och en
   ändrad text vore en ny, oöversatt sträng på alla språk. */
.tag::first-letter { text-transform: uppercase; }

/* Snedstrecken mellan värdena ligger kvar i DOM:en så att sortering, sök och
   popupens kloner läser samma text som förut — chipsen gör dem överflödiga
   för ögat. */
.rc .sep { display: none; }

.rc.pack.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc.pack.chips > i { flex-basis: 100%; }

/* padding och font står ut explicit — CoTheme sätter 0.75em 1.5em och egen
   typografi på alla <button>, se .pmodal-close. */
button.tag.har-bild {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--navy); background: #E9F5FC; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button.tag.har-bild:hover { border-color: var(--accent); background: #D6EDFA; color: var(--navy); }
button.tag.har-bild:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.r-caret {
  align-self: start; margin-top: 7px; width: 0; height: 0;
  border-left: 7px solid var(--accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .18s ease; transform-origin: 30% 50%;
}
.ptbl-row[open] .r-caret { transform: rotate(90deg); }

/* Produktnamnet ska se klickbart ut — det är det som öppnar raden */
.vname {
  display: inline-block; font-size: 16px; font-weight: 600; color: var(--navy);
  letter-spacing: -0.005em; border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.ptbl-row > summary:hover .vname { border-bottom-color: var(--accent); }
.ptbl-row[open] .vname { border-bottom-color: var(--accent); }

/* Med popupen (JS) är raden inte ett knappobjekt: bara namnet, pilen och
   chipsen är klickbara, som på Kaiyo (0.9.6, Emelie 22 sep 2026). Pekare och
   hover följer därför namnet, inte raden. Pilen — radens markör — färgas
   redan i accent och rör sig lite när namnet hovras. Utan JS gäller reglerna
   ovan: hela raden fäller ut dragspelet. */
html.has-pmodal .ptbl-row > summary { cursor: default; }
html.has-pmodal .ptbl-row > summary:hover { background: transparent; }
html.has-pmodal .ptbl-row > summary:hover .vname { border-bottom-color: transparent; }
html.has-pmodal .ptbl-row > summary .vname,
html.has-pmodal .ptbl-row > summary .r-caret { cursor: pointer; }
html.has-pmodal .ptbl-row > summary .vname:hover { border-bottom-color: var(--accent); }
html.has-pmodal .ptbl-row > summary:has(.vname:hover) .r-caret,
html.has-pmodal .ptbl-row > summary .r-caret:hover { transform: translateX(3px); }
.vflag {
  display: block; margin-top: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.vflag.res { color: var(--accent); }

/* ---- Storleks-chips: klickbara, byter bild i panelen ---- */
/* I den rena tabellen renderas chipsen som span — samma utseende, men
   utan hover och utan att låtsas vara knappar. */
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
button.size,
span.size {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--navy); background: #E9F5FC; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button.size:hover { border-color: var(--accent); background: #D6EDFA; }
button.size:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.size.alt,
span.size.alt { background: #fff; border-style: dashed; border-color: #cdd6e0; color: var(--muted); font-weight: 500; }
span.size { cursor: default; }
button.size.alt:hover { border-color: var(--accent); color: var(--navy); }
/* Vald storlek markeras bara när raden är öppen — annars skulle varje
   rad ha ett mörkt chip liggande utan att något är valt. */
.ptbl-row[open] button.size[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- Utfälld panel ---- */
.ptbl-panel {
  display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 34px;
  padding: 26px 26px 32px; background: #F5F9FC; border-top: 1px dashed var(--line);
}
.pp-media { margin: 0; }
/* contain, inte cover (0.9.0): kundens produkt- och förpackningsbilder är
   frilagda i alla möjliga format — en liggande filé i en 4:3-ruta beskars till
   oigenkännlighet. Ett foto får i stället ljus marginal upptill och nedtill. */
.pp-media .frame {
  aspect-ratio: 4 / 3; background: var(--mist, #F5F7F9);
  border-radius: 3px; overflow: hidden;
}
.pp-media img { width: 100%; height: 100%; padding: 14px; box-sizing: border-box; object-fit: contain; display: block; }
.pp-media figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* Bilden i popupen går att förstora (0.9.5): zoom-markör på bilden och en
   liten rund knapp i rutans hörn så att det syns. Knappen läggs av JS. */
.pp-media .frame { position: relative; }
.pp-media img.kan-forstorras { cursor: zoom-in; }
.pp-zoom {
  position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy);
  cursor: zoom-in; transition: border-color .15s ease, color .15s ease;
}
.pp-zoom:hover { border-color: var(--accent); color: var(--accent); }
.pp-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-zoom svg { width: 15px; height: 15px; }
.pp-media figcaption b { color: var(--navy); font-weight: 600; }
.pp-media .ph {
  /* Egen rad, inte inline efter bildtexten — annars trängs den ihop
     när produktnamnet är kort. */
  display: block; width: fit-content; margin-top: 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #A8B2BD;
  border: 1px dashed #CBD4DD; border-radius: 2px; padding: 3px 7px;
}
/* Miniatyrrad under huvudbilden. Ligger inuti figuren så att popupen får
   med den när panelens barn klonas. */
/* Rutnät som fyller bildens bredd (0.9.3) — fem i rad bredvid fälten i
   popupen. Hela bilden visas, som i huvudrutan: de frilagda bilderna har
   alla möjliga format, och ett beskuret utsnitt gick inte att känna igen. */
.pp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 12px; }
.pp-thumb {
  /* padding: 0 — CoTheme sätter 0.75em 1.5em på alla <button>, se .pmodal-close. */
  width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden;
  background: var(--mist, #F5F7F9); border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer; transition: border-color .15s ease;
}
.pp-thumb img { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; object-fit: contain; display: block; }
.pp-thumb:hover { border-color: var(--line-strong, #CBD4DD); }
.pp-thumb[aria-pressed="true"] { border-color: var(--navy); }
.pp-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pp-txt > div + div { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pp-txt h4 {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 7px;
}
.pp-txt p { font-size: 14.5px; line-height: 1.65; color: var(--text); max-width: 620px; }
.pp-txt .pp-meta { font-size: 12.5px; color: var(--muted); }
.pp-txt .pp-meta b { color: var(--navy); font-weight: 600; }

/* ---- Trimband ------------------------------------------------------------
   Innehållet kommer ur First Seafoods egen trimguide och är kumulativt:
   svart prick = redan gjort i föregående grad, blått plus = det som
   tillkommer. Bandet ligger först i .ptbl-panel och spänner båda kolumnerna
   — samma regel bär både den utfällda raden och popupen, eftersom bådas
   behållare är tvåkolumnsgrid. */

.fst-band {
  grid-column: 1 / -1;
  /* Ramen sluter runt kortet, inte runt popupen. En trimgrad är bild plus tre
     korta punkter — sträcks bandet över hela bredden blir prickraden en lång
     tom linje och kortet ser övergivet ut. */
  width: fit-content;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.fst {
  display: grid;
  /* Textkolumnen får inte krympa till längsta punkten — då blir prickraden
     bara några centimeter. */
  grid-template-columns: minmax(0, 240px) minmax(260px, auto);
  gap: 26px;
  align-items: center;
}

.fst__media { margin: 0; }
.fst__media img { display: block; width: 100%; height: auto; }

.fst__namn {
  margin: 0; font-size: 22px; font-weight: 600;
  letter-spacing: var(--fs-ls-tight, -0.025em); color: var(--navy);
}

/* Prickraden ur tryckguiden. Ren dekor, därför aria-hidden i markupen. */
.fst__prickar {
  height: 6px; margin: 9px 0 13px; opacity: 0.45;
  background-image: radial-gradient(circle, var(--navy) 1.4px, transparent 1.5px);
  background-size: 9px 6px; background-repeat: repeat-x;
}

.fst__punkter { display: flex; flex-wrap: wrap; gap: 2px 30px; }

.fst-lista { margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.75; }
.fst-lista li { position: relative; padding-left: 15px; color: var(--text); }
.fst-lista li::before { content: '•'; position: absolute; left: 0; color: var(--muted); }

/* Det som tillkommer i just den här graden. */
.fst-lista--ny li { color: var(--accent-ink, #006A96); font-weight: 600; }
.fst-lista--ny li::before { content: '+'; font-weight: 700; color: var(--accent); }

.fst-band__lenke { margin: 18px 0 0; }
.fst-band__lenke a {
  font-size: 13px; font-weight: 600; color: var(--accent-ink, #006A96);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.fst-band__lenke a:hover { color: var(--navy); }

/* Samma länk under «Trim- og foredlingsmuligheter» (0.8.7). */
.bt-gen__lenke { margin: 18px 0 0; }
.bt-gen__lenke a { color: var(--accent); font-weight: 600; text-decoration: none; }
.bt-gen__lenke a:hover { color: var(--navy); }

/* Rader som anger flera trimgrader, t.ex. Lakseloins «E-trim / E-trim Deep
   Skinned / F-trim». Korten ställs bredvid varandra i stället för att bli en
   hög kolumn. */
/* Med flera grader tar bandet hela bredden igen — annars blir varje kort
   för smalt och långa punkter som «Skin off (From E-Trim Normal …)» bryts
   över fyra rader. */
.fst-band--flere {
  width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px;
}
.fst-band--flere .fst { grid-template-columns: 1fr; gap: 14px; }
.fst-band--flere .fst__media { max-width: 240px; }
.fst-band--flere .fst__namn { font-size: 19px; }
.fst-band--flere .fst-lista { font-size: 12.5px; }
.fst-band--flere .fst-band__lenke { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 720px) {
  .fst-band { padding: 18px; }
  .fst { grid-template-columns: 1fr; gap: 14px; }
  .fst__media { max-width: 280px; }
}

/* ---- Trimguiden som egen sida -------------------------------------------
   Tryckoriginalet ligger som tre kolumner gånger två rader. Här faller det
   till två och sedan en, vilket är hela skälet till att guiden finns som
   sida — en A3 går inte att läsa i telefonen. */

.fst-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }

/* Varje trimgrad som en bricka i sajtens kortstil (jfr .fst-band): mist-yta
   som bryter den vita sidan, hårlinje och samma radie. Gapet mellan korten
   är mindre än i den öppna varianten — brickorna bär separationen själva. */
.fst-guide__grad {
  display: flex; flex-direction: column;
  padding: 26px 26px 22px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* På mist-ytan behöver tabellcellerna egen vit botten för att läsas som
   tabell — på vit sida bar hårlinjerna det ensamma. */
.fst-guide .fst-hog th,
.fst-guide .fst-hog td { background: #fff; }
.fst-guide .fst-hog thead th,
.fst-guide .fst-hog .fst-hog__etikett th { background: var(--mist); }

/* I guiden står bilden över texten, som i tryck. I popupen ligger den
   bredvid — samma kort, olika riktning. */
.fst-guide .fst { grid-template-columns: 1fr; gap: 16px; align-items: start; }
.fst-guide .fst__namn { font-size: 27px; }
.fst-guide .fst__punkter { gap: 2px 26px; }

.fst-hog {
  width: 100%; margin-top: auto; padding-top: 18px;
  border-collapse: collapse; font-size: 11.5px; text-align: left;
}
.fst-hog caption {
  padding: 7px 10px; text-align: left;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  color: #fff; background: var(--navy);
}
.fst-hog th, .fst-hog td { padding: 6px 10px; border: 1px solid var(--line); }
.fst-hog thead th { font-weight: 600; color: var(--muted); background: var(--mist); }
.fst-hog__etikett th {
  font-weight: 600; color: var(--navy); background: var(--mist); text-align: center;
}

@media (max-width: 1024px) {
  .fst-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
}

@media (max-width: 620px) {
  .fst-guide { grid-template-columns: 1fr; gap: 44px; }
  .fst-guide .fst__media { max-width: 320px; }
}

/* ---- Fotnoter och generella dropdowns ---- */
.bt-foot { margin-top: 30px; font-size: 13px; color: var(--muted); line-height: 1.85; }
.bt-foot b { color: var(--accent); font-weight: 600; }

/* ---- Kaiyo Seafood under tabellerna (Oslo, Nederland) ---- */
.bt-kaiyo {
  margin-top: 36px; padding: 26px 30px; max-width: 880px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); background: #fff;
}
.bt-kaiyo__etikett {
  display: block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.bt-kaiyo p { font-size: 15px; line-height: 1.7; color: var(--text); }
.bt-kaiyo p + p { margin-top: 10px; }
.bt-kaiyo__lenke {
  display: inline-block; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--accent); transition: color .15s ease;
}
.bt-kaiyo__lenke:hover { color: var(--accent); }
.bt-kaiyo__lenke:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bt-general { margin-top: 44px; border-top: 1px solid var(--line); }
.bt-gen { border-bottom: 1px solid var(--line); }
.bt-gen > summary {
  display: flex; align-items: center; gap: 14px; padding: 22px 2px;
  cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em;
}
.bt-gen > summary::-webkit-details-marker { display: none; }
.bt-gen > summary::marker { content: ''; }
.bt-gen > summary:hover { color: var(--accent); }
.bt-gen > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bt-gen .r-caret { margin-top: 0; align-self: center; border-left-width: 8px; border-top-width: 6px; border-bottom-width: 6px; }
.bt-gen[open] .r-caret { transform: rotate(90deg); }
.bt-gen-body { padding: 0 2px 30px 30px; max-width: 880px; }
.bt-gen-body p { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.bt-gen-body p + p { margin-top: 14px; }

.bt-matrix { width: 100%; border-collapse: collapse; margin-top: 20px; }
.bt-matrix th {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line);
}
.bt-matrix td { font-size: 13.5px; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bt-matrix td:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }
.bt-matrix td.cs { color: var(--muted); font-style: italic; }

/* ---- Responsivt ---- */
@media (max-width: 1080px) {
  .ptbl { --ptc: 20px minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1fr); }
  .ptbl-cols span:nth-child(5), .ptbl-cols span:nth-child(6) { display: none; }
  .rc.cond { grid-column: 2 / 3; }
  .rc.sz { grid-column: 3 / -1; }
  .rc.cond > i, .rc.sz > i {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
  .ptbl-panel { grid-template-columns: 1fr; gap: 24px; }
  .pp-media { max-width: 380px; }
  /* Ren tabell utan caret-kolumn: samma tre spalter, förskjutna ett steg. */
  .fsp-flat .ptbl { --ptc: minmax(0,1fr) minmax(0,1.5fr) minmax(0,0.9fr); }
  .fsp-flat .rc.cond { grid-column: 1 / 2; }
  .fsp-flat .rc.sz { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .ptbl { --ptc: 18px minmax(0,1fr); margin-top: 24px; }
  .ptbl-cols { display: none; }
  .ptbl-head { padding: 16px 18px; flex-wrap: wrap; gap: 10px; }
  .ptbl-head h3 { font-size: 18px; }
  /* Länken får egen rad under rubrik och badge när huvudet bryts. */
  .ptbl-lenke { margin-left: 0; flex-basis: 100%; order: 3; white-space: normal; }
  .ptbl-row > summary,
  .ptbl-row > .ptbl-sum { padding: 18px; gap: 12px; }
  .bt-kaiyo { padding: 20px 18px; }
  /* Nollställ surfplattereglerna — de är mer specifika och skulle annars
     skapa fantomkolumner i mobilens tvåkolumnersgrid. */
  .rc, .rc.cond, .rc.sz { grid-column: 2 / -1; }
  /* Ren tabell: en enda spalt, allt i den. */
  .fsp-flat .ptbl { --ptc: minmax(0,1fr); }
  .fsp-flat .rc, .fsp-flat .rc.cond, .fsp-flat .rc.sz { grid-column: 1 / -1; }
  .rc > i {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
  }
  .rc.var > i { display: none; }
  .ptbl-panel { padding: 20px 18px 26px; }
  .bt-gen-body { padding-left: 0; }
  .bt-matrix { display: block; overflow-x: auto; white-space: nowrap; }
  .bfilters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
}

.pp-media figcaption .cap-sz { font-weight: 600; color: var(--navy); }

/* ============================================================
   PRODUKTPOPUP (Bergen)
   Beteendet är hämtat från kaiyoseafood.com/shellfish: raden
   öppnar en modal med overlay, stängkryss, Escape, klick utanför,
   scroll-lås och fokus tillbaka till raden.
   Formspråket är däremot First Seafoods eget — navy huvud som
   ekar tabellens, 3 px radie, en accent. Ingen beige, ingen
   16 px rundning.
   JS lägger .has-pmodal på <html>; utan JS ligger den inbyggda
   panelen kvar och <details> fungerar som accordion.
   ============================================================ */
html.has-pmodal .ptbl-panel { display: none; }

.pmodal {
  width: min(860px, calc(100vw - 40px));
  max-height: calc(100vh - 64px);
  /* margin: auto centrerar dialogen. Måste stå ut explicit — den globala
     * { margin: 0 }-resetten slår annars ut webbläsarens egen regel och
     kortet fastnar uppe till vänster. */
  margin: auto;
  padding: 0; border: 0; border-radius: 3px;
  background: #fff; color: var(--text);
  box-shadow: 0 30px 80px rgba(9, 25, 45, 0.30);
  overflow: hidden;
}
.pmodal[open] { display: flex; flex-direction: column; }
.pmodal::backdrop { background: rgba(14, 26, 46, 0.55); }

/* Mjuk in- och uttoning. Webbläsare utan allow-discrete visar
   popupen direkt — inget går sönder. */
.pmodal, .pmodal::backdrop { opacity: 0; }
.pmodal[open], .pmodal[open]::backdrop { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pmodal, .pmodal::backdrop {
    transition: opacity .22s ease, overlay .22s allow-discrete, display .22s allow-discrete;
  }
  @starting-style { .pmodal[open], .pmodal[open]::backdrop { opacity: 0; } }
}

/* ---- Huvud ---- */
.pmodal-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 26px; background: var(--navy); color: #fff;
}
.pmodal-eyebrow {
  display: block; margin-bottom: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.pmodal-title { font-size: 23px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.pmodal-flag {
  display: block; margin-top: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.pmodal-flag.res { color: #6FD0FF; }
.pmodal-flag:empty { display: none; }

.pmodal-close {
  /* CoTheme sätter padding: 0.75em 1.5em på alla <button>. Med font-size 22px
     blir det 33px i sidled, vilket spräcker de 34px som gör knappen rund. */
  flex: 0 0 auto; width: 34px; height: 34px; margin-top: 2px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 22px; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff;
  transition: background .15s ease;
}
.pmodal-close:hover { background: rgba(255,255,255,0.24); }
.pmodal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Kropp ---- */
.pmodal-body { flex: 1 1 auto; overflow-y: auto; padding: 26px; }

/* Specfälten: etiketterna visas alltid här, till skillnad från i tabellen. */
.pm-specs {
  display: grid; grid-template-columns: 1fr; gap: 20px 32px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}

/* Fälten bor i en egen behållare och behåller sin tvåkolumnsform. */
.pm-falt {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px;
  align-content: start;
}
.pm-falt .rc.sz { grid-column: 1 / -1; }

/* Bildrutan står bredvid fälten, halva bredden var (0.9.1, Emelie 21 sep
   2026). Chipsen i fälten byter bilden — de ska synas tillsammans. Med bild
   går fälten på en spalt; utan bild behåller de sina två. */
.pm-specs:has(> .pp-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 34px; align-items: start; }
.pm-specs:has(> .pp-media) .pm-falt { grid-template-columns: 1fr; gap: 18px; }
.pm-specs > .pp-media { grid-column: 1; grid-row: 1; }

/* Trimgraderna är chips i fältet Specification / trim och byter samma bild
   som övriga chips. Punkterna för den valda graden står under, i två
   spalter — Henriks lista har upp till tretton steg. */
.pm-trimchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-trim { margin-top: 10px; }
.pm-trim .fst-lista { columns: 2; column-gap: 24px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.pm-trim .fst-lista[hidden] { display: none; }
.pm-trim .fst-lista li { break-inside: avoid; }
.pm-trim .fst-band__lenke { margin: 10px 0 0; font-size: 13px; }

/* Nollställ tabellens responsiva kolumnplaceringar — .rc-klonerna bär med
   sig dem hit, och de skulle annars låsa fälten till fel kolumn. */
.pm-specs .rc { grid-column: auto; font-size: 15px; }
.pm-specs .rc > i {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
/* I tabellen är Pakning nedtonad för att inte konkurrera med variantnamnet.
   I popupen är det ett av fyra likvärdiga specfält och ska läsas lika lätt. */
.pm-specs .rc.pack { color: var(--text); }
.pm-specs .rc.cond,
.pm-specs .rc.pack.chips { display: block; }
.pm-specs .rc.cond .tag,
.pm-specs .rc.pack.chips .tag { margin: 0 6px 6px 0; }
.pm-specs .rc.sz { grid-column: 1 / -1; }
/* Fotnoten om andre størrelser ligger i .rc.sz och följer med klonen hit.
   I tabellen är den dold — där står den samlat under tabellen i stället. */
.sz-note { display: none; }
.pm-specs .sz-note {
  display: block; margin-top: 12px; max-width: 62ch;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
/* Vald storlek markeras alltid i popupen — här ÄR något valt. */
.pmodal button.size[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pmodal button.size.alt[aria-pressed="true"] { border-style: solid; }
/* Värdechipset vars bild visas just nu — samma markering som vald storlek. */
.pmodal button.tag.har-bild[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.pm-main { display: grid; grid-template-columns: 1fr; padding-top: 24px; }

/* Rubrik och text delar rader över spalterna (subgrid), så att en rubrik på
   två rader inte knuffar ner sin text förbi grannarnas. Rubrikerna linjerar
   i överkant: alla börjar på samma rad, och brödtexterna likaså. Bottenlinjerade
   (0.9.1) hamnade en enradig rubrik i höjd med grannens andra rad. */
.pm-main .pp-txt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 30px; }
.pm-main .pp-txt > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 8px; }
.pm-main .pp-txt > div + div { margin-top: 0; padding-top: 0; border-top: 0; }
.pm-main .pp-txt h4 { margin: 0; align-self: start; }
.pm-main .pp-txt p { margin: 0; }

@media (max-width: 720px) {
  .pmodal { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .pmodal-head { padding: 18px; }
  .pmodal-title { font-size: 20px; }
  .pmodal-body { padding: 20px 18px 28px; }
  .pm-specs,
  .pm-specs:has(> .pp-media),
  .pm-falt { grid-template-columns: 1fr; gap: 16px; }
  .pm-specs > .pp-media { max-width: 420px; }
  .pm-main .pp-txt { grid-template-columns: 1fr; }
  .pm-main .pp-txt > div { grid-row: auto; grid-template-rows: none; }
  .pm-trim .fst-lista { columns: 1; }
}

/* ============================================================
   Lightbox (0.9.5). Ett <dialog> som chipsen i tabellraden och bilden i
   popupen delar. Samma kort som popupen — marinblått huvud, ljusgrått
   bildfält — så att det läses som en syster till produktkortet (variant B,
   Emelie 22 sep 2026). Öppnas ovanpå popupen; Escape stänger bara lightboxen.
   ============================================================ */
.fsp-lys {
  width: min(900px, calc(100vw - 40px));
  max-height: calc(100vh - 64px);
  margin: auto; padding: 0; border: 0; border-radius: 3px;
  background: #fff; color: var(--text);
  box-shadow: 0 30px 80px rgba(9, 25, 45, 0.30);
  overflow: hidden;
}
.fsp-lys[open] { display: flex; flex-direction: column; }
.fsp-lys::backdrop { background: rgba(14, 26, 46, 0.55); }
.fsp-lys, .fsp-lys::backdrop { opacity: 0; }
.fsp-lys[open], .fsp-lys[open]::backdrop { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fsp-lys, .fsp-lys::backdrop {
    transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;
  }
  @starting-style { .fsp-lys[open], .fsp-lys[open]::backdrop { opacity: 0; } }
}

.fsp-lys__head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 18px 24px; background: var(--navy); color: #fff;
}
.fsp-lys__eyebrow {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.fsp-lys__eyebrow:empty { display: none; }
.fsp-lys__title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.fsp-lys__sub { display: block; margin-top: 5px; font-size: 13px; color: rgba(255,255,255,0.7); }
.fsp-lys__sub:empty { display: none; }

.fsp-lys__lukk {
  flex: 0 0 auto; width: 34px; height: 34px; margin-top: 2px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 22px; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff;
  transition: background .15s ease;
}
.fsp-lys__lukk:hover { background: rgba(255,255,255,0.24); }
.fsp-lys__lukk:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fsp-lys__figur {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 28px;
  display: grid; place-items: center; background: var(--mist, #F5F7F9);
}
.fsp-lys__figur img {
  display: block; max-width: 100%; height: auto;
  max-height: calc(100vh - 64px - 96px - 56px);
  object-fit: contain;
}

@media (max-width: 720px) {
  .fsp-lys { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .fsp-lys__head { padding: 18px; }
  .fsp-lys__title { font-size: 19px; }
  .fsp-lys__figur { padding: 18px; }
  .fsp-lys__figur img { max-height: calc(100vh - 96px - 36px); }
}