/* A section that HOSTS one of these bands ends where the band ends, so it must
   not also pull the next section up over itself. The homepage's marquee section
   carries Elementor's margin-bottom:-11%, written when the rolling banner filled
   it and the service cards were meant to ride over the art. That marquee renders
   empty here (#bannerMarquee has no height) and the section is now the host for
   the injected bands instead — so the pull landed on THEM: -11% of 1280 is 141px,
   and the first service card cut 60px off the bottom of the picture banner. */
.elementor-top-section:has(.ldf-slot){margin-bottom:0 !important}
/* The second phone-only leftover from the captured page, same shape as the one
   on the masthead figure:
     .elementor-2165 .elementor-element-3debb7b { margin-top:36% }
   inside @media(max-width:767px), against 0% on the desktop. 36% of a 375px
   screen is 135px, and with the rolling banner now sitting in this section it
   read as a blank white void above the band. Desktop has none, and the band
   brings its own 56px, so this goes. */
@media(max-width:767px){
  .elementor-top-section:has(.ldf-slot){margin-top:0 !important}
}
/* …and then the banner sat 51px under the block above it and 120 above the first
   service card. 40 of that difference is a captured section holding nothing but
   a <style> element. It is the same section that carries the lab-items strip on
   every other page, so it cannot simply be hidden — but it can be hidden when
   the strip is not in it, which is exactly the case that has no height to give.
   (A fixed negative margin was the other option and it is wrong: the two
   landing pages do not have the same sections after the banner, so a number
   tuned on the Slovenian one put the English cards 46px ON TOP of it.) */
section.elementor-element-afb130f:not(:has(ul.lab-items)){display:none !important}
.ldf-slot{--ldf-ink:#17181c;--ldf-paper:#faf9f6;--ldf-dim:#8b877f;--ldf-faint:#b9b4ab;--ldf-line:rgba(23,24,28,.14);--ldf-line2:rgba(23,24,28,.28);--ldf-ok:#3f7d5f;--ldf-warn:#b08128;--ldf-bad:#c0492f;max-width:var(--ldf-w,1140px);margin-left:auto;margin-right:auto;padding:20px 0 8px}
.ldf-slot *{box-sizing:border-box}
.ldf-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
@media(max-width:820px){.ldf-two{grid-template-columns:1fr}}
.ldf-quizsolo{max-width:620px;margin-left:auto;margin-right:auto}
.ldf-fig{margin:0;background:var(--ldf-paper);border:1px solid var(--ldf-line);border-radius:2px;overflow:hidden}
.ldf-fill{display:flex;flex-direction:column;height:100%}
.ldf-fill .ldf-body{flex:1;display:flex;flex-direction:column}
@keyframes ldf-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ldf-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--ldf-line);background:rgba(23,24,28,.015);font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ldf-dim)}
.ldf-cap b,.ldf-cap .ldf-tag{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important}
.ldf-body{padding:24px 22px}
/* one short line now rather than three clauses — it needs less room above it */
/* Anja: the grey line under the figures was too small and too light, the same
   call she made on the certificates block and in the FAQ. #b9b4ab is about 2:1
   on paper; this is 12.5px and a grey that reads. */
.ldf-note{margin:8px 2px 0;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12.5px;letter-spacing:.3px;line-height:1.6;color:#55524a}
/* INCI */
.ldf-search{display:flex;align-items:center;gap:12px;border:1px solid var(--ldf-line2);border-radius:2px;padding:12px 16px}
/* IŠČI: leads, the hint follows. The two had it the other way round — the
   label at 11px in the faintest grey on the sheet, the placeholder at 14 —
   so the field read as a line of grey text rather than as something to type
   in. Anja: swap the sizes, darken the label, give it a colon.
   The size goes on ::placeholder rather than on the input, so the hint is the
   small one but what somebody actually types stays at 14. */
.ldf-search .ldf-k{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:14px;color:var(--ldf-dim);letter-spacing:1px}
.ldf-search input{border:0;outline:0;background:transparent;width:100%;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:14px;letter-spacing:.5px;color:var(--ldf-ink)}
.ldf-search input::placeholder{color:var(--ldf-faint);font-size:11px;letter-spacing:.5px}
.ldf-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
@media(max-width:720px){.ldf-cards{grid-template-columns:1fr}}
.ldf-card{display:flex;gap:14px;border:1px solid var(--ldf-line);border-radius:2px;padding:16px;background:#fff}
.ldf-mol{flex:0 0 56px}.ldf-mol svg{width:56px;height:56px}
.ldf-meta{flex:1;min-width:0}
.ldf-inci{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:13px;letter-spacing:.5px;color:var(--ldf-ink)}
.ldf-sl{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-style:italic;font-size:14px;color:var(--ldf-dim);margin:1px 0 8px}
.ldf-card table{width:100%;border-collapse:collapse}
.ldf-card td{padding:1.5px 0;vertical-align:top;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;color:#4a4842}
.ldf-card td:first-child{color:var(--ldf-faint);letter-spacing:1px;text-transform:uppercase;width:52px}
.ldf-safebar{height:4px;border-radius:2px;background:var(--ldf-line);margin-top:9px;overflow:hidden}
.ldf-safebar>i{display:block;height:100%}
.ldf-add{margin-top:10px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;background:transparent;border:1px solid var(--ldf-line2);color:#4a4842;padding:6px 10px;cursor:pointer;border-radius:2px;transition:.18s}
.ldf-add:hover{border-color:var(--ldf-ink);color:var(--ldf-ink)}
.ldf-add.is-added{background:var(--ldf-ok);border-color:var(--ldf-ok);color:#fff}
.ldf-nohit{grid-column:1/-1;font-family:'IBM Plex Mono',monospace !important;font-size:12px;color:var(--ldf-faint);padding:16px 2px}
/* bench (pH + koža) & live (2-up) */
.ldf-bench{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
/* the columns are flex so their last line can sink to a shared baseline: the
   structural-formula caption on the left, the provenance note on the right */
.ldf-bench > .ldf-panel{display:flex;flex-direction:column}
.ldf-note-foot{margin-top:auto !important;padding-top:12px}
@media(max-width:720px){.ldf-bench{grid-template-columns:1fr}}
.ldf-panel h4{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ldf-dim);margin:0 0 16px}
/* The pH swatch was one flat rectangle of colour, which read as a screenshot of
   a colour picker rather than as anything from a laboratory. It is a dipped
   indicator strip now: the pH colour underneath, a wash that lifts the top and
   settles into the foot, and a fine weave over both. Two repeating gradients at
   low alpha make the weave — a texture image would be another request and
   another file, and at this size the difference is not visible. */
.ldf-swatch{height:120px;border-radius:2px;border:1px solid var(--ldf-line);position:relative;overflow:hidden;
  background-color:var(--ph,#d8d5cf);
  background-image:
    /* the dry end and the tidemark: real indicator paper is white where it was
       never dipped, darkest just past the waterline where the dye pools, and
       only then settles to the reading — so the left tenth is paper, the next
       tenth is a deeper cast of the same hue, and the rest is the colour */
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.86) 4%,rgba(255,255,255,.30) 9%,rgba(28,46,24,.26) 13%,rgba(28,46,24,.13) 20%,rgba(28,46,24,0) 34%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 2px,rgba(255,255,255,0) 2px 5px),
    repeating-linear-gradient(45deg,rgba(23,24,28,.05) 0 3px,rgba(23,24,28,0) 3px 7px),
    linear-gradient(172deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.08) 34%,rgba(23,24,28,.05) 70%,rgba(23,24,28,.17) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -10px 18px -12px rgba(23,24,28,.45);
  transition:background-color .35s}
/* clear of the dry end — the reading belongs on the part of the paper that took
   the colour, and difference-blended white over a white ground is unreadable */
.ldf-ph-read{position:absolute;left:24%;bottom:10px;font-family:'Fraunces',Georgia,serif !important;font-weight:340 !important;font-size:40px;color:#fff;mix-blend-mode:difference}
.ldf-range{width:100%;margin:18px 0 6px;accent-color:var(--ldf-ink)}
.ldf-scale{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace !important;font-size:10px;color:var(--ldf-faint);letter-spacing:1px}
/* — FN-02/03 INCI search + pH/pKa/penetration read-outs (.ldf-find*, distinct
   from InciFigure's .ldf-inci ingredient-name class) — */
.ldf-find{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--ldf-line2);border-radius:2px;padding:12px 16px}
/* Same treatment as the INCI field above it — see .ldf-search .ldf-k: the
   label leads at 14px in the darker grey with a colon, the hint follows at
   11px. Two search fields on one page cannot read differently. */
.ldf-find .ldf-k{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:14px;color:var(--ldf-dim);letter-spacing:1px;white-space:nowrap}
.ldf-find input{border:0;outline:0;background:transparent;width:100%;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:14px;letter-spacing:.5px;color:var(--ldf-ink)}
.ldf-find input::placeholder{color:var(--ldf-faint);font-size:11px;letter-spacing:.5px}
.ldf-find-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:6;background:#fff;border:1px solid var(--ldf-line2);border-radius:2px;max-height:290px;overflow-y:auto;box-shadow:0 22px 44px -18px rgba(0,0,0,.4)}
.ldf-find-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ldf-line);padding:10px 15px;cursor:pointer}
.ldf-find-opt:last-child{border-bottom:0}
.ldf-find-opt:hover{background:rgba(23,24,28,.04)}
.ldf-find-name{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12px;letter-spacing:.3px;color:var(--ldf-ink)}
.ldf-find-badge{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--ldf-ok);padding:3px 7px;border-radius:2px;white-space:nowrap}
.ldf-find-cas{font-family:'IBM Plex Mono',monospace !important;font-size:10.5px;color:var(--ldf-faint);white-space:nowrap}
.ldf-quick{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.ldf-ph-read i{font-family:'IBM Plex Mono',monospace !important;font-style:normal;font-weight:500 !important;font-size:13px;margin-left:6px;letter-spacing:1px;vertical-align:6px}
.ldf-phbar{position:relative;height:8px;border-radius:2px;background:var(--ldf-line);margin:16px 0 12px}
.ldf-phbar-win{position:absolute;top:0;bottom:0;background:rgba(63,125,95,.55);border-radius:2px}
.ldf-phbar-cur{position:absolute;top:-4px;width:2px;height:16px;background:var(--ldf-ink)}
.ldf-verdict{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11.5px;letter-spacing:.3px;color:var(--ldf-dim);margin-top:4px}
.ldf-verdict b{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important;text-transform:uppercase}
.ldf-verdict.ok b{color:var(--ldf-ok)}
.ldf-verdict.bad b{color:var(--ldf-bad)}
.ldf-facts{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11px;letter-spacing:.5px;color:var(--ldf-faint)}
.ldf-facts b{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important}
.ldf-why{margin-top:14px;font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;font-size:12.5px;line-height:1.55;color:#54524c;border-left:2px solid var(--ldf-line2);padding-left:13px}
.ldf-why-k{display:block;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ldf-dim);margin-bottom:5px}
.ldf-hint{margin-top:14px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11px;letter-spacing:.3px;color:var(--ldf-faint);line-height:1.5}
.ldf-molbox{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}

/* ── the formulation table, on a phone ────────────────────────────────────
   Anja: smaller tags so the list is shorter, and the structure beside the
   annex rather than under it. */
@media(max-width:760px){
  /* At 11px in 8/12 of padding the five actives ran to four rows and 175px:
     only the two shortest shared a line and the rest each took one. A point
     and a half off, and tighter padding, packs them into three. */
  .ldf-quick{gap:5px;margin:10px 0 14px}
  /* And down again once the third one had its full name back — Anja wants it
     to read askorbinska kislina – vit. C, not just the vitamin, and at 9.5 in
     9px of padding that name alone took a row of its own. */
  .ldf-quick .ldf-chip{font-size:8.8px;padding:5px 6px;letter-spacing:.3px}
  /* The two of them measure 202 and 138 against 309 of room, so with the 22px
     between them they wrapped and stacked — 321px tall for what is really one
     row. Two columns, and the sketch scales to the narrower one. */
  .ldf-molbox{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    align-items:start;
    gap:14px;
  }
  .ldf-molbox .ldf-struct-fig{width:100%;flex:none}
  /* Anja: the caption goes on a phone. "Strukturna formula · C6H6N2O" is
     naming the drawing directly above it and repeating the formula that the
     card already carries, so on a narrow screen it is two lines spent saying
     what is on show. The sketch keeps its title attribute, so nothing is lost
     to a reader that cannot see it. */
  .ldf-molbox .ldf-struct-cap{display:none}
  /* Anja: and the space it left.
     Most of that gap was never the caption. The sketch is drawn on a square
     canvas — 175x175 here — while the molecule itself only occupies the top
     part of it: measured, the ink runs y16 to y88 of a 141-unit viewBox, so
     roughly 66px of the box below the drawing is empty. The box is cropped to
     the drawing instead of carrying the blank with it. */
  .ldf-molbox .ldf-struct-fig{
    height:145px;overflow:hidden;
    display:flex;align-items:flex-start;justify-content:center;
  }
  .ldf-molbox .ldf-struct-fig svg,
  .ldf-molbox .ldf-struct-fig img,
  .ldf-molbox .ldf-struct-fig canvas{max-width:100%;max-height:145px;width:auto;height:auto}
}
.ldf-struct-fig{margin:0;flex:0 1 auto}
/* Anja: one line at the foot of the INCI table, not two — and it may be
   smaller to get there. Measured at 375px: the sentence wants 370px of a 305px
   box at 12.5, so it comes down a size and gives up most of its tracking. */
@media(max-width:760px){
  .ldf-note-1line{font-size:10px;letter-spacing:.1px}
}
.ldf-struct-svg{display:inline-block;max-width:260px;max-height:170px;width:auto;height:auto;overflow:visible}
.ldf-struct-svg text{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important}
.ldf-struct-cap{display:block;margin-top:3px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ldf-faint)}
.ldf-annex{display:inline-flex;flex-direction:column;gap:2px;border:1px solid var(--ldf-line);border-left-width:3px;border-radius:2px;padding:8px 14px;text-align:left}
.ldf-annex-k{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ldf-faint)}
.ldf-annex b{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ldf-ink)}
.ldf-annex i{font-family:'Libre Franklin',sans-serif !important;font-style:normal;font-weight:400 !important;font-size:11px;color:var(--ldf-dim)}
.ldf-annex.bad{border-left-color:var(--ldf-bad)}.ldf-annex.bad b{color:var(--ldf-bad)}
.ldf-annex.warn{border-left-color:var(--ldf-warn)}.ldf-annex.warn b{color:var(--ldf-warn)}
.ldf-annex.ok{border-left-color:var(--ldf-ok)}.ldf-annex.ok b{color:var(--ldf-ok)}
.ldf-annex.free{border-left-color:var(--ldf-ok)}.ldf-annex.free b{color:var(--ldf-ok)}
.ldf-annex.unk{border-left-color:var(--ldf-faint)}
.ldf-stable{margin-top:16px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11.5px;line-height:1.8;color:#4a4842}
.ldf-stable b{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important}
.ldf-actives{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.ldf-chip{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:8px 12px;border:1px solid var(--ldf-line2);background:#fff;color:#4a4842;cursor:pointer;border-radius:2px;transition:.16s}
.ldf-chip:hover{border-color:var(--ldf-ink);color:var(--ldf-ink)}
.ldf-chip.is-on{background:var(--ldf-ink);color:var(--ldf-paper);border-color:var(--ldf-ink)}
.ldf-chip.block{display:block;width:100%;text-align:left;text-transform:none;letter-spacing:.3px;font-size:12.5px;padding:11px 14px}
.ldf-chip.static{cursor:default}
.ldf-chip.ok{border-color:var(--ldf-ok);color:var(--ldf-ok)}
.ldf-chip.warn{border-color:var(--ldf-bad);color:var(--ldf-bad)}
.ldf-chip.unk{color:var(--ldf-faint)}
.ldf-skin{position:relative;border:1px solid var(--ldf-line);border-radius:2px;overflow:hidden;background:#f4e9df;aspect-ratio:340/248}
.ldf-skin-svg{display:block;width:100%;height:100%}
.ldf-skin-svg .sk-l{fill:none;stroke:rgba(23,24,28,.62);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.ldf-skin-svg .sk-l circle,.ldf-skin-svg .sk-l path{fill:none}
.ldf-skin-svg .sk-faint{stroke:rgba(23,24,28,.3);stroke-width:.85}
.ldf-skin-svg .sk-cap{fill:none;stroke:#a8524a;stroke-width:1.4;stroke-linecap:round}
.ldf-skin-svg .sk-lab text{font-family:'IBM Plex Mono',monospace !important;font-weight:500;font-size:8px;letter-spacing:.4px;fill:#4a3b32}
.ldf-skin-svg .sk-lab line{stroke:rgba(23,24,28,.34);stroke-width:.7}
.ldf-skin-svg .sk-layer text{font-family:'IBM Plex Mono',monospace !important;font-weight:600;font-size:8px;letter-spacing:1.4px;fill:rgba(74,59,50,.72)}
.ldf-skin-svg .sk-mark line{stroke:#17181c;stroke-width:1;stroke-dasharray:4 3;transition:none}
.ldf-skin-svg .sk-mark circle{fill:#17181c;stroke:none}
/* solid, not 92%: the chip sits ON the depth rule and over whatever the
   diagram has at that height, and 8% of a hairline still reads through it */
.ldf-skin-svg .sk-mark rect{fill:#fff;stroke:rgba(23,24,28,.18);stroke-width:.6}
.ldf-skin-svg .sk-mark text{font-family:'IBM Plex Mono',monospace !important;font-weight:600;font-size:8.5px;letter-spacing:.4px;text-transform:uppercase;fill:#17181c}
@keyframes ldf-ring{0%{box-shadow:0 0 0 0 rgba(23,24,28,.4)}70%{box-shadow:0 0 0 12px rgba(23,24,28,0)}100%{box-shadow:0 0 0 0 rgba(23,24,28,0)}}
.ldf-count{font-family:'Rajdhani',sans-serif !important;font-weight:700 !important;font-size:52px;line-height:1;color:var(--ldf-ink);letter-spacing:1px}
/* the second statistic — countries with customers. Deliberately smaller than
   the unit count: it is the supporting fact, and the two set at one size read
   as a dashboard rather than as a claim with its evidence. */
.ldf-sub-stat{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--ldf-line)}
.ldf-sub-stat .k{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ldf-dim)}
.ldf-sub-stat .v{margin-left:auto;font-family:'Rajdhani',sans-serif !important;font-weight:700 !important;font-size:30px;line-height:1;color:var(--ldf-ink)}
.ldf-batch{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12px;line-height:1.7;background:#fff;border:1px solid var(--ldf-line);padding:14px;white-space:pre-wrap;min-height:132px;color:#333;margin:0}
.ldf-caret{opacity:.7;animation:ldf-blink 1s step-end infinite}
@keyframes ldf-blink{50%{opacity:0}}
/* scan */
.ldf-ta{width:100%;height:88px;border:1px solid var(--ldf-line2);border-radius:2px;padding:12px 14px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:13px;color:var(--ldf-ink);resize:vertical;outline:none}
.ldf-ta::placeholder{color:var(--ldf-faint)}
.ldf-btn{margin-top:12px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px;letter-spacing:2px;text-transform:uppercase;background:var(--ldf-ink);color:var(--ldf-paper);border:1px solid var(--ldf-ink);padding:11px 22px;cursor:pointer;border-radius:2px;transition:.18s}
.ldf-btn:hover{opacity:.85}
.ldf-btn.ghost{background:transparent;color:var(--ldf-ink)}
.ldf-chips{display:flex;flex-wrap:wrap;gap:7px}
/* quiz */
.ldf-quiz{display:flex;flex-direction:column;justify-content:center;flex:1}
.ldf-qq{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:13px;color:var(--ldf-ink);margin-bottom:14px}
.ldf-result{font-family:'Fraunces',Georgia,serif !important;font-weight:400 !important;font-variation-settings:'opsz' 144,'wght' 400;font-size:40px;line-height:1;letter-spacing:-1px;color:var(--ldf-ink);margin:6px 0 8px}
/* ask */
.ldf-chat{border:1px solid var(--ldf-line);border-radius:2px;background:#fff;padding:14px;flex:1;min-height:180px;max-height:240px;overflow-y:auto;font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;font-size:13px;line-height:1.5}
.ldf-msg{margin:7px 0;border-left:2px solid var(--ldf-ink);padding-left:9px;color:#3a3a3a}
.ldf-msg b{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px;letter-spacing:.5px}
.ldf-msg.me{border-left:none;text-align:right;color:var(--ldf-dim)}
.ldf-chatrow{display:flex;gap:8px;margin-top:10px}
.ldf-chatrow input{flex:1;border:1px solid var(--ldf-line2);border-radius:2px;padding:11px 12px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12.5px;outline:none;color:var(--ldf-ink)}
.ldf-chatrow .ldf-btn{margin-top:0;padding:11px 18px}
/* shipping map */
.ldf-map{border:1px solid var(--ldf-line);border-radius:2px;background:#fbfaf8;padding:6px}
.ldf-map svg{display:block;width:100%;height:auto}
/* The distribution map. Colour does the work the labels used to: sea reads as
   sea, the continent reads as land, and the countries Labderma actually ships
   to are a different tone from the ones that are only there for context — so
   "seven countries" is legible before a single label is read. Slovenia is the
   terracotta the rest of the site uses for the thing being pointed at. */
.eu-map{display:block;width:100%;height:auto}
.eu-sea{fill:#e6eef1}
.eu-grat line{stroke:rgba(23,24,28,.07);stroke-width:1}
.eu-land path{fill:#eae5db;stroke:rgba(23,24,28,.18);stroke-width:.9}
.eu-market path{fill:#cddfd7;stroke:#5f8f80;stroke-width:1}
.eu-home{fill:#b96a4e;stroke:#8f4f38;stroke-width:1}
.eu-arc path{stroke:rgba(23,24,28,.45);stroke-width:1.1}
.eu-arc-far{stroke-dasharray:3 4}
.eu-dot{fill:#17181c}
.eu-dot-ping{stroke:#17181c}
.eu-hub-ring{stroke:#8f4f38;stroke-width:1.5}
.eu-hub{fill:#8f4f38}
.ldf-pin-code{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11px;fill:var(--ldf-ink);letter-spacing:1px}
.ldf-pin-city{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:8.5px;fill:var(--ldf-dim);letter-spacing:.5px;text-transform:uppercase}
.ldf-hub-label{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:9.5px;fill:var(--ldf-ink);letter-spacing:1.5px;text-anchor:middle;text-transform:uppercase}
.ldf-ping{transform-origin:center;transform-box:fill-box;animation:ldf-ping 1.9s ease-out infinite}
@keyframes ldf-ping{0%{transform:scale(1);opacity:.8}70%{transform:scale(3.4);opacity:0}100%{opacity:0}}

/* ===== restyle of the ORIGINAL cards (.pif-cards / .pif-cards-2) to the journal theme ===== */
.pif-cards .ldf-card-eyebrow,.pif-cards-2 .ldf-card-eyebrow{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#b9b4ab;margin-bottom:12px}
.pif-cards h3,.pif-cards-2 h3{font-family:'Rajdhani',sans-serif !important;font-weight:600 !important;font-size:16px !important;line-height:1.25 !important;letter-spacing:1px !important;color:#22242a !important}
.pif-cards p,.pif-cards-2 p{font-family:'Fraunces',Georgia,serif !important;font-style:italic !important;font-weight:300 !important;font-optical-sizing:auto;font-size:17px !important;line-height:1.5 !important;letter-spacing:.1px !important;color:#54524c !important;margin:10px 0 0 !important}
/* paragraph spacing at the manual <br> breaks in the card body */
.pif-cards p br,.pif-cards-2 p br{display:block;content:"";margin-top:.7em}
/* pin any bottom "pics" (cert/symbol strips) to the card foot so they line up
   across a segment (cards are equal-height); text stays full-width, imgs centred */
.pif-cards,.pif-cards-2{display:flex;flex-direction:column}
.pif-cards img,.pif-cards-2 img{align-self:center}
.pif-cards img[class*="box-"],.pif-cards-2 img[class*="box-"]{margin-top:auto;padding-top:18px}

/* retire the obsolete "spletna trgovina PRIHAJA KMALU" promo: the Canva news iframes
   AND the shop_spacer watermark (.bd-imagelink-0). The native rolling banner now
   carries announcements and the shop is live. (Keeps the molecule→PIF connector.) */
.banner-news-desktop,.banner-news-mobile{display:none !important}
.bd-imagelink-0{display:none !important}
/* ===== Trgovina (Shop) — high-visibility dark band ===== */
.ldf-shop{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#15161b;color:#fff;border-radius:0;box-shadow:inset 0 2px 0 rgba(255,255,255,.92),inset 0 -2px 0 rgba(255,255,255,.92),0 22px 46px -14px rgba(0,0,0,.42),0 -14px 34px -22px rgba(0,0,0,.3);padding:54px 0}
.ldf-shop-inner{position:relative;z-index:2;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:0 44px;display:grid;grid-template-columns:1.25fr .75fr;gap:38px;align-items:center}
.ldf-shop-inner.has-prod{grid-template-columns:1.1fr minmax(150px,190px) .78fr;gap:30px}
.ldf-shop-prod{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none}
.ldf-shop-prod-tag{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ldf-shop-prod-img{max-width:100%;max-height:250px;width:auto;height:auto;background:transparent;border:2px solid rgba(255,255,255,.92);border-radius:2px;transform:rotate(-5deg);box-shadow:0 26px 46px -18px rgba(0,0,0,.65);animation:ldf-prod-float 4.6s ease-in-out infinite;will-change:transform}
.ldf-shop-prod:hover .ldf-shop-prod-img{animation-play-state:paused}
@keyframes ldf-prod-float{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3.5deg) translateY(-13px)}}
@media(prefers-reduced-motion:reduce){.ldf-shop-prod-img{animation:none}}
.ldf-shop-prod-name{font-family:'Fraunces',Georgia,serif !important;font-style:italic;font-weight:340 !important;font-size:15px;color:#fff;text-align:center;line-height:1.25;max-width:190px}
/* blue-gloves picture spacer — content-width "lower-tier" band: text + border,
   no full-bleed, no molecule field (just a framed picture) */
.ldf-gloves{position:relative;overflow:hidden;margin:15px 0;min-height:214px;border-radius:2px;display:flex;flex-direction:column;justify-content:center;color:#fff;background:linear-gradient(90deg,rgba(21,22,27,.88) 0%,rgba(21,22,27,.55) 44%,rgba(21,22,27,.12) 100%),url('/assets/images/495e4a508db70eed65e13021997e6082_AdobeStock_239297901.webp') center/cover no-repeat,url(data:image/webp;base64,UklGRmAAAABXRUJQVlA4IFQAAABQBACdASoUAA0APulkq04pJaQiMAgBIB0JYgCdH8IwAAt8nm1KoLuL0vgAAP6Zmn1uY1bk7GMRMa7vs9H2PGuhxBsSYq0y9zE8fFXgHhGzSeYQAAA=) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 16px 34px -18px rgba(0,0,0,.34)}
.ldf-gloves-inner{position:relative;z-index:2;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:40px 44px}
.ldf-gloves-eyebrow{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ldf-gloves-h{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-optical-sizing:auto;font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-1px;color:#fff !important;margin:14px 0 0;max-width:620px}
.ldf-gloves-h .it{font-style:italic;font-variation-settings:'opsz' 144,'wght' 420}
/* flat-lay variant — bright pastel image kept light; ink text over a paper scrim */
/* THE AIR EITHER SIDE OF THE GLOVES BAND, MEASURED FROM THE EDGES.
   Anja: more room above it than below, and it must be equal graphically —
   equal to the smaller one. Measured at 375px from the panel edge above to the
   band, and from the band to the panel edge below: 43 over, 33 under. The band
   sits in a slot padded 20 top and 8 bottom, so its own margin is the only
   lever that does not move every other block on the page; 15 -> 5 above puts
   both at 33.
   Scoped away from .ldf-flat on purpose: that band measures 43 over and 85
   under, the opposite imbalance, and pulling its top in would widen the gap it
   already has. It needs its own answer. */
.ldf-gloves:not(.ldf-flat){margin-top:5px}
.ldf-flat{background:linear-gradient(90deg,rgba(249,247,243,.94) 0%,rgba(249,247,243,.62) 40%,rgba(249,247,243,.08) 76%,rgba(249,247,243,0) 100%),url('/assets/images/labflat_spacer.webp') center 44%/cover no-repeat,url(data:image/webp;base64,UklGRkYAAABXRUJQVlA4IDoAAABQAwCdASoUAA0APulgqE0pJaQiMAgBIB0JZ2HgADc1hUaaAAD+7bzzrOYprbXHHgTersRFJRgJuYAA) center 44%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(23,24,28,.1),0 16px 34px -18px rgba(0,0,0,.22)}
.ldf-flat .ldf-gloves-eyebrow{color:#8b877f}
.ldf-flat .ldf-gloves-h{color:#1a1b20 !important}
@media(max-width:720px){.ldf-shop{padding:42px 0}.ldf-shop-inner{grid-template-columns:1fr;padding:0 26px;gap:26px}.ldf-shop-inner.has-prod{grid-template-columns:1fr}}
.ldf-shop-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.ldf-shop-main,.ldf-shop-side{position:relative;z-index:2}
.ldf-shop-eyebrow{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ldf-shop-h{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(30px,4vw,50px);line-height:1;letter-spacing:-1px;color:#fff !important;margin:16px 0 0}
.ldf-shop-h .it{font-style:italic;font-variation-settings:'opsz' 144,'wght' 400}
.ldf-shop-p{font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:440px;margin:18px 0 26px}
.ldf-shop-cta{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#15161b !important;background:#fff;border:1px solid #fff;padding:15px 30px;text-decoration:none;transition:.2s}
.ldf-shop-cta:hover{background:transparent;color:#fff !important}
.ldf-shop-cta span{transition:transform .2s}.ldf-shop-cta:hover span{transform:translateX(5px)}
.ldf-shop-side{border-left:1px solid rgba(255,255,255,.14);padding-left:32px}
@media(max-width:720px){.ldf-shop-side{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}}
/* Anja: tags and price beside each other rather than stacked.
   On a phone this column ran 252px — three chips down the left at 113, the
   price under them at 72 with 22 of margin above it, then the availability
   line — which made the widget far longer than it needed to be. The chips keep
   the left and the price takes the right, on the same row; the availability
   line runs under both. About a hundred pixels come back. */
@media(max-width:760px){
  .ldf-shop-side{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:16px;row-gap:10px;
    align-items:center;
  }
  .ldf-shop-tags{grid-column:1;grid-row:1}
  .ldf-shop-price{
    grid-column:2;grid-row:1;
    margin:0 !important;
    justify-content:flex-end;
    font-size:32px;
  }
  .ldf-shop-avail{grid-column:1 / -1;grid-row:2}
}
.ldf-shop-tags{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.ldf-shop-tags span{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.2);padding:6px 11px;border-radius:2px}
.ldf-shop-price{font-family:'Fraunces',Georgia,serif !important;font-weight:340 !important;font-variation-settings:'opsz' 144,'wght' 340;font-size:40px;color:#fff;margin:22px 0 4px;display:flex;align-items:baseline;gap:8px}
.ldf-shop-from{font-family:'IBM Plex Mono',monospace !important;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ldf-shop-avail{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.45)}
/* ===== Portal za stranke (B2B) ===== */
.ldf-portal{background:var(--ldf-paper);border:1px solid var(--ldf-line);border-radius:2px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:18px}
@media(max-width:720px){.ldf-portal{grid-template-columns:1fr;padding:30px 26px;gap:26px}}
.ldf-portal-eyebrow{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:var(--ldf-dim)}
.ldf-portal-h{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(26px,3.2vw,42px);line-height:1;letter-spacing:-1px;color:var(--ldf-ink) !important;margin:14px 0 0}
.ldf-portal-h .it{font-style:italic;font-variation-settings:'opsz' 144,'wght' 420}
.ldf-portal-p{font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;color:#54524c;font-size:14.5px;line-height:1.6;margin:16px 0 18px}
.ldf-portal-feats{list-style:none;margin:0 0 22px;padding:0}
/* Anja: half the air between them. 8 -> 4 top and bottom; the rule between
   each pair is what separates them, and it was carrying twice the room it
   needed. */
.ldf-portal-feats li{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12px;color:#54524c;padding:4px 0 4px 18px;border-top:1px solid var(--ldf-line);position:relative}
.ldf-portal-feats li::before{content:"—";position:absolute;left:0;color:var(--ldf-faint)}
.ldf-portal-feats b{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important}
.ldf-portal-ctarow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ldf-portal-cta{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff !important;background:var(--ldf-ink);border:1px solid var(--ldf-ink);padding:14px 26px;text-decoration:none;transition:.2s}
.ldf-portal-cta:hover{background:transparent;color:var(--ldf-ink) !important}
/* The question is a caption, the word after it is the way in — so only the word
   is inked, weighted and underlined. */
.ldf-portal-regline{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:11.5px;letter-spacing:.5px;color:var(--ldf-dim)}
.ldf-portal-reg{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:11.5px;letter-spacing:.5px;color:var(--ldf-ink) !important;text-decoration:underline;text-underline-offset:3px}
.ldf-portal-panel{border:1px solid var(--ldf-line2);border-radius:3px;background:#fff;overflow:hidden}
.ldf-pp-head{display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ldf-ink);padding:12px 16px;border-bottom:1px solid var(--ldf-line);background:rgba(23,24,28,.02)}
.ldf-pp-dot{width:7px;height:7px;border-radius:50%;background:var(--ldf-ok)}
.ldf-pp-nav{display:flex;border-bottom:1px solid var(--ldf-line)}
.ldf-pp-nav span{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ldf-faint);padding:11px 14px}
.ldf-pp-nav span.on{color:var(--ldf-ink);font-weight:500 !important;box-shadow:inset 0 -2px 0 var(--ldf-ink)}
.ldf-pp-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ldf-line)}
.ldf-pp-row:last-child{border-bottom:none}
.ldf-pp-row b{color:var(--ldf-ink);font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important;font-size:11px;letter-spacing:.5px}
.ldf-pp-row span{color:var(--ldf-dim);font-family:'Libre Franklin',sans-serif !important;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ldf-pp-row i{font-style:normal;font-family:'IBM Plex Mono',monospace !important;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.ldf-pp-row i.ok{color:var(--ldf-ok);background:rgba(63,125,95,.1)}
.ldf-pp-row i.hold{color:var(--ldf-warn);background:rgba(176,129,40,.1)}
/* portal access hint — replicated header icons + arrow to the person/login icon */
.ldf-portal-access{margin-top:18px;border-top:1px solid var(--ldf-line);padding-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.ldf-portal-access .pa-row{display:inline-flex;align-items:center;gap:13px}
.ldf-portal-access .pa-icon{display:inline-flex;align-items:center;justify-content:center}
.ldf-portal-access .pa-user i{font-size:23px !important;line-height:1 !important;color:var(--ldf-ink)}
.ldf-portal-access .pa-flag{width:26px;height:auto;display:block}
.ldf-portal-access .pa-cart{width:23px;height:auto;display:block}
.ldf-portal-access .pa-sep{width:1px;height:20px;background:var(--ldf-line2)}
/* The tip is at 27 of the 54-wide viewBox, so it sits 26px into a 52px box. The
   icon it points at is the row's first child, 23px wide, so its centre is 11.5px
   in — which puts the correct left at 11.5 - 26. At -4px the tip landed 11px
   right of the icon, square on the separator, and read as pointing at the flag. */
.ldf-portal-access .pa-arrow{flex:none;width:46px;height:12px;overflow:visible}
.ldf-portal-access .pa-arrow path{fill:none;stroke:var(--ldf-ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* solid triangle rather than a drawn chevron — at 3.2 a stroked head closes up
   into a blob, and the shaft would show through its middle */
.ldf-portal-access .pa-arrow .head{fill:var(--ldf-ink);stroke:none}
.ldf-portal-access-cap{flex:none;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ldf-dim)}


.secdiv{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#15161b;color:#fff;border-radius:0;box-shadow:inset 0 2px 0 rgba(255,255,255,.92),inset 0 -2px 0 rgba(255,255,255,.92),0 22px 46px -14px rgba(0,0,0,.42),0 -14px 34px -22px rgba(0,0,0,.3);padding:74px 0;min-height:286px;display:flex;flex-direction:column;justify-content:center}
/* The slot these sit in pads 20px above and 8px below, which was tuned for
   figures that end on white. A full-bleed dark band with a drop shadow needs
   room on both sides and the same room on each: at 8px the band ran 10px PAST
   its own host and the service cards began inside it, so their shadow fell onto
   the dark instead of onto the paper. */
.ldf-slot:has(.secdiv){padding-top:38px !important;padding-bottom:38px !important}
/* FN-18 — the certificates explainer. The list carries the names; the panel
   leads with what the certificate does NOT cover, because that is the line that
   corrects the misunderstanding a brand walked in with. */
/* Four kinds, four colours, one token. Every accent in the row and in the panel
   reads --ck, so the taxonomy is legible before a word is: the law is ink, the
   ISO standards are an engineer's blue, the certifications proper are the
   terracotta this site already uses for a correction, and the words that are
   only ever claims are green — which is exactly the colour the label they end
   up printed on wants to be. */
.ck-law{--ck:#17181c;--ckq:rgba(23,24,28,.055)}
.ck-process{--ck:#2f5d86;--ckq:rgba(47,93,134,.07)}
.ck-product{--ck:#b96a4e;--ckq:rgba(185,106,78,.075)}
.ck-claim{--ck:#3f7a4a;--ckq:rgba(63,122,74,.075)}
/* Security paper. The rosette sits behind the panel, off to the right where the
   copy runs short; the hatch runs the full block. Both are pinned well under
   the type — raise the alphas and this stops being a background and starts
   being a pattern the copy has to fight. */
.cert-paper{position:relative;isolation:isolate}
.cert-guilloche{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background-image:repeating-linear-gradient(58deg,rgba(23,24,28,.03) 0 1px,transparent 1px 9px)}
/* the rosette is its own layer because a mask applies to the whole element, not
   to one background layer — masking them together would have faded the hatch */
.cert-guilloche::after{content:"";position:absolute;right:2%;bottom:12%;width:440px;height:440px;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,rgba(23,24,28,.085) 0 1px,transparent 1px 12px),
    repeating-radial-gradient(circle at 50% 50%,rgba(23,24,28,.06) 0 1px,transparent 1px 39px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 68%)}
.cert-wrap,.cert-paper>.ldf-note{position:relative;z-index:1}
/* stretch again. The marks and the green box below them are pinned to the
   floor of the panel, so the panel needs the list's height to have a floor. The
   space that opens is between the copy and the marks, which is where it reads
   as air rather than as a hole. */
.cert-wrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:30px;align-items:stretch}
.cert-track{list-style:none;margin:0;padding:0;border-top:1px solid var(--ldf-line)}
.cert-track li{border-bottom:1px solid var(--ldf-line)}
.cert-row{display:block;width:100%;text-align:left;background:none;border:0;padding:1.5px 9px;cursor:pointer;transition:background .18s}
.cert-row:hover{background:var(--ckq)}
.cert-row .n{display:block;font-family:'Rajdhani',sans-serif !important;font-weight:700 !important;font-size:16px;letter-spacing:.5px;line-height:1.15;text-transform:uppercase;color:var(--ck)}
.cert-row .s{display:block;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:12px;line-height:1.3;color:#4f4b44}
.cert-row.on{background:var(--ck)}
.cert-row.on .n{color:#fff}
.cert-row.on .s{color:rgba(255,255,255,.82)}
.cert-panel{border-top:2px solid var(--ck);padding-top:10px;display:flex;flex-direction:column}
.cert-kind{display:inline-block;font-family:'IBM Plex Mono',monospace !important;font-weight:600 !important;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;padding:3px 8px;border-radius:2px;background:var(--ck);color:#fff}
.cert-head{display:block}
.cert-name{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-size:23px;letter-spacing:-.6px;line-height:1.06;color:var(--ldf-ink);margin:7px 0 0}
.cert-f{margin-top:10px}
.cert-f .k{display:block;font-family:'IBM Plex Mono',monospace !important;font-weight:600 !important;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:#6b665c;margin-bottom:4px}
.cert-f p{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;font-weight:400 !important;font-size:14px;letter-spacing:0;line-height:1.62;color:#2e2c27}
.cert-f p b{font-weight:600 !important;color:#17181c}
/* the field the block exists for */
.cert-no{border-left:2px solid var(--ck);padding:8px 0 9px 12px;margin-top:14px}
.cert-no .k{color:var(--ck)}
.cert-no p{color:var(--ldf-ink)}
/* Grid, not flex with space-between: the mark centres in the space the button
   leaves rather than being shoved against the left edge, and the two still share
   a baseline. Directly under the copy — what sinks to the bottom of the column
   is .cert-how below. */
.cert-foot{margin-top:22px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
/* The marks arrive at whatever proportions the issuing body publishes them in,
   so the box caps rather than sizes them: tools/certlogos.mjs keys the white
   ground out to real transparency and trims to the ink, which is what stops one
   with generous built-in margins from landing half the optical size of one
   without. No card, no plate — the mark sits directly on the paper. */
.cert-logo{flex:0 0 auto;height:104px;width:auto;max-width:214px;object-fit:contain;object-position:center bottom;justify-self:center}
.cert-cta{flex:0 0 auto;display:inline-block;background:var(--ck);color:#fff !important;font-family:'Rajdhani',sans-serif !important;font-weight:600 !important;font-size:15.5px;letter-spacing:2px;line-height:1;text-transform:uppercase;padding:13px 24px;border-radius:2px;text-decoration:none !important;box-shadow:0 7px 18px -9px rgba(23,24,28,.7);transition:filter .16s,transform .16s,box-shadow .16s}
.cert-cta:hover,.cert-cta:focus-visible{color:#fff !important;filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 11px 22px -9px rgba(23,24,28,.75)}
.cert-foot{margin-bottom:14px}
/* who does what: they apply and pay the body, we build to the standard. Sage,
   not the terracotta of the correction above — this one is the offer. */
/* auto sinks it to the foot of the column; the foot's own bottom margin is what
   keeps a gap when the panel is full and auto resolves to zero */
/* the row of marks that introduces the offer below it. Small, quiet, and the
   one being read is the only one at full strength. */
.cert-marks{list-style:none;margin:auto 0 26px;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px}
.cert-marks li{margin:0;padding:0;display:flex;align-items:center}
.cert-marks img{display:block;height:60px !important;width:auto !important;object-fit:contain;opacity:.42;filter:grayscale(1);transition:opacity .2s,filter .2s}
.cert-marks li.on img{opacity:1;filter:none}
.cert-how{margin-top:0;padding:12px 15px;background:#eef4f1;border-left:2px solid #5f8f80}
.cert-how .k{display:block;font-family:'IBM Plex Mono',monospace !important;font-weight:700 !important;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:#33684e;margin-bottom:6px}
.cert-how p{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;font-weight:400 !important;font-size:14px;letter-spacing:0;line-height:1.62;color:#2e2c27}
.cert-how b{font-weight:600 !important;color:var(--ldf-ink);font-family:inherit !important}
@media(max-width:820px){.cert-wrap{grid-template-columns:1fr;gap:20px}}
/* THE PANEL BREATHES ON A PHONE.
   Anja: on mobile it is too cramped, with more room wanted either side of
   "Kdo ga zahteva?" and either side of the strip of marks above it. On a wide
   screen the block is one of two columns and the white space beside it does
   half this work; stacked, there is none of that, and 10px between fields
   reads as one wall of type. */
@media(max-width:820px){
  .cert-f{margin-top:16px}
  .cert-who{margin-top:26px}
  .cert-foot{margin-top:26px}
}
/* The captured strip at the foot of the page — one flat certificate_logos.png
   under "pripravljeno za trg". Its replacement now runs above FN-18, where the
   marks introduce the block that explains them, so this one goes. Hidden rather
   than deleted: fig-div3 is anchored beforebegin of the section holding it, and
   the markup stays byte-identical and reversible. */
section[data-id="771f227"]{display:none !important}
/* Two rule segments either side of the marks rather than one line behind them:
   painting a strip of page colour over a full-width rule only works if that
   colour is exactly right, and it was not — it read as a pale box. */
.ldf-marks{display:flex;align-items:center;gap:24px;padding:26px 0 24px}
.ldf-marks-rule{flex:1 1 auto;height:1px;background:var(--ldf-line,#e2ded6)}
.ldf-marks-row{flex:0 0 auto;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
.ldf-marks li{margin:0;padding:0;display:flex;align-items:center}
/* Anja: half the size. The marks introduce the block below them rather than
   being the point of it, and at full size they were reading as the point.

   !important, and it matters: the height set here never applied. The captured
   Elementor sheet carries .elementor img with height auto, the same specificity
   as this rule and later in the cascade, so the marks were drawn at their own
   112px all along and every size written here was ignored. That is why they
   looked as though they had suddenly grown. */
.ldf-marks img{display:block;height:56px !important;width:auto !important;object-fit:contain;opacity:.86;transition:opacity .2s}
.ldf-marks li:hover img{opacity:1}
/* Anja: more room either side of the strip on a phone — see the certificates
   block below it, which was loosened at the same time. */
@media(max-width:820px){.ldf-marks{padding:34px 0 32px;gap:14px}.ldf-marks-row{gap:16px}.ldf-marks img{height:42px !important}}
/* SL. 06 — the ℮ mark, filling the left column under the counters.
   auto 1fr: the mark keeps its own width and the copy takes the rest. */
/* Stacked, not side by side: this column is barely 205px wide, and setting the
   mark beside the copy left the copy 138px to wrap in. */
.ldf-emark{margin-top:20px;padding-top:16px;border-top:1px solid var(--ldf-line)}
/* 12% down from the 250px the artwork occupied: 54px of type against a 60px
   symbol lands at about 220. */
.ldf-emark-lockup{display:flex;align-items:center;gap:5px;margin-bottom:11px}
.ldf-emark-lockup .q{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:400 !important;font-size:54px;line-height:1;letter-spacing:-1.5px;color:#8d8e93}
.ldf-emark-lockup .e{flex:0 0 auto;width:60px;height:60px;color:var(--ldf-ink);overflow:visible}
/* The pack lives in the RIGHT column, under the batch ticket — the space this
   figure actually had spare. The panel is a flex column and the wrapper takes
   margin-top:auto, so the photograph sits ON the floor of the column instead of
   riding on the bottom of a ticket that grows a line at a time.
   94%, not 100%: the shot carries its own soft shadow, and at full bleed the
   container was clipping it. */
/* margin-top:auto is all this needs — .ldf-bench > .ldf-panel is already a flex
   column further up this file. The rule I added here to make it one applied to
   every .ldf-panel on the site to serve this one figure. */
.ldf-emark-pack{margin-top:auto;padding:20px 0 10px;display:flex;justify-content:flex-end}
/* Anja: the pack belongs under "izpolnjujemo pogoje…", not after the ticket.
   Side by side on a desktop the photograph is pinned to the foot of the right
   column, opposite the paragraph that explains the mark — which is exactly
   where it should be. Stacked on a phone that order comes out as explanation,
   ticket, photograph, and the picture ends up two blocks away from the words
   it belongs to. Lifted above the ticket here, so the reading order is the one
   the desktop composition implies. */
@media(max-width:760px){
  .ldf-panel:has(.ldf-batch){display:flex;flex-direction:column}
  .ldf-panel:has(.ldf-batch) .ldf-emark-pack{
    order:-1;
    margin-top:0;
    padding:4px 0 18px;
    justify-content:center;
  }
}
/* No border, and well short of the full column. The photograph carries its own
   soft shadow that fades out towards its edges, so a hairline round it cut
   straight through the fade — and at full width the fade ran into the panel's
   own edge. Smaller, with the frame gone, it falls off into the paper. */
.ldf-emark-shot{display:block;width:100%;height:auto;border:0}
/* the stand-in glyph: a serif stack chosen for actually HAVING U+212E, since
   the site's own faces mostly do not */
.ldf-emark-k{display:block;font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ldf-dim);margin-bottom:4px}
.ldf-emark-h{font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-size:19px;letter-spacing:-.4px;line-height:1.12;color:var(--ldf-ink);margin:0 0 7px}
.ldf-emark-p{margin:0;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;line-height:1.72;color:#3a3b40}
/* Anja: "izpolnjujemo pogoje" set apart in a different face — the rest of this
   block explains a rule, this line is the claim about us that follows from it */
.ldf-emark-ok{margin:9px 0 0;font-family:'Fraunces',Georgia,serif !important;font-weight:400 !important;font-style:italic;font-size:14.5px;line-height:1.32;letter-spacing:-.1px;color:var(--ldf-ink);border-left:2px solid #5f8f80;padding-left:11px}
@media(max-width:820px){.ldf-emark-lockup .q{font-size:44px}.ldf-emark-lockup .e{width:49px;height:49px}}
/* FN-16 — the formulator, pinned to the foot of the window.
   Off-screen by default and slid up by .in; the transcript is collapsed to
   nothing until .open, so at rest this is one line of chrome. transform rather
   than bottom so the slide is composited and does not relayout the page under
   it on every scroll event. */
.ask-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(101%);transition:transform .34s cubic-bezier(.22,.61,.36,1);background:var(--ldf-paper,#f6f2ec);border-top:2px solid #17181c;box-shadow:0 -14px 34px -18px rgba(23,24,28,.5)}
.ask-dock.in{transform:translateY(0)}
/* The title in the middle of the bar, not at its left edge.
   The chevron keeps the right end, so the words are centred against the bar
   itself rather than against whatever is left over beside it. */
/* The promise, under the empty field.
   Shown while nobody has typed anything and gone the moment they do — so the
   fact that a question can end up in Anja's inbox is said before it happens,
   not after. */
.ldf-chathint{
  margin-top:7px;
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:10px;line-height:1.5;letter-spacing:.4px;
  color:var(--ldf-dim,#7a7b80);
  max-width:62ch;
}
.ldf-chatrow input:disabled{opacity:.6}
.ldf-btn:disabled{opacity:.45;cursor:default}
.ask-dock-handle{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:9px 46px;background:none;border:0;cursor:pointer;text-align:center;position:relative}
.ask-dock-handle .ask-dock-chev{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.ask-dock-tag{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ldf-ink,#17181c)}
.ask-dock-sub{flex:1;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ldf-dim,#7a7b80);text-align:right}
.ask-dock-chev{font-size:12px;line-height:1;color:var(--ldf-dim,#7a7b80)}
.ask-dock-handle:hover .ask-dock-chev{color:var(--ldf-ink,#17181c)}
/* grid-template-rows 0fr -> 1fr collapses the transcript without a fixed height,
   so the panel is exactly as tall as the conversation in it */
.ask-dock-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1)}
.ask-dock.open .ask-dock-body{grid-template-rows:1fr}
.ask-dock-body>*{min-height:0;overflow:hidden}
/* block, not the flex the figure normally is: as a flex item the body sized to
   its content and sat in the middle of the bar at 448px wide, with the auto
   margins it was given piling on top of that */
.ask-dock .ask-docked{display:block;width:100%;max-width:none;margin:0;border:0;background:none;box-shadow:none}
.ask-dock .ask-docked .ldf-body{display:block;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:0 46px 16px;border:0;background:none}
.ask-dock .ask-docked .ldf-chat{height:min(34vh,260px)}
@media(max-width:820px){
  .ask-dock-handle{padding:8px 20px}
  .ask-dock .ask-docked .ldf-body{padding:0 20px 12px}
  .ask-dock-sub{display:none}

  /* Opening it on a phone.
     Three things used to fight each other here. The chat was sized in vh,
     which does not shrink when the keyboard comes up, so the field ended up
     behind it. The panel had no ceiling, so it could grow taller than what was
     left of the screen. And the browser's own scroll-to-reveal moved a
     position:fixed panel, which on iOS is the jump you can never quite catch.

     dvh is the fix for the first two: it IS the visible viewport, keyboard
     included, so the sheet and the chat inside it both shrink to fit as the
     keyboard opens instead of being pushed off the bottom. */
  .ask-dock{
    max-height:86vh;
    max-height:86dvh;
    display:flex;flex-direction:column;
  }
  .ask-dock-body{flex:1 1 auto;min-height:0}
  .ask-dock-body>*{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .ask-dock .ask-docked .ldf-chat{
    height:min(38vh,240px);
    height:min(38dvh,240px);
  }
  /* a tap target that does not need aiming, and type that iOS will not zoom
     into — anything under 16px makes Safari scale the whole page */
  .ask-dock .ask-docked input{font-size:16px;padding:12px 14px}
  .ask-dock .ask-docked .ldf-btn{min-width:46px;min-height:44px}
}
.secdiv-inner{position:relative;z-index:2;width:100%;max-width:var(--ldf-w,1140px);margin:0 auto;padding:0 46px}
.secdiv-field{position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none}
.secdiv-ring{position:absolute;z-index:0;right:6%;top:50%;transform:translateY(-50%);width:300px;height:300px;border:1px solid rgba(255,255,255,.09);border-radius:50%;pointer-events:none}
.secdiv-ring::after{content:"";position:absolute;inset:44px;border:1px solid rgba(255,255,255,.06);border-radius:50%}
.secdiv-icon{position:absolute;z-index:2;right:calc(6% + 75px);top:50%;transform:translateY(-50%);width:150px;height:150px;pointer-events:none;overflow:visible}
.secdiv-icon circle,.secdiv-icon line,.secdiv-icon rect,.secdiv-icon path{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.secdiv-icon .sdi-drop,.secdiv-icon .sdi-dot{fill:rgba(255,255,255,.85);stroke:none}
.sdi-d1{animation:sdi-fall 2.6s ease-in infinite}
.sdi-d2{animation:sdi-fall 2.6s ease-in infinite 1.3s}
@keyframes sdi-fall{0%{opacity:0;transform:translateY(0)}12%{opacity:1}78%{opacity:1;transform:translateY(24px)}100%{opacity:0;transform:translateY(24px)}}
.sdi-wave{animation:sdi-wave 3s ease-in-out infinite}
@keyframes sdi-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.sdi-impeller{transform-box:fill-box;transform-origin:center;animation:sdi-spin 3.6s linear infinite}
.secdiv-icon .sdi-hub{fill:rgba(255,255,255,.72);stroke:none}
@keyframes sdi-spin{to{transform:rotate(360deg)}}
.sdi-route{stroke-dasharray:3 7;opacity:.55;transform-box:view-box;transform-origin:50px 50px;animation:sdi-spin 22s linear infinite}
.sdi-orbit{transform-box:view-box;transform-origin:50px 50px;animation:sdi-spin 6s linear infinite}
.secdiv-hud{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:22px}
.secdiv-eyebrow b{color:#fff;font-weight:500 !important;font-family:'IBM Plex Mono',monospace !important}
.secdiv-coord{white-space:nowrap}
.secdiv-h{position:relative;font-family:'Fraunces',Georgia,serif !important;font-weight:300 !important;font-optical-sizing:auto;font-variation-settings:'opsz' 144,'wght' 300;font-size:clamp(30px,4.2vw,54px);line-height:1;letter-spacing:-1px;margin:0;color:#fff}
.secdiv-h .it{font-style:italic;font-variation-settings:'opsz' 144,'wght' 420}
.secdiv-sub{position:relative;font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66);max-width:560px;margin:18px 0 0}
@media(prefers-reduced-motion:reduce){.secdiv-icon *{animation:none !important}}
@media(max-width:720px){.secdiv{padding:54px 0;min-height:210px}.secdiv-inner{padding:0 26px}.secdiv-coord{display:none}.secdiv-ring{right:-14%}.secdiv-icon{display:none}}


/* The band squares up with the masthead it sits under. Every slot is 1140 by
   default, but .rim-top and .rim-bottom — the rule, the eyebrow and the
   LABDERMA / date / coordinates line — are 1170, so the ticker was coming out
   10px short at each end and reading as misaligned rather than inset. */
.ldf-slot:has(.pb-wrap){--ldf-w:1170px}
.pb-wrap{display:flex;align-items:stretch;min-height:54px;border-top:1px solid rgba(23,24,28,.16);border-bottom:1px solid rgba(23,24,28,.16);background:#faf9f6;overflow:hidden;border-radius:2px}
.pb-label{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 22px;border-right:1px solid rgba(23,24,28,.14);font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:#17181c;background:rgba(23,24,28,.02);white-space:nowrap}
.pb-dot{width:6px;height:6px;border-radius:50%;background:#3f7d5f;box-shadow:0 0 8px rgba(63,125,95,.8);animation:pb-pulse 1.7s infinite}
@keyframes pb-pulse{50%{opacity:.35}}
.pb-marquee{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.pb-track{display:inline-flex;align-items:center;height:100%;white-space:nowrap;animation:pb-scroll linear infinite;will-change:transform}
.pb-wrap:hover .pb-track{animation-play-state:paused}
@keyframes pb-scroll{to{transform:translateX(-50%)}}
.pb-slide{display:inline-flex;align-items:center;gap:11px;height:100%;padding:0 30px;border-right:1px solid rgba(23,24,28,.08);text-decoration:none;color:inherit}
.pb-eyebrow{font-family:'IBM Plex Mono',monospace !important;font-weight:500 !important;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#b9b4ab}
.pb-text{font-family:'Libre Franklin',sans-serif !important;font-weight:400 !important;font-size:13.5px;color:#3a3a3a}
.pb-slide.is-link:hover .pb-text{color:#17181c}
.pb-arrow{font-family:'IBM Plex Mono',monospace !important;font-weight:400 !important;color:#8b877f;transition:transform .2s}
.pb-slide.is-link:hover .pb-arrow{transform:translateX(4px);color:#17181c}
.pb-img{height:46px;width:auto;display:block}
@media(max-width:720px){.pb-label{padding:0 14px;font-size:9.5px;letter-spacing:1.5px}.pb-slide{padding:0 20px}}
@media(prefers-reduced-motion:reduce){.pb-track{animation:none;transform:none}}


/* Full-bleed, standalone rolling banner (like the old site + the hero bands):
   spans edge-to-edge, white top/bottom rule + lift shadow, breathing room up/down,
   no gray box. Body overflow-x:hidden keeps 100vw from adding a scrollbar. */
.picb-wrap{--picb-h:250px;position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:13px;margin-bottom:13px;background:#f2f0eb}
.picb-marquee{overflow:hidden}
.picb-track{display:inline-flex;align-items:center;white-space:nowrap;animation:picb-scroll linear infinite;will-change:transform}
.picb-wrap:hover .picb-track{animation-play-state:paused}
@keyframes picb-scroll{to{transform:translateX(var(--picb-loop,-50%))}}
.picb-slide{flex:0 0 auto;height:var(--picb-h);display:block;text-decoration:none}
/* !important + explicit height beats the captured theme's img{height:auto} (which
   was letting frames render at native height and get clipped — the "cut" bottom). */
.picb-img{height:var(--picb-h) !important;width:auto !important;max-width:none !important;display:block}
.picb-slide .cs-stage{height:var(--picb-h) !important;width:auto !important}
@media(max-width:720px){.picb-wrap{--picb-h:150px;margin-top:18px;margin-bottom:18px}}
/* Anja: even air above and below the picture banner.
   Its own margins are symmetric; the slot it sits in is not — padding 20px on
   top against 8px underneath — and what is below it closes up further still,
   so the measured gaps came out 56 above and 1 below. The slot is levelled and
   the spacing stated on the banner itself, where both sides are visible. */
@media(max-width:760px){
  /* Padding on the slot, not margin on the banner.
     With the slot padded to nothing, the banner margins collapsed straight
     through it — the slot did not grow, and the banner ended up hanging 18px
     below its own section with the next one starting 40px before it finished.
     Padding cannot collapse, so the space is real and equal on both sides. */
  /* Measured to the words either side rather than to the boxes, which are
     mostly empty: 81px from "Prijava — ikona osebe…" down to the banner and 55
     from the banner down to "STORITEV 01". The neighbours contribute 57 above
     and 31 below on their own, so the padding here makes up the difference and
     lands both at about 61. */
  .ldf-slot:has(.picb-wrap){padding-top:4px !important;padding-bottom:30px !important}
  .picb-wrap{margin-top:0 !important;margin-bottom:0 !important}
}
@media(prefers-reduced-motion:reduce){.picb-track{animation:none}}


      /* Back to the styling of f1ccc47, verbatim.

         Between then and now the strip was enlarged to 94px and given a tinted
         band of its own. That band covered the through-line: the captured markup
         draws an <hr> across the strip at z-index:-1, and a background on the
         section paints over it. What made the original work is that the strip
         stayed on the page's own paper, the line ran the full width, and each
         mark's opaque light background interrupted it — the same figure as the
         molecule→PIF connector above it, which is where Anja recognised it from.

         So: no band, no padding override, 62px marks, and the marks keep the
         white backgrounds the capture gives them, because those backgrounds ARE
         the interruption. */
      [data-id="eb7986d"] .bd-imagelink-61{font-size:0 !important}
      [data-id="eb7986d"] .bd-imagestyles-2,
      [data-id="eb7986d"] .bd-eu-stars{
        height:62px !important;width:auto !important;max-width:none !important;
        display:inline-block !important;vertical-align:middle !important}
      /* THE WHITE ROUND EACH MARK IS THE DRAWING, NOT SPACING.
         The line runs behind both marks and is hidden by their white
         backgrounds, so each mark's PADDING is the length of line it puts out.
         The capture gives the shield 20px left and 20px right and the ring 20px
         left and nothing right — so there were 40px of paper between the two
         marks (32 after the -8px pull), while on the outside the line stopped
         20px short of the shield and ran right up against the ring. Anja: too
         much room between them, and the line is not the same distance from the
         graphic on the two sides. Both are that padding.
         Now 14px at each outer end and 8+8 between, and the -8px pull that was
         compensating for the old 40 comes out with it. */
      [data-id="eb7986d"] .bd-imagestyles-2{padding:0 8px 0 14px !important}
      [data-id="eb7986d"] .bd-eu-stars{padding:0 14px 0 8px !important;margin-left:0 !important}
      /* LEVEL WITH EACH OTHER.
         They are the same height — 62px both — but the capture hangs the shield
         on 38px above and 30px below, and vertical-align:middle centres the
         MARGIN box, so an uneven pair sits its picture (38-30)/2 = 4px lower
         than its neighbour. That is the "one of them is shifted", and it is why
         the rule ran through the ring's middle but 4px above the shield's.
         Equal margins that still add up to 68 leave the line box exactly as
         tall as it was, so the <hr> — pinned 66px down the same link, see the
         note below — does not move with them. */
      [data-id="eb7986d"] .bd-imagestyles-2{margin-top:34px !important;margin-bottom:34px !important}
      /* Balancing the air above and below the marks — WITHOUT touching either of
         their margins. The <hr> is positioned at a fixed offset from the top of
         the same link, and the marks sit on a line box whose height is their own
         margin box: change either margin and they slide off the line. (Trimming
         the bottom margin to 22px is exactly how the line came out crooked.)
         So the section moves instead: padding adds above, a negative bottom
         margin pulls what follows up, and the marks keep their 30/30. */
      [data-id="eb7986d"]{padding-top:14px !important;margin-bottom:-10px !important}
      /* THE SAME SIZE AS THE CERTIFICATE MARKS BELOW.
         Those drop 56 -> 42 at this width (.ldf-marks img), and at 62 these two
         were coming out half again as big as them on a phone — Anja: they must
         not be too big there, about the size of the certificate icons. Same
         breakpoint, so the two strips always change together.

         The shield's margins go to 44 rather than staying at 34. What has to
         hold still is the MARGIN BOX: it is the tallest thing on the line, so
         its height is the line's height, and the <hr> is pinned to the link
         rather than to the line — shrink the box and the marks climb off the
         rule. 44 + 42 + 44 is the same 130 that 34 + 62 + 34 was. */
      @media(max-width:820px){
        [data-id="eb7986d"] .bd-imagestyles-2,
        [data-id="eb7986d"] .bd-eu-stars{height:42px !important}
        [data-id="eb7986d"] .bd-imagestyles-2{
          margin-top:44px !important;margin-bottom:44px !important;
          padding:0 6px 0 10px !important}
        [data-id="eb7986d"] .bd-eu-stars{padding:0 10px 0 6px !important}
      }