/* ============================================================
   engros.css — /engros/ (da) og /tukku/ (fi)
   Hentes KUN på de to skabeloner (inc/engros.php).

   HVAD DER IKKE STÅR HER
   Ticker, sec-head, edits, onb, manifesto, faq-item og closer bor i theme.css
   og bruges uændret. De to sider bar før ~930 linjer inline-CSS HVER, med deres
   eget farvesystem (--jy-blue, --jy-navy) og deres egen Poppins fra Google. Det
   hele er væk. Tilbage er kun det theme.css ikke kender: hero'ens ink-variant
   med formularkortet, sammenligningstabellen, spec-linjen på fordelskortene,
   punktlisten i manifestet, og felterne i CF7-formularen.

   HERO'EN ER EN VARIANT, IKKE EN KOPI. .hero--form arver alt fra theme.css'
   .hero og ændrer kun flade, spalter og skriftstørrelse. Forsidens hero er
   urørt. Det var netop to sider der delte for meget der gjorde dem ens.

   Alt er scopet til .engros, så en enkelt regel her aldrig kan sive ud på de
   19.711 produktsider theme.css også dækker.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — ink, delt, med prøveformularen som højre kolonne

   HVORFOR SIDEN SER ANDERLEDES UD END FORSIDEN (Marc, 30/8)
   "Det ligner bare forsiden man kommer til." Målt, og han havde ret: de to
   hero'er delte komponent (.hero), baggrund (kobolt), de SAMME to stofbilleder
   i den samme collage, det samme 1994-stempel, den samme knaprække, og den
   anden knap var ord for ord den samme ("Se kataloget →"). På 390px var endda
   h1'en samme størrelse, 56px. Forsidens egen h1 sælger i forvejen engros
   ("Engros ud af Ikast"), så der var reelt to forsider.

   Tre ting adskiller dem nu, og de virker alle tre i det sekund siden loader:
   FLADEN er en mørk natblå i stedet for kobolt. KOMPOSITIONEN er tekst + et
   hvidt formularkort i stedet for tekst + collage. SKRIFTEN er roligere, fordi
   overskriften ikke længere er det eneste på skærmen (se h1-reglen nedenfor).
   Kobolt er stadig husets farve på fladen, men kun som lys og streg, aldrig som
   fyld: gløden, ringene og skiven nedenfor, plus knappen og trin-tælleren.

   HVORFOR FORMULAREN ER FLYTTET HERTIL
   Den lå i sektion 05. Målt: 7185px = 7,3 skærme nede på desktop, 12425px =
   14,7 skærme på mobil, altså 70 og 73 % nede ad siden. Der var NØJAGTIG to
   links til #form: ét i hero'en og ét i afslutningen på 9331px, altså under
   selve formularen. Går man ned ad siden, peger intet på formularen før man
   allerede er forbi den, og headeren er position: static, så den ene vej i
   hero'en forsvinder ved første scroll. Nu er formularen 0 skærme nede.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   FLADEN, GEOMETRIEN OG BEVÆGELSEN (Marc 31/8)

   "heroen skal ikke være sort, det bliver lidt for mørkt, så skal der i hvert
   fald ske noget med nogle geometriske former eller css bevægelser".

   Han har ret, og målt er det værre end det ser ud alene: fladen var
   var(--ink) = #0D1019, og talbåndet LIGE nedenunder er også ink. To sektioner
   i træk i samme næsten-sorte gav ét ubrudt mørkt felt på 760px (1512) og
   1295px (390) før det første lyse pixel. Hero'en var ikke bare mørk, den var
   flad og den var stor.

   TRE GREB, OG DE LØSER HINANDEN
   1. FLADEN er ikke længere en farve, men et forløb: #1F2848 øverst til
      venstre, ned mod #121728. Alene det løfter luminansen fra 0,0052 til
      0,0229 og gør den natblå i stedet for sort.
   2. GEOMETRIEN er koncentriske cirkler i husets egen stregtykkelse, 1,5px, den
      samme som --rule. Motivet er ikke nyt: login-siden bygger på præcis den
      skive, og den er godkendt. Her ligger skiven på sømmen mellem den mørke
      spalte og det hvide formularkort, hvor der i forvejen er en kant.
   3. BEVÆGELSEN er to lag der driver mod hinanden over 46s og 40s. Kun
      transform, aldrig layout-egenskaber, så det er ét composited lag pr.
      pseudoelement og nul reflow. Der er INGEN bevægelse på tekst eller
      formular: en flade der ånder er atmosfære, et felt der flytter sig mens
      man udfylder det er en fejl.

   HVORFOR IKKE BARE KOBOLT
   Fordi vi lige har brugt en runde på det modsatte. Hele grunden til at fladen
   blev ink var Marcs "det ligner bare forsiden", og forsidens hero ER kobolt.
   En lysere flade måtte derfor lyse UDEN at blive husets blå. Derfor kobolt
   som glød og streg oven på natblå, ikke som fyld.

   KONTRAST, MÅLT PÅ DET VÆRSTE PIXEL
   snow på ink var 17,9:1. Nu: 13,5:1 på den lyse ende af forløbet, 10,3:1 hvor
   koboltgløden er stærkest, og 7,4:1 i det absolut værste tilfælde, en
   ringstreg i gløden direkte bag tekst. AA kræver 4,5:1 og AAA kræver 7:1, så
   selv værste pixel klarer AAA.

   MÅLT PÅ KONTROLFLADEN FØR DEPLOY, 1512 · 1280 · 390 · 812
   hero-højden er BIT-IDENTISK med og uden hele blokken ved alle fire bredder
   (760 · 711 · 1295 · 867), og scrollWidth == innerWidth alle fire steder.
   Dekorationen koster altså nul layout og kan ikke skabe vandret overløb.

   overflow: clip og ikke hidden. hidden ville gøre hero'en til en
   scroll-container og kan slå position: sticky ihjel for efterkommere. De to
   linjer står med vilje i den rækkefølge, så en browser uden clip får hidden.
   isolation: isolate holder z-indexene lokale, så .hero__form's z-index: 3
   længere nede stadig kun konkurrerer inde i hero'en.
   ------------------------------------------------------------ */
.engros .hero--form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(120% 88% at 22% 4%,
      rgba(31, 93, 196, 0.34) 0%, rgba(31, 93, 196, 0) 62%),
    linear-gradient(157deg, #1F2848 0%, #182034 50%, #121728 100%);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 96px);
}

/* Indholdet over dekorationen. .hero__inner er eneste barn, men reglen skrives
   på > * så et fremtidigt søskendeelement ikke lander bag ringene. */
.engros .hero--form > * { position: relative; z-index: 1; }

/* Ringene. inset: -30% gør laget større end fladen, så laget kan drive de
   ~40px uden at en kant nogensinde kommer ind i billedet.
   Stoppet går 1,5px -> 2,5px og ikke 1,5px -> 1,5px: et hårdt stop i en
   radial-gradient trapper synligt på skrå buer. 1px udtoning fjerner det. */
.engros .hero--form::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  --ring-alfa: 0.30;
  --ring-afstand: 94px;
  background-image: repeating-radial-gradient(circle at 66% 20%,
    rgba(74, 130, 219, var(--ring-alfa)) 0 1.5px,
    rgba(74, 130, 219, 0) 2.5px var(--ring-afstand));
  animation: eng-ring 46s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

/* Ringafstanden er i px og følger derfor ikke spalten. På 390px er hero'en
   1295px høj og 390 bred, så de samme 94px lægger mange flere buer hen over en
   langt smallere tekstspalte end på 1512. Tyndere og længere fra hinanden på
   telefon. To variabler frem for at gentage hele gradienten. */
@media (max-width: 700px) {
  .engros .hero--form::before { --ring-alfa: 0.24; --ring-afstand: 120px; }
}

/* Skiven på sømmen. right i procent og bredden i min(px, vw), så den følger
   kortets kant på store skærme og skrumper med spalten på små. */
.engros .hero--form::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(660px, 92vw);
  aspect-ratio: 1;
  right: 18%;
  top: 50%;
  translate: 50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(74, 130, 219, 0.42);
  animation: eng-skive 40s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

@keyframes eng-ring {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-38px, 26px, 0) scale(1.06); }
}

@keyframes eng-skive {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(34px, -24px, 0); }
}

.engros .hero--form .hero__inner {
  /* Ikke temaets 12 spalter. Kortet skal have et gulv i px, ikke i brøkdele:
     under 400px begynder to-kolonne-rækken inde i kortet at klemme felterne.
     0,85fr holder samtidig kortet fra at brede sig ud over ~560px på store
     skærme, hvor båndet i forvejen er kappet ved --content-inner. Det er den
     iMac-fejl vi har haft før: en formular alene midt i en tom kolonne.
     Målt: 1024 → 501/400 px · 1512 → 745/551 · 2560 → 752/556. */
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
  gap: clamp(32px, 4vw, 72px);
  /* start, ikke center. Kortet vokser ~800px når trin 2 folder sig ud, og med
     center bliver overskriften skubbet lige så langt ned — et spring midt i
     en handling brugeren selv har sat i gang. Ved trin 1 er de to spalter i
     forvejen næsten lige høje (målt 1512: kort 586px, tekst ~570px), så
     topjusteringen ændrer intet dér. */
  align-items: start;
  min-height: 0;
}

.engros .hero--form .hero__copy,
.engros .hero--form .hero__form { grid-column: auto; }
.engros .hero--form .hero__copy { padding-bottom: 0; }

/* ------------------------------------------------------------
   Hero-overskriften: mindre end --t-display, og mindre end før

   Den gamle regel var clamp(56px, 7,3vw, 104px) mod husets 8vw/112px, fordi
   overskriften stod i en 6/12-kolonne og det længste finske ord,
   "kilpailijoillasi", løb ud af den i hele båndet 1024-1440px.

   Kolonnen er nu smallere OG deler skærmen med et formularkort, så det problem
   er større, ikke mindre. Samtidig er overskriften ikke længere alene på
   fladen, og en 104px display-type ved siden af en formular ville skubbe
   formularen ned under folden på præcis de mellemstore skærme vi lige har
   flyttet den op for. Derfor 5,4vw med loft på 80px og gulv på 44px.

   Sidegevinsten er den Marc bad om: forsidens h1 topper på 112px og er 56px på
   mobil. Denne er 80 og 44. Forskellen kan ses uden at læse et ord.
   Reglen rammer BEGGE sprog med vilje: de to sider er den samme side.
   ------------------------------------------------------------ */
.engros .hero__copy h1 { font-size: clamp(44px, 5.4vw, 80px); }

/* Anden saetning starter altid paa sin egen linje.
   Overskriften er to saetninger, og den anden ligger allerede i et <em>. Uden
   den her regel loeb de sammen ved 834 og 430: linje 1 blev "Stof engros.
   Print" (412px i en 422px boks) og linje 2 blev det forladte "dine" paa
   103px. Ved alle andre bredder braekkede browseren alligevel efter punktummet,
   saa reglen fastholder det der i forvejen var den tilsigtede rytme.
   Kun .engros: forsidens hero bruger samme <em>-moenster og er godkendt som den
   staar. */
.engros .hero__copy h1 em { display: block; }

/* .faq-content har max-width: 780px i theme.css, men ingen margin. Uden .wrap
   omkring (bevidst, se partialen) skal den centrere sig selv. */
.engros .faq-content { margin: 0 auto; }

/* Første .faq-item ligger lige under .sec-head og skal ikke have en streg
   ovenover, den ville læse som en fortsættelse af overskriften. */
.engros .faq-content .faq-item:first-child { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------
   01 / Sammenligningstabellen
   En RIGTIG <table>. Det er tabeldata, og en skærmlæser skal kunne høre
   hvilken kolonne en celle hører til. Rulningen bor på wrapperen, aldrig på
   <body> (overflow på body knækker position: sticky i headeren).
   ------------------------------------------------------------ */
.eng-compare {
  max-width: var(--content-inner);
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.eng-compare table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}

/* Kolonnebredden hører til i hovedet. Stod den på th:first-child, ramte den
   også hver rækkes <th scope="row">, og i kortvisningen under 700px, hvor den
   celle er display:block, blev den låst til 26 % af en telefonskærm. Målt: 90px
   boks mod 126px tekst, så "Eksklusiiviset" og "Certificering" blev klippet. */
.eng-compare thead th:first-child { width: 26%; }

.eng-compare thead th {
  text-align: left;
  padding: 20px 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracked-eye);
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--snow);
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}

/* Vores egen kolonne er den siden handler om. Den markeres én gang i hovedet
   og bærer en svag flade hele vejen ned, i stedet for at hver celle råber. */
.eng-compare thead th.is-us {
  color: var(--cobalt);
  background: var(--cobalt-tint);
  border-bottom-color: var(--cobalt);
}

.eng-compare tbody tr { border-bottom: 1px solid var(--hairline); }
.eng-compare tbody tr:last-child { border-bottom: 0; }

.eng-compare tbody th[scope="row"] {
  text-align: left;
  padding: 18px 24px;
  font-weight: 500;
  color: var(--ink);
  vertical-align: top;
}

.eng-compare tbody td {
  padding: 18px 24px;
  vertical-align: top;
  line-height: 1.45;
}

.eng-compare tbody td.is-us {
  background: var(--cobalt-wash);
  color: var(--ink);
  font-weight: 500;
}

.eng-compare tbody td.is-them { color: var(--ink-mute); }

.eng-compare__mark {
  color: var(--cobalt);
  font-weight: 600;
  margin-right: 10px;
}

/* ------------------------------------------------------------
   02 / Spec-linjen på fordelskortene
   Mono, fordi den bærer tal og enheder. Samme rolle som .mono i tokens, men
   med sin egen streg, så den lægger sig som en teknisk fodnote under teksten
   og over kortets .edit__foot.
   ------------------------------------------------------------ */
.engros .eng-spec {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Punktlisten i manifestet
   ------------------------------------------------------------ */
.engros .eng-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 46ch;
}

.engros .eng-points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.engros .eng-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 1.5px;
  background: var(--cobalt);
}

.engros .eng-points strong { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------
   PRØVEFORMULAREN — kortet i hero'en

   Feltstilen stod før i theme.css:806-813, scopet til .form-section. Den
   sektion findes ikke længere på denne side, så reglerne er skrevet her i
   stedet for at hænge en .form-section-klasse på et hero-kort for at snyde en
   selektor. theme.css' egne .form-section-regler er urørte og bærer stadig
   kontaktsidens formular.

   Kortet har ingen ramme. Husets 1,5px ink-streg er usynlig på ink-fladen, og
   en hvid flade på mørk bund har ikke brug for en kant for at være et kort.
   ------------------------------------------------------------ */
.engros .hero__form { position: relative; z-index: 3; }

.eng-form {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-1);
  padding: clamp(24px, 2.4vw, 40px);
}

/* Formularen fylder kortet. 680px-kappen i theme.css er sat til den smalle
   kontaktformular og ville efterlade en tom højrekant her. */
.eng-form .wpcf7 { max-width: none; }
.eng-form .wpcf7 form { margin: 0; }

/* --- Kortets eget hoved --- */
.eng-form__head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}

.eng-form__head .eyebrow { margin-bottom: 12px; }

.eng-form__h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
}

.eng-form__h2 em { font-style: italic; font-weight: 400; }

.eng-form__lead {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

/* --- Felter --- */
.eng-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.eng-form .form-group { margin-bottom: 18px; }
.eng-form .form-row .form-group { margin-bottom: 18px; }

/* CF7 pakker hvert felt i et <p>. Marginen der lægger sig oveni
   .form-group's, så rytmen bliver dobbelt. */
.eng-form .form-group p { margin: 0; }

.eng-form .form-group > label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracked-eye);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}

.eng-form input[type="text"],
.eng-form input[type="email"],
.eng-form input[type="tel"],
.eng-form select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  color: var(--ink);
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
}

.eng-form textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  resize: vertical;
}

.eng-form input:focus,
.eng-form textarea:focus,
.eng-form select:focus { outline: none; border-color: var(--cobalt); background: var(--paper); }

/* CF7's skjulte felter ligger i et <fieldset class="hidden-fields-container">.
   Browserens standardramme på et fieldset er 2px, og v2 nulstiller den ikke.
   Målt på den levende side: en tom kasse på 742x19px øverst i formularen med
   en grå 2px-ramme. Honeypotten inde i den rører vi ikke, den skal blive i
   DOM'en for at virke. */
.eng-form fieldset.hidden-fields-container {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

/* --- Radio: hvilken type virksomhed ---
   [radio ... use_label_element] pakker HVER mulighed i sit eget <label>, og
   theme.css:797 gør alle labels i en .form-section små, versale og grå. Uden
   denne regel bliver de fem valgmuligheder ulæselige mikrotekst. */
.eng-form .form-group-choice .wpcf7-radio,
.eng-form .form-group-categories .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.eng-form .wpcf7-list-item { margin: 0; }

.eng-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 18px 11px 14px;
  /* Berøringsmål: 44px høj, også når teksten er kort. */
  min-height: 44px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--snow);
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}

.eng-form .wpcf7-list-item label:hover { border-color: var(--ink-faint); background: var(--snow-deep); }

.eng-form .wpcf7-list-item input[type="radio"],
.eng-form .wpcf7-list-item input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--cobalt);
  cursor: pointer;
}

/* :has() bærer den valgte tilstand. Uden JS, uden ekstra markup. Falder en
   browser fra, står valget stadig i selve radioknappen. */
.eng-form .wpcf7-list-item label:has(input:checked) {
  border-color: var(--cobalt);
  background: var(--cobalt-tint);
  font-weight: 500;
}

.eng-form .wpcf7-list-item label:has(input:focus-visible) {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.eng-form .wpcf7-list-item-label { line-height: 1.25; }

/* ------------------------------------------------------------
   To trin i ÉN formular

   Marc: "Det skal være nemmere at finde formularen OG udfylde den." Det andet
   halve er det her. Formularen spurgte om syv ting og fem obligatoriske felter,
   før den gav noget tilbage. Nu spørger første skærmbillede om tre:
   virksomhed, CVR og e-mail. Resten folder sig ud på stedet.

   Det er ét trin i visningen, IKKE to indsendelser. Alle felter står i den
   samme <form>, og der sendes stadig én gang. Ingen halvfærdig ansøgning kan
   gå tabt mellem to sider, fordi der ikke er to sider.

   UDEN JAVASCRIPT: klassen .jsl-engros-steps sættes af engros.js som allerførste
   linje, i <head> og uden defer. Kommer scriptet ikke, findes klassen ikke,
   begge trin står åbne, submit står der, og formularen virker præcis som før.
   Hele foldemekanikken hænger derfor på ÉN klasse, og standardtilstanden er
   den der virker.
   ------------------------------------------------------------ */
.jsl-engros-steps .eng-form:not(.is-open) .eng-step[data-step="2"] { display: none; }
.jsl-engros-steps .eng-form:not(.is-open) .form-submit { display: none; }
.jsl-engros-steps .eng-form.is-open .eng-next { display: none; }

/* CF7 kører wpcf7_autop på formularindholdet og pakker [submit] i et <p>.
   Skjuler vi kun knappen, bliver afsnittet stående som et 0px fleks-element
   mellem Fortsæt og tælleren — og æder stadig sin gap. Målt: 16px for meget
   på trin 1. Vi skjuler derfor afsnittet, ikke kun knappen inde i det.
   :has() fordi foden en dag kan få et afsnit der IKKE er send-knappen. */
.jsl-engros-steps .eng-form:not(.is-open) .eng-form__foot p:has(.form-submit) { display: none; }

/* --- Foden: knap, tæller, note --- */
.eng-form__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.eng-form__foot p { margin: 0; }

.eng-form .form-submit,
.eng-form input[type="submit"],
.eng-form .eng-next {
  height: 54px;
  padding: 0 30px;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--snow);
  background: var(--cobalt);
  border: 1.5px solid var(--cobalt);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}

.eng-form .form-submit:hover,
.eng-form input[type="submit"]:hover,
.eng-form .eng-next:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }

/* Tælleren er det andet af de to steder kobolt får lov at være tilbage på den
   ink-fladen. Den fortæller hvor kort det er, ikke hvor langt der er igen. */
.eng-form__count {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cobalt);
}

.eng-form .form-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--cobalt-wash);
  border-left: 3px solid var(--cobalt);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* CF7's egne kvitteringer og fejl. Standardstilen er en gul kasse med 2px
   ramme, som intet andet på sitet ligner. */
.eng-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-width: 1.5px;
  border-radius: var(--r-1);
  font-size: 14px;
}

.eng-form .wpcf7-not-valid-tip {
  color: var(--error);
  font-size: 13px;
  margin-top: 6px;
}

.eng-form .wpcf7-not-valid { border-color: var(--error) !important; }

/* .closer__main .actions ligger i theme.css, ikke her. Forsiden fik den samme
   knap (vejen ind til denne side), og to sider der deler et element skal dele
   reglen. En kopi her ville være det næste sted der driftede. */

/* ============================================================
   Brudpunkter — husets egne: 1100, 1000, 900, 700, 600
   ============================================================ */

@media (max-width: 1000px) {
  /* Husets eget brudpunkt, det samme sted temaets hero i forvejen falder
     sammen. Kortet lander lige under teksten, altså cirka én skærm nede mod
     de 14,7 skærme det lå nede før. */
  .engros .hero--form .hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .engros .eng-points { max-width: none; }
}

@media (max-width: 700px) {
  /* Kortet skal så højt op på telefonen som teksten tillader. */
  .engros .hero--form .hero__copy h1 { margin-bottom: 20px; }
  .engros .hero--form .hero__copy p { margin-bottom: 24px; }

  .eng-form { padding: 24px 20px; }
  .eng-form .form-row { grid-template-columns: 1fr; gap: 0; }

  .eng-form .form-group-choice .wpcf7-radio,
  .eng-form .form-group-categories .wpcf7-checkbox { display: grid; gap: 8px; }

  /* Kategorierne går fra 7 til 11 felter, fordi de 7 gav fem pladser til
     jerseys 1923 varer og kun to til de cirka 1870 i mode- og boligstof.
     Elleve felter i én spalte koster +208px på 390px, altså en halv skærm
     mere at rulle igennem lige før indsend-knappen. To spalter koster +8px
     på 390px og -7px på 430px: fire valg mere for ingenting.

     Kun kategorierne. Radioknapperne ovenfor deler grid-reglen, men deres
     etiketter er sætninger ("Institution, teater eller anden erhvervskunde")
     og skal blive i én spalte. Målt ved 390 og 430: ingen chip stikker ud
     af kassen, ingen under 44px høj, intet vandret overløb. Over 700px
     ombryder de af sig selv og har ikke brug for reglen. */
  .eng-form .form-group-categories .wpcf7-checkbox {
    grid-template-columns: 1fr 1fr;
  }

  .eng-form .wpcf7-list-item label { width: 100%; }

  /* Tabellen falder fra hinanden i kort. Vandret rulning på en syv-rækkers
     sammenligning er en dårlig handel på en telefon: kunden ser aldrig
     højrekolonnen, og det er præcis den der bærer pointen. data-label i
     partialen bærer kolonneoverskriften med ned. */
  .eng-compare {
    border: 0;
    background: 0;
    overflow-x: visible;
  }

  .eng-compare table { min-width: 0; display: block; }
  .eng-compare thead { display: none; }
  .eng-compare tbody { display: block; }

  .eng-compare tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1.5px solid var(--ink);
    background: var(--paper);
  }

  .eng-compare tbody tr:last-child { margin-bottom: 0; border-bottom: 1.5px solid var(--ink); }

  .eng-compare tbody th[scope="row"] {
    display: block;
    padding: 14px 18px;
    background: var(--ink);
    color: var(--snow);
    font-size: 12px;
    letter-spacing: var(--tracked-eye);
    text-transform: uppercase;
  }

  .eng-compare tbody td {
    display: block;
    padding: 14px 18px;
    border-top: 1px solid var(--hairline);
  }

  .eng-compare tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: var(--tracked-eye);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 6px;
  }

  .eng-compare tbody td.is-us::before { color: var(--cobalt); }
}

@media (max-width: 600px) {
  .eng-form .form-note { font-size: 13px; }

  /* Knappen er sidens vigtigste berøringsmål. På en telefon får den hele
     bredden frem for at dele en linje med tælleren. */
  .eng-form__foot { gap: 12px; }
  .eng-form .form-submit,
  .eng-form input[type="submit"],
  .eng-form .eng-next { width: 100%; }
  .eng-form__count { width: 100%; }
}

/* ------------------------------------------------------------
   Lave vinduer: telefonen holdt i landskab.

   Fortilfælde i huset: auth.css:1180 bruger @media (max-height: 700px) til
   præcis den samme anledning, 812x375. Samme tal er genbrugt her frem for at
   opfinde et nyt, så der kun er ÉT højde-brudpunkt at holde styr på.

   Målt ved 812x375 før reglen: formularkortet lå 714 px nede på finsk og
   687 px på dansk. Det er næsten samme absolutte tal som i portræt (693 og
   658), men skærmen er kun 375 px høj, så det blev 1,9 skærme i stedet for
   0,8. Det var den sidste bredde hvor formularen stadig krævede to strøg, og
   findbarheden var Marcs oprindelige indvending.

   HVORFOR REGLEN ER VANDRET OG IKKE LODRET
   Det oplagte greb var at skære i teksten. Det er den forkerte diagnose.
   theme.css:122 kapper h1 ved 12ch og :125 kapper manchetten ved 44ch. Ved
   812 px er spalten 747 px bred, men h1 bruger 305 og manchetten 458. De 337
   ubrugte vandrette pixels koster 95 lodrette. Siden er høj fordi den nægter
   at være bred. Reglen bruger derfor plads der allerede er betalt for: h1
   falder fra 4 til 2 linjer, manchetten fra 5 til 3. Intet skjules, intet
   flyttes, intet slettes, og tabulator-rækkefølgen er urørt.

   68ch, ikke none. Uden kappe bliver manchetten 747 px og 113 tegn pr. linje,
   langt over et behageligt spaltemål. 68ch giver 590 px og rammer 1,17
   skærme alligevel.

   Sidegevinst: de to sprog lander nu på samme y (440 px). Den finske manchet
   er én linje længere end den danske ved 44ch, men ikke ved 68ch.

   Bevis: for hver af de 11 kontrolbredder blev alle 391 elementers
   getBoundingClientRect hashet før og efter. 20 af 22 målinger er
   bit-identiske. Kun 812x375 flytter sig, i begge sprog. De ti andre falder
   på højdeporten (den laveste er 1024x768), og de syv brede falder også på
   breddeporten.

   SKAL STÅ EFTER 600px-BLOKKEN. En iPhone SE i landskab er 667x375 og rammer
   både @media (max-width: 700px) og denne, med samme specificitet (0,3,1).
   Kilderækkefølgen er det eneste der afgør hvem der vinder.

   Fravalgt: .hero__form { order: -1 } i landskab. Én erklæring, kortet ryger
   til 0,51 skærm, men h1 flytter til 2,23 skærme, og "Se kataloget" ligger i
   DOM'en før formularen mens den visuelt står 1182 px under den. Det er et
   baglæns tabulator-spring, altså en reel tilgængelighedsfejl, for at spare
   ét strøg. Ligeledes fravalgt: at skjule eyebrow, manchet eller knap i
   landskab. Indhold der forsvinder ved en orientering er en drift-vektor.
   ------------------------------------------------------------ */
@media (max-width: 1000px) and (max-height: 700px) {
  .engros .hero--form { padding-top: 16px; padding-bottom: 24px; }
  .engros .hero--form .hero__inner { gap: 16px; }
  .engros .hero--form .hero__copy .eyebrow { margin-bottom: 12px; }
  .engros .hero--form .hero__copy h1 { max-width: none; font-size: 34px; margin-bottom: 12px; }
  .engros .hero--form .hero__copy p { max-width: 68ch; font-size: 15px; margin-bottom: 16px; }
}

/* Ingen animation for dem der har bedt om at slippe. Hero'ens to lag STÅR
   stadig, de holder bare stille: fladen og geometrien er en del af designet,
   det er kun driften der er en effekt. At fjerne ringene her ville give den
   bruger en anden side, ikke en roligere. */
@media (prefers-reduced-motion: reduce) {
  .engros .hero--form::before,
  .engros .hero--form::after { animation: none; }
  .engros .edits .edit,
  .eng-form .wpcf7-list-item label,
  .eng-form .form-submit,
  .eng-form input[type="submit"],
  .eng-form .eng-next { transition: none; }
  .engros .edits .edit:hover { transform: none; }
}