/*
 * Uppladdningsformuläret.
 *
 * Bara layout – inga färger, ingen typografi. Formuläret står i kundens eget
 * tema, och ett tillägg som målar sina egna färger ser alltid ditsatt ut. Det
 * temat bestämmer får det bestämma.
 *
 * Det som däremot inte kan lämnas åt temat är att delarna hamnar under
 * varandra, och att släppytan ser ut som en yta man får släppa något på. Färgen
 * på öppningsknappen är enda undantaget: den hämtas ur temats egen palett.
 */

.profildryck-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
}

.profildryck-upload__meddelande {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.profildryck-upload__meddelande textarea {
  width: 100%;
  resize: vertical;
}

.profildryck-upload__fel[hidden] {
  display: none;
}

.profildryck-upload__fel {
  margin: 0;
}

/* Knappen får temats utseende via sin egen klass – här bara plats. */
.profildryck-upload button[type="submit"] {
  align-self: flex-start;
}

/* ---------------------------------------------------------------------------
 * Luckan
 *
 * Glider in från höger och täcker sidan bakom. Formuläret är långt, och på en
 * produktsida konkurrerar det med allt annat sidan ska säga – i en lucka får
 * det vara långt i fred, och den som bara vill köpa ser det aldrig.
 * ------------------------------------------------------------------------ */

.profildryck-lucka {
  /* Fäst till höger, hela höjden. margin-left:auto skjuter den åt kanten. */
  margin: 0 0 0 auto;
  max-width: min(30rem, 100vw);
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: Canvas;
  color: CanvasText;
}

.profildryck-lucka::backdrop {
  background: rgb(0 0 0 / 45%);
}

/*
 * Inglidningen.
 *
 * Startläget sätts på den stängda rutan och tas bort när den öppnas, så att
 * övergången går åt rätt håll. @starting-style behövs eftersom en dialog går
 * från display:none – utan den finns inget att animera från.
 */
@media (prefers-reduced-motion: no-preference) {
  .profildryck-lucka {
    transition: translate 0.25s ease, opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
    translate: 0 0;
    opacity: 1;
  }
  .profildryck-lucka:not([open]) {
    translate: 100% 0;
    opacity: 0;
  }
  @starting-style {
    .profildryck-lucka[open] {
      translate: 100% 0;
      opacity: 0;
    }
  }
}

.profildryck-lucka__inre {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  /* Plats för tumme och hemknapp på telefon. */
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.profildryck-lucka__huvud {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.profildryck-lucka__rubrik {
  margin: 0;
}

.profildryck-lucka__produkt {
  margin: 0.15rem 0 0;
  opacity: 0.7;
}

/*
  Krysset centreras av rutnätet, inte av radhöjd och luft.

  Temat lägger 15/40 px vaddering på varje <button>. Bredd och höjd härifrån
  vann på specificitet, men vadderingen stod kvar eftersom regeln inte sa något
  om den – knappen blev 82 px bred och tecknet hamnade under och till vänster
  om mitten. En nolla räcker som svar, och place-items centrerar tecknet oavsett
  vad dess baslinje tar sig för.
*/
.profildryck-lucka__stang {
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
}

.profildryck-lucka__stang:hover {
  border-color: currentColor;
}

/* I luckan har formuläret hela bredden och behöver inget eget tak. */
.profildryck-lucka .profildryck-upload {
  max-width: none;
}

.profildryck-lucka__oppna {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Gemensam knapptypografi
 *
 * Tre knappar står under varandra i spalten: designkortets, uppladdningens och
 * köpknappen. De såg olika ut därför att de fick sin text från tre håll –
 * uppladdningen ärvde brödtextens Inter 16/600, designknappen fick temats
 * .button på 18px, och köpknappen står på 20px. Tre storlekar i tre snitt på
 * tre knappar i rad läser sig som ett fel, inte som en ordning.
 *
 * Köpknappen är förlagan: den är störst, den är målet, och de andra två ska
 * inte se ut som mindre versioner av något annat. Familjen hämtas ur temats
 * egen variabel i stället för att skrivas ut – byter butiken typsnitt följer
 * knapparna med.
 * ------------------------------------------------------------------------ */

.profildryck-cta__knapp,
.profildryck-lucka__oppna {
  font-family: var(--global-heading-font-family, inherit);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
 * Knappen till designsidan
 * ------------------------------------------------------------------------ */

.profildryck-cta {
  margin: 0;
}

/* bredd="full": knappen tar hela spalten, som i ett kort. */
.profildryck-cta--full .profildryck-cta__knapp {
  display: block;
  width: 100%;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Släppytan
 *
 * En <label> runt filfältet. Hela rutan blir klickbar utan JavaScript, och
 * fältet är fortfarande ett filfält – tangentbord och skärmläsare fungerar som
 * de ska. Dra-och-släpp läggs på ovanpå; utan det duger rutan ändå.
 * ------------------------------------------------------------------------ */

.profildryck-slapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.profildryck-slapp:hover,
.profildryck-slapp:focus-within,
.profildryck-slapp[data-over] {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/*
 * Filfältet göms för ögat men inte för tangentbordet. display:none hade tagit
 * bort det ur tabbordningen och gjort rutan omöjlig att nå utan mus.
 */
.profildryck-slapp input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.profildryck-slapp__ikon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.profildryck-slapp__text {
  font-weight: 600;
  max-width: 18rem;
}

.profildryck-slapp__format {
  font-size: 0.85em;
  opacity: 0.65;
}

/* Filnamnet dyker upp först när något valts. */
.profildryck-slapp__vald:empty {
  display: none;
}

.profildryck-slapp__vald {
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ---------------------------------------------------------------------------
 * Hjälpraden och skicka-knappen
 * ------------------------------------------------------------------------ */

.profildryck-upload__hjalp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.profildryck-upload__hjalp p {
  margin: 0;
  font-weight: 600;
}

.profildryck-upload__hjalplank {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
}

.profildryck-upload__skicka {
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Knappen som öppnar luckan
 *
 * Vit botten och gul ram, som "Ställ en fråga" i förlagan. Den ska läsas som
 * det andra alternativet bredvid den fyllda köpknappen – lika viktig, men inte
 * det man trycker på om man bara vill handla.
 *
 * Gulet är temats eget – var(--global-palette1), samma ton som köpknappen
 * använder fyllt. Reservvärdet står med för det fall knappen hamnar utanför
 * ett Kadence-tema.
 * ------------------------------------------------------------------------ */

.profildryck-lucka__oppna {
  display: block;
  width: 100%;
  /*
    Egen luft under knappen.

    Kortkoden hamnar i ett eget block, och blockens inbördes avstånd sätts av
    temat på blocket – inte på vad som råkar ligga inuti det. Utan den här
    raden stod knappen kant i kant med köpknappen under.
  */
  margin-block: 0 1rem;
  /*
    Lodrätt luft avvägd mot köpknappens sextio pixlar: radhöjdens 28,8 plus två
    gånger 13,6 plus ramens fyra. Knapparna står omedelbart under varandra och
    lika höjd är det enda som får dem att läsas som ett par.
  */
  padding: 0.85rem 1.5rem;
  text-align: center;
  cursor: pointer;
  /*
    Svart text, inte ärvd.

    Knappen fylls gul när man pekar på den, och gul botten tål bara mörk text.
    Ärvd färg hade dessutom kunnat vara vad som helst beroende på var i mallen
    kortkoden hamnar.
  */
  color: #111111;
  background: #ffffff;
  border: 2px solid var(--global-palette1, #ffb020);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/*
  Fylld gul vid pekning – tio procents inblandning syntes inte alls. Ramen har
  redan färgen, så det enda som ändras är att ytan tar samma ton.
*/
.profildryck-lucka__oppna:hover,
.profildryck-lucka__oppna:focus-visible {
  color: #111111;
  background: var(--global-palette1, #ffb020);
}

/*
  Klart: ljus grön yta med grön ram och grön text.

  Knappen var förut fylld gul med grön text. Grönen fanns där och klarade
  kontrastkravet, men mot temats starka gula lästes den ändå som svart – den
  gula ytan tog all uppmärksamhet och färgen på texten hann aldrig fram. Att
  göra grönen ljusare gick inte: allt ljusare än #0f5132 faller under 4,5:1 mot
  gult.

  Alltså fick ytan ge vika i stället för texten. Ljusgrönt mot mörkgrönt ger
  8,4:1, och grönt syns nu på en meters håll.

  Att ytan är ljus och inte fylld har ett andra skäl. Under den står köpknappen,
  fylld gul, och det är den kunden ska trycka på härnäst. Ett avklarat steg ska
  inte konkurrera med nästa.

  Ingen ändring vid pekning. Hovern på den tomma knappen är en inbjudan att
  klicka; när filen ligger uppe finns inget att bjuda in till. Knappen går ändå
  att trycka på – den som laddat upp fel fil ska kunna byta.
*/
.profildryck-lucka__oppna--klar,
.profildryck-lucka__oppna--klar:hover,
.profildryck-lucka__oppna--klar:focus-visible {
  color: #0f5132;
  background: #e8f4ee;
  border-color: #0f5132;
}

/* Bocken hör till läget, inte till texten – därför i stilmallen. */
.profildryck-lucka__oppna--klar::before {
  content: "✓";
  margin-inline-end: 0.5rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Antalsreglaget
 * ------------------------------------------------------------------------ */

.profildryck-antal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-block: 0.5rem 1rem;
}

.profildryck-antal__topp,
.profildryck-antal__grans {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/*
  "Antal" är en etikett, "Pris" är ett besked. Samma klass bär båda i markupen,
  men de ska inte väga lika – etiketten dämpas och prisraden tar tillbaka
  tyngden nedanför.
*/
.profildryck-antal__topp .profildryck-antal__etikett {
  font-weight: 400;
  opacity: 0.7;
}

.profildryck-antal__pris .profildryck-antal__etikett {
  font-weight: 700;
}

.profildryck-antal__etikett {
  font-weight: 600;
}

.profildryck-antal__grans {
  font-size: 0.85em;
  opacity: 0.6;
}

/*
 * Reglaget ritas från grunden.
 *
 * Webbläsarnas standardutseende skiljer sig så mycket att en oformaterad
 * range ser ut som ett fel bredvid resten av kortet. Banan och greppet sätts
 * därför explicit, med temats gula på greppet så det hör ihop med knapparna.
 */
/*
  Elementet står med i väljaren, och det är avsiktligt.

  Temat målar varje formulärfält med regeln input[type="text"], [type="email"],
  … – en attributväljare som väger tyngre än en ensam klass. Ett reglage fick
  därmed vit botten, ram och vaddering, och såg ut som ett spår nedsänkt i ett
  textfält. Typ och klass tillsammans väger tyngre än temats regel och behöver
  inget !important. Spåret ritas av ::-webkit-slider-runnable-track längre ned;
  här ska det inte finnas något alls.
*/
input[type="range"].profildryck-antal__reglage {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0.6rem 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

/*
 * Banan ritas på spåret, inte på elementet.
 *
 * Med appearance:none struntar Chrome i höjden på själva input-elementet –
 * bakgrunden fyller då hela dess höjd och blir en rektangel i stället för en
 * linje. Höjden måste sättas på ::-webkit-slider-runnable-track, och Firefox
 * har sin egen ::-moz-range-track. De går inte att slå ihop i en regel:
 * en väljare en webbläsare inte känner igen kastar hela regeln.
 */
.profildryck-antal__reglage::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 25%, transparent);
}

.profildryck-antal__reglage::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 25%, transparent);
}

.profildryck-antal__reglage::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* Halva greppet upp, så det rider på banan i stället för under den. */
  margin-top: -0.75rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--global-palette1, #ffb020);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  cursor: grab;
}

.profildryck-antal__reglage::-moz-range-thumb {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--global-palette1, #ffb020);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  cursor: grab;
}

.profildryck-antal__reglage:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.profildryck-antal__pris {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  padding-top: 0.25rem;
}

.profildryck-antal__total {
  margin-left: auto;
  font-size: 1.7em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/*
  De två dämpade raderna – momsen under priset och företagsgolvet under
  reglaget – står i samma regel. De säger samma sorts sak: ett villkor för
  talet ovanför. Skulle de skiljas åt i två regler glider de isär.
*/
.profildryck-antal__pris small,
.profildryck-antal__golv {
  flex-basis: 100%;
  opacity: 0.6;
}

/*
  hidden måste sägas uttryckligen.

  Webbläsarens inbyggda regel [hidden] { display: none } är en UA-stil, och
  varje författarstil vinner över den oavsett specificitet. Så snart vi själva
  sätter display på ett element – och det gör vi på alla flexlådor här – slutar
  hidden att dölja någonting. Elementet står kvar, märkt som dolt.

  Det gjorde att uppladdningskortet syntes för privatpersoner trots att
  skriptet gömt det, och att en kontroll av egenskapen hidden såg riktig ut
  medan sidan visade motsatsen.
*/
.profildryck-vag[hidden],
.profildryck-val[hidden],
.profildryck-kundtyp[hidden],
.profildryck-vagar[hidden],
.profildryck-steg[hidden] {
  display: none;
}

/* Golvet hör till reglaget ovanför, inte till priset under. */
.profildryck-antal__golv {
  margin-top: -0.25rem;
}

.profildryck-antal__spec summary {
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  opacity: 0.75;
}

.profildryck-antal__spec dl {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
}

.profildryck-antal__spec dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/*
  Totalen avslutar listan och ska läsas som en summa, inte som ännu en post.
  En linje över och fet stil räcker – samma grepp som kvitton använt i hundra
  år, och det behöver inte förklaras för någon.
*/
.profildryck-antal__summa {
  margin-top: 0.15rem;
  padding-top: 0.4rem;
  font-weight: 700;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/*
  Styckpriset hör till varan ovanför och är inte en egen post i summan. Något
  mindre och en aning indraget säger det utan en rubrik.
*/
.profildryck-antal__styck {
  margin-top: -0.15rem;
  padding-left: 0.75rem;
  font-size: 0.92em;
  opacity: 0.75;
}

.profildryck-antal__spec dt,
.profildryck-antal__spec dd {
  margin: 0;
}

.profildryck-antal__spec dd {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Växeln i varukorgen
 *
 * Samma knappar som på produktsidan, men med en mening framför. I korgen står
 * de utan sammanhang – "Företag / Privatperson" utan ord före läses som en
 * fråga man inte förstår att man ska svara på.
 * ------------------------------------------------------------------------ */

.profildryck-korgtyp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.profildryck-korgtyp__text {
  font-size: 0.9em;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Kyltunnan
 *
 * Kortet är neutralt som spaltens övriga, och grönt sitter bara på den valda
 * knappen. En hel grön yta hade konkurrerat med köpknappen om samma
 * uppmärksamhet, och tunnan är inte det kunden ska trycka på härnäst – den är
 * något hen redan fått.
 * ------------------------------------------------------------------------ */

.profildryck-kyl {
  margin-top: 0.9rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 10px;
}

.profildryck-kyl[hidden],
.profildryck-kyl__antydan[hidden] {
  display: none;
}

/* Tackat nej: streckad ram och dämpad text, så att hela kortet svarar och
   inte bara knappen. Ändras bara knappen får kunden leta efter vad som hände. */
.profildryck-kyl--nej {
  border-style: dashed;
  opacity: 0.7;
}

.profildryck-kyl__topp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}

.profildryck-kyl__bild {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.profildryck-kyl--nej .profildryck-kyl__bild {
  opacity: 0.55;
}

.profildryck-kyl__rubrik {
  display: block;
  font-family: var(--global-heading-font-family, inherit);
  font-size: 1rem;
}

.profildryck-kyl__text {
  display: block;
  font-size: 0.87em;
  opacity: 0.75;
}

.profildryck-kyl__val {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

/*
  Samma form som storleks- och smakknapparna. Kunden har lärt sig på den här
  sidan att två piller är ett val – en ikryssad ruta i ett kort läses i stället
  som en bock, alltså som ett besked och inte som något klickbart.
*/
button.profildryck-kyl__knapp {
  font: inherit;
  font-size: 0.88em;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  color: var(--global-palette3, #0d0d1a);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--global-palette3, #0d0d1a) 25%, transparent);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

button.profildryck-kyl__knapp:hover,
button.profildryck-kyl__knapp:focus,
button.profildryck-kyl__knapp:focus-visible,
button.profildryck-kyl__knapp:active {
  color: var(--global-palette3, #0d0d1a);
  background: color-mix(in srgb, #0f6b58 15%, transparent);
  border-color: #0f6b58;
}

/* Grönt bara här: på det valda alternativet. */
button.profildryck-kyl__knapp[aria-pressed="true"],
button.profildryck-kyl__knapp[aria-pressed="true"]:hover,
button.profildryck-kyl__knapp[aria-pressed="true"]:focus,
button.profildryck-kyl__knapp[aria-pressed="true"]:focus-visible,
button.profildryck-kyl__knapp[aria-pressed="true"]:active {
  font-weight: 600;
  color: #ffffff;
  background: #0f6b58;
  border-color: #0f6b58;
}

/* Nej tack markerat får grått i stället för grönt – det är inte ett besked
   om något som ingår, bara ett val som är gjort. */
.profildryck-kyl--nej button.profildryck-kyl__knapp[aria-pressed="true"] {
  color: var(--global-palette9, #ffffff);
  background: var(--global-palette7, #8c8aa6);
  border-color: var(--global-palette7, #8c8aa6);
}

.profildryck-kyl__antydan {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.85em;
  /*
    Dämpningen sitter i textfärgen och inte i opacity.

    Opacity gäller hela elementet och går inte att ta tillbaka på ett barn –
    ikonen hade då blivit lika blek som texten, och en blek markör är ingen
    markör.
  */
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.profildryck-kyl__antydan svg {
  /* Exakt textens storlek. Den ska märkas, inte synas. */
  flex: none;
  width: 1em;
  height: 1em;
  color: #0f6b58;
}

/* ---------------------------------------------------------------------------
 * Företag eller privatperson
 *
 * Samma form som storleks- och smakknapparna: valet är av samma sort, och två
 * former för samma sorts val hade fått den ena att se viktigare ut.
 * ------------------------------------------------------------------------ */

.profildryck-kundtyp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

button.profildryck-kundtyp__knapp {
  font: inherit;
  /* Knapparna används på två ställen och ska se likadana ut på båda. */
  font-size: 0.9em;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  color: var(--global-palette3, #0d0d1a);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--global-palette3, #0d0d1a) 25%, transparent);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

button.profildryck-kundtyp__knapp:hover,
button.profildryck-kundtyp__knapp:focus,
button.profildryck-kundtyp__knapp:focus-visible,
button.profildryck-kundtyp__knapp:active {
  color: var(--global-palette3, #0d0d1a);
  background: color-mix(in srgb, var(--global-palette1, #ffb020) 20%, transparent);
  border-color: var(--global-palette1, #ffb020);
}

button.profildryck-kundtyp__knapp[aria-pressed="true"],
button.profildryck-kundtyp__knapp[aria-pressed="true"]:hover,
button.profildryck-kundtyp__knapp[aria-pressed="true"]:focus,
button.profildryck-kundtyp__knapp[aria-pressed="true"]:focus-visible,
button.profildryck-kundtyp__knapp[aria-pressed="true"]:active {
  font-weight: 600;
  color: #111111;
  background: var(--global-palette1, #ffb020);
  border-color: var(--global-palette1, #ffb020);
}

/* Golvraden gäller bara privatläget och göms av skriptet i det andra. */
.profildryck-antal__golv[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Köpknappen
 *
 * Antalet väljs med reglaget högst upp, inte här. Två antalsfält som inte vet
 * om varandra är värre än inget – därför göms WooCommerces eget, och reglaget
 * skriver in sitt värde i det.
 *
 * Knappen tar hela bredden så den och uppladdningsknappen läses som två val i
 * samma rad, inte som en knapp och en rest.
 * ------------------------------------------------------------------------ */

/*
 * !important här, och bara här.
 *
 * På en variabel produkt visar WooCommerces variantskript antalsfältet genom
 * att skriva style="display: block" direkt på elementet, varje gång en smak
 * väljs. En inline-stil slår alla vanliga regler oavsett hur specifika de är,
 * så den enda vägen förbi den är författarens !important.
 *
 * Det är inte en tvist om utseende utan om vem som äger antalet: sidan har ett
 * antalsval, reglaget högst upp, och två fält som inte vet om varandra är värre
 * än inget. Fältet göms men skickas med som ett – bärarraden är alltid en.
 */
.profildryck-antal ~ .wp-block-kadence-wootemplate-blocks-add-to-cart .quantity,
.profildryck-antal ~ * .wp-block-kadence-wootemplate-blocks-add-to-cart .quantity,
.wp-block-kadence-wootemplate-blocks-add-to-cart form.cart .quantity {
  display: none !important;
}

/*
 * Full bredd, med tillräcklig specificitet.
 *
 * Kadence sätter knappen till 85 % med en regel av samma tyngd som en enkel
 * klassväljare, och temats blockstilar skrivs in i sidan efter vår stilmall –
 * vid lika specificitet vinner den som kommer sist. Två klasser på omslaget
 * plus element och klass på knappen väger tyngre och behöver inget !important.
 */
.kwt-add-to-cart-wrap.wp-block-kadence-wootemplate-blocks-add-to-cart form.cart button.single_add_to_cart_button,
.kwt-add-to-cart-wrap.wp-block-kadence-wootemplate-blocks-add-to-cart form.cart button.single_add_to_cart_button[type="submit"] {
  width: 100%;
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * Stegen
 *
 * Numret sitter i en cirkel och rubriken bredvid. Cirkeln tar temats
 * rubrikfärg, inte den gula – gulet är knapparnas, och ett steg är ingen knapp.
 * ------------------------------------------------------------------------ */

.profildryck-steg {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /*
    Luft under rubriken, ned till det steget handlar om. Marginalen sätts här
    och inte på innehållet: innehållet är fyra olika saker, rubriken är alltid
    densamma.
  */
  margin: 0 0 0.85rem;
  font-family: var(--global-heading-font-family, inherit);
}

/*
  Luften och linjen mellan stegen.

  Varje steg är ett eget block i mallen och blocken står med margin noll, så
  stegen rann ihop: rubriken till steg 2 låg klistrad under smakknapparna. En
  numrerad följd som inte har mellanrum läses inte som en följd.

  Linjen sitter ovanför rubriken och inte under innehållet – då hör den till
  det som kommer, och steg som flyttas tar sin linje med sig. Första steget har
  ingen: det finns inget före det att skilja från.
*/
.profildryck-steg:not(.profildryck-steg--forst) {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.profildryck-steg--forst {
  margin-top: 0.75rem;
}


.profildryck-steg__nr {
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--global-palette5, #211a80);
  color: var(--global-palette9, #ffffff);
  font-size: 0.9rem;
  font-weight: 700;
  /* Siffror i samma bredd, så cirklarna står still när man skummar spalten. */
  font-variant-numeric: tabular-nums;
}

.profildryck-steg__rubrik {
  font-size: 1.05rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Storlek och smak
 *
 * Två val och tre val ryms på var sin rad. En rullgardin döljer vad som finns
 * tills man klickar, och "Välj ett alternativ" säger inte att det bara finns
 * två storlekar.
 * ------------------------------------------------------------------------ */

.profildryck-val {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/*
  Rutnät, inte flex.

  Med flex-wrap föll hela knappgruppen ned på egen rad så fort alternativen var
  breda – "Kolsyrad citron" räckte. Etiketten ska stå kvar till vänster och
  knapparna bryta inom sin egen spalt.
*/
.profildryck-val__rad {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: start;
  gap: 0.35rem 0.75rem;
}

.profildryck-val__etikett {
  /* Lyfts ned till knapparnas textrad, inte till deras överkant. */
  margin-top: 0.3rem;
  font-size: 0.9em;
  opacity: 0.7;
}

.profildryck-val__grupp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/*
  Elementet står med i alla väljare här, av samma skäl som på reglaget.

  Temat färgar knappar med button:hover, button:focus, button:active – en
  pseudoklass på ett element väger lika mycket som en ensam klass, och temats
  blockstilar skrivs in efter vår stilmall, så vid lika tyngd vinner de.
  Konsekvensen var värre än en färgkrock: temats fokusregel satte texten till
  vitt, och eftersom markeringen byggde på currentColor blev bottnen tio procent
  vitt också. Den valda knappen blev vit på vitt och försvann.

  Därför står färgerna nu utskrivna i stället för att härledas ur currentColor.
  En markering som ändrar mening när någon annan ändrar textfärgen är ingen
  markering.
*/
button.profildryck-val__knapp {
  font: inherit;
  font-size: 0.9em;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  color: var(--global-palette3, #0d0d1a);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--global-palette3, #0d0d1a) 25%, transparent);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Pekning och fokus pekar mot gulet utan att ta det – valet är inte gjort än. */
button.profildryck-val__knapp:hover,
button.profildryck-val__knapp:focus,
button.profildryck-val__knapp:focus-visible,
button.profildryck-val__knapp:active {
  color: var(--global-palette3, #0d0d1a);
  background: color-mix(in srgb, var(--global-palette1, #ffb020) 20%, transparent);
  border-color: var(--global-palette1, #ffb020);
}

/*
  Valt: fylld gul, som resten av sidans knappar.

  Reglerna står sist och räknar upp fokus- och pekningsläget uttryckligen –
  annars hade en vald knapp som råkar ha fokus tappat sin fyllning till regeln
  ovanför, som väger exakt lika mycket.

  Fetstilen är inte prydnad. Den som inte skiljer färger ska ändå se vilken
  knapp som är vald, och fyllningen syns även i utskrift.
*/
/*
  En kombination som inte finns.

  Överstruken och dämpad, men kvar på sin plats och fortfarande fokuserbar –
  en skärmläsare läser aria-disabled och titeln. Att gömma knappen hade fått
  raden att hoppa, och kunden hade fått veta att smaken saknas genom att den
  försvann, vilket är svårare att förstå än att den står kvar överstruken.

  Regeln står före det valda läget: en knapp kan inte vara både omöjlig och
  vald, och skulle den ändå bli det ska det synas att den är vald.
*/
button.profildryck-val__knapp[aria-disabled="true"],
button.profildryck-val__knapp[aria-disabled="true"]:hover,
button.profildryck-val__knapp[aria-disabled="true"]:focus,
button.profildryck-val__knapp[aria-disabled="true"]:active {
  color: var(--global-palette3, #0d0d1a);
  background: transparent;
  border-color: color-mix(in srgb, var(--global-palette3, #0d0d1a) 15%, transparent);
  border-style: dashed;
  text-decoration: line-through;
  opacity: 0.45;
  cursor: not-allowed;
}

button.profildryck-val__knapp[aria-pressed="true"],
button.profildryck-val__knapp[aria-pressed="true"]:hover,
button.profildryck-val__knapp[aria-pressed="true"]:focus,
button.profildryck-val__knapp[aria-pressed="true"]:focus-visible,
button.profildryck-val__knapp[aria-pressed="true"]:active {
  font-weight: 600;
  color: #111111;
  background: var(--global-palette1, #ffb020);
  border-color: var(--global-palette1, #ffb020);
}

/* ---------------------------------------------------------------------------
 * De två vägarna till en etikett
 * ------------------------------------------------------------------------ */

.profildryck-vagar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.profildryck-vag {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 10px;
}

.profildryck-vag__rubrik {
  font-family: var(--global-heading-font-family, inherit);
  font-size: 1.05rem;
}

.profildryck-vag__text {
  font-size: 0.9em;
  opacity: 0.75;
}


/*
  Knappen i kortet är samma form som spaltens övriga, en storlek mindre.
  Korten står inne i en ram och behöver inte skrika lika högt som köpknappen.
*/
.profildryck-vag__knapp,
.profildryck-vag .profildryck-lucka__oppna {
  display: block;
  width: 100%;
  margin-block: 0.65rem 0;
  padding: 0.6rem 1.25rem;
  font-family: var(--global-heading-font-family, inherit);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
}

.profildryck-vag__knapp--fylld {
  color: #111111;
  background: var(--global-palette1, #ffb020);
  border: 2px solid var(--global-palette1, #ffb020);
}

.profildryck-vag__knapp--fylld:hover {
  color: #111111;
  background: color-mix(in srgb, var(--global-palette1, #ffb020) 85%, #000000);
}