/* ==========================================================================
   account.css — flowering.dk My Account redesign
   Shared shell + component library + screen layouts.

   Consumes ONLY the custom properties declared in tokens.css (no raw hex/px for
   colour or spacing). Breakpoint literals in @media are the one allowed
   exception (CSS can't read custom props inside media conditions).
   Everything is scoped under .fl-account to avoid Hello/Elementor/Woo bleed.
   BEM naming, fl- prefix. No build step.

   Responsive model (one template, reflowed):
     - rail   (>= 1536px): centred 1536 canvas = 256 .fl-sidebar rail + 1280 .fl-main
     - drawer (1280–1535): rail collapses to an off-canvas drawer (.fl-menubtn
                           toggles it in over the content, with a scrim)
     - mobile (< 1280px):  .fl-appbar + 4-item .fl-tabbar (Oversigt/Ordrer/
                           Kalender/Mere); secondary items in the "Mere" sheet.
   ========================================================================== */

/* ---------------------------------------------------------------- scope/reset */
.fl-account *,
.fl-account *::before,
.fl-account *::after { box-sizing: border-box; }

.fl-account {
  margin: 0;
  background: var(--fl-bg);
  color: var(--fl-ink);
  font-family: var(--fl-font-sans);
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-normal);
  font-weight: var(--fl-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.fl-account h1, .fl-account h2, .fl-account h3,
.fl-account h4, .fl-account p, .fl-account figure { margin: 0; }
.fl-account img, .fl-account svg { display: block; max-width: 100%; }
.fl-account :where(a) { color: inherit; text-decoration: none; }
.fl-account :where(button) { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.fl-account ul { margin: 0; padding: 0; list-style: none; }
.fl-account :focus-visible {
  outline: 2px solid var(--fl-ink);
  outline-offset: 2px;
  border-radius: var(--fl-radius-xs);
}
/* Hello Elementor adds `button:focus { outline: 5px auto -webkit-focus-ring-color }` — it fires on
   pointer focus (click) too. Kill it on non-keyboard focus; the :focus-visible ring above stays for keyboard a11y. */
.fl-account button:focus:not(:focus-visible),
.fl-account [type=button]:focus:not(:focus-visible),
.fl-account [type=submit]:focus:not(:focus-visible) { outline: none; }

.fl-icon { width: 2rem; height: 2rem; flex: none; }
.fl-skiplink {
  position: absolute; left: var(--fl-space-2); top: var(--fl-space-2);
  background: var(--fl-primary); color: var(--fl-primary-ink);
  padding: var(--fl-space-2) var(--fl-space-4); border-radius: var(--fl-radius-sm);
  transform: translateY(-150%); transition: transform var(--fl-transition); z-index: var(--fl-z-modal);
}
.fl-skiplink:focus { transform: translateY(0); }
.fl-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ====================================================================
   LAYOUT SHELL
   ==================================================================== */
.fl-shell { display: grid; grid-template-columns: var(--fl-sidebar-w) 1fr; min-height: 100vh; max-width: var(--fl-canvas-max); margin-inline: auto; }

/* ---- desktop sidebar rail ---- */
.fl-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; display: flex; flex-direction: column;
  background: var(--fl-sidebar);
  border-right: 1px solid var(--fl-border);
  padding: var(--fl-space-6) var(--fl-space-4);
  gap: var(--fl-space-5);
}
.fl-logo { display: inline-flex; align-items: center; justify-content: center; padding: var(--fl-space-1) var(--fl-space-2); }
.fl-logo img { margin-top: -32px; margin-bottom: -24px; height: 120px; width: auto; }

.fl-sidenav { display: flex; flex-direction: column;}
.fl-navitem {
  display: flex; align-items: center; gap: var(--fl-space-3);
  padding: var(--fl-space-4) var(--fl-space-3);
  border-radius: var(--fl-radius-sm);
  color: var(--fl-ink-2); font-size: var(--fl-text-md);
  transition: background var(--fl-transition), color var(--fl-transition);
  font-weight: var(--fl-fw-medium);
}
.fl-navitem .fl-icon { width: 1.8rem; height: 1.8rem; color: var(--fl-ink-2); transition: color var(--fl-transition); }
.fl-navitem:hover { background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-navitem:hover .fl-icon { color: var(--fl-ink); }
.fl-navitem[aria-current="page"] {
  background: var(--fl-nav-active); color: var(--fl-ink);
}
.fl-navitem[aria-current="page"] .fl-icon { color: var(--fl-ink); }

.fl-sidebar__spacer { flex: 1 1 auto; }

/* ---- promo card (sidebar + mobile foot) ---- */
.fl-promo {
  background: var(--fl-surface-warm);
  border: 1px solid var(--fl-border);
  border-radius: 0 0 var(--fl-radius) var(--fl-radius);
}
.fl-promo__media { aspect-ratio: 1 / 1; }
.fl-promo__body { padding: var(--fl-space-4); display: grid; gap: var(--fl-space-2); }
.fl-promo__title { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-promo__text { color: var(--fl-ink-2); font-size: var(--fl-text-base); line-height: var(--fl-lh-normal); }
.fl-promo .fl-btn { margin-top: var(--fl-space-1); }

/* ---- user panel (sidebar foot) ---- */
.fl-userpanel {
  display: flex; align-items: center; gap: var(--fl-space-3);
  padding: var(--fl-space-2); border-radius: var(--fl-radius-sm);
}
.fl-userpanel__meta { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.fl-userpanel__name { font-size: var(--fl-text-base); font-weight: var(--fl-fw-medium); }
.fl-userpanel__mail { font-size: var(--fl-text-base); color: var(--fl-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-userpanel .fl-icon { color: var(--fl-ink-3); margin-left: auto; }

.fl-avatar {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fl-accent); color: var(--fl-ink);
  font-size: var(--fl-text-base); font-weight: var(--fl-fw-medium); letter-spacing: .02em;
}
.fl-avatar--icon { border: solid 2px; background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-userbtn .fl-avatar--icon .fl-icon { width: 2rem; height: 2rem; }

/* ---- main column ---- */
.fl-main { min-width: 0; display: flex; flex-direction: column; }
.fl-main__inner {
  width: 100%; max-width: var(--fl-content-max);
  margin: 0 auto; padding: var(--fl-space-8) var(--fl-space-8) var(--fl-space-12);
  display: flex; flex-direction: column; gap: var(--fl-space-4);
}

/* ---- page topbar (greeting/title + actions) ---- */
.fl-topbar { display: flex; align-items: flex-start; gap: var(--fl-space-4); }
.fl-topbar__titles { display: grid; gap: 2px; }
.fl-pagetitle {
  display: flex; align-items: center; gap: var(--fl-space-2);
  font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold);
  font-size: var(--fl-text-3xl); line-height: var(--fl-lh-tight); letter-spacing: var(--fl-ls-tight);
}
.fl-pagetitle .fl-icon { width: 2.5rem; height: 2.5rem; color: var(--fl-ink); margin-top: -0.4rem; }
.fl-pagesub { color: var(--fl-ink-2); font-size: var(--fl-text-md); }
.fl-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--fl-space-6); }

.fl-iconbtn {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fl-surface); border: 1px solid var(--fl-border); color: var(--fl-ink);
  transition: background var(--fl-transition);
}
.fl-iconbtn:hover { background: var(--fl-surface-warm); }
.fl-iconbtn__dot {
  position: absolute; top: 9px; right: 10px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--fl-primary); border: 2px solid var(--fl-surface);
}
.fl-userbtn { display: flex; align-items: center; gap: var(--fl-space-2);
  padding: 4px 8px 4px 4px; border-radius: var(--fl-radius-pill);
  background: var(--fl-surface); border: 1px solid var(--fl-border); }
.fl-userbtn:hover { background: var(--fl-surface-warm); }
.fl-userbtn .fl-avatar { width: 32px; height: 32px; }
.fl-userbtn .fl-icon { width: 1.5rem; height: 1.5rem; color: var(--fl-ink); }
/* top bars (desktop topbar + mobile appbar): flat icon & account buttons — no pill, no border */
.fl-topbar__actions .fl-iconbtn, .fl-appbar__actions .fl-iconbtn,
.fl-topbar__actions .fl-userbtn, .fl-appbar__actions .fl-userbtn { background: none; border: 0; }

/* ---- sidebar-drawer toggle (hamburger) + scrim — shown only in the 1280–1535 range ---- */
.fl-menubtn {
  display: none; place-items: center; flex: none; margin-top: 2px;
  width: 40px; height: 40px; border-radius: var(--fl-radius-sm);
  background: var(--fl-surface); border: 1px solid var(--fl-border); color: var(--fl-ink);
  transition: background var(--fl-transition);
}
.fl-menubtn:hover { background: var(--fl-surface-warm); }
.fl-sidebar-scrim { display: none; }

/* ---- mobile app bar + tab bar (hidden on desktop) ---- */
.fl-appbar, .fl-tabbar, .fl-meresheet { display: none; }

/* ====================================================================
   COMPONENTS
   ==================================================================== */

/* ---- card ---- */
.fl-card {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow-sm);
}
.fl-card--warm { background: var(--fl-surface-warm); }
.fl-card--flat { box-shadow: none; }
.fl-card__pad { padding: var(--fl-space-6); }
.fl-card__pad--lg { padding: var(--fl-space-8); }

/* ---- section heading ---- */
.fl-section { display: flex; flex-direction: column; gap: var(--fl-space-4); }
.fl-section__head { display: flex; align-items: baseline; gap: var(--fl-space-3); }
.fl-section__title {
  font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold);
  font-size: var(--fl-text-lg); letter-spacing: var(--fl-ls-tight);
}
.fl-section__sub { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-section__link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-section__link .fl-icon { width: 1rem; height: 1rem; }
.fl-section__link:hover { color: var(--fl-ink); }

.fl-eyebrow {
  text-transform: uppercase; letter-spacing: var(--fl-ls-caps);
  font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); color: var(--fl-ink-2);
}

/* ---- buttons ---- */
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fl-space-4);
  padding: var(--fl-space-3) var(--fl-space-5); min-height: 44px;
  border: 1px solid transparent; border-radius: var(--fl-radius-sm);
  font-size: var(--fl-text-base); font-weight: var(--fl-fw-medium); line-height: 1;
  transition: background var(--fl-transition), border-color var(--fl-transition), color var(--fl-transition), transform var(--fl-transition);
}
.fl-btn:active { transform: translateY(1px); }
.fl-btn .fl-icon { width: 1.5rem; height: 1.5rem; }
.fl-btn--primary { background: var(--fl-primary); color: var(--fl-primary-ink); }
.fl-btn--primary:hover { background: var(--fl-primary-hover); }
.fl-btn--accent { background: var(--fl-accent); color: var(--fl-ink); }
.fl-btn--accent:hover { background: var(--fl-accent-hover); }
.fl-btn--ghost { background: var(--fl-surface); color: var(--fl-ink); border-color: var(--fl-border-strong); }
.fl-btn--ghost:hover { background: var(--fl-surface-warm); }
.fl-btn--quiet { background: transparent; color: var(--fl-ink); border-color: var(--fl-border-strong); }
.fl-btn--quiet:hover { background: var(--fl-surface-warm); }
.fl-btn--soft { background: var(--fl-nav-active); color: var(--fl-ink); } /* matches active .fl-navitem */
.fl-btn--soft:hover { background: var(--fl-accent); }
.fl-btn--plain { background: transparent; color: var(--fl-ink); } /* "soft" without the fill */
.fl-btn--plain:hover { background: var(--fl-nav-active); }
.fl-btn--block { width: 100%; }
.fl-btn--sm { min-height: 36px; padding: var(--fl-space-2) var(--fl-space-4); }
.fl-btn__spacer { margin-left: auto; }   /* push trailing icon to the right edge */
/* ---------------------------------------------------------------------------
   Defeat Hello Elementor's GLOBAL parent-theme rule (style.min.css):
     button:hover, button:focus, [type=button]:hover/focus, [type=submit]:hover/focus
       { background-color: #c36; color: #fff; }
   That is [type=button]:hover/:focus = specificity (0,2,0) and ties our element-level button
   rules, so we re-assert INK and BACKGROUND for every account button family at .fl-account
   specificity (≥0,3,0) — winning regardless of stylesheet load order. Focus is shown by the
   .fl-account :focus-visible outline ring, so :focus keeps the RESTING fill; :hover keeps each
   family's DESIGNED hover fill (families with no hover fill stay transparent). The
   high-specificity helpbar/pause CTAs already outrank the parent rule and are left untouched.
   Also covers the legacy a:hover colour bleed onto `<a class="fl-btn">`. */

/* --- ink (kills #fff on hover+focus): broad inherit; dark primary + subtle links re-asserted --- */
.fl-account button:hover, .fl-account button:focus,
.fl-account .fl-btn:hover, .fl-account .fl-btn:focus { color: inherit; }
.fl-account .fl-btn--primary:hover, .fl-account .fl-btn--primary:focus { color: var(--fl-primary-ink); }
.fl-account .fl-link:hover, .fl-account .fl-link:focus { color: var(--fl-ink-2); }

/* --- background (BOTH states): DEFAULT every account button to no fill — this kills #c36 even on
       buttons we don't enumerate (e.g. .fl-calview) — then re-assert each family's resting (:focus)
       and designed (:hover) fill below. The only resting-fill buttons that need a :hover re-assert
       are the active tab/segtab/view buttons (done below); helpbar/pause CTAs already outrank #c36. --- */
.fl-account button:hover, .fl-account button:focus { background-color: transparent; }
.fl-account .fl-btn--primary:focus { background: var(--fl-primary); }
.fl-account .fl-btn--accent:focus { background: var(--fl-accent); }
.fl-account .fl-btn--soft:focus, .fl-account .fl-addbtn:focus { background: var(--fl-nav-active); }
.fl-account .fl-btn--ghost:focus, .fl-account .fl-iconbtn:focus, .fl-account .fl-userbtn:focus,
.fl-account .fl-menubtn:focus, .fl-account .fl-cal__navbtn:focus { background: var(--fl-surface); }
.fl-account .fl-tab.is-active:focus, .fl-account .fl-modaltab.is-active:focus { background: var(--fl-accent); }
.fl-account .fl-segtab.is-active:focus { background: var(--fl-surface); }
.fl-account .fl-topbar__actions .fl-iconbtn:focus, .fl-account .fl-appbar__actions .fl-iconbtn:focus,
.fl-account .fl-topbar__actions .fl-userbtn:focus, .fl-account .fl-appbar__actions .fl-userbtn:focus { background: none; }

/* --- :hover background — re-assert each family's DESIGNED hover fill (everything else stays transparent via the default) --- */
.fl-account .fl-btn--primary:hover { background: var(--fl-primary-hover); }
.fl-account .fl-btn--accent:hover, .fl-account .fl-addbtn:hover { background: var(--fl-accent-hover); }
.fl-account .fl-btn--soft:hover { background: var(--fl-accent); }
.fl-account .fl-btn--plain:hover { background: var(--fl-nav-active); }
.fl-account .fl-btn--ghost:hover, .fl-account .fl-btn--quiet:hover, .fl-account .fl-iconbtn:hover,
.fl-account .fl-userbtn:hover, .fl-account .fl-menubtn:hover, .fl-account .fl-cal__navbtn:hover,
.fl-account .fl-modal__close:hover, .fl-account .fl-daypop__close:hover, .fl-account .fl-eyebtn:hover { background: var(--fl-surface-warm); }
.fl-account .fl-segtab.is-active:hover { background: var(--fl-surface); }
.fl-account .fl-modaltab.is-active:hover, .fl-account .fl-tab.is-active:hover { background: var(--fl-accent); }
.fl-account .fl-calview:hover { color: var(--fl-ink); }                     /* view-switch buttons: subtle ink hover, no fill */
.fl-account .fl-calview.is-active:hover { background: var(--fl-surface); }   /* keep the active view's fill on hover */

/* ---- badge / pill ---- */
.fl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--fl-space-3); border-radius: var(--fl-radius-xs);
  font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); line-height: 1;
  background: var(--fl-surface-warm); color: var(--fl-ink-2);
}
.fl-badge .fl-icon { width: .9rem; height: .9rem; }
.fl-badge--success { background: var(--fl-success-bg); color: var(--fl-success-ink); }

/* ---- icon chip ---- */
.fl-chip {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--fl-radius-sm);
  background: var(--fl-surface-warm); color: var(--fl-ink);
}
.fl-chip--round { border-radius: 50%; }
.fl-chip--accent { background: var(--fl-accent); }
.fl-chip--lg { width: 128px; height: 128px; }
.fl-chip--lg .fl-icon { width: 3.2rem; height: 3.2rem; }

/* ---- icon-led detail rows (label + value) ---- */
.fl-details { display: grid; }
.fl-detail { display: flex; align-items: flex-start; gap: var(--fl-space-3); }
.fl-detail > .fl-icon { width: 1.15rem; height: 1.15rem; color: var(--fl-ink-3); margin-top: 2px; }
.fl-detail__label { color: var(--fl-ink-3); font-size: var(--fl-text-xs); }
.fl-detail__value { font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }

/* ---- info / "did you know" / "important" strip ---- */
.fl-strip {
  display: flex; align-items: flex-start; gap: var(--fl-space-3);
  background: var(--fl-surface-warm);
  border-radius: var(--fl-radius); padding: var(--fl-space-5);
}
.fl-strip__chip { color: var(--fl-ink); }
.fl-strip__body { display: grid; gap: 3px; }
.fl-strip__title { font-weight: var(--fl-fw-medium); font-size: var(--fl-text-sm); }
.fl-strip__text { color: var(--fl-ink-2); font-size: var(--fl-text-sm); line-height: var(--fl-lh-snug); }
.fl-strip__action { margin-left: auto; align-self: center; }

/* ---- placeholder for missing imagery (never a broken <img>) ---- */
.fl-ph {
  display: grid; place-items: center; gap: 6px;
  width: 100%; height: 100%; min-height: 64px;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.012) 10px 20px),
    var(--fl-surface-warm);
  color: var(--fl-ink-3);
}
.fl-ph .fl-icon { width: 1.5rem; height: 1.5rem; opacity: .55; }
.fl-ph__label { font-size: var(--fl-text-2xs); letter-spacing: .03em; text-transform: uppercase; }
.fl-media { overflow: hidden; background: var(--fl-surface-warm); }
.fl-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- hero "Næste levering" banner ---- */
.fl-hero {
  position: relative; overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--fl-surface-warm);
  border-radius: var(--fl-radius-xl);
}
.fl-hero__body {
  position: relative; z-index: 1; height: 100%;
  padding: var(--fl-space-8); display: flex; flex-direction: column;
  justify-content: center; gap: var(--fl-space-3);
}
.fl-hero__date {
  font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold);
  font-size: var(--fl-text-3xl); line-height: var(--fl-lh-tight); letter-spacing: var(--fl-ls-tight);
}
.fl-hero__days { font-size: var(--fl-text-lg); color: var(--fl-ink); }
.fl-hero__text { color: var(--fl-ink-2); font-size: var(--fl-text-base); max-width: 38ch; }
.fl-hero__actions { margin-top: var(--fl-space-3); display: flex; flex-wrap: wrap; gap: var(--fl-space-3); }
.fl-hero__media { position: absolute; inset: 0; z-index: 0; }
.fl-hero__media .fl-media, .fl-hero__media .fl-ph { position: absolute; inset: 0; }

/* ---- quick-action card ---- */
.fl-quick {
  display: flex; flex-direction: column; gap: var(--fl-space-3);
  padding: var(--fl-space-5);
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius); box-shadow: var(--fl-shadow-sm);
  transition: box-shadow var(--fl-transition), transform var(--fl-transition);
}
.fl-quick:hover { box-shadow: var(--fl-shadow); transform: translateY(-2px); }
.fl-quick__title { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-quick__text { color: var(--fl-ink-2); font-size: var(--fl-text-base); line-height: var(--fl-lh-normal); }
.fl-quick__arrow { margin-top: auto; align-self: flex-end; color: var(--fl-ink); } /* bottom-right go-affordance */
.fl-quick__arrow .fl-icon { width: 1.5rem; height: 1.5rem; }

/* ---- add-on row ("Udvalgt til dig") ---- */
.fl-addon { display: flex; align-items: flex-end; gap: var(--fl-space-4); padding: var(--fl-space-3) 0; }
.fl-addon + .fl-addon { border-top: 1px solid var(--fl-border); }
.fl-addon__media { flex: none; width: 90px; height: 90px; }
.fl-addon__body { min-width: 0; flex: 1; margin: auto;}
.fl-addon__title { font-size: var(--fl-text-md); font-weight: var(--fl-fw-bold); }
.fl-addon__text { color: var(--fl-ink-2); font-size: var(--fl-text-xs); line-height: var(--fl-lh-snug); }
.fl-addon__price { font-size: var(--fl-text-md); font-weight: var(--fl-fw-bold); white-space: nowrap; }
.fl-addbtn {
  /* flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: none; color: var(--fl-ink); border: 1px solid currentColor;
  transition: background var(--fl-transition); */
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: var(--fl-radius-pill); background: var(--fl-nav-active); color: var(--fl-ink);
}
.fl-addbtn:hover { background: var(--fl-accent-hover); }
.fl-addbtn .fl-icon { width: 1.5rem; height: 1.5rem; }

/* ---- form fields ---- */
.fl-form { display: grid; gap: var(--fl-space-5); }
.fl-field { display: grid; gap: var(--fl-space-2); }
.fl-label { font-size: var(--fl-text-base); font-weight: var(--fl-fw-bold); }
.fl-inputwrap { position: relative; display: flex; align-items: center; }
.fl-input {
  width: 100%; min-height: 48px; padding: var(--fl-space-3) var(--fl-space-4);
  background: var(--fl-surface); color: var(--fl-ink);
  border: 1px solid var(--fl-border-strong); border-radius: var(--fl-radius-sm);
  font: inherit; font-size: var(--fl-text-base);
  transition: border-color var(--fl-transition), box-shadow var(--fl-transition);
}
.fl-input::placeholder { color: var(--fl-ink-3); }
.fl-input:focus { outline: none; border-color: var(--fl-ink); box-shadow: 0 0 0 3px var(--fl-ring); }
.fl-inputwrap--hasicon .fl-input { padding-right: 46px; }
.fl-eyebtn {
  position: absolute; right: 16px; top: 8px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--fl-radius-xs);
  background: transparent; color: var(--fl-ink-3);
}
.fl-eyebtn:hover { color: var(--fl-ink); background: var(--fl-surface-warm); }
.fl-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--fl-ink-3); font-size: var(--fl-text-sm); }
.fl-hint .fl-icon { width: .95rem; height: .95rem; color: var(--fl-success-ink); }

/* ---- info panel (split icon + copy, used on Skift adgangskode) ---- */
.fl-infopanel { display: flex; align-items: center; gap: var(--fl-space-5); }
.fl-infopanel__body { display: grid; gap: var(--fl-space-1); }
.fl-infopanel__title { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-lg); line-height: var(--fl-lh-snug); }
.fl-infopanel__text { color: var(--fl-ink-2); font-size: var(--fl-text-sm); max-width: 32ch; }

/* small helpers */
.fl-divider { height: 1px; background: var(--fl-border); border: 0; margin: 0; }
.fl-stack { display: grid; gap: var(--fl-space-6); }
.fl-grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--fl-space-6); align-items: start; }

/* ====================================================================
   RESPONSIVE — collapsed sidebar drawer (1280px ≤ width < 1536px)
   Below the 1536 artboard the rail collapses; the .fl-menubtn hamburger
   slides it in over the content, dimmed by .fl-sidebar-scrim.
   ==================================================================== */
@media (min-width: 1280px) and (max-width: 1535.98px) {
  .fl-shell { grid-template-columns: 1fr; }
  .fl-menubtn { display: grid; }
  .fl-sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; width: var(--fl-sidebar-w);
    z-index: var(--fl-z-modal); transform: translateX(-100%);
    transition: transform var(--fl-transition-slow); box-shadow: var(--fl-shadow-lg);
  }
  .fl-shell.is-sidebar-open .fl-sidebar { transform: translateX(0); }
  .fl-sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: var(--fl-z-popover);
    background: var(--fl-scrim); opacity: 0; pointer-events: none;
    transition: opacity var(--fl-transition);
  }
  .fl-shell.is-sidebar-open .fl-sidebar-scrim { opacity: 1; pointer-events: auto; }
}

/* ====================================================================
   RESPONSIVE — mobile shell (< 1280px)
   ==================================================================== */
@media (max-width: 1279.98px) {
  .fl-shell { grid-template-columns: 1fr; }
  .fl-sidebar { display: none; }

  /* mobile app bar: logo + actions */
  .fl-appbar {
    display: flex; align-items: center; gap: var(--fl-space-3);
    padding: var(--fl-space-3) var(--fl-page-pad-mob);
    background: var(--fl-bg);
    position: sticky; top: 0; z-index: var(--fl-z-sticky);
  }
  .fl-appbar .fl-logo { padding: 0; }
  .fl-appbar .fl-logo img { height: 78px; }
  .fl-appbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--fl-space-2); }
  /* account button: bare person icon (no avatar bg), chevron hidden */
  .fl-appbar__actions .fl-userbtn .fl-avatar--icon { background: none; }
  .fl-appbar__actions .fl-userbtn > .fl-icon { display: none; }

  /* 4-item tab bar */
  .fl-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--fl-space-2);
    padding: 0 var(--fl-page-pad-mob) var(--fl-space-2);
    background: var(--fl-bg); position: sticky; top: 52px; z-index: var(--fl-z-sticky);
  }
  .fl-tab {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: var(--fl-space-3) var(--fl-space-1);
    border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
    color: var(--fl-ink); font-size: var(--fl-text-sm);
  }
  .fl-tab .fl-icon { width: 2rem; height: 2rem; }
  .fl-tab[aria-current="page"], .fl-tab.is-active {
    background: var(--fl-accent); color: var(--fl-ink); border-color: transparent; font-weight: var(--fl-fw-medium);
  }

  .fl-main__inner { padding: var(--fl-space-4) var(--fl-page-pad-mob) var(--fl-space-12); gap: var(--fl-space-5); }

  /* topbar: drop the desktop bell/user (they live in the app bar on mobile) */
  .fl-topbar__actions { display: none; }
  /* Oversigt: the greeting lives in the app bar on mobile — hide the greeting topbar */
  [data-page="oversigt"] .fl-topbar { display: none; }
  .fl-pagetitle { font-size: var(--fl-text-xl); }

  .fl-pagesub { font-size: var(--fl-text-sm); }

  /* "Mere" sheet */
  .fl-meresheet {
    position: fixed; inset: 0; z-index: var(--fl-z-modal);
    display: none; align-items: flex-end;
  }
  .fl-meresheet.is-open { display: flex; }
  .fl-meresheet__scrim { position: absolute; inset: 0; background: var(--fl-scrim); }
  .fl-meresheet__panel {
    position: relative; width: 100%;
    background: var(--fl-surface); border-radius: var(--fl-radius-xl) var(--fl-radius-xl) 0 0;
    padding: var(--fl-space-5) var(--fl-page-pad-mob) calc(var(--fl-space-8) + env(safe-area-inset-bottom));
    box-shadow: var(--fl-shadow-lg); display: grid; gap: var(--fl-space-2);
    animation: fl-sheet-up var(--fl-transition-slow) ease-out;
  }
  .fl-meresheet__grip { width: 40px; height: 4px; border-radius: var(--fl-radius-pill);
    background: var(--fl-border-strong); margin: 0 auto var(--fl-space-2); }

  /* component reflows */
  .fl-grid-2 { grid-template-columns: 1fr; }
  .fl-hero { aspect-ratio: auto; }
  .fl-hero__body { height: auto; padding: var(--fl-space-6); justify-content: flex-start; }
  .fl-infopanel { flex-direction: column; align-items: flex-start; gap: var(--fl-space-4); }
  .fl-card__pad, .fl-card__pad--lg { padding: var(--fl-space-5); }
}

@keyframes fl-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* show desktop-only / mobile-only helpers */
.fl-only-mobile { display: none; }
@media (max-width: 1279.98px) {
  .fl-only-desktop { display: none !important; }
  .fl-only-mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-account *, .fl-account *::before, .fl-account *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ====================================================================
   SCREEN — Adresse
   ==================================================================== */
.fl-addresscard {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: var(--fl-space-8);
  padding: var(--fl-space-16) var(--fl-space-8); align-items: center;
}
.fl-addresscard__main { display: flex; align-items: center; gap: var(--fl-space-6); }
.fl-addresscard__info { display: grid; gap: var(--fl-space-4); justify-items: start; }
.fl-addresscard__address {
  display: grid; font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold);
  font-size: var(--fl-text-xl); line-height: 1.5; letter-spacing: var(--fl-ls-tight);
}
.fl-addresscard__country { color: var(--fl-ink-2); font-size: var(--fl-text-base); }
.fl-addresscard__info .fl-badge { margin-top: var(--fl-space-2); }
.fl-addresscard__aside {
  display: grid; gap: var(--fl-space-6); justify-items: start; align-content: center;
  padding-left: var(--fl-space-8); border-left: 1px solid var(--fl-border);
}
.fl-addresscard__hint { color: var(--fl-ink-2); font-size: var(--fl-text-base); line-height: var(--fl-lh-normal); max-width: 260px; }

@media (max-width: 1279.98px) {
  .fl-addresscard { grid-template-columns: 1fr; gap: var(--fl-space-5); padding: var(--fl-space-6); text-align: center; }
  .fl-addresscard__main { flex-direction: column; gap: var(--fl-space-4); }
  .fl-chip--lg {
    width: 96px;
    height: 96px;
}
  .fl-addresscard__info { justify-items: center; }
  .fl-addresscard__aside { 
	border-left: 0; 
	padding-left: 0;
	padding-top: var(--fl-space-4);
	border-top: 1px solid var(--fl-border);
	max-width: none; 
	justify-items: stretch; 
}
  .fl-addresscard__aside .fl-btn { width: 100%; }
  .fl-addresscard__hint { text-align: left; }
}

/* ====================================================================
   SCREEN — Skift adgangskode
   ==================================================================== */
.fl-passcard {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--fl-space-10); padding: var(--fl-space-16); align-items: stretch;
}
.fl-passcard__intro {
  display: flex; align-items: center; gap: var(--fl-space-5);
  border-right: 1px solid var(--fl-border); padding-right: var(--fl-space-10);
}
.fl-passcard__introtext { display: grid; gap: var(--fl-space-2); }
.fl-passcard__title {
  font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold);
  font-size: var(--fl-text-lg); line-height: var(--fl-lh-normal);
}
.fl-passcard__text { color: var(--fl-ink-2); font-size: var(--fl-text-base); max-width: 26ch; line-height: var(--fl-lh-normal);}
.fl-passcard__form { align-self: center; width: 100%; max-width: 420px; }
.fl-passcard__form .fl-btn { margin-top: var(--fl-space-2); }

.fl-strip--note { display: none; }   /* desktop hides this note; mobile shows it */

@media (max-width: 1279.98px) {
  .fl-passcard {
    grid-template-columns: 1fr; gap: var(--fl-space-5);
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  .fl-passcard__intro {
    border-right: 0; padding: var(--fl-space-5);
    background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
  }
  .fl-passcard__title {
    font-size: var(--fl-text-md);
  }
  .fl-passcard__text {
    font-size: var(--fl-text-sm);
  }
  .fl-passcard__form { 
	max-width: none;
    padding: var(--fl-space-5);
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
	gap: var(--fl-space-2);
  }
  .fl-strip--note { display: flex; }
}

/* ====================================================================
   SCREEN — Oversigt
   ==================================================================== */
.fl-oversigt {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--fl-space-6); align-items: start;
}
.fl-oversigt__col { display: grid; gap: var(--fl-space-6); align-content: start; }

/* subscription summary card */
.fl-subcard { padding: var(--fl-space-6); display: grid; gap: var(--fl-space-3); }
.fl-subcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fl-space-3); }
.fl-subcard__title { display: grid; gap: var(--fl-space-1); }
.fl-subcard__name {
  font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold);
  font-size: var(--fl-text-xl); line-height: var(--fl-lh-tight);
}
.fl-subcard__metaline { color: var(--fl-ink-2); font-size: var(--fl-text-base); }
.fl-subcard__price { font-size: var(--fl-text-md); font-weight: var(--fl-fw-medium); }
.fl-subcard__cta { margin-top: var(--fl-space-2); }
.fl-detail__text { display: grid; gap: 1px; }

/* quick actions */
.fl-quickgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fl-space-4); }
.fl-quick__chip {
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: var(--fl-radius-pill); background: var(--fl-nav-active); color: var(--fl-ink);
}
.fl-quick__chip .fl-icon { width: 1.5rem; height: 1.5rem; }

/* handpicked add-ons */
.fl-handpicked { padding: var(--fl-space-6); display: grid; }
.fl-handpicked__head { display: grid; gap: 2px; margin-bottom: var(--fl-space-3); }
.fl-handpicked .fl-addon:first-of-type { border-top: 1px solid var(--fl-border); }
.fl-handpicked .fl-addon:last-of-type { border-bottom: 1px solid var(--fl-border); }
.fl-addon__media.fl-ph { min-height: 0; }
.fl-handpicked__foot { margin-top: var(--fl-space-4); }

/* did you know */
.fl-dyk .fl-strip__action { align-self: center; }
[data-page="kalender"] .fl-dyk .fl-strip__chip { color: var(--fl-clay); }   /* tan leaf on Kalender (p5/p14); Oversigt keeps its own */

@media (max-width: 1279.98px) {
  /* single-column stack in PDF p11 order: hero · subscription · quick · add-ons · did-you-know */
  .fl-oversigt { display: flex; flex-direction: column; gap: var(--fl-space-5); align-items: stretch; }
  .fl-oversigt__col { display: contents; }
  .fl-hero { order: 1; }
  .fl-subcard { order: 2; }
  .fl-quickwrap { order: 3; }
  .fl-handpicked { order: 4; }
  .fl-dyk { order: 5; }

  /* hero (p11): the photo is the full-bleed background — exactly as on desktop
     (.fl-hero__media inherits position:absolute; inset:0 from the base). The whole text+CTA
     block keeps a narrow left width via padding-right on the body, so the right 38% of the
     photo stays clear and un-overlapped — text AND buttons share that column. The hero CTAs
     are scaled down a touch so the Danish labels still fit the narrower column on one line. */
  .fl-hero__body { padding-right: 38%; gap: var(--fl-space-1); }
  .fl-hero__date { font-size: var(--fl-text-lg); }
  .fl-hero__days { font-size: var(--fl-text-md); }
  .fl-hero__text { font-size: var(--fl-text-sm); }
  .fl-hero__actions { flex-direction: column; align-items: stretch; }
  .fl-hero__actions .fl-btn { font-size: var(--fl-text-sm); padding: var(--fl-space-3); gap: var(--fl-space-2); }
  .fl-hero__actions .fl-btn .fl-icon { width: 1.15rem; height: 1.15rem; }

  /* quick actions (p11): compact 2×2 cards — icon, title, trailing arrow; no body copy */
  .fl-quickgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-quick { min-height: 128px; }
  .fl-quick__title { font-size: var(--fl-text-base); }
  .fl-quick__text { display: none; }

  /* "did you know" (p11): centred card with a large round icon on top + full-width CTA */
  .fl-dyk.fl-strip {
    flex-direction: column; align-items: center; text-align: center;
    gap: var(--fl-space-4); padding: var(--fl-space-8) var(--fl-space-6);
  }
  .fl-dyk .fl-strip__chip {
    display: grid; place-items: center; width: 72px; height: 72px;
    border-radius: 50%; background: var(--fl-surface);
  }
  .fl-dyk .fl-strip__chip .fl-icon { width: 2.2rem; height: 2.2rem; }
  .fl-dyk .fl-strip__body { gap: var(--fl-space-2); justify-items: center; }
  .fl-dyk .fl-strip__title { font-family: var(--fl-font-heading); font-size: var(--fl-text-lg); font-weight: var(--fl-fw-bold); }
  .fl-dyk .fl-strip__text { font-size: var(--fl-text-base); max-width: 32ch; }
  .fl-dyk .fl-strip__action { width: 100%; align-self: stretch; }

  /* p11 shows the add-ons footer as a filled CTA, like the other footers (desktop keeps it plain) */
  .fl-handpicked__foot { background: var(--fl-nav-active); }

  /* subscription detail rows (p11): label left, value right-aligned on one line */
  .fl-subcard .fl-detail__text {
    display: flex; flex: 1; gap: var(--fl-space-3);
    justify-content: space-between; align-items: baseline;
  }
  .fl-subcard .fl-detail__value { text-align: right; }
}

/* ====================================================================
   PACKAGE 2 — shared list / order components
   ==================================================================== */
.fl-orders { display: flex; flex-direction: column; gap: var(--fl-space-4); }
.fl-ordercard[hidden] { display: none; }   /* status-tab filter (initTabs): .fl-ordercard sets display:flex, so [hidden] needs this to actually hide */

/* ---- status bar ("Alt er klart") ---- */
.fl-statusbar { display: flex; align-items: center; gap: var(--fl-space-4); padding: var(--fl-space-5) var(--fl-space-6); }
.fl-statusbar__chip {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--fl-surface-warm); color: var(--fl-ink);
}
.fl-statusbar__chip .fl-icon { width: 1.7rem; height: 1.7rem; }
.fl-statusbar__body { display: grid; gap: 2px; }
.fl-statusbar__title { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-statusbar__text { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-statusbar__action { margin-left: auto; }

/* ---- list controls: segment tabs + filter/sort ---- */
.fl-listctl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fl-space-3); }
.fl-segtabs { display: flex; align-items: center; gap: var(--fl-space-1); flex-wrap: wrap; }
.fl-segtab {
  padding: var(--fl-space-2) var(--fl-space-4); min-height: 40px;
  border-radius: var(--fl-radius-xs); border: 1px solid transparent;
  color: var(--fl-ink-2); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium);
  transition: background var(--fl-transition), color var(--fl-transition);
}
.fl-segtab:hover { color: var(--fl-ink); }
.fl-segtab.is-active { background: var(--fl-surface); color: var(--fl-ink); border-color: var(--fl-border); box-shadow: var(--fl-shadow-sm); }
.fl-listctl__tools { display: flex; align-items: center; gap: var(--fl-space-2); }
.fl-listctl__tools .fl-btn .fl-icon { width: 1.15rem; height: 1.15rem; }

/* ---- Ordrer sort dropdown (WP-D) ---- */
.fl-sortmenu { position: relative; }
.fl-sortmenu > summary { list-style: none; cursor: pointer; }
.fl-sortmenu > summary::-webkit-details-marker { display: none; }
.fl-sortmenu > summary::marker { content: ''; }
.fl-sortmenu[open] > summary .fl-icon { transform: rotate(180deg); transition: transform var(--fl-transition); }
.fl-sortmenu__panel {
  position: absolute; right: 0; top: calc(100% + var(--fl-space-2)); z-index: var(--fl-z-popover);
  min-width: 12rem; background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg); box-shadow: var(--fl-shadow-lg);
  padding: var(--fl-space-2); display: grid; gap: var(--fl-space-1);
}
.fl-sortmenu__item {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: var(--fl-space-2) var(--fl-space-3); background: none; border: 0;
  border-radius: var(--fl-radius-sm); cursor: pointer;
  color: var(--fl-ink-2); font-size: var(--fl-text-sm);
  transition: background var(--fl-transition), color var(--fl-transition);
}
.fl-sortmenu__item:hover, .fl-sortmenu__item:focus-visible { background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-sortmenu__item.is-active { background: var(--fl-nav-active); color: var(--fl-ink); font-weight: var(--fl-fw-medium); }

/* ---- order card ---- */
.fl-orderlist { display: flex; flex-direction: column; gap: var(--fl-space-4); }
.fl-ordercard {
  display: grid;
  grid-template-columns: 132px minmax(0, 2.1fr) minmax(0, 2.5fr) minmax(0, 2.4fr) 192px;
  grid-template-areas: "media main date freq act" "media main addr extr act";
  align-items: center; column-gap: var(--fl-space-5); row-gap: var(--fl-space-4); padding: var(--fl-space-5);
}
/* head/details/foot are layout-only wrappers — flatten them so the leaf items join the card grid (desktop p3) */
.fl-ordercard__head, .fl-ordercard__details, .fl-ordercard__foot { display: contents; }
.fl-ordercard__media { grid-area: media; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--fl-radius); }
.fl-ordercard__main { grid-area: main; display: grid; gap: var(--fl-space-1); justify-items: start; align-content: center;
  border-right: 1px solid var(--fl-border); padding-right: var(--fl-space-5); }
.fl-account .fl-ordercard__chev { display: none; }   /* beats .fl-account svg{display:block} reset */
.fl-ordercard__title { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-lg); line-height: var(--fl-lh-tight); }
.fl-ordercard__meta { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-ordercard__price { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); margin-top: 2px; }
.fl-ordercard__details > .fl-detail:nth-child(1) { grid-area: date; }
.fl-ordercard__details > .fl-detail:nth-child(2) { grid-area: addr; }
.fl-ordercard__details > .fl-detail:nth-child(3) { grid-area: freq; }
.fl-ordercard__extras { grid-area: extr; }
.fl-ordercard__actions { grid-area: act; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fl-space-2); align-content: center; }
.fl-ordercard__actions .fl-btn { width: 100%; }
/* Defeat parent-theme/Elementor button bleed: Hello's global `button,[type=button]{white-space:nowrap}`
   (style.css) plus a min-width inflator from the Elementor/Woo layer apply uncontested because .fl-btn
   declares neither — that pushes these fixed-width stacked buttons past the 192px `act` column and spills
   them out of the card (the longer WP-C1/C4 labels "Se detaljer" + "Rediger abonnement" exposed it). Cap the
   inner column (above), neutralise the bleeding min-width, and let the label wrap instead of overflowing.
   Scoped under .fl-account to outrank the element-level parent-theme rule regardless of load order. */
.fl-account .fl-ordercard__actions .fl-btn { min-width: 0; white-space: normal; }

/* detail sub-line + inline link (order card) */
.fl-detail__sub { color: var(--fl-ink-3); font-size: var(--fl-text-xs); }
.fl-detail__sub--ok { color: var(--fl-success-ink); }
.fl-detail__link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  color: var(--fl-ink-2); font-size: var(--fl-text-xs); font-weight: var(--fl-fw-medium);
}
.fl-detail__link .fl-icon { width: .9rem; height: .9rem; }
.fl-detail__link:hover { color: var(--fl-ink); }

/* help footer reuses .fl-strip */
.fl-helpbar .fl-strip__action { align-self: center; }
.fl-helpbar .fl-strip__chip { color: var(--fl-clay); }   /* tan decorative leaf (p3/p12) */

/* ---- mobile (refined in the mobile pass) ---- */
@media (max-width: 1279.98px) {
  .fl-statusbar { padding: var(--fl-space-5); }                 /* stays horizontal (p12) */
  .fl-listctl__tools { width: 100%; justify-content: space-between; }
  .fl-segtabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }

  /* order card → 3 stacked sections (p12): head / 3-col details / extras + stacked buttons */
  .fl-ordercard { display: flex; flex-direction: column; gap: var(--fl-space-4); }
  .fl-ordercard__head, .fl-ordercard__details, .fl-ordercard__foot { display: grid; }   /* undo display:contents */
  .fl-ordercard__media, .fl-ordercard__main, .fl-ordercard__extras, .fl-ordercard__actions,
  .fl-ordercard__details > .fl-detail:nth-child(1),
  .fl-ordercard__details > .fl-detail:nth-child(2),
  .fl-ordercard__details > .fl-detail:nth-child(3) { grid-area: auto; }                  /* drop the desktop areas (match 0,3,0) */
  .fl-ordercard__main { border-right: 0; padding-right: 0; }
  .fl-ordercard__head { width: 100%; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--fl-space-4); }
  .fl-ordercard__media { width: 104px; }   /* p12: image ≈ text-block height, row reads justified */
  .fl-account .fl-ordercard__chev { display: block; }
  .fl-ordercard__chev { width: 1.5rem; height: 1.5rem; color: var(--fl-ink-3); align-self: center; }
  .fl-ordercard__details { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--fl-space-2);
    padding-top: var(--fl-space-4); border-top: 1px solid var(--fl-border); }
  .fl-ordercard__details > .fl-detail { min-width: 0; gap: var(--fl-space-2); }          /* let each column shrink so text wraps inside it */
  .fl-ordercard__details > .fl-detail:nth-child(2),
  .fl-ordercard__details > .fl-detail:nth-child(3) {                                     /* p12: vertical dividers between the 3 columns */
    border-left: 1px solid var(--fl-border); padding-left: var(--fl-space-2); }
  .fl-ordercard__details .fl-detail__text { min-width: 0; overflow-wrap: break-word; }   /* wrap whole words inside the column, no overflow past the divider */
  .fl-ordercard__details .fl-detail__value { font-size: var(--fl-text-xs); }             /* smaller so long words (Nørrebrogade) stay whole (p12) */
  .fl-ordercard__foot { grid-template-columns: minmax(0, 1fr) auto; gap: var(--fl-space-3); align-items: start;
    padding-top: var(--fl-space-4); border-top: 1px solid var(--fl-border); }
  .fl-ordercard__extras { min-width: 0; }                          /* keep extras the larger half (p12) */
  .fl-ordercard__actions { gap: var(--fl-space-2); }
  .fl-ordercard__actions .fl-btn { width: 100%; min-height: 38px;  /* compact stacked buttons (p12) */
    padding: var(--fl-space-2) var(--fl-space-3); font-size: var(--fl-text-sm); }
  .fl-ordercard__actions .fl-btn .fl-icon { width: 1.1rem; height: 1.1rem; }

  /* help footer → chip LEFT of text on row 1, full-width filled button on row 2 (p12) */
  .fl-helpbar { display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "chip body" "action action"; column-gap: var(--fl-space-4); row-gap: var(--fl-space-4); align-items: center; }
  .fl-helpbar .fl-strip__chip { grid-area: chip; align-self: center; }
  .fl-helpbar .fl-strip__chip .fl-icon { width: 2.5rem; height: 2.5rem; }   /* bigger leaf (p12) */
  .fl-helpbar .fl-strip__body { grid-area: body; }
  .fl-account .fl-helpbar .fl-strip__action { grid-area: action; width: 100%; margin-left: 0; min-height: 46px;
    background: var(--fl-accent); border-color: transparent; color: var(--fl-ink); }
  .fl-account .fl-helpbar .fl-strip__action:hover { background: var(--fl-accent-hover); }
}

/* ====================================================================
   PACKAGE 2 — modal chrome + bouquet-size cards
   ==================================================================== */
.fl-modal { position: fixed; inset: 0; z-index: var(--fl-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--fl-space-6); }
.fl-modal[hidden] { display: none; }
.fl-modal__scrim { position: absolute; inset: 0; background: var(--fl-scrim); }
.fl-modal__panel {
  position: relative; width: 100%; max-width: 760px;
  max-height: calc(100dvh - var(--fl-space-10)); overflow: auto;
  background: var(--fl-surface); border-radius: var(--fl-radius-xl); box-shadow: var(--fl-shadow-lg);
}
.fl-modal__head { display: flex; align-items: center; gap: var(--fl-space-3); padding: var(--fl-space-5) var(--fl-space-6) 0; }
.fl-modal__tabs { display: flex; align-items: center; gap: var(--fl-space-2); }
.fl-modaltab {
  padding: var(--fl-space-3) var(--fl-space-5); border-radius: var(--fl-radius-pill);
  color: var(--fl-ink-2); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium);
  transition: background var(--fl-transition), color var(--fl-transition);
}
.fl-modaltab:hover { color: var(--fl-ink); }
.fl-modaltab.is-active { background: var(--fl-accent); color: var(--fl-ink); }
.fl-modal__close { flex: none; margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--fl-ink-2); transition: background var(--fl-transition), color var(--fl-transition); }
.fl-modal__close:hover { background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-modal__close .fl-icon { width: 1.4rem; height: 1.4rem; }
.fl-modal__body { padding: var(--fl-space-5) var(--fl-space-8) var(--fl-space-8); display: grid; gap: var(--fl-space-5); }
.fl-modal__intro { display: grid; gap: 3px; }
.fl-modal__title { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-xl); letter-spacing: var(--fl-ls-tight); }
.fl-modal__sub { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-modal__note { background: var(--fl-surface-warm); margin-top: var(--fl-space-5);}
.fl-modal__note .fl-strip__text { font-size: var(--fl-text-sm); color: var(--fl-ink-2); }
.fl-modal__error { margin-top: var(--fl-space-4); padding: var(--fl-space-2) var(--fl-space-3); border-radius: var(--fl-radius-sm); background: var(--fl-danger-bg); color: var(--fl-danger-ink); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); } /* shown by account.js when a size/frequency save fails */

/* save-in-progress: spinner on the clicked button + lock the modal until the page reloads (account.js sets aria-busy + .fl-modal--busy) */
.fl-modal--busy .fl-modal__body, .fl-modal--busy .fl-modal__foot { pointer-events: none; }
.fl-account .fl-btn[aria-busy="true"] { position: relative; color: transparent; }
.fl-account .fl-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.05em; height: 1.05em;
  border: 2px solid var(--fl-ink); border-top-color: transparent; border-radius: 50%;
  animation: fl-spin .6s linear infinite;
}
.fl-account .fl-btn--primary[aria-busy="true"]::after { border-color: var(--fl-primary-ink); border-top-color: transparent; }
@keyframes fl-spin { to { transform: rotate(360deg); } }

/* size cards */
.fl-sizegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fl-space-4); align-items: stretch; }
.fl-sizecard { display: grid; gap: var(--fl-space-3); grid-template-areas: "badge" "name" "media" "text" "btn"; grid-template-rows: auto auto auto 1fr auto; padding: var(--fl-space-5); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); text-align: center; }
.fl-sizecard__badge { grid-area: badge; }
.fl-sizecard__name { grid-area: name; }
.fl-sizecard__media { grid-area: media; }
.fl-sizecard__text { grid-area: text; }
.fl-sizecard .fl-btn { grid-area: btn; }
.fl-sizecard__badge {
  align-self: center; justify-self: center; display: inline-flex; padding: 4px var(--fl-space-3);
  border-radius: var(--fl-radius-pill); background: var(--fl-accent); color: var(--fl-ink);
  font-size: var(--fl-text-2xs); font-weight: var(--fl-fw-medium); letter-spacing: var(--fl-ls-caps); text-transform: uppercase;
}
.fl-sizecard__name { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-lg); }
.fl-sizecard__media { aspect-ratio: 1 / 1; border-radius: var(--fl-radius); }
.fl-sizecard__text { color: var(--fl-ink-2); font-size: var(--fl-text-xs); line-height: var(--fl-lh-snug); flex: 1 1 auto; }
.fl-sizecard .fl-btn { margin-top: auto; }
.fl-sizecard--current { background: var(--fl-surface-warm); border-color: var(--fl-accent); margin-block: -12px; box-shadow: var(--fl-shadow); }
.fl-sizecard.is-selected { border-color: var(--fl-primary); box-shadow: 0 0 0 1px var(--fl-primary); }

@media (max-width: 1279.98px) {
  .fl-modal { padding: 0; align-items: flex-end; }
  .fl-modal__panel { max-width: none; border-radius: var(--fl-radius-xl) var(--fl-radius-xl) 0 0; max-height: 92dvh; }
  .fl-modal__head { padding: var(--fl-space-4) var(--fl-space-5) 0; }
  .fl-modal__body { padding: var(--fl-space-5); }
  .fl-sizegrid { grid-template-columns: 1fr; }
  .fl-sizecard { grid-template-columns: 36% 1fr; grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "media badge" "media name" "media text" "media btn"; text-align: left; align-items: center; }
  .fl-sizecard__media { aspect-ratio: auto; align-self: stretch; min-height: 132px; }
  .fl-sizecard__badge { justify-self: start; }
  .fl-sizecard--current { margin-block: 0; }
}

/* ====================================================================
   PACKAGE 2 — Kalender (FullCalendar themed) + day popover
   ==================================================================== */
.fl-calwrap { display: flex; flex-direction: column; gap: var(--fl-space-4); }

/* inline arrow link */
.fl-link { display: inline-flex; align-items: center; gap: 5px; color: var(--fl-ink); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }
.fl-link .fl-icon { width: 1rem; height: 1rem; }
.fl-link:hover { color: var(--fl-ink-2); }

/* ---- subscription summary strip ---- */
.fl-calsum { display: flex; align-items: center; gap: var(--fl-space-5); padding: var(--fl-space-5); flex-wrap: wrap; }
.fl-calsum__sub { display: flex; align-items: center; gap: var(--fl-space-4); flex: 1 1 300px; min-width: 0; }
.fl-calsum__media { width: 88px; height: 88px; border-radius: var(--fl-radius); flex: none; }
.fl-calsum__info { display: grid; gap: 2px; min-width: 0; }
.fl-calsum__label { color: var(--fl-ink-3); font-size: var(--fl-text-xs); }
.fl-calsum__name { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-calsum__next { font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }
.fl-calsum__days { color: var(--fl-ink-2); font-size: var(--fl-text-xs); }
.fl-calsum__info .fl-link { margin-top: 4px; }
.fl-calsum__detail { padding-left: var(--fl-space-5); border-left: 1px solid var(--fl-border); align-self: stretch; align-items: flex-start; }
.fl-calsum__cta { margin-left: auto; }

/* ---- calendar card + custom toolbar ---- */
.fl-cal { position: relative; padding: var(--fl-space-5) var(--fl-space-6) var(--fl-space-6); }
.fl-cal__toolbar { display: flex; align-items: center; gap: var(--fl-space-4); margin-bottom: var(--fl-space-4); }
.fl-cal__nav { display: flex; align-items: center; gap: var(--fl-space-2); }
.fl-cal__navbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--fl-radius-sm); border: 1px solid var(--fl-border); background: var(--fl-surface); color: var(--fl-ink); transition: background var(--fl-transition); }
.fl-cal__navbtn:hover { background: var(--fl-surface-warm); }
.fl-cal__navbtn .fl-icon { width: 1.35rem; height: 1.35rem; }
.fl-cal__heading { margin-inline: auto; display: inline-flex; align-items: center; gap: var(--fl-space-2); font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-lg); letter-spacing: var(--fl-ls-tight); }
.fl-cal__heading .fl-icon { width: 1.25rem; height: 1.25rem; color: var(--fl-ink-2); }
.fl-cal__views { display: flex; align-items: center; gap: 4px; background: var(--fl-surface-warm); padding: 4px; border-radius: var(--fl-radius-pill); }
.fl-calview { padding: var(--fl-space-2) var(--fl-space-4); border-radius: var(--fl-radius-pill); color: var(--fl-ink-2); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); transition: background var(--fl-transition), color var(--fl-transition); }
.fl-calview.is-active { background: var(--fl-surface); color: var(--fl-ink); box-shadow: var(--fl-shadow-sm); }

/* ---- FullCalendar theme (maps --fc-* to our tokens) ---- */
.fl-cal__grid {
  --fc-border-color: var(--fl-border);
  --fc-page-bg-color: var(--fl-surface);
  --fc-neutral-bg-color: var(--fl-surface-warm);
  --fc-today-bg-color: transparent;
  --fc-small-font-size: var(--fl-text-xs);
}
.fl-cal__grid .fc { font-family: var(--fl-font-sans); }
.fl-cal__grid .fc-theme-standard td, .fl-cal__grid .fc-theme-standard th { border-color: var(--fl-border); }
.fl-cal__grid .fc-theme-standard .fc-scrollgrid { border-color: var(--fl-border); border-radius: var(--fl-radius); overflow: hidden; }
.fl-cal__grid .fc-col-header-cell { padding: var(--fl-space-2) 0; background: var(--fl-surface); }
.fl-cal__grid .fc-col-header-cell-cushion {
  color: var(--fl-ink-3); font-size: var(--fl-text-2xs); font-weight: var(--fl-fw-medium);
  text-transform: uppercase; letter-spacing: var(--fl-ls-caps); padding: var(--fl-space-2);
}
.fl-cal__grid .fc-daygrid-day-frame { min-height: 104px; padding: 2px; }
.fl-cal__grid .fc-daygrid-day-number { color: var(--fl-ink); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); padding: var(--fl-space-2); }
.fl-cal__grid .fc-day-other .fc-daygrid-day-number { color: var(--fl-ink-3); }
.fl-cal__grid .fc-daygrid-day.fc-day-today { background: var(--fl-surface-warm); }   /* highlight today's cell (outranks FullCalendar's own .fc-day-today) */
.fl-cal__grid .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { font-weight: var(--fl-fw-bold); color: var(--fl-ink); }

/* selected delivery day: dark circle on the number + soft cell wash */
.fl-cal__grid .fc-daygrid-day.fl-cal-selday { background: var(--fl-surface-warm); }
.fl-cal__grid .fc-daygrid-day.fl-cal-selday .fc-daygrid-day-number {
  background: var(--fl-primary); color: var(--fl-primary-ink);
  min-width: 28px; height: 28px; display: inline-grid; place-items: center;
  border-radius: 50%; padding: 0; margin: 6px;
}

/* custom day-grid events */
.fl-cal__grid .fc-daygrid-event { background: none; border: 0; box-shadow: none; margin: 1px var(--fl-space-2); padding: 0; }
.fl-cal__grid .fc-daygrid-event:hover { background: none; }
.fl-cal__grid .fc-daygrid-day-events { margin-top: 2px; }
.fl-cev { display: flex; align-items: center; gap: 6px; font-size: var(--fl-text-xs); color: var(--fl-ink); }
.fl-cev__line { display: flex; align-items: center; gap: 6px; min-width: 0; }   /* dot + label; thumb is a sibling */
.fl-cev__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--fl-ink-3); }
.fl-cev--delivery .fl-cev__dot { background: var(--fl-cal-green); }   /* green delivery dot (p5) */
.fl-cev--extras .fl-cev__dot { background: var(--fl-clay); }          /* tan "extras added" dot (p5) */
.fl-cev--hasextras .fl-cev__dot { background: var(--fl-clay); }       /* a delivery carrying add-ons → tan dot */
.fl-cev--past { color: var(--fl-ink-3); }                             /* delivered bouquet (past) — muted, grey dot, read-only (client 2026-09-28) */
.fl-cev--past .fl-cev__thumb { opacity: .55; }
.fl-cev__text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }  /* item name over the "extras added" note */
.fl-cev__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-cev__extra { font-size: var(--fl-text-2xs); color: var(--fl-clay); font-weight: var(--fl-fw-medium); padding-left: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* aligns under the label, past the dot */
.fl-cev__thumb { width: 24px; height: 24px; border-radius: 5px; overflow: hidden; flex: none; margin-left: auto; }
.fl-cev__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---- calendar review fixes: week-as-daygrid headers, list view, month dropdown ---- */
.fl-wkhead { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.fl-wkhead__day { font-size: var(--fl-text-2xs); letter-spacing: var(--fl-ls-caps); color: var(--fl-ink-2); }
.fl-wkhead__date { font-size: var(--fl-text-sm); font-weight: var(--fl-fw-bold); color: var(--fl-ink); }
/* list view: drop FullCalendar's coloured dot + the "hele dagen" time column (no delivery time) */
.fl-cal__grid .fc-list-event-dot, .fl-cal__grid .fc-list-event-time, .fl-cal__grid .fc-list-event-graphic { display: none; }
.fl-cal__grid .fc-list-event:hover td { background: var(--fl-surface-warm); cursor: pointer; }
.fl-cal__grid .fc-list-day-cushion { background: var(--fl-surface-warm); }
.fl-cal__grid .fc-list-event-title .fl-cev { color: var(--fl-ink); }
.fl-cal__grid .fc-list-event-title .fl-cev--past { color: var(--fl-ink-3); }
.fl-cal__grid .fc-list-event.fl-ev-past:hover td { background: none; cursor: default; }  /* delivered: nothing to click */
/* month/year dropdown on the "Maj 2024 ⌄" heading */
.fl-cal__heading { position: relative; cursor: pointer; }
.fl-calmenu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: var(--fl-z-popover);
  width: 260px; background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow-lg); padding: var(--fl-space-3); display: grid; gap: var(--fl-space-2); }
.fl-calmenu[hidden] { display: none; }
.fl-calmenu__year { display: flex; align-items: center; justify-content: space-between; }
.fl-calmenu__year button { width: 32px; height: 32px; border-radius: var(--fl-radius-sm); color: var(--fl-ink); font-size: var(--fl-text-md); }
.fl-calmenu__year button:hover { background: var(--fl-surface-warm); }
.fl-calmenu__yearlabel { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-calmenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fl-space-1); }
.fl-calmenu__grid button { padding: var(--fl-space-2); border-radius: var(--fl-radius-sm); color: var(--fl-ink-2); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }
.fl-calmenu__grid button:hover { background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-calmenu__grid button.is-active { background: var(--fl-accent); color: var(--fl-ink); }

/* ---- day-detail popover (custom, on top of FullCalendar) ---- */
.fl-daypop {
  position: absolute; top: 72px; right: 28px; width: 304px; z-index: 6;
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg); box-shadow: var(--fl-shadow-lg);
  padding: var(--fl-space-4); display: grid; gap: var(--fl-space-3);
}
.fl-daypop[hidden] { display: none; }
.fl-daypop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fl-space-2); }
.fl-daypop__date { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-daypop__close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--fl-ink-2); transition: background var(--fl-transition), color var(--fl-transition); }
.fl-daypop__close:hover { background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-daypop__close .fl-icon { width: 1.2rem; height: 1.2rem; }
.fl-daypop__bouquet { display: flex; align-items: center; gap: var(--fl-space-3); }
.fl-daypop__media { width: 48px; height: 48px; border-radius: var(--fl-radius-sm); flex: none; }
.fl-daypop__binfo { display: grid; }
.fl-daypop__bname { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-sm); }
.fl-daypop__bmeta { color: var(--fl-ink-2); font-size: var(--fl-text-xs); }
.fl-daypop__orderactions { display: flex; flex-wrap: wrap; gap: var(--fl-space-3); } /* #5 order popover: space the "Skift dato" / "Tilføj ekstra" buttons */
/* client 2026-11-10 #7 a: the order popover's date list (the subscription picker's rows), scrolls inside the popover */
.fl-daypop__datelist { max-height: 16rem; overflow-y: auto; margin-top: var(--fl-space-2); padding-right: var(--fl-space-1); }
.fl-daypop__datelist .fl-bouquetrow__name { font-size: var(--fl-text-base); }
/* client 2026-11-10 #7 b/c: the longer date ("13. november 2026") and order number ("Ordre #Flowering-240130") squeezed
   the head into three lines: date + close on the first line, the order number under them */
.fl-daypop--order .fl-daypop__head { flex-wrap: wrap; row-gap: 2px; }
.fl-daypop--order .fl-daypop__date { flex: 1 1 0; min-width: 0; }
.fl-daypop--order .fl-daypop__tag { order: 3; flex-basis: 100%; }
.fl-daypop__addhead { display: grid; gap: 1px; }
.fl-daypop__addtitle { font-weight: var(--fl-fw-medium); font-size: var(--fl-text-sm); }
.fl-daypop__addsub { color: var(--fl-ink-2); font-size: var(--fl-text-xs); }
.fl-daypop__addons { display: grid; }
.fl-addon--row { padding: var(--fl-space-2) 0; align-items: center; gap: var(--fl-space-3); }
.fl-addon--row + .fl-addon--row { border-top: 1px solid var(--fl-border); }
.fl-addon--row .fl-addon__media { width: 36px; height: 36px; min-height: 0; border-radius: var(--fl-radius-sm); }
.fl-addon--row .fl-addon__body { flex: 1; margin: 0; }
.fl-addon--row .fl-addon__title { font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }
.fl-addon--row .fl-addon__price { font-size: var(--fl-text-sm); }
.fl-addbtn--sm { width: 34px; height: 34px; }
.fl-addbtn--sm .fl-icon { width: 1.1rem; height: 1.1rem; }
.fl-daypop .fl-btn { margin-top: var(--fl-space-1); }

@media (max-width: 1279.98px) {
  /* calsum (p14): subscription card full-width, the two details side-by-side, full-width CTA below */
  .fl-calsum { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-space-4) var(--fl-space-5); align-items: start; }
  .fl-calsum__sub { grid-column: 1 / -1; }
  .fl-calsum__name { font-size: var(--fl-text-sm); }
  .fl-calsum__detail { border-left: 0; padding-left: 0; }
  .fl-calsum__cta { grid-column: 1 / -1; margin-left: 0; width: 100%; }

  /* toolbar (p14): nav-left · month heading centre · view-switch right (one compact row) */
  .fl-cal { padding: var(--fl-space-4); }
  /* one row can't hold nav+heading+views at 390px, so: heading centred on top,
     nav (left) + view-switch (right) on the compact row below */
  .fl-cal__toolbar { display: grid; grid-template-columns: auto auto;
    grid-template-areas: "heading heading" "nav views"; justify-content: space-between;
    align-items: center; gap: var(--fl-space-3) var(--fl-space-2); }
  .fl-cal__heading { grid-area: heading; justify-self: center; margin: 0; width: auto; }
  .fl-cal__nav { grid-area: nav; gap: var(--fl-space-1); }
  .fl-cal__navbtn { width: 32px; height: 32px; }
  .fl-cal__nav .fl-btn--sm { min-height: 32px; padding: var(--fl-space-1) var(--fl-space-3); white-space: nowrap; }
  .fl-cal__views { grid-area: views; padding: 3px; }
  .fl-calview { padding: var(--fl-space-1) var(--fl-space-2); font-size: var(--fl-text-xs); white-space: nowrap; }

  /* shorter empty rows; rows containing events grow to fit (p14) */
  .fl-cal__grid .fc-daygrid-day-frame { min-height: 46px; }
  .fl-cal__grid .fc-daygrid-day-number { font-size: var(--fl-text-xs); padding: var(--fl-space-1) var(--fl-space-2); }
  .fl-cal__grid .fc-daygrid-event { margin: 1px 3px 3px; }

  /* cell event (p14): dot+label on one line, image BELOW it, text as small as possible */
  .fl-cev { flex-direction: column; align-items: flex-start; gap: 3px; }
  .fl-cev__line { width: 100%; gap: 4px; }
  .fl-cev__dot { width: 6px; height: 6px; }
  .fl-cev__label { font-size: 9px; line-height: 1.2; white-space: normal; overflow: visible; }
  .fl-cev__thumb { margin-left: 0; width: 30px; height: 30px; }
  .fl-cev__text { width: 100%; }
  .fl-cev__extra { font-size: 8px; padding-left: 10px; white-space: normal; }

  /* tapped day expands across two cells with a mini-detail card (p14, May 24);
     JS sets top/left/width inline and anchors it to .fl-cal (outside FullCalendar) */
  .fl-cal__grid .fc-daygrid-day.fl-cell-expanded { background: var(--fl-surface-warm); }
  .fl-celpop { position: absolute; z-index: 6;
    display: grid; gap: var(--fl-space-1); padding: var(--fl-space-2); text-align: left;
    background: var(--fl-surface); border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm); box-shadow: var(--fl-shadow-lg); }
  .fl-celpop__label { display: flex; align-items: center; gap: 4px; font-size: var(--fl-text-2xs); font-weight: var(--fl-fw-medium); }
  .fl-celpop__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--fl-cal-green); }
  .fl-celpop--extras .fl-celpop__dot { background: var(--fl-clay); }
  .fl-celpop--hasextras .fl-celpop__dot { background: var(--fl-clay); }
  .fl-celpop__extra { font-size: var(--fl-text-2xs); color: var(--fl-clay); font-weight: var(--fl-fw-medium); padding-left: 10px; }
  .fl-celpop__bouquet { display: flex; align-items: center; gap: var(--fl-space-2); }
  .fl-celpop__media { width: 32px; height: 32px; border-radius: 6px; overflow: hidden; flex: none; }
  .fl-celpop__media img { width: 100%; height: 100%; object-fit: cover; }
  .fl-celpop__name { font-size: var(--fl-text-xs); font-weight: var(--fl-fw-medium); line-height: 1.15; }
  .fl-celpop__link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fl-text-2xs); font-weight: var(--fl-fw-medium); color: var(--fl-ink-2); padding-top: 2px; }
  .fl-celpop__link .fl-icon { width: .85rem; height: .85rem; }

  /* "Vidste du det?" footer (p14 phone 3): leaf LEFT + text on row 1, full-width button below — not the centred p11 treatment */
  [data-page="kalender"] .fl-dyk.fl-strip {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "chip body" "action action";
    column-gap: var(--fl-space-4); row-gap: var(--fl-space-4); align-items: center; text-align: left;
    padding: var(--fl-space-5);
  }
  [data-page="kalender"] .fl-dyk .fl-strip__chip {
    grid-area: chip; width: auto; height: auto; background: none; border-radius: 0; place-items: center;
  }
  [data-page="kalender"] .fl-dyk .fl-strip__chip .fl-icon { width: 2.5rem; height: 2.5rem; }
  [data-page="kalender"] .fl-dyk .fl-strip__body { grid-area: body; justify-items: start; }
  [data-page="kalender"] .fl-dyk .fl-strip__action { grid-area: action; }

  /* day-popover becomes a bottom sheet (p14) */
  .fl-daypop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: var(--fl-z-modal);
    max-height: 85dvh; overflow: auto; border-radius: var(--fl-radius-xl) var(--fl-radius-xl) 0 0; padding-top: var(--fl-space-3); }
  .fl-daypop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: var(--fl-radius-pill);
    background: var(--fl-border-strong); margin: 0 auto var(--fl-space-2); }
}

/* ====================================================================
   PACKAGE 2 — Abonnementer + schedule modal
   ==================================================================== */
.fl-subs { display: flex; flex-direction: column; gap: var(--fl-space-4); }

/* active subscription header card */
.fl-subhead { display: grid; grid-template-columns: 168px minmax(0, 1.5fr) minmax(0, 2.3fr) auto; align-items: center; gap: var(--fl-space-6); padding: var(--fl-space-6); }
.fl-subhead__media { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--fl-radius-lg); }
.fl-subhead__main { display: grid; gap: var(--fl-space-1); justify-items: start; align-content: center; }
.fl-subhead__main .fl-badge { margin-bottom: var(--fl-space-1); }
.fl-subhead__name { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-2xl); line-height: var(--fl-lh-tight); }
.fl-subhead__meta { color: var(--fl-ink-2); font-size: var(--fl-text-base); }
.fl-subhead__freq { font-weight: var(--fl-fw-medium); font-size: var(--fl-text-base); }
.fl-subhead__price { font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); margin-top: var(--fl-space-1); }
.fl-subhead__details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-space-5); padding-left: var(--fl-space-6); border-left: 1px solid var(--fl-border); align-self: stretch; align-content: center; }
.fl-subhead__detcol { display: grid; gap: var(--fl-space-4); align-content: center; }
.fl-subhead__actions { display: grid; gap: var(--fl-space-2); align-content: center; min-width: 220px; }
.fl-subhead__actions .fl-btn { width: 100%; }

/* "Dit abonnement på et øjeblik" */
.fl-subs__mid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--fl-space-4); align-items: stretch; }
.fl-subs__aside { display: flex; flex-direction: column; gap: var(--fl-space-4); }
.fl-glance { padding: var(--fl-space-6); display: grid; gap: var(--fl-space-5); }
.fl-glance__head { display: grid; gap: 2px; }
/* glance: 3 heads in row 1, 3 bodies (image+text+link) in row 2 — head above each body (p6) */
.fl-glancegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--fl-space-4); row-gap: var(--fl-space-3); }
.fl-glancebody { display: grid; gap: var(--fl-space-3); grid-template-rows: auto 1fr auto; grid-template-areas: "media" "text" "link"; }
.fl-glancecard__head { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "icon value"; align-items: center; column-gap: var(--fl-space-3); row-gap: 1px; }
.fl-glancecard__head .fl-icon { grid-area: icon; box-sizing: border-box; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--fl-accent); color: var(--fl-ink-2); }
.fl-glancecard__label { grid-area: label; font-weight: var(--fl-fw-bold); font-size: var(--fl-text-base); }
.fl-glancecard__value { grid-area: value; color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-glancecard__media { grid-area: media; aspect-ratio: 4 / 3; border-radius: var(--fl-radius); }
.fl-glancecard__media.fl-ph { min-height: 0; }
.fl-glancecard__text { grid-area: text; color: var(--fl-ink-2); font-size: var(--fl-text-xs); line-height: var(--fl-lh-snug); }
.fl-glancecard__link { grid-area: link; font-size: var(--fl-text-sm); align-self: start; }
.fl-glance__more { margin-top: var(--fl-space-1); }

/* upcoming deliveries */
.fl-uplist { padding: var(--fl-space-6); display: grid; gap: var(--fl-space-1); }
.fl-uplist__head { margin-bottom: var(--fl-space-2); }
.fl-uprow { display: flex; align-items: center; gap: var(--fl-space-3); padding: var(--fl-space-3) 0; }
.fl-uprow + .fl-uprow { border-top: 1px solid var(--fl-border); }
.fl-uprow__media { width: 48px; height: 48px; border-radius: var(--fl-radius-sm); flex: none; }
.fl-uprow__info { display: grid; gap: 1px; flex: 1; min-width: 0; }
.fl-uprow__date { font-weight: var(--fl-fw-medium); font-size: var(--fl-text-sm); }
.fl-uprow__meta { color: var(--fl-ink-2); font-size: var(--fl-text-xs); }
.fl-uplist__foot { margin-top: var(--fl-space-3); }

/* "Har du brug for en pause?" */
.fl-pausecard {
  margin-top: auto;                                  /* aligns the card's bottom with the glance card (aside is stretched) */
  display: grid; grid-template-columns: auto 1fr; gap: var(--fl-space-2) var(--fl-space-5);
  grid-template-areas: "chip title" "chip text" "chip button"; align-items: start;
  padding: var(--fl-space-6);
}
.fl-pausecard__chip { grid-area: chip; align-self: center; display: grid; place-items: center; color: var(--fl-ink-3); }
.fl-pausecard__chip .fl-icon { width: 2.6rem; height: 2.6rem; }
.fl-pausecard__title { grid-area: title; font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-lg); }
.fl-pausecard__text { grid-area: text; color: var(--fl-ink-2); font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); }
.fl-pausecard .fl-btn { grid-area: button; justify-self: start; margin-top: var(--fl-space-2); }

/* schedule modal: heading + footer + frequency cards */
.fl-modal__panel--narrow { max-width: 640px; }
.fl-modal__heading { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-xl); letter-spacing: var(--fl-ls-tight); }
.fl-modal__foot { display: flex; justify-content: flex-end; gap: var(--fl-space-3); padding: 0 var(--fl-space-8) var(--fl-space-6); }
.fl-freqgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fl-space-4); }
.fl-freqcard { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--fl-space-2); grid-template-areas: "icon" "name" "text" "radio"; padding: var(--fl-space-5) var(--fl-space-4); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg); cursor: pointer; transition: border-color var(--fl-transition), background var(--fl-transition); }
.fl-freqcard__icon { grid-area: icon; }
.fl-freqcard__name { grid-area: name; }
.fl-freqcard__text { grid-area: text; }
.fl-freqcard .fl-radio { grid-area: radio; }
.fl-freqcard:has(.fl-freqcard__radio:checked) { border-color: var(--fl-accent); background: var(--fl-surface-warm); }
.fl-freqcard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-freqcard:has(.fl-freqcard__radio:checked) .fl-freqcard__icon { background: var(--fl-accent); }
.fl-freqcard__icon .fl-icon { width: 1.4rem; height: 1.4rem; }
.fl-freqcard__name { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-freqcard__text { color: var(--fl-ink-2); font-size: var(--fl-text-xs); line-height: var(--fl-lh-snug); flex: 1 1 auto; }
.fl-freqcard__badge { position: absolute; top: var(--fl-space-1); right: var(--fl-space-1); padding: 3px var(--fl-space-2); border-radius: var(--fl-radius-xs); background: var(--fl-accent); color: var(--fl-ink); font-size: var(--fl-text-2xs); font-weight: var(--fl-fw-medium); }
.fl-freqcard__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fl-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fl-border-strong); display: grid; place-items: center; margin-top: var(--fl-space-1); }
.fl-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fl-primary); transform: scale(0); transition: transform var(--fl-transition); }
.fl-freqcard__radio:checked + .fl-radio { border-color: var(--fl-primary); }
.fl-freqcard__radio:checked + .fl-radio::after { transform: scale(1); }
.fl-freqcard__radio:focus-visible + .fl-radio { outline: 2px solid var(--fl-ink); outline-offset: 2px; }

@media (max-width: 1279.98px) {
  .fl-subhead { grid-template-columns: 96px 1fr; }
  /* shrink the main lines + line-heights so the added frequency row doesn't grow the card (p15) */
  .fl-subhead__main { gap: 1px; line-height: 1.2; }
  .fl-subhead__main .fl-badge { margin-bottom: 2px; }
  .fl-subhead__name { font-size: var(--fl-text-lg); line-height: var(--fl-lh-tight); }
  .fl-subhead__meta { font-size: var(--fl-text-sm); line-height: 1.2; }
  .fl-subhead__freq { font-size: var(--fl-text-sm); line-height: 1.2; }
  .fl-subhead__price { font-size: var(--fl-text-base); line-height: 1.2; margin-top: 2px; }
  .fl-subhead__details, .fl-subhead__actions { grid-column: 1 / -1; border-left: 0; padding-left: 0; min-width: 0; }
  /* details: 2×2 — detcols flattened for LAYOUT via display:contents so the two top details
     share a row height; but selectors must target .detcol > .fl-detail (display:contents does
     NOT flatten the DOM), and the dividers live on the .fl-detail (the detcol box is gone). */
  .fl-subhead__details { border-top: 1px solid var(--fl-border); padding-top: var(--fl-space-2); gap: 0;
    grid-template-rows: auto auto; grid-auto-flow: column; }
  .fl-subhead__detcol { display: contents; }
  .fl-subhead__detcol > .fl-detail { padding: var(--fl-space-4) 0; }
  .fl-subhead__detcol:first-child > .fl-detail { padding-right: var(--fl-space-5); }                    /* left column */
  .fl-subhead__detcol:last-child > .fl-detail { border-left: 1px solid var(--fl-border); padding-left: var(--fl-space-5); }   /* vertical divider */
  .fl-subhead__detcol > .fl-detail:nth-child(2) { border-top: 1px solid var(--fl-border); }             /* horizontal divider (bottom row) */
  .fl-subs__mid { grid-template-columns: 1fr; }
  /* pause card → dyk-style: tan leaf LEFT + text, full-width button below (p15) */
  .fl-pausecard { margin-top: 0; grid-template-areas: "chip title" "chip text" "button button"; column-gap: var(--fl-space-4); row-gap: 3px; align-items: center; }
  .fl-pausecard__chip { align-self: center; color: var(--fl-clay); }
  .fl-pausecard__chip .fl-icon { width: 2.5rem; height: 2.5rem; }
  .fl-pausecard__text { font-size: var(--fl-text-base); }                                  /* match the help-footer text size */
  .fl-account .fl-pausecard .fl-btn { width: 100%; min-height: 46px; margin-top: var(--fl-space-3);
    background: var(--fl-accent); border-color: transparent; color: var(--fl-ink); }       /* same filled button as the help footer */
  .fl-account .fl-pausecard .fl-btn:hover { background: var(--fl-accent-hover); }
  /* help footer heading matches the dyk callout (p15) */
  .fl-helpbar .fl-strip__title { font-family: var(--fl-font-heading); font-size: var(--fl-text-lg); font-weight: var(--fl-fw-bold); }
  .fl-helpbar .fl-strip__text { font-size: var(--fl-text-base); }
  /* glance (p15): 3 heads in the top row, each body a full-width image+text card below */
  .fl-glancegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none;
    column-gap: var(--fl-space-2); row-gap: var(--fl-space-3); }
  /* smaller circle + icon + text so the 3 heads balance in the narrow mobile columns (p15) */
  .fl-glancecard__head { column-gap: var(--fl-space-2); }
  .fl-glancecard__head .fl-icon { width: 28px; height: 28px; padding: 6px; }
  .fl-glancecard__label { font-size: var(--fl-text-xs); }
  .fl-glancecard__value { font-size: var(--fl-text-xs); }
  .fl-glancebody { grid-column: 1 / -1; grid-template-columns: 38% 1fr; grid-template-rows: auto auto;
    grid-template-areas: "media text" "media link"; column-gap: var(--fl-space-4); align-items: center; }
  .fl-glancecard__media { align-self: stretch; min-height: 88px; aspect-ratio: auto; }
  .fl-freqgrid { grid-template-columns: 1fr; }
  .fl-freqcard { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto;
    grid-template-areas: "icon badge radio" "icon name radio" "icon text radio";
    justify-items: start; text-align: left; align-items: center; gap: var(--fl-space-1) var(--fl-space-4); padding: var(--fl-space-4); }
  .fl-freqcard__icon { align-self: center; }
  .fl-freqcard .fl-radio { align-self: center; margin-top: 0; }
  .fl-freqcard__badge { position: static; grid-area: badge; justify-self: start; }
  .fl-modal__foot { padding: 0 var(--fl-space-5) var(--fl-space-5); }
}

/* ====================================================================
   PACKAGE 2 — Skift buket (bouquet switch) panel + tabbed modal views
   ==================================================================== */
.fl-modal__view[hidden] { display: none; }
.fl-modal__foot[hidden] { display: none; }   /* .fl-modal__foot sets display:flex, so [hidden] needs this to actually hide */

/* tabbed modal keeps a FIXED height across tabs; the body scrolls (head + foot stay pinned) */
.fl-modal__panel--tabbed { height: min(688px, calc(100dvh - var(--fl-space-10))); overflow: hidden; display: flex; flex-direction: column; }
.fl-modal__panel--tabbed .fl-modal__head { flex: none; }
.fl-modal__panel--tabbed .fl-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.fl-modal__panel--tabbed .fl-modal__foot { flex: none; }

/* scrollable bouquet list — thumbnail rows (mirrors the FSM product list) */
.fl-bouquetlist { display: flex; flex-direction: column; gap: var(--fl-space-2); margin-top: var(--fl-space-4); }
.fl-bouquetrow {
  position: relative; display: flex; align-items: center; gap: var(--fl-space-3);
  padding: var(--fl-space-2) var(--fl-space-3); border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
  cursor: pointer; transition: border-color var(--fl-transition), background var(--fl-transition);
}
.fl-bouquetrow:has(.fl-bouquetrow__radio:checked) { border-color: var(--fl-accent); background: var(--fl-surface-warm); }
.fl-bouquetrow--current { background: var(--fl-surface-warm); border-color: var(--fl-accent); cursor: default; }
.fl-bouquetrow__media { width: 56px; height: 56px; flex: none; border-radius: var(--fl-radius-sm); }
.fl-bouquetrow__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.fl-bouquetrow__name { font-family: var(--fl-font-heading); font-weight: var(--fl-fw-bold); font-size: var(--fl-text-md); }
.fl-bouquetrow__price { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-bouquetrow__delta { flex: none; font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }
.fl-bouquetrow__delta--up { color: var(--fl-ink); }
.fl-bouquetrow__delta--down { color: var(--fl-success-ink); }
.fl-bouquetrow__flag { flex: none; }
.fl-bouquetrow__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fl-bouquetrow .fl-radio { flex: none; margin: 0; }
.fl-bouquetrow__radio:checked + .fl-radio { border-color: var(--fl-primary); }
.fl-bouquetrow__radio:checked + .fl-radio::after { transform: scale(1); }

/* split foot — price-delta on the left, actions on the right */
.fl-modal__foot--split { justify-content: space-between; align-items: center; gap: var(--fl-space-4); }
.fl-modal__delta { font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); color: var(--fl-ink); }
.fl-modal__footactions { display: flex; gap: var(--fl-space-3); }

@media (max-width: 1279.98px) {
  .fl-modal__foot--split { flex-wrap: wrap; }
  .fl-modal__delta { flex: 1 1 100%; }
  .fl-modal__footactions { flex: 1 1 100%; }
  .fl-modal__footactions .fl-btn { flex: 1; }
}

/* ====================================================================
   PACKAGE 3 — order-detail modal summary (WP-C1)
   ==================================================================== */
.fl-ordersum { display: flex; flex-direction: column; gap: var(--fl-space-2); margin: var(--fl-space-3) 0; }
.fl-ordersum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fl-space-3); }
.fl-ordersum__name { color: var(--fl-ink); }
.fl-ordersum__qty { color: var(--fl-ink-2); font-size: var(--fl-text-sm); margin-left: auto; margin-right: var(--fl-space-3); white-space: nowrap; }
.fl-ordersum__amt { color: var(--fl-ink); white-space: nowrap; }
.fl-ordersum__row--sep { border-top: 1px solid var(--fl-border); padding-top: var(--fl-space-2); margin-top: var(--fl-space-1); }
.fl-ordersum__row--total { font-weight: var(--fl-fw-bold); }

/* mobile "Se detaljer" chevron button — mirrors .fl-ordercard__chev's own responsive
   visibility (hidden on desktop/drawer, shown at the mobile breakpoint, see :819). */
.fl-ordercard__chev-btn { display: none; }

@media (max-width: 1279.98px) {
  .fl-ordercard__chev-btn { display: block; }
}

/* ---- Account dropdown menu (WP-H) ---- */
.fl-usermenu { position: relative; }
.fl-usermenu > summary { list-style: none; cursor: pointer; }
.fl-usermenu > summary::-webkit-details-marker { display: none; }
.fl-usermenu > summary::marker { content: ''; }
.fl-usermenu[open] > summary > .fl-icon:last-child { transform: rotate(180deg); transition: transform var(--fl-transition); }
.fl-usermenu__panel {
  position: absolute; right: 0; top: calc(100% + var(--fl-space-2)); z-index: var(--fl-z-popover);
  min-width: 12rem; background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg); box-shadow: var(--fl-shadow-lg);
  padding: var(--fl-space-2); display: grid; gap: var(--fl-space-1);
}
.fl-usermenu--up .fl-usermenu__panel { top: auto; bottom: calc(100% + var(--fl-space-2)); left: 0; right: auto; }
.fl-usermenu__item {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: var(--fl-space-2) var(--fl-space-3); border-radius: var(--fl-radius-sm);
  color: var(--fl-ink-2); font-size: var(--fl-text-sm); text-decoration: none;
  transition: background var(--fl-transition), color var(--fl-transition);
}
.fl-usermenu__item:hover, .fl-usermenu__item:focus-visible { background: var(--fl-surface-warm); color: var(--fl-ink); }

/* ====================================================================
   WP-B1 — add-on "+" success toast (host + card + Fortryd action + motion)
   ==================================================================== */
.fl-toasts {
  position: fixed; right: var(--fl-space-6); bottom: var(--fl-space-6); z-index: var(--fl-z-popover);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--fl-space-2);
  pointer-events: none; /* the host itself never blocks the page; each toast re-enables it */
}
.fl-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--fl-space-4);
  max-width: 360px;
  padding: var(--fl-space-3) var(--fl-space-4);
  background: var(--fl-surface); color: var(--fl-ink);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow-lg);
  opacity: 0; transform: translateY(var(--fl-space-2));
  transition: opacity var(--fl-transition-slow), transform var(--fl-transition-slow);
}
.fl-toast.is-visible { opacity: 1; transform: translateY(0); }
.fl-toast.is-leaving { opacity: 0; transform: translateY(var(--fl-space-2)); }
.fl-toast__msg { margin: 0; font-size: var(--fl-text-sm); line-height: var(--fl-lh-snug); }
.fl-toast__action {
  flex: none; font: inherit; font-weight: var(--fl-fw-medium); font-size: var(--fl-text-sm);
  color: var(--fl-ink); background: transparent; border: 0; border-radius: var(--fl-radius-xs);
  padding: var(--fl-space-1) var(--fl-space-2); cursor: pointer;
  transition: background var(--fl-transition), color var(--fl-transition);
}
.fl-toast__action:hover { background: var(--fl-nav-active); }

/* ====================================================================
   WP-3b — calendar: hand cursor only on clickable (next-delivery) events
   (calendar.js adds .fl-ev-clickable via eventClassNames; other/future
   deliveries keep the default arrow so "looks clickable" matches "is clickable")
   ==================================================================== */
.fl-cal .fl-ev-clickable { cursor: pointer; }

/* ====================================================================
   WP-1 — "Udvalgt til dig" which-delivery picker (2+ subscriptions).
   position/top/left set by account.js from the clicked "+"; hidden by [hidden].
   ==================================================================== */
.fl-subpicker {
  position: fixed; z-index: var(--fl-z-popover);
  min-width: 15rem; max-width: min(20rem, calc(100vw - 16px));
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg); box-shadow: var(--fl-shadow-lg);
  padding: var(--fl-space-3);
}
.fl-subpicker__title { margin: 0 0 var(--fl-space-2); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); color: var(--fl-ink-2); }
.fl-subpicker__list { display: grid; gap: var(--fl-space-1); }
.fl-subpicker__opt {
  display: grid; gap: 1px; width: 100%; text-align: left; font: inherit;
  padding: var(--fl-space-2) var(--fl-space-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--fl-radius-sm);
  cursor: pointer; transition: background var(--fl-transition), border-color var(--fl-transition);
}
.fl-subpicker__opt:hover, .fl-subpicker__opt:focus-visible { background: var(--fl-surface-warm); border-color: var(--fl-border); }
.fl-subpicker__name { font-weight: var(--fl-fw-medium); color: var(--fl-ink); }
.fl-subpicker__when { font-size: var(--fl-text-sm); color: var(--fl-ink-2); }
/* N3 F3: a business account can have dozens of targets — the list scrolls instead of running off-screen. */
.fl-subpicker__list { max-height: min(60vh, 24rem); overflow-y: auto; }

/* ====================================================================
   WP-2 — "X" to remove an add-on from the next delivery (extras list)
   ==================================================================== */
/* the row is display:flex, so the UA [hidden] rule loses the cascade — restore it so
   account.js's optimistic row.hidden actually hides the row (same trap as .fl-ordercard[hidden]). */
.fl-ordersum__row[hidden] { display: none; }
.fl-ordersum__row:has(.fl-extra-remove) { align-items: center; }
.fl-extra-remove {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; margin-left: var(--fl-space-2);
  color: var(--fl-ink-2); background: transparent; border: 0; border-radius: var(--fl-radius-xs);
  cursor: pointer; transition: background var(--fl-transition), color var(--fl-transition);
}
.fl-extra-remove:hover, .fl-extra-remove:focus-visible { background: var(--fl-nav-active); color: var(--fl-ink); }
.fl-extra-remove .fl-icon { width: 14px; height: 14px; }

@media (max-width: 1279.98px) {
  /* bottom-centre, full-bleed within the page gutter — above the mobile appbar/tabbar
     (both sticky at the top; the z-index also keeps toasts above the "Mere" sheet's own bar) */
  .fl-toasts {
    left: var(--fl-page-pad-mob); right: var(--fl-page-pad-mob); bottom: var(--fl-space-4);
    align-items: center;
  }
  .fl-toast { width: 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-toast { transition: opacity var(--fl-transition); transform: none; }
  .fl-toast.is-visible, .fl-toast.is-leaving { transform: none; }
}

/* ====================================================================
   WP-A — status panel (pending-action warn variant + "Se alle" link)
   ==================================================================== */
.fl-statuspanel { display: grid; gap: var(--fl-space-3); }
.fl-statusbar--warn .fl-statusbar__chip { background: var(--fl-accent); color: var(--fl-ink); }
.fl-statusbar__more {
  display: flex; align-items: center; justify-content: center; gap: var(--fl-space-1);
  padding: var(--fl-space-2); color: var(--fl-ink-2); font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium);
  text-decoration: none; transition: color var(--fl-transition);
}
.fl-statusbar__more:hover, .fl-statusbar__more:focus-visible { color: var(--fl-ink); }
.fl-statusbar__more .fl-icon { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------------------
   WooCommerce edit-address form (Adresse → "Rediger …"). form-edit-address.php
   is the WC default template (not overridden), so its markup had no styling —
   fields touched with no vertical rhythm and the save button rendered as bare
   text. Style it to match our account forms: fields mirror .fl-field/.fl-input,
   the save button mirrors .fl-btn--accent (same as the address card's "Rediger"
   buttons). Scoped to .fl-account, tokens only. Shipping + billing share this.
--------------------------------------------------------------------------- */
.fl-account .woocommerce-address-fields {
  background: var(--fl-surface);
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow);
  padding: var(--fl-space-5);
}
/* single-column field stack — neutralise WC's float-based first/last columns */
.fl-account .woocommerce-address-fields__field-wrapper {
  display: grid; gap: var(--fl-space-4);
}
.fl-account .woocommerce-address-fields .form-row {
  float: none; width: 100%; margin: 0; padding: 0;
  display: grid; gap: var(--fl-space-2);
}
.fl-account .woocommerce-address-fields label {
  font-size: var(--fl-text-base); font-weight: var(--fl-fw-bold); color: var(--fl-ink);
}
.fl-account .woocommerce-address-fields .input-text,
.fl-account .woocommerce-address-fields input[type="text"],
.fl-account .woocommerce-address-fields input[type="tel"],
.fl-account .woocommerce-address-fields input[type="email"],
.fl-account .woocommerce-address-fields input[type="number"],
.fl-account .woocommerce-address-fields select,
.fl-account .woocommerce-address-fields textarea {
  width: 100%; min-height: 48px;
  padding: var(--fl-space-3) var(--fl-space-4);
  background: var(--fl-surface); color: var(--fl-ink);
  border: 1px solid var(--fl-border-strong); border-radius: var(--fl-radius-sm);
  font: inherit; font-size: var(--fl-text-base);
  transition: border-color var(--fl-transition), box-shadow var(--fl-transition);
}
.fl-account .woocommerce-address-fields .input-text:focus,
.fl-account .woocommerce-address-fields select:focus,
.fl-account .woocommerce-address-fields textarea:focus {
  outline: none; border-color: var(--fl-ink); box-shadow: 0 0 0 3px var(--fl-ring);
}
/* country/state Select2, when WC's country-select script is active */
.fl-account .woocommerce-address-fields .select2-container--default .select2-selection--single {
  min-height: 48px; display: flex; align-items: center;
  border: 1px solid var(--fl-border-strong); border-radius: var(--fl-radius-sm);
}
/* Save button — mirror .fl-btn--accent; re-state hover/focus to defeat Hello's
   global [type=submit]:hover/:focus { background:#c36; color:#fff } bleed. */
.fl-account .woocommerce-address-fields button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: var(--fl-space-4);
  padding: var(--fl-space-3) var(--fl-space-5);
  border: 1px solid transparent; border-radius: var(--fl-radius-sm);
  font-size: var(--fl-text-base); font-weight: var(--fl-fw-medium); line-height: 1;
  background: var(--fl-accent); color: var(--fl-ink);
  transition: background var(--fl-transition);
}
.fl-account .woocommerce-address-fields button:hover,
.fl-account .woocommerce-address-fields button:focus {
  background: var(--fl-accent-hover); color: var(--fl-ink); border-color: transparent;
}

/* Tabbed "Rediger abonnement" modal: each view stacked intro + content with no gap,
   so the size grid's popped .fl-sizecard--current (margin-block:-12px) overlapped the
   intro. Give the view a gap (content classes carry no top margin, so nothing double-
   spaces). [hidden] keeps higher specificity, so hidden views stay hidden. QA fix. */
.fl-modal__view { display: grid; gap: var(--fl-space-5); align-content: start; }

/* ====================================================================
   Client mobile QA (2026-09-04)
   ==================================================================== */

/* #1 — modal pop-ups clipped on the left on mobile. .fl-modal centers its panel
   (justify-content:center); without min-width:0 the panel's flex auto-minimum is its
   min-content width, which the non-shrinking 3-tab pill row pushes past a phone
   viewport → the panel is floored to that width and centred → the left edge lands
   off-screen and unreachable. min-width:0 lets the panel be exactly its 100% basis
   (= viewport). Covers every .fl-modal (size / skip / pause). */
.fl-modal__panel { min-width: 0; }

@media (max-width: 1279.98px) {
  /* Scale the pills down (compact padding + gap + one step smaller text) so all three fit the row on
     a phone — measured against the real PolySans metrics to fit iPhone mini/SE (375px) and up with
     margin. The strip still scrolls as a safety net on anything narrower, and the close button stays
     pinned (it's outside .fl-modal__tabs). */
  .fl-modal__tabs { flex: 1 1 auto; min-width: 0; gap: var(--fl-space-1); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .fl-modal__tabs::-webkit-scrollbar { display: none; }
  .fl-modaltab { flex: none; white-space: nowrap; padding: var(--fl-space-2); font-size: var(--fl-text-xs); }
}

/* #2 — added add-ons must show under "Tilvalg" immediately. The extras list is wrapped
   in .fl-extras[data-fl-extras-sub] so account.js can re-render it after an add/remove.
   display:contents keeps the label + rows as direct grid/flex children of the card /
   day-popover — the wrapper adds a JS hook without changing layout or spacing. */
.fl-extras { display: contents; }

/* ====================================================================
   N3 F3 (client 2026-10-13) — many subscriptions: compact rows on Abonnementer + pager
   ==================================================================== */
.fl-uprow > .fl-badge, .fl-uprow > .fl-link { flex: none; }
.fl-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--fl-space-3); margin-top: var(--fl-space-3); }
.fl-pager__status { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
@media (max-width: 1279.98px) {
  .fl-subcard__more { order: 2; } /* Oversigt mobile stack: right after the subscription cards (same order slot) */
}

/* ====================================================================
   #9b (client 2026-10-13) — a cutoff-locked delivery is shown before the click
   ==================================================================== */
.fl-lockhint { display: block; font-size: var(--fl-text-sm); color: var(--fl-ink-2); line-height: var(--fl-lh-snug); }
.fl-hero .fl-lockhint { margin-top: var(--fl-space-2); color: inherit; }
.fl-account .fl-addbtn[data-fl-locked], .fl-account .fl-btn[data-fl-locked], .fl-subpicker__opt:disabled { opacity: .5; cursor: not-allowed; }
.fl-subpicker__opt:disabled:hover { background: transparent; border-color: transparent; }
.fl-account .fl-addbtn[data-fl-locked]:hover { background: var(--fl-nav-active); } /* keeps its resting fill: nothing to click */

/* ====================================================================
   Fonts + link colour (client 2026-10-13)
   ==================================================================== */
/* Bold = the real PolySans Bulky face (fonts.css); never a faux bold of Neutral. */
.fl-account { font-synthesis: none; }
/* "Opgrader abonnement" turned blue once visited: Hello / the Elementor kit colour a:visited / a:hover above
   `.fl-account :where(a)`. Re-assert each link family's own colours for the visited state (and its hover). */
.fl-account a.fl-quick:is(:link, :visited, :hover, :focus, :active) { color: var(--fl-ink); }
.fl-account a.fl-link:visited { color: var(--fl-ink); }
.fl-account a.fl-link:visited:is(:hover, :focus) { color: var(--fl-ink-2); }
.fl-account a.fl-detail__link:visited { color: var(--fl-ink-2); }
.fl-account a.fl-detail__link:visited:hover { color: var(--fl-ink); }

/* ====================================================================
   Adresse option C (#16, client decision 2026-10-13) — subscriptions
   grouped by delivery address + the account address as the default
   ==================================================================== */
.fl-subaddr { display: grid; gap: var(--fl-space-5); padding: var(--fl-space-8); }
.fl-subaddr__group { display: grid; gap: var(--fl-space-2); }
.fl-subaddr__group + .fl-subaddr__group { padding-top: var(--fl-space-5); border-top: 1px solid var(--fl-border); }
.fl-subaddr__address { display: flex; align-items: center; gap: var(--fl-space-2); font-weight: var(--fl-fw-medium); }
.fl-subaddr__address .fl-icon { width: 1.15rem; height: 1.15rem; color: var(--fl-ink-3); flex: none; }
.fl-subaddr__list { list-style: none; margin: 0; padding: 0; display: grid; }
.fl-subaddr__row { display: flex; align-items: center; gap: var(--fl-space-3); padding: var(--fl-space-2) 0; }
.fl-subaddr__row + .fl-subaddr__row { border-top: 1px solid var(--fl-border); }
.fl-subaddr__info { display: grid; gap: 1px; flex: 1; min-width: 0; }
.fl-subaddr__name { font-size: var(--fl-text-sm); font-weight: var(--fl-fw-medium); }
.fl-subaddr__meta { color: var(--fl-ink-2); font-size: var(--fl-text-xs); }
/* Hello's global button/link rules (nowrap + min-width) would push the small button out of the row; let it wrap. */
.fl-account .fl-subaddr__row .fl-btn { flex: none; min-width: 0; white-space: normal; }
.fl-addresscard__help { color: var(--fl-ink-2); font-size: var(--fl-text-sm); line-height: var(--fl-lh-snug); max-width: 360px; }
@media (max-width: 1279.98px) {
  .fl-subaddr { padding: var(--fl-space-5); }
}

/* ====================================================================
   Ordrer: all orders (#17) — per-subscription label + "Vis flere"
   ==================================================================== */
.fl-ordercard__sublabel { color: var(--fl-ink-3); font-size: var(--fl-text-xs); }
.fl-orderlist__more { align-self: center; }

/* ====================================================================
   Abonnementer: one subscription (?abonnement) — "Tilbage til alle abonnementer"
   ==================================================================== */
/* Sits in the .fl-subs flex column: keep the link as wide as its text, not the column. */
.fl-link--back { align-self: flex-start; }

/* ====================================================================
   Oversigt: "Tilføj til hvilken levering?" names the subscription (client 2026-10-16 #2)
   ==================================================================== */
.fl-subpicker__meta { font-size: var(--fl-text-xs); color: var(--fl-ink-2); line-height: var(--fl-lh-snug); }

/* ====================================================================
   Abonnementer: #abonnement-<id> from an Oversigt status row (client 2026-10-16 #3) — clear of the sticky topbar
   ==================================================================== */
.fl-subhead[id^="abonnement-"] { scroll-margin-top: var(--fl-space-16); }

/* ====================================================================
   Kalender: on-page confirm for an extra on a regular order (client 2026-10-16 #5, replaces window.confirm)
   ==================================================================== */
.fl-daypop__confirm { display: grid; gap: var(--fl-space-3); padding: var(--fl-space-3); border-radius: var(--fl-radius-sm); background: var(--fl-surface-warm); }
.fl-daypop__confirmtext { margin: 0; font-size: var(--fl-text-sm); line-height: var(--fl-lh-snug); }

/* ====================================================================
   Rediger abonnement: "Leveringsdato" tab (client 2026-10-16 #4, option B)
   ==================================================================== */
/* .fl-modal__footactions sets display:flex, so [hidden] (pick ↔ confirm step) needs this to actually hide */
.fl-modal__footactions[hidden] { display: none; }

/* ====================================================================
   Abonnementer: "Opsig abonnement" under the pause card's button (client 2026-10-16 #4, option B)
   ==================================================================== */
.fl-pausecard:has(.fl-pausecard__cancel) { grid-template-areas: "chip title" "chip text" "chip button" "chip cancel"; }
.fl-pausecard__cancel { grid-area: cancel; justify-self: start; color: var(--fl-ink-2); }
@media (max-width: 1279.98px) {
  .fl-pausecard:has(.fl-pausecard__cancel) { grid-template-areas: "chip title" "chip text" "button button" "cancel cancel"; }
  .fl-pausecard__cancel { justify-self: center; margin-top: var(--fl-space-2); }
}

/* ====================================================================
   view-order (client 2026-10-16 #9): our card instead of WooCommerce's default page
   ==================================================================== */
.fl-orderview__card { display: grid; gap: var(--fl-space-4); padding: var(--fl-space-8); }
.fl-orderview__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fl-space-3); }
.fl-orderview__card .fl-ordersum { margin: 0; }
.fl-orderview__meta { color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-orderview__subtitle { font-size: var(--fl-text-md); font-weight: var(--fl-fw-bold); }
.fl-orderview__notes { display: grid; gap: var(--fl-space-3); margin: 0; padding: 0; list-style: none; }
.fl-orderview__notedate { color: var(--fl-ink-3); font-size: var(--fl-text-xs); }
.fl-orderview__notetext { font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); }
.fl-orderview__actions { display: flex; flex-wrap: wrap; gap: var(--fl-space-3); }
/* Output still printed by other plugins' hooks (ORDDD delivery date, time slot, "edit delivery date" block): our type and buttons */
.fl-orderview__vendor { display: grid; gap: var(--fl-space-2); color: var(--fl-ink); font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); }
.fl-orderview__vendor:empty { display: none; }
.fl-orderview__vendor p { margin: 0; }
.fl-orderview__vendor :is(h2, h3) { margin: 0; font-size: var(--fl-text-md); font-weight: var(--fl-fw-bold); }
.fl-orderview__vendor mark { background: none; color: inherit; font-weight: var(--fl-fw-medium); } /* no yellow, whoever prints it */
.fl-account .fl-orderview__vendor :is(.button, button, input[type="button"], input[type="submit"]) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--fl-space-4);
  border: 1px solid var(--fl-border-strong); border-radius: var(--fl-radius-pill); background: var(--fl-surface);
  color: var(--fl-ink); font: inherit; font-weight: var(--fl-fw-medium); text-decoration: none; cursor: pointer;
}
.fl-account .fl-orderview__vendor :is(.button, button, input[type="button"], input[type="submit"]):hover { background: var(--fl-surface-warm); color: var(--fl-ink); }
.fl-orderview__vendor :is(input[type="text"], select) { min-height: 40px; padding: 0 var(--fl-space-3); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-sm); background: var(--fl-surface); font: inherit; color: var(--fl-ink); }
@media (max-width: 1279.98px) {
  .fl-orderview__card { padding: var(--fl-space-5); }
  .fl-orderview__actions .fl-btn { flex: 1; }
}

/* view-order line meta (final review 2026-10-16 M-7): WooCommerce's item meta (EPO card text etc.) under its line */
.fl-ordersum__meta { margin-top: calc(-1 * var(--fl-space-1)); color: var(--fl-ink-2); font-size: var(--fl-text-sm); }
.fl-ordersum__meta .wc-item-meta { margin: 0; padding: 0; list-style: none; }
.fl-ordersum__meta .wc-item-meta li { margin: 0; }
.fl-ordersum__meta .wc-item-meta :is(strong, p) { display: inline; margin: 0; font-weight: var(--fl-fw-medium); }

/* "Tilføj til hvilken levering?" picker rows wrap (client 2026-10-19 #4): Hello's global `button { white-space: nowrap }`
   reaches .fl-subpicker__opt, so the full address could not wrap and the list scrolled sideways (same bleed as 5029682).
   minmax(0,1fr) lets the column shrink; the `.fl-account` prefix beats Hello without !important. */
.fl-subpicker__list { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.fl-account .fl-subpicker__opt { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Ending subscription (client 2026-10-28 C2): the reduced "Opsagt" card on Abonnementer has no actions column */
@media (min-width: 1280px) {
  .fl-subhead--ending { grid-template-columns: 168px minmax(0, 1.5fr) minmax(0, 2.3fr); }
}
.fl-subhead--ending .fl-subhead__details { grid-template-columns: minmax(0, 1fr); }
.fl-subhead__note { margin-top: var(--fl-space-1); color: var(--fl-ink); font-weight: var(--fl-fw-medium); font-size: var(--fl-text-base); }
@media (max-width: 1279.98px) {
  /* the one detcol of the ending card is both :first-child and :last-child: no divider, no indent */
  .fl-subhead--ending .fl-subhead__detcol > .fl-detail { border-left: 0; padding-left: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Phones (client 2026-11-10 #4, 390 px): the mobile design's side-by-side rows got too narrow.
   -------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .fl-statusbar__body { flex: 1 1 auto; min-width: 0; }   /* the text keeps its width next to the button */
  /* WooCommerce prints an empty notices wrapper first in .fl-main__inner (woocommerce_account_content, priority 5). As a
     flex item it adds one extra gap; on Oversigt, whose title bar is hidden on mobile, that was the empty gap above the
     first card (16 → 36 px). Desktop spacing stays as approved. */
  .fl-main__inner > .woocommerce-notices-wrapper:empty { display: none; }
}
@media (max-width: 599.98px) {
  /* a) "Alt er klart" and the pending-action rows (Oversigt, Ordrer): the button goes under the text */
  .fl-statusbar { flex-wrap: wrap; row-gap: var(--fl-space-3); }
  .fl-statusbar__body { flex: 1 1 0; }
  .fl-statusbar__action { margin-left: 0; width: 100%; justify-content: center; }

  /* b) Ordrer card: date, address and frequency stacked, one row each (no column dividers) */
  .fl-ordercard__details { grid-template-columns: minmax(0, 1fr); row-gap: var(--fl-space-3); }
  .fl-ordercard__details > .fl-detail:nth-child(2),
  .fl-ordercard__details > .fl-detail:nth-child(3) { border-left: 0; padding-left: 0; }
  .fl-ordercard__details .fl-detail__value { font-size: var(--fl-text-sm); }

  /* b) "Dit abonnement på et øjeblik": each head (Buket / Størrelse / Sådan fungerer det) right above its own card.
     Markup order is the 3 heads, then the 3 bodies (desktop grid), so the phone order is set here. */
  .fl-glancegrid { grid-template-columns: minmax(0, 1fr); row-gap: var(--fl-space-3); }
  .fl-glancegrid > :nth-child(1) { order: 1; }
  .fl-glancegrid > :nth-child(4) { order: 2; }
  .fl-glancegrid > :nth-child(2) { order: 3; margin-top: var(--fl-space-3); }
  .fl-glancegrid > :nth-child(5) { order: 4; }
  .fl-glancegrid > :nth-child(3) { order: 5; margin-top: var(--fl-space-3); }
  .fl-glancegrid > :nth-child(6) { order: 6; }
  .fl-glancecard__head .fl-icon { width: 34px; height: 34px; padding: 7px; aspect-ratio: 1; }
  .fl-glancecard__label { font-size: var(--fl-text-sm); }
  .fl-glancecard__value { font-size: var(--fl-text-sm); }
}