/* =============================================================
   SKARP VERSION – redigera inte den här filen för hand.

   Arbetskällan är mockups/tema/centralen-ui.css. Den filen ritar upp
   mockuparna, som är tomma sidor utan tema, och är den som ska ändras när
   designen utvecklas. Den här kopian är samma stilmall förberedd för den
   skarpa sajten, där GeneratePress och WooCommerce redan sätter sina egna
   stilar. Görs en ändring i mockupen ska den kopieras hit på nytt och
   skillnaden nedan läggas tillbaka.

   Skillnaden mot mockupen är fyra rader – och bara de fyra:
     *{box-sizing:border-box}   →  :where(body.csd-ny-design), :where(...) *
     body{...}                  →  body.csd-ny-design{...}
     button{font:inherit}       →  :where(body.csd-ny-design) button
     a{color:var(--blue)}       →  :where(body.csd-ny-design) a
   Se den utförliga motiveringen vid själva reglerna längre ner. Allt annat –
   variablerna på :root, färgtemana på body[data-tema], komponenterna och de
   responsiva blocken – är ordagrant identiskt med mockupen.

   Sist i filen ligger ett tillägg under egen rubrik. Det är regler som bara
   behövs i skarp kod, för markup som mockupen aldrig ritade: riktiga bilder i
   bildytorna, de rubriknivåer WordPress-editorn kan skapa, och WooCommerce
   egen paginering och notiser. Tillägget ligger sist just för att allt ovanför
   ska gå att kopiera om från mockupen utan att någon rad behöver plockas isär.

   Kroppsklassen csd-ny-design sätts av respektive Centralen_UI_*-modul (eller
   Centralen_Sidor) på den sida som är portad. Filen kan därför laddas på hela
   sajten utan att förändra utseendet på en enda sida som inte är portad.
   ============================================================= */

/* =============================================================
   Centralen UI – gemensamt tema för varukorg, kassa och betalsidor
   Enda källan för färg, form och komponenter. Sidorna i mockups/tema
   innehåller bara innehåll, all design bor här.
   ============================================================= */

:root{
  /* Färg – brandtonerna är samplade ur den skarpa sajten:
     #3400ff (mättad blåviolett i header och kundvagnsbricka) och
     #957ffe (den ljusa headerlilan). Marin och blå är härledda ur samma
     familj, så hela temat följer sajtens lila i stället för gammal marinblå. */
  --brand:#3400ff;
  --brand-light:#957ffe;
  --navy:#2a17a8;
  --blue:#5637f2;
  --blue-soft:#f1eeff;
  --blue-line:#d7d0fa;
  --pink:#c90055;
  --pink-dark:#a90047;
  --text:#15142b;
  --muted:#67658a;
  --line:#dcd9ea;
  --hair:#eeecf7;
  --soft:#f9f8fd;
  --page:#f4f2fa;
  --ok:#166534;
  --ok-soft:#eafaf0;
  --ok-line:#bfe6cd;
  /* Prickar och andra små ytor: de mörka tonerna ovan är gjorda för text och
     blir svåra att skilja på i 8 px, så statusprickarna har egna klarare toner. */
  --ok-dot:#12b76a;
  --bad-dot:#f0342a;
  --warn:#8a5300;
  --warn-soft:#fff7e6;
  --warn-line:#f0d089;
  --bad:#a4123c;
  --bad-soft:#fdeef2;
  --bad-line:#f3c2ce;

  /* Ytor och textfärger som betalsidornas färgteman byter ut. De ligger som
     egna variabler i stället för hårdkodade hex, annars kan admins sex teman
     i BetalGateway inte längre styra betalsidan. */
  --card-bg:#fff;
  --accent-ink:#3d24c9;
  --body-ink:#4b4470;
  --mono-ink:#3d3960;

  /* Sidans kanter. Varje behållare som går över hela sidbredden – sidhuvudet,
     hjälten, innehållet och sidfoten – hämtar maxbredd och sidopadding härifrån
     i stället för att bära egna siffror. Sidhuvudet och innehållet höll
     1080/20 px medan sidfoten hade 1080/10 px och drog av 32 px på smala
     skärmar, vilket lade korten och sidfotens spalter på var sin kant.
     Mobilbrytpunkten ändrar bara --kant, så allt smalnar av tillsammans. */
  --sida:1080px;
  --kant:20px;

  /* Kortens ram och sidovadd, och indraget de tillsammans ger. Innehåll som
     ligger i ett kort börjar inte vid sidans kant utan vid --text-kant, och
     sidfoten – som inte är ett kort – läser samma mått för att lägga sin text i
     samma satsbredd som korten. De får inte glida isär, därför en enda källa:
     ändras kortens vadd följer sidfoten med av sig själv.
     Mobilbrytpunkten sänker --kort-pad, och --text-kant räknas om med den. */
  --kort-ram:1px;
  --kort-pad:22px;
  --text-kant:calc(var(--kant) + var(--kort-ram) + var(--kort-pad));

  /* Form */
  --r-card:18px;
  --r-box:12px;
  --r-pill:999px;
  --shadow:0 10px 24px rgba(42,23,168,.09);
  --shadow-lift:0 16px 34px rgba(42,23,168,.13);

  /* Typografi */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- Betalsidornas färgteman ----------
   BetalGateway → Inställningar → Färgtema har sex teman som var och en sätter
   ett tjugotal färger på betalsidan. Temat nedan är samma färger, men uttryckta
   som variabler i stället för egna regler, så den nya designens form och
   komponenter ligger kvar medan admin fortfarande styr färgerna. Sidor som inte
   sätter data-tema använder sajtens lila. */
body[data-tema="standard"]{
  --card-bg:#fff;--line:#dddddd;--hair:#eeeeee;
  --blue-soft:#e7f3ff;--blue-line:#b3d9ff;--accent-ink:#0066cc;
  --navy:#0066cc;--text:#333333;--muted:#666666;--body-ink:#333333;--mono-ink:#333333;
  --soft:#f0f0f0;--blue:#0066cc;
  --pink:#26cd6b;--pink-dark:#1a5733;
  --warn:#856404;--warn-soft:#fff3cd;--warn-line:#ffc107;
  --shadow:0 10px 24px rgba(0,0,0,.07);
}
body[data-tema="mork_teal"]{
  --card-bg:#0f4c4c;--line:#0a3d3d;--hair:#14595a;
  --blue-soft:#1a6b6b;--blue-line:#2dd4bf;--accent-ink:#e0f2f1;
  --navy:#ffffff;--text:#e0f2f1;--muted:#b2dfdb;--body-ink:#e0f2f1;--mono-ink:#e0f2f1;
  --soft:#1a6b6b;--blue:#2dd4bf;
  --pink:#2dd4bf;--pink-dark:#14b8a6;--cta-ink:#0f4c4c;
  --warn:#ffd700;--warn-soft:#1a6b6b;--warn-line:#ffd700;
  --shadow:0 10px 24px rgba(0,0,0,.28);
}
body[data-tema="morkt"]{
  --card-bg:#1a1a1a;--line:#333333;--hair:#2d2d2d;
  --blue-soft:#2d2d2d;--blue-line:#4a9eff;--accent-ink:#e0e0e0;
  --navy:#ffffff;--text:#e0e0e0;--muted:#b0b0b0;--body-ink:#e0e0e0;--mono-ink:#e0e0e0;
  --soft:#2d2d2d;--blue:#4a9eff;
  --pink:#4a9eff;--pink-dark:#357abd;
  --warn:#ffa500;--warn-soft:#2d2d2d;--warn-line:#ffa500;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}
body[data-tema="lila"]{
  --card-bg:#f3e5f5;--line:#ba68c8;--hair:#e1bee7;
  --blue-soft:#e1bee7;--blue-line:#9c27b0;--accent-ink:#4a148c;
  --navy:#4a148c;--text:#6a1b9a;--muted:#6a1b9a;--body-ink:#4a148c;--mono-ink:#4a148c;
  --soft:#f3e5f5;--blue:#7b1fa2;
  --pink:#9c27b0;--pink-dark:#7b1fa2;
  --warn:#856404;--warn-soft:#fff3cd;--warn-line:#ffc107;
  --shadow:0 10px 24px rgba(74,20,140,.14);
}
/* Mörka teman: sidbakgrunden hör inte till admins färger, men en ljus lila yta
   runt ett svart kort blir obrukbar, så den följer kortet. */
body[data-tema="mork_teal"]{--page:#0a3737}
body[data-tema="morkt"]{--page:#101010}

/* ---------- Grundregler, inskrivna under kroppsklassen ----------
   Mockupen ritar upp en tom sida och kan därför skriva *, body, button och a
   rakt av. Här körs samma regler på en sajt som redan har ett tema, och då
   skulle de fyra slå igenom överallt: bottenvadden på 88 px hade lagt tomrum
   under varje sida och länkfärgen hade bytts ut i sidhuvudet. Var och en ligger
   därför under body.csd-ny-design, som bara sätts på sidor som faktiskt är
   portade (varje Centralen_UI_*-modul sätter klassen själv). Resten av butiken
   märker inte att filen laddas.

   Tre av dem har kroppsklassen inuti :where(). Den väger noll, så de scopade
   reglerna behåller exakt samma specificitet som originalen och hamnar kvar i
   botten av kaskaden där resten av filen förutsätter att de ligger. Skrevs de
   som "body.csd-ny-design a" hade den vägt tyngre än .csd-btn, .csd-entry och
   .csd-back--muted och färgat om både knappar och kort som sätter sin egen
   färg – och "body.csd-ny-design button" hade slagit ut .csd-seg button.

   body-regeln är undantaget och skrivs med riktig klass: den måste väga tyngre
   än GeneratePress egen body-regel för att bakgrund, textfärg och typsnitt ska
   slå igenom på de portade sidorna.

   Variablerna ovan står kvar på :root och rörs inte. Flyttades de hit skulle
   varje var()-anrop i filen sluta lösas ut på alla sidor utom de portade. */

/* Motsvarar *{box-sizing:border-box}. Kroppen står med i uppräkningen för att
   :where(...) * bara når elementen inuti body, inte body själv. */
:where(body.csd-ny-design),
:where(body.csd-ny-design) *{box-sizing:border-box}

body.csd-ny-design{
  margin:0;
  /* Utrymme för de fasta raderna i nederkanten (notis och ev. tröskelrad) */
  padding:0 0 88px;
  background:var(--page);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
}

:where(body.csd-ny-design) button{font:inherit}
:where(body.csd-ny-design) a{color:var(--blue)}

/* ---------- Sidram ---------- */
.csd-shell{width:min(var(--sida),100%);margin:0 auto;padding:26px var(--kant) 0}
/* Smal spalt för sidor som bara är ett meddelande: betalsidans lägen, inloggning */
.csd-shell--narrow{width:min(560px,100%)}
.csd-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr);
  gap:18px;
  align-items:start;
}
.csd-grid--single{grid-template-columns:minmax(0,1fr)}
/* Avsnitt som bryter ut ur tvåspalten och går i full bredd under båda spalterna.
   Sidospalten är kortare än huvudspalten, och i stället för ett tomrum till
   höger om sista avsnittet blir kanten ett medvetet byte av layout. Kräver att
   avsnittet ligger som direkt barn till .csd-grid, inte inne i en spalt.
   grid-row:2 är inte överflödig: utan den skulle spalterna placeras ut i tur och
   ordning och sidospalten hamna på rad 3 under helbreddsavsnittet. Med raden
   utpekad läggs de två spalterna på rad 1 och helbredden alltid under dem, både
   här och när rutnätet faller ihop till en spalt på mobil. */
.csd-grid__full{grid-column:1/-1;grid-row:2}

/* ---------- Stegspår ---------- */
.csd-steps{display:flex;flex-wrap:wrap;align-items:center;gap:10px;row-gap:7px;margin:0 0 16px;padding:0 2px;list-style:none}
.csd-steps li{display:flex;align-items:center;gap:8px;color:#9793b3;font-size:12.5px;font-weight:750}
.csd-steps li span{
  display:grid;width:21px;height:21px;place-items:center;border-radius:50%;
  background:var(--hair);color:#918eae;font-size:11px;font-weight:800;
}
.csd-steps li.is-done{color:var(--blue)}
.csd-steps li.is-done span{background:var(--blue);color:#fff}
.csd-steps li.is-now{color:var(--navy)}
.csd-steps li.is-now span{background:var(--navy);color:#fff}
.csd-steps i{flex:0 0 64px;height:2px;border-radius:2px;background:var(--hair)}
.csd-steps i.is-filled{background:var(--blue)}

/* ---------- Kort ---------- */
/* Sidovadden och ramen kommer ur variablerna i :root, inte ur egna siffror:
   sidfoten räknar sitt indrag ur samma mått för att hamna i samma satsbredd. */
.csd-card{
  padding:20px var(--kort-pad) 22px;
  border:var(--kort-ram) solid var(--line);
  border-radius:var(--r-card);
  background:var(--card-bg);
  box-shadow:var(--shadow);
}
/* Sidokortet på betalsidorna avslutas med Spara-ordernummer-notisen.
   Tidigare låg .csd-trust under (margin-top:11px); utan den raden räcker
   kortets egen vadd – ingen extra bottenluft. Globala .csd-trust orörd. */
.csd-card--side{padding:20px}
.csd-card--flush{padding:0;overflow:hidden}

.csd-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:15px;border-bottom:1px solid var(--hair);
}
.csd-card__head--plain{padding-bottom:0;border-bottom:0}
.csd-title{margin:0;color:var(--navy);font-size:24px;font-weight:800;line-height:1.15}
.csd-title--sm{font-size:17px}
.csd-sub{margin:4px 0 0;color:var(--muted);font-size:13px}
.csd-kicker{
  margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
.csd-pill{
  padding:6px 12px;border:1px solid var(--blue-line);border-radius:var(--r-pill);
  background:var(--blue-soft);color:var(--accent-ink);font-size:12px;font-weight:700;white-space:nowrap;
}
.csd-link{color:var(--blue);font-size:13px;font-weight:750;text-decoration:none}
.csd-link:hover{text-decoration:underline}

/* ---------- Numrerade avsnitt ----------
   Numret låg tidigare i en egen rutnätskolumn, och då drogs allt innehåll in
   28+13 px: fälten, valrutorna och notiserna blev smalare än kortet de ligger i,
   med ett indrag till vänster och kortets padding till höger. Nu ligger numret i
   vänsterkanten som ett eget lager och bara rubriken gör plats för det, så
   innehållet börjar där rubrikraden börjar och slutar vid kortets padding.
   Stegen hålls ihop av hårlinjen mellan dem, som redan fanns.
   flow-root och inte block: rutnätet hindrade barnens marginaler från att läcka
   ut ur steget, och den spärren behöver finnas kvar. */
.csd-step{
  --step-pad:18px;
  /* 28 px nummer + 13 px luft: rubrikens indrag, ingen annans */
  --step-ind:41px;
  position:relative;display:flow-root;padding:var(--step-pad) 0;
}
.csd-step + .csd-step{border-top:1px solid var(--hair)}
.csd-step:last-child{padding-bottom:0}
.csd-step__num{
  position:absolute;top:var(--step-pad);left:0;
  display:grid;width:28px;height:28px;place-items:center;border-radius:50%;
  background:var(--navy);color:#fff;font-size:13px;font-weight:800;
}
/* Marginalen i överkanten centrerar rubrikens första rad mot numret intill */
.csd-step h3{margin:3px 0 12px;padding-left:var(--step-ind);color:var(--navy);font-size:15px;font-weight:800}
/* Tätare steg när guiden har många steg på samma sida */
.csd-step--sm{--step-pad:13px}
.csd-step--sm h3{margin:2px 0 7px;font-size:14.5px}
/* Ett steg vars hela innehåll är löptext, utan egen rubrikrad. Fraktguidens
   steg är butikens egna instruktionsstycken – ett stycke per steg – och där
   finns ingen rubrik som kan bära indraget. Utan det här börjar första raden
   under nummercirkeln. Måttet är rubrikens eget, --step-ind, alltså inget nytt
   mått. Marginalerna i kanterna nollas så att steget blir lika högt oavsett om
   butiken skrivit ett <p>, en lista eller bara text. */
.csd-step__body{padding-left:var(--step-ind)}
.csd-step__body > :first-child{margin-top:0}
.csd-step__body > :last-child{margin-bottom:0}
/* Uppladdningsrutan får rubrikens indrag, den också. Nummercirkeln är 28 px
   hög och börjar i stegets överkant, alltså 8 px längre ner än rubrikens enda
   rad slutar, medan rubriken bara har 7 px marginal under sig. En ruta i full
   bredd lade därför sitt övre vänstra hörn rakt under siffran, och den
   streckade ramen började 1 px innan cirkeln var slut – siffran satt i
   praktiken ovanpå rutan.
   Indraget och inte mer luft: mer luft hade skjutit ner notisen och knappen
   under rutan lika mycket, och de står redan rätt. Nu flyttar sig bara rutan,
   i sidled, och den börjar där stegets text börjar. */
.csd-step .csd-drop{margin-left:var(--step-ind)}
/* Steg vars enda innehåll är en knapp: knappen ställs till höger om texten i
   stället för under den. Ett steg som bara säger "köp fraktsedeln" och länkar
   vidare tog annars tre våningar – rubrik, hjälptext och en knapp på egen rad –
   fast knappen är smal och luften till höger stod tom.
   Texten ligger i .csd-step__text och knappen är syskon till den, så flexraden
   har två objekt och inte tre. flex:1 1 <bas> på texten är det som gör
   radbrytningen: när texten inte får plats i sin bas hoppar knappen ner på egen
   rad, och där lägger space-between den i vänsterkanten igen – alltså tillbaka
   till den staplade formen på smala skärmar utan en egen mediaregel. Basen är
   200 px och inte hjälptextens egen bredd: med en bredare bas bröt raden redan
   när tvåspalten fortfarande stod kvar, alltså i fönster kring 900–1000 px där
   det finns gott om plats. Nu håller den ihop hela vägen ner till mobil.
   align-items:center centrerar knappen mot hela textblocket, inte mot rubriken.
   Rubriken behåller sitt indrag för numret; hjälptexten under den börjar i
   vänsterkanten precis som i vanliga steg. */
.csd-step--act > div{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px 16px;
}
.csd-step--act .csd-step__text{flex:1 1 200px;min-width:0}
.csd-step--act .csd-step__text > :last-child{margin-bottom:0}
.csd-step--act > div > .csd-btn{flex:0 0 auto}
/* Stegen på en rad. Används av helbreddsavsnittet på startsidan, där det finns
   plats för fyra steg i bredd: numret flyttas ovanför rubriken och skiljelinjen
   från överkanten till vänsterkanten. Under 900 px, när tvåspalten faller ihop,
   staplas stegen igen (se det responsiva blocket längst ner). */
.csd-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.csd-flow .csd-step{display:block;padding:2px 20px 0}
.csd-flow .csd-step:first-child{padding-left:0}
.csd-flow .csd-step:last-child{padding-right:0}
.csd-flow .csd-step + .csd-step{border-top:0;border-left:1px solid var(--hair)}
/* Numret står ovanför rubriken här, inte intill den, och hör därför tillbaka i
   flödet – och då behöver rubriken inte heller något indrag. */
.csd-flow .csd-step__num{position:static}
/* Två rader avsatta för rubriken även när den bara tar en: annars börjar
   brödtexten på olika höjd i de fyra kolumnerna och raden ser ojämn ut. */
.csd-flow .csd-step h3{margin:11px 0 5px;min-height:3em;padding-left:0}

/* ---------- Formulär ---------- */
.csd-label{display:block;margin:0 0 6px;color:var(--navy);font-size:13px;font-weight:750}
.csd-input{
  width:100%;height:48px;padding:11px 14px;border:1px solid #cfcbe6;
  border-radius:11px;background:#fff;color:var(--text);font-size:15px;
}
.csd-input::placeholder{color:#9793b3}
.csd-hint{margin:6px 0 0;color:var(--muted);font-size:13px}

/* ---------- Valbara rader och brickor ---------- */
.csd-opt{
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--card-bg);cursor:pointer;
}
.csd-opt + .csd-opt{margin-top:8px}
.csd-opt__radio{width:18px;height:18px;border:2px solid var(--line);border-radius:50%;background:var(--card-bg)}
.csd-opt b{display:block;color:var(--navy);font-size:14px;font-weight:750;line-height:1.3}
.csd-opt small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.csd-opt__price{color:var(--navy);font-size:14px;font-weight:800;white-space:nowrap}
.csd-opt--static{grid-template-columns:24px minmax(0,1fr) auto;cursor:default}
.csd-rank{
  display:grid;width:24px;height:24px;place-items:center;border-radius:50%;
  background:var(--navy);color:#fff;font-size:12px;font-weight:800;
}
.csd-rank--2{background:var(--blue)}
.csd-rank--3{background:var(--brand-light);color:var(--navy)}
.csd-opt.is-active{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.csd-opt.is-active .csd-opt__radio{border-color:var(--blue);box-shadow:inset 0 0 0 4px var(--blue)}

.csd-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.csd-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.csd-tiles .csd-opt{grid-template-columns:20px 26px minmax(0,1fr);margin:0}
.csd-logo{
  display:grid;width:26px;height:26px;place-items:center;border-radius:7px;
  color:#fff;font-size:12px;font-weight:800;
}
.csd-logo--card{background:#1a1f71;font-size:8.5px}
.csd-logo--btc{background:#f7931a}
.csd-logo--usdt{background:#26a17b;font-size:13px}
.csd-logo--xmr{background:#ff6600}
.csd-logo--rev{background:#0666eb;font-size:13px}
.csd-logo--wise{background:#9fe870;color:#163300;font-size:11px}

/* ---------- Knappar ---------- */
.csd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card-bg);color:var(--navy);font-size:14px;font-weight:750;text-decoration:none;cursor:pointer;
}
.csd-btn:hover{border-color:var(--blue);color:var(--blue)}
.csd-btn--cta{
  width:100%;min-height:56px;border:0;background:var(--pink);color:var(--cta-ink,#fff);
  font-size:16.5px;font-weight:800;
}
.csd-btn--cta:hover{background:var(--pink-dark);color:var(--cta-ink,#fff)}
/* Låst läge. "Tillfälligt reserverad" är ett meddelande kunden ska kunna läsa,
   inte bara en avstängd knapp, så texten står i temats nedtonade ton – 4,6:1 mot
   den grå ytan, mot 2,6:1 för den ljusare grå som låg här. Fast värde och inte
   var(--muted): ytan är hårdkodad och texten skulle bli ljust grå på ljust grå
   i de mörka färgtemana. */
.csd-btn--off{background:#eae7f3;color:#67658a;cursor:not-allowed}
.csd-btn--off:hover{background:#eae7f3;color:#67658a}
/* Låst men positivt läge: kunden har själv valt varan */
.csd-btn--done{border:1px solid var(--ok-line);background:var(--ok-soft);color:var(--ok);cursor:default}
.csd-btn--done:hover{background:var(--ok-soft);color:var(--ok)}
.csd-btn--copy{min-height:40px;padding:0 14px;border-color:var(--blue-line);background:var(--blue-soft);color:var(--accent-ink);font-size:12.5px}
/* CTA som bara är så bred som texten kräver */
.csd-btn--auto{width:auto;padding:0 34px}

/* ---------- Rader, summa, total ---------- */
.csd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 0;font-size:13.5px}
.csd-row + .csd-row{border-top:1px solid var(--hair)}
.csd-row > span:first-child{color:var(--muted)}
.csd-row > span:last-child{font-weight:700;white-space:nowrap}
.csd-row small{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
/* Avdragsrad, t.ex. poängrabatten som läggs som negativ avgift i varukorgen */
.csd-row--minus > span:last-child{color:var(--ok)}
.csd-total{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:12px;padding:14px;border-radius:var(--r-box);background:var(--blue-soft);
}
.csd-total b{color:var(--navy);font-size:15px;font-weight:800}
.csd-total strong{color:var(--navy);font-size:21px;font-weight:800}
/* Poängraden under totalen. Notisrutorna har samma lila yta som .csd-total och
   skulle klumpa ihop sig med den, så den här är ofylld och nedtonad i stället –
   den ska läsas efter totalen, inte konkurrera med den eller köpknappen. */
.csd-earn{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:10px;padding:9px 11px;border:1px dashed var(--blue-line);
  border-radius:var(--r-box);color:var(--muted);font-size:13px;line-height:1.45;
}
.csd-earn__star{flex:0 0 auto;color:var(--brand-light);font-size:12px}
.csd-earn b{color:var(--navy);font-weight:800}
.csd-trust{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:11px;color:var(--muted);font-size:12.5px;font-weight:600;
}
.csd-trust i{width:3px;height:3px;border-radius:50%;background:#918eae}
.csd-back{display:block;margin-top:10px;color:var(--blue);font-size:13px;font-weight:700;text-align:center;text-decoration:none}
.csd-back--muted{color:var(--muted)}

/* ---------- Produkt- och orderrader ---------- */
.csd-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0}
.csd-item + .csd-item{border-top:1px solid var(--hair)}
.csd-item__thumb{
  width:64px;height:64px;border:1px solid #e4e1f0;border-radius:10px;background:#eae7f6;
  display:grid;place-items:center;color:#918eae;font-size:9px;font-weight:800;letter-spacing:.06em;
}
.csd-item__name{display:block;color:var(--navy);font-size:14.5px;font-weight:750;line-height:1.35}
/* Varukorgen lägger WooCommerce länk till produkten inuti namnet. Färgen ovan
   sitter på spannet och når inte in i länken, som annars tar den globala
   :where(body.csd-ny-design) a-regeln och blir blå och understruken. Mockupen
   har ren mörkblå text; länken behålls ändå, eftersom det är bättre att kunna
   klicka sig till produkten. Understrykningen kommer tillbaka vid hovring, så
   att raden fortfarande läser sig som klickbar. */
.csd-item__name a{color:inherit;text-decoration:none}
.csd-item__name a:hover,
.csd-item__name a:focus-visible{color:inherit;text-decoration:underline}
.csd-item__meta{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.csd-item__end{display:flex;align-items:center;gap:14px}
/* Antalsrutan används inte längre av varukorgen. Varje rad är alltid 1 st
   eftersom varje produkt säljs styckvis, så rutan upptog plats för att säga
   något som aldrig varierade – .csd-item--tight nedan har ingen. Regeln står
   kvar så länge varukorg-kompakt.html visar den gamla raden som jämförelse, och
   kan tas bort tillsammans med den filen. */
.csd-item__count{
  min-width:46px;padding:6px 10px;border-radius:9px;background:var(--soft);
  color:var(--muted);font-size:12.5px;font-weight:700;text-align:center;
}
.csd-item__sum{min-width:82px;color:var(--navy);font-size:14.5px;font-weight:800;text-align:right}
.csd-item__remove{
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#fff;
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer;
}
.csd-item__remove:hover{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}

.csd-item--sm{grid-template-columns:38px minmax(0,1fr) auto;gap:11px;padding:9px 0}
.csd-item--sm .csd-item__thumb{width:38px;height:38px;border-radius:8px;font-size:8px}
.csd-item--sm .csd-item__name{font-size:13px;font-weight:700}
.csd-item--sm .csd-item__meta{font-size:11.5px}
.csd-item--sm .csd-item__sum{min-width:0;font-size:13px;font-weight:700}

/* Varukorgens rad. Korgen använder den här varianten och inte basraden ovan:
   två textrader i stället för tre våningar, eftersom en korg med åtta varor
   annars blir dubbelt så lång som resten av sidan. Namnet och radsumman delar
   första raden, metaraden med mängd, styckpris och ort ligger under, och bilden
   och kryssknappen bär båda raderna i kanterna.
   Delarna är samma .csd-item__* som orderraderna, men de ligger som direkta
   barn till raden i stället för i två omslag, så att de namngivna områdena kan
   placera dem – basradens .csd-item__end används alltså inte här.
   Antalsrutan finns inte i korgen: varje rad är alltid 1 st eftersom varje
   produkt säljs styckvis, och det står en gång i verktygsraden i stället för en
   gång per rad. */
.csd-item--tight{
  grid-template-columns:40px minmax(0,1fr) auto 40px;
  grid-template-areas:
    "thumb name sum remove"
    "thumb meta meta remove";
  column-gap:11px;row-gap:1px;padding:9px 0;
}
.csd-item--tight .csd-item__thumb{grid-area:thumb;width:40px;height:40px;border-radius:9px;font-size:7.5px}
/* Namnet krymper i stället för att trycka undan radsumman: tre punkter är
   bättre än ett belopp som hamnar under produkten det hör till. */
.csd-item--tight .csd-item__name{grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd-item--tight .csd-item__sum{grid-area:sum;min-width:0}
.csd-item--tight .csd-item__meta{grid-area:meta;margin:0}
/* Större än basradens 34 px, inte mindre: raden är tätare och knappen ska ändå
   gå att träffa med tummen. */
.csd-item--tight .csd-item__remove{grid-area:remove;width:40px;height:40px;font-size:17px}
/* Orten i metaraden, markerad när korgens varor ligger på olika orter. Raden är
   tät, och den uppgift kunden måste agera på får inte gömma sig i en nedtonad
   textrad. */
.csd-item__where{
  padding:1px 6px;border-radius:6px;
  background:var(--warn-soft);color:var(--warn);font-weight:750;
}

/* ---------- Verktygsrad (rabattkod) ---------- */
.csd-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
}
.csd-coupon{display:flex;gap:8px}
.csd-coupon .csd-input{width:190px;height:44px}

/* ---------- Statuspanel (timer, info, klart, varning) ---------- */
.csd-panel{
  padding:15px 17px;border:1px solid var(--blue-line);border-radius:var(--r-box);
  background:var(--blue-soft);text-align:center;
}
.csd-panel__sub{color:var(--accent-ink);font-size:13px;font-weight:750}
/* Raden är sidans rubrik där panelen bär den – på Tack-sidan är den sidans h1.
   Marginalen skrivs därför ut helt: bara margin-top hade lämnat kvar
   webbläsarens 0,67em under en h1 och flyttat resten av panelen nedåt. */
.csd-panel__main{margin:3px 0 0;color:var(--navy);font-size:clamp(20px,4vw,28px);font-weight:800;line-height:1.15}
.csd-panel__main--mono{font-family:var(--mono);letter-spacing:.01em}
/* Rubriker som innehåller ett namn ur ordern – kuriren kan heta PostNord, DHL
   eller UPS – får en lägre grad så raden håller ihop även när namnet är långt.
   Utan den spricker fraktsedelsrubriken till två rader på mobil. */
.csd-panel__main--long{font-size:clamp(16px,3.7vw,23px)}
.csd-panel__detail{margin-top:8px;color:var(--body-ink);font-size:13px;line-height:1.55}
/* En mening per rad i de centrerade rutorna. Två meningar i löpande text bryts
   där raden råkar ta slut, alltså mitt i den andra meningen, och på mobil är
   raden så kort att texten blir en klump. Raderna är block och inte <br> så att
   avståndet mellan meningarna går att styra. Lång text bryts fortfarande inuti
   sin egen mening. */
.csd-panel__detail .csd-line,
.csd-qr__help .csd-line{display:block}
.csd-panel__detail .csd-line + .csd-line,
.csd-qr__help .csd-line + .csd-line{margin-top:3px}
.csd-panel--ok{border-color:var(--ok-line);background:var(--ok-soft)}
.csd-panel--ok .csd-panel__sub,.csd-panel--ok .csd-panel__main,.csd-panel--ok .csd-panel__detail{color:var(--ok)}
.csd-panel--warn{border-color:var(--warn-line);background:var(--warn-soft)}
.csd-panel--warn .csd-panel__sub,.csd-panel--warn .csd-panel__main,.csd-panel--warn .csd-panel__detail{color:var(--warn)}
.csd-panel--bad{border-color:var(--bad-line);background:var(--bad-soft)}
.csd-panel--bad .csd-panel__sub,.csd-panel--bad .csd-panel__main,.csd-panel--bad .csd-panel__detail{color:var(--bad)}
.csd-panel__main small{font-size:15px;font-weight:750}

/* ---------- Notiser ---------- */
.csd-note{
  display:flex;gap:11px;padding:13px 15px;border:1px solid var(--blue-line);
  border-radius:var(--r-box);background:var(--blue-soft);color:var(--body-ink);font-size:13px;line-height:1.5;
}
.csd-note b{display:block;color:var(--navy);font-size:13.5px}
.csd-note__icon{
  display:grid;flex:0 0 20px;width:20px;height:20px;place-items:center;border-radius:50%;
  background:#fff;color:var(--blue);font-size:12px;font-weight:800;
}
.csd-note--warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.csd-note--warn b{color:#6b4200}
.csd-note--warn .csd-note__icon{color:var(--warn)}
.csd-note--bad{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}
.csd-note--bad b{color:#7d0e2e}
.csd-note--bad .csd-note__icon{color:var(--bad)}
.csd-note--ok{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}
.csd-note--ok b{color:var(--ok)}
.csd-note--ok .csd-note__icon{color:var(--ok)}
.csd-note ul{margin:6px 0 0;padding-left:18px}
.csd-note li + li{margin-top:2px}
/* Fältnamn mitt i en punkt är inline, inte en egen rubrikrad som b annars blir */
.csd-note li b{display:inline;color:inherit;font-size:inherit}
/* Enradig variant: rubrik och text flyter ihop */
.csd-note--slim{gap:9px;padding:9px 11px;font-size:13px}
.csd-note--slim b{display:inline;font-size:13px}
.csd-note--slim .csd-note__icon{flex:0 0 18px;width:18px;height:18px;font-size:11px}

/* ---------- Belopp och adress (krypto) ---------- */
/* Rutnät och inte flex: med flex-wrap hoppade kopieringsknappen ner på en egen
   rad så fort beloppet blev någon pixel för brett, och kryptobelopp varierar i
   längd mellan mynten (0.7977 XMR mot 348.220000 USDT). Kolumnerna låser
   knappen till högerkanten precis som i adressrutan, och beloppskolumnen är
   minmax(0,1fr) så att det är beloppet som får ge sig, inte layouten. */
.csd-amount{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;
  padding:16px 17px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--soft);
}
.csd-amount__value{
  color:var(--navy);font-family:var(--mono);font-size:clamp(22px,3.4vw,30px);
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
.csd-amount__value span{margin-left:6px;font-size:15px;letter-spacing:0}
.csd-amount__sek{margin-top:5px;color:var(--muted);font-size:13px;font-weight:650}
/* "Mottaget hittills" är en egen rad under både beloppet och knappen, och tar
   därför hela rutnätsbredden i stället för att som förut förlita sig på att
   flexraden bröt av sig själv. */
.csd-amount__got{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;
  margin-top:2px;padding-top:11px;border-top:1px dashed var(--line);
  color:var(--muted);font-size:13px;
}
.csd-amount__got strong{color:var(--ok)}

/* ---------- Ordernummer högst upp på betalsidan ----------
   Sajten har inga konton, så ordernummret är kundens enda nyckel till Spåra
   order. Det låg bara i sidospaltens sammanfattning, vilket på mobil hamnar
   under adressen, QR-koden och allt annat – missar hon det där har hon
   ingenting att söka på sedan. Remsan ligger därför först i betalkortet.
   Formen är medvetet låg och ofylld, med streckad ram i stället för en fylld
   panel: den ska hittas direkt utan att ta blicken från beloppet och adressen,
   som är det kunden ska agera på just nu. */
.csd-payref{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;
  padding:11px 14px;border:1px dashed var(--blue-line);border-radius:var(--r-box);
  background:var(--soft);
}
.csd-payref__label{
  display:block;color:var(--muted);font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
/* user-select:all – ett tryck markerar hela numret för den som skriver av eller
   kopierar för hand i stället för att använda knappen. */
.csd-payref__num{
  display:block;margin-top:2px;color:var(--navy);font-family:var(--mono);
  font-size:21px;font-weight:800;letter-spacing:.05em;line-height:1.15;
  user-select:all;
}
.csd-payref__save{
  grid-column:1/-1;margin:2px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45;
}
.csd-payref__save b{color:var(--accent-ink);font-weight:800}

.csd-address{
  display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-box);background:var(--soft);
}
.csd-address__value{
  min-width:0;padding:14px 15px;color:var(--mono-ink);
  font-family:var(--mono);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere;
}
.csd-address__copy{
  min-width:106px;border:0;border-left:1px solid var(--line);background:var(--card-bg);
  color:var(--blue);font-size:12.5px;font-weight:800;cursor:pointer;
}
.csd-address__copy:hover{background:var(--blue-soft)}

/* Fältlista inuti adressrutan. .csd-address är byggd för ett enda värde, men
   ibland är värdet flera uppgifter som kunden ska föra över till ett annat
   formulär: kurirens mottagarfält, uppgifterna vi behöver i Session. Står de
   som en löpande rad måste hon själv leta ut var postnumret slutar och ombudet
   börjar, fält för fält. Här får varje uppgift en egen rad med etikett, medan
   kopieringsknappen ligger kvar i .csd-address och tar hela uppsättningen.
   Etiketten är ljus och liten men inte versal som .csd-kicker: den läses en gång
   per rad tillsammans med värdet, inte som rubrik över ett avsnitt. */
.csd-fields{min-width:0;padding:4px 0}
.csd-fields__row{
  display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);align-items:baseline;gap:12px;
  padding:7px 15px;
}
.csd-fields__row + .csd-fields__row{border-top:1px solid var(--hair)}
.csd-fields__row > span{color:var(--muted);font-size:12.5px;font-weight:750;line-height:1.5}
.csd-fields__row > b{
  min-width:0;color:var(--mono-ink);font-family:var(--mono);font-size:12.5px;font-weight:750;
  line-height:1.5;overflow-wrap:anywhere;
}

/* ---------- Avsändaradressen ur kortkoden ---------- */
/* Sidan ritade tidigare ett eget steg med avsändaren i en tabell och en
   Kopiera-knapp bredvid. Nu kommer adressen bara ur [adress_shortcode], mitt i
   den instruktionstext butiken själv skriver, och butiken bestämmer alltså var
   den hamnar. Rutan här är bara en läsram runt kortkodens utskrift: ingen
   rubrik, ingen knapp, ingenting som gör texten omarkerbar – kunden drar över
   adressen och kopierar på vanligt vis.
   Samma typsnitt som .csd-address__value, eftersom det är samma sorts uppgift:
   något som ska skrivas av tecken för tecken.
   Regeln står under .csd-shell med flit. Klassen kommer ur kortkoden och följer
   därför med till kundernas gamla spårningssida också, och den sidan ska se ut
   precis som förut. Kortkodens egen inline-marginal på 10 px står kvar orörd;
   den ger steget lagom luft, så här behövs inget !important för att ta över
   den. */
.csd-shell .csd-avsandare{
  padding:12px 15px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--soft);
  color:var(--mono-ink);font-family:var(--mono);font-size:12.5px;line-height:1.6;overflow-wrap:anywhere;
}
.csd-shell .csd-avsandare strong{font-weight:750}

/* ---------- QR med inbakad väljare ---------- */
.csd-qr{text-align:center}
.csd-qr__frame{
  display:inline-block;padding:10px;border:1px solid var(--line);
  border-radius:15px;background:#fff;box-shadow:0 2px 8px rgba(42,23,168,.07);
}
.csd-qr__img{display:block;width:198px;height:198px;margin:0 auto}
.csd-qr__help{margin:11px auto 0;max-width:230px;color:var(--muted);font-size:12.5px;line-height:1.45}
/* Ligger inuti den vita QR-ramen, som måste vara vit oavsett färgtema för att
   koden ska gå att skanna. Därför fasta färger här också. */
.csd-seg{
  display:grid;grid-template-columns:1fr 1fr;width:198px;margin:9px auto 0;padding:3px;
  border-radius:9px;background:#f2f0f8;
}
.csd-seg button{
  min-height:29px;padding:0 4px;border:0;border-radius:7px;background:transparent;
  color:#67658a;font-size:11.5px;font-weight:750;white-space:nowrap;cursor:pointer;
}
.csd-seg button.is-active{background:#fff;color:#2a17a8;box-shadow:0 1px 3px rgba(42,23,168,.18)}

/* ---------- Guide (kortbetalning) ---------- */
.csd-guide{border:1px solid var(--line);border-radius:var(--r-box);background:var(--soft);overflow:hidden}
.csd-guide__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-bottom:1px solid var(--line);background:var(--card-bg);
}
.csd-guide__head h3{margin:0;color:var(--navy);font-size:14.5px;font-weight:800}
.csd-guide__img{
  display:grid;height:150px;place-items:center;margin:15px;border:1px dashed var(--line);
  border-radius:10px;background:var(--card-bg);color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.06em;
}
.csd-guide__body{padding:0 15px;color:var(--body-ink);font-size:13px;line-height:1.6}
.csd-guide__body p{margin:0 0 10px}
.csd-chip{
  padding:2px 7px;border:1px solid var(--blue-line);border-radius:6px;background:var(--card-bg);
  color:var(--accent-ink);font-family:var(--mono);font-size:12px;font-weight:700;
  overflow-wrap:anywhere;
}
.csd-guide__nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:13px;padding:11px 15px;border-top:1px solid var(--line);background:var(--card-bg);
}
.csd-guide__nav button{
  width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
  background:var(--card-bg);color:var(--navy);font-size:15px;cursor:pointer;
}
.csd-guide__count{color:var(--muted);font-size:12px;font-weight:750}

/* ---------- Hjälte (innehållssidor) ----------
   Pillret är en etikett i bandets övre högra hörn och ligger på samma rad som
   överraden, inte i en egen kolumn bredvid hela textblocket. Med flex låg det
   bredvid textblocket och tvingades ner på en egen rad så fort bandet blev
   smalt (hjälten var flex-direction:column under 620 px) – då blev bandet en
   rad högre än det behövde vara. Wrappern runt överrad, rubrik och brödtext är
   därför display:contents, så de tre delarna blir egna celler i hjältens
   rutnät och pillret kan dela rad med just överraden. Rubriken och brödtexten
   spänner över båda kolumnerna och kan därför aldrig krocka med pillret, hur
   lång rubriken än är. Blir raden ändå för trång är det överraden som ger
   vika och radbryts – den är alltid kort ("PRODUKTARKIV", "COMMUNITY") och
   bara en överrad, medan pillret bär ett värde. Varje hjälte i temat har en
   överrad, så rad 1 står aldrig tom.
   Vadden: bandet bär tre korta rader och behöver inte ett korts höjd i luft
   över och under dem, så den lodräta vadden är lägre än kortens. Sidovadden är
   det inte – den läser --kort-pad, samma mått som kortens, för att hjältens
   text ska börja i samma lodräta linje som texten i kortet under den. Det är
   också det som gör att den egna mobilregeln kan utgå: --kort-pad krymper
   själv under 620 px och tar hjälten med sig. */
.csd-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 16px;
  margin-bottom:18px;padding:15px var(--kort-pad);border-radius:var(--r-card);
  background:linear-gradient(135deg,var(--brand),var(--navy));color:#fff;box-shadow:var(--shadow);
}
.csd-hero > div{display:contents}
.csd-hero h1{grid-column:1/-1;margin:0;font-size:27px;font-weight:800;line-height:1.15}
/* Ljus lavender i stället för ljusblått: håller kontrasten mot den lila botten */
.csd-hero p{grid-column:1/-1;margin:9px 0 0;max-width:620px;color:#ded6ff;font-size:14px;line-height:1.6}
/* Överraden delar rad 1 med pillret och centreras mot det. Marginalen nollas:
   den ärvdes från .csd-hero p och lade 9 px ovanför bandets första rad. */
.csd-hero .csd-kicker{grid-column:1;grid-row:1;align-self:center;margin:0;color:#c9bcff}
.csd-hero > .csd-pill{grid-column:2;grid-row:1;justify-self:end}
.csd-hero .csd-pill{border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.13);color:#fff}

/* ---------- Filterflikar ---------- */
.csd-tabs{display:flex;flex-wrap:wrap;gap:8px}
.csd-tabs button{
  min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--navy);font-size:13px;font-weight:700;cursor:pointer;
}
.csd-tabs button.is-on{border-color:var(--navy);background:var(--navy);color:#fff}

/* ---------- Sökrad ---------- */
.csd-search{display:flex;flex-wrap:wrap;gap:9px}
.csd-search .csd-input{flex:1 1 220px;height:54px}
.csd-search .csd-btn--cta{width:auto;flex:0 0 auto;min-height:54px;padding:0 30px}

/* ---------- Tidslinje ---------- */
.csd-timeline{margin:0;padding:0;list-style:none}
.csd-timeline li{position:relative;padding:0 0 17px 30px}
.csd-timeline li::before{content:"";position:absolute;left:6px;top:19px;bottom:0;width:2px;background:var(--hair)}
.csd-timeline li::after{
  content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  border:3px solid var(--hair);border-radius:50%;background:#fff;
}
.csd-timeline li:last-child{padding-bottom:0}
.csd-timeline li:last-child::before{display:none}
.csd-timeline b{display:block;color:#9793b3;font-size:13.5px;font-weight:750}
.csd-timeline small{display:block;margin-top:1px;color:var(--muted);font-size:13px}
.csd-timeline li.is-done::after{border-color:var(--blue);background:var(--blue)}
.csd-timeline li.is-done::before{background:var(--blue-line)}
.csd-timeline li.is-done b{color:var(--navy)}
.csd-timeline li.is-now::after{border-color:var(--pink);box-shadow:0 0 0 4px rgba(201,0,85,.13)}
.csd-timeline li.is-now b{color:var(--pink)}

/* ---------- Dragspel (FAQ) ---------- */
.csd-acc{border:1px solid var(--line);border-radius:var(--r-box);background:#fff;overflow:hidden}
.csd-acc + .csd-acc{margin-top:9px}
.csd-acc > summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  color:var(--navy);font-size:14.5px;font-weight:750;cursor:pointer;list-style:none;
}
.csd-acc > summary::-webkit-details-marker{display:none}
.csd-acc > summary::after{content:"+";color:var(--blue);font-size:19px;font-weight:800;line-height:1}
.csd-acc[open] > summary{border-bottom:1px solid var(--hair);background:var(--soft)}
.csd-acc[open] > summary::after{content:"–"}
.csd-acc__body{padding:14px 16px;color:#4b4470;font-size:13.5px;line-height:1.6}
.csd-acc__body p{margin:0 0 9px}
.csd-acc__body p:last-child{margin:0}

/* ---------- Avatar och märke ---------- */
.csd-avatar{
  display:grid;width:38px;height:38px;place-items:center;border-radius:50%;
  background:var(--blue-soft);color:#3d24c9;font-size:14px;font-weight:800;
}
.csd-avatar--dark{background:var(--navy);color:#fff}
.csd-badge{padding:3px 9px;border-radius:var(--r-pill);background:var(--hair);color:var(--muted);font-size:12px;font-weight:750}
.csd-badge--blue{background:var(--blue-soft);color:#3d24c9}
.csd-badge--pink{background:#fde7ef;color:var(--pink)}
.csd-badge--ok{background:var(--ok-soft);color:var(--ok)}
.csd-badge--warn{background:var(--warn-soft);color:var(--warn)}

/* ---------- Nedräkning ---------- */
/* Tre rutor – dagar/timmar/minuter, aldrig sekunder. Rutorna delar bredden
   lika hela vägen ner till mobil: "MINUTER" ryms i en tredjedel även vid
   320 px, och två kolumner hade lämnat den tredje rutan ensam på egen rad. */
.csd-count{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.csd-count div{
  padding:13px 6px;border:1px solid var(--blue-line);border-radius:var(--r-box);
  background:var(--blue-soft);text-align:center;
}
.csd-count b{display:block;color:var(--navy);font-family:var(--mono);font-size:25px;font-weight:800;line-height:1}
.csd-count span{
  display:block;margin-top:5px;color:var(--muted);font-size:10.5px;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- Trådlista och inlägg ----------
   Trådlistan har ingen avatar. Initialen hämtades ur ett anonymt användarnamn
   (anon_4150 blev "A") och sa ingenting som inte redan stod i metaraden under
   rubriken, men den åt 51 px av varje rad – på 390 px en sjundedel av bredden,
   för en dekorativ bokstav. Rubriken är det man letar efter i en trådlista och
   får därför börja i kanten. Avataren finns kvar i .csd-post, där den gör
   verklig nytta: den skiljer talarna åt genom en lång tråd.
   Två kolumner hela vägen ner till mobil. Svarsräknaren är smal nog att stå
   kvar till höger även på 390 px, så raden slipper den andra rad den bröt till
   när avataren tog kolumn ett.
   Utan avatar är hovringen det som visar att raden är en länk och inte en post
   i en oformaterad lista: rubriken tar temats länkfärg och hela raden får en
   svag yta. Ytan går 10 px utanför textkanten så den läses som en rad och inte
   som en ram runt texten – kortets padding är minst 16 px, så den ryms. */
.csd-thread{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px;
  margin:0 -10px;padding:13px 10px;border-radius:var(--r-box);text-decoration:none;
}
.csd-thread + .csd-thread{border-top:1px solid var(--hair)}
.csd-thread b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--navy);font-size:14.5px;font-weight:750;line-height:1.35}
.csd-thread small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
a.csd-thread:hover{background:var(--soft)}
a.csd-thread:hover b,a.csd-thread:hover .csd-thread__replies{color:var(--blue)}
.csd-thread__replies{min-width:38px;color:var(--navy);font-size:14px;font-weight:800;text-align:center}
.csd-thread__replies span{display:block;color:var(--muted);font-size:11px;font-weight:600}
.csd-post{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;padding:16px 0}
.csd-post + .csd-post{border-top:1px solid var(--hair)}
.csd-post__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.csd-post__head b{color:var(--navy);font-size:13.5px;font-weight:750}
.csd-post__rubrik{margin:8px 0 0;color:var(--navy);font-size:14.5px;font-weight:750;line-height:1.35}
.csd-post__body{margin:7px 0 0;color:#4b4470;font-size:13.5px;line-height:1.6}
.csd-post__acts{display:flex;gap:8px;margin-top:10px}
.csd-post__acts button{
  min-height:32px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;
}

/* ---------- Fält ---------- */
.csd-textarea{
  width:100%;min-height:120px;padding:12px 14px;border:1px solid #cfcbe6;border-radius:11px;
  background:#fff;color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.55;resize:vertical;
}
.csd-select{
  width:100%;height:48px;padding:0 12px;border:1px solid #cfcbe6;border-radius:11px;
  background:#fff;color:var(--text);font-size:15px;
}

/* ---------- Filuppladdning ---------- */
.csd-drop{
  display:grid;place-items:center;gap:7px;padding:24px 18px;border:2px dashed var(--blue-line);
  border-radius:var(--r-box);background:var(--blue-soft);text-align:center;
}
.csd-drop__icon{
  display:grid;width:40px;height:40px;place-items:center;border-radius:11px;
  background:#fff;color:var(--blue);font-size:17px;font-weight:800;
}
.csd-drop b{color:var(--navy);font-size:14.5px}
.csd-drop small{color:var(--muted);font-size:13px}
/* Liggande variant: tar en tredjedel av höjden */
.csd-drop--row{
  grid-template-columns:36px minmax(0,1fr) auto;align-items:center;justify-items:start;
  gap:12px;padding:12px 13px;text-align:left;
}
.csd-drop--row .csd-drop__icon{width:36px;height:36px;border-radius:10px;font-size:15px}
.csd-drop--row b{font-size:13.5px}
.csd-drop--row small{display:block;margin-top:1px}
.csd-drop--row .csd-btn{margin:0;justify-self:end}
.csd-file{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--ok-line);border-radius:var(--r-box);background:var(--ok-soft);
}
.csd-file__icon{
  display:grid;width:36px;height:36px;place-items:center;border-radius:9px;
  background:#fff;color:var(--ok);font-size:10.5px;font-weight:800;
}
.csd-file b{display:block;color:var(--navy);font-size:13.5px}
.csd-file small{display:block;color:var(--muted);font-size:13px}
.csd-file__ok{color:var(--ok);font-size:13px;font-weight:800;white-space:nowrap}

/* ---------- Bildplats ---------- */
.csd-figure{
  display:grid;place-items:center;min-height:210px;border:1px dashed var(--line);border-radius:var(--r-box);
  background:var(--soft);color:#918eae;font-size:11px;font-weight:750;letter-spacing:.07em;
}

/* ---------- Stack ---------- */
.csd-stack > * + *{margin-top:16px}
.csd-stack--sm > * + *{margin-top:11px}

/* ---------- Mockup-navigering (finns inte i skarp kod) ---------- */
.csd-mocknav{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 22px;background:var(--brand);color:#fff;
}
.csd-mocknav strong{font-size:13px;font-weight:800;letter-spacing:.02em}
.csd-mocknav nav{display:flex;flex-wrap:wrap;gap:6px}
.csd-mocknav a{
  padding:6px 12px;border-radius:var(--r-pill);color:#ded6ff;
  font-size:12.5px;font-weight:700;text-decoration:none;
}
.csd-mocknav a:hover{background:rgba(255,255,255,.10);color:#fff}
.csd-mocknav a.is-here{background:#fff;color:#2a17a8}
.csd-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
/* Växlaren är mockup-chrome och ska vara läsbar även när sidan står i ett mörkt
   färgtema, därför fasta färger i stället för temavariabler. */
.csd-switch button{
  min-height:36px;padding:0 15px;border:1px solid #dcd9ea;border-radius:var(--r-pill);
  background:#fff;color:#2a17a8;font-size:13px;font-weight:700;cursor:pointer;
}
.csd-switch button.is-on{border-color:#5637f2;background:#f1eeff;color:#3d24c9}
/* Andra växlarraden: mindre, med etikett framför */
.csd-switch--sek{align-items:center;margin-top:-8px}
.csd-switch--sek > span{color:#67658a;font-size:12px;font-weight:750}
.csd-switch--sek button{min-height:30px;padding:0 12px;font-size:12px}
body.is-bare .csd-mocknav,body.is-bare .csd-switch{display:none}

/* ---------- Brödsmulor ---------- */
.csd-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:0 0 14px;padding:0 2px;list-style:none;
  color:var(--muted);font-size:12.5px;font-weight:650;
}
.csd-crumbs a{color:var(--blue);text-decoration:none}
.csd-crumbs a:hover{text-decoration:underline}
.csd-crumbs li + li::before{content:"/";margin-right:7px;color:var(--line)}

/* ---------- Stjärnbetyg ---------- */
.csd-stars{display:inline-flex;align-items:center;gap:1px;color:var(--blue);font-size:13.5px;line-height:1}
/* Tom stjärna: samma tecken, ljusare ton */
.csd-stars i{color:var(--blue-line);font-style:normal}

/* ---------- Produktrutnät (sortiment) ---------- */
.csd-prodgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.csd-prod{
  position:relative;display:block;padding:16px 16px 18px;
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  box-shadow:var(--shadow);text-align:center;text-decoration:none;
}
.csd-prod:hover{border-color:var(--blue);box-shadow:var(--shadow-lift)}
/* Lagerstatus i hörnet – färgen kommer från csd-badge-varianten */
.csd-prod__flag{position:absolute;top:14px;left:14px;z-index:1;font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.csd-prod__thumb{
  display:grid;place-items:center;aspect-ratio:1/1;border-radius:50%;
  background:var(--blue-soft);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.07em;
}
.csd-prod__name{display:block;margin-top:13px;color:var(--navy);font-size:15px;font-weight:800;line-height:1.3}
.csd-prod__sub{display:block;margin-top:3px;color:var(--pink);font-size:12.5px;font-weight:650}
/* Neutral metarad, t.ex. stad · antal på Hämta direkt */
.csd-prod__sub--muted{color:var(--muted)}
.csd-prod .csd-stars{margin-top:7px}
.csd-prod__price{display:block;margin-top:5px;color:var(--navy);font-size:13.5px;font-weight:750}
.csd-prod--out .csd-prod__thumb{background:var(--hair)}
/* Kort med egen knapp (Hämta direkt): flexkolumn så knapparna hamnar i linje */
.csd-prod--action{display:flex;flex-direction:column}
.csd-prod--action .csd-prod__price{margin-bottom:13px}
.csd-prod--action .csd-btn{margin-top:auto}
/* De tre knapplägena – köp, "Tillfälligt reserverad" och "Du har valt den" –
   delar mått så att de ser lika genomarbetade ut. Sidopaddingen är temats
   vanliga 18 px (.csd-btn) i stället för de 12 px som satts för att pressa in
   den längsta texten: i ett kort som är en tredjedel av spalten finns plats för
   både texten och luften. Texten står på en rad, som i skarp kod
   (white-space:nowrap på .csd-hd-card__button). */
.csd-prod--action .csd-btn--cta{min-height:48px;padding:0 18px;font-size:14px;white-space:nowrap}

/* ---------- Produktsida ---------- */
.csd-figure--circle{
  width:min(100%,480px);min-height:0;margin:0 auto;aspect-ratio:1/1;border-radius:50%;
  border-style:solid;border-color:var(--blue-line);background:var(--blue-soft);
}
.csd-price{margin:0;color:var(--navy);font-size:22px;font-weight:800;letter-spacing:-.01em}
.csd-price--now{font-size:26px}
.csd-buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.csd-buyrow .csd-select{flex:1 1 150px;width:auto}

/* Metaremsan under produktbilden – WooCommerce product_meta (artikelnummer,
   kategori, etikett). Låg och nedtonad i stället för ett eget kort sist i
   sidospalten: uppslagsinformation ska inte vara det sista kunden ser i
   stället för köpknappen, och tomrummet under bilden får något att bära.
   Remsan ligger som eget barn till .csd-grid, inte inne i huvudspalten, för
   att kunna byta plats med köpkolumnen på mobil (se det responsiva blocket).
   Sidospalten spänner därför över båda raderna: utan spannet blir rad 1 lika
   hög som köpkolumnen och remsan hamnar under den i stället för under bilden.
   Andra raden är 1fr och inte auto av samma skäl – rutnätet räknar inte in
   spännande objekt när en flexibel rad finns, så bildens rad blir exakt lika
   hög som bilden och köpkolumnens överskott hamnar i raden under. Med två
   auto-rader delades överskottet lika och remsan sköts 80 px nedåt. */
.csd-grid--prod{grid-template-rows:auto 1fr}
.csd-grid--prod > aside{grid-row:1/span 2}
.csd-prodmeta{
  grid-column:1;grid-row:2;
  display:flex;flex-wrap:wrap;align-items:baseline;row-gap:3px;
  margin:11px 0 0;padding:0 4px;
  color:var(--muted);font-size:12px;line-height:1.55;
}
/* Skiljetecken mellan fälten. Ljusare än texten men inte --line som
   brödsmulorna: en punkt i ramfärg syns inte mot sidbakgrunden, och då läser
   "OLJA1 Kategori" ihop till en enda mening. */
.csd-prodmeta span + span::before{content:"·";margin:0 9px;color:#9793b3}
.csd-prodmeta b{color:var(--body-ink);font-weight:750}
/* Kategori och etikett är länkar även i skarp kod. De ska gå att se och sikta
   på utan att remsan blir en färgstark rad, så de har värdenas ton och en ljus
   understrykning i vila – temats blå kommer först på hover. */
.csd-prodmeta a{
  color:var(--body-ink);font-weight:750;text-decoration:underline;
  text-decoration-color:var(--blue-line);text-underline-offset:2px;
}
.csd-prodmeta a:hover{color:var(--blue);text-decoration-color:currentColor}

/* ---------- Lager per ort (samma logik som lagerpanelen i skarp kod) ---------- */
.csd-locstock{padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--soft)}
/* Raden utan modifierare är lagerläget "finns nu": vita chips och grön prick.
   Bara slutraden avviker, så den är den enda som har en egen regel. */
.csd-locstock__row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px}
.csd-locstock__row + .csd-locstock__row{margin-top:9px;padding-top:9px;border-top:1px solid var(--hair)}
.csd-locstock__label{
  flex:0 0 auto;color:var(--muted);font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
.csd-locstock__places{display:flex;flex-wrap:wrap;gap:7px}
.csd-locstock__place{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  color:var(--navy);font-size:12.5px;font-weight:750;white-space:nowrap;
}
.csd-locstock__dot{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--ok-dot);box-shadow:0 0 0 2px rgba(18,183,106,.20);
}
/* Slutrad: nedtonade chips, prickens färg vänder */
.csd-locstock__row--out .csd-locstock__place{border-color:var(--hair);background:var(--hair);color:var(--muted);font-weight:650}
.csd-locstock__row--out .csd-locstock__dot{background:var(--bad-dot);box-shadow:0 0 0 2px rgba(240,52,42,.20)}
.csd-locstock__hint{margin:10px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}

/* ---------- Löptext med underrubriker ---------- */
.csd-prose{color:var(--text);font-size:13.5px;line-height:1.65}
.csd-prose h3{margin:16px 0 7px;color:var(--navy);font-size:15px;font-weight:800}
.csd-prose p{margin:0 0 10px}
.csd-prose ul{margin:0 0 10px;padding-left:19px}
.csd-prose li + li{margin-top:3px}
.csd-prose li::marker{color:var(--blue)}
.csd-prose > :first-child{margin-top:0}
.csd-prose > :last-child{margin-bottom:0}

/* ---------- Recensioner ---------- */
.csd-review{padding:14px 0}
.csd-review + .csd-review{border-top:1px solid var(--hair)}
.csd-review__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.csd-review__date{color:var(--muted);font-size:12px;font-weight:650}
.csd-review__body{margin:7px 0 0;color:var(--text);font-size:13.5px;line-height:1.6}

/* ---------- Flytande varukorgsknapp ---------- */
/* KNAPPEN RITAS AV Centralen_UI_Varukorgsknapp, och bara på portade sidor.
   Butiken har också fly cart-pluginets flytande varukorg, som Centralen ställer
   in i class-centralen-checkout.php (force_fly_cart_cart_button,
   fly_cart_button_label, render_fly_cart_checkout_link). Två flytande
   varukorgar i samma hörn går inte, så modulen stänger av pluginet med dess
   eget filter woofc_disable där den själv ritar. Gamla designens sidor har
   fortfarande fly cart och ingen .csd-fab alls. */
/* Standardläget klarar en rad i nederkanten, --high två */
.csd-fab{
  position:fixed;right:18px;bottom:58px;z-index:41;
  display:grid;width:56px;height:56px;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:#fff;
  color:var(--navy);box-shadow:var(--shadow-lift);text-decoration:none;
}
.csd-fab--high{bottom:100px}
.csd-fab:hover{border-color:var(--blue);color:var(--blue)}

/* Ligger varukorgsknappen i en stapel tillsammans med den flytande
   betalningsknappen sköter stapeln placeringen, inte knappen själv */
/* relative, inte static – annars hänger antalsbrickan på stapeln i stället för knappen */
.csd-fabstack > .csd-fab{position:relative;right:auto;bottom:auto;justify-self:end}
.csd-fab__count{
  position:absolute;top:-5px;right:-5px;display:grid;min-width:22px;height:22px;
  place-items:center;padding:0 6px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-size:11px;font-weight:800;
}
/* ---------- Flytande betalningsknapp ----------
   Centralens render_floating_payment_button(): visas i sidfoten på alla sidor
   utom betalsidan när kunden har en påbörjad betalning, max två åt gången.
   Slås av och på med "Flytande betalningsknapp" i BetalGateway.

   Stapeln nedan är svaret på att tre fasta lager annars krockar i samma hörn:
   notisraden längst ner, betalningsknappen ovanpå den och varukorgsknappen
   överst. Allt ligger i ett rutnät som växer uppåt, så inga fasta pixelavstånd
   behöver räknas om när ett kort tillkommer. --high när notisraden är två rader. */
.csd-fabstack{
  position:fixed;right:18px;bottom:58px;z-index:42;
  display:grid;gap:10px;justify-items:end;width:min(300px,calc(100vw - 36px));
}
.csd-fabstack--high{bottom:100px}
.csd-payfab{display:grid;gap:8px;width:100%}
.csd-payfab__card{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;
  padding:11px 13px;border:1px solid var(--warn-line);border-radius:14px;
  background:var(--warn-soft);box-shadow:var(--shadow-lift);
  color:inherit;text-decoration:none;
}
.csd-payfab__card:hover{border-color:var(--warn)}
.csd-payfab__mark{
  display:grid;width:34px;height:34px;place-items:center;border-radius:10px;
  background:#fff;font-size:16px;
}
.csd-payfab__text{min-width:0}
.csd-payfab__text b{
  display:block;color:#6b4200;font-size:13px;font-weight:800;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.csd-payfab__text small{display:block;margin-top:1px;color:var(--warn);font-size:11.5px;font-weight:700}
.csd-payfab__timer{
  color:var(--warn);font-family:var(--mono);font-size:13px;font-weight:800;white-space:nowrap;
}
/* Snart utgången betalning: samma kort men i rött */
.csd-payfab__card--bad{border-color:var(--bad-line);background:var(--bad-soft)}
.csd-payfab__card--bad:hover{border-color:var(--bad)}
.csd-payfab__card--bad .csd-payfab__text b{color:#7d0e2e}
.csd-payfab__card--bad .csd-payfab__text small,
.csd-payfab__card--bad .csd-payfab__timer{color:var(--bad)}

/* ---------- Snabbvy av varukorgen (slår upp vid tillagd vara) ---------- */
.csd-quick{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:18px;
  background:rgba(0,0,0,.42);
  background:color-mix(in srgb,var(--navy) 52%,transparent);
}
.csd-quick__panel{
  width:min(400px,100%);max-height:calc(100vh - 36px);overflow:auto;
  padding:18px;border:1px solid var(--line);border-radius:var(--r-card);
  background:#fff;box-shadow:var(--shadow-lift);
}
.csd-quick__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:13px;border-bottom:1px solid var(--hair);
}
.csd-quick__panel .csd-item{padding-top:12px}

/* ---------- Påminnelse i mitten (fraktsedelspopupen) ----------
   Centralens render_popup() i fraktsedlar: en modal som påminner kunden om att
   ladda upp fraktsedeln. Slås på med "Fraktsedel-popup" och har egna fält för
   bakgrund, ram, rubrikfärg, textfärg, hjälptextfärg, stängknapp, overlayfärg
   och overlayns genomskinlighet – därför är alla åtta variabler här. */
.csd-modal{
  --modal-overlay:color-mix(in srgb,var(--navy) 52%,transparent);
  --modal-bg:var(--card-bg);
  --modal-line:var(--blue-line);
  --modal-title:var(--navy);
  --modal-text:var(--text);
  --modal-small:var(--muted);
  --modal-close:var(--muted);

  position:fixed;inset:0;z-index:52;
  display:grid;place-items:center;padding:18px;background:var(--modal-overlay);
}
.csd-modal__panel{
  position:relative;width:min(430px,100%);
  padding:26px 24px 24px;border:1px solid var(--modal-line);border-radius:var(--r-card);
  background:var(--modal-bg);box-shadow:var(--shadow-lift);text-align:center;
}
.csd-modal__mark{
  display:grid;width:52px;height:52px;place-items:center;margin:0 auto 14px;
  border-radius:50%;background:var(--blue-soft);color:var(--modal-title);
}
.csd-modal__panel h2{margin:0;color:var(--modal-title);font-size:19px;font-weight:800;line-height:1.25}
.csd-modal__panel p{margin:9px 0 0;color:var(--modal-text);font-size:14px;line-height:1.6}
.csd-modal__panel small{display:block;margin-top:11px;color:var(--modal-small);font-size:12.5px;line-height:1.5}
.csd-modal__actions{display:grid;gap:9px;margin-top:18px}
.csd-modal__close{
  position:absolute;top:11px;right:11px;width:32px;height:32px;
  border:0;border-radius:50%;background:transparent;color:var(--modal-close);
  font-size:19px;line-height:1;cursor:pointer;
}
.csd-modal__close:hover{background:var(--soft)}

/* ---------- Ordmärket ----------
   Sajtens logotyp är en rundad egenritad wordmark. Här återskapas den med
   text; i skarp kod byts den mot den riktiga SVG:n eller bildfilen. */
.csd-wordmark{
  font-family:"Baloo 2","Nunito",var(--font);
  font-size:31px;font-weight:800;letter-spacing:-.005em;line-height:1;
  text-decoration:none;white-space:nowrap;
}
.csd-wordmark--light{color:#fff}
.csd-wordmark--dark{color:#111}

/* ---------- Sidhuvud (skarp sajt, inte mockup-navigeringen) ----------
   Huvudet och hjälten delar bakgrund så de smälter ihop utan skarv. */
.csd-topbar{background:var(--brand);color:#fff}
.csd-topbar__inner{
  display:flex;align-items:center;gap:18px;
  width:min(var(--sida),100%);margin:0 auto;padding:14px var(--kant);
}
.csd-topbar__logo{margin-right:auto}
.csd-topbar nav{display:flex;flex-wrap:wrap;gap:4px}
.csd-topbar nav a{
  padding:8px 13px;border-radius:var(--r-pill);color:#fff;
  font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap;
}
.csd-topbar nav a:hover{background:rgba(255,255,255,.14)}
.csd-topbar nav a.is-here{background:#fff;color:var(--brand);font-weight:750}
.csd-burger{
  display:none;width:42px;height:42px;border:0;border-radius:11px;
  background:transparent;color:#fff;font-size:23px;line-height:1;cursor:pointer;
}

/* ---------- Startsidans hjälte ----------
   Centrerad text med ordmärket som konturvattenstämpel bakom.
   Bilden är den vita outline-loggan (samma som gamla #hero:before),
   lätt lutad och nedtonad så rubrik och CTAs ligger läsbart ovanpå. */
.csd-sitehero{
  position:relative;overflow:hidden;
  /* Bandet är kant i kant, sidopaddingen bor i __inner så hjältens innehåll
     står på samma kant som sidhuvudet och korten i stället för på bandets. */
  padding:22px 0 74px;background:var(--brand);color:#fff;text-align:center;
}
.csd-sitehero__mark{
  position:absolute;top:50%;left:50%;z-index:0;
  display:block;width:min(920px,92%);height:auto;max-width:none;
  transform:translate(-50%,-48%) rotate(-18deg);
  opacity:.2;
  pointer-events:none;user-select:none;
}
.csd-sitehero__inner{
  position:relative;z-index:1;
  width:min(var(--sida),100%);margin:0 auto;padding:0 var(--kant);
}
.csd-sitehero h1{
  margin:0 auto;max-width:24ch;
  font-size:clamp(30px,5.4vw,46px);font-weight:800;line-height:1.08;
}
.csd-sitehero__tag{margin:9px 0 0;font-size:clamp(15px,2vw,20px);font-weight:750}

/* Hjälten utan överlappande kort: startsidan bär innehållet i rutnätets kort. */
.csd-sitehero--plain{padding-bottom:30px}
.csd-sitehero__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.csd-sitehero__stats .csd-pill{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.14);color:#fff}

/* De två ingångarna. Kort i stället för knappar eftersom de ska förklara
   skillnaden mellan leveranssätten, inte bara länka. Den svarta ringen
   behåller kopplingen "svart = välj leveranssätt". */
.csd-entries{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  width:min(880px,100%);margin:22px auto 0;text-align:left;
}
.csd-entry{
  display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:14px;
  padding:15px 17px;border:1px solid rgba(255,255,255,.26);border-radius:var(--r-card);
  background:rgba(255,255,255,.11);color:#fff;text-decoration:none;
}
.csd-entry:hover{border-color:#fff;background:rgba(255,255,255,.18)}
.csd-entry__mark{
  display:grid;width:56px;height:56px;place-items:center;
  border-radius:50%;background:#111;color:#fff;
}
.csd-entry b{display:block;font-size:15.5px;font-weight:800}
.csd-entry small{display:block;margin-top:3px;color:#e2dbff;font-size:12.5px;line-height:1.45}

/* ---------- Centrerad meddelanderuta ----------
   Används av betalsidans lägen och inloggningen: en enda ruta mitt på en
   annars tom sida, utan sidhuvud och sidfot. */
.csd-card--mid{padding:32px 28px 28px}
.csd-mid{text-align:center}
.csd-mid__icon{
  display:grid;width:60px;height:60px;margin:0 auto 16px;place-items:center;
  border:1px solid var(--blue-line);border-radius:50%;
  background:var(--blue-soft);font-size:26px;line-height:1;
}
.csd-mid__icon--warn{border-color:var(--warn-line);background:var(--warn-soft)}
.csd-mid__icon--bad{border-color:var(--bad-line);background:var(--bad-soft)}
.csd-mid__icon--ok{border-color:var(--ok-line);background:var(--ok-soft)}
.csd-mid__title{margin:0;color:var(--navy);font-size:clamp(21px,3.6vw,26px);font-weight:800;line-height:1.2}
.csd-mid__lead{margin:11px 0 0;color:var(--muted);font-size:14px;line-height:1.65}
.csd-mid__lead b{color:var(--navy);font-weight:800}
.csd-mid .csd-panel,.csd-mid .csd-note{margin-top:18px;text-align:left}
.csd-mid .csd-panel{text-align:center}
.csd-mid__actions{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.csd-mid__foot{margin:16px 0 0;color:var(--muted);font-size:12px}

/* ---------- Reabanner med nedräkning ---------- */
/* [reklam_banner]. Bannern är inte fri design – den styrs av "Reklam banner
   design" i Centralens admin. Varje inställning läses som en CSS-variabel på
   själva banner-elementet, så skarp kod skriver bara in adminvärdena i ett
   style-attribut i stället för att bygga en egen stilsträng:
     --deal-bg      Bakgrundsfärg
     --deal-line    Border-färg (används även av border-designerna längre ner)
     --deal-line-w  Border-tjocklek i pixlar
     --deal-text    Text-färg (banner-texten)
     --deal-pct     Procent-färg (bakgrunden i procentpillret)
     --deal-timer   Timer-färg (nedräkningen)
   Värdena nedan är bara reservvärden när admin inte satt något.
   Formen är en låg rad där procenttalet bär bannern: en mättad procentklump
   kant i kant i vänsterkanten, texten i mitten och nedräkningen till höger.
   Den ersätter både det gamla höga kortet med nedräkningsrutor och den alltför
   diskreta tunna raden – tydligheten kommer från storleksskillnaden mellan
   procenttalet och resten, inte från höjd. */
.csd-deal{
  --deal-bg:#fff;
  --deal-line:var(--pink);
  --deal-line-w:2px;
  --deal-text:var(--pink);
  --deal-pct:var(--pink);
  --deal-timer:var(--navy);
  --deal-sub:var(--muted);

  position:relative;overflow:hidden;
  /* Grid och inte flex: procentklumpen ska bära bannerns hela höjd, och med
     flex hoppade den upp på en egen rad så fort texten inte fick plats.
     Kolumnerna låser samtidigt ordningen procent → text → nedräkning, oavsett
     i vilken ordning delarna står i markupen. */
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  margin-bottom:16px;padding:0;
  border:var(--deal-line-w) solid var(--deal-line);
  border-radius:var(--r-card);background:var(--deal-bg);box-shadow:var(--shadow);
}
/* Blickfånget: ett mättat block i admins procentfärg, kant i kant i vänsterkanten */
.csd-deal__pct{
  grid-column:1;grid-row:1;align-self:stretch;
  position:relative;z-index:1;
  display:grid;min-width:106px;padding:14px 16px;place-items:center;
  background:var(--deal-pct);color:#fff;
  font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
/* b är admins banner-text. small är en frivillig förtydligande underrad – töms
   fältet i admin ritas den inte alls. Underraden har en egen färg i admin,
   --deal-sub; utan val står den kvar i designens dova grå. */
.csd-deal__text{
  grid-column:2;position:relative;z-index:1;min-width:0;padding:11px 0 11px 17px;
  color:var(--deal-text);font-size:17px;font-weight:800;letter-spacing:.02em;line-height:1.3;
}
.csd-deal__text small{
  display:block;margin-top:2px;
  color:var(--deal-sub);font-size:12.5px;font-weight:600;letter-spacing:0;
}

/* Nedräkningen: kompakt "01d 14h 32m" i timer-färgen, aldrig sekunder – skarpa
   koden räknar bara dagar/timmar/minuter. Reklambanner-demon på
   admininstallningar.html använder fortfarande .csd-count-markupen, så den får
   samma kompakta rad här i stället för de gamla rutorna. */
.csd-deal__timer,
.csd-deal .csd-count{
  grid-column:3;position:relative;z-index:1;
  display:flex;align-items:baseline;gap:9px;padding:0 20px 0 14px;
  white-space:nowrap;color:var(--deal-timer);
}
/* Varje tal får en svag platta i timer-färgen, så klockan hänger ihop som en
   enhet i stället för att flyta ut som lös text. */
.csd-deal__timer > span,
.csd-deal .csd-count > div{
  display:inline-flex;align-items:baseline;gap:1px;
  padding:5px 10px;border:0;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--deal-timer) 11%,transparent);
  text-align:left;
}
/* De längre etiketterna i .csd-count-markupen behöver mer luft än "d/h/m" */
.csd-deal .csd-count > div{gap:4px}
.csd-deal__timer b,
.csd-deal .csd-count b{
  display:inline;color:var(--deal-timer);font-family:var(--mono);
  font-size:17px;font-weight:800;line-height:1;
}
.csd-deal__timer i,
.csd-deal .csd-count span{
  display:inline;margin:0;color:var(--deal-timer);font-family:var(--mono);
  font-size:12px;font-style:normal;font-weight:750;letter-spacing:.02em;opacity:.72;
}

/* Border-design. De tio valen i admin finns kvar, men implementerade så att de
   inte äter upp bakgrundsfärgen eller tonar ner texten: rörelsen ligger på
   ramen och på ett eget överlägg, aldrig på hela banderollens opacity. */
.csd-deal--pulsating{animation:csd-deal-pulse 2s ease-in-out infinite}
@keyframes csd-deal-pulse{0%,100%{border-color:var(--deal-line)}50%{border-color:color-mix(in srgb,var(--deal-line) 35%,transparent)}}

.csd-deal--subtle{animation:csd-deal-subtle 3s ease-in-out infinite}
@keyframes csd-deal-subtle{0%,100%{border-color:var(--deal-line)}50%{border-color:color-mix(in srgb,var(--deal-line) 75%,transparent)}}

.csd-deal--dashed{border-style:dashed;animation:csd-deal-dash 2s linear infinite}
@keyframes csd-deal-dash{0%,100%{border-color:var(--deal-line)}50%{border-color:transparent}}

.csd-deal--glow{animation:csd-deal-glow 2s ease-in-out infinite alternate}
@keyframes csd-deal-glow{
  0%{box-shadow:0 0 10px color-mix(in srgb,var(--deal-line) 60%,transparent)}
  100%{box-shadow:0 0 26px color-mix(in srgb,var(--deal-line) 85%,transparent)}
}
.csd-deal--neon{animation:csd-deal-neon 1.5s ease-in-out infinite alternate}
@keyframes csd-deal-neon{
  0%{box-shadow:0 0 6px var(--deal-line),0 0 16px color-mix(in srgb,var(--deal-line) 55%,transparent),inset 0 0 10px color-mix(in srgb,var(--deal-line) 25%,transparent)}
  100%{box-shadow:0 0 12px var(--deal-line),0 0 34px color-mix(in srgb,var(--deal-line) 75%,transparent),inset 0 0 20px color-mix(in srgb,var(--deal-line) 40%,transparent)}
}
.csd-deal--electric{animation:csd-deal-electric .5s linear infinite}
@keyframes csd-deal-electric{
  0%,50%,100%{box-shadow:0 0 6px color-mix(in srgb,var(--deal-line) 70%,transparent)}
  25%{box-shadow:0 0 14px var(--deal-line)}
  75%{box-shadow:0 0 22px var(--deal-line)}
}

/* Rullande, gradient och glans låg tidigare på background och slog ut
   bakgrundsfärgen. Nu ligger de i ett överlägg ovanpå bakgrunden i stället. */
.csd-deal--rolling::before,
.csd-deal--gradient::before,
.csd-deal--shimmer::before,
.csd-deal--scanning::before{content:"";position:absolute;inset:0;pointer-events:none}
.csd-deal--rolling::before{
  background:linear-gradient(90deg,color-mix(in srgb,var(--deal-line) 30%,transparent) 0%,transparent 50%,color-mix(in srgb,var(--deal-line) 30%,transparent) 100%);
  background-size:200% 100%;animation:csd-deal-roll 3s linear infinite;
}
@keyframes csd-deal-roll{0%{background-position:0 0}100%{background-position:200% 0}}
/* Gradient-animation är den border-design sajten kör i dag: en ram som vandrar.
   ::before är gradienten och ::after lägger tillbaka admins bakgrundsfärg
   innanför ramtjockleken, så bara kanten blir gradient. */
.csd-deal--gradient::before{
  background:linear-gradient(90deg,var(--deal-line),color-mix(in srgb,var(--deal-line) 12%,var(--deal-bg)),var(--deal-line),color-mix(in srgb,var(--deal-line) 12%,var(--deal-bg)),var(--deal-line));
  background-size:200% 100%;animation:csd-deal-gradient 4s linear infinite;
}
.csd-deal--gradient::after{
  content:"";position:absolute;inset:var(--deal-line-w);pointer-events:none;
  border-radius:inherit;background:var(--deal-bg);
}
@keyframes csd-deal-gradient{0%{background-position:0 0}100%{background-position:200% 0}}
.csd-deal--shimmer::before{
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:220% 100%;animation:csd-deal-shimmer 3s ease-in-out infinite;
}
@keyframes csd-deal-shimmer{0%{background-position:-120% 0}100%{background-position:220% 0}}
/* Svepande linje: den gamla varianten använde procent i box-shadow, vilket är
   ogiltigt och gjorde att ingenting hände. Här är det en riktig linje. */
.csd-deal--scanning::before{
  background:linear-gradient(90deg,transparent,var(--deal-line),transparent);
  width:38%;inset:0 auto 0 0;opacity:.35;animation:csd-deal-scan 2s linear infinite;
}
@keyframes csd-deal-scan{0%{transform:translateX(-100%)}100%{transform:translateX(365%)}}

@media (prefers-reduced-motion:reduce){
  .csd-deal,.csd-deal::before{animation:none}
}

/* ---------- Sektionsrubrik på startsidan ---------- */
.csd-seclead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
.csd-seclead h2{margin:0;color:var(--navy);font-size:20px;font-weight:800}
.csd-seclead p{margin:3px 0 0;color:var(--muted);font-size:13px}

/* ---------- Rabattsteg ---------- */
/* [rabattsteg]. Introtexten är admins fält "Text ovanför rabattsteg" och står
   direkt under rubriken. Lämnar admin fältet tomt hoppas raden över helt. */
.csd-tiers__intro{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.csd-tiers{margin:13px 0 0;padding:0;list-style:none}
.csd-tier{color:#3c3a58;font-size:14.5px;line-height:1.75}
/* Hela beloppet inklusive "kr" och hela procenten inklusive "%" är fetstilade,
   och nowrap håller ihop tal och enhet: "2 500 kr – 3 % rabatt". Decimaler
   skrivs med komma, admin tillåter steg om 0,1. */
.csd-tier b{color:#111;font-weight:800;white-space:nowrap}
/* Nått steg markeras, resten står kvar som vanlig text precis som på sajten */
.csd-tier.is-reached{color:var(--ok)}
.csd-tier.is-reached b{color:var(--ok)}

/* Pausat läge under rea. Shortcoden returnerar då inte stegen alls, utan admins
   "Text när rea är aktiv" med % utbytt mot reans procentsats – rea-banner och
   aktiv rabattstege kan aldrig visas samtidigt. Rutan har sex egna adminfält,
   och precis som reabannern läses de som CSS-variabler på elementet i stället
   för en egen stilsträng i PHP:
     --paused-bg      Bakgrundsfärg
     --paused-line    Border-färg
     --paused-line-w  Border-storlek i pixlar
     --paused-text    Textfärg
     --paused-pad     Padding
     --paused-radius  Rundade kanter
   Värdena nedan är reservvärden när admin lämnat fälten tomma. Formen är
   notis-komponenten ovan, så ett tomt admin-fält ger temats varningsnotis. */
.csd-note--paused{
  --paused-bg:var(--warn-soft);
  --paused-line:var(--warn-line);
  --paused-line-w:1px;
  --paused-text:var(--warn);
  --paused-pad:13px 15px;
  --paused-radius:var(--r-box);

  padding:var(--paused-pad);
  border:var(--paused-line-w) solid var(--paused-line);
  border-radius:var(--paused-radius);
  background:var(--paused-bg);color:var(--paused-text);
}
.csd-note--paused .csd-note__icon{color:var(--paused-line)}

/* ---------- Innehållsförteckning (långa textsidor) ---------- */
.csd-toc{padding:15px 17px;border:1px solid var(--blue-line);border-radius:var(--r-box);background:var(--blue-soft)}
.csd-toc b{display:block;margin-bottom:9px;color:var(--navy);font-size:13px;font-weight:800}
.csd-toc ol{margin:0;padding-left:19px;color:var(--muted);font-size:13px}
.csd-toc li + li{margin-top:5px}
.csd-toc a{color:var(--blue);text-decoration:none}
.csd-toc a:hover{text-decoration:underline}

/* ---------- Tomt läge (404, inga sökträffar) ---------- */
.csd-empty{padding:40px 24px;text-align:center}
.csd-empty__mark{
  display:grid;width:78px;height:78px;place-items:center;margin:0 auto 16px;
  border-radius:50%;background:var(--blue-soft);color:var(--blue);
  font-size:26px;font-weight:800;
}
.csd-empty h1{margin:0;color:var(--navy);font-size:25px;font-weight:800}
.csd-empty p{margin:9px auto 0;max-width:440px;color:var(--muted);font-size:13.5px;line-height:1.6}
.csd-empty__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:20px}

/* ---------- Sidfot ----------
   Ljus, tre kolumner, står på sidbakgrunden utanför det vita kortet.
   Sidfoten är inte ett kort, men dess text ska ändå börja och sluta där kortens
   text gör: ytterkanterna låg redan i linje, och då är det texterna som syns
   ligga fel. Indraget är därför --text-kant, som räknas ur kortens egen ram och
   vadd, i stället för sidans --kant. Hela sidfoten följer samma mått – spalter,
   hårlinje och nedersta raden – så den läses som en enda satsbredd. */
.csd-footer{margin-top:30px}
.csd-footer__inner{
  /* Tre spalter: de två texterna är bredast, länklistan smalast. Spalten
     "Handla" fanns aldrig på sajten och är borttagen. */
  display:grid;grid-template-columns:1.3fr 1.2fr 1fr;gap:30px;
  width:min(var(--sida),100%);margin:0 auto;padding:26px var(--text-kant) 34px;
}
.csd-footer h2{margin:0 0 14px;color:#111;font-size:15px;font-weight:800}
.csd-footer h3{margin:18px 0 4px;color:#111;font-size:14.5px;font-weight:800}
.csd-footer p{margin:0 0 14px;color:#3c3a58;font-size:14px;line-height:1.6}
.csd-footer p:last-child{margin-bottom:0}
/* Länklistorna sätter sin egen storlek: utan den läste de 15 px från body
   medan löptexten intill står i 14 px, och spalterna hamnade i olika skala. */
.csd-footer ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.6}
.csd-footer li + li{margin-top:12px}
/* Länkarna hade bara färg och ärvde webbläsarens understrykning, vilket blev
   råa standardlänkar mitt i ett tema där länkar är ostrukna i vila och stryks
   under på hover (.csd-link, .csd-crumbs a, .csd-topbar nav a). */
.csd-footer a{color:var(--blue);text-decoration:none}
/* Länklistorna står i brödtextfärg, inte blått: sex blå rader under varandra
   blir en färgvägg i en sidfot, så färgen sparas till den man siktar på.
   Vikten stannar under rubrikernas 800 – med samma vikt konkurrerade listan
   med spaltrubriken i stället för att hänga under den. inline-block så att
   understrykningen på hover följer texten och inte hela spaltbredden. */
.csd-footer li a{display:inline-block;color:#3c3a58;font-weight:650}
.csd-footer li a:hover{color:var(--blue);text-decoration:underline}
/* En länk mitt i löptext måste synas utan att man pekar på den, och står därför
   blå och understruken redan i vila. */
.csd-footer p a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.csd-footer p a:hover{color:var(--navy)}
.csd-footer .csd-wordmark{display:inline-block;margin-top:6px;font-size:34px}

/* Nedersta raden: årtal och de policylänkar som har en sida. Länken till Villkor
   låg i den borttagna Handla-spalten och bor här nu. Raden ska läsas som en
   fotnot under spalterna, inte som en fjärde spalt, och håller sig därför till
   en hårlinje och en grad mindre text i stället för egen bakgrund eller rubrik. */
.csd-footer__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:7px 20px;
  /* Hårlinjen ska börja och sluta vid samma kant som spalterna ovanför, och
     den ritas på rutans kant. Raden bär därför indraget i sin bredd i stället
     för som sidopadding, annars hade linjen stuckit ut förbi texten. */
  width:min(calc(var(--sida) - var(--text-kant) * 2),calc(100% - var(--text-kant) * 2));
  margin:0 auto;padding:15px 0 30px;
  border-top:1px solid var(--line);
}
/* Går under spaltreglerna ovan: 12,5 px och dämpad färg. Stycket bär ingen
   bottenmarginal, eftersom länklistan står vid sidan av det och inte under. */
.csd-footer__bar p{margin:0;color:var(--muted);font-size:12.5px}
.csd-footer__legal{display:flex;flex-wrap:wrap;gap:5px 18px;font-size:12.5px}
/* Länkarna står på rad, så spalternas radavstånd mellan poster gäller inte här. */
.csd-footer__legal li + li{margin-top:0}
/* Dämpade som spaltlänkarna, men ett snäpp lättare: den här raden ska hittas
   när man letar efter den, inte konkurrera med spalterna ovanför. */
.csd-footer__legal li a{color:var(--muted);font-weight:600}
.csd-footer__legal li a:hover{color:var(--blue);text-decoration:underline}

/* ---------- Fasta rader i nederkanten ----------
   Alla bottenrader ligger i samma staplade behållare, så en notis och en
   tröskelrad aldrig kan hamna ovanpå varandra. */
.csd-bottom{position:fixed;left:0;right:0;bottom:0;z-index:99990}
body.csd-ny-design .csd-bottom .csd-noticebar{
  width:100%;box-shadow:0 -2px 8px rgba(15,23,42,.08);
}

/* Notisraden är Centralens shipping_notice_footer_bar(). När nya designen är
   på ritar den .csd-noticebar (ton/form via klasser). Adminfärgerna används
   bara i gamla designen. Formvarianterna nedan motsvarar bar_shape i admin. */
.csd-noticebar{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-top:3px solid var(--line);background:var(--soft);
}
.csd-noticebar__text{
  flex:1 1 auto;color:var(--text);font-size:13px;font-weight:650;
  line-height:1.4;text-align:center;
}
.csd-noticebar__text b{font-weight:800}
.csd-noticebar__close{
  flex:0 0 auto;width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:inherit;font-size:17px;line-height:1;cursor:pointer;opacity:.7;
}
.csd-noticebar__close:hover{opacity:1;background:rgba(0,0,0,.06)}
.csd-noticebar.is-closed{display:none}

/* all_available: alla leveranssätt är upplåsta */
.csd-noticebar--ok{border-top-color:var(--ok-line);background:var(--ok-soft)}
.csd-noticebar--ok .csd-noticebar__text,.csd-noticebar--ok .csd-noticebar__close{color:var(--ok)}
/* partial_available och minimum_met_others_not: en tröskel kvar */
.csd-noticebar--warn{border-top-color:var(--warn-line);background:var(--warn-soft)}
.csd-noticebar--warn .csd-noticebar__text,.csd-noticebar--warn .csd-noticebar__close{color:var(--warn)}
/* none_available: inget är upplåst än */
.csd-noticebar--bad{border-top-color:var(--bad-line);background:var(--bad-soft)}
.csd-noticebar--bad .csd-noticebar__text,.csd-noticebar--bad .csd-noticebar__close{color:var(--bad)}

/* Admin väljer överkantens form under Fraktmeddelanden. Alla fem lägen i koden
   finns med här: rak, rundad, våg, zigzag och diagonal. Formerna är samma
   clip-path som den skarpa koden använder, så valet fungerar likadant.
   Med clip-path kapas ramen i överkanten, därför flyttas den in som en
   inre kant i stället för border-top. */
.csd-noticebar--rounded{border-top-left-radius:12px;border-top-right-radius:12px}
.csd-noticebar--wave,
.csd-noticebar--zigzag,
.csd-noticebar--diagonal{border-top:0;padding-top:16px}
.csd-noticebar--wave{
  clip-path:polygon(0 10px,0 100%,100% 100%,100% 10px,98% 0,95% 5px,92% 0,89% 5px,86% 0,83% 5px,80% 0,77% 5px,74% 0,71% 5px,68% 0,65% 5px,62% 0,59% 5px,56% 0,53% 5px,50% 0,47% 5px,44% 0,41% 5px,38% 0,35% 5px,32% 0,29% 5px,26% 0,23% 5px,20% 0,17% 5px,14% 0,11% 5px,8% 0,5% 5px,2% 0);
}
.csd-noticebar--zigzag{
  clip-path:polygon(0 8px,2% 0,4% 8px,6% 0,8% 8px,10% 0,12% 8px,14% 0,16% 8px,18% 0,20% 8px,22% 0,24% 8px,26% 0,28% 8px,30% 0,32% 8px,34% 0,36% 8px,38% 0,40% 8px,42% 0,44% 8px,46% 0,48% 8px,50% 0,52% 8px,54% 0,56% 8px,58% 0,60% 8px,62% 0,64% 8px,66% 0,68% 8px,70% 0,72% 8px,74% 0,76% 8px,78% 0,80% 8px,82% 0,84% 8px,86% 0,88% 8px,90% 0,92% 8px,94% 0,96% 8px,98% 0,100% 8px,100% 100%,0 100%);
}
.csd-noticebar--diagonal{clip-path:polygon(0 12px,100% 0,100% 100%,0 100%)}

/* ---------- Väg tillbaka upp i sidan ----------
   En länk upp till ett avsnitt högre upp på sidan är meningslös så länge
   tvåspalten står kvar: då syns avsnittet redan intill sidospalten. Först när
   spalterna staplas hamnar sidospalten under huvudinnehållet, och då är vägen
   tillbaka upp värd en egen knapp. Ligger efter .csd-btn i filen med samma
   specificitet, så display:none vinner på ordningen. */
.csd-backtop{display:none}

/* ---------- Responsivt ---------- */
@media (max-width:900px){
  .csd-grid{grid-template-columns:1fr}
  .csd-backtop{display:inline-flex}
  /* Startsidans mobilordning. I en spalt hamnar annars hela sidospalten sist,
     och forumkortet – det enda innehållet som ändras dagligen – landar långt
     ner. Spalterna blir därför display:contents så att korten blir egna celler
     i rutnätet och kan ordnas fritt. Det är också vad som gör ordningen möjlig
     över spaltgränsen: rabattstegen bor i sidospalten men ska stå mitt i
     huvudspaltens följd här, och utan att spalterna löses upp finns ingen
     gemensam förälder att ordna dem i.
     De fem första platserna är namngivna, resten faller på 6 och behåller
     markupens ordning – nya kort hamnar därmed sist utan att listan behöver
     uppdateras. Radavståndet kommer från rutnätets gap i stället för
     .csd-stack-marginalen. */
  .csd-grid--start > .csd-stack{display:contents}
  .csd-grid--start > .csd-stack > *{order:6;margin-top:0}
  .csd-grid--start > .csd-grid__full{grid-column:auto;grid-row:auto;order:6}
  .csd-grid--start .csd-m-intro{order:1}
  .csd-grid--start .csd-m-forum{order:2}
  .csd-grid--start .csd-m-senaste{order:3}
  /* Rabattstegen kilas in mellan produktkorten och Hämta direkt. I rea-läge
     returnerar shortcoden den pausade rutan i stället för kortet, och den bär
     samma klass så att platsen gäller båda. */
  .csd-grid--start .csd-m-rabatt{order:4}
  .csd-grid--start .csd-m-hamta{order:5}
  /* Fyra steg i bredd ryms inte när tvåspalten faller ihop: stegen går tillbaka
     till den staplade .csd-step-layouten med numret till vänster. */
  .csd-flow{grid-template-columns:minmax(0,1fr)}
  .csd-flow .csd-step{--step-pad:13px;display:flow-root;padding:var(--step-pad) 0}
  .csd-flow .csd-step__num{position:absolute;top:var(--step-pad);left:0}
  .csd-flow .csd-step + .csd-step{border-top:1px solid var(--hair);border-left:0}
  .csd-flow .csd-step h3{margin:2px 0 7px;min-height:0;padding-left:var(--step-ind)}
  .csd-tiles,.csd-tiles--3{grid-template-columns:1fr}
  .csd-prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Menyn ryms inte i en rad: den fälls in bakom hamburgaren */
  .csd-topbar nav{display:none}
  .csd-burger{display:grid;place-items:center}
  /* Tre spalter i två kolumner skulle lämna en tom ruta nere till höger, så
     kategorilistan tar hela raden och flödar i tre textspalter i stället. */
  .csd-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csd-footer__kat{grid-column:1/-1}
  .csd-footer__kat ul{columns:3;column-gap:24px}
  /* Metaremsan i en spalt: den får inte hamna mellan bilden och köprutan och
     trycka ner köpknappen. Både remsan och sidospalten släpper sin
     radplacering och faller i markupens ordning – bild, köpkolumn, remsa. */
  .csd-grid--prod{grid-template-rows:none}
  .csd-grid--prod > aside{grid-row:auto}
  .csd-prodmeta{grid-column:auto;grid-row:auto;margin-top:0}
}
@media (max-width:620px){
  /* En smalare kant och en tätare kortvadd för hela sidan: sidhuvud, hjälte,
     innehåll och sidfot följer med automatiskt eftersom de alla läser --kant,
     och sidfotens indrag räknas om med --kort-pad via --text-kant. */
  :root{--kant:14px;--kort-pad:16px}
  .csd-shell{padding-top:16px}
  /* Hjälten behåller sina två kolumner: pillret står kvar i övre högra hörnet
     på överradens rad även här, i stället för att lägga sig som en egen rad
     under brödtexten. Bara luften mellan kolumnerna krymper – sidovadden följer
     med ner av sig själv eftersom den läser --kort-pad. */
  .csd-hero{gap:0 12px}
  .csd-hero h1{font-size:23px}
  /* Trådraden behöver ingen egen mobillayout längre: utan avatarkolumnen ryms
     rubriken och svarsräknaren på samma rad även på 390 px, så räknaren slipper
     brytas ner till en andra rad under rubriken. */
  .csd-card__head{flex-wrap:wrap}
  .csd-title{font-size:21px}
  .csd-steps{gap:7px}
  .csd-steps li{gap:6px;font-size:11.5px}
  .csd-search .csd-btn--cta{flex:1 1 100%}
  /* Rutnät i stället för flex: annars sätter textfältet ett för brett golv */
  .csd-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .csd-toolbar > .csd-btn{width:100%}
  .csd-coupon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  /* Samma vadd på alla kort här, och den kommer ur --kort-pad så att sidfotens
     indrag följer med ner i mobilbredd. */
  .csd-card,.csd-card--side{padding:var(--kort-pad)}
  .csd-item{grid-template-columns:52px minmax(0,1fr);row-gap:10px}
  .csd-item__thumb{width:52px;height:52px}
  .csd-item__end{grid-column:1/-1;justify-content:space-between}
  /* Varukorgens täta rad viker inte ner något på mobil – den är redan tvåradig
     och kolumnerna räcker: 40 px bild, 40 px kryss och ett namn som krymper.
     Raden måste stå här och inte bara ovan: basradens mobilregel har samma
     specificitet och står senare i filen, så utan den här hade rutnätet fallit
     ihop till två kolumner och områdena slagits sönder. */
  .csd-item--tight{grid-template-columns:40px minmax(0,1fr) auto 40px;row-gap:1px}
  /* En grad mindre metarad, så mängd, styckpris och ort ryms på en rad ända ner
     till 390 px. Annars blir raden tre våningar igen, fast tätare. */
  .csd-item--tight .csd-item__meta{font-size:11.5px}
  /* Små rader i sammanfattningen får plats som de är */
  .csd-item--sm{grid-template-columns:38px minmax(0,1fr) auto;row-gap:0}
  .csd-item--sm .csd-item__thumb{width:38px;height:38px}
  .csd-btn{white-space:nowrap}
  .csd-coupon .csd-input{width:100%;min-width:0}
  .csd-address{grid-template-columns:1fr}
  .csd-address__copy{min-height:44px;border-top:1px solid var(--line);border-left:0}
  .csd-steps i{flex:0 0 26px}
  .csd-file{grid-template-columns:36px minmax(0,1fr);row-gap:6px}
  .csd-file__ok{grid-column:2}
  .csd-drop--row{grid-template-columns:36px minmax(0,1fr);row-gap:10px}
  .csd-drop--row .csd-btn{grid-column:1/-1;justify-self:stretch;text-align:center}
  /* Produktrutnätet står kvar på två kolumner, men tätare */
  .csd-prodgrid{gap:11px}
  .csd-prod{padding:12px 12px 15px}
  .csd-prod__flag{top:10px;left:10px}
  .csd-prod__name{margin-top:11px;font-size:14px}
  .csd-prod__sub,.csd-prod__price{font-size:12px}
  .csd-price{font-size:20px}
  .csd-price--now{font-size:23px}
  .csd-locstock{padding:11px 12px}
  .csd-locstock__place{padding:4px 10px;font-size:12px}
  .csd-locstock__places{gap:6px}
  .csd-fab{right:14px;bottom:66px;width:52px;height:52px}
  /* Nederkantsstapeln får inte äta upp en tredjedel av mobilskärmen när kunden
     har två obetalda ordrar, så korten blir kompaktare här */
  .csd-fabstack{right:14px;bottom:66px;gap:8px;width:min(272px,calc(100vw - 28px))}
  .csd-payfab__card{padding:9px 11px;gap:9px;grid-template-columns:28px minmax(0,1fr) auto}
  .csd-payfab__mark{width:28px;height:28px;font-size:14px}
  .csd-payfab__text b{font-size:12.5px}
  .csd-payfab__text small{font-size:11px}
  /* Två kort i bredd på 390 px ger 151 px inuti kortet. "Köp Hämta direkt" och
     "Du har valt den" ryms på en rad där, men "Tillfälligt reserverad" är
     bredare än knappen och rann tidigare ut mot dess kanter: nowrap från skarp
     kod (.csd-hd-card__button) höll texten på en rad det inte fanns plats för,
     och 8 px sidopadding var allt som gick att pressa fram. Här får texten
     radbrytas i stället, med temats sidopadding kvar, och min-height håller de
     tre lägena lika höga vare sig texten tar en eller två rader. */
  .csd-prod--action .csd-btn--cta{min-height:44px;padding:6px 14px;font-size:12.5px;white-space:normal;line-height:1.3}
  .csd-quick{padding:12px}
  .csd-quick__panel{padding:15px}
  .csd-topbar__inner{gap:12px;padding:11px var(--kant)}
  .csd-wordmark{font-size:27px}
  .csd-sitehero{padding:16px 0 66px}
  /* Kortformen ovan nollställer --plain-modifieraren, så den måste sättas om
     här: de 66 px var plats för det överlappande kortet som inte finns kvar.
     24 px följer mobilens tätare rytm (--kort-pad 16, .csd-shell 16). */
  .csd-sitehero--plain{padding-bottom:24px}
  /* Samma grepp som gamla #hero:before { background-size:200% } – vattenstämpeln
     får ta mer av den smala ytan utan att täcka rubriken. */
  .csd-sitehero__mark{width:min(640px,140%);opacity:.18}
  .csd-sitehero h1{max-width:none}
  .csd-sitehero__stats{gap:6px;margin-top:14px}
  .csd-entries{grid-template-columns:1fr;gap:10px;margin-top:16px}
  .csd-entry{grid-template-columns:46px minmax(0,1fr);gap:12px;padding:13px 14px}
  .csd-entry__mark{width:46px;height:46px}
  /* Reabannern: texten och nedräkningen staplas till höger om procentklumpen,
     som fortsätter gå kant i kant och bära hela höjden. Nedräkningen står kvar
     som "01d 14h 32m" – inga sekunder här heller. */
  .csd-deal{grid-template-columns:auto minmax(0,1fr)}
  .csd-deal__pct{grid-row:1/3;min-width:76px;padding:12px 10px;font-size:25px}
  .csd-deal__text{grid-row:1;align-self:end;padding:10px 12px 0 13px;font-size:14px}
  .csd-deal__text small{font-size:11.5px}
  .csd-deal__timer,.csd-deal .csd-count{
    grid-column:2;grid-row:2;align-self:start;gap:7px;padding:4px 12px 10px 13px;
  }
  .csd-deal__timer > span,.csd-deal .csd-count > div{padding:4px 8px}
  .csd-deal__timer b,.csd-deal .csd-count b{font-size:14px}
  .csd-deal__timer i,.csd-deal .csd-count span{font-size:10.5px}
  .csd-seclead{flex-direction:column;align-items:flex-start;gap:7px}
  /* En spalt behöver ett eget radavstånd: gap:0 höll bara ihop för att
     löptexten har bottenmarginal, medan länklistorna och ordmärket saknar den
     och nästa rubrik därför låg kant i kant mot föregående spalt. */
  .csd-footer__inner{grid-template-columns:1fr;gap:24px;padding:22px var(--text-kant) 30px}
  /* En spalt: kategorilistan står staplad som förut */
  .csd-footer__kat ul{columns:1}
  .csd-footer .csd-wordmark{font-size:30px}
  /* Nedersta raden tätare. Årtalet och länkarna står kvar i var sin kant så
     länge de ryms på 390 px; blir länkarna fler bryter listan till egen rad. */
  .csd-footer__bar{gap:8px 16px;padding:13px 0 26px}
  .csd-empty{padding:30px 14px}
  .csd-noticebar{padding:9px 10px}
  .csd-noticebar__text{font-size:12px}
}
@media (max-width:430px){
  .csd-steps i{flex:0 0 14px}
  .csd-steps li{font-size:11px}
  /* 390 px ger 304 px inuti beloppsrutan. "Kopiera belopp" tar 121 px, så
     beloppet har 172 px kvar – där ryms fjorton monotecken i 20 px, alltså
     mer än både BTC:s åtta och USDT:s sex decimaler. Blir ett belopp ändå
     längre är det enhetsbeteckningen som lägger sig på egen rad; knappen
     står kvar intill beloppet. */
  .csd-amount{gap:11px;padding:14px 13px}
  .csd-amount__value{font-size:20px}
  .csd-amount__value span{margin-left:5px;font-size:14px}
  .csd-payref{padding:10px 12px}
  .csd-payref__num{font-size:20px}
}

/* ---------- Sidspecifika justeringar ----------
   Spåra order är temats texttätaste sida: den består nästan bara av småtext –
   statuspanelens detaljrad, tidslinjen, hjälptexterna i stegen, fältlistorna,
   notiserna och hela sammanfattningen till höger. Där blir temats minsta grader
   (11,5–13,5 px) för små att läsa i ett svep, medan samma grader fungerar på
   sidor där de bara är en etikett bredvid något stort.
   Höjningen är därför scopad till sidan och inte lagd på komponenterna: flera
   av dem har måtten satta efter en pixelbudget någon annanstans – varukorgens
   täta rad ska rymma mängd, styckpris och ort på en rad vid 390 px,
   produktkortens knapp ska rymma "Tillfälligt reserverad", reabannerns
   nedräkning ska stå på en rad – och en global höjning hade brutit de
   avvägningarna för att lösa ett problem på en sida.
   Ett steg upp på temats skala (11,5 → 12,5 → 13,5 → 14,5) och inget mer, så
   hierarkin står kvar: brödtexten är 15 px, stegrubrikerna 15 px, kortrubriken
   17 px och sidrubriken 24 px.
   Blocket ligger sist i filen och läser body-attributet på samma sätt som
   färgtemana ovan, så det vinner över både grundreglerna och de responsiva
   utan att kunna läcka till någon annan sida. */
/* Etiketter och brickor */
body[data-sida="spara-order"] .csd-kicker,
body[data-sida="spara-order"] .csd-pill,
body[data-sida="spara-order"] .csd-badge{font-size:13px}
body[data-sida="spara-order"] .csd-label{font-size:14px}

/* Hjälp- och metatexter */
body[data-sida="spara-order"] .csd-hint,
body[data-sida="spara-order"] .csd-sub,
body[data-sida="spara-order"] .csd-panel__sub,
body[data-sida="spara-order"] .csd-panel__detail,
body[data-sida="spara-order"] .csd-timeline small,
body[data-sida="spara-order"] .csd-amount__sek,
body[data-sida="spara-order"] .csd-amount__got{font-size:14px}
body[data-sida="spara-order"] .csd-timeline b{font-size:14.5px}

/* Notiser */
body[data-sida="spara-order"] .csd-note,
body[data-sida="spara-order"] .csd-note--slim,
body[data-sida="spara-order"] .csd-note--slim b{font-size:14px}
body[data-sida="spara-order"] .csd-note b{font-size:14.5px}

/* Finstilt i rutorna: adress, fältlista, uppladdning och kvitterad fil */
body[data-sida="spara-order"] .csd-address__value,
body[data-sida="spara-order"] .csd-address__copy,
body[data-sida="spara-order"] .csd-fields__row > span,
body[data-sida="spara-order"] .csd-fields__row > b,
body[data-sida="spara-order"] .csd-btn--copy{font-size:13.5px}
body[data-sida="spara-order"] .csd-drop--row b,
body[data-sida="spara-order"] .csd-file b{font-size:14.5px}
body[data-sida="spara-order"] .csd-drop small,
body[data-sida="spara-order"] .csd-file small,
body[data-sida="spara-order"] .csd-file__ok{font-size:14px}

/* Sammanfattningen i sidospalten */
body[data-sida="spara-order"] .csd-row{font-size:14.5px}
body[data-sida="spara-order"] .csd-row small{font-size:13.5px}
body[data-sida="spara-order"] .csd-item--sm .csd-item__name,
body[data-sida="spara-order"] .csd-item--sm .csd-item__sum{font-size:14px}
body[data-sida="spara-order"] .csd-item--sm .csd-item__meta{font-size:12.5px}

/* Stegrubrikerna tillbaka till grundstegets 15 px: med hjälptexten på 14 px var
   --sm-variantens 14,5 px inte längre en rubrik utan bara fetare brödtext. */
body[data-sida="spara-order"] .csd-step--sm h3,
body[data-sida="spara-order"] .csd-guide__head h3{font-size:15px}

/* =============================================================
   TILLÄGG FÖR SKARP KOD – finns inte i mockupen

   Allt ovanför är mockupens stilmall, rad för rad. Här nedanför ligger det
   som bara behövs när sidan ritas av WordPress och WooCommerce i stället för
   av en handskriven mockupsida.

   Samma princip som ovan gäller, och den är hela poängen med filen: en regel
   får aldrig kunna träffa en kund. Klasserna som börjar på csd- skrivs bara ut
   av mallar och moduler som i sin tur är villkorade på csd_ny_design_aktiv(),
   och namnrymden är därför skyddet – precis som för komponenterna ovan. De
   regler som pekar på WooCommerce egna klassnamn finns däremot på varje
   kundsida, och de ligger därför under body.csd-ny-design, som bara sätts på
   sidor den nya designen faktiskt har tagit över.

   Inga nya mått är påhittade. Varje storlek, marginal och färg nedan är hämtad
   ur en regel som redan står i filen; var och en pekas ut i kommentaren.
   ============================================================= */

/* ---------- Sidans yttersta behållare, #page ----------
   DET HÄR ÄR REGELN SOM GJORDE KORTEN SMALA, på Spåra order, i varukorgen och
   i kassan. Den ligger inte i temat och inte i pluginet, utan i butikens egen
   "Ytterligare CSS" under Utseende → Anpassa, som WordPress skriver ut sist av
   allt som <style id="wp-custom-css">:

     @media (min-width:768px){
       .grid-container{display:flex;flex-direction:column;align-items:center}
     }

   Raden är skriven för att centrera .hero-logo-container i sidhuvudet. Men
   .grid-container är GeneratePress egen klass och sitter också på #page, alltså
   på hela sidans yttersta behållare. align-items:center gör då #content till
   ett flexobjekt som krymper till sitt innehåll i stället för att fylla sidan.

   Mätt på den skarpa sajten i 1280 px, före den här raden:
     #page      1120 px  (temats max-width, stämmer)
     #content    704 px  på Spåra order
     #content    967 px  i varukorgen
   Två olika tal på två sidor, av en och samma regel - och det är just därför
   bredden "blir olika hela tiden". Måttet blir det som innehållet råkar bli.
   Byts en enda produkttext i varukorgen från "Spårbart paket, Stockholm,
   Göteborg, Malmö, Sundsvall, Ludvika" till "Spårbart paket, Stockholm" faller
   #content från 967 px till 833 px utan att en rad CSS ändrats.

   Under 768 px slår mediefrågan inte till. Då är #page ett vanligt block och
   allt är redan fullbrett - därför har felet bara synts på dator.

   Raden nedan ger tillbaka standardvärdet, så att #content åter fyller sidan
   och .csd-shell får äga bredden själv: min(var(--sida),100%) = 1080 px.
   Inget !important behövs; body.csd-ny-design #page väger tyngre än
   .grid-container. align-items betyder ingenting på ett block, så raden är
   verkningslös på mobil och kan inte ställa till något där.

   Samma rad i Ytterligare CSS klämmer ihop sidfotens widgetspalter på precis
   samma sätt (513 px i en 1120 px bred sidfot). Det ligger utanför den nya
   designen och rättas inte härifrån - det rättas genom att ta bort blocket i
   Ytterligare CSS, som ändå är skrivet för den gamla designen. */
body.csd-ny-design #page,
body.csd-ny-design .site.grid-container{align-items:stretch}

/* ---------- Temats sidram runt den nya designen ----------
   Mockupen är en tom sida: sidhuvudet, hjälten och korten står direkt på
   sidbakgrunden. På den skarpa sajten ritar temat en egen ram runt allt, och
   den lägger till tre saker som mockupen aldrig hade:

     1. sidans rubrik i .entry-header ovanför innehållet. Kortet under bär
        redan samma rubrik – "FAQ" står i .csd-hero h1 – så den skrivs ut två
        gånger. Sidan måste ändå ha en titel, det är den menyn visar, så det
        är utskriften på sidan som ska bort och inte titeln.
     2. en artikelruta, .inside-article, med egen bakgrund och vaddning.
     3. temats eget avstånd ovanför innehållsytan.

   Tillsammans blir det ett brett fält mellan sidhuvudet och första kortet.
   Sidorna som byter hela sidmallen slipper punkt 1 och 2 redan i dag – se
   templates/ny-design/sida-kop.php, som ritar sidhuvud, innehåll och sidfot
   och ingenting annat. De sidor som i stället bär designen genom en kortkod,
   som FAQ, ritas av temats page.php och får alla tre. Reglerna nedan tar bort
   det för den nya designen och för ingen annan: de står under
   body.csd-ny-design, som bara sätts på portade sidor.

   Inget !important behövs. Väljarna nedan väger tyngre än temats egna, och
   filen laddas dessutom efter temats stilmall eftersom Centralen_UI köar den
   med generate-style som beroende. */
/* Barntemats egen hjälte. Den är hårdkodad rå HTML mitt i header.php och
   skrivs därför ut på VARJE sida, inte bara startsidan – se filhuvudet i
   class-centralen-ui-startsida.php, som beskriver den och byter ut den mot den
   nya hjälten. Bytet sker bara på startsidan; på alla andra ny-designssidor
   står temats hjälte kvar ovanför vårt eget hjältekort och säger samma sak en
   gång till. Här syns den som en lila remsa med avklippt text: blocket har
   temats egna mått, och den nya designens box-sizing och typsnitt räknar om
   dem så att rubriken inte längre ryms i höjden.

   Hela blocket döljs, inte bara texten – varje sida i nya designen ritar sitt
   eget hjältekort och behöver inget före det. På startsidan finns id:t inte
   kvar att träffa, eftersom hela blocket redan är utbytt där, så regeln kan
   stå ovillkorad. Skulle bytet någon gång missa sitt block faller mallen
   tillbaka på att lägga den nya hjälten efter sidhuvudet, och då är det just
   den här regeln som håller isär de två. */
body.csd-ny-design #hero{display:none}
/* Temats rubrikyta. Hela ytan döljs och inte bara rubrikraden: den bär också
   marginaler och ibland datum och kategorier, och ingenting av det ska stå
   mellan sidhuvudet och vårt första kort.

   Titeln tas inte bort, den döljs. Sidan heter fortfarande vad den heter i
   menyn, i fliknamnet, i brödsmulorna och i adminlistan – det är bara
   utskriften mitt på sidan som försvinner, och den säger ändå samma sak som
   kortet under. Utan rubrik blir sidan inte heller för en skärmläsare: kortet
   har sin egen h1. */
body.csd-ny-design .entry-header,
body.csd-ny-design .page-header,
body.csd-ny-design .woocommerce-products-header{display:none}
/* Temats behållare runt vår. .csd-shell ligger på den skarpa sajten inuti
   temats innehållsyta, och temats vaddning läggs då ovanpå designens egen åt
   båda hållen. Uppåt blir det ett brett fält mellan sidhuvudet och första
   kortet. I sidled blir korten för smala på mobil: temats vaddning är där
   ungefär 30 px per sida, dubbelt så mycket som designens egen kant, som är
   14 px under 620 px (se --kant i det responsiva blocket ovan). Det är ett och
   samma fel i två riktningar och rättas med ett och samma grepp.

   Temats behållare görs alltså osynlig och kantlös, och .csd-shell får äga all
   luft ensam – 26 px upptill och var(--kant) på sidorna, mockupens egna mått.

   BREDDEN STÅR INTE HÄR LÄNGRE, OCH DET ÄR MED FLIT. Här stod tidigare
   width:auto, max-width:none och float:none, alla tre med !important, för att
   tvinga loss innehållsytan ur temats 70-procentsspalt. De raderna är borta.
   Bredden bestäms nu där den hör hemma, i temat: Centralen_UI::
   layout_utan_sidospalt() svarar 'no-sidebar' på GeneratePress eget filter
   generate_sidebar_layout för varje sida som bär kroppsklassen csd-ny-design.
   Då räknar temat själv fram 100 procent i stället för 70, ritar ingen
   sidospalt att dela bredden med, och sätter kroppsklassen no-sidebar som
   temats egna marginalregler hänger på. Ingen regel behöver längre övertalas,
   och .csd-shell får äga måttet ensam: min(var(--sida),100%) centrerad, alltså
   1080 px, exakt mockupens mått.

   Lägg alltså inte tillbaka en breddrad här. Blir en sida smal igen är felet
   att den inte bär csd-ny-design, eller att filtret inte hann köra – inte att
   den här regeln saknar en width.

   Sidled, bakgrund och ram nollas på hela kedjan – ingenting av det kan ha med
   ett fast sidhuvud att göra. LODRÄTT nollas bara innanför innehållsytan,
   alltså artikelrutan och #main. Temats avstånd ovanför #content och #primary
   får stå kvar med flit: har temat ett fast sidhuvud kan just det avståndet
   vara sidans enda plats för det, och tas det bort i blindo hamnar tävlingen
   och forumet under sidhuvudet – samma fel som startsidan har i dag. Se nästa
   avsnitt. */
body.csd-ny-design #content,
body.csd-ny-design .site-content,
body.csd-ny-design #primary,
body.csd-ny-design .content-area,
body.csd-ny-design #main,
body.csd-ny-design .site-main,
body.csd-ny-design #content.grid-container,
body.csd-ny-design .site-content .grid-container,
body.csd-ny-design .site-main .inside-article{
  margin-inline:0;padding-inline:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
/* Skyddsräcket runt bredden ovan. Här stod tidigare hela förklaringen till
   varför spalten var innehållsstyrd; den gäller inte längre, eftersom temat nu
   ger #primary en egen bredd. Raden står ändå kvar, och båda halvorna gör
   fortfarande nytta:

   flex:1 1 auto – GeneratePress lägger display:flex på .site-content, så
   #primary är ett flexobjekt. Får det av någon anledning ingen bredd ur temat
   blir ett flexobjekt precis så brett som sitt innehåll. flex-grow gör att det
   fyller raden i stället, och då bestämmer .csd-shell måttet som det var tänkt.

   min-width:0 – ett flexobjekt har annars min-width:auto och vägrar krympa
   under sitt minsta innehåll. Utan raden kan en enda bred sak inuti sidan – en
   tabell, en lång adress, en bild – skjuta ut hela innehållsytan förbi
   skärmkanten på mobil i stället för att brytas. Den risken finns kvar även
   utan sidospalt, och temat sätter ingen min-width själv. Raden är därför
   ingen kvarleva utan ett skydd som fortsatt behövs.

   Inget !important, varken förr eller nu. */
body.csd-ny-design #primary,
body.csd-ny-design .content-area{flex:1 1 auto;min-width:0}
/* Artikelrutan är inget eget rum i mockupen – innehållet bor i den, så den
   görs genomskinlig i stället för att döljas, och töms också uppåt och nedåt.
   Alla mått är noll, alltså inget nytt mått påhittat. */
body.csd-ny-design .site-main .inside-article{margin-block:0;padding-block:0}
/* Temats avstånd ovanför innehållsytan, hela kedjan på en gång. Luften kommer
   från flera håll samtidigt – innehållsytans vaddning, spaltens marginal,
   artikelrutans vaddning och innehållsomslagets toppmarginal – och att ta dem
   en i taget har visat sig lämna kvar en av dem varje gång. Efter det här är
   .csd-shell egna 26 px det enda som skiljer sidhuvudet från första kortet,
   precis som i mockupen. Bara toppen nollas: avståndet nedåt står kvar, så
   sidfoten ser ut som förut.

   !important av samma skäl som breddraderna ovan: på varukorgen och kassan
   skriver både temat och den nuvarande designens egna <style>-block bredder
   och vaddning med !important, och luften ska bort på varje ny-designssida –
   inte på alla utom två. Behöver ett fast sidhuvud plats igen är det
   --csd-huvud-hojd i nästa avsnitt som ger den, inte den här vaddningen. */
body.csd-ny-design #content,
body.csd-ny-design .site-content,
body.csd-ny-design #primary,
body.csd-ny-design .content-area,
body.csd-ny-design #main,
body.csd-ny-design .site-main,
body.csd-ny-design .site-main .inside-article,
body.csd-ny-design .entry-content{margin-top:0 !important;padding-top:0 !important}
/* Ett tomt omslag runt vårt innehåll ger ingen egen höjd, men det låter sitt
   första barns toppmarginal slå igenom uppåt. Den nollas därför på varje led i
   kedjan; .csd-shell har ingen egen marginal, så det som träffas är temats. */
body.csd-ny-design #content > :first-child,
body.csd-ny-design .site-content > :first-child,
body.csd-ny-design #primary > :first-child,
body.csd-ny-design #main > :first-child,
body.csd-ny-design .inside-article > :first-child,
body.csd-ny-design .entry-content > :first-child{margin-top:0}

/* ---------- Plats för ett fast sidhuvud ----------
   Har temat ett sidhuvud med position:fixed ligger det utanför flödet, och
   sidan måste själv lämna plats för det. Temat gör det på sitt håll, men den
   nya designen ritar startsidans hjälte på temats egen hjältes plats – se
   Centralen_UI_Startsida::sidhuvud_med_ny_hjalte() – och ärver därför inte
   den platsen. Måttet nedan är det enda stället som håller reda på det.

   Noll som förval, så filen beter sig exakt som mockupen tills någon vet
   bättre. Höjden gick inte att läsa ur repot – temat ligger inte här – och
   raden här under bad därför en människa att mäta sidhuvudet i inspektören och
   skriva in talet. Det blev aldrig gjort, och startsidans rubrik har legat
   under temats sidhuvud i tre omgångar.

   Måttet mäts nu i stället av includes/ui/centralen-ui.js, som läser av det
   färdiga sidhuvudet i webbläsaren och skriver svaret hit. Noll står kvar som
   förval: går skriptet inte igång beter sig filen precis som förut. Ett
   inskrivet tal hade dessutom bara stämt tills någon bytte logotyp, menyrad
   eller typsnitt – nu mäts det om varje gång sidan ritas.

   Hjälten får måttet som toppvaddning i stället för marginal, så att det
   lila bandet fortsätter upp bakom sidhuvudet. Övriga sidor får det på
   kroppen. Startsidan känns igen på .home, kroppsklassen WordPress sätter
   för is_front_page(), samma villkor som väljer startsidans mall. */
body.csd-ny-design{--csd-huvud-hojd:0px;--csd-hjalte-krock:0px}
body.csd-ny-design:not(.home){padding-top:var(--csd-huvud-hojd)}
/* 22 px är hjältens egen toppvaddning ur regeln .csd-sitehero ovan. */
body.csd-ny-design .csd-sitehero{padding-top:calc(22px + var(--csd-huvud-hojd))}
@media (max-width:620px){
  /* 16 px, samma mått som mobilregeln för .csd-sitehero ovan. */
  body.csd-ny-design .csd-sitehero{padding-top:calc(16px + var(--csd-huvud-hojd))}
}

/* ---------- Startsidans hjälte mot kortet under ----------
   Startsidan är den enda sidan där den nya designen ritar ett eget band högst
   upp, på temats hjältes plats – se Centralen_UI_Startsida. Övriga sidor har
   temats hjälte dold och börjar direkt med .csd-shell, och för dem finns det
   ingenting att krocka med.

   Det gör det på startsidan. Temats innehållsblock kan vara uppdraget med en
   negativ toppmarginal; det är ett vanligt grepp för att låta första kortet
   överlappa temats egen hjältebild. Regeln ovanför nollar toppmarginalen på
   allt inuti innehållsytan, men #page och .site ligger utanför den kedjan, och
   där kan grepper sitta kvar. Då hamnar första kortet under vårt band i
   stället, och rubriken "Du vet vad du får" skyms.

   #page nollas inte i blindo: den marginalen kan vara det enda som ger plats
   åt ett fast sidhuvud på övriga sidor, och de ser bra ut i dag. I stället
   mäter centralen-ui.js hur mycket bandet och kortet faktiskt går omlott och
   lägger exakt så mycket luft ovanför kortet. Finns ingen krock är måttet noll
   och sidan ser ut precis som mockupen – riggen mäter 26 px mellan bandet och
   första kortet både före och efter den här regeln.

   26 px är .csd-shell egen toppvaddning ur regeln längst upp i filen. */
body.csd-ny-design.home .csd-shell{padding-top:calc(26px + var(--csd-hjalte-krock))}
@media (max-width:620px){
  /* 16 px, samma mått som mobilregeln för .csd-shell ovan. */
  body.csd-ny-design.home .csd-shell{padding-top:calc(16px + var(--csd-hjalte-krock))}
}

/* ---------- Riktiga bilder i bildytorna ----------
   Mockupen har ordet BILD i rutorna. I butiken ligger där en <img> ur
   mediebiblioteket, och utan de här raderna spiller den ut ur den runda ramen.
   border-radius:inherit låter bilden ta rutans egen form: var(--r-box) i den
   fyrkantiga .csd-figure och 50 % i .csd-figure--circle. Produktkortets ruta är
   alltid en cirkel och skriver därför ut sin rundning. */
.csd-figure{overflow:hidden}
.csd-figure img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Fyrkantiga rutor med en riktig bild i sig behöver dessutom en bestämd höjd.
   .csd-figure har bara min-height, och en höjd som växer med innehållet är
   ingen höjd att räkna procent mot: bildens height:100% ovan faller tillbaka
   på auto, och en stående bild blir 328 × 491 px på en 390 px skärm i stället
   för mockupens 210 px höga ruta – nog för att trycka ner allt under den långt
   förbi vikningen. Med en bestämd höjd biter beskärningen och rutan blir lika
   hög oavsett vilket format butiken laddar upp. Måttet är rutans eget
   min-height. .csd-figure--circle behöver ingen motsvarighet: den har redan en
   bestämd höjd genom aspect-ratio.

   Klassen sätts av mallen och inte av en :has()-väljare på .csd-figure img.
   En sådan hade också träffat upphämtningsbilderna på Spara order, och de ska
   inte beskäras – där behöver kunden se hela bilden av platsen. */
.csd-figure--bild{--csd-figur-hojd:210px;height:var(--csd-figur-hojd)}
/* Höjden sätts om på bilden också, med samma mått. Rutan är ett rutnät vars
   rad växer med innehållet, och en rad utan bestämd höjd är ingen höjd att
   räkna procent mot: bildens height:100% ovan faller till auto, raden blir
   489 px och rutan klipper bort nederdelen i stället för att beskära. Med
   måttet direkt på bilden är det object-fit:cover som bestämmer utsnittet, och
   rutan fylls oavsett om butiken laddar upp en stående eller liggande bild. */
.csd-figure--bild > img{height:var(--csd-figur-hojd)}
.csd-prod__thumb{overflow:hidden}
.csd-prod__thumb img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ---------- Flikkortet på produktsidan ----------
   Kortet med beskrivning och omdömen är ett eget barn till rutnätet, inte något
   som ligger efter det, och ska spänna över båda spalterna som i mockupen. Utan
   regeln hamnar det i vänsterspalten under bilden. */
.csd-grid--prod > #flikar{grid-column:1/-1}

/* ---------- Rubriknivåer och block i löptexten ----------
   Mockupens textsidor använde bara h3, p och punktlistor, och det är också allt
   .csd-prose har regler för ovan. WordPress-editorn ger h2 som första
   rubriknivå och kan dessutom lägga in numrerade listor, citat, tabeller och
   bilder. Utan regler här faller de tillbaka på temats egen rubrikstil mitt i
   löptexten, vilket är precis vad .csd-prose finns till för att undvika.

   Graderna är filens egna: h2 tar kortrubrikens 17 px (.csd-title--sm) och h3:s
   nedre marginal, med den övre ett snäpp upp till 18 px – samma steg som
   .csd-footer h3 redan står på. h4 och nedåt landar på .csd-note b:s 13,5 px och
   skiljs från brödtexten på vikt och färg i stället för på storlek, med h3:s
   marginaler oförändrade. ol får ul:s marginal och indrag rakt av. */
.csd-prose h2{margin:18px 0 7px;color:var(--navy);font-size:17px;font-weight:800}
.csd-prose h4,
.csd-prose h5,
.csd-prose h6{margin:16px 0 7px;color:var(--navy);font-size:13.5px;font-weight:800}
.csd-prose ol{margin:0 0 10px;padding-left:19px}
/* Citat: samma ljusa ram och nedtonade text som .csd-toc, men bara i kanten –
   ett helt kort mitt i löptexten hade konkurrerat med sidans egna kort. */
.csd-prose blockquote{
  margin:0 0 10px;padding:2px 0 2px 13px;
  border-left:3px solid var(--blue-line);color:var(--muted);
}
/* Tabell: hårlinjer mellan raderna som .csd-row, och rubrikcellen i samma ton
   och vikt som rubrikerna ovan. Ett snäpp mindre text, som .csd-toc. */
.csd-prose table{width:100%;margin:0 0 10px;border-collapse:collapse;font-size:13px}
.csd-prose th,
.csd-prose td{padding:8px 10px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.csd-prose th{color:var(--navy);font-weight:800}
/* Bild i löptexten hämtar kortens mindre rundning, inte cirkeln. */
.csd-prose img{max-width:100%;height:auto;border-radius:var(--r-box)}

/* ---------- Lagerpanelens luft i köpzonen ----------
   Panelen ritas av Centralen_Location_Stock på kroken
   woocommerce_before_add_to_cart_form, alltså mellan hjälpraderna och
   köpformuläret i produktkortet. Avståndet upp till texten låg i
   Centralen_Location_Stock::product_page_styles(), som margin:14px 0 16px, och
   den metoden lämnar sidan innan den skriver något när den nya designen är på.
   Utan raden nedan ligger panelen tätt mot raden "Märke:" ovanför.

   Måttet är mockupens eget: mockups/tema/produkt.html ger panelen
   style="margin-top:15px".

   Ingen bottenmarginal, av samma skäl som mockupen inte har någon. Det som
   följer bär sitt eget avstånd upp – köpraden i
   templates/woocommerce/single-product/add-to-cart/variable.php har mockupens
   style="margin-top:16px", köpknappen i simple.php style="margin-top:11px" och
   .csd-trust, som står där när varan är slut på samtliga orter, 11 px. En
   marginal här hade lagts till dem, inte slagits ihop med dem: Woos egen
   stilmall ger form.cart en clearfix på ::before, och den bryter
   marginalhopslagningen genom formulärets överkant. */
.csd-locstock{margin-top:15px}

/* ---------- Lagerpanelens slutläge ----------
   Panelen ritas av Centralen_Location_Stock. Är varan slut på samtliga orter
   byter den ut chipsraderna mot en rubrik och en mening, och de tre klasserna
   nedan saknade regler. Formen är .csd-locstock ovan; rubriken tar
   .csd-prose h3:s grad och vikt, texten .csd-note:s 13 px och
   .csd-locstock__hint:s radavstånd. Färgen på slutläget följer .csd-panel--bad
   och .csd-note--bad, som är filens sätt att säga att något är slut eller fel. */
.csd-locstock__title{display:block;margin-bottom:4px;color:var(--navy);font-size:15px;font-weight:800}
.csd-locstock__text{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.csd-locstock--empty{border-color:var(--bad-line);background:var(--bad-soft)}
.csd-locstock--empty .csd-locstock__title,
.csd-locstock--empty .csd-locstock__text{color:var(--bad)}

/* ---------- Lagerpanelens stängda rad ----------
   Dead drop-schemat kan stänga en ort för dagen eller veckan. Varan finns
   alltså, orten går bara inte att välja just nu, och raden ska därför läsas
   som "kommer tillbaka" och inte som "slut". Mockupen har bara --in och --out,
   så klassen finns bara i skarp kod och regeln hör hemma här.

   Formen är --out:s, rad för rad – samma egenskaper i samma ordning – men med
   filens varningsfärger i stället för dess slutfärger: --warn-line som ram och
   prick, --warn-soft som botten och --warn som text. Samma trio som
   .csd-badge--warn använder några hundra rader upp. Prickens ring är prickens
   egen färg på 20 %, precis som för --in och --out.

   Chipet kan sluta med ett <em> som säger när orten öppnar igen. Det skrivs av
   Centralen_Location_Stock::render_location_chip() och finns bara här. Kursivt
   vore främmande i filen, så det rätas upp och tar --out:s chipsvikt och
   .csd-locstock__hint:s grad. */
.csd-locstock__row--closed .csd-locstock__place{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn);font-weight:650}
.csd-locstock__row--closed .csd-locstock__dot{background:var(--warn-line);box-shadow:0 0 0 2px rgba(240,208,137,.20)}
.csd-locstock__place em{font-style:normal;font-weight:650;font-size:11.5px}

/* ---------- Produktrutnät som bara visar hela rader ----------
   Startsidan visar administratörens hela produktval, två till tio stycken,
   medan .csd-prodgrid är tre kolumner brett på skrivbord och två under 900 px.
   Går antalet inte jämnt upp slutar rutnätet i en stump: fyra valda produkter
   ger tre kort och ett ensamt, och tomrummet bredvid det ser ut som ett fel.

   Modifieraren nedan döljer överskottet så att rutnätet alltid slutar med en
   hel rad. Fyra valda produkter blir alltså tre avlånga kort på skrivbord och
   fyra smalare i 2x2 på mobil. Mallen skriver ut alla korten i båda fallen –
   det är bredden som avgör hur många som syns, och den vet bara CSS.
   KAPNINGEN ÄR AVSIKTLIG. Ser den ut som en bugg är det den här kommentaren
   som fattas, inte en rad kod.

   CSS kan inte räkna, men den kan fråga hur långt det är kvar. Ett kort som är
   både :first-child och det (3n+4):e från slutet betyder att rutnätet har 4, 7
   eller 10 kort, alltså ett över en hel rad – då döljs det sista. 3n+5 ger 5,
   8 eller 11, två över – då döljs de två sista. Formlerna bär undantagen av
   sig själva: de börjar på fyra respektive fem, så två eller tre valda
   produkter visas alltid i sin helhet, och det blir aldrig färre än tre kort
   kvar. Under 900 px räknas samma sak mot två kolumner, och 2n+3 börjar på
   tre, så ett ensamt kort alltid står kvar.

   De två breddlägena står i var sin mediefråga i stället för i en grundregel
   som den andra tar tillbaka: väljarna nedan väger tyngre än en nollställning
   och skulle inte gå att ångra. 901 px är närmast ovanför filens egen
   brytpunkt på 900. */
@media (min-width:901px){
  .csd-prodgrid--hela-rader > .csd-prod:first-child:nth-last-child(3n+4) ~ .csd-prod:last-child{display:none}
  .csd-prodgrid--hela-rader > .csd-prod:first-child:nth-last-child(3n+5) ~ .csd-prod:nth-last-child(-n+2){display:none}
}
@media (max-width:900px){
  .csd-prodgrid--hela-rader > .csd-prod:first-child:nth-last-child(2n+3) ~ .csd-prod:last-child{display:none}
}

/* ---------- WooCommerce paginering ----------
   Mockupens sortiment visar alla varor på en sida och har därför ingen
   paginering. WooCommerce skriver ut sin egen, med klassnamn som finns på varje
   kundsida – reglerna ligger därför under kroppsklassen.

   Sidnumren blir små .csd-btn: temats piller, ram i --line, marin text.
   Måtten är knappens egna, i den mindre varianten .csd-btn--copy (40 px hög,
   12,5–13,5 px text). Den aktuella sidan markeras som en vald bricka, med
   .csd-btn--copy:s ljusa yta och accentfärg. Inget mer än så: en paginering ska
   gå att hitta, inte dra blicken från varorna ovanför. */
body.csd-ny-design .woocommerce-pagination{margin:18px 0 0}
body.csd-ny-design .woocommerce-pagination ul.page-numbers{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0;padding:0;border:0;list-style:none;
}
body.csd-ny-design .woocommerce-pagination ul.page-numbers li{margin:0;border:0}
body.csd-ny-design .woocommerce-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card-bg);color:var(--navy);
  font-size:13.5px;font-weight:750;text-decoration:none;
}
body.csd-ny-design .woocommerce-pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue)}
body.csd-ny-design .woocommerce-pagination .page-numbers.current{
  border-color:var(--blue-line);background:var(--blue-soft);color:var(--accent-ink);
}
/* Utelämnandeprickarna är inte en knapp och ska inte se ut som en. */
body.csd-ny-design .woocommerce-pagination .page-numbers.dots{
  min-width:0;padding:0 4px;border-color:transparent;background:transparent;color:var(--muted);
}

/* ---------- WooCommerce notiser ----------
   "Vara tillagd i varukorgen", inloggningsfel och liknande. Designen har en
   egen notis, .csd-note, men Woos meddelanden kommer ur kärnan och bär sina
   egna klassnamn – de kan alltså inte få .csd-note på sig utan att varje
   utskriftsställe i WooCommerce skrivs om. I stället lånar de .csd-note:s form
   och dess tre färglägen: info blått, message grönt (--ok) och error rött
   (--bad), exakt som .csd-note, .csd-note--ok och .csd-note--bad.

   Woo lägger en bock eller ett utropstecken som absolutplacerat ::before ur sin
   egen ikonfont. Det räknar med Woos vaddning och skulle lägga sig ovanpå
   texten här, så det tas bort i stället för att flyttas: designen sätter inga
   ikoner på notiser den inte själv ritar. */

/* Woos woocommerce_output_all_notices() skriver alltid ut sitt hölje, även när
   det inte finns någon notis att lägga i det. Tomhetsregeln nedan låg i
   Centralen_Checkout::cart_page_styles(), som

     body.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none }

   och den metoden lämnar sidan innan den skriver något när den nya designen är
   på. Ett tomt hölje bär ingenting själv, så måttet beror på vad temat ger
   .woocommerce-notices-wrapper – och det syns inte härifrån, bara på sajten.
   Regeln står därför kvar, nu för alla sidor designen ritar och inte bara
   varukorgen: höljet finns även i kassan, på produktsidan och i sortimentet. */
body.csd-ny-design .woocommerce-notices-wrapper:empty{display:none}

body.csd-ny-design .woocommerce-message,
body.csd-ny-design .woocommerce-info,
body.csd-ny-design .woocommerce-error{
  display:flex;flex-wrap:wrap;align-items:center;gap:11px;
  margin:0 0 14px;padding:13px 15px;
  border:1px solid var(--blue-line);border-radius:var(--r-box);
  background:var(--blue-soft);color:var(--body-ink);
  font-size:13px;line-height:1.5;list-style:none;
}
body.csd-ny-design .woocommerce-message::before,
body.csd-ny-design .woocommerce-info::before,
body.csd-ny-design .woocommerce-error::before{display:none}
body.csd-ny-design .woocommerce-message{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}
body.csd-ny-design .woocommerce-error{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad)}
/* Felnotisen är en <ul> och kan bära flera rader. Punkterna är radbrytningar
   här, inte en lista, och tar .csd-note li:s avstånd mellan poster. */
body.csd-ny-design .woocommerce-error li{margin:0;width:100%}
body.csd-ny-design .woocommerce-error li + li{margin-top:2px}
/* Woos knapp i notisen, t.ex. "Visa varukorg". Samma mått och färger som
   .csd-btn--copy, och sist på raden så att texten läses först. */
body.csd-ny-design .woocommerce-message .button,
body.csd-ny-design .woocommerce-info .button,
body.csd-ny-design .woocommerce-error .button{
  order:2;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card-bg);color:var(--navy);
  font-size:12.5px;font-weight:750;text-decoration:none;
}
body.csd-ny-design .woocommerce-message .button:hover,
body.csd-ny-design .woocommerce-info .button:hover,
body.csd-ny-design .woocommerce-error .button:hover{border-color:var(--blue);color:var(--blue)}

/* =============================================================
   TILLÄGG: VARUKORGEN OCH KASSAN

   Eget avsnitt, sist i filen, av samma skäl som tillägget ovan. Två slag av
   regler ligger blandade här, och skillnaden är värd att känna till:

   1. Delar mockupen aldrig ritade. Varukorgsraden får en antalsruta – i
      mockupen finns ingen, eftersom butikens varor säljs styckvis – och
      bildytorna får riktiga bilder i stället för ordet BILD.

   2. Regler som väger upp den NUVARANDE designen. Varukorgen och kassan är de
      enda portade sidorna som redan har en egen design, och den skrivs ut som
      inline-stil av Centralen_Checkout: cart_page_styles() i sidhuvudet och
      customize_centralen_checkout_layout_ui() i sidfoten. Båda ligger alltså
      EFTER stilmallen i kaskaden, och båda använder !important rakt igenom.
      Renast hade varit att lämna de metoderna tidigt när designen är på, så
      som Centralen_Location_Stock redan gör, men den filen äger kassan och
      betalflödet och rörs inte härifrån.

      I stället väger reglerna nedan tyngre. Kroppsklassen skrivs ihop med Woos
      egen – body.csd-ny-design.woocommerce-cart – vilket ger exakt en klass
      mer än originalet och därmed sista ordet oavsett i vilken ordning filerna
      hamnar i sidhuvudet. Ingen kund kan träffas: csd-ny-design sätts bara av
      Centralen_UI_Kassa::filter_body_class(), som kräver csd_ny_design_aktiv().

   Inga nya mått är påhittade. Varje storlek och färg nedan är hämtad ur en
   regel som redan står i filen, och var och en pekas ut i kommentaren.
   ============================================================= */

/* ---------- Riktiga bilder i varuradernas bildytor ----------
   Samma sak som .csd-figure och .csd-prod__thumb får ovan, fast för raderna i
   varukorgen och i ordersammanställningen. border-radius:inherit låter bilden
   ta rutans egen form: 9 px i .csd-item--tight, 8 px i .csd-item--sm och 10 px
   i basraden. Länken runt bilden är WooCommerce egen och måste fylla rutan,
   annars krymper bilden till länkens egen höjd. */
.csd-item__thumb{overflow:hidden}
.csd-item__thumb a{display:block;width:100%;height:100%;line-height:0}
.csd-item__thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---------- Varukorgsrad med antalsruta ----------
   Butikens varor är sold_individually och raden har då varken antalsfält eller
   knappen "Uppdatera varukorg" – det är den raden mockupen ritar. Kommer det in
   en vara med fritt antal får raden klassen .csd-item--qty, och rutan läggs i
   cellen under radsumman som annars står tom. Rutnätet är oförändrat i övrigt:
   samma fyra kolumner, samma två rader, bara metatexten som slutar spänna över
   två kolumner.

   Woos omslag .product-quantity bär csd-namnet och är själv rutnätsbarn.
   .product-remove kan däremot inte vara det: kryssknappen inuti har redan ett
   eget område, så omslaget är display:contents och lämnar över sin plats. */
.csd-item--tight.csd-item--qty{
  grid-template-areas:
    "thumb name sum remove"
    "thumb meta qty remove";
}
.csd-item--tight .csd-item__qty{grid-area:qty;justify-self:end}
.csd-item__removeslot{display:contents}
/* Fältet lånar .csd-item__count:s rundning och .csd-item__remove:s höjd, och
   ramen är .csd-input:s. Bredden räcker till tre siffror. Kroppsklassen står
   med för att Woos egen ".woocommerce .quantity .qty" annars väger lika tungt
   och avgörs av filordningen i sidhuvudet. */
body.csd-ny-design .csd-item__qty .quantity{display:block;margin:0;float:none}
body.csd-ny-design .csd-item__qty .qty{
  width:64px;height:34px;padding:0 8px;
  border:1px solid #cfcbe6;border-radius:9px;background:#fff;
  color:var(--text);font-size:13.5px;font-weight:700;text-align:center;
}

/* Kryssknappen är en länk och inte en knapp i WooCommerce markup, och a.remove
   i Woos stilmall sätter dessutom sin röda färg med !important. Färgen måste
   därför tas tillbaka med samma medel; resten av knappens form kommer ur
   .csd-item__remove ovan. */
body.csd-ny-design a.csd-item__remove{
  display:grid;place-items:center;
  color:var(--muted) !important;font-weight:700;text-decoration:none;
}
body.csd-ny-design a.csd-item__remove:hover{
  border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad) !important;
}

/* ---------- Verktygsraden ----------
   Texten "Varje produkt säljs styckvis" är en .csd-sub, som har fyra pixlars
   toppmarginal för att sitta under en rubrik. Här står den på egen rad i en
   flexrad och ska centreras mot rabattkodsfältet i stället. */
.csd-toolbar__note{margin:0}

/* ---------- Sammanfattningen i sidospalten ----------
   Kortet heter csd-sum och inte csd-summary: det namnet är upptaget av den
   nuvarande designen, som gör ett eget vitt kort av det. Se filhuvudet i
   templates/ny-design/cart/cart-totals.php.

   Måtten är mockupens: fyra pixlar under rubrikraden och fjorton över knappen. */
.csd-sum__head{margin-bottom:4px}
.csd-sum__cta{margin-top:14px}
.csd-sum__note{margin-top:8px;text-align:center}
/* Woos egen layoutstil låter sammanfattningen flyta till höger i halva
   bredden. Här är den redan en egen spalt i .csd-grid och ska fylla den. */
body.csd-ny-design .cart-collaterals,
body.csd-ny-design .cart-collaterals .cart_totals,
body.csd-ny-design .woocommerce-cart-form{
  float:none;width:100%;max-width:none;margin:0;padding:0;
}
/* Knappen till kassan har kvar klassen checkout-button, som plugin letar efter.
   Woos regel på den sätter egen grad, vaddning och marginal och väger lika
   tungt som en regel under kroppsklassen skulle göra – därför Woos kroppsklass
   med i selektorn. Formen kommer ur .csd-btn--cta. */
body.csd-ny-design.woocommerce-cart .wc-proceed-to-checkout{margin:0;padding:0}
body.csd-ny-design.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  margin:0;padding:0 18px;font-size:16.5px;
}

/* ---------- Tom varukorg ----------
   Innehållet ritas av Centralen_Checkout::render_empty_cart(), som är
   oförändrad, och mallen lägger det i ett vanligt .csd-card. Den nuvarande
   designen gör samma markup till ett eget vitt kort med egen bredd, ram och
   skugga, och två kort i varandra vore ett kort för mycket. Här nollställs
   ytterhöljet och innehållet får designens egna toner: rubriken tar .csd-mid
   __title:s grad, texten .csd-mid__lead:s, kickern .csd-kicker:s och knappen
   .csd-btn--cta:s. Raden med försäkringar är .csd-trust, tecken för tecken. */
body.csd-ny-design.woocommerce-cart .wc-empty-cart-message,
body.csd-ny-design.woocommerce-cart .csd-cart-empty{
  width:100% !important;max-width:none !important;margin:0 !important;
  border:0 !important;background:none !important;box-shadow:none !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty{
  padding:26px 0 4px !important;color:var(--text) !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty__icon{
  border-color:var(--blue-line) !important;background:var(--blue-soft) !important;
  color:var(--blue) !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty__kicker{
  color:var(--muted) !important;font-size:12px !important;font-weight:800 !important;
  letter-spacing:.07em !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty h1{
  color:var(--navy) !important;font-size:clamp(21px,3.6vw,26px) !important;font-weight:800 !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty p{
  color:var(--muted) !important;font-size:14px !important;line-height:1.65 !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty__button{
  min-height:56px !important;border-radius:var(--r-pill) !important;
  background:var(--pink) !important;color:var(--cta-ink,#fff) !important;
  font-size:16.5px !important;font-weight:800 !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty__button:hover{
  background:var(--pink-dark) !important;color:var(--cta-ink,#fff) !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty__assurances{
  color:var(--muted) !important;font-size:12.5px !important;font-weight:600 !important;
}
body.csd-ny-design.woocommerce-cart .csd-cart-empty__assurances i{
  width:3px !important;height:3px !important;background:#918eae !important;
}

/* ---------- Kassans ram ----------
   Kassans layoutskript skriver ut hela den nuvarande designen som inline-stil i
   sidfoten: form.checkout blir ett tvåkolumnsrutnät, och #customer_details,
   #order_review_heading och #order_review blir tre vita kort med ram och
   skugga. Id:na och kolumnerna kan inte bytas bort – WooCommerce eget skript
   och kassans egna letar efter dem – så här nollställs stilen i stället.
   Rutnätet och korten kommer från .csd-grid och .csd-card i mallen. */
body.csd-ny-design.woocommerce-checkout form.checkout{
  display:block !important;margin:0 !important;
}
body.csd-ny-design.woocommerce-checkout #customer_details,
body.csd-ny-design.woocommerce-checkout #order_review_heading,
body.csd-ny-design.woocommerce-checkout #order_review{
  margin:0 !important;padding:0 !important;
  min-height:0 !important;border:0 !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important;
}
/* Luften nedanför betalvalen, innanför kortets nederkant.
   Kundspalten är .col-1 inuti #customer_details, och butikens egen
   "Ytterligare CSS" ger den en bottenmarginal:

     #customer_details > div{width:100%;float:none;margin-bottom:2rem}

   Marginalen har ingenting att stöta emot – #customer_details har varken
   vaddning eller ram efter regeln ovan – så den faller igenom och lägger sig
   mellan sista betalrutan och kortets kant. Mätt på den skarpa kassan:
   avståndet under rutan "Betala med Monero." var 55 px, alltså 32 px marginal
   plus kortets egna 22 px vaddning. Upptill har kortet bara sina 22 px, och
   det är de 22 px som ska stå även nedtill – mockupens mått.

   Inget !important: raden i Ytterligare CSS har inget, och kroppsklassen plus
   .woocommerce-checkout räcker gott för att väga tyngre. Kolumnen döljs inte
   och byter inte namn, så både WooCommerce eget skript och kassans egna hittar
   .col-1 och .col-2 precis som förut. */
body.csd-ny-design.woocommerce-checkout #customer_details > div{
  margin-bottom:0;
}
/* Rubriken ligger i en .csd-card__head tillsammans med länken "Ändra", och
   stegtexten står redan i stegspåret överst på sidan. */
body.csd-ny-design.woocommerce-checkout #order_review_heading::after{content:none !important}
/* Kundspaltens sidhuvud. Klassen csd-kassa-head måste stå kvar – hittar
   layoutskriptet den inte skriver det ett eget sidhuvud med rubriken "Kassa" en
   gång till – men den nuvarande designens regel drar den utanför kortets kant
   med negativa marginaler. Här är den en vanlig .csd-card__head. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-head{
  margin:0;padding:0 0 15px;border-bottom:1px solid var(--hair);
}
/* Kundspaltens h3 och leveransspalten döljs av den nuvarande designen, och det
   ska de fortsätta göra – men de två raderna skrevs bara ut av
   Centralen_Checkout::customize_centralen_checkout_layout_ui(), och det
   <style>-blocket hoppas över när den nya designen är på:

     #customer_details h3        { display: none }
     #customer_details > .col-2  { display: none }

   Utan dem står WooCommerce egen rubrik "Faktureringsadress" mitt i vårt eget
   avsnitt "Dina uppgifter", och .col-2 visar rutan "Leverera till en annan
   adress?" med leveransfälten och orderanteckningen under sig. Butiken frågar
   inte efter de uppgifterna – vilka fält kassan visar avgörs av
   Centralen_Checkout::custom_shipping_field_toggle() – och kolumnen har aldrig
   synts för en kund.

   Fälten döljs och tas inte bort: WooCommerce egna skript och pluginets egna
   letar efter dem i .col-2, och ett fält med display:none postas som vanligt.
   Ingen regel behöver !important; ingenting annat sätter display på dem.

   Bara stegens egna rubriker tas tillbaka. */
body.csd-ny-design.woocommerce-checkout #customer_details h3{display:none}
body.csd-ny-design.woocommerce-checkout #customer_details > .col-2{display:none}
body.csd-ny-design.woocommerce-checkout #customer_details .csd-step > h3{display:block !important}

/* Fälten. Den nuvarande designen ger dem 44 px höjd och en grå ram; designens
   egna fält är .csd-input och .csd-label, och de måtten används här. */
body.csd-ny-design.woocommerce-checkout .form-row{margin-bottom:11px !important}
body.csd-ny-design.woocommerce-checkout .form-row label{
  margin-bottom:6px !important;color:var(--navy) !important;
  font-size:13px !important;font-weight:750 !important;
}
body.csd-ny-design.woocommerce-checkout .input-text,
body.csd-ny-design.woocommerce-checkout select{
  min-height:48px !important;padding:11px 14px !important;
  border:1px solid #cfcbe6 !important;border-radius:11px !important;
  background:#fff !important;color:var(--text) !important;font-size:15px !important;
}

/* Betalknappen. Den nuvarande designen ger den rund form och full bredd men
   lämnar färgen till Woo och temat. Här är den mockupens CTA. */
body.csd-ny-design.woocommerce-checkout #place_order{
  border-radius:var(--r-pill) !important;min-height:56px !important;
  background:var(--pink) !important;color:var(--cta-ink,#fff) !important;
  font-size:16.5px !important;font-weight:800 !important;
}
body.csd-ny-design.woocommerce-checkout #place_order:hover{
  background:var(--pink-dark) !important;color:var(--cta-ink,#fff) !important;
}

/* ---------- Fraktraden i ordersammanställningen ----------
   Ordersammanställningen är byggd av .csd-row, med ett undantag: fraktraden
   ritas av WooCommerce egen cart/cart-shipping.php, som skriver ett tr med ett
   th och ett td, och två skript i kassan letar efter just den tabellraden. Den
   står därför kvar i en riktig tabell – se filhuvudet i
   templates/ny-design/checkout/review-order.php – och får här samma form som
   raderna omkring den. Måtten är .csd-row:s egna. */
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt{
  display:block !important;width:100% !important;margin:0 !important;
  border:0 !important;border-collapse:collapse !important;background:none !important;
}
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt tbody{display:block !important}
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt tr{
  display:flex !important;align-items:flex-start !important;justify-content:space-between !important;
  gap:14px !important;margin:0 !important;padding:10px 0 !important;
  border:0 !important;border-top:1px solid var(--hair) !important;border-radius:0 !important;
  background:none !important;font-size:13.5px !important;
}
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt th{
  color:var(--muted) !important;font-weight:400 !important;text-align:left !important;
}
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt td{
  color:var(--navy) !important;font-weight:700 !important;text-align:right !important;
  white-space:nowrap !important;
}

/* ---------- Kopiorna i sidospalten innan skriptet hunnit flytta dem ----------
   WooCommerce ritar fraktvalen inuti fraktraden i ordersammanställningen och
   betalvalen inuti #payment, alltså båda i sidospalten. Layoutskriptet i
   Centralen_Checkout::customize_centralen_checkout_layout_ui() flyttar dem
   därifrån till avsnitten Leverans och Betalning i huvudspalten, men det kan
   först göras när sidan finns – och WooCommerce ritar om båda ställena vid
   varje omräkning av kassan, varefter skriptet flyttar om dem 180 ms senare.

   Under det glappet står listorna kvar där WooCommerce lade dem. Den
   nuvarande designen såg det aldrig, för dess <style>-block dolde dem:

     #order_review #payment > .wc_payment_methods                       { display: none }
     #order_review #payment > .payment_box                              { display: none }
     #order_review tr.woocommerce-shipping-totals td ul#shipping_method { display: none }

   Blocket hoppas över när den nya designen är på, och utan raderna blinkar en
   andra uppsättning frakt- och betalknappar förbi i ordersammanställningen
   varje gång kunden byter fraktsätt, betalsätt eller ort. Det är samma
   dubbletter som gav två radiogrupper med namnet payment_method; skriptet tar
   numera bort den gamla listan när det hittar två, men först efter glappet.

   Reglerna gäller bara så länge elementen står kvar i sidospalten. Skriptet
   flyttar dem, det klonar dem inte, så när de väl ligger i .csd-kassa-shipping
   och .csd-kassa-payments matchar selektorerna inte längre och avsnitten ovan
   respektive nedan ritar dem som vanligt.

   OM !important HÄR, och varför det inte gick att undvika:

   Raderna gick inte fram. De vägde tyngre än WooCommerce egna regler, precis
   som det stod här förut, men de vägde inte tyngre än butikens egen
   "Ytterligare CSS" under Utseende → Anpassa. Där står, skrivet för den gamla
   designen:

     #payment ul.wc_payment_methods{
       display:grid !important;
       grid-template-columns:repeat(3, max-content);
       justify-content:center !important;
     }
     #payment li.wc_payment_method{display:contents !important}

   !important slår allt utan !important, hur specifik selektorn än är. Betalvalen
   stod alltså kvar synliga i sidospalten, tvingade till tre rutor på rad av
   grid-template-columns:repeat(3,max-content), tills layoutskriptet hann flytta
   ut listan ur #payment - då slutar selektorn matcha och rutorna försvinner.
   Det är exakt det kunden ser: VISA, Bitcoin och USDT på en rad, med
   CryptoWoos ruta lös bredvid, i knappt en sekund varje gång kassan laddas
   eller räknas om. li{display:contents} är förklaringen till att rutan hamnar
   utanför: <li> försvinner som låda och rutan blir en egen cell i rutnätet.

   Det enda som slår ett !important är ett annat !important. Det som slås är
   alltså den citerade raden ur Ytterligare CSS, ingenting i temat och
   ingenting i WooCommerce. Tas det blocket bort - det är skrivet för en design
   butiken inte använder längre - kan !important tas bort här igen.

   Nödlägesraden längst ned i filen måste följa med, annars kan skyddsnätet
   inte längre ta fram valen när flytten uteblir. Den har en klass mer och
   vinner så fort båda har !important. */
body.csd-ny-design.woocommerce-checkout #order_review #payment > ul.wc_payment_methods,
body.csd-ny-design.woocommerce-checkout #order_review #payment > .payment_box,
body.csd-ny-design.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td ul#shipping_method{
  display:none !important;
}

/* ---------- Fraktvalen i kassan ----------
   Samma sak som betalvalen nedan, och av samma skäl: layoutskriptet flyttar
   fraktalternativen ur ordersammanställningen till avsnittet Leverans i
   huvudspalten, bygger om varje etikett till namn, undertext och pris och
   delar upp dem i grupperna "Skicka till mig" och "Hämta själv (Dead Drop)".
   All form på det låg i <style>-blocket i
   Centralen_Checkout::customize_centralen_checkout_layout_ui(), som hoppas
   över när den nya designen är på. En Hämta direkt-order har inga fraktval och
   visar inte avsnittet alls – felet syns först på en vanlig order.

   Formen är mockupens .csd-opt, som i mockups/tema/kassa.html ritar just en
   fraktrad: prick, namn med undertext, och priset längst ut. Gruppens rubrik
   är .csd-kicker. Skillnaden mot mockupen är återigen markupen: namn,
   undertext och pris ligger alla tre inuti etiketten, så etiketten är ett eget
   rutnät med priset i en egen kolumn. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping ul#shipping_method,
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-ship-group-list{
  display:grid;gap:8px;margin:0;padding:0;list-style:none;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-ship-group-box + .csd-ship-group-box{
  margin-top:14px;
}
/* Gruppens rubrik. Måtten är .csd-kicker:s. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-ship-group-title{
  margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping li{
  display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:12px;
  margin:0;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-box);
  background:var(--card-bg);cursor:pointer;
}
/* Klassen sätts av layoutskriptets markActiveShipping(). */
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping li.csd-ship-active{
  border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue);
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping li > input[type="radio"]{
  width:18px;height:18px;margin:0;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping li > label{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main price" "sub price";
  align-items:start;column-gap:12px;margin:0;cursor:pointer;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-ship-main{
  grid-area:main;display:block;color:var(--navy);font-size:14px;font-weight:750;line-height:1.3;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-ship-sub{
  grid-area:sub;display:block;margin-top:2px;color:var(--muted);font-size:13px;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-ship-price{
  grid-area:price;align-self:center;justify-self:end;
  color:var(--navy);font-size:14px;font-weight:800;white-space:nowrap;
}
/* Raden som säger om ett fraktsätt är valt. Utan den vet kunden inte varför
   beställningen stoppas av validate_explicit_shipping_choice(). Måtten är
   .csd-hint:s, färgerna --ok och --bad. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-shipping-choice-hint{
  margin:10px 0 0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.45;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-shipping-choice-hint.is-confirmed{color:var(--ok)}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .csd-shipping-choice-hint.is-error{color:var(--bad)}

/* ---------- Betalvalen i kassan ----------
   Kassans layoutskript flyttar WooCommerce lista med betalsätt,
   ul.wc_payment_methods, ur sidospalten till avsnittet Betalning i
   huvudspalten. Efter flytten ligger listan utanför #payment, och därmed
   utanför varenda regel WooCommerce egen stilmall skriver under det id:t – den
   står helt utan form. Den nuvarande designen gav den sin form i det
   <style>-block Centralen_Checkout::customize_centralen_checkout_layout_ui()
   skriver ut, och det blocket hoppas över när den nya designen är på. Utan
   reglerna nedan är betalsätten en punktlista med webbläsarens egna
   radioknappar.

   Formen är mockupens .csd-tiles och .csd-opt, mått för mått, med en skillnad
   som markupen tvingar fram: mockupens ruta har tre barn – prick, logotyp och
   text – medan WooCommerce ruta har två, radioknappen och etiketten, med
   beskrivningen under dem. Rutnätet är därför 20 px och resten, och logotypen
   ligger inuti etiketten. Ingen regel här behöver !important: sedan listan
   lämnade #payment finns ingenting kvar att gå förbi. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
  margin:0;padding:0;border:0;list-style:none;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li{
  display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:12px;
  margin:0;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-box);
  background:var(--card-bg);cursor:pointer;
}
/* Klassen sätts av layoutskriptets markActivePayment(). Tonerna är
   .csd-opt.is-active:s, tecken för tecken. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li.csd-pay-active{
  border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue);
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li > input[type="radio"]{
  width:18px;height:18px;margin:0;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li > label{
  display:flex;align-items:center;gap:9px;min-width:0;margin:0;
  color:var(--navy);font-size:14px;font-weight:750;line-height:1.3;cursor:pointer;
}
/* Betalsättens ikoner ligger inuti etiketten och sätts av layoutskriptet.
   26 px är .csd-logo:s mått. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li > label img{
  width:26px;height:26px;flex:0 0 26px;object-fit:contain;
}
/* Beskrivningen under det valda betalsättet, och hinten som skrivs i stället
   när rutan är dold. Båda är .csd-note, samma ruta som mockupen ritar under
   betalvalen. display sätts med flit inte: WooCommerce egen checkout.js glider
   fram och tillbaka rutorna med inline-stil, och det är den som avgör vilken
   som syns. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li > .payment_box{
  grid-column:1 / -1;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments .payment_box,
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments .csd-pay-hint{
  margin-top:11px;padding:13px 15px;border:1px solid var(--blue-line);
  border-radius:var(--r-box);background:var(--blue-soft);
  color:var(--body-ink);font-size:13px;line-height:1.5;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments .payment_box > :last-child{margin-bottom:0}
/* Samma brytpunkt som .csd-tiles har: två rutor i bredd ryms inte längre. */
@media (max-width:900px){
  body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ---------- Sista raden i sammanfattningen ----------
   .csd-row lägger en hårlinje mellan rader, aldrig över den första. I
   ordersammanställningen står varulistan före raderna, och gränsen mellan dem
   ska synas på samma sätt. */
.csd-sum__rader > .csd-row:first-child{border-top:1px solid var(--hair)}

/* =============================================================
   FORUMET
   -------------------------------------------------------------
   Tillägg för includes/forum/ och templates/ui/forum*.php.

   Mockupen mockups/tema/forum.html ritar ett forum utan funktion:
   flikarna är <button>, trådraderna har inga modereringsknappar, det finns
   ingen sidbrytning och ingen rapportruta. Allt det behövs i ett riktigt
   forum, och reglerna nedan är till för just de tillskotten. Komponenterna
   mockupen redan har – .csd-thread, .csd-post, .csd-tabs, .csd-badge,
   .csd-panel, .csd-note, .csd-textarea, .csd-select, .csd-step – används som
   de är och rörs inte här.

   Inga nya mått är påhittade. Varje storlek, färg och rundning nedan är
   hämtad ur en regel som redan står i filen; var och en pekas ut i
   kommentaren.
   ============================================================= */

/* ---------- Kategoriflikarna ----------
   Mockupens flikar är <button> i en <style> utan mål. I butiken är de länkar
   till ?csd_kat=..., så att en kategori går att dela och att bakåtknappen
   fungerar. Formen är .csd-tabs button:s egen, rad för rad. */
.csd-tabs .csd-tab{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--navy);font-size:13px;font-weight:700;text-decoration:none;
}
.csd-tabs .csd-tab:hover{border-color:var(--blue);color:var(--blue)}
.csd-tabs .csd-tab.is-on{border-color:var(--navy);background:var(--navy);color:#fff}

/* ---------- Modereringsraden ----------
   Knapparna är egna små formulär, ett per åtgärd, eftersom varje åtgärd har
   sin egen nonce. Formuläret ska inte synas: det är knappen som är
   gränssnittet. Raden ligger under trådraden och inte i den, för en <button>
   får inte stå inuti en <a>.

   Måtten är .csd-post__acts:s egna – samma 8 px mellanrum och samma 10 px
   ovanför – och knapparnas form är .csd-post__acts button rad för rad.
   .csd-post__acts button är en ättlingsväljare och träffar därför redan
   knapparna inuti formulären i ett inlägg; bara raden i trådlistan behöver
   egna regler. */
.csd-forum-modrad{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:0 0 3px}
.csd-post__acts{flex-wrap:wrap}
.csd-forum-mod{display:inline-block;margin:0}
.csd-forum-modrad button{
  min-height:32px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;
}
.csd-forum-modrad button:hover,.csd-post__acts button:hover{border-color:var(--blue);color:var(--blue)}
.csd-forum-modrad button[disabled],.csd-post__acts button[disabled]{opacity:.55;cursor:default}
/* .csd-thread + .csd-thread lägger hårlinjen mellan två trådrader. Ligger en
   modereringsrad emellan bryts kedjan, och linjen får sättas här i stället. */
.csd-forum-modrad + .csd-thread{border-top:1px solid var(--hair)}

/* ---------- Trådar och inlägg i särskilda lägen ----------
   Mockupen tonar den egna kötråden med opacity:.72. Samma dämpning används
   för det en moderator dolt, plus varningsramens färg ur .csd-panel--warn så
   att det syns att raden inte är som de andra. */
.csd-thread--ko{opacity:.72}
.csd-thread--dold,.csd-post--dold{opacity:.72}
.csd-post--dold{border-left:3px solid var(--warn-line);padding-left:11px}

/* ---------- Brickorna i trådens huvud ----------
   .csd-card__head är en flex-rad med två barn. Trådens högra barn kan vara
   flera brickor – kategori, fäst, låst, dold – och de ska ligga bredvid
   varandra och radbryta som .csd-thread b redan gör. */
.csd-forum-brickor{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ---------- Tillbakalänken ----------
   Ovanför tråden, i .csd-sub:s grad och färg. */
.csd-forum-tillbaka{margin:0 0 4px;font-size:13px}
.csd-forum-tillbaka a{color:var(--muted);text-decoration:none;font-weight:700}
.csd-forum-tillbaka a:hover{color:var(--blue)}

/* ---------- Sidbrytning ----------
   Finns inte i mockupen alls; ett forum utan sidbrytning skickar hela
   arkivet i varje sidladdning. Formen är .csd-tabs button:s, så att
   sidnumren känns igen som samma sorts kontroll som flikarna högre upp.
   Linjen ovanför är .csd-toolbar:s egen avgränsning. */
.csd-forum-sidor{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);
}
.csd-forum-sidor a,.csd-forum-sidor__nu,.csd-forum-sidor__av{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;font-size:13px;font-weight:700;text-decoration:none;
}
.csd-forum-sidor a{color:var(--navy)}
.csd-forum-sidor a:hover{border-color:var(--blue);color:var(--blue)}
.csd-forum-sidor__nu{border-color:var(--navy);background:var(--navy);color:#fff}
.csd-forum-sidor__av{color:#9793b3;background:#eae7f3;border-color:#eae7f3}

/* ---------- Rapportrutan ----------
   En <details>, alltså öppen och stängbar utan JavaScript. Sammanfattningen
   ser ut som en knapp i .csd-post__acts, och innehållet får .csd-acc__body:s
   luft. Markören döljs på samma sätt som i .csd-acc. */
.csd-forum-rapport{margin-top:10px}
.csd-forum-rapport > summary{
  display:inline-flex;align-items:center;min-height:32px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--muted);font-size:12px;font-weight:700;
  cursor:pointer;list-style:none;
}
.csd-forum-rapport > summary::-webkit-details-marker{display:none}
.csd-forum-rapport > summary:hover{border-color:var(--blue);color:var(--blue)}
.csd-forum-rapport form{margin-top:10px}
.csd-forum-rapport .csd-btn{margin-top:9px}
.csd-forum-rapporterad{font-weight:700}

/* Rapportskälet behöver inte .csd-textarea:s 120 px – det är en rad eller
   två. 54 px är .csd-search .csd-input:s höjd, alltså filens egen minsta
   fälthöjd. */
.csd-textarea--kort{min-height:54px}

/* ---------- Svarsformuläret ----------
   Marginalen mellan fälten är .csd-step h3:s nedre, 12 px. */
.csd-forum-form{margin:0}
.csd-forum-form .csd-input,.csd-forum-form .csd-select,.csd-forum-form .csd-textarea{margin-bottom:0}

/* ---------- Beskedet från skriptet ----------
   centralen-ui-forum.js skriver ett kort besked här när en åtgärd gått
   igenom eller misslyckats, i stället för att öppna en systemruta.
   Färgerna är .csd-note--ok och .csd-note--bad:s egna. */
.csd-forum-besked{margin:9px 0 0;font-size:13px;font-weight:700}
.csd-forum-besked--ok{color:var(--ok)}
.csd-forum-besked--fel{color:var(--bad)}

/* =============================================================
   BETALSIDORNA – tillägg för skarp kod

   Reglerna nedan hör till templates/ny-design/payment/. Mockuparna
   betala-bitcoin.html, betala-usdt.html, betala-monero.html och
   betalsida-lage.html löser tre saker med attribut i markupen som skarp kod
   inte kan ha där:

     1. Lägesväxlingen. Mockupen har en knapprad och en <style> som döljer allt
        utom det valda läget. I skarp kod är det servern eller AJAX-svaret som
        bestämmer läget, men mekaniken är densamma: data-mode på <body> och
        klasserna only-*.
     2. Inline-stilar. Mockupen skriver style="width:38px" och liknande direkt
        i markupen. Här är samma mått namngivna klasser i stället.
     3. Två färgteman. csd_get_payment_color_themes() har sex teman; fyra ligger
        redan högst upp i filen. Blått och Grönt saknades och fylls på här, med
        exakt samma hexvärden som adminsidan sparar. Här står också varför det
        sjunde valet, designens egna färger, inte har något block alls.

   Allt är scopat till .csd-betalsida eller till klassnamn som bara betalsidorna
   använder, så ingenting läcker till varukorgen, kassan eller forumet.
   ============================================================= */

/* ---------- De två färgteman som saknades ----------
   Samma form som blocken högst upp i filen, samma hexvärden som
   csd_get_payment_color_themes() i includes/admin/class-centralen-admin-pages-
   betalgateway.php. Ändras ett tema där ska motsvarande rad ändras här. */
body[data-tema="blatt"]{
  --card-bg:#e3f2fd;--line:#90caf9;--hair:#bbdefb;
  --blue-soft:#bbdefb;--blue-line:#2196f3;--accent-ink:#0d47a1;
  --navy:#0d47a1;--text:#1565c0;--muted:#1565c0;--body-ink:#1565c0;--mono-ink:#0d47a1;
  --soft:#e1f5fe;--blue:#2196f3;
  --pink:#2196f3;--pink-dark:#1976d2;
  --warn:#856404;--warn-soft:#fff3cd;--warn-line:#ffc107;
  --page:#d3e8fb;
  --shadow:0 10px 24px rgba(13,71,161,.12);
}
body[data-tema="gront"]{
  --card-bg:#e8f5e9;--line:#81c784;--hair:#c8e6c9;
  --blue-soft:#c8e6c9;--blue-line:#4caf50;--accent-ink:#1b5e20;
  --navy:#1b5e20;--text:#2e7d32;--muted:#2e7d32;--body-ink:#2e7d32;--mono-ink:#1b5e20;
  --soft:#e8f5e9;--blue:#4caf50;
  --pink:#4caf50;--pink-dark:#388e3c;
  --warn:#856404;--warn-soft:#fff3cd;--warn-line:#ffc107;
  --page:#dcefdd;
  --shadow:0 10px 24px rgba(27,94,32,.12);
}

/* ---------- Designens egna färger ----------
   body[data-tema="centralen"] har med flit INGET block. Ett block hade fått
   skriva av :root:s hexvärden, och då kan betalsidan glida ifrån resten av
   sajten så fort en av dem ändras – en ny lila på startsidan hade lämnat
   betalsidan kvar i den gamla. Utan block gäller :root, alltså exakt samma
   färger som startsidan, varukorgen och kassan hämtar. De kan inte glida isär
   eftersom det bara finns en uppsättning.

   Nyckeln sätts av Centralen_UI_Betalsida::tema() och är den nya designens
   förval. Den finns inte i csd_get_payment_color_themes(), så de gamla
   betalsidorna känner inte igen den och ritas som Standard, precis som i dag. */

/* ---------- Lägesväxlingen ----------
   Ett läge i taget: väntar, betalning detekterad, delbetalning eller klar.
   Mockupen har samma fyra rader i en <style> i sidhuvudet.

   Reglerna är scopade till .csd-betalsida, inte till <body> rakt av. Klasserna
   heter only-vantar och så vidare utan prefix – det är mockupens namn och de
   ska förbli desamma så att markupen går att jämföra rad för rad – men de är
   korta nog att kunna krocka med något annat på sajten. Utan scopet hade
   only-klar på en helt annan sida dolts av en regel härifrån. */
body.csd-betalsida:not([data-mode="vantar"]) .only-vantar,
body.csd-betalsida:not([data-mode="detekterad"]) .only-detekterad,
body.csd-betalsida:not([data-mode="delbetalning"]) .only-delbetalning,
body.csd-betalsida:not([data-mode="klar"]) .only-klar{display:none}

/* CryptoWoos egen döljklass. Den bor normalt i CryptoWoos stilmall, men
   Monero-sidan får inte hänga på att den filen laddas: polling.js styr sina två
   statusmeddelanden med just den här klassen, och syns de båda samtidigt står
   det både "inkommande transaktion" och "underbetalning" på sidan. */
body.csd-betalsida .cw-hidden{display:none}

/* ---------- CryptoWoo order-pay: WooCommerce-raden ovanför mallen ----------
   Woo skriver BESTÄLLNINGSNUMMER / DATUM / BETALNINGSMETOD som ul.order_details
   före vår betalsida. Den gamla payment-gateway.css dolde raden, men den
   stilmallen avköas när nya designen är på (stada_gammal_stil). Utan motsvarande
   regler här syns raden igen ovanför stegspåret.

   Temats innehållsytor nollas så stegspåret får samma luft som BTC/USDT-sidorna
   (csd-shell padding), utan tom gap där order_details låg. */
body.csd-ny-design.woocommerce-order-pay ul.order_details,
body.csd-ny-design.woocommerce-order-pay ul.order_details.wc-order-pay-fields{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  height:0 !important;
  overflow:hidden !important;
}
body.csd-ny-design.woocommerce-order-pay.csd-betalsida .site-main,
body.csd-ny-design.woocommerce-order-pay.csd-betalsida #primary,
body.csd-ny-design.woocommerce-order-pay.csd-betalsida #main,
body.csd-ny-design.woocommerce-order-pay.csd-betalsida .entry-content,
body.csd-ny-design.woocommerce-order-pay.csd-betalsida .content-area,
body.csd-ny-design.woocommerce-order-pay.csd-betalsida article,
body.csd-ny-design.woocommerce-order-pay.csd-betalsida .entry-header{
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  margin-bottom:0;
}
body.csd-ny-design.woocommerce-order-pay .centralen-cryptowoo-payment-container.csd-shell{
  padding-top:22px;
  margin-top:0;
}
body.csd-ny-design.woocommerce-order-pay .centralen-cryptowoo-payment-container .csd-steps{
  margin-top:0;
  margin-bottom:18px;
}
@media (max-width:620px){
  body.csd-ny-design.woocommerce-order-pay .centralen-cryptowoo-payment-container.csd-shell{
    padding-top:16px;
  }
  body.csd-ny-design.woocommerce-order-pay .centralen-cryptowoo-payment-container .csd-steps{
    margin-bottom:14px;
  }
}

/* ---------- Betalsidans egen ram ----------
   Grundregeln lämnar 88 px i nederkant åt de fasta notisraderna. Betalsidan har
   inga sådana rader – den har ingen meny och ingen sidfot alls – och tomrummet
   blir bara en lång tom yta under kortet. */
body.csd-betalsida{padding-bottom:28px}

/* ---------- Namngivna mått i stället för mockupens inline-stilar ---------- */

/* Logotyp och rubrik i kortets huvud. Mockupen: style="display:flex;
   align-items:center;gap:12px". */
.csd-card__headline{display:flex;align-items:center;gap:12px;min-width:0}

/* Myntlogotypen i kortets huvud är större och rund, inte den 26 px stora
   fyrkant .csd-logo är i produktlistor. Mockupen: style="width:38px;height:38px;
   border-radius:50%;font-size:19px". */
.csd-logo--rund{width:38px;height:38px;flex:0 0 38px;border-radius:50%;font-size:19px}

/* Avståndet ner till första rutan i betalkortet. Mockupen: style="margin-top:18px". */
.csd-stack--betal{margin-top:18px}

/* Notis som följer direkt på rutan ovanför. Mockupen: style="margin-top:12px",
   och 14 px i sidospalten där raderna står tätare. Sidokortets sista block är
   notisen (ingen .csd-trust under); margin-top här är enda luften ovanför den. */
.csd-note--luft{margin-top:12px}
.csd-card--side .csd-note--luft{margin-top:14px}

/* Mockupens <div style="height:14px"></div> mellan QR-koden och raderna. */
.csd-luft{height:14px}

/* QR-rubriken i sidospalten. Mockupen: style="margin-bottom:13px". */
.csd-card__head--qr{margin-bottom:13px}

/* ---------- Visuellt dolda element ----------
   Monero-sidan måste behålla några element som CryptoWoos polling.js skriver
   till – #cw-unconfirmed, #cw-confirmed och nanobarens #progress – men som inte
   finns i den nya designen. De tas inte bort, för då kraschar skriptet mitt i
   en betalning; de ställs undan. display:none hade dugt här, men mönstret nedan
   är det som fungerar även för element ett skript vill mäta. */
.csd-dold{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- QR-koden på Monero-sidan ----------
   CryptoWoo ritar koden i webbläsaren med sitt eget qrcode.js och lägger både
   en <canvas> och en <img> i #qrcode; den ena är reserv för den andra. Ramen är
   .csd-qr__frame precis som på de andra betalsidorna, men bilden kommer inte
   från oss och har därför inte klassen .csd-qr__img.

   Länken runt koden finns kvar för CryptoWoos BCH-skript. Den ska inte se ut
   som en länk och inte gå att klicka på av misstag.

   Bredden är auto och inte 198 px som på våra egna betalsidor. CryptoWoos kod
   är 140 px, så ett låst 198-mått hade bara lagt 29 px dött utrymme på var
   sida om mönstret. Se avsnittet "Luften runt Monerokoden" längre ner. */
#qrcode{display:block;width:auto;margin:0 auto;line-height:0}
#qrcode canvas,#qrcode img{display:block;margin:0 auto;max-width:100%;height:auto}
.csd-qr__protokoll{display:block;text-decoration:none;pointer-events:none;color:inherit}

/* Segmentväljaren styrs av CryptoWoos inline-skript, som markerar det valda
   läget med aria-pressed i stället för klassen is-active. Samma utseende. */
.csd-seg button[aria-pressed="true"]{background:#fff;color:#2a17a8;box-shadow:0 1px 3px rgba(42,23,168,.18)}

/* ---------- Kopieringsknappar som är länkar ----------
   På Monero-sidan är kopieringsknapparna <a> och inte <button>: CryptoWoos
   polling.js binder sina lyssnare på #copy_address_a och #copy_amount_a och
   skriver kvittensen i .cw-tt-info inuti dem. Formen ska ändå vara knappens. */
a.csd-btn--copy,a.csd-address__copy{text-decoration:none}
a.csd-address__copy{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:106px;padding:0 14px;
}
.csd-address__copy .cw-tt-info,.csd-btn--copy .cw-tt-info{font:inherit;color:inherit}

/* Raden med CryptoWoos egna knappar: Trezor, "anslut plånbok" och länken till
   blockutforskaren. De ritas bara när butiken slagit på dem. */
.csd-betal-extra{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px}
.csd-betal-senare{margin-top:16px;text-align:center}

/* ---------- Lägessidan ----------
   csd-back ligger under kortet på en sida utan sidhuvud, och behöver därför
   lite mer luft än de 10 px klassen har inne i temat. */
body.csd-betalsida .csd-back{margin-top:16px}

/* =============================================================
   TILLÄGG: VARUKORGENS TVÅ SPÄRRNOTISER

   Eget avsnitt sist i filen, av samma skäl som tilläggen ovan, och liksom de
   bara till för skarp kod – mockupen ritar inga WooCommerce-notiser.

   Två notiser i varukorgen ritas av pluginet självt och lämnas till
   WooCommerce notisflöde med wc_add_notice(). Markupen kommer alltså från oss,
   men rutan runt den från Woo:

     .csd-cart-minimum-warning   Centralen_Checkout::notify_minimum_purchase_cart()
                                 Typ "error", hamnar i ul.woocommerce-error.
     .csd-cart-location-warning  Centralen_Location_Stock::notify_impossible_cart()
                                 Typ "notice", hamnar i div.woocommerce-info.

   Formen låg tidigare i Centralen_Checkout::cart_page_styles(). Den metoden
   lämnar numera tidigt när förhandsvisningen är på – samma tidiga return som
   Centralen_Location_Stock::product_page_styles() – och utan reglerna nedan
   hade de två notiserna stått som naken text mitt i den nya varukorgen.
   Kommentaren i avsnittet "TILLÄGG: VARUKORGEN OCH KASSAN" ovan beskriver
   läget före den ändringen; dess regler behövs inte längre för att väga upp
   inline-stilen, men de skadar inte och står kvar.

   Ingen färg är vald här. Ram, bakgrund och textfärg kommer ur avsnittet
   "WooCommerce notiser" ovan – error får --bad, info den blå grundtonen – och
   allt nedan ärver den med inherit. Notisen byter alltså färg med sin
   behållare, precis som .csd-note gör med sina lägen.

   Måtten är .csd-note:s egna: 11 px mellan ikon och text, ikonen 20 px i en
   vit cirkel, rubriken 13,5 px och brödtexten 13 px med radavståndet 1,5.
   4 px över en följdrad är .csd-sub:s, 9px/11px vaddning .csd-note--slim:s och
   12 px finstilt .csd-mid__foot:s. Undantaget är förloppsindikatorn, som ingen
   komponent i designen motsvarar: dess höjd och toppmarginal är kvar från
   regeln den ersätter, medan färgerna är palettens --bad-line och --pink.
   ============================================================= */

/* Woos notis är en flexrad. Rutan ska ta hela bredden och inte dela rad med
   något annat – de här två notiserna har ingen knapp bredvid sig. */
body.csd-ny-design .woocommerce-error .csd-cart-minimum-warning,
body.csd-ny-design .woocommerce-info .csd-cart-location-warning{
  display:grid;flex:1 1 100%;width:100%;
  grid-template-columns:20px minmax(0,1fr);column-gap:11px;align-items:start;
  color:inherit;font-size:13px;line-height:1.5;
}
body.csd-ny-design .woocommerce-error .csd-cart-minimum-warning{
  grid-template-areas:"icon title" "icon intro" "bar bar" "legend legend";
}
body.csd-ny-design .woocommerce-info .csd-cart-location-warning{
  grid-template-areas:"icon title" "icon intro" "list list";
}

/* Ikonen är .csd-note__icon, fast ritad med ::before eftersom markupen inte har
   något eget element för den. Woos egen ::before är redan avstängd ovan. */
body.csd-ny-design .woocommerce-error .csd-cart-minimum-warning::before,
body.csd-ny-design .woocommerce-info .csd-cart-location-warning::before{
  content:"!";grid-area:icon;
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#fff;color:inherit;font-size:12px;font-weight:800;line-height:1;
}

/* Rubriken är ett strong och är fet av sig själv, precis som .csd-note b. */
body.csd-ny-design .csd-cart-minimum-warning__title,
body.csd-ny-design .csd-cart-location-warning__title{
  display:block;grid-area:title;margin:0;color:inherit;font-size:13.5px;
}
body.csd-ny-design .csd-cart-minimum-warning__intro,
body.csd-ny-design .csd-cart-location-warning__intro{
  display:block;grid-area:intro;margin:4px 0 0;color:inherit;
}

/* Förloppsindikatorn. Bredden på i-elementet sätts av PHP som style-attribut
   och är den enda uppgiften i notisen som räknas fram per varukorg. */
body.csd-ny-design .csd-cart-minimum-warning__bar{
  display:block;grid-area:bar;height:7px;margin:12px 0 0;overflow:hidden;
  border-radius:var(--r-pill);background:var(--bad-line);
}
body.csd-ny-design .csd-cart-minimum-warning__bar i{
  display:block;height:100%;border-radius:var(--r-pill);background:var(--pink);
}
body.csd-ny-design .csd-cart-minimum-warning__legend{
  display:flex;grid-area:legend;justify-content:space-between;gap:11px;
  margin:4px 0 0;color:inherit;font-size:12px;
}

/* Listan över vad som finns var. Två spalter som förut: raderna är korta och
   en enda spalt hade gjort notisen onödigt hög. */
body.csd-ny-design .csd-cart-location-warning ul{
  display:grid;grid-area:list;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 11px;margin:12px 0 0;padding:0;list-style:none;
}
body.csd-ny-design .csd-cart-location-warning li{
  display:flex;min-width:0;align-items:center;justify-content:space-between;
  gap:11px;margin:0;padding:9px 11px;list-style:none;
  border:1px solid var(--line);border-radius:var(--r-box);background:var(--card-bg);
}
body.csd-ny-design .csd-cart-location-warning li strong{flex:1 1 auto;min-width:0;color:var(--navy)}
body.csd-ny-design .csd-cart-location-warning li span{flex:0 0 auto;color:var(--muted);text-align:right}


/* =============================================================
   KORTBETALNINGSSIDAN – tillägg för skarp kod

   Reglerna nedan hör till templates/ny-design/payment/betalsida-kort.php och
   mockupen mockups/tema/betala-kort.html. Guiden (.csd-guide),
   leverantörsbrickorna (.csd-opt, .csd-tiles) och avgiftsraderna (.csd-row,
   .csd-total) fanns redan i filen; det som saknades är bara det mockupen löser
   med attribut i markupen och som skarp kod inte kan ha där.

   Allt är scopat till .csd-betalsida eller till klassnamn som bara
   kortbetalsidan använder.
   ============================================================= */

/* ---------- Lägesväxlingen, kortsidans två egna lägen ----------
   Kryptosidorna har vantar, detekterad, delbetalning och klar. Kortsidan har
   guide och kontroll i stället för de tre första; delbetalning delar de båda.
   Samma mekanik och samma scope som blocket längre upp i filen. */
body.csd-betalsida:not([data-mode="guide"]) .only-guide,
body.csd-betalsida:not([data-mode="kontroll"]) .only-kontroll{display:none}

/* ---------- hidden på element som har ett eget display ----------
   Avgiftsraden, knappen och felrutan döljs och visas med attributet hidden.
   Webbläsarens egen regel [hidden]{display:none} kommer ur UA-stilmallen och
   förlorar mot .csd-row{display:flex} här i filen, så raden hade synts ändå.
   Reglerna måste alltså stå här, och efter dem de gäller. */
.csd-row[hidden],
.csd-note[hidden],
.csd-btn[hidden]{display:none}

/* ---------- Namngivna mått i stället för mockupens inline-stilar ---------- */

/* Kortlogotypen i kortets huvud. .csd-logo--rund är skriven för mynttecknen och
   sätter 19 px; "VISA" är fyra bokstäver och får mockupens font-size:10px. */
.csd-logo--rund.csd-logo--card{font-size:10px}

/* Rubriken "Att betala" i sidospalten. Mockupen: style="margin-bottom:12px". */
.csd-card__head--summa{margin-bottom:12px}

/* Rutorna och knappen i sidospalten. Mockupen: style="margin-top:14px". */
.csd-panel--luft{margin-top:14px}
.csd-btn--luft{margin-top:14px}

/* ---------- Leverantörsbrickan som knapp ----------
   Mockupen ritar brickan som en div. Valet styr både guiden och priset och
   måste gå att nå med tangentbordet, så i skarp kod är den en button. Det som
   står här återställer bara det webbläsaren gör med en knapp: egen typografi,
   egen textjustering och en bredd som krymper efter innehållet. */
button.csd-opt{
  width:100%;font:inherit;color:inherit;text-align:left;
  -webkit-appearance:none;appearance:none;
}
button.csd-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Leverantörens egen ikon, när administratören lagt in en adress till den.
   Rutan är .csd-logo:s 26 px; bilden får fylla den utan att beskäras. */
.csd-logo__bild{width:100%;height:100%;object-fit:contain;border-radius:5px}

/* ---------- Skärmbilden i guiden ----------
   .csd-guide__img är en streckad platshållare på 150 px i mockupen. Ligger det
   en riktig skärmbild i steget byts strecken mot en hel ram och höjden släpps
   fri, med ett tak så att en hög bild inte trycker ner resten av guiden. */
.csd-guide__img--bild{height:auto;min-height:150px;padding:12px;border-style:solid}
.csd-guide__img--bild img{
  display:block;max-width:100%;max-height:320px;
  object-fit:contain;border-radius:8px;
}

/* Bläddringen är slut i båda ändar på en guide med ett enda steg. */
.csd-guide__nav button[disabled]{opacity:.35;cursor:not-allowed}

/* =============================================================
   RECENSIONSFLIKEN PÅ PRODUKTSIDAN – tillägg för skarp kod

   Eget avsnitt sist i filen, av samma skäl som tilläggen ovan: markupen
   kommer inte från oss. templates/woocommerce/single-product.php ritar
   betygsraden själv och lämnar sedan över till comments_template(), som i sin
   tur laddar WooCommerce single-product-reviews.php. Allt den mallen skriver –
   rubriken, <ol class="commentlist"> och hela formuläret "Lägg till en
   recension" – bär WooCommerce och WordPress egna klassnamn. Bara själva
   recensionsraden är vår, templates/woocommerce/single-product/review.php, och
   den har haft sina regler sedan tidigare (.csd-review längre upp).

   Reglerna ligger därför under body.csd-ny-design, som bara sätts på sidor den
   nya designen har tagit över, precis som WooCommerce-avsnitten ovan.

   De är dessutom skrivna med selektorer långa nog att vinna över
   woocommerce.css oavsett i vilken ordning filerna läses. Woo når ner till
   (2,2,2) med väljare som ".woocommerce #reviews #comments ol.commentlist li",
   och en regel som bara hette .csd-review hade förlorat mot den. Det är också
   därför recensionens egen vaddning och hårlinje står här en gång till: i
   butiken slår Woos "padding:0;margin:0 0 20px;border:0" annars ut dem, och
   det är ingenting förhandsvisningsriggen kan visa eftersom den inte laddar
   Woos stilmall.

   Inga nya mått är påhittade. Varje storlek, färg och rundning nedan är hämtad
   ur en regel som redan står i filen; var och en pekas ut i kommentaren.
   ============================================================= */

/* ---------- Woos egen rubrik "4 omdömen för …" ----------
   Mockupen inleder fliken med betygsraden, och flikknappen strax ovanför säger
   redan "Recensioner (14)". Woos <h2> blir alltså en tredje rubrik på samma
   sak, i temats h2-stil mitt i designens kort.

   Den ställs undan här i stället för att filtreras bort i PHP. Filtret
   woocommerce_reviews_title finns, men det kommer bara åt texten i det ena av
   mallens två fall: Woo kör apply_filters() enbart när produkten har omdömen
   och betyg är påslaget, annars skrivs ordet "Reviews" rakt ut, förbi filtret.
   Just det fallet är inte något undantag här – single-product.php visar fliken
   så snart kommentarer är öppna, alltså också på en produkt utan en enda
   recension, och då är rubriken det första som möter kunden. En tom sträng ur
   filtret hade dessutom lämnat kvar ett <h2> med rubrikens marginaler.

   Undanställd och inte display:none: rubriken är avsnittets enda överskrift i
   dokumentet och ska finnas kvar för skärmläsare. Samma mönster som .csd-dold
   ovan, rad för rad. */
body.csd-ny-design #reviews .woocommerce-Reviews-title{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Recensionslistan ----------
   Listan är en <ol> och behåller webbläsarens padding-inline-start:40px, så
   recensionerna börjar fyra centimeter in medan mockupen har dem kant i kant
   med kortets övriga innehåll. Woos stilmall nollställer list-style och margin
   men aldrig indraget. */
body.csd-ny-design #reviews #comments ol.commentlist{
  margin:0;padding:0;list-style:none;background:none;
}
/* Recensionsraden. Samma vaddning och hårlinje som .csd-review ovan, upprepade
   här enbart för att vinna över woocommerce.css (se avsnittets huvud). */
body.csd-ny-design #reviews #comments ol.commentlist li.csd-review{
  margin:0;padding:14px 0;border:0;background:none;list-style:none;
}
body.csd-ny-design #reviews #comments ol.commentlist li.csd-review + li.csd-review{
  border-top:1px solid var(--hair);
}
/* Woos två besked i listans ställe: ingen recension ännu, och "bara köpare får
   recensera". Nedtonad brödtext i .csd-hint:s grad och färg. */
body.csd-ny-design #reviews .woocommerce-noreviews,
body.csd-ny-design #reviews .woocommerce-verification-required{
  margin:0;color:var(--muted);font-size:13px;
}

/* ---------- Formuläret "Lägg till en recension" ----------
   Finns inte i mockupen – den ritar bara lästa recensioner – men det måste
   finnas i butiken. Förlagan är tävlingens gissningsformulär, som är samma
   sorts kommentarsformulär och som får designens klasser satta från PHP i
   Centralen_UI_Tavling::formularargument(). Här går inte den vägen: markupen
   byggs av WordPress comment_form() genom WooCommerce, och fälten bär deras
   klassnamn. Reglerna nedan ger dem .csd-label, .csd-input, .csd-textarea,
   .csd-select och .csd-btn:s utseende i stället, deklaration för deklaration.

   Formuläret skiljs från recensionerna med samma hårlinje som skiljer två
   recensioner åt, och 16 px luft – flikkortets eget avstånd mellan avsnitt
   (single-product.php skriver <div style="height:16px">). */
body.csd-ny-design #review_form_wrapper{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
}
body.csd-ny-design #review_form #respond{margin:0;padding:0;border:0;background:none}
body.csd-ny-design #review_form #respond .comment-form{margin:0}

/* Rubriken, i kortrubrikens grad: .csd-title--sm. Woo skriver den som <span>
   och en del teman som <h3>, därför display:block. */
body.csd-ny-design #review_form #respond .comment-reply-title{
  display:block;margin:0 0 12px;color:var(--navy);font-size:17px;font-weight:800;line-height:1.15;
}
/* "Avbryt svar" ligger inuti rubriken och är en länk, inte en rubrik: .csd-link. */
body.csd-ny-design #review_form #respond .comment-reply-title small{font-size:13px;font-weight:750}
body.csd-ny-design #review_form #respond .comment-reply-title small a{color:var(--blue);text-decoration:none}

/* Notisen över fälten, .csd-hint. */
body.csd-ny-design #review_form #respond .comment-notes{margin:0 0 12px;color:var(--muted);font-size:13px}

/* Ett fält per stycke i comment_form(). 12 px mellan fälten är avståndet
   tävlingens formulär redan använder (formularargument() skjuter in
   <div style="height:12px"> mellan sina fält). */
body.csd-ny-design #review_form #respond p,
body.csd-ny-design #review_form #respond .comment-form-rating{margin:0 0 12px}

/* Etiketterna: .csd-label. */
body.csd-ny-design #review_form #respond label{
  display:block;margin:0 0 6px;color:var(--navy);font-size:13px;font-weight:750;
}
/* Stjärnan för obligatoriskt fält är knallröd i Woo. Temats röda i stället. */
body.csd-ny-design #review_form #respond .required{color:var(--bad);text-decoration:none}

/* Namn, e-post och webbplats – de fält en utloggad besökare får: .csd-input.
   width:100% är inte bara utseende. Utan den behåller Woos <input size="30">
   och <textarea cols="45"> sin inneboende bredd, och textarean är då 351 px i
   ett kort som är 328 på en 390 px skärm – nio pixlars vågrät rullning på hela
   sidan. */
body.csd-ny-design #review_form #respond input[type="text"],
body.csd-ny-design #review_form #respond input[type="email"],
body.csd-ny-design #review_form #respond input[type="url"]{
  width:100%;max-width:100%;height:48px;padding:11px 14px;border:1px solid #cfcbe6;
  border-radius:11px;background:#fff;color:var(--text);font-family:inherit;font-size:15px;
}
/* Recensionstexten: .csd-textarea. Höjden är klassens 120 px och inte Woos
   #comment{height:75px}, som annars vinner på sin egen id-väljare. */
body.csd-ny-design #review_form #respond textarea{
  width:100%;max-width:100%;height:auto;min-height:120px;padding:12px 14px;
  border:1px solid #cfcbe6;border-radius:11px;background:#fff;color:var(--text);
  font-family:inherit;font-size:14.5px;line-height:1.55;resize:vertical;
}
/* Betygsväljaren: .csd-select. Woos eget single-product.js byter ut den mot en
   stjärnrad (p.stars) så fort skriptet körs, så select-regeln är läget utan
   skript. Stjärnraden ritar Woo själv och får bara ett fälts avstånd under sig. */
body.csd-ny-design #review_form #respond select{
  width:100%;max-width:100%;height:48px;padding:0 12px;border:1px solid #cfcbe6;
  border-radius:11px;background:#fff;color:var(--text);font-family:inherit;font-size:15px;
}
body.csd-ny-design #review_form #respond p.stars{margin:0 0 12px}

/* Samtyckesrutan: kryssrutan och dess etikett på samma rad, etiketten i
   finstilt som .csd-hint i stället för som en fältetikett. */
body.csd-ny-design #review_form #respond .comment-form-cookies-consent{
  display:flex;align-items:flex-start;gap:8px;
}
body.csd-ny-design #review_form #respond .comment-form-cookies-consent input{flex:0 0 auto;margin:0}
body.csd-ny-design #review_form #respond .comment-form-cookies-consent label{
  margin:0;color:var(--muted);font-size:13px;font-weight:650;
}

/* Skicka-knappen: .csd-btn--cta i den smala varianten .csd-btn--auto. Full
   bredd hade gett en rosa list tvärs över hela flikkortet, som spänner över
   båda spalterna på produktsidan. */
body.csd-ny-design #review_form #respond .form-submit{margin:0}
body.csd-ny-design #review_form #respond .form-submit input[type="submit"],
body.csd-ny-design #review_form #respond .form-submit button{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-height:56px;padding:0 34px;border:0;border-radius:var(--r-pill);
  background:var(--pink);color:var(--cta-ink,#fff);
  font-family:inherit;font-size:16.5px;font-weight:800;cursor:pointer;
}
body.csd-ny-design #review_form #respond .form-submit input[type="submit"]:hover,
body.csd-ny-design #review_form #respond .form-submit button:hover{background:var(--pink-dark)}

/* =============================================================
   KASSANS STEG 3 OCH SAMMANFATTNINGENS FOT
   -------------------------------------------------------------
   Fyra fel i kassan, alla bakom body.csd-ny-design: en utloggad kund
   får inte kroppsklassen och ser ingenting av det här avsnittet.

   Måtten är hämtade ur regler som redan står i filen; var och en
   pekas ut i kommentaren där den används.
   ============================================================= */

/* ---------- Rutnätets höjd ----------
   ul.wc_payment_methods är ett rutnät med två spalter (se avsnittet
   "Betalvalen i kassan" ovan). Ett rutnät sträcker som förval ut sina
   celler till radens höjd, och rutan i <li> centrerar sitt innehåll.
   Växte den valda rutan blev alltså grannen på samma rad exakt lika
   hög, med radioknapp och etikett svävande mitt i en tom låda.
   align-items:start låter varje ruta vara sitt eget innehåll högt. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods{
  align-items:start;
}

/* ---------- Beskrivningens plats ----------
   Mockupen har beskrivningen på ett enda ställe: en .csd-note i full
   bredd under hela rutnätet. Layoutskriptets syncNyDesignPayHint()
   flyttar rutorna till en hylla sist i listan – se doktexten där för
   varför de inte kan ligga kvar i sina <li>.

   display:contents gör hyllan till ingenting: rutorna blir egna fält
   direkt i rutnätet. Det är poängen. En dold ruta tar då inte upp
   någon rad alls, och rutnätet får ingen tom rad under sig när inget
   är valt. Regeln "> li > .payment_box{grid-column:1/-1}" i avsnittet
   "Betalvalen i kassan" träffar rutorna även här, så den valda rutan
   spänner över båda spalterna av sig själv.

   Avståndet upp till rutnätet blir rutnätets eget gap på 9 px. Hinten
   är ingen rutnätscell och har i stället margin-top:11px; de 2 px
   nedan gör att de två hamnar på samma ställe. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li.csd-pay-rutor{
  display:contents;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li.csd-pay-rutor > .payment_box{
  margin-top:2px;
}

/* ---------- Ramarna i sammanfattningen ----------
   Fraktraden är den enda raden i sammanfattningen som är en riktig
   tabell, se filhuvudet i templates/ny-design/checkout/review-order.php.
   Avsnittet "Fraktraden i ordersammanställningen" ovan nollar tabellen
   och raden men aldrig cellerna, och både WooCommerce egen stilmall och
   temat ritar en ram på th och td i en .shop_table. Det är den rutan
   som står runt ordet "Frakt", och den tomma rutan till höger är cellen
   med priset: fraktlistan som WooCommerce ritade i den har
   layoutskriptet flyttat till avsnittet Leverans, och innan kunden valt
   leverans finns inget pris att sätta dit.

   Cellerna ska bära radens text och ingenting annat. Måtten är
   .csd-row:s, precis som raden ovanför dem. */
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt th,
body.csd-ny-design.woocommerce-checkout #order_review .csd-sum__frakt td{
  padding:0 !important;border:0 !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important;
}
/* Texten syncSummaryShippingPrice() skriver i den tomma cellen. Tonen är
   .csd-row > span:first-child:s: det är ännu inget belopp. */
body.csd-ny-design.woocommerce-checkout #order_review .csd-summary-shipping-choose{
  color:var(--muted) !important;font-weight:400 !important;
}

/* ---------- Knappen "Lägg beställning" ----------
   Den nuvarande designen ger knappen full bredd i det <style>-block
   Centralen_Checkout::customize_centralen_checkout_layout_ui() skriver
   ut, och det blocket hoppas över när den nya designen är på. Regeln
   ovan tog färgen och formen men inte bredden, så knappen krympte till
   sin text och centrerades av WooCommerce egen .place-order. Sedan
   innehållsspalten blev 1080 px syns det tydligt.

   Mockupen har knappen som .csd-btn--cta: hela spaltens bredd, 56 px
   hög, 14 px under totalen. #payment nollställs samtidigt – WooCommerce
   egen stilmall ger den en grå platta med rundade hörn, och i den nya
   designen är sidospalten redan ett kort. */
body.csd-ny-design.woocommerce-checkout #order_review #payment{
  margin:0 !important;padding:0 !important;border:0 !important;
  border-radius:0 !important;background:none !important;
}
body.csd-ny-design.woocommerce-checkout #order_review #payment .place-order{
  margin:0 !important;padding:0 !important;text-align:left !important;
}
body.csd-ny-design.woocommerce-checkout #place_order{
  display:block !important;float:none !important;
  width:100% !important;max-width:none !important;min-width:0 !important;
  margin:14px 0 0 !important;padding:0 18px !important;border:0 !important;
}

/* ---------- Butikens egna meddelanden vid leveransvalen ----------
   Fältet "Anpassad varningstext" på Centralen → Deaddrop respektive
   Centralen → Spårbart.
   flyttaEgnaLeveransnotiser() i layoutskriptet flyttar dem sist i
   avsnittet Leverans; utan flytten hamnar de i .col-2, som är dold.

   Formen är .csd-note--warn: samma varningston de har i den nuvarande
   designen, men med designens ram, rundning och grader i stället för
   den blå listen i render_custom_shipping_field_toggle(). Ikonen är
   .csd-note__icon. Inget !important behövs: den blå listen står på
   klassen och den röda bakgrunden på id:t, och båda väger lättare än
   raderna nedan. Därför står id:na med. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .checkout-info-notice,
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping #custom-shipping-notice,
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping #sparbart-warning-notice{
  display:flex;align-items:flex-start;gap:11px;margin:10px 0 0;padding:13px 15px;
  border:1px solid var(--warn-line);border-radius:var(--r-box);
  background:var(--warn-soft);color:var(--warn);font-size:13px;line-height:1.5;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .checkout-info-notice .info-icon,
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping #custom-shipping-notice .info-icon,
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping #sparbart-warning-notice .info-icon{
  display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;margin:0;
  border-radius:50%;background:#fff;color:var(--warn);font-size:12px;font-weight:800;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-shipping .checkout-info-notice .info-text{
  flex:1 1 auto;min-width:0;
}

/* ---------- Leverans och Betalning innan de fyllts ----------
   templates/ny-design/checkout/form-checkout.php ritar de två avsnitten tomma
   och layoutskriptet flyttar dit WooCommerce listor. Fram tills flytten skett
   stod två numrerade rubriker utan innehåll, och kortet hoppade till när
   innehållet kom. Mallen sätter därför csd-kassa-vantar på avsnitten, och
   klassen tas av av skriptet så fort avsnittet är fyllt.

   Regeln nedan är samtidigt det sista av skyddsnätets fyra lager, det som inte
   behöver JavaScript alls: animationen har längden noll och fördröjningen fyra
   sekunder, och animation-fill-mode:both gör att from-läget gäller under
   fördröjningen och to-läget efter den. Kör inget skript – filen laddades
   inte, jQuery saknas, en tilläggsuppdatering har brutit något – blir
   avsnitten alltså synliga av sig själva efter fyra sekunder. De tre andra
   lagren ligger i skriptet, se visaKassansAvsnitt() i
   Centralen_Checkout::customize_centralen_checkout_layout_ui().

   visibility, inte display: avsnittet behåller sin plats i flödet, så kortet
   ändrar inte höjd i onödan, och till skillnad från display går visibility att
   animera i alla webbläsare butiken möter. */
@keyframes csd-kassa-avsnitt-fram{
  from{visibility:hidden;opacity:0}
  to{visibility:visible;opacity:1}
}
body.csd-ny-design.woocommerce-checkout .csd-step.csd-kassa-vantar{
  animation:csd-kassa-avsnitt-fram 0s linear 4s both;
}

/* ---------- Nödläget: flytten kom aldrig fram ----------
   Skriptet sätter csd-kassa-nodlage på <body> när tidsgränsen löpt ut och ett
   av avsnitten ändå står tomt. Då slutar döljningen längre upp i filen gälla –
   den som håller WooCommerce egna frakt- och betallistor osynliga i
   sidospalten medan kopian i huvudspalten används.

   Kunden ser då valen där WooCommerce ritade dem från början. Det ser inte ut
   som mockupen, men det går att välja frakt och betala, och det är hela
   poängen: ett kort som ser rätt ut men saknar betalvalen är värre än ett som
   ser fel ut och fungerar.

   En extra klass räcker för att väga tyngre än raderna den upphäver; de har
   samma två id och en klass mindre. Skriptet tar bort klassen igen om flytten
   skulle komma fram i efterhand.

   !important står här av samma skäl som på raderna den upphäver, och måste
   följa med dem: sedan de fick !important för att kunna slå butikens egen
   "Ytterligare CSS" räcker inte längre en extra klass ensam. Försvinner
   !important där ska det försvinna här också, samtidigt. */
body.csd-ny-design.woocommerce-checkout.csd-kassa-nodlage #order_review #payment > ul.wc_payment_methods,
body.csd-ny-design.woocommerce-checkout.csd-kassa-nodlage #order_review #payment > .payment_box,
body.csd-ny-design.woocommerce-checkout.csd-kassa-nodlage #order_review tr.woocommerce-shipping-totals td ul#shipping_method{
  display:block !important;
}

/* ---------- Monero-rutan i linje med de tre andra ----------
   Monero är det enda betalsättet som inte är vår egen gateway.
   Centralen_Checkout::customize_cryptowoo_monero_checkout_ui() skriver ut ett
   eget <style>-block för att tämja CryptoWoos markup, och det blocket hänger
   på en egen wp_footer-krok. Till skillnad från kassans stora <style>-block
   hoppas det alltså inte över när den nya designen är på, och två av dess
   rader slår igenom här:

     li[class*="payment_method_cryptowoo"] { padding-left: 0 !important }
     li[...] label .csd-xmr-checkout-icon  { width: 22px !important; height: 22px !important }

   Den nuvarande designen kommer undan: dess egna regler bär också !important
   och har högre specificitet. Den nya designens regler har inget !important
   och förlorade – Monero-rutan fick noll i vänstermarginal och drog in sin
   logotyp femton pixlar närmare kanten än de tre andra, mätbart 33 px mot 48.

   Raderna nedan lägger tillbaka mockupens mått. Selektorerna är den nya
   designens egna, med två klasser och ett element mer än CryptoWoo-blockets,
   och vinner därför trots att båda bär !important. Utanför .csd-kassa-payments
   ändras ingenting: CryptoWoos block får styra sin egen ruta som förut. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li[class*="payment_method_cryptowoo"],
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li[class*="payment_method_cryptocurrency"]{
  padding-left:15px !important;
}

/* ---------- Logotyperna, mockupens 26 px ----------
   .csd-logo i mockupen är 26 px, och regeln längre upp i filen sätter just
   det. Den gick aldrig fram: layoutskriptet skrev 22 px som inline-stil på
   varje ikon, och inline-stil vinner över stilmallen. Skriptet slutar skriva
   måttet i den nya designen, och Monero-ikonen behöver dessutom raden nedan
   för att komma förbi CryptoWoo-blockets egna 22 px.

   Alla bilder i etiketten tas med, inte bara den första. Kortbetalningens
   logotyp bär två kortmärken, och skulle en gateway någon gång rita ut en
   andra bild bredvid den vi sätter blir de två lika stora i stället för att
   den ena sticker ut och gör rutan högre än sina grannar.

   Kundens kassa rör de här raderna inte: hela avsnittet ligger bakom
   body.csd-ny-design, och skriptet skriver kvar sina 22 px där. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li > label img,
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li > label .csd-xmr-checkout-icon{
  width:26px !important;height:26px !important;flex:0 0 26px !important;
  object-fit:contain !important;
}

/* =============================================================
   RAPPORTERADE FEL – EGET AVSNITT
   -------------------------------------------------------------
   Två arbetsgångar skriver i den här filen samtidigt. Allt som hör
   till den här omgången rapporterade fel står här nere, i ett enda
   block sist i filen, så att den andra arbetsgången kan lägga sina
   rader där den vill utan att vi skriver över varandra.

   Samma spärr som resten av filen: varje väljare börjar på
   body.csd-ny-design, en kroppsklass bara en inloggad administratör
   med den nya designen påslagen får se. Kundens sidor är orörda.
   ============================================================= */

/* ---------- Knappen "Fortsätt till kassan" ----------
   Två fel i samma knapp, båda uppmätta i förhandsvisningsriggen vid
   1280 px med temats och WooCommerce egna stilmallar pålagda.

   1. TEXTEN SATT FÖR HÖGT. WooCommerce egen stilmall har
      ".woocommerce .wc-proceed-to-checkout a.checkout-button
      {display:block}". Den väger tre klasser och ett element och
      vinner därför över .csd-btn, som är en enda klass – och det är
      just .csd-btn som gör knappen till en flexruta med
      align-items:center. Utan flexen fanns ingenting som centrerade
      texten: knappen är 56 px hög av min-height medan textraden bara
      är 24,75 px, och de återstående 31 px lade sig allihop under
      texten. Vaddningen var alltså inte osymmetrisk, den fanns inte
      alls – knappen har padding:0 18px, och höjden kommer från
      min-height.

      Raden nedan lämnar bara tillbaka display. align-items och
      justify-content står kvar i .csd-btn och behöver inte upprepas.
      Inget !important: väljaren bär två klasser mer än Woos egen och
      vinner på specificitet.

   2. KNAPPEN KROCKADE MED RUTAN OVANFÖR. Mockupen har 14 px mellan
      "Totalt före frakt" och knappen, och .csd-sum__cta sätter dem.
      Regeln uppe i avsnittet om sammanfattningen i sidospalten nollar
      dock hela marginalen på omslaget för att bli av med Woos egen
      "padding:1em 0" och "margin-bottom:1em", och den nollan tog med
      sig designens egna 14 px på vägen: väljaren där bär tre klasser
      mot .csd-sum__cta:s en. Uppmätt avstånd före: 0 px.

      De 14 px läggs tillbaka här nere i stället för att ändras uppe i
      det andra avsnittet, så att de två arbetsgångarna inte skriver i
      samma rader. Väljaren är samma som nollställer, plus klassen
      .csd-sum__cta som omslaget redan bär – en klass mer, alltså
      tyngre, utan !important.

      Den avstängda knappen ("Åtgärda varukorgen först") ritas utan
      omslag och bär .csd-sum__cta själv. Den hade sina 14 px hela
      tiden och rörs inte av raden nedan. */
body.csd-ny-design.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:inline-flex;
}
body.csd-ny-design.woocommerce-cart .wc-proceed-to-checkout.csd-sum__cta{
  margin-top:14px;
}

/* ---------- Luften runt QR-koden ----------
   Uppmätt i förhandsvisningsriggen på betalsidan för Bitcoin, 1280 px,
   skala 1:1. Ovanför mönstret låg 29 px vitt: 10 px vaddning i
   .csd-qr__frame plus 18 px som kommer inifrån bilden. Under mönstret
   låg 28 px innan knapparna: 19 px inifrån bilden plus .csd-seg:s
   9 px marginal.

   DE 18–19 PX INIFRÅN BILDEN ÄR KODENS TYSTA ZON och rörs inte. Den
   ritas av vårt eget bibliotek: Centralen_UI_Betalsida::qr_svg() sätter
   $tyst = 4 och lägger fyra modulers vit ram runt mönstret inne i
   SVG:en, precis vad QR-standarden kräver för att en kamera ska hitta
   koden. Bilden är 198 px och mönstret cirka 35 moduler, alltså 4,6 px
   per modul och 18 px tyst zon. Den siffran ändras inte av en enda rad
   här nere – allt nedan ligger utanför bilden.

   1. RAMENS EGEN VADDNING blir 5 px i stället för 10. Fem och inte noll:
      ramen har border-radius 15 px, och en rundad hörnkant skär in
      cirka 4,1 px på varje led (14 - 14/√2, där 14 är radien innanför
      den 1 px breda ramen). Är vaddningen mindre än så sticker bildens
      fyrkantiga hörn ut genom den rundade ramen. 5 px är alltså det
      minsta måttet som håller kodens vita fyrkant innanför ramen.
      Vinsten: 10 px på höjden och 10 px på bredden.

   2. AVSTÅNDET NED TILL KNAPPARNA blir 0 i stället för 9 px. Knapparna
      ligger då kant i kant med bilden, men mellan dem och själva
      mönstret står kodens tysta zon kvar – 19 px vitt som ingen får
      skriva i, och som inte heller någon skriver i här. Vinsten: 9 px.

   BÅDA REGLERNA ÄR RIKTADE MOT VÅR EGEN KOD, INTE MONEROS. Monerosidan
   använder samma .csd-qr__frame och samma .csd-seg, men koden där ritas
   av CryptoWoos qrcode.js i en <canvas> under #qrcode, och den ritar
   INGEN tyst zon. Där är ramens vaddning det enda som skiljer mönstret
   från kanten, och den ska vara kvar. Därför:

     - vaddningen väljs med :has(> .csd-qr__img), alltså bara ramar som
       innehåller vår egen bild. Kan webbläsaren inte :has() hoppas
       raden över och ramen behåller sina 10 px – ingen kod blir
       oläsbar av att regeln uteblir.
     - knappraden väljs med .csd-qr__img + .csd-seg. På Monerosidan står
       #qrcode före .csd-seg, så väljaren träffar inte där.

   Ingen !important behövs: båda väljarna bär kroppsklassen och en
   klass mer än raderna de går före. */
body.csd-ny-design .csd-qr__frame:has(> .csd-qr__img){
  padding:5px;
}
body.csd-ny-design .csd-qr__frame > .csd-qr__img + .csd-seg{
  margin-top:0;
}

/* ---------- Luften runt Monerokoden ----------
   Avsnittet ovanför lämnade Monerosidan orörd, och det var rätt då. Men den
   sidan har ett eget fel som inte syntes förrän det mättes.

   Uppmätt på butikens riktiga betalsida (sidkällan från drugify.org, renderad
   lokalt med butikens egen CSS, 1280 px, skala 1:1):

     till vänster om mönstret   39 px
     till höger om mönstret     39 px
     ovanför mönstret           10 px
     ned till knappraden         9 px

   Fyra gånger mer luft på sidorna än upptill. Två mått samverkar, och båda är
   satta efter vår egen bild på Bitcoin- och USDT-sidorna, inte efter Moneros:
   #qrcode är låst till 198 px och .csd-seg är låst till 198 px. CryptoWoos
   qrcode.js ritar bara 140 px. De 58 px som blir över hamnar som dött utrymme
   på var sida om mönstret, 29 px vardera, ovanpå ramens 10 px vaddning.

   1. RUTAN OCH KNAPPRADEN FÅR FÖLJA INNEHÅLLET. #qrcode går från 198 px till
      auto och knappraden till max-content. Knappraden blir då 152,9 px, vilket
      är precis vad "Bara adress" och "Med belopp" behöver för att stå kvar på
      en rad, och den bestämmer i sin tur ramens bredd. Sidluften faller från
      39 px till 16,4 px av sig själv. min-width håller raden minst lika bred
      som koden, om texterna någon gång blir kortare.

   2. HÖJDEN MÖTER BREDDEN. Sex pixlar läggs över och under kodrutan, och
      avståndet ned till knappraden går från 9 px till 10 px. Luften kring
      mönstret blir 16,0 px upptill och nedtill mot 16,4 px på sidorna.

   Uppmätt efteråt, samma sida och samma skala: 16,4 / 16,4 / 16,0 / 16,0.

   TYSTA ZONEN BLIR STÖRRE, INTE MINDRE. CryptoWoo ritar ingen egen zon –
   mönstret går ända ut i canvasens kant – så ramens vaddning är allt koden
   har. Med 140 px kod är en modul 3,0 px. Uppmätt tyst zon före: 3,3 moduler
   ovanför mönstret. Efter: 5,3 moduler ovanför och 5,5 på sidorna. Standarden
   vill ha fyra, så sidan går från att ligga under kravet uppåt och nedåt till
   att klara det åt alla håll.

   Ramens egen vaddning rörs inte. Den står kvar på 10 px, så knappraden ligger
   kvar där den låg i förhållande till ramen.

   Reglerna är riktade mot #qrcode och #cw-qr-wrap, som bara CryptoWoo ritar.
   Våra egna betalsidor har .csd-qr__img i stället och träffas inte av en enda
   rad här. */
body.csd-ny-design .csd-qr__frame #qrcode{
  padding:6px 0;
}
body.csd-ny-design .csd-qr__frame #cw-qr-wrap + .csd-seg{
  width:max-content;min-width:140px;margin-top:10px;
}

/* ---------- Luften under de blå beskrivningsrutorna i kassan ----------
   LÄS DET HÄR INNAN RADERNA NEDAN ÄNDRAS. De är inte en gissad marginal,
   men de är heller inte en färdig diagnos, och skillnaden är viktig.

   DET SOM ÄR UTREDT OCH AVFÖRT. Misstanken var att avsnittet
   "Beskrivningens plats" ovan reserverar plats åt den längsta texten
   även när den korta visas. Det gör det inte. Rutorna ligger på en
   hylla, li.csd-pay-rutor, som har display:contents – hyllan är alltså
   inte något i layouten alls, och en dold ruta är inte ens en cell i
   rutnätet. Ingen regel i filen sätter min-height på rutan, på hyllan
   eller på avsnittet.

   Uppmätt i förhandsvisningsriggen, 1280 px, med temats och
   WooCommerce egna stilmallar pålagda och betalavsnittet uppbyggt precis
   som layoutskriptet lämnar det: den blå rutan slutar 620,0 px ner,
   avsnittet slutar på samma 620,0 – .csd-step:last-child nollar dess
   nedre vaddning – och kortet slutar 643,0. Mellanrummet är alltså
   22 px, vilket är exakt .csd-card:s egen nedre vaddning. Så här finns
   ingen extra luft att ta bort.

   DET SOM ÄNDÅ SYNS PÅ SKÄRMBILDERNA. Mätt i pixlar på de två bilderna,
   omräknat till kortets kända bredd, ligger avståndet på 47–55 px i
   stället för 22. Någonstans mellan 25 och 30 px kommer alltså från en
   stilmall som inte finns i det här repot – temats tilläggsmodul för
   WooCommerce är den troligaste, den laddas bara på den skarpa sajten.

   RADERNA NEDAN NOLLAR DE TRE STÄLLEN DÄR SÅDAN LUFT KAN SITTA: nedtill
   på avsnittet, nedtill på listan och nedtill på den synliga rutan.
   Designen räknar redan med noll på alla tre, så raderna kan inte flytta
   något som ska vara där – de kan bara hindra något utifrån från att
   lägga till.

   HOPPANDET KOMMER INTE TILLBAKA. Det som lagades i "Beskrivningens
   plats" är VAR rutan hamnar och VILKEN ruta som syns, och ingendera
   rörs här. Ingen av raderna nedan har med rutans höjd, plats eller
   synlighet att göra – de gäller uteslutande utrymmet EFTER den sista
   synliga raden i avsnittet. Byter man betalsätt är det fortfarande
   samma hylla, samma cell och samma display:contents som förut. */
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments{
  margin-bottom:0;padding-bottom:0;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments > ul.wc_payment_methods{
  margin-bottom:0;
}
body.csd-ny-design.woocommerce-checkout .csd-kassa-payments ul.wc_payment_methods > li.csd-pay-rutor > .payment_box{
  margin-bottom:0;
}

/* ---------- Flytande varukorg och betalningskort: skillnaderna mot mockupen ----------
   Stapeln, knappen, korten och snabbvyn är mockupens och står ovanför. Här står
   bara det som skarp markup behöver utöver den.

   Märket i betalningskortet innehåller ett tecken i mockupen (₿, 💳). Skarp kod
   har en riktig logotyp för betalsättet, hämtad ur
   get_payment_method_icon_url(). */
.csd-payfab__mark img{width:20px;height:20px;object-fit:contain;border-radius:4px}
@media (max-width:620px){
  .csd-payfab__mark img{width:17px;height:17px}
}

/* Mockupen visar snabbvyn öppen, som en av sidans lägesvarianter. I skarp kod
   öppnas den av Centralen_UI_Varukorgsknapp: klick på knappen, eller
   WooCommerce händelse added_to_cart när en vara lagts i korgen med ajax.
   Överlägget ligger alltså i sidan hela tiden och måste vara dolt tills dess.
   Klassen sätts på samma element som .csd-quick, därför :not() och inte en
   egen regel för det öppna läget – annars hade den senare av dem vunnit på
   filordning i stället för på avsikt. */
body.csd-ny-design .csd-quick:not(.is-open){display:none}
/* Sidan bakom ska inte gå att rulla medan snabbvyn ligger över den */
body.csd-snabbvy-oppen{overflow:hidden}
/* Brickan visar antalet varor. Tom varukorg får ingen nolla, men elementet
   måste stå kvar: WooCommerce fragmenthämtning byter ut brickan genom att slå
   upp den på sin väljare, och en bricka som tagits bort går inte att byta ut. */
.csd-fab__count--tom{display:none}
/* Spärrtexten står där kassalänken annars hade stått, med samma avstånd */
.csd-quick__sparr{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5;text-align:center}
.csd-quick__tom{margin:16px 0;text-align:center}
/* Kryssknappen på varuraden är en länk i skarp kod – wc_get_cart_remove_url()
   tar bort varan utan eget ajax-anrop – och en länk är varken centrerad eller
   lika hög som en knapp av sig själv. */
.csd-quick .csd-item__remove{
  display:grid;place-items:center;text-decoration:none;
}

/* =============================================================
   TILLÄGG: INLINE-STILAR FLYTTADE TILL KLASSER

   Avstånd och marginaler som tidigare låg i style-attribut i skarp markup
   (produktsidan, sortimentets sortering, tävlingens formulär och
   poängnotiserna). Måtten är kopierade ordagrant från attributen – inget
   får flytta en pixel. Ligger sist så att mockupkopian ovanför kan bytas
   ut utan att de här raderna blandas in.
   ============================================================= */

/* ---------- Produktsidans sidokort ----------
   Mockupen (och single-product.php) bar marginalerna i style-attribut.
   Basklasserna .csd-prod__sub / .csd-price / .csd-hint har andra mått som
   används i listor och kort, så sidokortet får egna modifierare. */
.csd-prod__sub--kort{margin:5px 0 0}
.csd-prod__betygrad{margin:7px 0 0}
.csd-prod__omdomen{margin-left:7px}
.csd-price--kort{margin:12px 0 0}
.csd-prose--kort{margin-top:13px}
.csd-hint--kort{margin:13px 0 0}
.csd-hint--kort-nasta{margin:3px 0 0}

/* 16 px luft i flikkortet. Basklassen .csd-luft är 14 px (betalsidorna). */
.csd-luft--16{height:16px}

/* Recensionshuvudet och snitttexten bredvid stjärnorna. */
.csd-card__head--recension{margin-bottom:6px}
.csd-review__snitt{
  margin-left:7px;color:var(--muted);font-size:12.5px;font-weight:650;
}

/* ---------- Sortimentets sorteringsruta ----------
   Valrutan ska inte dra ut över hela korthuvudet. */
.csd-select--sortering{max-width:240px}

/* ---------- Tävlingens formulärfält ----------
   12 px mellan namn/gissning och nästa fält. 14 px efter e-post använder
   den befintliga .csd-luft (height:14px) utan modifierare. */
.csd-luft--12{height:12px}

/* ---------- Poängnotiser i kassan ----------
   Tidigare utelämnades style-attributen helt under nya designen, så notiserna
   fick enbart .woocommerce-info:s yta (margin:0 0 14px, blå info). Klasserna
   markerar samma grepp utan attribut; deklarationerna speglar den ytan så att
   en framtida ändring av basklassen inte tyst ändrar poängraderna. Saldo-
   varianten får samma yta – den gamla grenens bootstrap-gröna låg bara i
   style-attributet och applicerades aldrig under csd-ny-design. */
body.csd-ny-design .csd-points-notis{
  margin:0 0 14px;padding:13px 15px;
  border:1px solid var(--blue-line);border-radius:var(--r-box);
  background:var(--blue-soft);color:var(--body-ink);
  font-size:13px;line-height:1.5;
}
body.csd-ny-design .csd-points-notis--saldo{
  margin:0 0 14px;padding:13px 15px;
  border:1px solid var(--blue-line);border-radius:var(--r-box);
  background:var(--blue-soft);color:var(--body-ink);
  font-size:13px;line-height:1.5;
}