/* =============================================================================
   Desktop-lager för den mobil-först byggda appen (mobile.html / mobile.js).
   En kodbas — samma DOM och samma JS — fast vid breda skärmar (≥1024px) byter
   skalet form: bottennavet blir en vänster sidomeny och innehållet får en
   centrerad, läsbar bredd. Laddas SIST av stilmallarna så den överskuggar
   base/components/theme. Allt här ligger bakom en media query, så mobilen är
   helt orörd.

   Fas 1: skalet (sidomeny + breakpoint + innehållsbredd). Per-vy-layouter
   (källare, skanner, Wine Room) kommer i senare faser.
   ========================================================================== */

/* Element som bara ska finnas i desktop-läget (logga + profil-rad i sidomenyn)
   göms som standard; visas i media-queryn nedan. */
.mobile-nav-desktop-only {
  display: none;
}

/* Splash-ramen är "transparent" på mobil (display:contents) → kortet ligger
   exakt som förut direkt i .mobile-auth-splash. På desktop (media-queryn nedan)
   blir den en synlig, centrerad telefon-panel. */
.mobile-auth-splash-frame {
  display: contents;
}

/* Snabbfilter-pillsen (desktop) göms på mobil; där används dropdownen i stället. */
.mobile-cellar-preset-pills {
  display: none;
}

/* Skanna-vyns + Matcha-vyns spök-rutor är desktop-grepp; göms på mobil. */
#mobile-scan-ghost,
#mobile-pairing-ghost {
  display: none;
}

/* Headerns högerkluster (användning + Skanna + avatar) som en rad på alla
   skärmar. På desktop placeras det i höger zon (se media-queryn). */
.mobile-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Desktop-varianten av användnings-pillen (i högerklustret) göms på mobil;
   där visas mobil-varianten under källarnamnet i stället. */
#mobile-header-right .mobile-header-cellar-usage {
  display: none;
}

@media (min-width: 1024px) {
  /* --- Inloggnings-/återställnings-splash ----------------------------------- */
  /* Helsides desktop-bakgrund (Desktop_BG_Splash) i stället för den uttänjda
     mobila splash2.png. Den mobila splashen återskapas som en centrerad
     "telefon"-panel (splash2.png) med inloggningskortet i botten — som i mobil. */
  .mobile-auth-splash {
    /* Full shorthand → garanterar cover oavsett tidigare deklarationer. */
    background: url("/Images/Desktop_BG_Splash.png") center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .mobile-auth-splash-frame {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: min(410px, 92vw);
    /* Kortare än förr så panelen tydligt FLYTER centrerad i stället för att
       nästan fylla höjden (vilket tryckte inloggningen mot skärmkanten). */
    height: min(680px, 78vh);
    padding: 16px 16px 22px;
    background: url("/Images/splash2.png") center center / cover no-repeat;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(4, 9, 16, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Om-/hjälpsidan som centrerad modal på desktop. På mobil fyller splash2.png
     skärmen naturligt, men på en bred desktop-viewport skalas den porträtt-
     formade bilden upp via `cover` → det ser ut som att inloggningssplashen
     zoomas in när sidan öppnas. Byt därför till en dimmad scrim så inloggningen
     ligger kvar (suddad) bakom och kortet tydligt flyter ovanpå. */
  .mobile-about-splash {
    background: rgba(20, 6, 9, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* --- Skal: vänster sidomeny + header/main till höger ---------------------- */
  .mobile-app {
    display: grid; /* basen är block (mobil) — återinför grid för sidomeny-layouten */
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    height: 100vh; /* låt main scrolla internt; sidomenyn står still */
  }

  .mobile-header {
    grid-column: 2;
    grid-row: 1;
    padding: 18px 32px 14px;
  }

  .mobile-main {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 28px 32px 48px;
  }

  /* Generell läsbar ram per vy. Enskilda vyer breddas/omformas i senare faser. */
  .mobile-main > .tab-view {
    max-width: 1120px;
    margin: 0 auto;
  }

  /* --- Bottennav → vertikal sidomeny --------------------------------------- */
  .mobile-nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 1 / 3;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: 4px;
    padding: 22px 12px;
    border-top: 0;
    border-right: 1px solid var(--line);
    box-shadow: 6px 0 24px rgba(5, 10, 17, 0.18);
  }

  /* Navknappar som fullbredds-rader: ikon + etikett sida vid sida. */
  .nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    place-items: unset;
  }

  .nav-item.is-active {
    border-radius: 12px;
  }

  /* Badgen (t.ex. Wine Room-notiser) ska inte tvinga isär raden. */
  .nav-item .mobile-nav-badge {
    margin-left: auto;
  }

  /* --- Fas 2: Källaren ------------------------------------------------------ */
  /* Källaren får lite mer bredd än övriga vyer (plats för fler kort-kolumner). */
  .mobile-main > #tab-cellar {
    max-width: 1280px;
  }

  /* Korten i ett flerkolumns-grid i stället för en lång enkolumn. */
  #tab-cellar .list-shell {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
    margin-top: 30px; /* luft ned från snabbfilter-pillsen */
    padding-bottom: 24px; /* mobilens nav-utrymme behövs inte med sidomeny */
  }

  /* Vintyps-färgad vänsterkant → visuell variation i griden (färgen sätts på
     kortet som --cellar-type-color i renderingen). */
  #mobile-cellar-list .mobile-cellar-card-item {
    border-left: 4px solid var(--cellar-type-color, var(--line));
  }

  /* Sökrutan överst, snabbfilter som en pill-rad UNDER (i stället för dropdown).
     Mobilens "Alla"-chip + dropdown göms; pill-raden visas. */
  .mobile-cellar-search-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #mobile-cellar-search-input {
    order: -1; /* sökrutan först (överst) */
  }
  .mobile-cellar-preset-chip,
  .mobile-cellar-preset-dropdown {
    display: none;
  }
  .mobile-cellar-preset-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    width: 100%; /* fyll preset-radens bredd så pillsen radbryter i stället för att svämma över */
  }

  /* Pills: sol (guld) som standard, natur (grön) för valt snabbfilter. */
  .mobile-cellar-preset-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--sun-500, #d98a1e);
    background: var(--color-sun, #f6b23c);
    color: var(--color-wine-dark, #2b0b10);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  }
  .mobile-cellar-preset-pill:hover {
    background: var(--sun-500, #d98a1e);
  }
  .mobile-cellar-preset-pill.is-active {
    background: var(--color-leaf, #3f5f2a);
    border-color: var(--color-leaf, #3f5f2a);
    color: #fff8ea;
  }
  .mobile-cellar-preset-pill-count {
    font-size: 0.72rem;
    opacity: 0.8;
  }

  /* Typfördelningen får bre ut sig över fler kolumner. */
  .mobile-cellar-type-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* --- Fas 3: Skanner + resultat -------------------------------------------- */
  /* Alltid TVÅ kolumner: capture statiskt till vänster, resultat (eller en
     spök-ruta innan man skannat) till höger — skannern flyttar sig aldrig.
     display:grid/none ärvs från .tab-view/.is-active; här sätts bara layouten. */
  .mobile-main > #tab-scan {
    max-width: 1140px;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  /* Capture-panelen i vänster kolumn; resultat + spök-ruta delar höger cell. */
  .mobile-main > #tab-scan > .panel:not(#mobile-scan-result-panel) {
    grid-column: 1;
    grid-row: 1;
  }
  #tab-scan > #mobile-scan-result-panel,
  #tab-scan > #mobile-scan-ghost {
    grid-column: 2;
    grid-row: 1;
  }

  /* Capture-knappen ska inte bli enorm — håll porträttformen, cappa & centrera. */
  #tab-scan .mobile-capture-stage {
    display: flex;
    justify-content: center;
  }
  #tab-scan .mobile-capture-button {
    max-height: none;
    max-width: 380px;
    margin: 0 auto;
  }

  /* Spök-ruta där resultatet kommer att presenteras: streckad, rundade hörn,
     med en svag men stor "Skannad flaska"-vattenstämpel. Matchar capturens höjd. */
  #mobile-scan-ghost {
    display: flex;
    align-self: stretch;
    min-height: 360px;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 2px dashed rgba(90, 21, 32, 0.28);
    border-radius: 24px;
    background: rgba(255, 250, 240, 0.25);
  }
  .mobile-scan-ghost-text {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(90, 21, 32, 0.13);
    text-align: center;
  }
  /* När ett resultat finns → göm spök-rutan (resultatpanelen tar dess plats). */
  #tab-scan:has(#mobile-scan-result-panel:not(.is-hidden)) #mobile-scan-ghost {
    display: none;
  }

  /* Drag-&-släpp: markera capture-ytan när en fil dras över. */
  #tab-scan .mobile-capture-button.is-dragover {
    border-color: #c96a3a;
    box-shadow: 0 0 0 3px rgba(201, 106, 58, 0.55), 0 18px 36px rgba(4, 9, 16, 0.42);
  }

  /* --- Matcha: två kolumner (som skannern) --------------------------------- */
  /* Form till vänster (begränsad bredd → inget sträcks till 100%), förslag till
     höger. display:grid/none ärvs från .tab-view/.is-active. */
  .mobile-main > #tab-pairing {
    max-width: 1140px;
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  /* Spök-ruta i förslags-panelen tills första matchningen gjorts (listan tom). */
  #tab-pairing .panel:has(#mobile-pairing-list:empty) #mobile-pairing-ghost {
    display: flex;
    min-height: 360px;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 2px dashed rgba(90, 21, 32, 0.28);
    border-radius: 24px;
    background: rgba(255, 250, 240, 0.25);
  }
  .mobile-pairing-ghost-text {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(90, 21, 32, 0.13);
    text-align: center;
  }
  /* Tom-lista → göm "Förslag"-kickern OCH avskala panelens kort-stil så bara
     den fristående spök-rutan syns (ingen ruta-i-ruta). Efter matchning får
     panelen tillbaka sitt kort. */
  #tab-pairing .panel:has(#mobile-pairing-list:empty) .panel-kicker {
    display: none;
  }
  #tab-pairing .panel:has(#mobile-pairing-list:empty) {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* --- Fas 4: Wine Room ----------------------------------------------------- */
  /* Rum- och vän-listorna i flerkolumns-grid i stället för en lång kolumn. */
  .mobile-vinrum-room-list,
  .mobile-vinrum-friend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
  }

  /* Chatten dockas som en panel till HÖGER i stället för nära-fullskärm. Vänster
     lista blir kvar synlig och klickbar (äkta två-panel): overlayet görs
     genomskinligt + pointer-events:none, och bara själva chatt-skalet fångar
     klick. bottom/left justeras eftersom desktop saknar bottennav och har en
     248px sidomeny. */
  .mobile-chat-overlay {
    left: 248px;
    bottom: 0;
    background: transparent;
    pointer-events: none;
  }
  .mobile-chat-shell {
    left: auto;
    width: min(640px, 100%);
    pointer-events: auto;
    border-left: 1px solid var(--line);
    box-shadow: -16px 0 44px rgba(5, 10, 17, 0.22);
  }

  /* --- Fas 5: Modaler, profil & polish -------------------------------------- */
  /* Near-fullskärms-paneler (generiska overlays + profil/rum-detalj/skapa-rum/
     bjud-in) → centrerade dialoger i stället för nästan-helskärm. Panelerna är
     position:absolute med left/right/top/bottom på mobil; vi nollar dem och
     centrerar via flex på containern. */
  .mobile-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .mobile-overlay-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(600px, 100%);
    max-height: 86vh;
    margin: auto;
  }

  .mobile-profile-edit-overlay {
    left: 248px; /* börja efter sidomenyn */
    bottom: 0;   /* ingen bottennav på desktop */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .mobile-profile-edit-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(620px, 100%);
    max-height: 86vh;
    margin: auto;
  }

  /* Bottom-sheets → centrerade. Containrarna pinnar mot botten på mobil; på
     desktop centrerar vi och rundar alla hörn. (qty är redan centrerad.) */
  .mobile-upgrade-overlay {
    align-items: center;
  }
  .mobile-upgrade-sheet {
    border-radius: 20px;
  }
  .mobile-cellar-picker {
    align-items: center;
    padding-top: 0;
  }

  /* Profilfliken: smalare, formulär-vänlig bredd. */
  .mobile-main > #tab-profile {
    max-width: 860px;
  }

  /* Sidomeny-polish: hela raden som hover-/aktiv-yta + tydligt tangentbordsfokus. */
  .nav-item:hover {
    background: rgba(143, 29, 44, 0.06);
  }
  .nav-item.is-active {
    background: rgba(143, 29, 44, 0.12);
    color: var(--color-wine, #5a1520);
    font-weight: 600;
  }
  .nav-item:focus-visible {
    outline: 2px solid var(--color-terracotta, #c96a3a);
    outline-offset: 2px;
  }

  /* Vinsmak-logga högst upp i sidomenyn (bara desktop). */
  .mobile-nav-brand.mobile-nav-desktop-only {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 14px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav-brand-logo {
    width: 34px;
    height: auto;
  }
  .mobile-nav-brand-name {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-wine, #5a1520);
  }

  /* Profil som eget rad-objekt i sidomenyn (på mobil ligger profil i headern). */
  .nav-item.mobile-nav-desktop-only {
    display: flex;
  }

  /* Finputsad markering: ren helrads-pill, ingen ikon-blob, tydlig men diskret. */
  .nav-item .icon-wrapper {
    background: transparent;
    box-shadow: none;
  }
  .nav-item.is-active .icon-wrapper {
    background: transparent;
  }

  /* --- Item 6: kvarvarande ark → centrerade dialoger ------------------------ */
  /* Chatt-åtgärdsmenyn (reaktioner/åtgärder) → centrerad liten dialog. */
  .mobile-chat-action-sheet {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .mobile-chat-action-panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(360px, 100%);
    margin: auto;
  }

  /* Provningsark (rösta/avslöja/admin delar vote-sheet) → centrerade. */
  .mobile-tasting-vote-overlay {
    justify-content: center;
    align-items: center;
  }
  .mobile-tasting-vote-sheet {
    border-radius: 24px;
    width: min(560px, 100%);
    max-width: 560px;
    margin: 0 auto;
  }
  /* (wine-detail-overlay är mobil-only <=768px.) */

  /* Klassisk/geek-provning: L2-overlayn är position:fixed; inset:0 och blev
     100% bredd på desktop. Gör den till en centrerad "telefon"-panel — samma
     grepp som vinkortet — med dim-bakgrund via spread-skuggan (ingen extra DOM).
     transform:translateZ(0) gör panelen till containing block för de
     position:fixed-barnen (facilitator-bar + HUR/VAD-info-ark) så hela
     provningen hålls inom ramen i stället för att spilla ut över viewporten. */
  .mobile-tasting-l2-overlay {
    inset: 0;
    margin: auto;
    width: min(460px, 94vw);
    height: min(900px, 92vh);
    border-radius: 32px;
    transform: translateZ(0);
    box-shadow:
      0 40px 90px rgba(20, 8, 10, 0.5),
      0 0 0 100vmax rgba(20, 8, 10, 0.55);
  }
  /* Inre skärmen fyller panelen i stället för 100vh (viewport-höjd > panelhöjd
     skulle annars ge onödig extra-scroll). */
  .mobile-tasting-l2-overlay .mobile-l2-screen {
    min-height: 100%;
  }

  /* --- Redigera vin: centrerad dialog på desktop ----------------------------
     Mobilen är en helskärms slide-in-editor (topbar/sheet/footer = position:fixed,
     spänner över hela viewporten). På desktop blev det 100% bredd → fult. Här
     wrappas de tre i .wine-edit-card som vi centrerar som en modal med dim bakom;
     barnen flödar inuti kortet i stället för att spänna över skärmen. AI-overlayerna
     ligger utanför kortet och lämnas orörda (täcker viewporten som nästlad modal). */
  .wine-edit-overlay.is-open {
    display: flex;
    transform: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(20, 6, 9, 0.55);
    backdrop-filter: blur(2px);
  }
  .wine-edit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 92vw);
    max-height: min(880px, 90vh);
    background: var(--bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  }
  .wine-edit-overlay .wine-edit-topbar,
  .wine-edit-overlay .wine-edit-sheet,
  .wine-edit-overlay .wine-edit-footer {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
  .wine-edit-overlay .wine-edit-topbar {
    flex: 0 0 auto;
    padding: 18px 24px;
  }
  .wine-edit-overlay .wine-edit-sheet {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px;
  }
  .wine-edit-overlay .wine-edit-footer {
    flex: 0 0 auto;
    padding: 16px 24px;
  }
  /* Nästlade AI-/master-dialoger: centrera som riktig dialog (i st. f. bottom-sheet). */
  .wine-edit-ai-overlay {
    align-items: center;
  }
  .wine-edit-ai-panel {
    max-width: 460px;
    border-radius: 18px;
    padding: 24px;
  }

  /* --- Item 7: header --------------------------------------------------------- */
  /* Sidomenyn har nu loggan → göm dubbletten i headern. (Källarnamnet stylas
     som centrerad logga längre ned i app-bar-blocket.) */
  .mobile-header .mobile-brand {
    display: none;
  }

  /* =========================================================================
     Desktop-tema v2 — mer kontrast & lek: mörk maroon-sidomeny som ankare mot
     ljust innehåll, lugnare/mattare bakgrund så panelerna lyfter, guld/
     terracotta-pop. Hämtar paletten från login-sidan men bryter enformigheten.
     ========================================================================= */

  /* Lugnare, mattare sidbakgrund (mindre av den starka gula) så de nästan vita
     panelerna får kontrast och kan "flyta". */
  body {
    background:
      radial-gradient(circle at 12% 8%, rgba(201, 106, 58, 0.1) 0%, transparent 26%),
      radial-gradient(circle at 88% 6%, rgba(111, 122, 45, 0.08) 0%, transparent 22%),
      linear-gradient(165deg, #f4ead4 0%, #ecddbf 60%, #e4d3b1 100%);
  }
  /* Mer djup på panelerna mot den lugnare bakgrunden. */
  .mobile-main .panel,
  .mobile-main .list-shell > li,
  .mobile-main .mobile-cellar-card-item,
  .mobile-main .mobile-result-card {
    box-shadow: 0 10px 28px rgba(43, 11, 16, 0.1);
  }

  /* --- Sidomeny: mörk maroon (ankare + kontrast) --------------------------- */
  .mobile-nav {
    background: linear-gradient(175deg, #6b1a26 0%, #5a1520 52%, #2b0b10 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 6px 0 28px rgba(43, 11, 16, 0.3);
    padding: 18px 8px;
    gap: 2px;
  }

  /* Varumärke: stor centrerad logga i krämdisk OVANFÖR namn + guld-tagline. */
  .mobile-nav-brand.mobile-nav-desktop-only {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
  }
  .mobile-nav-brand-logo {
    /* box-sizing: border-box → width inkluderar paddingen. Krämdisken är 96px
       (20% mindre än 120) men bilden inuti hålls kvar på ~92px genom att kapa
       paddingen till 2px. */
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff8ea;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
  .mobile-nav-brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
  }
  .mobile-nav-brand-name {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-cream, #fff4df);
  }
  .mobile-nav-brand-tagline {
    margin-top: 2px;
    font-family: var(--font-script, "Caveat", cursive);
    font-size: 0.98rem;
    color: #f6b23c;
  }

  /* Rader: ikon + etikett, strikt linjerade via en fast 26px ikon-ruta. */
  .nav-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    /* 80% bred & centrerad → både aktiv-pill och hover täcker 80% centrerat
       (innehållet hoppar inte eftersom alla rader har samma bredd). */
    width: 80%;
    margin: 2px auto;
    padding: 11px 14px;
    min-height: 48px;
    border-radius: 14px;
    color: rgba(255, 244, 223, 0.82);
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }
  .nav-item .icon-wrapper {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    place-items: center;
    color: inherit;
  }
  .nav-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: inherit;
  }

  .nav-item:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
  }

  /* Aktiv: solgul pill med mörk wine-text (invers = hög kontrast mot den
     mörka menyn) + wine-röd accent. */
  .nav-item.is-active {
    background: linear-gradient(145deg, var(--sun-300, #f6b23c), var(--sun-500, #d98a1e));
    color: var(--color-wine-dark, #2b0b10);
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  }
  .nav-item.is-active .icon-wrapper,
  .nav-item.is-active .nav-label {
    color: var(--color-wine-dark, #2b0b10);
  }
  .nav-item.is-active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--color-wine-red, #8f1d2c);
  }

  .nav-item .mobile-nav-badge {
    margin-left: auto;
  }

  /* =========================================================================
     Terrazza-vinkortet på desktop — enad vinvy.
     Mobilen renderar kortet helskärm (slide-in). På desktop gör vi OVERLAYET
     självt till ett centrerat kort, så all inre positionering (hero, ark,
     kontroller) förblir relativ till overlayet och mobil-layouten återanvänds
     intakt. Dim-bakgrunden ritas med en spread-skugga (ingen extra DOM).
     ========================================================================= */
  .wine-detail-overlay.is-open {
    inset: 0;
    margin: auto;
    width: min(440px, 92vw);
    height: min(840px, 88vh);
    border-radius: 32px;
    box-shadow:
      0 40px 90px rgba(20, 8, 10, 0.5),
      0 0 0 100vmax rgba(20, 8, 10, 0.55);
  }

  /* Topp-kontrollerna är position:fixed (mot viewporten) på mobil — förankra
     dem i kortet på desktop. */
  .wine-detail-overlay.is-open .wine-detail-back,
  .wine-detail-overlay.is-open .wine-detail-action {
    position: absolute !important;
    top: 18px !important;
  }
  .wine-detail-overlay.is-open .wine-detail-back {
    left: 18px !important;
  }
  .wine-detail-overlay.is-open .wine-detail-action {
    right: 18px !important;
  }
  .wine-detail-overlay.is-open .wine-detail-counter {
    position: absolute;
    top: 24px;
  }

  /* =========================================================================
     Desktop app-bar — fyll den breda headern: sektionsrubrik till vänster,
     källarväljare + "+ Skanna" (sol-accent) + avatar i ett högerkluster.
     ========================================================================= */
  /* Tre zoner: rubrik (vänster) · källaren centrerad (mitten) · högerkluster. */
  .mobile-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 22px 32px; /* +20px höjd mot tidigare 12px */
    border-bottom: 1px solid var(--line);
    /* Ogenomskinlig: headern är sticky (se base) så skrollande innehåll får inte
       synas igenom den. */
    background: #fdf6ea;
  }

  /* Zon 1: sektionsrubrik (vänster). */
  .mobile-header-titleblock {
    display: flex;
    flex-direction: column;
    justify-self: start;
    line-height: 1.08;
  }
  .mobile-header-title {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-wine, #5a1520);
  }
  .mobile-header-subtitle {
    margin-top: 1px;
    font-family: var(--font-script, "Caveat", cursive);
    font-size: 1.02rem;
    color: var(--color-terracotta, #c96a3a);
  }

  /* Zon 2: källaren — centrerad, stor & logga-lik, med "Byt källare"-länk under
     (ingen dropdown-chevron på desktop). */
  #mobile-header-cellar {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  #mobile-header-cellar .mobile-header-cellar-name {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--color-wine, #5a1520);
  }
  #mobile-header-cellar .mobile-header-cellar-chev {
    display: none; /* ingen dropdown-look på desktop */
  }
  .mobile-header-cellar-switch {
    display: inline-block; /* överskugga .mobile-nav-desktop-only-göm på desktop */
    border: 0;
    background: none;
    padding: 0;
    margin-top: 2px;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-terracotta, #c96a3a);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .mobile-header-cellar-switch:hover {
    color: var(--color-wine-red, #8f1d2c);
  }

  /* Zon 3: högerkluster placeras till höger. */
  .mobile-header-right {
    justify-self: end;
    gap: 14px;
  }

  /* Mobil-varianten (under källarnamnet) göms på desktop — där visas
     desktop-pillen i högerklustret. */
  #mobile-header-cellar .mobile-header-cellar-usage {
    display: none;
  }
  /* Desktop-pillen i högerklustret: ljusgul. Visas bara när den har data
     (annars håller is-hidden den dold). */
  #mobile-header-right .mobile-header-cellar-usage:not(.is-hidden) {
    display: inline-flex;
  }
  #mobile-header-right .mobile-header-cellar-usage {
    align-items: center;
    border: 1px solid var(--sun-300, #f6b23c);
    background: var(--sun-100, #fce7b4);
    color: var(--sun-700, #a85f12);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
  }

  /* "+ Skanna" — solgul pill (sol-accenten). */
  .mobile-header-scan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-wine-dark, #2b0b10);
    background: linear-gradient(145deg, var(--sun-300, #f6b23c), var(--sun-500, #d98a1e));
    box-shadow: 0 4px 14px rgba(217, 138, 30, 0.35);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .mobile-header-scan:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(217, 138, 30, 0.45);
  }
}