/* ==========================================================================
   Likefixer – Visual Order Widget
   Fristående design. Allt är scopat till #lf-root så temat inte påverkas,
   och widgeten ser likadan ut oavsett tema.
   Skins: .lf-skin-dark (standard) och .lf-skin-light
   ========================================================================== */

/* [hidden] slås ut av varje display-regel som kommer efter det i CSS:en.
   Utan den här raden visas profilblocket, rutnätet och taktväljaren innan
   de har något att visa — den tomma cirkeln med "Byt"-knappen kom därifrån.
   Attributet ska betyda dolt, punkt. */
#lf-root [hidden] { display: none !important; }

#lf-root {
  --lf-acc:      #22d3ee;
  --lf-acc2:     #818cf8;
  --lf-grad:     linear-gradient(135deg, #22d3ee, #818cf8);
  --lf-radius:   18px;
  --lf-radius-s: 12px;

  /* Mörkt utseende (standard) — byggt kring logotypens marinblå #1b4a72.
     Notera att --lf-muted är ljusare än den vore mot svart: mot blått
     hamnade den gamla tonen på 3,0:1 i kontrast, under gränsen 4,5:1
     för läsbar brödtext. */
  --lf-bg:       #102c46;
  --lf-panel:    rgba(255, 255, 255, .06);
  --lf-border:   rgba(255, 255, 255, .14);
  --lf-text:     #eaf2fb;
  --lf-muted:    #a3b8d0;
  --lf-shadow:   0 24px 60px rgba(4, 16, 28, .5);

  max-width: 620px;
  margin: 0 auto;
  padding: 26px;
  border-radius: var(--lf-radius);
  background: var(--lf-bg);
  border: 1px solid var(--lf-border);
  box-shadow: var(--lf-shadow);
  color: var(--lf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#lf-root * { box-sizing: border-box; }
#lf-root button { font-family: inherit; }

#lf-root.lf-skin-light {
  --lf-bg:     #ffffff;
  --lf-panel:  #f6f7fb;
  --lf-border: #e3e6ef;
  --lf-text:   #111827;
  --lf-muted:  #6b7280;
  --lf-shadow: 0 12px 36px rgba(17, 24, 39, .09);
}

/* --------------------------------------------------- stegindikator ------ */
.lf-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.lf-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--lf-muted);
  white-space: nowrap; transition: color .25s;
}
.lf-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lf-panel); border: 1px solid var(--lf-border);
  font-size: 11.5px; font-weight: 700; transition: all .25s;
}
.lf-step.is-active { color: var(--lf-text); }
.lf-step.is-active b {
  background: var(--lf-grad); border-color: transparent; color: #06121a;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .14);
}
.lf-step.is-done b { background: rgba(34, 211, 238, .16); border-color: var(--lf-acc); color: var(--lf-acc); }
.lf-step-bar { flex: 1; height: 1px; background: var(--lf-border); }
@media (max-width: 420px) { .lf-step span, .lf-steps { font-size: 11.5px; } }

/* --------------------------------------------------------- sökfält ------ */
.lf-search-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--lf-panel); border: 1px solid var(--lf-border);
  border-radius: 100px; padding: 5px 18px;
  transition: border-color .18s, box-shadow .18s;
}
.lf-search-row:focus-within { border-color: var(--lf-acc); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12); }
.lf-at { color: var(--lf-muted); font-weight: 600; font-size: 15px; }
#lf-username {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--lf-text); font-size: 15px; font-weight: 500; padding: 11px 2px;
}
#lf-username::placeholder { color: var(--lf-muted); opacity: .7; }

/* Flatsome ger alla input-fält egen kant, skugga och bottenmarginal.
   Kanten skapar en ruta i rutan, och marginalen trycker fältet ur
   centrum i flexraden — align-items: center centrerar marginallådan,
   inte det synliga fältet. Nollställ uttryckligen; pillerraden runt
   omkring ÄR fältets utseende. */
#lf-root #lf-username,
#lf-root #lf-username:focus,
#lf-root #lf-username:hover {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* Samma bottenmarginal stör varje flexrad med fält i widgeten. */
#lf-root input { margin-bottom: 0 !important; }

.lf-admin-why {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  font-size: 11.5px; font-family: ui-monospace, Menlo, monospace;
  color: #fbbf24; background: rgba(251, 191, 36, .1);
  border: 1px dashed rgba(251, 191, 36, .4); border-radius: 7px;
}

/* Laddningsindikator for profiluppslaget */
.lf-spin {
  display: inline-block; width: 15px; height: 15px;
  margin-right: 9px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lf-rot .7s linear infinite;
}
@keyframes lf-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lf-spin { animation: none; } }

.lf-load-status {
  margin: 12px 0 0; text-align: center;
  font-size: 13px; color: var(--lf-muted);
  animation: lf-fade .4s ease;
}
@keyframes lf-fade { from { opacity: 0; } to { opacity: 1; } }

#lf-find, .lf-cart {
  border: none; cursor: pointer; font-weight: 700;
  background: var(--lf-grad); color: #06121a;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, opacity .18s;
}
#lf-find {
  width: 100%; margin-top: 11px; padding: 14px 20px;
  border-radius: 100px; font-size: 14.5px;
  box-shadow: 0 6px 20px rgba(34, 211, 238, .26);
}
#lf-find:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34, 211, 238, .36); }
#lf-find:disabled { opacity: .55; cursor: wait; transform: none; }

.lf-error {
  margin-top: 12px; padding: 11px 15px; border-radius: var(--lf-radius-s);
  font-size: 13.5px; color: #fca5a5;
  background: rgba(239, 68, 68, .09); border: 1px solid rgba(239, 68, 68, .22);
}
#lf-root.lf-skin-light .lf-error { color: #b42318; background: #fef3f2; border-color: #fecdca; }

/* ------------------------------------------------------ profilkort ------ */
.lf-profile {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--lf-border);
}
.lf-avatar {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--lf-panel); padding: 2px; border: 2px solid var(--lf-acc);
}
.lf-profile-info { flex: 1; min-width: 0; }
.lf-name { display: block; font-weight: 700; font-size: 15.5px; }
.lf-stats { display: block; font-size: 12.5px; color: var(--lf-muted); margin-top: 3px; }
.lf-change {
  flex-shrink: 0; cursor: pointer; white-space: nowrap;
  background: var(--lf-panel); border: 1px solid var(--lf-border); color: var(--lf-muted);
  border-radius: 100px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  transition: color .15s, border-color .15s;
}
.lf-change:hover { color: var(--lf-text); border-color: var(--lf-acc); }

/* ------------------------------------------------- bekräftelseruta ------ */
.lf-confirm {
  margin-bottom: 18px; padding: 14px 16px; border-radius: var(--lf-radius-s);
  font-size: 13.5px; line-height: 1.55;
  background: rgba(34, 211, 238, .07); border: 1px solid rgba(34, 211, 238, .2);
  color: var(--lf-text);
}
#lf-root.lf-skin-light .lf-confirm { background: #eff8ff; border-color: #b2ddff; }
.lf-verify { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lf-verify-link {
  align-self: flex-start; font-size: 13.5px; font-weight: 700;
  color: var(--lf-acc); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.lf-verify-link:hover { border-bottom-color: var(--lf-acc); }
.lf-verify-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.lf-verify-check input { width: 17px; height: 17px; accent-color: var(--lf-acc); cursor: pointer; }

/* ----------------------------------------------------- mediarutnät ------ */
.lf-grid-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--lf-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 11px;
}
.lf-selected { color: var(--lf-acc); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.lf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.lf-thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--lf-radius-s);
  overflow: hidden; cursor: pointer; padding: 0;
  border: 2px solid transparent; background: var(--lf-panel);
  transition: border-color .15s, transform .15s;
}
.lf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.lf-thumb:hover { transform: translateY(-2px); }
.lf-thumb:hover img { transform: scale(1.06); }
.lf-thumb.selected { border-color: var(--lf-acc); }
.lf-thumb:focus-visible { outline: none; border-color: var(--lf-acc); box-shadow: 0 0 0 3px rgba(34, 211, 238, .3); }
.lf-check {
  position: absolute; top: 7px; right: 7px; width: 23px; height: 23px; border-radius: 50%;
  background: var(--lf-grad); color: #06121a; font-size: 12px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(34, 211, 238, .45);
}
.lf-thumb.selected .lf-check { display: flex; animation: lf-pop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes lf-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lf-badge {
  position: absolute; bottom: 6px; left: 6px; font-size: 10.5px; font-weight: 800;
  padding: 3px 8px; border-radius: 7px; background: var(--lf-grad); color: #06121a;
}
.lf-badge.warn { background: #eab308; color: #000; }
.lf-thumb .lf-vid {
  position: absolute; top: 7px; left: 7px; width: 21px; height: 21px; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.lf-empty {
  padding: 20px; text-align: center; font-size: 13.5px; color: var(--lf-muted);
  background: var(--lf-panel); border: 1px dashed var(--lf-border); border-radius: var(--lf-radius-s);
}

/* ----------------------------------------------------------- paket ------ */
.lf-packages { margin-bottom: 20px; }

/* Paketvaljaren ar ett reglage, inte ett rutnat med kort. Rutnatet tog
   over halva mobilskarmen och tryckte ner kopknappen under vikningen. */
.lf-pack-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.lf-pack-label {
  font-size: 12px; font-weight: 600; color: var(--lf-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.lf-pack-read { display: flex; align-items: baseline; gap: 7px; }
.lf-pack-read strong {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--lf-text);
}
.lf-pack-read span { font-size: 13px; font-weight: 700; color: var(--lf-acc); }

/* Minutval for fordrojning */
.lf-delay-mins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lf-delay-min {
  padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 650;
  color: var(--lf-muted); background: var(--lf-panel);
  border: 1px solid var(--lf-border); border-radius: 100px;
  transition: color .16s, border-color .16s, background .16s;
}
.lf-delay-min:hover { color: var(--lf-text); border-color: rgba(34, 211, 238, .5); }
.lf-delay-min.selected { color: #06222c; background: var(--lf-acc); border-color: var(--lf-acc); }

/* Garantivaljaren: samma formsprak som fordelningsknapparna. */
.lf-gpick { margin-bottom: 20px; }
.lf-gpick-label {
  font-size: 12px; font-weight: 600; color: var(--lf-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px;
}
.lf-gpick-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .lf-gpick-opts { grid-template-columns: repeat(4, 1fr); } }
.lf-gpick-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 52px; padding: 9px 8px; cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 650; line-height: 1.3;
  color: var(--lf-muted); background: var(--lf-panel);
  border: 1px solid var(--lf-border); border-radius: var(--lf-radius-s);
  transition: color .16s, background .16s, border-color .16s;
}
.lf-gpick-opt:hover { color: var(--lf-text); border-color: rgba(34, 211, 238, .5); }
.lf-gpick-opt.selected { color: var(--lf-text); border-color: var(--lf-acc); background: rgba(34, 211, 238, .1); }
.lf-gpick-name { font-size: 12px; }
.lf-gpick-price { font-size: 11.5px; font-weight: 700; color: var(--lf-acc); }

/* Vad kopet bestar av, under totalbeloppet i den klibbiga listen. */
/* Gratis pafyllning, under beloppet i den klibbiga listen. Gront lases
   som "detta ar tryggt" och konkurrerar inte med kopknappen om
   uppmarksamheten — den ar redan sidans starkaste element. */
/* id-prefix: en generell #lf-root p-regel vann annars over klassen och
   gjorde texten vit — bocken syntes men inte fargen. */
#lf-root .lf-guarantee, .lf-guarantee {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #34d399 !important;
}
.lf-guarantee:empty { display: none; }
.lf-guarantee::before { content: "✓ "; }

/* Varfor kopknappen ar gra. Diskret men lasbar — den ska forklara,
   inte skalla. Tom rad tar ingen plats. */
.lf-why {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #fca5a5;
}
.lf-why:empty { display: none; }

.lf-total-sum {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lf-muted);
}
.lf-total-sum:empty { display: none; }
@media (max-width: 600px) { .lf-total-sum { font-size: 11.5px; } }

.lf-pack-input {
  width: 118px; padding: 6px 10px; text-align: right;
  font-size: 14px; font-weight: 700; color: var(--lf-text);
  background: var(--lf-panel); border: 1px solid var(--lf-border);
  border-radius: 9px; margin-left: auto;
  -moz-appearance: textfield;
}
.lf-pack-input::-webkit-outer-spin-button,
.lf-pack-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lf-pack-input:focus {
  outline: none; border-color: var(--lf-acc);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);
}

.lf-pack-slide { transition: opacity .16s; }
.lf-pack-slide.lf-dim { opacity: .38; }

.lf-pack-range, #lf-qty-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  outline: none; cursor: pointer; margin: 0;
}
.lf-pack-range::-webkit-slider-thumb, #lf-qty-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lf-acc); border: 3px solid var(--lf-panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  cursor: grab; transition: transform .12s;
}
.lf-pack-range::-webkit-slider-thumb:active,
#lf-qty-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.lf-pack-range::-moz-range-thumb, #lf-qty-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lf-acc); border: 3px solid var(--lf-panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45); cursor: grab;
}
.lf-pack-range:focus-visible, #lf-qty-range:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .3);
}

.lf-pack-ends {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--lf-muted); margin-top: 7px;
}

.lf-pack-custom {
  margin-top: 11px; padding: 8px 14px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--lf-muted);
  background: transparent; border: 1px dashed var(--lf-border);
  border-radius: 999px; transition: color .16s, border-color .16s;
}
.lf-pack-custom:hover { color: var(--lf-text); border-color: rgba(34, 211, 238, .55); }
.lf-pack-custom.selected {
  color: var(--lf-acc); border-color: var(--lf-acc);
  border-style: solid; background: rgba(34, 211, 238, .1);
}

/* Fordelning over valda inlagg */
.lf-dist { margin-bottom: 20px; }
/* Vaxlaren: tva sjalvstandiga knappar, ingen yttre ring.
   Ett piller inuti ett piller ar svart att fa snyggt — den inre formen
   maste centreras i den yttre, och minsta skillnad i padding syns som
   slarv. Tva knappar bredvid varandra har inget att centreras i, sa
   problemet uppstar inte: den valda ar fylld, den ovalda ar konturerad,
   och bada ar exakt lika stora. */
.lf-dist-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.lf-dist-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px;
  padding: 9px 12px; cursor: pointer;
  font-size: 13px; font-weight: 650; line-height: 1.25; text-align: center;
  color: var(--lf-muted);
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-s);
  transition: color .16s, background .16s, border-color .16s;
}
.lf-dist-btn:hover { color: var(--lf-text); border-color: rgba(34, 211, 238, .5); }
.lf-dist-btn.selected {
  color: #06222c;
  background: var(--lf-acc);
  border-color: var(--lf-acc);
}
@media (max-width: 400px) { .lf-dist-btn { font-size: 12.5px; padding: 9px 8px; } }

.lf-dist-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px; margin-bottom: 9px;
}
.lf-dist-row { display: flex; align-items: center; gap: 7px; }
.lf-dist-thumb {
  flex: 0 0 auto; width: 34px; height: 34px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--lf-muted);
  background: var(--lf-panel); border: 1px solid var(--lf-border);
  border-radius: 7px;
}
.lf-dist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-dist-input {
  width: 100%; min-width: 0; padding: 7px 9px;
  font-size: 13.5px; font-weight: 600; color: var(--lf-text);
  background: var(--lf-panel); border: 1px solid var(--lf-border);
  border-radius: 8px;
}
.lf-dist-input:focus {
  outline: none; border-color: var(--lf-acc);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);
}

.lf-dist-note { margin: 0; font-size: 12px; color: var(--lf-muted); }
.lf-dist-note.warn { color: #f0a02a; font-weight: 600; }
.lf-dist-note.ok { color: #2fbf71; font-weight: 600; }

.lf-qty { margin-bottom: 20px; }
.lf-qty-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--lf-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}
#lf-qty-input {
  width: 8ch; text-align: right; font-size: 20px; font-weight: 800;
  color: var(--lf-text); background: var(--lf-panel);
  border: 1px solid var(--lf-border); border-radius: 10px; padding: 6px 10px;
  text-transform: none; letter-spacing: 0;
}
#lf-qty-input:focus { outline: none; border-color: var(--lf-acc); box-shadow: 0 0 0 3px rgba(34, 211, 238, .14); }
.lf-range { width: 100%; accent-color: var(--lf-acc); cursor: pointer; margin-bottom: 10px; }
.lf-split { font-size: 12.5px; color: var(--lf-muted); }
.lf-split.warn { color: #fcd34d; }
#lf-root.lf-skin-light .lf-split.warn { color: #b54708; }

/* ----------------------------------------------------- kommentarer ------ */
.lf-comments { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.lf-hint { font-size: 12.5px; color: var(--lf-muted); margin: 0; }
.lf-comment-block {
  background: var(--lf-panel); border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-s); padding: 14px;
}
.lf-comment-label {
  font-size: 12px; color: var(--lf-muted); margin-bottom: 9px; font-weight: 600;
  /* En rad, klippt med … — ett 19-siffrigt video-id fick annars radbryta
     instruktionen och krocka med ta bort-krysset pa mobil. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-comment-ta {
  width: 100%; min-height: 76px; resize: vertical; font-family: inherit; font-size: 13.5px;
  color: var(--lf-text); background: var(--lf-bg);
  border: 1px solid var(--lf-border); border-radius: 9px; padding: 10px 12px;
  transition: border-color .16s;
}
.lf-comment-ta:focus { outline: none; border-color: var(--lf-acc); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); }

/* ---------------------------------------------------------- footer ------ */
/* Listen har tva rader: vad kopet bestar av, sedan belopp och knapp.
   Sammanfattningen forst eftersom den forklarar beloppet — laser man
   nedifran ser man priset utan att veta vad det galler. */
.lf-footer {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 17px 15px; border-radius: var(--lf-radius);
  background: var(--lf-panel); border: 1px solid rgba(34, 211, 238, .22);
}
/* Totalen ovanfor knappen pa ALLA skarmar. Sida vid sida lamnade
   beloppet i ett horn medan knappen tog resten — staplat far bada full
   bredd och blicken vandrar naturligt: vad -> pris -> kop. */
.lf-total-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
/* Vansterkolumnen far VAXA med innehallet men aldrig krympa knappen.
   Tidigare delade de utrymmet fritt: gick priset fran "53 kr" till
   "1 012 kr" tog totalen mer plats och "Lägg i varukorg" klamdes ihop,
   ibland till tva rader. Knappen ar det viktigaste elementet pa sidan
   och ska ha en bredd som inte beror pa hur manga siffror priset har. */
.lf-total {
  display: flex; flex-direction: row; align-items: baseline;
  justify-content: center; gap: 8px;
}
.lf-total-cap {
  font-size: 10px; font-weight: 700; color: var(--lf-muted);
  text-transform: uppercase; letter-spacing: .09em;
}
.lf-price { font-size: 24px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
/* Knappen far krympa till en golvbredd och sedan hellre bryta till egen
   rad an lagga sig over totalen. Med flex: 1 0 auto vagrade den krympa
   och sköt ut over beloppet nar utrymmet tog slut. */
.lf-cart {
  width: 100%;
  white-space: nowrap;
  padding: 15px 20px; border-radius: 14px; font-size: 15px; color: #06121a;
  box-shadow: 0 6px 20px rgba(34, 211, 238, .26);
}
.lf-cart:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34, 211, 238, .38); }
.lf-cart:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }

/* --------------------------------------------------------- trygghet ----- */
.lf-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  list-style: none; margin: 18px 0 0; padding: 0;
  font-size: 12px; font-weight: 600; color: var(--lf-muted);
}
.lf-trust li { display: flex; align-items: center; gap: 6px; }
.lf-trust li::before { content: "✓"; color: var(--lf-acc); font-weight: 800; }

/* ----------------------------------------------------------- mobil ------ */
@media (max-width: 520px) {
  /* Widgeten har egen ram OCH sidmarginal pa mobil. 18 px inuti ovanpa
     det ger tre lager luft mot skarmkanten pa en yta dar utrymmet ar
     dyrast — vilket tryckte ner kopknappen under vikningen. */
  #lf-root { padding: 13px; border-radius: 14px; }
  .lf-grid { gap: 7px; }
  .lf-packages, .lf-dist, .lf-qty { margin-bottom: 14px; }
  .lf-step { margin-bottom: 14px; }
  .lf-dist-rows { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
  .lf-pace-cards { margin: 0 -13px; padding-left: 13px; padding-right: 13px; }
  .lf-pace-cards .lf-pace-opt { min-width: 96px; padding: 12px; }
  .lf-pack-read strong { font-size: 20px; }
  .lf-price { font-size: 21px; }
  .lf-cart { padding: 14px 16px; font-size: 14.5px; min-width: 0; }
  /* Under 380 px ryms inte bada pa en rad utan att nagot ger efter.
     Da ar en staplad layout arligare an en hoptryckt knapp. */

  .lf-footer { position: sticky; bottom: 10px; z-index: 5; backdrop-filter: blur(12px); }
  /* Fyra punkter i flödande flex bryter till 1-2-1 — ser trasigt ut.
     Ett tvåkolumnsrutnät ger 2×2: förutsägbart och rakt oavsett hur
     långa texterna är. Vänsterställt inom kolumnen, kolumnerna
     centrerade som block. */
  .lf-trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 8px 18px;
    font-size: 11px;
  }
  .lf-trust li { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #lf-root *, #lf-root *::before { transition: none !important; animation: none !important; }
}

/* ---- Leveransbesked högst upp i widgeten ---- */
/* Grönt, inte cyan. Cyan är accentfärgen och används för det man kan
   klicka på; grönt läses som "detta fungerar" och konkurrerar inte med
   köpknappen om uppmärksamheten. */
.lf-delivery {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px 15px;
  border-radius: 11px;
  background: rgba(52, 211, 153, .10);
  border: 1px solid rgba(52, 211, 153, .30);
  font-size: 13.5px;
  line-height: 1.5;
  color: #86efac;
}
.lf-delivery strong { color: #bbf7d0; font-weight: 650; }

/* Utanför widgeten: egen kolumnbredd och luft ned till köpflödet. */
.lf-delivery--outside {
  max-width: 100%;
  margin: 18px 0 20px;
}
.lf-skin-light .lf-delivery,
.lf-delivery--outside {
  /* Fungerar mot både mörk och ljus bakgrund. */
}
.lf-delivery strong { font-weight: 650; }
.lf-delivery-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: lf-pulse 2.4s ease-out infinite;
}
@keyframes lf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-delivery-dot { animation: none; }
}

.lf-skin-light .lf-delivery {
  background: rgba(5, 150, 105, .08);
  border-color: rgba(5, 150, 105, .28);
  color: #047857;
}
.lf-skin-light .lf-delivery strong { color: #065f46; }

/* ---- Demoläge: omöjlig att missa ---- */
.lf-demo-banner {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(250, 204, 21, .12);
  border: 1px solid rgba(250, 204, 21, .4);
  color: #fde68a;
  font-size: 13px;
  line-height: 1.5;
}
.lf-demo-banner strong { color: #fcd34d; }
.lf-skin-light .lf-demo-banner { background: rgba(202, 138, 4, .1); color: #854d0e; }
.lf-skin-light .lf-demo-banner strong { color: #713f12; }

/* ---- Leveransrutan: texten ska flyta som en mening ----
   Utan detta blir varje textnod och <strong> ett eget flex-element,
   och meningen bryts sönder mitt i. */
.lf-delivery-text { flex: 1 1 auto; min-width: 0; }

/* ---- Landningssidor: centrerad kolumn i stället för WooCommerces 48 % ----
   WooCommerce floatar .summary till halva bredden för att lämna plats åt
   produktgalleriet. Vi har tagit bort galleriet, så halvan blir en smal
   remsa till vänster.

   !important är medvetet: WooCommerces egen regel
   (.woocommerce div.product div.summary) har tre klasser och vinner
   specificitetsjämförelsen mot allt rimligt vi kan skriva. Att bygga en
   ännu längre selektor skulle bara flytta problemet till nästa
   WooCommerce-uppdatering. Reglerna är hårt avgränsade till body.lf-landing,
   alltså bara sidor där widgeten faktiskt renderas. */
body.lf-landing div.product > div.summary,
body.lf-landing div.product > .summary,
body.lf-landing .woocommerce div.product div.summary {
  float: none !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Produktbehållaren ska inte heller vara halv.
   :not() är nödvändigt, inte kosmetik. Flatsome ger varje relaterad
   produkt klasserna "product-small col … product", så en oavgränsad
   regel på div.product träffar dem också — och tvingade var och en till
   100 % bredd. Resultatet blev en enda produkt per rad i jätteformat
   längst ned på sidan. */
body.lf-landing div.product:not(.col):not(.product-small) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Relaterade produkter: fyra i bredd på desktop, två på mobil.
   Fungerar även om temats kolumninställning skulle gå förlorad. */
body.lf-landing .related .row,
body.lf-landing .up-sells .row {
  display: flex !important;
  flex-wrap: wrap;
}
body.lf-landing .related .product-small.col,
body.lf-landing .up-sells .product-small.col {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}
@media (max-width: 849px) {
  body.lf-landing .related .product-small.col,
  body.lf-landing .up-sells .product-small.col {
    flex-basis: 50% !important; max-width: 50% !important; width: 50% !important;
  }
}

/* Rensa WooCommerces clearfix som annars lämnar tomrum efter galleriet. */
body.lf-landing div.product:not(.col):not(.product-small) > div.images { display: none !important; }

/* Beskrivning, flikar och relaterat följer samma kolumn. */
body.lf-landing div.product .woocommerce-tabs,
body.lf-landing div.product .related,
body.lf-landing div.product .up-sells {
  clear: both;
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Brödsmulan låg i en bredare behållare än resten — uppmätt 1 080 px
   mot innehållets 1 040, alltså 20 px ut åt vänster. Vänsterställd men
   inte i linje är sämre än centrerad: ögat ser en kant som inte stämmer. */
body.lf-landing .breadcrumbs,
body.lf-landing .woocommerce-breadcrumb {
  max-width: 1040px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Flikarna hade 30 px luft upptill och 20 px sidomarginal utöver
   kolumnen — dubbel indragning mot allt annat på sidan. */
body.lf-landing .woocommerce-tabs {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Widgeten fyller kolumnen i stället för sina egna 620 px. */
body.lf-landing #lf-root { max-width: 100%; }

@media (max-width: 1100px) {
  body.lf-landing div.product > div.summary,
  body.lf-landing div.product > .summary,
  body.lf-landing .woocommerce div.product div.summary,
  body.lf-landing div.product .woocommerce-tabs,
  body.lf-landing div.product .related,
  body.lf-landing div.product .up-sells { max-width: 100% !important; }
}

/* ---- Länkläge: en rad per inlägg, med eget antal ---- */
.lf-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.lf-row-wrap { display: flex; flex-direction: column; gap: 0; }

/* Felmeddelande per rad. Formgivet som konkurrenternas: rosa ruta
   direkt under fältet, så att kopplingen till raden är omedelbar. */
.lf-row-msg {
  margin: 6px 0 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .32);
  color: #fca5a5;
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-word;
}
.lf-skin-light .lf-row-msg { background: rgba(220, 38, 38, .07); color: #b91c1c; }

.lf-row {
  display: grid;
  grid-template-columns: 1fr 118px 36px;
  gap: 8px;
  align-items: center;
}
.lf-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--lf-border);
  background: var(--lf-input-bg, rgba(255,255,255,.04));
  color: var(--lf-text);
  font-size: 13px;
}
.lf-row input.lf-row-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
}
.lf-row input:focus {
  outline: none;
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
.lf-row input::placeholder { color: var(--lf-muted); opacity: .65; }
.lf-row.is-bad input.lf-row-url { border-color: #f87171; }
.lf-row.is-ok  input.lf-row-url { border-color: rgba(52, 211, 153, .55); }

.lf-row-del {
  border: 1px solid var(--lf-border);
  background: transparent;
  color: var(--lf-muted);
  border-radius: 11px;
  height: 40px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.lf-row-del:hover { color: #f87171; border-color: #f87171; }

.lf-row-add {
  align-self: flex-start;
  margin-top: 2px;
  border: 1px dashed var(--lf-border);
  background: transparent;
  color: var(--lf-text);
  border-radius: 11px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-row-add:hover { border-color: #22d3ee; color: #22d3ee; }

.lf-links-hint {
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--lf-muted);
  word-break: break-word;
}
.lf-links-hint.ok   { color: #34d399; }
.lf-links-hint.warn { color: #fbbf24; }

.lf-skin-light .lf-row input { background: #fff; }
.lf-skin-light .lf-links-hint.ok   { color: #047857; }
.lf-skin-light .lf-links-hint.warn { color: #b45309; }

@media (max-width: 560px) {
  .lf-row { grid-template-columns: 1fr 92px 34px; gap: 6px; }
  .lf-row input { padding: 10px; font-size: 12px; }
}

/* ---- "från"-prefix på pris (låg tidigare i temat) ---- */
.lf-from {
  font-size: .62em;
  font-weight: 500;
  text-transform: lowercase;
  opacity: .72;
  letter-spacing: .01em;
}

/* Rad utan antalsruta (egna kommentarer — antalet är antal textrader) */
.lf-row--noqty { grid-template-columns: 1fr 36px; }
@media (max-width: 560px) { .lf-row--noqty { grid-template-columns: 1fr 34px; } }

/* Räknare under varje kommentarsruta */
.lf-comment-count { margin-top: 5px; font-size: 12px; color: var(--lf-muted); }
.lf-comment-count.ok   { color: #34d399; }
.lf-comment-count.warn { color: #fbbf24; }
.lf-skin-light .lf-comment-count.ok   { color: #047857; }
.lf-skin-light .lf-comment-count.warn { color: #b45309; }

/* ==========================================================================
   Mobil: luft runt produkttitel, pris och beskrivning
   --------------------------------------------------------------------------
   Widgeten har egen inre padding, men rubriken, priset och brödtexten runt
   omkring ligger direkt mot skärmkanten på mobil eftersom vi tagit bort
   WooCommerces kolumnpadding för att kunna centrera kolumnen.
   ========================================================================== */
@media (max-width: 549px) {
  body.lf-landing .product-title,
  body.lf-landing .product_title,
  body.lf-landing .product-info .price,
  body.lf-landing .product-page-price,
  body.lf-landing .product-short-description,
  body.lf-landing .woocommerce-product-details__short-description,
  body.lf-landing .product-info > .price-wrapper,
  body.lf-landing .woocommerce-tabs,
  body.lf-landing .product-footer .entry-content,
  body.lf-landing .breadcrumbs {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Widgeten och den gröna rutan ska ha samma ytterkant — och det är
     WIDGETEN som ska växa, inte meddelandet som ska krympa.
     Beställningsrutan är sidans viktigaste element; att smalna av den
     för att matcha en notis vore att lösa rätt problem åt fel håll. */
  body.lf-landing #lf-root,
  body.lf-landing .lf-delivery--outside {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Lite luft mellan rubrik, pris och text. */
  body.lf-landing .product-title,
  body.lf-landing .product_title { margin-bottom: 10px; }
  body.lf-landing .product-info .price { margin-bottom: 14px; display: block; }
}

/* ---- Leveranstakt (drip feed) ---- */
.lf-pace { margin-top: 16px; }
.lf-pace-label {
  font-size: 13px; font-weight: 650; color: var(--lf-text);
  margin-bottom: 9px;
}
.lf-pace-opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Takterna som svepbara kort.
   Bredden ar satt sa att nasta kort alltid skymtar i kanten — den
   glimten ar hela signalen om att det finns fler val at sidan, och den
   gor prickar och pilar overflodiga. */
.lf-pace-cards {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 9px;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.lf-pace-cards::-webkit-scrollbar { display: none; }

/* Korten i raden stracks till samma hojd (flex stretch). Med innehallet
   toppjusterat hamnade all overskjutande hojd som ett tomt hal langst
   ned — det sag ut som en blankrad och gjorde korten onodigt stora.
   Centrerat innehall + tatare radavstand tar bort halet. */
.lf-pace-cards .lf-pace-opt {
  flex: 0 0 auto;
  min-width: 104px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 10px 14px;
  border-radius: var(--lf-radius-s);
}
.lf-pace-n {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--lf-text);
}
.lf-pace-u { font-size: 12px; font-weight: 600; color: var(--lf-muted); }
.lf-pace-t {
  margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--lf-acc);
}
.lf-pace-cards .lf-pace-opt.selected .lf-pace-n { color: var(--lf-acc); }
.lf-pace-cards .lf-pace-opt.selected .lf-pace-u { color: var(--lf-text); }
.lf-pace-opt {
  border: 1px solid var(--lf-border);
  background: var(--lf-panel);
  color: var(--lf-text);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lf-pace-opt:hover { border-color: var(--lf-acc); }
.lf-pace-opt.selected {
  border-color: var(--lf-acc);
  background: rgba(34, 211, 238, .14);
  color: var(--lf-acc);
}
.lf-pace-hint {
  margin: 10px 2px 0; font-size: 13px; line-height: 1.5;
  color: var(--lf-acc);
}
.lf-pace-hint.warn { color: #fbbf24; }
.lf-skin-light .lf-pace-hint.warn { color: #b45309; }

/* ==========================================================================
   Kassa och varukorg på mobil
   --------------------------------------------------------------------------
   Ordersammanfattningen ligger i en egen ruta som saknar sidopadding under
   brytpunkten, så tabellen klistrar mot skärmkanten.
   ========================================================================== */
@media (max-width: 849px) {
  .woocommerce-checkout-review-order,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  .woocommerce-checkout-review-order-table,
  .woocommerce-cart table.shop_table { width: 100%; }

  /* Rubriken över sammanfattningen ska följa samma indrag. */
  .woocommerce-checkout h3#order_review_heading,
  .woocommerce-cart .cart_totals h2 { padding-left: 16px; padding-right: 16px; }

  /* Radera-knappen i varukorgen hamnar annars utanför kanten. */
  .woocommerce-cart table.cart td.product-remove { padding-right: 8px; }
}

/* ==========================================================================
   Mina tjänster
   --------------------------------------------------------------------------
   Fem kolumner får inte plats på en telefon. Under brytpunkten viks varje
   rad till ett kort där kolumnrubriken följer med som etikett — annars
   tappar man vad siffrorna betyder så fort tabellhuvudet försvinner.
   ========================================================================== */
.lf-mine { width: 100%; border-collapse: collapse; }
.lf-mine thead tr {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
  border-bottom: 1px solid currentColor;
}
.lf-mine th { padding: 8px 10px; font-weight: 600; }
.lf-mine td { padding: 12px 10px; font-size: 13.5px; vertical-align: middle; }
.lf-mine tbody tr + tr { border-top: 1px solid rgba(128, 128, 128, .18); }

.lf-mine-sub { display: block; font-size: 12px; opacity: .65; margin-top: 3px; }
.lf-mine-count { white-space: nowrap; }
.lf-mine-act   { white-space: nowrap; }
.lf-mine-bar   { width: 110px; }
.lf-mine-track { background: rgba(128, 128, 128, .25); border-radius: 6px; height: 8px; overflow: hidden; }
.lf-mine-fill  { height: 8px; background: linear-gradient(90deg, #22d3ee, #818cf8); }

@media (max-width: 680px) {
  .lf-mine thead { display: none; }
  .lf-mine, .lf-mine tbody, .lf-mine tr, .lf-mine td { display: block; width: 100%; }

  .lf-mine tbody tr {
    border: 1px solid rgba(128, 128, 128, .22);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .lf-mine tbody tr + tr { border-top: 1px solid rgba(128, 128, 128, .22); }

  .lf-mine td {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .lf-mine td::before {
    content: attr(data-label);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
    flex: 0 0 auto;
  }
  .lf-mine td[data-label=""]::before { display: none; }

  /* Tjänstenamnet är rubriken på kortet, inte en rad bland andra. */
  .lf-mine-svc {
    display: block !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(128, 128, 128, .16);
  }
  .lf-mine-svc::before { display: none; }
  .lf-mine-svc strong { font-size: 15px; }

  .lf-mine-bar { width: 100%; }
  .lf-mine-bar .lf-mine-track { flex: 1 1 auto; }
  .lf-mine-act { padding-top: 10px !important; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- Produktrutnät med bild ---- */
.lf-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 26px 0 44px;
}
.lf-svc {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--lf-surface, rgba(255,255,255,.03));
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
  padding: 18px;
  text-decoration: none !important;
  transition: border-color .18s ease, transform .18s ease;
}
.lf-svc:hover { border-color: var(--lf-acc); transform: translateY(-2px); }

.lf-svc-img {
  display: block;
  margin: -4px -4px 6px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, .04);
}
.lf-svc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.lf-svc-name  { font-weight: 750; font-size: 16.5px; color: var(--lf-text) !important; line-height: 1.3; }
.lf-svc-desc  { font-size: 13.5px; line-height: 1.55; color: var(--lf-muted) !important; }
.lf-svc-price { font-weight: 700; color: var(--lf-acc) !important; margin-top: 2px; }
.lf-svc-price .lf-from { font-size: .78em; font-weight: 500; opacity: .75; }

@media (max-width: 560px) {
  .lf-svc-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .lf-svc { padding: 12px; }

  /* Produktraderna blir en svepbar rad på mobil: ETT kort i taget, med
     nästa kort synligt i kanten. Kanten ÄR signalen — den visar att det
     finns mer åt sidan utan prickar, pilar eller JavaScript. Rullisten
     döljs eftersom kortkanten redan säger samma sak snyggare.
     Dubbelklassen behövs för att vinna över temats .lf-svc-grid-regel. */
  .lf-svc-grid.lf-svc-grid--img {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .lf-svc-grid.lf-svc-grid--img::-webkit-scrollbar { display: none; }
  .lf-svc-grid.lf-svc-grid--img .lf-svc {
    flex: 0 0 82%;
    max-width: 330px;
    scroll-snap-align: start;
    scroll-margin-left: 16px;
  }
  .lf-svc-name { font-size: 14.5px; }
  .lf-svc-desc { display: none; }
}

/* ---- Hjälpruta: var hittar jag mitt användarnamn ---- */
.lf-help-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 0;
  margin: -2px 0 8px;
  color: var(--lf-muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lf-help-toggle:hover { color: var(--lf-acc); }

.lf-help {
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
}
.lf-help-text {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lf-muted);
}
.lf-help-text strong { color: var(--lf-acc); }

.lf-help-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--lf-border);
}

/* ---- Tillval: fördröjd leverans ---- */
.lf-delay {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--lf-border);
  border-radius: 12px;
  background: var(--lf-panel);
  cursor: pointer;
  transition: border-color .15s ease;
}
.lf-delay:hover { border-color: var(--lf-acc); }
.lf-delay input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lf-acc); cursor: pointer; }
.lf-delay-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.5; }
.lf-delay-text strong { display: block; color: var(--lf-text); font-weight: 650; }
.lf-delay-sub { display: block; color: var(--lf-muted); font-size: 12.5px; margin-top: 3px; }
.lf-delay-price { flex: 0 0 auto; font-weight: 700; color: var(--lf-acc); white-space: nowrap; }

.lf-exact-price { flex: 0 0 auto; font-weight: 700; color: var(--lf-acc); white-space: nowrap; }
#lf-exact { margin-top: 10px; }

/* ---- Flik för större beställningar ---- */
.lf-big { margin-top: 14px; }
.lf-big-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--lf-muted);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.lf-big-toggle:hover { color: var(--lf-acc); }
.lf-big-chevron {
  display: inline-block;
  transition: transform .18s ease;
  font-size: 16px;
  line-height: 1;
}
.lf-big-toggle.is-open .lf-big-chevron { transform: rotate(90deg); }

.lf-big-panel {
  margin-top: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--lf-panel);
  border: 1px solid var(--lf-border);
}
.lf-big-panel p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--lf-muted); }
.lf-big-panel p:last-child { margin-bottom: 0; }
.lf-big-link {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--lf-acc);
  border-radius: 100px;
  color: var(--lf-acc) !important;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none !important;
}
.lf-big-link:hover { background: rgba(34, 211, 238, .12); }

/* Golvvarning under antalsreglaget: syns nar reglaget snappar tillbaka
   for att valda bilder kraver ett hogre antal. Dor sjalv efter nagra
   sekunder — ett besked, inte ett tillstand. */
.lf-floor-warn {
  margin: 6px 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: #eab308;
}

/* "Visa fler inlägg" under rutnätet: en lugn sekundärknapp — köpknappen
   ska förbli den enda som ropar. */
.lf-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-more:hover { background: rgba(255, 255, 255, .09); }
.lf-more:disabled { opacity: .6; cursor: default; }

/* Falt under minsta per inlagg i fordelningslaget: rott pa exakt det
   falt som ar for lagt, inte bara en rakning i texten under. */
.lf-dist-input.is-thin {
  border-color: #ef4444 !important;
  color: #f87171;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .35);
}

/* Samma/Varierande antal: tva ordval, inte ett formularfalt. Tooltipen
   oppnas pa fragetecknet — beskrivningen ska inte ta mer plats an valet. */
.lf-exact { display: block; margin-top: 10px; }
.lf-exact-seg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-exact-opt,
.lf-ctype-opt {
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.lf-exact-opt.selected,
.lf-ctype-opt.selected {
  border-color: var(--lf-acc);
  background: rgba(34, 211, 238, .12);
  color: var(--lf-acc);
}
.lf-info-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lf-exact-tip { display: block; margin-top: 8px; font-size: 12px; color: #8a97a8; line-height: 1.5; }

/* Kommentarsblock: vald bild till vanster, textrutan till hoger — sa
   syns det vilket inlagg varje kommentar hor till. */
.lf-comment-block { display: flex; gap: 10px; align-items: flex-start; }
.lf-comment-thumb {
  position: relative;
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
}
.lf-comment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-comment-main { flex: 1 1 auto; min-width: 0; }

/* Autofyllningsknappen: ett forslag, inte ett krav — ghost-stil. */
.lf-comment-fill {
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, .25);
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lf-comment-fill:hover { border-style: solid; background: rgba(255, 255, 255, .06); }

/* Ta bort ett valt inlagg direkt fran kommentarsblocket. */
.lf-comment-block { position: relative; }
.lf-comment-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .12);
  color: #f87171;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.lf-comment-remove:hover { background: rgba(239, 68, 68, .25); }
.lf-comment-main { padding-right: 26px; }

/* Genomstruket ordinarie pris vid rea, i summeringen. */
.lf-ord { color: var(--lf-muted); font-weight: 400; margin-right: 6px; font-size: .8em; }

/* Smala skarmar: mindre miniatyr och tatare mellanrum sa textrutan far
   bredden. Etiketten ligger redan pa en klippt rad. */
@media (max-width: 480px) {
  .lf-comment-block { gap: 8px; }
  .lf-comment-thumb { flex-basis: 48px; width: 48px; height: 48px; border-radius: 8px; }
  .lf-comment-label { font-size: 11px; margin-bottom: 6px; }
  .lf-comment-fill { width: 100%; }
}

/* Leveransraden overst: fortroende, inte alarm. */
.lf-leadtime {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .25);
  color: #34d399;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Prisgarantin: badge i USP-raden, villkoret pa klick. */
.lf-pg-toggle {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.lf-pg-text {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .3);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Kundtjanstformularet: samma morka formsprak som widgeten. */
.lf-kontakt { max-width: 640px; }
.lf-kontakt label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; }
.lf-kontakt input[type="text"],
.lf-kontakt input[type="email"],
.lf-kontakt textarea {
  display: block; width: 100%; margin-top: 5px;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05); color: inherit; font: inherit;
}
.lf-kontakt-skicka {
  padding: 12px 26px; border: none; border-radius: 100px;
  background: linear-gradient(90deg, #22d3ee, #818cf8);
  color: #06121a; font-weight: 700; cursor: pointer;
}
.lf-kontakt-ok {
  padding: 14px 16px; border-radius: 10px;
  background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .35);
}
.lf-kontakt-fel {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35);
}

/* Rea-raden: het men inte skrikig. */
.lf-rea {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #f87171;
  font-size: 12.5px;
  font-weight: 700;
}

/* Prisgaranti-badgen linjerar med ovriga USP:ar — knappens egen
   baslinje och radhojd skot upp den ur ledet. */
.lf-pg-toggle {
  display: inline;
  vertical-align: baseline;
  line-height: inherit;
  font-size: inherit;
}