/* ============================================================
   Envana brand fonts (köpta licenser: Displaay order 408594,
   Desktop+Print / Web / Social Media — Bagoss Standard R+M).
   Hanken Grotesk självhostad (OFL, variabel fil = alla vikter):
   snabbare än Google-anrop och inga GDPR-problem i DE.
   Deklarationerna kostar inget förrän familjerna används.
   ============================================================ */
@font-face { font-family: 'Bagoss Standard'; font-style: normal; font-weight: 400; font-display: swap; src: url('envana-font-bagossstandard-400.woff2') format('woff2'); }
@font-face { font-family: 'Bagoss Standard'; font-style: normal; font-weight: 500; font-display: swap; src: url('envana-font-bagossstandard-500.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('envana-font-hankengrotesk-variable.woff2') format('woff2'); }

/* ============================================================
   Envana design system — tokens (Figma: Envana Design System).
   Namnen speglar Figma-variablerna (bg/base -> --env-bg-base).
   Sektioner byggs om mot dessa en i taget; gamla --e-*-tokens i
   envana-pdp-base.css är Renew-arv och fasas ut sektionsvis.
   ============================================================ */
:root {
  --env-bg-base: #FFFFFF;        /* sida + kort VITA (Rasmus 2026-08-11, ändrat i Figma) — kräm #FEFAF8 är nu selected-bg i Kaching */
  --env-bg-chip: #F8DAD5;        /* chip/badge-tint */
  --env-bg-subtle: #FAEFED;      /* mjuka paneler (timeline, TP-score) */
  --env-bg-ink: #320D01;         /* enda mörka ytan (footer, announcement) */
  --env-text-heading: #320D01;
  --env-text-body: #190701;
  --env-text-link: #C02D14;      /* endast inline-länkar i löptext */
  --env-text-on-ink: #FEFAF8;
  --env-text-on-primary: #FFFFFF; /* helvit på röd — Rasmus 2026-08-11 */
  --env-action-primary: #F0573D; /* ytfärg, aldrig textfärg */
  --env-action-hover: #E7462E;   /* Rasmus override 2026-08-11 (ersätter brand-600) */
  --env-border-subtle: #E8D3C9;  /* hairlines: dividers, accordions, kort */
  --env-border-strong: #C6AB9F;  /* vilande interaktiv + radio-ringar */
  --env-border-brand-soft: #F7BDB3;
  --env-font-heading: 'Bagoss Standard', 'Hanken Grotesk', system-ui, sans-serif;
  --env-font-body: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ============================================================
   Butikens fontfamiljer. Dawns font_picker kan bara visa Shopifys
   eget fontbibliotek — köpta fonter som Bagoss kan aldrig dyka upp
   där. Overriden här vinner över theme.liquid:s inline-variabler
   (senare i kaskaden) och ger HELA storefronten Bagoss/Hanken
   oavsett vad pickern i theme settings står på. Checkout och
   app-hostade sidor (Loop-portalen) läser INTE temats CSS och
   brandas separat.
   ============================================================ */
:root {
  --font-heading-family: 'Bagoss Standard', 'Hanken Grotesk', system-ui, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-family: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 600;
}

/* Announcement bar — bg/ink + text/on-ink, Bagoss Regular 12/14 +3%
   versaler (Rasmus spec 2026-08-11). nowrap: texten får ALDRIG bryta
   till två rader på mobil. */
.announcement-bar-section .utility-bar {
  background: var(--env-bg-ink);
  border-bottom: none;
}
.announcement-bar,
.announcement-bar .announcement-bar__message {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--env-text-on-ink);
  white-space: nowrap;
}

/* Override Dawn's min-height that creates uneven vertical alignment */
.announcement-bar__message {
  min-height: 0;
  padding: 10px 0; /* 14px rad + 2×10 = 34px total (Rasmus 2026-08-13, var 38) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide search icon in header */
.header__icon--search,
details-modal.header__search,
.shopify-section-header .header__search {
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Body text — 16px base with 24px line height */
body,
body.gradient {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ============================================================
   Footer — bg/ink #320D01, systemets enda mörka yta (Figma-draften).
   Innehållet (tagline, menyer, adress) styrs i theme editor som
   vanligt; det här är bara utseendet.
   ============================================================ */
.footer.gradient {
  background: var(--env-bg-ink);
  color: var(--env-text-on-ink);
}

/* Bredare footer än sidans standardcontainer + rejäl luft mellan
   kolumnerna (Rasmus 2026-08-12: brand-blocket låg för tätt mot
   Kundtjänst-menyn). Dawn-grid:et är flex — vi kör över med riktig
   grid på desktop: brand-kolumnen får mest plats, menyerna delar lika. */
.footer .page-width {
  max-width: 144rem;
}
@media screen and (min-width: 990px) {
  .footer .footer__blocks-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 9rem;
  }
  .footer .footer-block.grid__item {
    width: 100%;
    max-width: none;
  }
}

/* Loggan (vit variant) i brand-blocket */
.footer-block__logo {
  display: block;
  width: 160px;
  height: auto;
  margin-bottom: 24px;
}

/* Brand-taglinen "Det vackraste..." — accentrubrik i märkesfärg,
   Bagoss Regular 22/28 (stor text på ink, godkänd signalanvändning) */
.footer-block:not(.footer-block--menu) .footer-block__heading.inline-richtext {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--env-action-primary);
  margin: 0 0 14px;
  max-width: 380px;
}

/* Kolumnrubriker (Kundtjänst, Företagsinformation) — Bagoss H3-skalan
   22/28 −2% på ALLA bredder (Rasmus 2026-08-12: 18 var för litet) */
.footer-block--menu .footer-block__heading.inline-richtext {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--env-text-on-ink);
  margin: 0 0 16px;
}

/* Brand-blockets brödtext */
.footer .footer-block__details-content.rte {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--env-text-on-ink);
  max-width: 380px;
}
.footer .footer-block__details-content.rte p { margin: 0; }

/* Menylänkar — Hanken, kräm. Hover: linje som växer vänster->höger
   (ersätter Dawns statiska underline). Ångerknappen undantas — den
   är en pill, inte en textlänk. */
.footer .footer-block__details-content .list-menu__item--link:not([href$="/angerratt/"]) {
  position: relative;
  display: inline-block;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: rgba(254, 250, 248, 0.92);
  transition: color 0.25s ease;
}
.footer .footer-block__details-content .list-menu__item--link:not([href$="/angerratt/"])::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer .footer-block__details-content .list-menu__item--link:not([href$="/angerratt/"]):hover {
  color: #FFFFFF;
  text-decoration: none;
}
.footer .footer-block__details-content .list-menu__item--link:not([href$="/angerratt/"]):hover::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .footer .footer-block__details-content .list-menu__item--link::after { transition: none; }
}

/* Mobil: Dawns 1rem-padding per länk gav för glesa listor — halverad */
@media screen and (max-width: 989px) {
  .footer .footer-block__details-content .list-menu__item--link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .footer .footer-block__details-content {
    margin-bottom: 2.8rem;
  }
}

/* Bottendel: hairline i dämpad kräm + centrerat innehåll */
.footer__content-bottom {
  border-top: 1px solid rgba(254, 250, 248, 0.15);
}
.footer__copyright.caption {
  font-size: 13px;
  line-height: 19px;
  letter-spacing: -0.01em;
  color: rgba(254, 250, 248, 0.75);
}
.footer__copyright a {
  color: rgba(254, 250, 248, 0.9);
}

/* Footer side padding — tighter on mobile */
.footer .page-width,
.footer__content-top.page-width,
.footer__content-bottom.page-width {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Heading letter spacing — only large headings */
.h0, .h1, .h2,
h1, h2 {
  letter-spacing: -0.03em;
}

.h3, h3 {
  letter-spacing: -0.02em;
}

/* Kontoikonen visas på alla bredder direkt i header.liquid (ingen small-hide),
   så den gamla max-width-regeln här behövdes inte längre. */

/* Mobil/tablet: dra ihop profil- och vagnikonen (Dawns 44px-boxar har 12px
   inbyggd luft runt glyferna, vilket gav ~24px synligt gap) och släpp
   gruppens extra högerpadding så ikonerna når ut till headerns kant.
   Touch-ytorna förblir 44px höga, boxarna överlappar bara 10px i sidled. */
@media screen and (max-width: 989px) {
  .header__icons {
    padding-right: 0;
  }
  header a.header__icon--account {
    margin-right: -1rem;
  }
}

/* Menyraden rymmer "Hantera prenumeration" på en rad först vid 10px sidopadding.
   Med Dawns 12px blir summan 493px mot 480px tillgängligt och "Kontakta oss"
   bryter ned till rad två. 10px frigör 16px och syns inte i praktiken. */
@media screen and (min-width: 990px) {
  .header__inline-menu .header__menu-item {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================================
   Rebuy Smart Cart — Envana-systemet (IM8-referensen).
   Ersätter den gamla custom-CSS:en i Rebuy-admin, som ska TÖMMAS:
   den satte Renew-orange + Azeret Mono med !important och injiceras
   efter temats CSS, så den vinner annars. !important här behövs mot
   Rebuys eget stylesheet som också laddas efter temats.
   ============================================================ */

/* Dölj Dawns egen cart-drawer när Smart Cart är aktiv (flyttad hit
   från Rebuy-adminfältet så regeln överlever tömningen) */
.smart-cart--enabled cart-drawer { display: none; }

/* Panel + overlay. Mobil: ingen radius — carten ska täcka hela skärmen
   utan att bakgrunden sipprar igenom i hörnen (Rasmus 2026-08-12). */
.rebuy-cart__flyout { border-radius: 16px !important; font-family: var(--env-font-body) !important; color: var(--env-text-body) !important; }
@media screen and (max-width: 767px) {
  .rebuy-cart__flyout { border-radius: 0 !important; }
}
.rebuy-cart__background { background: rgba(25, 7, 1, 0.45) !important; }
/* Subtil blush-wash högst upp (samma familj som hero-gradienten) —
   headerraden är klasslös hos Rebuy, därav first-child */
.rebuy-cart__flyout > div:first-child { background: linear-gradient(180deg, #FCF4F2 0%, #FFFFFF 100%) !important; }

/* Titel + stängkryss */
.rebuy-cart__title { font-family: var(--env-font-heading) !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: var(--env-text-heading) !important; }
.rebuy-cart__flyout-close { color: var(--env-text-heading) !important; }

/* Fri frakt-progress: blush-spår + brand-fill (bevis/progress = röd) */
.rebuy-cart__progress-bar-meter { background: #F8DAD5 !important; height: 8px !important; border-radius: 999px !important; }
.rebuy-cart__progress-bar-meter-fill { background: var(--env-action-primary) !important; border-radius: 999px !important; height: 100% !important; }
.rebuy-cart__progress-bar-prompt { font-size: 14px !important; letter-spacing: -0.01em !important; color: var(--env-text-heading) !important; }
.rebuy-cart__progress-step.complete .rebuy-cart__progress-step-icon { color: var(--env-action-primary) !important; }
.rebuy-cart__progress-step-label { font-size: 12px !important; letter-spacing: 0.03em !important; text-transform: uppercase; color: #4E4E4E !important; }

/* Produktrad: Bagoss-titel i ink, caption-egenskaper, rundad bild.
   Luftigare rad + mjukare bildradie (IM8-referensen). */
.rebuy-cart__flyout-item { padding-top: 20px !important; padding-bottom: 20px !important; }
.rebuy-cart__flyout-item-media img { border-radius: 12px !important; }
.rebuy-cart__flyout-item-info { padding-left: 6px !important; }
.rebuy-cart__flyout-item-product-title { font-family: var(--env-font-heading) !important; font-weight: 400 !important; font-size: 18px !important; line-height: 24px !important; letter-spacing: -0.01em !important; color: var(--env-text-heading) !important; text-decoration: none !important; }
.rebuy-cart__flyout-item-property { font-size: 13px !important; line-height: 19px !important; color: #4E4E4E !important; }
.rebuy-cart__flyout-item-remove { color: #8A7D76 !important; transition: color 0.2s ease; }
.rebuy-cart__flyout-item-remove:hover { color: var(--env-text-heading) !important; }

/* Pris i ink (Price-rollen: aldrig grönt eller rött), jämförpris grått.
   Reglerna täcker även inre spans så OTP/rabatt-varianterna aldrig
   faller tillbaka på Rebuys egna fonter. nowrap: "kr" får aldrig
   radbrytas ensamt; på mobil staplas strukna priset under istället. */
.rebuy-cart__flyout-item-price { text-align: right !important; }
.rebuy-cart__flyout-item-price .rebuy-money,
.rebuy-cart__flyout-item-price .rebuy-money span:not(.sr-only) { font-family: var(--env-font-heading) !important; font-size: 16px !important; color: var(--env-text-heading) !important; white-space: nowrap !important; }
.rebuy-cart__flyout-item-price .rebuy-money { display: inline-block !important; vertical-align: middle !important; }
.rebuy-cart__flyout-item-price .rebuy-money.sale { color: var(--env-text-heading) !important; margin-right: 6px !important; }
.rebuy-cart__flyout-item-price .rebuy-money.compare-at,
.rebuy-cart__flyout-item-price .rebuy-money.compare-at span:not(.sr-only) { font-family: var(--env-font-body) !important; font-size: 13px !important; color: #4E4E4E !important; }
@media screen and (max-width: 767px) {
  .rebuy-cart__flyout-item-price .rebuy-money.compare-at { display: block !important; margin-top: 2px !important; }
  .rebuy-cart__flyout-item-price .rebuy-money.sale { margin-right: 0 !important; }
}

/* Antal-stepper: borderlös som IM8 — bara minus, siffra, plus.
   (Pill-ramen togs bort: Rebuys inre hover-boxar klipptes fult mot den.) */
.rebuy-cart__flyout-item-quantity { margin-top: 10px !important; }
.rebuy-cart__flyout-item-quantity-widget { transform: none !important; border: none !important; background: transparent !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.rebuy-cart__flyout-item-quantity-widget-button { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 999px !important; width: 30px !important; height: 30px !important; color: var(--env-text-heading) !important; transition: opacity 0.2s ease !important; }
.rebuy-cart__flyout-item-quantity-widget-button:hover { background: transparent !important; opacity: 0.55 !important; }
.rebuy-cart__flyout-item-quantity-widget-label { font-size: 15px !important; min-width: 24px !important; text-align: center !important; color: var(--env-text-heading) !important; }

/* Prenumerationsrader: antalet är LÅST (beslut 2026-08-17). Qty och
   Loop-plan hör ihop per konstruktion (1 fl/20 d, 2 fl/40 d, 3 fl/60 d)
   — en fri stepper ger fel pris och fel leveransschema (t.ex. 1 flaska
   till 3-packets styckpris var 60:e dag). Sub-rader identifieras på
   delivery-frequency-raden, som OTP-rader saknar. Hela qty-widgeten
   döljs; antalet visas som "× N" efter produktnamnet
   (ordersummary-konventionen, Rasmus 2026-08-17) — injiceras av
   dekoratorn i theme.liquid, som ÄVEN döljer widgeten inline. Den
   redundansen är medveten: GitHub-synken replayade en gammal commit
   över temat 2026-08-17 och gav dubbel "× 3" (en i titeln, en i
   stepper-slotten) tills dekoratorn tog över ansvaret. Browsers utan
   :has() täcks av samma inline-döljning. visibility (inte display):
   display:none kollapsade radens flexlayout och drog prisblocket mot
   mitten — den osynliga widgeten måste behålla sin låda så priset
   ligger kvar exakt där det låg med steppern synlig (Rasmus
   2026-08-18). Dubbelrads-skyddet ligger i PDP:ns ATC-guard och
   temats /cart-sida låser via can_update_quantity. */
.rebuy-cart__flyout-item:has(.rebuy-cart__flyout-item-property--delivery-frequency) .rebuy-cart__flyout-item-quantity { visibility: hidden !important; pointer-events: none !important; }
.env-cart-qty { white-space: nowrap; }

/* Subscribe & save-bannern (beslut 2026-08-18): visas i Smart Cart för
   engångsrader med 1 till 3 flaskor när ingen kollagenprenumeration
   ligger i carten. Datat beräknas live i envana-sub-switch.liquid,
   fail-closed. Blush + brand-soft border = designsystemets
   erbjudandeyta. CTA:n är SEKUNDÄRKNAPP (vit pill, ink-text, sentence
   case, enkel hover): TILL KASSAN förblir cartens enda röda pill och
   svepet är reserverat för köp-CTA:er. Inga !important: Rebuys CSS
   känner inte till våra klasser. */
.env-subsw { width: 100%; box-sizing: border-box; align-self: stretch; background: #FEFAF8; border: 1px solid var(--env-border-subtle); border-radius: 12px; padding: 18px 20px 20px; margin: 12px 0 28px; font-family: var(--env-font-body); } /* 28px botten: footerns 24px skuggtoning (::before) far inte klippa hornen vid full scroll */
/* Medan banner-switchen pågår (env-switching sätts av onSwitch) låses
   kassaknappen och qty-stepparna: ett kassaklick mitt i bytet lät
   popupen utvärdera gammalt OTP-läge, och en qty-ändring under
   round-tripen revertades tyst (QA 2026-08-19). */
body.env-switching .rebuy-cart__checkout-button,
body.env-switching .rebuy-cart__flyout-item-quantity { pointer-events: none !important; opacity: 0.55 !important; }

/* Divider-flytt när bannern visas (IM8-mönstret, Rasmus 2026-08-18):
   linjen ska sitta mellan varorna och bannern, INTE under bannern.
   Rebuys klasslösa items-container drar border-bottom under hela
   ytan — den släcks när bannern finns och samma linje (Rebuys egen
   #EEE) ritas under varulistan istället. Utan banner: original. */
/* Rebuys containers egen border-bottom slacks sa lange fri frakt-baren finns
   (= alltid nar varor finns). Tidigare bara nar bannern fanns, vilket gav
   en extra kant-till-kant-linje under varulistan i sub-laget (Rasmus 2026-09-02). */
.rebuy-cart__flyout div:has(> .env-fsbar), .rebuy-cart__flyout div:has(> .env-subsw) { border-bottom: none !important; }
/* Produktsektionen kapslas in av tva linjer med symmetrisk luft
   (Rasmus 2026-09-01, Kalla-referensen): linjerna tillhor
   varulistan, inte baren. Avstand bar-linje = ul margin-top,
   luften innanfor linjerna = ul padding, lika uppe och nere. */
.rebuy-cart__flyout div:has(> .env-fsbar) > ul { border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; padding: 8px 0; margin-top: 18px; }

/* Flyoutens scrollbar blev synlig när bannern gjorde innehållet högre
   (klassisk 15px vit tumme = "strecket", Rasmus 2026-08-18). Tunn och
   varm istället, systemets border-strong på transparent spår. */
.rebuy-cart__flyout { scrollbar-width: thin; scrollbar-color: var(--env-border-strong) transparent; }
.rebuy-cart__flyout ::-webkit-scrollbar { width: 6px; }
.rebuy-cart__flyout ::-webkit-scrollbar-thumb { background: var(--env-border-strong); border-radius: 999px; }
.rebuy-cart__flyout ::-webkit-scrollbar-track { background: transparent; }
.env-subsw__title { margin: 0 0 12px; font-family: var(--env-font-heading); font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: -0.02em; color: var(--env-text-heading); }
.env-subsw__list { list-style: none; margin: 0 0 16px; padding: 0; }
.env-subsw__list li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; line-height: 21px; letter-spacing: -0.01em; color: var(--env-text-body); margin: 0 0 6px; padding: 0; }
.env-subsw__plus { color: var(--env-action-primary); font-weight: 700; flex: 0 0 auto; }
.env-subsw__cta { display: block; width: 100%; background: #FFFFFF; border: 1px solid var(--env-text-heading); border-radius: 999px; padding: 13px 24px; font-family: var(--env-font-heading); font-weight: 500; font-size: 16px; line-height: 20px; color: var(--env-text-heading); cursor: pointer; transition: background 0.2s ease; }
.env-subsw__cta:hover { background: var(--env-bg-subtle); }
.env-subsw__cta:active { transform: scale(0.985); }
.env-subsw__cta:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Mobil: tightare banner så CTA:n oftare hamnar ovanför vecket
   (Rasmus iPhone-observation 2026-08-18). Delvis synlig knapp är en
   scroll-cue, inte ett fel — men ~40px mindre höjd hjälper. */
@media screen and (max-width: 749px) {
  .env-subsw { padding: 16px 16px; margin: 10px 0 14px; }
  .env-subsw__title { font-size: 18px; line-height: 24px; margin-bottom: 10px; }
  .env-subsw__list { margin-bottom: 13px; }
  .env-subsw__list li { margin-bottom: 5px; }
  .env-subsw__cta { padding: 12px 20px; font-size: 15px; }
}

/* ============================================================
   Pre-purchase-popupen (Rebuy-widget 306614, 2026-08-18).
   All styling HÄR — widgetens Custom CSS-fält ska vara TOMT, samma
   princip som Smart Cart. Scopat på .widget-type-pre-purchase så det
   överlever widget-ID-byten. Timern döljs för alltid (nedräkningar är
   bannlysta i designsystemet). Bilden byts per scenario via body-klass
   env-pp-1/env-pp-2 (sätts av cart-scannern): kunden med 1 flaska ser
   2-flaskorsbilden (målet), kunden med 2 ser 3-flaskorsbilden — samma
   Kaching-bilder som PDP:ns tierkort. Ja-knappen är PDP:ns primärknapp
   inklusive svepet (köp-CTA). .outline döljs preliminärt (Renews
   mönster) tills decline-beteendet är verifierat. TEST-produkten
   (product-id 12153280364808) döljs som hängslen.
   ============================================================ */
.widget-type-pre-purchase .rebuy-widget-container.widget-display-popup { background: rgba(25, 7, 1, 0.45) !important; }
/* Panelen: bred och horisontell på desktop (Rasmus 2026-08-18: "för
   liten, nästan kvadratisk"), allt centrerat, overflow hidden så
   footerns fullbleed-divider klipps snyggt mot radien. padding-bottom
   0 — footern äger sitt eget utrymme. */
.widget-type-pre-purchase .rebuy-widget-content { background: #FFFFFF !important; border-radius: 16px !important; padding: 36px 40px 0 !important; max-width: 800px !important; width: min(800px, calc(100vw - 32px)) !important; font-family: var(--env-font-body) !important; color: var(--env-text-body) !important; text-align: center !important; overflow: hidden !important; overflow-y: auto !important; max-height: 92dvh !important; }
.widget-type-pre-purchase .rebuy-timer { display: none !important; }
.widget-type-pre-purchase .rebuy-modal-close { color: var(--env-text-heading) !important; }
.widget-type-pre-purchase .super-title { font-family: var(--env-font-heading) !important; font-weight: 400 !important; font-size: 13px !important; line-height: 16px !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #4E4E4E !important; margin: 0 0 10px !important; }
.widget-type-pre-purchase .primary-title { font-family: var(--env-font-heading) !important; font-weight: 400 !important; font-size: 28px !important; line-height: 34px !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--env-text-heading) !important; margin: 0 0 10px !important; }
.widget-type-pre-purchase .description { font-family: var(--env-font-body) !important; font-size: 16px !important; line-height: 24px !important; letter-spacing: -0.01em !important; color: var(--env-text-body) !important; margin: 0 auto 24px !important; max-width: 500px !important; }
.widget-type-pre-purchase .rebuy-product-block.product-id-12153280364808 { display: none !important; }
/* Produktblocket: bild vänster (bilden gör säljjobbet — Kaching-
   bilderna är placeholders tills jämförelsegrafiken är klar), CTA
   höger, vertikalt centrerat. Priset och titeln DOLDA: priset bakas
   in i CTA-labeln i Rebuy-admin (Rasmus beslut 2026-08-18). */
.widget-type-pre-purchase .rebuy-product-grid,
.widget-type-pre-purchase .splide__track,
.widget-type-pre-purchase .splide__list { width: 100% !important; max-width: 100% !important; }
.widget-type-pre-purchase .splide__list { display: block !important; transform: none !important; }
.widget-type-pre-purchase .rebuy-product-block { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 18px !important; padding: 0 0 4px !important; width: 100% !important; }
.widget-type-pre-purchase .rebuy-product-media { flex: none !important; width: 100% !important; max-width: 100% !important; }
.widget-type-pre-purchase .rebuy-product-media img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: clamp(280px, 38vh, 380px) !important; margin: 0 auto !important; border-radius: 12px !important; display: block !important; }
/* Rebuy wrappar bilden i en fullbredds-länk till produktsidan — ett
   misklick navigerar till PDP:n, ser ut som att popupen kraschar och
   bränner kundens enda visning (cookien). Endast JA-knappen, "Nej tack"
   och krysset får vara klickbara (Bruse-buggen 2026-08-19). */
.widget-type-pre-purchase .rebuy-product-media,
.widget-type-pre-purchase a.rebuy-product-image,
.widget-type-pre-purchase a.rebuy-product-title-link { pointer-events: none !important; cursor: default !important; }
body.env-pp-1 .widget-type-pre-purchase .rebuy-product-media img { content: url("envana-pp-jamforelse-1v2.webp?v=3") !important; }
body.env-pp-2 .widget-type-pre-purchase .rebuy-product-media img { content: url("envana-pp-jamforelse-2v3.webp?v=3") !important; }
.widget-type-pre-purchase .rebuy-product-info { display: none !important; }
.widget-type-pre-purchase .rebuy-product-actions { flex: none !important; width: min(480px, 100%) !important; padding-left: 0 !important; padding-right: 0 !important; }
.widget-type-pre-purchase .rebuy-button-container { width: 100% !important; }
.widget-type-pre-purchase .rebuy-product-block .rebuy-button { position: relative !important; overflow: hidden !important; background: var(--env-action-primary) !important; border: none !important; border-radius: 999px !important; min-height: 56px !important; padding: 17px 16px !important; font-family: var(--env-font-heading) !important; font-weight: 500 !important; font-size: 15px !important; white-space: nowrap !important; line-height: 20px !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #FFFFFF !important; transition: background 0.2s ease !important; width: 100% !important; }
.widget-type-pre-purchase .rebuy-product-block .rebuy-button::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-160%) skewX(-20deg); transition: transform 0.6s ease; pointer-events: none; }
.widget-type-pre-purchase .rebuy-product-block .rebuy-button:hover { background: var(--env-action-hover) !important; }
.widget-type-pre-purchase .rebuy-product-block .rebuy-button:hover::after { transform: translateX(460%) skewX(-20deg); }
@media (prefers-reduced-motion: reduce) { .widget-type-pre-purchase .rebuy-product-block .rebuy-button::after { display: none; } }
/* Footern: transparent och statisk (Rebuys egen bar gav skugg/cropp-
   buggen Rasmus såg), fullbredds-divider via negativa marginaler som
   matchar panelens padding, klipps av panelens radie. */
.widget-type-pre-purchase .bottom-container { background: transparent !important; box-shadow: none !important; position: static !important; border: none !important; width: auto !important; margin: 22px -40px 0 !important; padding: 0 !important; }
.widget-type-pre-purchase .rebuy-pre-purchase-actions { background: transparent !important; box-shadow: none !important; border-top: 1px solid #EEEEEE !important; margin: 0 !important; padding: 15px 20px 17px !important; justify-content: center !important; }
.widget-type-pre-purchase .rebuy-pre-purchase-actions .rebuy-button { background: transparent !important; border: none !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; color: var(--env-text-heading) !important; text-decoration: underline !important; font-family: var(--env-font-body) !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: -0.01em !important; text-transform: none !important; }
.widget-type-pre-purchase .rebuy-pre-purchase-actions .outline { display: none !important; }
.widget-type-pre-purchase .powered-by-rebuy { display: none !important; }
.widget-type-pre-purchase .splide__arrows,
.widget-type-pre-purchase .splide__pagination { display: none !important; }
/* Mobil: helt vertikalt flöde (Rasmus: den horisontella mixen gjorde
   knappen tjock och ful) — stor bild överst, fullbredds-CTA, nej tack
   under. Läsbarhet före kompakthet: hellre högre panel som scrollar
   än nedbantad text. */
@media only screen and (max-width: 749px) {
  .widget-type-pre-purchase .rebuy-widget-content { width: calc(100vw - 24px) !important; max-height: 92dvh !important; overflow-y: auto !important; padding: 28px 22px 0 !important; }
  .widget-type-pre-purchase .primary-title { font-size: 22px !important; line-height: 28px !important; }
  .widget-type-pre-purchase .description { font-size: 15px !important; line-height: 22px !important; margin-bottom: 18px !important; }
  .widget-type-pre-purchase .rebuy-product-block { flex-direction: column !important; gap: 18px !important; }
  .widget-type-pre-purchase .rebuy-product-media { flex: none !important; max-width: 100% !important; width: 100% !important; }
  .widget-type-pre-purchase .rebuy-product-media img { width: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; }
  .widget-type-pre-purchase .rebuy-product-actions { width: 100% !important; }
  .widget-type-pre-purchase .rebuy-product-block .rebuy-button { font-size: 15px !important; padding: 16px 16px !important; }
  .widget-type-pre-purchase .bottom-container { margin: 18px -22px 0 !important; }
  .widget-type-pre-purchase .rebuy-pre-purchase-actions { padding: 14px 16px 16px !important; }
}

/* Subtotal: Price-stilen. TOTAL i Bagoss Medium. Basregeln ligger på
   -amount och täcker ALLA inre spans: utan rabatt i carten renderar
   Rebuy beloppet utan -final-amount-klassen och föll då tillbaka på
   Hanken (Rasmus bugg 2026-08-12). Compare-regeln efteråt vinner för
   strukna priset. */
.rebuy-cart__flyout-subtotal-label,
.rebuy-cart__flyout-subtotal-label span { font-family: var(--env-font-heading) !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: 0.03em !important; color: var(--env-text-heading) !important; }
.rebuy-cart__flyout-subtotal-amount,
.rebuy-cart__flyout-subtotal-amount span:not(.sr-only) { font-family: var(--env-font-heading) !important; font-weight: 500 !important; font-size: 18px !important; line-height: 24px !important; letter-spacing: -0.01em !important; color: var(--env-text-heading) !important; white-space: nowrap !important; }
.rebuy-cart__flyout-subtotal-final-amount,
.rebuy-cart__flyout-subtotal-compare-amount { vertical-align: middle !important; }
.rebuy-cart__flyout-subtotal-compare-amount,
.rebuy-cart__flyout-subtotal-compare-amount span:not(.sr-only) { font-family: var(--env-font-body) !important; font-size: 14px !important; color: #4E4E4E !important; }

/* Checkout-knappen: exakt PDP:ns primärknapp inklusive svep-hovern */
.rebuy-cart__checkout-button { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--env-action-primary) !important; border: none !important; border-radius: 999px !important; height: 56px !important; min-height: 56px !important; padding: 0 24px !important; font-family: var(--env-font-heading) !important; font-weight: 500 !important; line-height: 1 !important; text-transform: uppercase !important; color: #FFFFFF !important; transition: background 0.2s ease !important; }
.rebuy-cart__checkout-button::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-160%) skewX(-20deg); transition: transform 0.6s ease; pointer-events: none; }
.rebuy-cart__checkout-button:hover { background: var(--env-action-hover) !important; }
.rebuy-cart__checkout-button:hover::after { transform: translateX(460%) skewX(-20deg); }
@media (prefers-reduced-motion: reduce) { .rebuy-cart__checkout-button::after { display: none; } }

/* Bara låset + TILL KASSAN på knappen — priset står redan i TOTALT-raden
   precis ovanför (Rasmus 2026-08-12). Beloppet är en egen span i Rebuys
   checkout-area-template; mellan spansen ligger " – " som LÖS TEXTNOD
   som inte går att dölja med CSS — font-size 0 på knappen nollar den,
   labeln får tillbaka sin storlek. Kan tas bort den dag templaten
   städas i Rebuy-admin (raden med formatMoney(subtotalNumber())).
   Labeln är inline-flex så ikon + text centreras utan att Rebuys
   inline vertical-align:-4px på SVG:n drar ner linjeboxen. */
.rebuy-cart__checkout-button { font-size: 0 !important; }
.rebuy-cart__checkout-button > span:first-of-type { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 16px !important; letter-spacing: 0.03em !important; line-height: 1 !important; }
.rebuy-cart__checkout-button > span:nth-of-type(2) { display: none !important; }
.rebuy-cart__checkout-button svg { vertical-align: middle !important; margin-right: 0 !important; flex-shrink: 0 !important; }

/* Delbetalnings- och rabattrader */
.rebuy-cart__flyout-installments { font-size: 13px !important; color: #4E4E4E !important; }

/* Kassasektionen avgränsad som IM8: hairline + mjuk skugg-fade ligger
   på hela footer-diven så TOTAL, pris och knapp hör ihop under linjen
   (Rasmus 2026-08-12 — TOTAL låg tidigare ovanför avgränsningen). */
.rebuy-cart__flyout > div:last-child { position: relative !important; border-top: 1px solid var(--env-border-subtle) !important; padding-top: 14px !important; }
.rebuy-cart__flyout > div:last-child::before { content: ""; position: absolute; top: -25px; left: 0; right: 0; height: 24px; background: linear-gradient(180deg, rgba(25, 7, 1, 0), rgba(25, 7, 1, 0.05)); pointer-events: none; }
[data-rebuy-component="checkout-area"] { padding-bottom: 12px !important; }

/* ============================================================
   Statiska sidor (Köpvillkor, Integritetspolicy, FAQ, policyer,
   Om oss m.fl.) — main-page.liquid renderar .main-page-title + .rte.
   Bagoss-rubriker i ink, Hanken-brödtext, systemets länkfärg.
   ============================================================ */
.main-page-title {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: -0.03em;
  color: var(--env-text-heading);
  margin-bottom: 28px;
}
@media screen and (max-width: 989px) {
  .main-page-title { font-size: 32px; line-height: 36px; margin-bottom: 20px; }
}
.rte {
  color: var(--env-text-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
}
/* Sidinnehållet blandar rubriknivåer beroende på hur det skrevs i
   admin-editorn (Leveranspolicy har sektionsrubriker som h1, Köpvillkor
   som h2) — h1 och h2 i innehållet får samma H2-skala, sidans riktiga
   rubrik är .main-page-title ovanför. */
.rte h1,
.rte h2 {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 33px;
  letter-spacing: -0.03em;
  color: var(--env-text-heading);
  margin: 40px 0 12px;
}
.rte h5, .rte h6 {
  font-family: var(--env-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--env-text-heading);
  margin: 20px 0 8px;
}
.rte h3 {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--env-text-heading);
  margin: 32px 0 10px;
}
.rte h4 {
  font-family: var(--env-font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--env-text-heading);
  margin: 24px 0 8px;
}
.rte p { margin: 0 0 16px; }
.rte ul, .rte ol { margin: 0 0 16px; padding-left: 22px; }
.rte li { margin-bottom: 8px; }
.rte a { color: var(--env-text-link); text-decoration: underline; text-underline-offset: 2px; }
.rte hr { border: none; border-top: 1px solid var(--env-border-subtle); margin: 36px 0; }
/* Systemet har inga italics och Hanken-variabeln saknar äkta kursiv
   (webbläsaren fejk-lutar den). Betoningar i sidinnehåll renderas rakt. */
.rte em, .rte i { font-style: normal; }

/* Cart-ikonens antalsbubbla i headern: märkesfärg istället för
   schemats gamla orange */
.cart-count-bubble {
  background-color: var(--env-action-primary);
  color: #FFFFFF;
}

/* EU-ångerknappen i footern - menylänken /pages/angerratt stylad som
   kräm pill-knapp (sekundärknappens form, ljus variant för mörk yta). */
footer a[href$="/angerratt/"] {
  display: inline-block;
  background: #FEFAF8;
  color: #320D01 !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
  text-decoration: none !important;
}
footer a[href$="/angerratt/"]:hover {
  opacity: 0.88;
}

/* ============================================================
   Loop-portalens LOGIN-SIDA (magic link). Scope: body-klassen
   env-loop-login sätts i theme.liquid på request.path för
   /a/loop_subscriptions/get-subscription-link och /login.
   De INLOGGADE portalvyerna behåller Loops egen typskala
   (Rasmus 2026-08-13: guide-skalan blev för stor i portal-UI:t)
   — endast login-sidan får guidens storlekar. Övrig Loop-styling
   (fonter, färger, pill-knappar) ligger i Loop-admins Custom
   CSS-fält, inte här.
   ============================================================ */
body.env-loop-login .loop-h2 {
  font-size: 28px !important;
  line-height: 33px !important;
  letter-spacing: -0.03em !important;
}
body.env-loop-login .loop-container span {
  font-size: 16px !important;
  line-height: 24px !important;
}
body.env-loop-login .loop-form-input {
  font-size: 16px !important;
  padding: 12px 18px !important;
}
/* Loops container har bara 10px sidopadding — texten går i kant på
   mobil. Höjden (60px) lämnas orörd. */
body.env-loop-login #loop-login-container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Knappfont i HELA portalen: 16px (Loops 1.1rem = 17.6px är för stor).
   Ligger här och inte i Loop-adminens CSS-fält så inget behöver
   klistras in där. Endast font-size — höjd/padding är Loops egna. */
body #loop .loop-btn,
body > div.loop .loop-btn {
  font-size: 16px !important;
}

/* Login-knappen följer ATC-receptet: versaler, +3%, 16/20 och samma
   höjd (56px). Sidopaddingen är större än ATC:ns 24 eftersom knappen
   här inte är fullbred — den ska se fyllig ut, inte hopklämd.
   Gäller ENDAST login-sidan; portalens övriga knappar är kvar i
   sentence case (Rasmus 2026-08-13). */
body.env-loop-login #loop .loop-btn-primary {
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  line-height: 20px !important;
  padding: 18px 32px !important;
}

/* ============================================================
   Content Hub-formulären (kontakt, retur, garanti, ångerrätt).
   Embedden (forms-embed/v1.js) renderar inline-DOM med .chf-*
   och injectar sin CSS runtime i head EFTER denna fil — därför
   !important. Fonten ärvs redan (Hanken via body). Knappen är
   medvetet UTAN svep-animation: svepet är reserverat för
   köp-CTA:er (Rasmus 2026-08-13), formulär får enkel hover.
   ============================================================ */
.chf-root {
  color: var(--env-text-body) !important;
}
.chf-root .chf-title,
.chf-root .chf-ending h2 {
  font-family: var(--env-font-heading) !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 33px !important;
  letter-spacing: -0.03em !important;
  color: var(--env-text-heading) !important;
}
.chf-root .chf-label {
  color: var(--env-text-heading) !important;
  font-weight: 600 !important;
}
.chf-root .chf-req { color: var(--env-text-link) !important; }
.chf-root .chf-help { color: #4E4E4E !important; }
.chf-root .chf-loading { color: #4E4E4E !important; }

.chf-root .chf-input,
.chf-root .chf-textarea,
.chf-root .chf-select {
  border-color: var(--env-border-strong) !important;
  border-radius: 12px !important;
}
.chf-root .chf-input:focus,
.chf-root .chf-textarea:focus,
.chf-root .chf-select:focus {
  outline-color: var(--env-text-heading) !important;
  border-color: var(--env-text-heading) !important;
}

/* Radioalternativ: ovald vit + strong border, vald = kräm + ink
   (Kaching-mönstret). Inset-skuggan ger 2px-känsla utan att
   border-width ändras och layouten hoppar. */
.chf-root .chf-radio {
  border-color: var(--env-border-strong) !important;
  border-radius: 12px !important;
}
.chf-root .chf-radio:has(input:checked) {
  background: #FEFAF8 !important;
  border-color: var(--env-text-heading) !important;
  box-shadow: inset 0 0 0 1px var(--env-text-heading) !important;
}
.chf-root .chf-check-title { font-weight: 600 !important; }

/* Info-block: blå → blush med brand-soft border */
.chf-root .chf-info {
  background: var(--env-bg-subtle) !important;
  border-color: var(--env-border-brand-soft) !important;
  border-radius: 12px !important;
}
.chf-root .chf-info a { color: var(--env-text-link) !important; }

/* Filuppladdning */
.chf-root .chf-file {
  border-color: var(--env-border-strong) !important;
  background: #FEFAF8 !important;
  border-radius: 12px !important;
}

/* Fel: semantisk röd i vår ton */
.chf-root .chf-error { color: var(--env-text-link) !important; }
.chf-root .chf-field.chf-invalid .chf-input,
.chf-root .chf-field.chf-invalid .chf-textarea,
.chf-root .chf-field.chf-invalid .chf-select {
  border-color: var(--env-text-link) !important;
}
.chf-root .chf-toperror {
  color: var(--env-text-link) !important;
  border-color: var(--env-border-brand-soft) !important;
  border-radius: 12px !important;
}

/* Skicka-knappen: brand-pill, Bagoss Medium 16, full fältbredd,
   ENKEL hover (inget svep) */
.chf-root .chf-submit {
  background: var(--env-action-primary) !important;
  color: var(--env-text-on-primary) !important;
  border-radius: 999px !important;
  font-family: var(--env-font-heading) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  padding: 18px 24px !important;
  transition: background 0.2s ease !important;
}
.chf-root .chf-submit:hover:not(:disabled) {
  background: var(--env-action-hover) !important;
}

/* ============================================================
   Mobilmenyn (header-drawern). Länkarna som mini-headings i
   Bagoss H3-skala med footerns underline-animation. Linjen
   ligger på .edrw-label (textspan i header-drawer.liquid) så
   den blir lika bred som ordet — hela raden förblir klickbar.
   Dawns grå hover/active-platta släcks.
   ============================================================ */
.menu-drawer .menu-drawer__menu-item {
  font-family: var(--env-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--env-text-heading);
  text-decoration: none !important;
}
.menu-drawer .menu-drawer__menu-item:hover,
.menu-drawer .menu-drawer__menu-item:active,
.menu-drawer .menu-drawer__menu-item--active,
.menu-drawer .menu-drawer__menu-item--active:hover {
  background-color: transparent !important;
  color: var(--env-text-heading);
  text-decoration: none !important;
}
.menu-drawer .menu-drawer__menu-item .edrw-label {
  position: relative;
  display: inline-block;
}
.menu-drawer .menu-drawer__menu-item .edrw-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-drawer .menu-drawer__menu-item:hover .edrw-label::after,
.menu-drawer .menu-drawer__menu-item--active .edrw-label::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .menu-drawer .menu-drawer__menu-item .edrw-label::after { transition: none; }
}

/* Announcement bar på mobil: raden får ALDRIG brytas (Rasmus hårda
   regel) men den nya copyn är bredare än vad Dawns 30px sidopadding
   lämnar. Paddingen dras ner till 8px (raden är centrerad, marginalen
   syns inte) och storleken skalar bara på riktigt smala telefoner:
   12px behålls från ~390px och uppåt, under det krymper den mjukt
   istället för att spilla över. */
@media screen and (max-width: 749px) {
  .announcement-bar-section .page-width.utility-bar__grid {
    padding-left: 8px;
    padding-right: 8px;
  }
  .announcement-bar,
  .announcement-bar .announcement-bar__message {
    font-size: clamp(9.5px, 3.15vw, 12px);
  }
}

/* Mobilmenyn: täck hela layoutviewporten. Dawn sätter drawerhöjden
   från --viewport-height (window.innerHeight), men på iOS Safari
   slutar innerHeight vid den flytande adressbaren medan sidan målas
   ända ner till skärmkanten bakom pillen — så sidinnehållet skiner
   igenom i en glipa under drawern. 100lvh (large viewport) når hela
   vägen; 100vh är fallback för äldre browsers och beter sig likadant
   på iOS. Innehållet är redan scrollbart via navigation-containerns
   overflow-y: auto, så den extra höjden skymmer inget. */
@media screen and (max-width: 989px) {
  html.js .menu-drawer {
    height: calc(100vh - var(--header-bottom-position, 100%));
    height: calc(100lvh - var(--header-bottom-position, 100%));
  }
}

/* ============================================================
   Fri frakt-baren i Smart Cart (envana-freeship-bar.liquid, 2026-09-01)
   Två lägen via data-state: locked (tom mätare + uppmaning, klickbar
   när .env-subsw finns och scrollar dit) och unlocked (full mätare).
   Fyllnaden är ytfärg (--env-action-primary), aldrig textfärg. */
.env-fsbar { width: 100%; box-sizing: border-box; align-self: stretch; padding: 12px 4px 6px; margin: 0; font-family: var(--env-font-body); text-align: center; }
.env-fsbar--clickable { cursor: pointer; }
.env-fsbar__text { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--env-text-heading); margin-bottom: 10px; }
.env-fsbar--clickable .env-fsbar__text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--env-border-strong); }
.env-fsbar__track { height: 8px; border-radius: 999px; background: var(--env-bg-subtle); border: 1px solid var(--env-border-subtle); overflow: hidden; }
.env-fsbar__fill { height: 100%; width: 0; border-radius: inherit; background: var(--env-action-primary); transition: width .45s ease; }
.env-fsbar__fill:empty { display: block; } /* Dawns base.css doljer div:empty — fyllnaden ar alltid tom */
.env-fsbar[data-state="unlocked"] .env-fsbar__fill { width: 100%; }
.env-subsw--pulse { box-shadow: 0 0 0 3px var(--env-border-brand-soft); transition: box-shadow .3s ease; }

/* Mobil: komprimera bar + produktsektion + banner sa "Byt till prenumeration"
   syns hel ovanfor vecket pa vanlig iPhone (Rasmus beslut 2026-09-02: en
   halvsynlig CTA laser som trasig, inte som scroll-cue). Desktop orord. */
@media screen and (max-width: 749px) {
  .env-fsbar { padding: 8px 4px 4px; }
  .env-fsbar__text { margin-bottom: 8px; }
  .rebuy-cart__flyout div:has(> .env-fsbar) > ul { margin-top: 12px; padding: 6px 0; }
  .env-subsw { margin: 8px 0 28px; padding: 14px 14px 14px; }
  .env-subsw__title { margin-bottom: 8px; }
  .env-subsw__list { margin-bottom: 11px; }
  .env-subsw__list li { line-height: 20px; margin-bottom: 4px; }
}