/*
 * Habits redesign — shared chrome CSS (topbar, header, menus, cart drawer, footer).
 * SOURCE OF TRUTH: extracted byte-faithfully from the frozen prototype
 * (pages/home.html base tokens + SITE CHROME block). Regenerate with
 * tools/extract-chrome-css.js instead of editing the extracted part by
 * hand; the WP-specific addendum at the end is maintained in the generator.
 * Loaded by habits_redesign_enqueue_chrome() (inc/redesign/enqueue.php) on
 * pages using get_header('redesign').
 */

    :root {
      --blue: #0095F6;
      --blue-deep: #0077CF;
      --blue-ink: #0B2B41;
      --tint: #F2F9FF;
      --tint-2: #E4F2FE;
      --tint-line: #D5EAFB;
      --ink: #10222F;
      --muted: #5C6C79;
      --line: #E6ECF1;
      --surface: #F7FAFC;
      --save: #157A53;
      --tp: #00B67A;
      --font-display: "Schibsted Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
      --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      --shadow-soft: 0 1px 2px rgba(15, 36, 50, .05), 0 10px 30px rgba(15, 36, 50, .07);
      --shadow-card: 0 1px 2px rgba(15, 36, 50, .04), 0 18px 44px rgba(15, 36, 50, .10);
      --shadow-blue: 0 10px 26px rgba(0, 149, 246, .30);
      --max: 1160px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { width: 100%; max-width: 100%; overflow-x: clip; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: var(--font-body);
      font-size: 15.5px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    body.drawer-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
    img { display: block; max-width: 100%; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.12; }

    .container { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

    @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

    /* ═══════════════ SITE CHROME (universal komponenter) ═══════════════
       Topbar, header med produktmeny, varukorgslåda och sidfot delas av
       ALLA sidor. Kanoniska kopior med utvecklarnoter: components/header.html,
       components/footer.html, components/cart-drawer.html. Ändra där + här. */

    /* Sticky headern skymmer annars ankarmål vid intern navigation */
    [id] { scroll-margin-top: 96px; }

    /* ── USP-banner – ljus, levande, med Trustpilot-pill som poppar ── */
    .topbar {
      position: relative; z-index: 60;
      background: linear-gradient(90deg, #EAF5FE 0%, #F8FCFF 45%, #EAF5FE 100%);
      border-bottom: 1px solid var(--tint-line);
      color: var(--ink);
      font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
      height: 44px; overflow: hidden;
    }
    /* Budskapen centreras över HELA bredden (absolut lager); TP-pillen ligger
       ovanpå till höger – annars knuffas rotationen snett åt vänster. */
    .topbar-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: flex-end; }
    .topbar-rotate { position: absolute; inset: 0; }
    .topbar-item {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      opacity: 0; transform: translateY(12px);
      transition: opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.1);
      pointer-events: none; white-space: nowrap;
    }
    .topbar-item.active { opacity: 1; transform: none; }
    .topbar-item svg { width: 15px; flex: 0 0 auto; color: var(--blue); }
    .topbar-item.active svg { animation: topbar-icon-pop .55s cubic-bezier(.3,1.8,.5,1) both; }
    @keyframes topbar-icon-pop { 0% { transform: scale(.3) rotate(-14deg); } 65% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
    .topbar-tp {
      position: relative; z-index: 2;
      display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
      padding: 5px 13px; border-radius: 999px;
      background: #fff; border: 1px solid var(--line);
      box-shadow: 0 3px 12px rgba(15, 36, 50, .09);
      font-weight: 650; color: var(--ink);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .topbar-tp:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 36, 50, .13); }
    .topbar-tp .tp-word { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 750; }
    .topbar-tp .tp-word svg { width: 13px; fill: var(--tp); }
    .topbar-tp .tp-mini-stars { display: inline-flex; gap: 2px; }
    .topbar-tp .tp-mini-stars i { width: 15px; height: 15px; display: grid; place-items: center; background: var(--tp); border-radius: 3px; }
    .topbar-tp .tp-mini-stars i svg { width: 10px; fill: #fff; }
    .topbar-tp .tp-mini-stars i.half { background: linear-gradient(90deg, var(--tp) 50%, #D4DFDb 50%); }
    .topbar-tp b { font-weight: 800; }
    .topbar-tp small { font-weight: 550; color: var(--muted); font-size: 11.5px; }
    @media (prefers-reduced-motion: reduce) {
      .topbar-item, .topbar-item.active svg { transition: none; animation: none; }
    }

    /* ── Sidhuvud (sticky) – blå identitet med djup och ljusspel ── */
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background:
        radial-gradient(420px 180px at 18% -40%, rgba(255,255,255,.16), transparent 70%),
        radial-gradient(520px 220px at 78% 130%, rgba(255,255,255,.10), transparent 70%),
        linear-gradient(135deg, #00A8FF 0%, #0095F6 52%, #007CDB 100%);
      box-shadow: 0 6px 24px rgba(0, 119, 207, .18);
    }
    .header-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .header-deco::before {
      content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%;
      right: -60px; top: -140px; border: 34px solid rgba(255,255,255,.08);
    }
    .header-deco::after {
      content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
      left: 30%; bottom: -105px; border: 26px solid rgba(255,255,255,.06);
    }
    .nav { position: relative; height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
    .logo img { width: 122px; height: auto; }
    /* Tablet = desktop (Daniel 2026-08-05): alla plattor får iPad Pro-layouten
       (mobilbrytningen flyttad 1000 → 767). Desktopheaderns fulla mått svämmar
       över ~70 px på de smalaste plattorna, så 768–920 dras logga, länkluft
       och CTA åt några procent — samma innehåll, bara tätare. Över 920 orört. */
    @media (min-width: 768px) and (max-width: 920px) {
      .logo img { width: 104px; }
      /* nowrap: på riktiga plattor (andra teckensnittsmått än utvecklings-
         miljön) veks länktexterna till två rader när utrymmet tröt — hellre
         att raden aldrig får vika sig. */
      .nav-links .nav-link { padding: 6px 5px; font-size: 12.5px; white-space: nowrap; }
      /* "Handla nu" döljs på de smalaste plattorna (Daniel 2026-08-05:
         headern gick sönder på iPad Mini/Air). Knappen är en genväg —
         varukorgsikonen och menyn finns kvar — och utan den får full meny
         plus logga gott om plats ända ned till 768. (.site-header-prefixet:
         basregeln .nav-cta ligger SENARE i kaskaden och vann annars på
         ordning — högre specificitet gör medieregeln immun.) */
      .site-header .nav-cta { display: none; }
    }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 7px;
      min-height: 40px; padding: 0 19px; margin-right: 4px;
      border-radius: 999px; background: #fff; color: var(--blue-deep);
      font-family: var(--font-display); font-size: 13.5px; font-weight: 750;
      box-shadow: 0 5px 16px rgba(7, 45, 70, .22);
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(7, 45, 70, .28); }
    .nav-cta svg { width: 14px; }
    .nav-links { display: flex; align-items: center; gap: 2px; }
    .nav-link {
      position: relative; display: inline-flex; align-items: center; gap: 6px;
      /* nowrap på ALLA bredder (2026-08-05): när teckensnittsmåtten avvek en
         aning (verkliga plattor, långsam typsnittsladdning) vek länkarna sig
         till två rader och headern gick sönder. En menylänk är en pill och
         får aldrig radbrytas. */
      white-space: nowrap;
      padding: 9px 14px; border-radius: 999px;
      color: rgba(255,255,255,.94); font-size: 14.5px; font-weight: 600;
      transition: background .16s ease;
    }
    .nav-link:hover { background: rgba(255,255,255,.13); }
    .nav-link .chev { width: 11px; transition: transform .2s ease; }
    .nav-item { position: relative; }
    .nav-item.open .nav-link { background: rgba(255,255,255,.16); }
    .nav-item.open .chev { transform: rotate(180deg); }

    /* Produktmeny (mega-dropdown) */
    .mega {
      position: absolute; top: calc(100% + 12px); left: -18px; z-index: 55;
      width: 560px; padding: 24px 26px 20px;
      background: #fff; border: 1px solid var(--line); border-radius: 18px;
      box-shadow: var(--shadow-card);
      opacity: 0; visibility: hidden; transform: translateY(8px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    .nav-item.open .mega { opacity: 1; visibility: visible; transform: none; }
    .mega::before { content: ""; position: absolute; left: 44px; top: -7px; width: 13px; height: 13px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
    .mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .mega-group strong { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
    .mega-group a { display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13.5px; font-weight: 550; color: var(--ink); transition: background .14s ease, color .14s ease; }
    .mega-group a:hover { background: var(--tint); color: var(--blue-deep); }
    .mega-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); width: 100%; font-size: 13.5px; font-weight: 700; color: var(--blue-deep); }
    .mega-all:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Header-knappar (Mina sidor + varukorg + mobilmeny) */
    .nav-actions { display: flex; align-items: center; gap: 6px; }
    .icon-btn {
      position: relative; width: 42px; height: 42px; border-radius: 50%;
      display: grid; place-items: center; color: #fff;
      transition: background .16s ease;
    }
    .icon-btn:hover { background: rgba(255,255,255,.14); }
    .icon-btn svg { width: 21px; }
    .cart-count {
      position: absolute; top: 2px; right: 0;
      min-width: 17px; height: 17px; padding: 0 4px;
      border-radius: 999px; background: #16A34A; color: #fff;
      font-size: 10.5px; font-weight: 750; line-height: 17px; text-align: center;
      box-shadow: 0 2px 6px rgba(7,45,70,.35);
    }
    .cart-count.pop { animation: cart-pop .55s cubic-bezier(.3,1.6,.5,1); }
    @keyframes cart-pop { 0% { transform: scale(.3); } 45% { transform: scale(1.5); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
    /* Ikonen wigglar när badgen poppar (Ö8) — :has = progressiv förbättring. */
    .icon-btn:has(> .cart-count.pop) svg { animation: cart-icon-wiggle .55s cubic-bezier(.3,1.6,.5,1); }
    @keyframes cart-icon-wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(9deg); } 100% { transform: rotate(0); } }
    .menu-btn { display: none; }

    /* Mobilmeny */
    .mobile-menu-overlay {
      position: fixed; inset: 0; z-index: 70;
      background: rgba(11, 43, 65, .45); backdrop-filter: blur(3px);
      opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
    }
    .mobile-menu-overlay.open { opacity: 1; visibility: visible; }
    .mobile-menu {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(340px, 88vw); background: #fff;
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform .26s ease;
      box-shadow: -18px 0 50px rgba(7,45,70,.22);
    }
    .mobile-menu-overlay.open .mobile-menu { transform: none; }
    .mm-head {
      display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
      background: linear-gradient(135deg, #EAF5FE, #F8FCFF); border-bottom: 1px solid var(--tint-line);
    }
    .mm-head strong { font-family: var(--font-display); font-size: 17px; font-weight: 750; }
    .mm-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--muted); }
    .mm-x svg { width: 13px; }
    .mm-body { flex: 1; overflow-y: auto; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
    .mm-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; margin-bottom: 20px; border-radius: 13px;
      background: linear-gradient(135deg, #00A0FF, #0086E2); color: #fff;
      font-family: var(--font-display); font-size: 15px; font-weight: 750;
      box-shadow: var(--shadow-blue);
    }
    .mm-cta svg { width: 15px; }
    .mm-label { font-family: var(--font-display); font-size: 11px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
    .mm-shop { display: grid; gap: 0; margin-bottom: 22px; }
    .mm-tile {
      display: flex; align-items: center; gap: 13px; padding: 9px 0;
      border-bottom: 1px solid var(--surface);
    }
    .mm-tile:first-child { border-top: 1px solid var(--surface); }
    .mm-tile img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; border: 1px solid var(--tint-line); flex: 0 0 auto; }
    .mm-tile-info { flex: 1; min-width: 0; }
    .mm-tile-info b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
    .mm-tile-info small { font-size: 11.5px; color: var(--muted); }
    .mm-chev { width: 14px; flex: 0 0 auto; color: #B8CDDE; }
    .mm-tile:active { background: var(--tint); }
    .mm-more { display: grid; gap: 0; }
    .mm-row {
      display: flex; align-items: center; gap: 12px; padding: 11px 0;
      font-size: 14.5px; font-weight: 600; color: var(--ink);
      border-bottom: 1px solid var(--surface);
    }
    .mm-row:first-child { border-top: 1px solid var(--surface); }
    .mm-row:active { color: var(--blue-deep); }
    .mm-ico {
      width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
      background: linear-gradient(135deg, var(--tint-2), var(--tint));
      border: 1px solid var(--tint-line);
      display: grid; place-items: center; color: var(--blue-deep);
    }
    .mm-ico svg { width: 16px; }
    .mm-row .mm-chev { margin-left: auto; }

    /* ── Varukorgslåda (Shopify-stil) ── */
    .cart-overlay {
      position: fixed; inset: 0; z-index: 80;
      background: rgba(11, 43, 65, .45); backdrop-filter: blur(3px);
      opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease;
    }
    .cart-overlay.open { opacity: 1; visibility: visible; }
    .cart-drawer {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(420px, 88vw); background: #fff;
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform .28s cubic-bezier(.25,.8,.35,1);
      box-shadow: -18px 0 50px rgba(7,45,70,.22);
    }
    .cart-overlay.open .cart-drawer { transform: none; }
    .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--line); }
    .cart-head strong { font-family: var(--font-display); font-size: 17px; font-weight: 750; }
    .cart-head strong span { color: var(--muted); font-weight: 600; font-size: 14px; }
    .cart-items { flex: 1; overflow-y: auto; padding: 6px 22px; }
    .cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--surface); animation: rise .3s ease; }
    .cart-item-thumb {
      width: 62px; height: 62px; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
      border: 1px solid var(--tint-line);
      background: linear-gradient(158deg, #F4FAFF, #E4F2FE);
      display: grid; place-items: center; color: var(--blue-deep);
    }
    .cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .cart-item-thumb svg { width: 24px; opacity: .55; }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-name { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
    .cart-item-variant { font-size: 12px; color: var(--muted); margin-top: 1px; }
    .cart-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
    .cart-qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 999px; }
    .cart-qty button { width: 27px; height: 27px; display: grid; place-items: center; font-size: 14px; color: var(--muted); border-radius: 50%; transition: color .14s ease; }
    .cart-qty button:hover { color: var(--ink); }
    .cart-qty output { min-width: 22px; text-align: center; font-size: 12.5px; font-weight: 700; }
    .cart-item-price { font-family: var(--font-display); font-size: 13.5px; font-weight: 750; }
    .cart-item-remove { margin-left: 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
    .cart-item-remove:hover { color: #B4552D; }
    .cart-empty { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; text-align: center; color: var(--muted); }
    .cart-empty svg { width: 44px; color: var(--tint-line); }
    .cart-empty p { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0; }
    .cart-empty a { font-size: 13.5px; font-weight: 650; color: var(--blue-deep); }
    .cart-empty a:hover { text-decoration: underline; }
    .cart-drawer.is-empty .cart-items { display: none; }
    .cart-drawer.is-empty .cart-foot { display: none; }
    .cart-drawer.is-empty .cart-empty { display: flex; }
    .cart-foot { padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
    /* Fri frakt-mätaren – välbekant e-handelsmönster som driver upp snittordern */
    .cart-shipbar { margin: 2px 0 12px; }
    .cart-shipbar p { margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
    .cart-shipbar p b { color: var(--blue-deep); }
    .cart-shipbar p.done { color: var(--save); font-weight: 650; }
    .cart-shipbar-track { height: 6px; border-radius: 99px; background: var(--tint-2); overflow: hidden; }
    .cart-shipbar-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--blue), #00C2FF); transition: width .35s ease; }
    .cart-shipbar-fill.done { background: var(--save); }
    .cart-rows { display: grid; gap: 5px; margin-bottom: 13px; font-size: 13.5px; }
    .cart-rows > div { display: flex; justify-content: space-between; align-items: baseline; }
    .cart-rows .cart-row-ship b { color: var(--save); font-weight: 650; }
    .cart-row-total { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; }
    .cart-row-total b { font-family: var(--font-display); font-size: 19px; font-weight: 800; }
    .cart-continue { display: block; width: 100%; margin-top: 11px; text-align: center; font-size: 13px; font-weight: 650; color: var(--blue-deep); }
    .cart-continue:hover { text-decoration: underline; text-underline-offset: 3px; }

    .cta {
      width: 100%; min-height: 54px; border-radius: 14px;
      background: linear-gradient(135deg, #00A0FF, #0086E2);
      color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      box-shadow: var(--shadow-blue);
      transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }
    .cta:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 32px rgba(0, 149, 246, .38); }
    /* Köpbekräftelsens puls (Daniel 2026-08-02). Knappen ska kännas tryckt,
       inte bara byta färg. ENBART transform animeras — kompositorn sköter det
       utan omflöde eller ommålning, så sidan påverkas inte mätbart. Kurvan är
       lätt översvängande (studsar förbi 1.0) vilket är det som ger känslan.
       Mallarnas egen .cta.added sätter bara färg, aldrig animation, så den
       här regeln gäller på alla produktsidor. */
    @keyframes cta-added-pop {
      0%   { transform: scale(1); }
      22%  { transform: scale(.955); }
      52%  { transform: scale(1.035); }
      76%  { transform: scale(.992); }
      100% { transform: scale(1); }
    }
    .cta.added { animation: cta-added-pop .52s cubic-bezier(.34, 1.4, .5, 1) both; }
    /* Rörelsekänsliga användare får bara färgbytet. */
    @media (prefers-reduced-motion: reduce) {
      .cta.added { animation: none; }
    }

    /* ── Sidfot ── */
    footer { background: var(--blue-ink); color: #fff; padding: 50px 0 34px; }
    .footer-news {
      display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
      padding: 26px 30px; margin-bottom: 44px;
      border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    }
    .footer-news-copy strong { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 750; margin-bottom: 3px; }
    .footer-news-copy p { font-size: 13px; color: rgba(255,255,255,.72); margin: 0; max-width: 380px; }
    .footer-news-signup { flex: 0 1 420px; min-width: 280px; }
    .footer-news-form { display: flex; gap: 8px; }
    .footer-news-form input {
      flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13.5px;
      transition: border-color .16s ease, background .16s ease;
    }
    .footer-news-form input::placeholder { color: rgba(255,255,255,.55); }
    .footer-news-form input:focus { outline: none; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); }
    .footer-news-btn {
      flex: 0 0 auto; padding: 0 22px; min-height: 44px; border-radius: 999px;
      background: #fff; color: var(--blue-deep);
      font-family: var(--font-display); font-size: 13.5px; font-weight: 750;
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .footer-news-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
    .footer-news-note { display: none; margin: 9px 2px 0; font-size: 12px; font-weight: 600; color: #9FE3C3; }
    .footer-news-note.visible { display: block; }
    .footer-news-legal { margin: 8px 2px 0; font-size: 11px; color: rgba(255,255,255,.5); }
    .footer-news-legal a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 2px; }
    .footer-news-legal a:hover { color: #fff; }
    .footer-grid { display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; padding-bottom: 36px; }
    .footer-brand img { width: 116px; margin-bottom: 16px; }
    .footer-brand p { font-size: 13.5px; color: rgba(255,255,255,.72); max-width: 260px; margin: 0; }
    .footer-col { font-size: 13.5px; color: rgba(255,255,255,.72); display: grid; gap: 8px; align-content: start; }
    .footer-col strong { color: #fff; font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
    .footer-col a:hover { color: #fff; text-decoration: underline; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; font-size: 11.5px; color: rgba(255,255,255,.55); display: grid; gap: 6px; }
    /* Sociala profiler i foten (Daniel 2026-08-12): länkarna är samtidigt
       sameAs-underlaget för Organization-schemat och en trygghetssignal —
       en svensk konsumentbutik utan synliga profiler ser ofärdig ut. */
    .footer-social { display: flex; gap: 12px; margin-top: 16px; }
    .footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.10); color: rgba(255,255,255,.72); transition: background .15s ease, color .15s ease; }
    .footer-social a:hover { background: rgba(255,255,255,.20); color: #fff; }
    .footer-social svg { width: 17px; height: 17px; display: block; }

    @media (max-width: 767px) {
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .menu-btn { display: grid; }
      .footer-grid { gap: 30px; }
    }
    /* Trustpilot alltid synlig på mobil (Daniels beslut 2026-07-21 v2): en
       EGEN tunn rad under USP-bannern med full identitet (TP-ord + stjärnrad
       + betyg, länkad) – tydligare än den kompakta pillen. Desktop behåller
       pillen till höger; under 950 px döljs pillen och raden tar över.
       Längre budskapssvansar (.tb-tail) döljs på små skärmar. */
    .topbar-tp-mobile {
      display: none;
      align-items: center; justify-content: center; gap: 8px;
      height: 34px; background: #fff;
      border-bottom: 1px solid var(--tint-line);
      font-size: 12px; font-weight: 650; color: var(--ink);
      position: relative; z-index: 59;
    }
    .topbar-tp-mobile .tp-word { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 750; }
    .topbar-tp-mobile .tp-word svg { width: 13px; fill: var(--tp); }
    .topbar-tp-mobile .tp-mini-stars { display: inline-flex; gap: 2px; }
    .topbar-tp-mobile .tp-mini-stars i { width: 14px; height: 14px; display: grid; place-items: center; background: var(--tp); border-radius: 3px; }
    .topbar-tp-mobile .tp-mini-stars i svg { width: 9px; fill: #fff; }
    .topbar-tp-mobile .tp-mini-stars i.half { background: linear-gradient(90deg, var(--tp) 50%, #D4DFDb 50%); }
    .topbar-tp-mobile b { font-weight: 800; }
    .topbar-tp-mobile small { font-weight: 550; color: var(--muted); font-size: 11px; }
    @media (max-width: 767px) {
      .topbar-tp { display: none; }
      .topbar-tp-mobile { display: flex; }
    }
    @media (max-width: 560px) {
      .tb-tail { display: none; }
    }
    @media (max-width: 560px) {
      .container { width: calc(100% - 32px); }
      .nav { height: 66px; }
      .logo img { width: 104px; }
    }
    /* ═══════════════ SLUT: SITE CHROME ═══════════════ */

/* ═══════════════ WP-SPECIFIKT TILLÄGG (endast i WordPress-porten) ═══════════════ */

/* ── Arv från det gamla temat neutraliseras (upptäckt på staging 2026-07-28) ──
   Det befintliga barntemats CSS laddas EFTER chrome.css och vinner därför
   kaskaden på oscopade body-regler. Mätt på staging: font-size 17px (vår 15.5),
   line-height 30.6px (vår 24.8 = 1.6), color ren svart (vår --ink) och
   text-align center (vår left). Effekten var synlig överallt: för stor text,
   för luftiga rader (Trustpilot-pillen i topbaren blev 43px hög i en 44px bar)
   och centrerat innehåll.
   Previewfilerna saknar gamla temats CSS, så detta syns ALDRIG där — bara i
   verklig WordPress-miljö. Därför upprepas prototypens body-värden här,
   scopade till body.habits-redesign så att de vinner utan !important.
   Gamla sidor är opåverkade. Håll i synk med body-regeln ovan. */
body.habits-redesign {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* ── <small> renderas som block av gamla temat (mätt på staging 2026-08-01) ──
   Gamla temats CSS sätter display:block på small. Vi använder <small> som
   inline-tillägg efter ett värde — "4,6 <small>· 155 omdömen</small>",
   "118,90 kr <small>inkl. moms</small>", "1 vara" i kortrubriker. Med
   display:block hoppar varje sådan text ned på egen rad: Trustpilot-pillen i
   topbaren blev 65 px hög i en 44 px bar (och klipptes av topbarens
   overflow:hidden), och kassans pill blev 70 px hög i två rader.
   Previewfilerna saknar gamla temats CSS, så det syns ALDRIG där.
   width/margin-bottom nollställs samtidigt: gamla temats regel sätter
   width:100% och margin-bottom:15px, vilket ignoreras på inline-element men
   slår igenom på våra block-<small> (kassans radpris, sticky-totalen,
   lådans "per leverans"). Ingen av våra regler sätter margin-bottom. */
body.habits-redesign small {
  display: inline;
  width: auto;
  margin-bottom: 0;
}

/* ── …men fem ställen VILL ha block, och raden ovan slog ut dem alla
   (rapporterat av Daniel 2026-08-01: mellansidans packknappar) ──
   Neutraliseringen är scopad (0,2,1) och slår därför även prototypens egna
   ".klass small { display: block }" (0,1,1). Uppmätt i webbläsaren på
   prototypen med stagingregeln injicerad: mellansidans packknappar växte
   från 88–95 px till 133–138 px, texten klistrades ihop till "8-pack34,99
   kr/st" och fjärde packet bröt till en andra rad. Samma träff gäller
   produktsidornas sticky köprad och kassans "per leverans"-rad.
   Verifierat på staging 2026-08-02: packknapparna mätte 134/133/138/137 px
   på två rader, produktsidans sticky köprad visade "8-pack · Twist
   Clean279,90 kr". Med regeln nedan: 88/88/93/95 px på en rad.
   Vi återställer block här, på SAMMA specificitet men senare i filen →
   vinner utan !important. Lådans .cart-sub-per klarar sig redan på egen
   hand (0,2,1 och står längre ned i filen).
   REGEL: skrivs en ny "X small { display: block }" någonstans i bygget måste
   selektorn läggas till här — annars renderas den inline i WordPress.
   Grinden längst ned i det här skriptet kontrollerar att listan är komplett
   och avbryter bygget om något saknas. */
body.habits-redesign .ksd-chip small,
body.habits-redesign .sticky-buy small,
body.habits-redesign .co-line-price small,
body.habits-redesign .co-sticky-total small,
body.habits-redesign .htx-price small { display: block; }

/* ── Kassans typsnitt på <small> (mätt på staging 2026-08-02) ──
   Kassan är den enda av våra sidor som bär gamla temats body-klass
   .woocommerce-checkout, och den regeln (0,1,1) tvingar Quicksand 11px/700
   på VARENDA <small> i vår chrome: topbarens Trustpilot-pill, mobilmenyns
   brickor och kassans egna etiketter. Våra egna regler har samma
   specificitet men chrome.css ligger som stilmall 4 av 51 — den som kommer
   sist vinner, alltså gamla temat. font-family sätts dessutom med
   !important och går bara att slå med !important.
   Därför: typsnittet ärvs (= exakt vad prototypen gör) och våra egna
   grader/vikter upprepas här, scopade (0,2,1). Värdena är UPPMÄTTA i
   prototypen, inte gissade. Håll dem i synk med källreglerna — grinden
   längst ned i skriptet jämför dem automatiskt. */
body.habits-redesign small { font-family: inherit !important; }
/* Enda undantaget: den här ligger i .co-line-price som är display-typsnitt,
   men raden ska vara brödtext. Prototypregeln säger var(--font-body). */
body.habits-redesign .co-line-price small { font-family: var(--font-body) !important; }

body.habits-redesign .topbar-tp small { font-size: 11.5px; font-weight: 550; }
body.habits-redesign .topbar-tp-mobile small { font-size: 11px; font-weight: 550; }
body.habits-redesign .mm-tile-info small { font-size: 11.5px; font-weight: inherit; }
body.habits-redesign .co-total-label small { font-size: 12px; font-weight: 500; }
body.habits-redesign .co-sticky-total small { font-size: 11.5px; font-weight: 500; }
body.habits-redesign .co-line-price small { font-size: 11px; font-weight: 500; }

/* ── Sidbredden: gamla temats .container vinner kaskaden (mätt på staging
   2026-08-01, rapporterat av Daniel) ──
   Gamla temat sätter .container med width 1440px och padding 0 64px i en
   inline-<style> som laddas EFTER chrome.css. Samma specificitet (0,1,0) →
   den som kommer sist vinner, alltså gamla temat. Effekten: hela redesignen
   renderas 1440 px bred i stället för prototypens 1160, och innehåll som
   centreras inuti containern (kassans kort, mellansidans sektioner) glider
   ur linje med sina rubriker — 400 px förskjutning uppmätt på kassan vid
   1920 px. Previewfilerna saknar gamla temats CSS, så det syns ALDRIG där.
   Scopat till body.habits-redesign (0,2,1) → vinner utan !important, och
   gamla sidors egen .container-användning är helt opåverkad.
   Håll värdena i synk med prototypens .container-regel. */
body.habits-redesign .container {
  width: min(calc(100% - 48px), var(--max));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 560px) {
  body.habits-redesign .container { width: calc(100% - 32px); }
}

/* ── Klasskrock: gamla temats bara ".open { display: none }" ──
   (hittad av utvecklaren 2026-07-28, verifierad i gamla main.css rad 686)
   Vi använder klassen "open" som öppet-läge på fyra ställen. Den gamla regeln
   har specificitet 0,1,0 och sätter display:none — så ALLT som öppnades
   försvann i stället: FAQ-sektioner, megamenyn, mobilmenyn och varukorgslådan.
   Alla fyra är <div> utan egen display-regel, så vi återställer block här.
   Scopat till body.habits-redesign (0,3,0) → vinner utan !important, och
   gamla sidors egen .open-användning påverkas inte.
   Alternativet vore att döpa om klassen i CSS+JS+alla mallar — den här
   enradslösningen ger samma resultat utan att röra markup eller JS. */
body.habits-redesign .acc.open,
body.habits-redesign .nav-item.open,
body.habits-redesign .cart-overlay.open,
body.habits-redesign .mobile-menu-overlay.open { display: block; }

/* Samma krock i merförsäljningsmodalen (upptäckt av Daniel 2026-07-28):
   kids-/soni-korten får klassen "open" när kunden valt pack
   (kidsSync: classList.toggle('open', kids.pack !== null)) och steg 2-kortens
   "Läs mer"-expander togglar samma klass. .up-card saknar egen display-regel,
   så gamla temats ".open { display: none }" gömde HELA kortet exakt i
   valögonblicket — packen "försvann vid val" och färgstegen gick aldrig att
   nå. Mixpanelen/modal-overlayen klarade sig: deras .klass.open-regler har
   specificitet 0,2,0 och vinner själva. Kortet är en vanlig div → block. */
body.habits-redesign .up-card.open { display: block; }

/* ── Osynliga kryssrutor (upptäckt på ångra köp-sidan 2026-07-28) ──
   Gamla sajtens inline-CSS innehåller regeln
       input[type="checkbox"] { position: relative; appearance: none; }
   som stänger av den inbyggda kontrollen UTAN att rita någon ersättningsruta.
   Resultat i våra mallar: kryssrutan blir en helt genomskinlig 17×17-yta —
   texten syns, rutan inte, och accent-color har ingen verkan (den gäller bara
   inbyggd rendering). Regeln ligger inte i vår kod, så den syns aldrig i
   previewfilerna — bara i verklig WordPress-miljö, precis som .open-krocken.
   Vi återställer den inbyggda kontrollen i vår scope (0,2,2 slår regelns 0,1,1
   utan !important). Gamla sidor är opåverkade. */
body.habits-redesign input[type="checkbox"],
body.habits-redesign input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* ── Lådans miniatyrer: contain i stället för cover (2026-07-28) ──
   Prototypens bilder är kurerade kvadrater där cover ser bra ut; i WordPress
   är varukorgsbilderna vad som råkar ligga på produkten (tandkrämens höga
   smala tubfoto beskars till en strimla). contain visar alltid hela bilden
   mot rutans ljusa bakgrund och är identiskt med cover för kvadrater. */
body.habits-redesign .cart-item-thumb img { object-fit: contain; }

/* ── Varukorgsradens länk till produktsidan (Daniel 2026-08-02) ──
   Markupen finns BARA i WordPress-lådan (inc/redesign/cart-drawer.php);
   prototypens låda är statisk demomarkup utan länkar. Därför bor stilen här
   i addendumet och inte i chrome-blocket. Raden ska se exakt likadan ut som
   förut i vila — färg och vikt ärvs, och understrykningen kommer först vid
   hover. Rader som inte går att koppla till en av våra sidor renderas helt
   utan länk, så ingen rad kan bli en trasig länk. */
body.habits-redesign .cart-item-link { color: inherit; text-decoration: none; }
body.habits-redesign .cart-item-name .cart-item-link:hover { text-decoration: underline; }
body.habits-redesign .cart-item-thumb .cart-item-link { display: block; width: 100%; height: 100%; }

/* ── Miniatyrrutans bakgrund vit (Daniel 2026-08-02) ──
   Rutan hade en ljusblå toning. Produktfotona har vit bakgrund, så de två
   färgerna blandades och det såg smutsigt ut runt bilden. Vit ruta = bilden
   flyter ihop med sin egen bakgrund. Ramen skärps samtidigt från --tint-line
   (#D5EAFB, ljusblå) till --line (#E6ECF1) — mot vitt innehåll behöver den
   bära hela avgränsningen själv, precis som produktkorten i övrigt gör.
   Samma ändring på kassans .co-line-img, tacksidans .htx-thumb och
   ordermejlens bildceller. */
body.habits-redesign .cart-item-thumb {
  background: #fff;
  border-color: var(--line);
}

/* ── Prenumerationen: ETT KORT PER MODELL/SKU (Ö4b, Daniel 2026-08-02) ──
   Twist Clean, Sensitive, Soft Clean och Polishing är fyra egna produktkort
   utan gemensam ram — kunden ska se exakt vilka tandborstar som ingår,
   tydligt separerade. Kortet visar modellens STYCKPRIS (inte kategorins
   summa per leverans) och att fri frakt ingår, som på nuvarande livesida.

   Antalet är TEXT, ingen väljare, och det finns ingen ta bort-knapp:
   bundlens artiklar har min = 1 och Product Bundles kastar ett undantag om
   man försöker ta bort en mandatory barnrad (class-wc-pb-cart.php:1905-1925).
   En stegare hade alltså varit en kontroll som inte fick göra det den ser ut
   att göra. Hela motiveringen står i cart-drawer.php. */
body.habits-redesign .cart-item.is-sub-card { align-items: flex-start; }

/* Styckpriset är en UPPLYSNING, inte radens belopp — beloppet står till
   höger. Liten grad och dämpad ton (Daniel 2026-08-02: "alldeles för stort"). */
body.habits-redesign .cart-sub-price {
  font-size: 11.5px; font-weight: 500; color: var(--muted);
  margin-top: 1px;
}

/* Återkommande-symbolen ersätter den blå "Prenumeration"-etiketten. Med ett
   kort per modell upprepades etiketten på varje rad och dominerade listan;
   pilen bär samma betydelse utan att ta plats. Leveransraden är inte längre
   blå — den var för skrikig när den återkom fem gånger. */
body.habits-redesign .cart-item .cart-sub-meta { color: var(--muted); }
body.habits-redesign .sub-ico {
  width: 12px; height: 12px; flex: 0 0 auto;
  vertical-align: -1px; margin-right: 5px;
  color: var(--muted);
}

/* ── Antalet på prenumerationskort är TEXT, inte en väljare (Daniel
   2026-08-02) ──
   Prenumerationen ändras inte i varukorgen eller kassan; vill kunden ändra
   går hen tillbaka till prenumerationssidan. Att visa en stegare som ändå
   inte får sänka under 1 var både förvirrande och en missklicksrisk.
   Vanliga produkter behåller sin stegare, och där tar 0 bort raden —
   samma mönster som Apotea, och det är därför ta-bort-knappen är borta. */
body.habits-redesign .cart-sub-qty,
body.habits-redesign .co-sub-qty {
  font-size: 12.5px; font-weight: 650; color: #42566a;
}

/* Sticky-headern får inte hamna under WP-adminbaren för inloggade */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ── Kassans summering hamnade UNDER headern för inloggade (Daniel
   2026-08-02: "0 space") ──
   .co-side är sticky med top: 104px, avpassat efter headerns 74 px. Men för
   inloggade skjuts headern ned 32 px av adminbaren och slutar då på 106 px —
   alltså UNDER summeringens fästpunkt, som gled in bakom den. Utloggade
   kunder såg aldrig felet. Sticky-syskonet måste förskjutas lika mycket som
   headern. Håll värdet i synk med .co-side i kassamallen. */
body.admin-bar .co-side { top: 136px; }
@media (max-width: 782px) { body.admin-bar .co-side { top: 150px; } }

/* MC4WP-nyhetsbrevsformuläret i sidfoten ärver prototypens formulärstil */
.footer-news-signup .mc4wp-form-fields { display: flex; gap: 8px; }
.footer-news-signup .mc4wp-form input[type="email"] {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13.5px;
  transition: border-color .16s ease, background .16s ease;
}
.footer-news-signup .mc4wp-form input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.footer-news-signup .mc4wp-form input[type="email"]:focus { outline: none; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); }
.footer-news-signup .mc4wp-form input[type="submit"],
.footer-news-signup .mc4wp-form button[type="submit"] {
  flex: 0 0 auto; padding: 0 22px; min-height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--blue-deep);
  font-family: var(--font-display); font-size: 13.5px; font-weight: 750;
  transition: transform .16s ease, box-shadow .16s ease;
}
.footer-news-signup .mc4wp-response { margin-top: 9px; font-size: 12px; font-weight: 600; color: #9FE3C3; }

/* Varukorgslådans prenumerationsrader (fas 3). Den blå "Prenumeration"-
   etiketten som stod här är BORTTAGEN (Daniel 2026-08-02) — dess reglar var
   död kod sedan markupen bytte till återkommande-symbolen, och en kvarlämnad
   blå etikett i CSS:en är precis det som gjorde att tacksidan och mejlet
   kunde glida isär från lådan och kassan. Färgen på .cart-sub-meta sätts av
   den dämpade regeln längre upp; värdet här hålls neutralt så det inte
   framstår som en andra sanning. */
.cart-item .cart-sub-meta { font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.cart-item .cart-sub-meta b { font-weight: 700; }
.cart-item .cart-sub-per { display: block; font-size: 10.5px; font-weight: 500; color: #5C6C79; text-align: right; margin-top: 1px; }

/* ── Sticky header på mobil: gamla temats overflow bröt den (M4, Daniel
   2026-08-04: "menyn verkar inte följa med ... då ser man inte att en
   produkt lagts i varukorgen") ──
   Headern HAR position: sticky sedan prototypen, och i prototypen fungerar
   den. På staging sätter gamla temats CSS overflow: hidden auto på body —
   body blir då sidans scrollbehållare och en sticky i den fastnar aldrig.
   Samma klass av miljökrock som ".open { display: none }" ovan: syns aldrig
   i previews, bara i verklig WordPress-miljö. html body.habits-redesign
   (0,1,2) slår temats body.wp-singular (0,1,1) oavsett laddningsordning.
   clip i stället för hidden: clip klipper utan att skapa en scrollbehållare
   — exakt det chrome-blockets egen html/body-regel redan valde, och
   verifierat direkt mot staging 2026-08-04 (headern stickar på 0 px, inget
   horisontellt spill). */
html body.habits-redesign { overflow-x: clip; overflow-y: visible; }

/* ── Scroll-lås när varukorgslådan är öppen (slutgranskning 2026-08-04) ──
   cart-drawer.js har alltid satt klassen cart-open på <html>, men ingen CSS
   definierade den — prototypens låda låser body.drawer-open (home.html) och
   den kopplingen tappades i porten. Följden på mobil: sidan scrollade bakom
   lådan, och när kunden nådde radlistans botten kedjade svepet vidare till
   sidan. Regeln bor här (inte i chrome-blocket) eftersom klassen bara sätts
   av WP-lådans JS. drawer-open rörs inte — den ägs av mobilmenyn. */
html.cart-open { overflow: hidden; }
/* Utan contain kedjar en färdigscrollad radlista svepet till sidan bakom —
   overflow: hidden på html stoppar desktop, contain stoppar touch. */
body.habits-redesign .cart-items { overscroll-behavior: contain; }

/* ── Träffytor på lådans småknappar (slutgranskning 2026-08-04, selektorerna
   RÄTTADE i verifieringen samma dag: stegarna heter .cart-qty och krysset är
   ett ID — de första reglerna pekade på klasser som inte finns och gjorde
   ingenting) ──
   Stegarna är 27×27 px och krysset 34×34 — under de ~44 px som ett finger
   behöver. Ytan förstoras med ett osynligt pseudo-element så att INGET
   ändras visuellt: knappen ser likadan ut men svarar på tryck en bit
   utanför sin kant. position: relative krävs för att utbredningen ska
   räknas från knappen själv. inset −8px på stegarna: minus och plus ligger
   med bara räknaren emellan, och ytorna får inte nå varandra. */
body.habits-redesign .cart-qty button,
body.habits-redesign #cart-close { position: relative; }
body.habits-redesign .cart-qty button::after {
  content: ""; position: absolute; inset: -8px;
}
body.habits-redesign #cart-close::after {
  content: ""; position: absolute; inset: -9px;
}