/* ===========================================================================
   Bestellen: van ontwerp naar bedanktpagina.
   Apart bestand, want dit is een eigen deel van de site en app.css was al lang
   genoeg. Wordt alleen geladen op de winkelschermen.
   =========================================================================== */

.kruimels{margin-bottom:var(--s2)}
.kruimels a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px}
.kruimels a:hover{color:var(--text);text-decoration:none}
.ster{color:var(--accent)}

/* ------------------------------------------------------ stap 1: bestellen -- */
.bestel{display:grid;gap:var(--s3)}
@media(min-width:860px){.bestel{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}}
.bestel__beeld img{width:100%;border-radius:var(--r-card);background:var(--ink-2)}
.bestel__naam{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:19px;margin:var(--s2) 0 0}

.maatkeuze{display:grid;gap:8px}
.maat{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);transition:border-color var(--t),background var(--t);
}
.maat:hover{border-color:var(--muted-2)}
.maat input{position:absolute;opacity:0;pointer-events:none}
.maat:has(input:checked){border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
.maat:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.maat__code{
  font-family:var(--font-display);font-size:26px;line-height:1;color:var(--accent);
  width:34px;flex:0 0 auto;text-align:center;
}
.maat__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.maat__info .muted{font-size:12.5px}
.maat__prijs{flex:0 0 auto;font-weight:600}

.teller{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.teller__knop{
  width:46px;height:46px;flex:0 0 auto;border-radius:14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:22px;line-height:1;
}
.teller__knop:hover{background:var(--surface-2)}
.teller__waarde{
  width:72px;height:46px;text-align:center;font-size:17px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--text);
}
.teller__waarde::-webkit-outer-spin-button,.teller__waarde::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.teller__waarde{-moz-appearance:textfield}
.teller__uitleg{color:var(--muted);font-size:14px}

/* ------------------------------------------------- winkelwagen en afreken -- */
.afreken{display:grid;gap:var(--s3);align-items:start}
@media(min-width:960px){.afreken{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s5)}}
.afreken__zij{display:grid;gap:var(--s2);align-content:start}
@media(min-width:960px){.afreken__zij{position:sticky;top:calc(var(--header-h) + 16px)}}

.regels{display:grid;gap:12px}
.regel{
  display:grid;gap:12px;align-items:center;padding:14px;
  grid-template-columns:96px 1fr;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
}
@media(min-width:660px){.regel{grid-template-columns:120px 1fr auto auto;gap:18px}}
.regel__beeld{display:block;border-radius:10px;overflow:hidden;background:var(--ink-2);aspect-ratio:8/5}
.regel__beeld img{width:100%;height:100%;object-fit:cover}
.regel__tekst{min-width:0}
.regel__tekst h2{font-size:17px;margin:0 0 3px}
.regel__aantal{display:flex;align-items:center;gap:6px;grid-column:1/-1}
@media(min-width:660px){.regel__aantal{grid-column:auto}}
.regel__aantal .teller__knop{width:38px;height:38px;font-size:18px;border-radius:11px}
.regel__aantal .teller__waarde{width:54px;height:38px;font-size:15px;border-radius:11px}
.regel__prijs{display:flex;align-items:center;gap:12px;grid-column:1/-1}
@media(min-width:660px){.regel__prijs{grid-column:auto;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}}
.regel__weg{background:none;border:0;color:var(--muted-2);cursor:pointer;padding:6px;border-radius:8px}
.regel__weg:hover{color:var(--danger);background:var(--surface-2)}
.regel--klein{grid-template-columns:1fr auto;padding:10px 0;background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--line-soft)}
.regel--klein .regel__prijs{grid-column:auto;flex-direction:row;align-items:center}

/* -------------------------------------------------------------- overzicht -- */
.overzicht{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:var(--s3);
}
.sum{margin:var(--s2) 0 0}
.sum__rij{display:flex;justify-content:space-between;gap:14px;padding:6px 0}
.sum__rij.is-korting{color:var(--ok)}
.sum__totaal{
  margin-top:8px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:20px;
}
/* De btw staat apart en kleiner: particuliere kopers hoeven er niet over na te
   denken, zakelijke kopers moeten het kunnen zien. */
.sum__btw{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft);color:var(--muted-2)}
.sum__hint{display:flex;gap:7px;align-items:flex-start;margin:6px 0 0;font-size:12.5px;color:var(--accent)}
.sum__hint svg{flex:0 0 auto;margin-top:1px}

.korting{display:flex;gap:8px;margin-top:var(--s2)}
.korting .news__input{min-height:44px;text-transform:uppercase}
.korting .btn{min-height:44px;padding:0 16px;flex:0 0 auto}
.overzicht__usp{list-style:none;margin:var(--s2) 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:7px;color:var(--muted-2);font-size:13px}
.overzicht__usp li{display:flex;align-items:center;gap:8px}
.overzicht__usp svg{color:var(--accent);flex:0 0 auto}

/* ------------------------------------------------------------ formulieren -- */
.blok{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:var(--s3);margin-bottom:var(--s2);
}
.blok__kop{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.04em;font-size:18px;margin:0 0 var(--s2)}
.blok__kop svg{color:var(--accent);flex:0 0 auto}
.blok__nr{
  width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:14px;
}
.blok__kop.pad{padding:var(--s3) var(--s3) 0}

.veld{margin-bottom:14px}
.veld:last-child{margin-bottom:0}
.veld label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:5px}
.veld input,.veld select,.veld textarea{
  width:100%;min-height:48px;padding:12px 14px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;color:var(--text);
  transition:border-color var(--t);
}
.veld textarea{min-height:auto;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--accent)}
.veld input.is-fout,.veld select.is-fout{border-color:var(--danger)}
.veld__hint{margin:5px 0 0;font-size:12.5px;color:var(--muted-2)}
.veld__fout{margin:5px 0 0;font-size:12.5px;color:var(--danger)}
.veld-paar{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){
  .veld-paar{grid-template-columns:1fr 1fr}
  .veld-paar:has(.veld--kort){grid-template-columns:1fr 110px 110px}
}
.adres__stand{
  margin:0 0 14px;padding:10px 13px;border-radius:12px;font-size:13.5px;
  background:var(--ok-vlak);border:1px solid var(--ok-rand);color:var(--accent);
  display:flex;align-items:center;gap:9px;
}
.adres__stand.is-bezig{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.adres__stand.is-onbekend{background:var(--warn-vlak);border-color:var(--warn-rand);color:var(--warn)}

.keuzerij{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:520px){.keuzerij{grid-template-columns:1fr 1fr}}
.keuze{
  display:flex;align-items:center;gap:11px;cursor:pointer;padding:14px 16px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-card);font-size:14.5px;
}
.keuze input{position:absolute;opacity:0;pointer-events:none}
.keuze svg{color:var(--muted);flex:0 0 auto}
.keuze:has(input:checked){border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
.keuze:has(input:checked) svg{color:var(--accent)}
.zakelijk{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.zoekrij{display:flex;gap:8px}
.zoekrij input{flex:1 1 auto;min-width:0}
.zoekrij .btn{flex:0 0 auto;min-height:48px}
.kvkuit{margin-top:10px;display:grid;gap:6px;max-height:280px;overflow:auto}
.kvkuit button{
  display:block;width:100%;text-align:left;cursor:pointer;padding:11px 13px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;color:var(--text);
}
.kvkuit button:hover{border-color:var(--accent)}
.kvkuit b{display:block}
.kvkuit span{color:var(--muted-2);font-size:12.5px}
.anderadres{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-soft)}

.betaalblok{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:var(--s3);
}
.paylijst{display:flex;flex-wrap:wrap;gap:6px}
/* Het vinkje over maatwerk krijgt een eigen kader. Het is geen kleine letter
   maar de reden dat het herroepingsrecht vervalt, en dat hoor je te zien. */
.check--waiver{
  display:flex;gap:11px;align-items:flex-start;margin-top:var(--s2);
  padding:13px 14px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line);
  transition:border-color var(--t),background var(--t);
}
.check--waiver .check__text{font-size:13px;line-height:1.5;color:var(--muted)}
.check--waiver .check__text b{color:var(--text)}
.check--waiver.is-fout{border-color:var(--danger);background:var(--fout-vlak)}

/* -------------------------------------------------------------- bedankt -- */
.bedankt__kop{text-align:center;max-width:640px;margin:0 auto var(--s5)}
.bedankt__vink{
  width:76px;height:76px;display:grid;place-items:center;margin:0 auto var(--s2);
  border-radius:50%;background:var(--accent);color:var(--accent-ink);
  animation:vink 420ms cubic-bezier(.2,.9,.3,1.4);
}
.bedankt__vink--wacht{background:var(--warn)}
@keyframes vink{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.bedankt__nummer{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
  font-size:12.5px;color:var(--muted-2);margin:0 0 6px}
.bedankt__kop h1{font-size:clamp(34px,9vw,60px);margin-bottom:var(--s2)}
.bedankt__lead{color:var(--muted);font-size:17px;margin:0}
.bedankt__test{display:inline-flex;align-items:center;gap:8px;margin:var(--s2) 0 0;
  padding:7px 14px;border-radius:var(--r-pill);background:var(--surface);color:var(--warn);font-size:13px}

.bedankt__grid{display:grid;gap:var(--s3);align-items:start}
@media(min-width:960px){.bedankt__grid{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s5)}}
.bedankt__links{display:grid;gap:var(--s2)}

.kaartblok__kaart{width:100%;height:auto;display:block;background:var(--surface-2)}
.kaartblok__adres{display:grid;gap:2px;padding:var(--s2) var(--s3) var(--s3);font-size:14.5px;color:var(--muted)}
.kaartblok__adres b{color:var(--text)}

.stappen__lijst{list-style:none;counter-reset:stap;margin:0;padding:0;display:grid;gap:var(--s2)}
.stappen__lijst li{counter-increment:stap;position:relative;padding-left:44px;display:grid;gap:3px}
.stappen__lijst li::before{
  content:counter(stap);position:absolute;left:0;top:0;
  width:29px;height:29px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--accent);
  font-family:var(--font-display);font-size:14px;
}
.stappen__lijst span{color:var(--muted);font-size:14px}

.gegevens{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:var(--s2) 0 0;
  padding-top:var(--s2);border-top:1px solid var(--line-soft);font-size:13.5px}
.gegevens dt{color:var(--muted-2)}
.gegevens dd{margin:0}
.text-center{text-align:center}

/* Lucht tussen de twee vragen: de maatkeuze en het aantal zijn twee
   beslissingen, niet een blok met knoppen. De ruimte hoort onder een vraag te
   zitten, niet erboven; dan hangt een kop bij zijn eigen antwoord in plaats van
   ergens in het midden. */
.maatkeuze + .small{margin-bottom:var(--s4)}
.bestel__keuze .foot__h{margin-bottom:var(--s2)}
.teller{margin-bottom:var(--s4)}
.regel.is-weg{opacity:0;height:0!important;padding-top:0;padding-bottom:0;margin:0;
  overflow:hidden;transition:all 200ms ease}
#addMsg{color:var(--ok)}
#addMsg.is-error{color:var(--danger)}
#addMsg a{margin-left:2px}

.gelukt__vink{
  width:56px;height:56px;display:grid;place-items:center;margin:0 auto var(--s2);
  border-radius:50%;background:var(--accent);color:var(--accent-ink);
  animation:vink 380ms cubic-bezier(.2,.9,.3,1.4);
}
.dialog__box.center h3{margin-bottom:8px}
.dialog__box.center p{margin-bottom:var(--s3)}

/* De deelpagina: feiten over dit ontwerp in plaats van losse chips die over het
   product in het algemeen gingen. */
.deelfeiten{color:var(--muted);max-width:44ch;margin:var(--s3) auto 0;text-wrap:pretty}
.deelacties{display:grid;gap:9px;max-width:400px;margin:var(--s3) auto 0}

.kortinglink{margin:var(--s2) 0 0;text-align:center;font-size:13.5px}
.kortingaan{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:var(--s2) 0 0;padding:10px 12px;border-radius:12px;
  background:var(--ok-vlak);border:1px solid var(--ok-rand);color:var(--ok);font-size:13.5px;
}
.kortingaan svg{flex:0 0 auto}
.kortingaan .tekstknop{margin-left:auto;color:var(--muted)}
.kortingaan .tekstknop:hover{color:var(--danger)}
.dialog__box .korting{margin-top:var(--s2)}
/* Een uitgezette betaalknop moet zichtbaar uit staan, niet half. */
#payBtn[disabled]{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------- het vinkje dat moet ------
   Zolang het niet aan staat, kan er niet betaald worden. Dan hoort het ook op te
   vallen, en niet als een van de vier grijze regels op deze pagina.

   De puls staat op het vakje zelf en niet op het hele kader: een heel blok dat
   ademt leidt af van de tekst die je juist moet lezen. Hij loopt rustig (2,4
   seconde) en stopt zodra je hem aanvinkt, want daarna heeft hij niets meer te
   melden.

   Wie in zijn systeem heeft aangegeven minder beweging te willen, krijgt in
   plaats van een puls een vaste accentrand. Even duidelijk, zonder beweging. */
.check--waiver:has(input:not(:checked)){border-color:var(--line)}
.check--waiver:has(input:not(:checked)) input{
  border-color:var(--accent);
  animation:vinkje-vraagt 2.4s ease-in-out infinite;
}
@keyframes vinkje-vraagt{
  0%,100%{box-shadow:0 0 0 0 rgba(198,255,61,.45);transform:scale(1)}
  12%    {box-shadow:0 0 0 6px rgba(198,255,61,0);transform:scale(1.07)}
  24%    {box-shadow:0 0 0 0 rgba(198,255,61,0);transform:scale(1)}
}
/* Zodra hij aan staat: niets meer aan de hand. */
.check--waiver:has(input:checked){border-color:var(--ok-rand);background:var(--ok-vlak)}
.check--waiver:has(input:checked) .check__text b{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .check--waiver:has(input:not(:checked)) input{
    animation:none;box-shadow:0 0 0 3px rgba(198,255,61,.25);
  }
}

/* ================================================================== team ====
   Bestellen voor een heel elftal. De keuze staat bovenaan, want het is een
   andere bestelling: voor jezelf kies je een maat en een aantal, voor een team
   vul je namen in.
   ========================================================================= */
.voorwie{display:grid;gap:10px;margin-bottom:var(--s4)}
@media(min-width:540px){.voorwie{grid-template-columns:1fr 1fr}}
.voorwie__knop{
  position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:16px;text-align:left;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:border-color var(--t),background var(--t);
}
.voorwie__knop:hover{border-color:var(--muted-2)}
.voorwie__knop.is-on{border-color:var(--accent);background:var(--kies-vlak);color:var(--kies-tekst);--muted:var(--kies-muted);--muted-2:var(--kies-muted)}
.voorwie__knop svg{color:var(--muted);flex:0 0 auto;margin-top:1px}
.voorwie__knop.is-on svg{color:var(--accent)}
.voorwie__knop span{display:flex;flex-direction:column;gap:3px;min-width:0}
.voorwie__knop b{font-size:15.5px}
.voorwie__knop em{font-style:normal;color:var(--muted);font-size:13px}
.voorwie__korting{
  font-style:normal;margin-top:5px;align-self:flex-start;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);
}

.teamuitleg{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--r-panel);
  background:var(--surface);border:1px solid var(--line-soft);
  color:var(--muted);font-size:13.5px;line-height:1.5;
}
.teamuitleg b{color:var(--text)}
.teamuitleg svg{color:var(--accent);flex:0 0 auto;margin-top:1px}

/* Eén regel per speler: nummer, naam, rugnummer, maat, weg. Op een telefoon
   moet dat op één regel passen, dus de velden zijn zo smal als ze mogen zijn. */
.spelers{display:flex;flex-direction:column;gap:7px}
.speler{display:grid;grid-template-columns:1.25rem 1fr 3.1rem 3.9rem 1.9rem;gap:6px;align-items:center}
.speler__nr{
  font-family:var(--font-display);font-size:13px;color:var(--muted-2);text-align:right;
  font-variant-numeric:tabular-nums;
}
.speler input,.speler select{
  min-height:46px;padding:0 11px;min-width:0;width:100%;
  background:var(--ink-2);border:1px solid var(--line);border-radius:11px;color:var(--text);
}
.speler input:focus,.speler select:focus{outline:none;border-color:var(--accent)}
.speler__naam{font-family:var(--font-display);letter-spacing:.03em;font-size:16px}
.speler__nummer{text-align:center;font-variant-numeric:tabular-nums}
.speler__maat{padding-inline:8px;font-size:14px}
.speler__weg{
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:var(--muted-2);border-radius:8px;
}
.speler__weg:hover{color:var(--danger);background:var(--surface-2)}

.teamtotaal{
  margin:var(--s2) 0 0;padding:11px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-soft);
  color:var(--muted);font-size:14px;
}
.teamtotaal.is-korting{background:var(--ok-vlak);border-color:var(--ok-rand);color:var(--ok);font-weight:600}

/* De teamkorting in het overzicht: geen code maar een regel, dus hij ziet er
   anders uit dan een ingevoerde kortingscode. */
.sum__rij.is-team{color:var(--accent)}
/* De melding staat bovenaan de linkerkolom en moet dus op dezelfde hoogte
   beginnen als het overzicht rechts: geen marge erboven, wel eronder, anders
   plakt hij tegen de eerste regel aan. */
.teamregel{
  display:flex;align-items:center;gap:9px;margin:0 0 var(--s2);
  padding:12px 14px;border-radius:var(--r-card);
  background:var(--ok-vlak);border:1px solid var(--ok-rand);color:var(--ok);font-size:13.5px;
}
.teamregel svg{flex:0 0 auto}

/* Een teamregel in de winkelwagen toont de speler in plaats van alleen de maat. */
.regel__speler{
  display:inline-flex;align-items:center;gap:7px;margin-top:3px;
  font-family:var(--font-display);letter-spacing:.04em;font-size:14px;color:var(--text);
}
.regel__speler i{
  font-style:normal;background:var(--surface-2);border-radius:5px;padding:1px 6px;
  font-variant-numeric:tabular-nums;color:var(--accent);
}

/* Het ontwerp op de bestelpagina wordt in de browser getekend zodra dat kan.
   Tot die tijd staat het serverbeeld er; ze nemen dezelfde ruimte in, dus er
   verspringt niets bij de wissel. */
.bestel__doek{
  display:flex;justify-content:center;align-items:flex-end;gap:16px;
  background:var(--ink-2);border-radius:var(--r-card);
  padding:22px 16px;min-height:220px;overflow:hidden;
}
.bestel__doek img{border-radius:var(--r-card);margin:-22px -16px;width:calc(100% + 32px)}
.bestel__doek canvas{display:block;flex:0 0 auto}

/* De rij waar je mee bezig bent. Bij de achtste speler wil je zien welke naam
   er nu op het product staat. */
.speler.is-actief .speler__naam{border-color:var(--accent)}
.speler.is-actief .speler__nr{color:var(--accent)}

.verzendmelding{
  margin:var(--s2) 0 0;padding:9px 12px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line-soft);
  color:var(--muted);font-size:13.5px;
}
.verzendmelding.is-gratis{
  background:var(--ok-vlak);border-color:var(--ok-rand);color:var(--ok);font-weight:600;
}
/* "Ontwerp:" en "Naam:" ervoor. Twee namen onder elkaar zonder label laten je
   raden welke op de scheenbeschermer komt. */
.regel__label{
  font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;
}
.regel__tekst h2 .regel__label{display:inline-block;margin-right:2px}

/* "Er is al een account met dit adres." Geen waarschuwing maar een aanbod, dus
   in de accentkleur en niet in rood. */
.bekendvak{
  display:flex;gap:13px;align-items:flex-start;
  margin-top:var(--s2);padding:14px 16px;border-radius:var(--r-card);
  background:var(--ok-vlak);border:1px solid var(--ok-rand);
}
.bekendvak svg{color:var(--accent);flex:0 0 auto;margin-top:2px}
.bekendvak b{display:block;color:var(--text);font-size:15px}
.bekendvak p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* Het aanbod om een account te maken, ná het betalen. */
.accountvak{border-color:var(--ok-rand);background:linear-gradient(180deg,var(--ok-vlak) 0%,var(--surface) 60%)}