/**
 * Habits redesign — produktsidans passform-, modell- och omdömessektioner.
 *
 * Target path : wp-content/themes/twenty-twenty-one-child/assets/redesign/css/pdp-sektioner.css
 * Overlay path: wordpress-build/theme/twenty-twenty-one-child/assets/redesign/css/pdp-sektioner.css
 *
 * Värdena är byggarens egna, avlästa ur dess CSSOM, inte uppskattade. Laddas
 * efter chrome.css och ärver dess variabler (--tint, --save, --blue-deep …).
 * Kommentarerna bär besluten från genomgången 2026-10-02 — läs dem innan något
 * ändras, de flesta rättar ett fel som redan uppstått en gång.
 */

/* ── LAGERBESKEDET UNDER PRISET ──────────────────────────────────────────── */
/* "● I lager" står kvar i grönt. Det är ett lugnande besked och ska läsa som
   ett. Att färga HELA raden röd hade sagt två motsatta saker samtidigt: en röd
   prick intill orden "I lager" läses som ett fel.

   TVÅ LÄGEN FÖR ANTALET (Daniel 2026-10-02):

   .stock-few  — under gränsen. Varningsfärgen #B4552D, samma som
                 "Tillfälligt slut" redan använder i mallen. Att låna den
                 färgen i stället för att införa en starkare röd håller
                 hierarkin hel: inget läge får skrika högre än slut i lager.

   .stock-many — över gränsen. INGEN egen färg. Spanen ärver .ship-note:s
                 var(--muted), alltså radens vanliga grå. Talet står där för
                 trovärdighet och inte för brådska, och en varningsfärg på
                 "227 kvar" hade lärt ögat att strunta i varningsfärgen —
                 precis när den låga siffran kommer och behöver fungera.
                 Bara en aning tyngre vikt, så det läser som ett värde.

   Specificiteten måste slå mallens egna `.ship-note b { color: var(--save) }`,
   som är (0,1,1). Därför b.stock-few och inte bara .stock-few. Att .stock-many
   är en <span> och inte ett <b> är av samma skäl, fast tvärtom: den ska INTE
   fångas av den regeln. */
.ship-note b.stock-few { color: #B4552D; font-weight: 700; }
.ship-note .stock-many { font-weight: 650; }

/* ── PASSFORMSRADEN (Kids, Philips) ───────────────────────────────────────── */
/* Samma färger och ram som sektionen, men en rad hög. Familjerna passar HELA
   sin serie, så frågan är inte "passar den min?" utan "passar den alla?" — och
   då räcker ett besked. */
.fit-rad { display: flex; align-items: flex-start; gap: 11px; margin: 26px 0 10px; padding: 14px 16px;
  border: 1.5px solid var(--tint-line); border-radius: 16px;
  background: linear-gradient(168deg, #F8FCFF, #FFFFFF); }
.fit-rad-ikon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; background: var(--save); color: #fff; font-weight: 800; font-size: 13px; }
.fit-rad-text { min-width: 0; }
.fit-rad-text > b { display: block; font-family: var(--font-display); font-size: 15px;
  font-weight: 700; line-height: 1.3; color: var(--ink); }
.fit-rad-text > b b { font-weight: 800; }
.fit-rad-under { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5;
  color: var(--muted); }

/* ── PASSFORMSSEKTIONEN (bara Oral-B) ────────────────────────────────────── */
.fit-ram { margin: 30px 0 10px; border: 1.5px solid var(--tint-line); border-radius: 18px;
  background: linear-gradient(168deg, #F8FCFF, #FFFFFF); overflow: hidden; }
.fit-inre { padding: 22px; }
/* INGEN egen ram på garantiraden. Sektionens ram, fotens ram och dragspelets
   topplinje la tre streck på rad. Nu bär sektionen ett. */
.fit-fot { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; font-size: 12.5px;
  color: var(--muted); line-height: 1.55; }
.fit-skold { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--save); }
.lp-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-deep); margin-bottom: 9px; }
.lp-h2 { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 750;
  line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
/* Samma vikt som listans text. Halvfet blev för tung; det räcker att den står
   i ink i stället för muted. */
.lp-ing { font-size: 14px; color: var(--ink); font-weight: 400; line-height: 1.6; margin: 10px 0 0;
  max-width: 60ch; }
.lp-passbild { position: relative; border-radius: 16px; overflow: hidden; background: var(--tint);
  margin-top: 16px; }
.lp-passbild img { width: 100%; height: auto; display: block; max-width: none; }
/* Ikonerna ligger i UNDERKANT. Uppe täckte de vänstra handtagets metallpinne —
   det enda bilden ska visa. Bock till vänster, kryss till höger.
   NEDTONADE 2026-10-02 (Daniel): 30 → 21 px och en mycket lättare skugga. De ska
   peka ut vilket handtag som är vilket, inte konkurrera med fotot. Beskedet
   bärs ändå av listan under bilden, och DEN är medvetet orörd. */
.fit-ikon { position: absolute; bottom: 10px; z-index: 2; width: 21px; height: 21px;
  border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
  font-size: 11.5px; line-height: 1; box-shadow: 0 1px 5px rgba(15, 36, 50, .18);
  transform: translateX(-50%); }
/* Procenten är UPPMÄTTA ur fotot, inte valda på känsla: tre scanlinjer i nedre
   tredjedelen ger vita handtagets mitt på 32,3 % och rosa på 66,2 % av bildbredden,
   med mindre än 0,1 procentenhets spridning mellan linjerna. Tidigare låg de
   spegelvt på 16 % från vardera kant, vilket satte krysset vid rosa handtagets
   högerkant i stället för mitt under det (Daniel 2026-10-02).
   translateX(-50%) centrerar märket på punkten oavsett hur brett bilden renderas —
   en räkning med halva märkesbredden hade gett olika resultat på mobil och desktop. */
.fit-ikon.ja { left: 32.3%; background: var(--save); }
.fit-ikon.nej { left: 66.2%; background: #C8493D; }
/* Bildtext. Centrerad med flit: vänsterställd läses den som ett nytt stycke i
   brödtexten, centrerad under ramen läses den som en beskrivning av bilden. */
.lp-bildtext { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted);
  text-align: center; }
.lp-lista { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-lista li { display: flex; gap: 11px; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.lp-lista li b { font-weight: 750; }
/* IFYLLDA cirklar, vit symbol. De ljusa plattorna med färgad symbol lästes
   inte som ja och nej på avstånd. */
.lp-ja, .lp-nej { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 800; font-size: 13px; color: #fff; }
.lp-ja { background: var(--save); }
.lp-nej { background: #C8493D; }

/* ── PILLEN UNDER H1 (bara Oral-B) ───────────────────────────────────────── */
.h1-label.habits-klick { cursor: pointer; font-family: inherit; }
.h1-label.habits-klick:hover { background: var(--tint-2); border-color: #B4DAF6; }
/* Fortsättning på "iO-serien", inte ett eget element: samma storlek och färg,
   bara aningen tyngre och understruket. Ingen egen marginal — texten och den
   här spanen ligger i samma flex-barn, så avståndet är ett vanligt
   ordmellanrum (se habits_pdp_h1_label i pdp-sektioner.php). */
.h1-label .habits-mer { font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ── ARKET som pillen öppnar ─────────────────────────────────────────────── */
/* Svaret ska nå kunden där hon står, inte efter en scroll genom hela köpboxen.
   På mobil ligger passformssektionen bakom galleri, modellval och packtrappa. */
.habits-ark[hidden] { display: none; }
/* Arket får glida in. Att bara dyka upp lästes som ett fel. */
.habits-ark-bak { animation: habits-tona .18s ease both; }
.habits-ark-kort { animation: habits-upp .26s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes habits-tona { from { opacity: 0; } to { opacity: 1; } }
@keyframes habits-upp { from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .habits-ark-bak, .habits-ark-kort { animation: none; }
}
.habits-ark { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end;
  justify-content: center; }
.habits-ark-bak { position: absolute; inset: 0; background: rgba(16, 34, 47, .45); }
.habits-ark-kort { position: relative; z-index: 1; width: 100%; max-width: 460px; background: #fff;
  border-radius: 20px 20px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow: auto; box-shadow: 0 -10px 40px rgba(15, 36, 50, .22); }
.habits-ark-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0;
  border-radius: 50%; background: #F1F5F8; color: #10222F; font-size: 19px; line-height: 1;
  cursor: pointer; }
.habits-ark-klar { display: block; width: 100%; min-height: 48px; margin: 18px 0 0; border: 0;
  border-radius: 13px; cursor: pointer; background: linear-gradient(135deg, #00A0FF, #0086E2);
  color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
@media (min-width: 681px) {
  .habits-ark { align-items: center; }
  .habits-ark-kort { border-radius: 20px; max-width: 520px; }
}

/* ── MODELLSEKTIONEN ─────────────────────────────────────────────────────── */
/* Fullbredd utanför köpkolumnen, VÄNSTERSTÄLLT som på byggaren. Ett centrerat
   rubrikblock såg inte ut som landningssidan. Botten är stor med flit:
   sektionerna ska läsas som två och inte som en lång. */
.habits-modeller { padding: 46px 0 132px; }
.habits-modeller .lp-wrap { width: min(1160px, calc(100% - 32px)); margin: 0 auto; text-align: left; }
/* Byggarens egna brytpunkter, avlästa ur dess CSSOM: 1 kolumn under 720, 2 som
   standard, max-bredd 900 från 861 och 4 kolumner från 981. En egen trappa gav
   två kolumner där byggaren visar en. */
.habits-modeller .lp-rad2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 36px auto 0; text-align: left; }
@media (max-width: 720px) { .habits-modeller .lp-rad2 { grid-template-columns: 1fr; gap: 18px; } }
@media (min-width: 861px) { .habits-modeller .lp-rad2 { max-width: 900px; } }
@media (min-width: 981px) {
  .habits-modeller .lp-rad2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
    max-width: none; }
}
.habits-modeller .lp-modell { background: #fff; border: 0; border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(15, 36, 50, .09); cursor: pointer;
  transition: box-shadow .16s ease, transform .16s ease; }
.habits-modeller .lp-modell:hover { box-shadow: 0 14px 40px rgba(15, 36, 50, .14);
  transform: translateY(-2px); }
.habits-modeller .lp-bildruta { position: relative; }
.habits-modeller .lp-modellbilder { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; }
/* INGEN scroll-behavior: smooth här. Både den och scrollTo({behavior:"smooth"})
   droppas tyst i vissa lägen, och då blev svepknappen helt död — uppmätt
   2026-10-02. Med scroll-snap landar bilden rent ändå. */
.habits-modeller .lp-modellbilder::-webkit-scrollbar { display: none; }
.habits-modeller .lp-modellbilder img { flex: 0 0 100%; width: 100%; aspect-ratio: 1/1;
  object-fit: cover; scroll-snap-align: start; display: block; max-width: none; }
.habits-modeller .lp-svep[hidden] { display: none; }
.habits-modeller .lp-svep { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-soft); color: var(--blue-deep);
  font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px 2px;
  opacity: 0; transition: opacity .16s ease; }
.habits-modeller .lp-svep.bak { left: 8px; }
.habits-modeller .lp-svep.fram { right: 8px; }
.habits-modeller .lp-modell:hover .lp-svep,
.habits-modeller .lp-svep:focus-visible { opacity: 1; }
@media (hover: none) { .habits-modeller .lp-svep { opacity: 1; } }
.habits-modeller .lp-prickar { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.habits-modeller .lp-prickar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.habits-modeller .lp-prickar i.on { background: var(--blue); }
.habits-modeller .lp-modell .txt { padding: 6px 22px 24px; }
.habits-modeller .lp-modell h3 { font-family: var(--font-display); font-size: 20px;
  font-weight: 750; margin: 10px 0 0; }
@media (min-width: 981px) { .habits-modeller .lp-modell h3 { font-size: 17px; }
  .habits-modeller .lp-modell .txt { padding: 4px 16px 20px; } }
.habits-modeller .lp-modell p { margin: 6px 0 0; font-size: 14px; color: var(--muted);
  line-height: 1.45; }
.habits-modellcta { display: flex; justify-content: center; margin: 34px 0 0; }
.habits-modellcta .cta { min-width: 280px; max-width: 420px; min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #00A0FF, #0086E2);
  color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* ── OMDÖMESSEKTIONEN ───────────────────────────────────────────────────── */
.habits-omd { padding: 10px 0 46px; }
.habits-omd .lp-wrap { width: min(640px, calc(100% - 32px)); margin: 0 auto; }
.habits-omd .lp-omd-topp { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.habits-omd .lp-omd-topp h2 { font-family: var(--font-display); font-size: 20px; font-weight: 750;
  margin: 0; letter-spacing: -.02em; }
.habits-omd .lp-omd-tp { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 650; color: var(--muted); text-decoration: none; }
.habits-omd .lp-omd-tp svg { width: 13px; fill: var(--tp, #00B67A); }
.habits-omd .lp-omd-tp b { color: var(--ink); }
.habits-omd .lp-omd-grid { display: grid; gap: 10px; }
.habits-omd .review-card { position: relative; border: 0; border-radius: 14px; padding: 14px 16px 12px;
  background: #fff; box-shadow: 0 6px 20px rgba(15, 36, 50, .07); }
.habits-omd .review-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink);
  margin: 0 0 12px; max-width: calc(100% - 30px); }
.habits-omd .review-author { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.habits-omd .review-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid;
  place-items: center; background: linear-gradient(135deg, var(--tint-2), var(--tint));
  border: 1px solid var(--tint-line); font-family: var(--font-display); font-size: 12.5px;
  font-weight: 750; color: var(--blue-deep); }
.habits-omd .review-author b { color: var(--ink); font-weight: 650; }
.habits-omd .review-tp { display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-weight: 650; color: var(--muted); text-decoration: none; }
.habits-omd .review-tp svg { width: 13px; fill: var(--tp, #00B67A); }
.habits-omd .lp-omd-fler { display: inline-block; margin-top: 14px; font-size: 13px;
  font-weight: 650; color: var(--blue-deep); text-decoration: none; }
.habits-omd .lp-slutcta { display: flex; justify-content: center; margin: 26px 0 0; }
.habits-omd .lp-slutcta .cta { min-width: 280px; max-width: 420px; min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #00A0FF, #0086E2);
  color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
/* Under 720 px blir den en svepbar strippa — det är rörelsen sektionen ska ha. */
@media (max-width: 720px) {
  .habits-omd .lp-omd-grid { grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; align-items: start; }
  .habits-omd .lp-omd-grid::-webkit-scrollbar { display: none; }
  .habits-omd .review-card { scroll-snap-align: start; }
  .habits-omd .lp-slutcta .cta { width: 100%; min-width: 0; }
}
@media (min-width: 861px) {
  .habits-omd .lp-wrap { width: min(980px, calc(100% - 32px)); }
  .habits-omd .lp-omd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
    align-items: start; }
  .habits-omd .lp-omd-topp h2 { font-size: 24px; }
}
@media (max-width: 680px) {
  .fit-inre { padding: 16px; }
  .habits-modeller { padding: 34px 0 6px; }
  .habits-modellcta .cta { width: 100%; min-width: 0; }
}

/* ── MODELLVÄLJAREN ──────────────────────────────────────────────────────── */
/* Kompakt rad som öppnar ett ark, i stället för fyra knappar rakt i köpkolumnen.
   Mönstret är Apoteas (Daniel 2026-10-02). PACKTRAPPAN RÖRS INTE: den är
   AOV-spaken och ska stå kvar synlig, se habits_pdp_valjare() för resonemanget.
   Värdena är uppmätta i prototypen på den live-renderade sidan. */
.vj { margin: 0 0 4px; }
/* Flex-rad. Bar bara etikettexten sedan Jämför-knappen togs bort 2026-10-02:
   väljararket visar alla fyra modellerna med bild och beskrivning samtidigt,
   vilket var jämförelsemodalens enda uppgift. */
.vj-etikett { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px;
  font-weight: 700; color: var(--ink); margin: 16px 0 7px; }
.vj-rad { position: relative; display: flex; align-items: stretch; gap: 12px; width: 100%;
  padding: 11px 14px 11px 68px; overflow: hidden; min-height: 62px;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer;
  text-align: left; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease; }
.vj-rad:hover { border-color: var(--tint-line); box-shadow: 0 4px 14px rgba(15, 36, 50, .07); }
/* PULSEN efter "Välj din modell". Två lugna andetag i varumärkesblått, inte en
   blixt: raden ska peka ut sig själv, inte skrämmas. Sätts på av JS först när
   rullningen landat, och bara därifrån. */
@keyframes vj-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 149, 246, 0); border-color: var(--line); }
  12%, 52% { box-shadow: 0 0 0 4px rgba(0, 149, 246, .22); border-color: var(--blue); }
  32%      { box-shadow: 0 0 0 0 rgba(0, 149, 246, 0); border-color: var(--line); }
}
.vj-rad.vj-blink { animation: vj-blink 1.4s ease-in-out 1; }
/* Utan rörelse: samma besked, men som en stillastående ram så länge klassen
   sitter kvar. Att ge ingenting alls hade lämnat kunden utan förklaring. */
@media (prefers-reduced-motion: reduce) {
  .vj-rad.vj-blink { animation: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 149, 246, .18); }
}
/* Bilden ligger ABSOLUT. Med align-self: stretch löste den sig mot sin egen
   proportion (200×420) och sköt radhöjden till 94 px. Nu bestämmer texten
   höjden och bilden fyller den. top: 10px ger luft upptill, bottom: 0 låter
   borsthuvudet möta kortets underkant i stället för att sluta i luften. */
.vj-bild { position: absolute; left: 12px; top: 10px; bottom: 0; width: 44px; overflow: hidden; }
.vj-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; mix-blend-mode: multiply; }
.vj-txt { min-width: 0; flex: 1 1 auto; display: block; margin-block: auto; }
.vj-rad .vj-txt b { display: block; font-family: var(--font-display); font-size: 14.5px;
  font-weight: 700; color: var(--ink); line-height: 1.25; }
/* Hela beskrivningen får plats på TVÅ rader och stoppas där. En ellips mitt i
   en mening lästes som trasigt; två hela rader gör det inte. */
.vj-rad .vj-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.25; overflow: hidden; }
/* Beskrivningen fyller all plats den får, så pilen behöver egen marginal. */
.vj-chev { flex: 0 0 auto; width: 18px; margin: auto 0 auto 14px; color: var(--muted); }
.vj-chev svg { width: 18px; display: block; }

/* Arket */
.vj-ark[hidden] { display: none; }
.vj-ark { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end;
  justify-content: center; }
.vj-bak { position: absolute; inset: 0; background: rgba(16, 34, 47, .45);
  animation: vj-tona .18s ease both; }
.vj-kort { position: relative; z-index: 1; width: 100%; max-width: 460px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(15, 36, 50, .22);
  animation: vj-upp .26s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes vj-tona { from { opacity: 0; } to { opacity: 1; } }
@keyframes vj-upp { from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vj-bak, .vj-kort { animation: none; } }
/* INGEN linje under rubriken. Den hamnade några pixlar ovanför första kortets
   egen överkant, och två streck så nära varandra läses som ett fel. */
.vj-huvud { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.vj-huvud b { flex: 1 1 auto; font-family: var(--font-display); font-size: 17px;
  font-weight: 750; color: var(--ink); }
.vj-x { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: #F1F5F8; color: #10222F; font-size: 19px; line-height: 1; cursor: pointer; }
.vj-lista { overflow: auto; padding: 0 14px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; }
.vj-val { position: relative; display: flex; align-items: stretch; gap: 12px; width: 100%;
  padding: 12px 13px 12px 76px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; text-align: left; font-family: inherit;
  overflow: hidden; min-height: 74px; }
.vj-val[aria-checked="true"] { border-color: var(--blue); background: var(--tint);
  box-shadow: 0 0 0 1px var(--blue) inset; }
.vj-val-bild { position: absolute; left: 11px; top: 12px; bottom: 0; width: 54px; overflow: hidden; }
/* multiply: bilderna är frilagda mot VITT och inte mot genomskinligt, så utan
   den syns en vit kvadrat kring huvudet på den valda raden. */
.vj-val-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; mix-blend-mode: multiply; }
.vj-val-txt { min-width: 0; flex: 1 1 auto; margin-block: auto; }
.vj-val .vj-val-txt b { display: block; font-family: var(--font-display); font-size: 15px;
  font-weight: 700; color: var(--ink); line-height: 1.25; }
.vj-val .vj-val-txt small { display: block; margin-top: 2px; font-size: 12.5px;
  color: var(--muted); line-height: 1.25; }
.vj-bock { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; background: var(--blue); color: #fff; font-size: 12px;
  font-weight: 800; margin-block: auto; }
.vj-val[aria-checked="false"] .vj-bock { display: none; }
@media (min-width: 681px) {
  .vj-ark { align-items: center; }
  .vj-kort { border-radius: 20px; max-width: 520px; }
}
/* Sidans egna modellknappar göms men ligger kvar: väljaren KLICKAR på dem. */
.vj-dold { display: none !important; }