/**
 * Habits redesign — cart upsell (household question in the cart drawer).
 * Target path : wp-content/themes/twenty-twenty-one-child/assets/redesign/css/cart-upsell.css
 * Overlay path: wordpress-build/theme/twenty-twenty-one-child/assets/redesign/css/cart-upsell.css
 *
 * OWN FILE ON PURPOSE (Daniel 2026-09-14). Nothing here goes into chrome.css:
 * a parallel session edits that file, and a shared file is where two work
 * streams collide. All tokens used below (--blue, --tint, --ink, --save, …)
 * are already defined on :root in chrome.css.
 *
 * Source of truth for behaviour and copy:
 * analysis/merforsaljning/prototyp-oral-b-merforsaljning.html
 */
/* Ligger mellan varuraderna och foten. Foten flyttar sig aldrig. */
  /* ── Synlighet utan att skrika (Daniel 2026-09-14) ──────────────
     Blocket smalt in i lådan och hoppades over. Fyra dampade grepp i stallet
     for ett skrikigt: en accentlinje i overkant som avgransar det som en egen
     yta, ett snapp morkare underlag, en ikon som ger fragan ett fokus, och
     knappar som ser ut som knappar i stallet for etiketter.
     Utfallet mats av grind G1 i MATPLAN.md, svarsfrekvens per lådoppning. */
  .upsell { flex: none; display: flex; flex-direction: column; max-height: 50vh;
    padding: 14px 20px 15px; border-top: 2px solid var(--blue);
    background: var(--tint-2); animation: rise .26s ease; position: relative; z-index: 2; }
  /* Nar kunden star i valet blir kortet det aktiva lagret och varukorgen
     tonas ned. Den gar fortfarande att lasa och andra, bara inte lika stark. */
  .cart-drawer.uo-live .upsell { border-radius: 16px 16px 0 0; border-top-color: transparent;
    box-shadow: 0 -14px 30px rgba(7, 45, 70, .16); }
  /* Varukorgen tonas ned bakom erbjudandet, men kopknappen gor det inte:
     en nedtonad huvudknapp laeses som avstaengd. */
  .cart-drawer.uo-live .cart-items,
  .cart-drawer.uo-live .cart-shipbar,
  .cart-drawer.uo-live .cart-rows { opacity: .38; }
  .cart-items, .cart-shipbar, .cart-rows { transition: opacity .22s ease; }

  /* ── Arket: taecker hela lådan, glider upp underifrån ───────────── */
  /* KLASSEN HETER uo-open OCH INTE open MED FLIT (uppmätt på stagingdev
     2026-09-14). Gamla temats main.css har en global .open-regel som sätter
     display:none, och den slog ut arket helt: renderat, ohidat och osynligt
     med höjd 0. Använd aldrig ett generiskt klassnamn i den här kodbasen. */
  .uo-sheet { position: absolute; inset: 0; z-index: 5; background: #fff;
    display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.25,.8,.35,1);
    box-shadow: 0 -18px 44px rgba(7, 45, 70, .18); }
  .uo-sheet.uo-open { transform: none; }
  .uo-sheet[hidden] { display: none; }
  .uo-sheet-head { flex: none; display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 18px 13px; border-bottom: 1px solid var(--line); }
  /* ── Arkets rubrik: produkten ska dominera vyn ──────────────────
     Uppmätt på stagingdev 2026-09-14: namnet försvann i hierarkin, kunden
     såg inte tydligt vilken produkt hon höll på att välja. Bilden är dessutom
     en riktig produktbild nu, inte en ikon, och behöver egna passningsregler
     annars sticker fotot ut ur ramen. */
  /* Egen rad bara för krysset, så det aldrig konkurrerar med rubriken. */
  .uo-sheet-bar { flex: none; display: flex; justify-content: flex-end;
    padding: 9px 12px 0; }
  /* Bild och rubrik i linje med varandra, bocken på egen rad under dem.
     I samma rad trycktes bocken ut åt höger och toppen såg rörig ut
     (Daniel 2026-09-14). */
  .uo-sheet-head { display: block; padding: 2px 18px 15px; }
  .uo-head-row { display: flex; align-items: center; gap: 14px; }
  .uo-sheet-head .uo-head { flex: 1; min-width: 0; }
  /* Bocken står under rubriken i samma textkolumn. width: fit-content är det
     som håller den borta från högerkanten: utan den sträcker den sig över hela
     kolumnen och ser utknuffad ut (Daniel 2026-09-14). */
  /* Bocken star i linje med FORSTA textraden, inte centrerad mot hela
     etiketten. Med align-items: center hamnar den mitt emellan tva rader. */
  /* En rad, alltid. Med en enda rad ar centrerad bock ratt: den hamnar mitt
     i texten. Det var radbrytningen som gjorde att den sag snett placerad ut,
     inte justeringen (Daniel 2026-09-14). */
  /* Egen rad under bild och rubrik, med HELA lådans bredd att växa på.
     I textkolumnen bredvid bilden fanns bara ~227 px på en Galaxy A55: med
     nowrap stack etiketten ut åt höger, utan nowrap klämdes den mot marginalen.
     Här får den plats, och den får bryta om texten blir längre. Bocken står i
     linje med FÖRSTA raden, inte centrerad mot båda. */
  .uo-sheet-head .uo-fit { display: inline-flex; align-items: flex-start;
    width: fit-content; max-width: 100%; margin: 11px 0 0;
    white-space: normal; font-size: 10.5px; padding: 5px 10px 5px 8px;
    line-height: 1.35; }
  .uo-sheet-head .uo-fit svg { margin-top: 2px; }
  /* Det korta namnformatet ryms på en rad, och den vunna höjden går till
     rubriken före bilden: rubriken är det som svarar på "vilken produkt är
     det jag väljer". Bilden växer måttligt så raden inte blir hög igen. */
  /* Ramen behalls som yta men syns inte: ingen kontur, ingen platta, ingen
     inre marginal. Produkten far hela rutan i stallet for att sitta som ett
     litet foto i en ram (Daniel 2026-09-14). */
  .uo-sheet-head .uo-thumb { width: 86px; height: 86px; border: 0;
    background: none; padding: 0; border-radius: 0; }
  .uo-sheet-head .uo-thumb.har-bild { background: none; border: 0; }
  .uo-sheet-head .uo-name { font-family: var(--font-display); font-size: 18px;
    font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
    text-wrap: balance; }


  /* Riktiga produktbilder: hela bilden ska synas, aldrig beskäras. */
  .uo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .uo-thumb.har-bild { background: #fff; border-color: var(--line); }
  .uo-sheet-head .uo-head { flex: 1; min-width: 0; }
  .uo-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; padding: 4px 18px 14px; }
  .uo-sheet-foot { flex: none; padding: 13px 18px calc(15px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: #fff; }
  .uo-sheet-foot .uo-foot { margin-bottom: 10px; }
  .uo-sheet-foot .uo-price { font-size: 19px; }
  .uo-sheet-foot .uo-add { min-height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px;
    flex: 1 1 auto; max-width: 62%; justify-content: center; }
  .uo-sheet .uo-save { margin-top: 12px; }
  .uo-sheet-back { display: block; width: 100%; text-align: center; font-size: 12.5px;
    font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

  /* Avbojning efter tillagget: samma vikt som ovriga lankar, inte en naken knapp */
  .uo-reopen { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
    padding: 11px 12px; border-radius: 11px; background: #fff; border: 1px dashed var(--tint-line);
    font-size: 12.5px; font-weight: 700; color: var(--blue-deep); }
  .uo-reopen:hover { border-style: solid; border-color: var(--blue); }
  .uo-q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .uo-q-head .upsell-q { margin-bottom: 0; }
  .uo-q-x { flex: none; width: 26px; height: 26px; margin: -3px -4px 0 0; display: grid;
    place-items: center; border-radius: 50%; color: var(--muted); }
  .uo-q-x svg { width: 15px; }
  .uo-q-x:hover { background: var(--surface); color: var(--ink); }
  .uo-dismiss { display: block; width: 100%; margin-top: 11px; text-align: center;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    text-decoration: underline; text-underline-offset: 2px; }

  /* ── Jamfor modeller: overlagg ovanpa arket ──────────────────── */
  .uo-lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .uo-cmp-open { font-size: 11.5px; font-weight: 700; color: var(--blue-deep);
    text-decoration: underline; text-underline-offset: 2px; }
  .uo-cmp { position: absolute; inset: 0; z-index: 6; background: #fff;
    display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform .28s cubic-bezier(.25,.8,.35,1); }
  .uo-cmp.uo-open { transform: none; }
  .uo-cmp[hidden] { display: none; }
  .uo-cmp-head { flex: none; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .uo-cmp-head strong { font-family: var(--font-display); font-size: 16px; font-weight: 750; }
  .uo-cmp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 18px 18px; }
  .uo-cmp-row { display: block; width: 100%; text-align: left; margin-top: 10px;
    padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .uo-cmp-row.on { border-color: var(--blue); border-width: 2px; padding: 12px 13px;
    background: linear-gradient(0deg, #F4FAFF, #FDFEFF); }
  .uo-cmp-row b { display: block; font-family: var(--font-display); font-size: 14px;
    font-weight: 750; color: var(--ink); margin-bottom: 4px; }
  .uo-cmp-row.on b { color: var(--blue-deep); }
  .uo-cmp-row p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

  @media (prefers-reduced-motion: reduce) { .uo-sheet, .uo-cmp { transition: none; } }
  /* "Fortsatt handla" doljs: pa mobil ar den raden yta som varukorgen
     behover battre, och lådan stangs anda med krysset eller utanforklick. */
  .cart-drawer .cart-continue { display: none; }

  /* Varukorgen ska aldrig tryckas ihop till ingenting av erbjudandet */
  .cart-drawer:not(.is-empty) .cart-items { min-height: 88px; }
  .upsell[hidden] { display: none !important; }
  .cart-drawer.is-empty .upsell { display: none !important; }
  /* The heading may never be clipped, on any screen (Daniel 2026-09-14). A Galaxy
   * A55 reports 360 CSS px, the drawer is min(420px, 88vw) of that, and at a fixed
   * 14.5px the household question came out 9px too wide and lost its last word.
   * The size therefore follows the same viewport the drawer is measured from, and
   * wrapping — never an ellipsis — is the last resort, so no word is ever hidden.
   * Measured against the shipped font file at weight 800: every heading stays on
   * one line from a 360px viewport upward, with 11px to spare at 360. */
  .upsell-q { font-family: var(--font-display); font-size: clamp(13px, 3.7vw, 14.5px);
    font-weight: 800; margin: 0; letter-spacing: -.02em; color: var(--ink);
    text-wrap: balance; }
  /* Parked, not deleted (Daniel 2026-09-14): the household question ships without
   * an icon for now. If one comes back it is the two-person glyph, so the circle
   * keeps its styling here and lage1() only has to print the span again. */
  .uo-q-ikon { flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--blue); color: #fff; display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(0, 149, 246, .32); }
  .uo-q-ikon svg { width: 17px; }
  /* The close button owns 22px plus this gap; the heading gets the rest and is
   * sized to fit it. Nothing is hidden here — an overflowing heading wraps. */
  .uo-q-head { align-items: center; gap: 16px; margin-bottom: 12px; }
  .uo-q-head .uo-q-text { flex: 1; min-width: 0; }
  .upsell-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  .upsell-opts button { background: #fff; border: 1.5px solid var(--blue); border-radius: 999px;
    padding: 11px 4px; font-size: 13px; font-weight: 700; color: var(--blue-deep);
    white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 149, 246, .14);
    transition: border-color .14s, box-shadow .14s, transform .14s, background .14s; }
  .upsell-opts button:hover { background: var(--tint); }
  .upsell-opts button:hover { border-color: var(--blue); box-shadow: 0 3px 10px rgba(0,149,246,.16); transform: translateY(-1px); }
  .upsell-opts button.ghost { color: var(--muted); border-color: var(--line); }
  .upsell-back { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
    color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

  .uo { background: #fff; border: 1px solid var(--tint-line); border-radius: 12px; padding: 11px 12px 12px; }
  .uo-thumb { width: 42px; height: 42px; flex: none; border-radius: 9px; border: 1px solid var(--tint-line);
    background: linear-gradient(158deg, #F4FAFF, #E4F2FE); display: grid; place-items: center; color: var(--blue-deep); }
  .uo-thumb { position: relative; }
  .uo-thumb svg { width: 18px; opacity: .55; }
  .uo-thumb-n { position: absolute; right: -5px; bottom: -5px; background: #fff;
    border: 1px solid var(--line); border-radius: 7px; padding: 1px 5px;
    font-family: var(--font-display); font-size: 10px; font-weight: 800; color: var(--ink); }
  .uo-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
  a.uo-plink { text-decoration: none; color: inherit; display: block; }
  a.uo-plink:hover .uo-name { text-decoration: underline; text-underline-offset: 2px; }
  a.uo-plink:hover .uo-thumb { border-color: var(--blue); }

  .uo-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #3B5164; margin: 16px 0 8px; }
  .uo-sheet .uo-packs { gap: 7px; }
  .uo-sheet .uo-pack { padding: 8px 3px 7px; border-radius: 11px; }
  .uo-sheet .uo-pack.on { padding: 7px 2px 6px; }
  .uo-sheet .uo-pack b { font-size: 15px; }
  .uo-sheet .uo-pack .u { font-size: 10.5px; }
  .uo-sheet .uo-pack .s { font-size: 10.5px; padding: 2px 6px; }
  .uo-sheet .uo-chips { gap: 7px; }
  .uo-sheet .uo-chips.row4 .uo-chip { padding: 9px 4px; font-size: 12.5px; }
  .uo-sheet .uo-chip { padding: 9px 13px; font-size: 12.5px; }
  .uo-chips.models { grid-template-columns: repeat(4, 1fr); display: grid; gap: 5px; }
  .uo-sheet .uo-chips.models .uo-chip { padding: 10px 6px; font-size: 10.5px;
    white-space: nowrap; border-radius: 10px; letter-spacing: -.01em; }
  /* Modellraden som dyker upp under chipsen. Bryter hellre an sticker ut. */
  .uo-desc { margin: 9px 0 0; font-size: 11.5px; line-height: 1.45; color: #3D5364; }
  /* Smile-market. Loggan star aldrig naken: texten hor till samma enhet.
     Centrerad i rutan (Daniel 2026-09-15). Uppmatt mot typsnittsfilen: texten ar
     181 px och loggan 55, alltsa 245 px i en ruta med 257 px innermatt pa en
     360 px telefon - en rad, med 12 px over. Pa 320 px racker bredden inte, och
     da bryter den. Darfor centreras aven texten och inte bara raden. */
  .uo-smile { display: flex; align-items: center; justify-content: center;
    gap: 9px; margin-top: 16px;
    padding: 10px 12px; background: var(--surface); border-radius: 10px; }
  .uo-smile span { font-size: 11px; font-weight: 600; color: var(--muted);
    line-height: 1.35; text-align: center; }
  /* !important is deliberate here, and only here (Daniel 2026-09-14). The drawer
   * is opened on every page, and on the checkout, the cart and Mina sidor the old
   * theme's and WooCommerce's stylesheets are deliberately kept (see
   * habits_redesign_dequeue_unused_assets). The logo blew up to full width there.
   * Our own element is the one thing we may defend outright, so its size is not
   * up for negotiation with whatever the host page loads. The img tag carries the
   * same 55x18 as attributes, so the logo is correct even with no CSS at all. */
  .uo-smile img { height: 18px !important; width: auto !important;
    max-width: 96px !important; max-height: 18px !important; flex: none; }
  .uo-sheet .uo-save { font-size: 11.5px; line-height: 1.5; margin-top: 14px; }

  /* Passformen som bockmärke i stället för brödtext */
  .uo-head { flex: 1; min-width: 0; }
  .uo-fit { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0;
    background: #D7F0E4; color: #0E6A48; border-radius: 6px;
    padding: 3px 8px 3px 6px; font-size: 10px; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; }
  .uo-fit svg { width: 11px; height: 11px; flex: none; }


  .uo-packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .uo-packs.three { grid-template-columns: repeat(3, 1fr); }
  .uo-pack { border: 1px solid var(--line); border-radius: 9px; padding: 6px 2px 5px; text-align: center;
    background: #fff; transition: border-color .14s, background .14s; }
  .uo-pack { position: relative; }
  /* Svavar ovanfor rutan, som en etikett man satt dit */
  .uo-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    border-radius: 999px; white-space: nowrap;
    font-family: var(--font-body); font-size: 7.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #fff; padding: 3px 7px; line-height: 1; }
  .uo-packs { margin-top: 11px; }
  .uo-tag.pop { background: var(--blue); box-shadow: 0 3px 10px rgba(0,149,246,.3); }
  .uo-tag.varde { background: #F07E2B; box-shadow: 0 3px 10px rgba(240,126,43,.28); }
  .uo-pack:hover { border-color: #B8CDDE; }
  /* Samma markering som .pack-card.active pa produktsidan */
  .uo-pack.on { border-color: var(--blue); border-width: 2px; padding: 5px 1px 4px;
    background: linear-gradient(0deg, #F4FAFF, #FDFEFF); box-shadow: 0 8px 26px rgba(0,149,246,.15); }
  .uo-pack b { display: block; font-family: var(--font-display); font-size: 13.5px; font-weight: 750;
    color: var(--ink); white-space: nowrap; }
  .uo-pack b i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted);
    letter-spacing: -.01em; }
  .uo-pack.on b i { color: var(--blue-deep); }
  .uo-pack .u { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; }
  .uo-pack.on .u { color: var(--blue-deep); font-weight: 700; }
  .uo-pack .s { display: inline-block; font-size: 9.5px; font-weight: 800; color: #0E6A48;
    background: #D7F0E4; border-radius: 4px; padding: 1px 5px; margin-top: 3px; white-space: nowrap; }

  /* Besparingen i samma tonade ruta som .pack-compare pa produktsidan. */
  .uo-save { margin: 11px 0 0; padding: 11px 13px; border-radius: 12px;
    background: var(--tint); border: 1px solid var(--tint-line);
    font-size: 11px; line-height: 1.5; color: var(--muted); }
  .uo-save b { color: var(--save); font-weight: 700; }
  /* Statisk fordelstext dar besparing inte ar relevant */
  .uo-fact { margin: 11px 0 0; padding: 11px 13px; border-radius: 12px;
    background: var(--tint); border: 1px solid var(--tint-line);
    font-size: 11.5px; line-height: 1.5; color: var(--ink-2, #294356); }

  .uo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .uo-chips.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .uo-chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: #fff;
    font-size: 12px; font-weight: 650; color: var(--ink); display: inline-flex; align-items: center;
    justify-content: center; gap: 5px; }
  .uo-chips.row4 .uo-chip { padding: 6px 4px; font-size: 11.5px; gap: 4px; }
  .uo-chip:hover { border-color: var(--blue); }
  .uo-chip.on { border-color: var(--blue); border-width: 2px; color: var(--blue-deep);
    background: linear-gradient(0deg, #F4FAFF, #FDFEFF); box-shadow: 0 6px 18px rgba(0,149,246,.15); }
  .uo-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(16,34,47,.16); flex: none; }

  /* Farger som chips som raknar upp. Ersatter atta stepparrader och tar
     en fjardedel av hojden. Tryck pa chipet = +1, tryck pa krysset = nollstall. */
  .uo-mix { display: flex; flex-wrap: wrap; gap: 6px; }
  .uo-mc { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-size: 12px; font-weight: 650; color: var(--ink); }
  .uo-mc:hover:not(:disabled) { border-color: var(--blue); }
  .uo-mc:disabled { opacity: .4; cursor: not-allowed; }
  .uo-mc.on { border-color: var(--blue); border-width: 2px; padding: 7px 10px;
    background: linear-gradient(0deg, #F4FAFF, #FDFEFF); color: var(--blue-deep); }
  .uo-mc-add { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; }
  .uo-mc .n { font-family: var(--font-display); font-weight: 800; font-size: 11px;
    background: var(--blue); color: #fff; border-radius: 99px; min-width: 18px;
    height: 18px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px; line-height: 1; align-self: center; }
  .uo-mx { flex: none; width: 18px; height: 18px; display: grid; place-items: center;
    border-radius: 50%; color: var(--muted); font-size: 13px; line-height: 1; }
  .uo-mx:hover { background: var(--surface); color: var(--ink); }
  .uo-count { font-size: 11.5px; font-weight: 650; color: var(--muted); margin: 8px 0 0; }
  .uo-count.ok { color: var(--save); }
  .uo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  /* Kolumn, inte inline: ett block-element inuti en inline-span la sig
     bredvid beloppet i stallet for under det. */
  .uo-price { display: inline-flex; flex-direction: column; align-items: flex-start;
    font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 1.1; }
  .uo-price small { display: block; font-family: var(--font-body); font-size: 10.5px;
    font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 5px; }
  .uo-add { background: linear-gradient(135deg, #00A0FF, #0086E2); color: #fff; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; padding: 10px 17px; font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,149,246,.28); transition: filter .15s, transform .15s; }
  .uo-add:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
  .uo-add:disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }


  .uo-done { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
    color: var(--save); margin-bottom: 12px; }
  .uo-done svg { width: 17px; flex: none; }

  /* Nasta-person-erbjudandet: ett riktigt kort, inte en liten lank.
     Raden var 12,5 px i --muted mellan en rubrik i vikt 800 och tva bla knappar,
     och forsvann i sin egen omgivning (Daniel 2026-09-14). Den bar flodets
     starkaste argument, sa den far en egen vit yta med accentkant i stallet. */
  .uo-tips { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 11px;
    padding: 9px 11px; background: #fff; border-radius: 10px;
    border-left: 3px solid var(--blue); }
  .uo-tips p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
  .uo-tips b { font-weight: 800; }
  /* Forsta pricken ar fargen kunden valde, andra en kontrast. Ren dekoration
     for skarmlasare - meningen bredvid sager samma sak i ord. */
  .uo-par { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-top: 2px; }
  .uo-par i { width: 15px; height: 15px; border-radius: 50%; display: block;
    box-shadow: 0 0 0 1px rgba(16, 34, 47, .10) inset; }
  .uo-done + .upsell-q { margin-bottom: 8px; }