/* ============================================================================
   NemlAI — "Nordic Pantry" token system
   File:      web/static/design.css
   Namespace: --np-*  (Nordic Pantry)

   4 flavors
   ─────────
   linen   (default · crisp warm-white · brown + beige)
   pantry  (warm earth · the original Nordic Pantry look)
   mocha   (dark · Catppuccin Mocha tones)
   latte   (cool crisp light · Catppuccin Latte tones)

   Rules
   ─────
   • No hardcoded hex colors outside [data-mode] blocks
   • No --ctp-* tokens, no JS, no build tooling
   • Import this file before any page-level CSS
   ============================================================================ */

/* ============================================================================
   FONT IMPORT — Outfit, weights 400 / 500 / 600 / 700 / 800
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

/* ============================================================================
   ROOT — non-color tokens: motion · radii · spacing · type helpers
   (No hex values here — those all live inside [data-mode] blocks below.)
   ============================================================================ */
:root {

  /* ---- Motion ---- */
  --np-ease: cubic-bezier(.16, 1, .3, 1);

  /* ---- Corner radii ---- */
  --np-radius-badge:   7px;    /* inline badges                   */
  --np-radius-input:   14px;   /* text inputs / textareas         */
  --np-radius-toolbar: 12px;   /* toolbars, segmented bg          */
  --np-radius-card:    22px;   /* cards, sections                 */
  --np-radius-btn:     16px;   /* action buttons                  */
  --np-radius-seg:     18px;   /* segmented-control outer shell   */
  --np-radius-pill:    999px;  /* pills, chips, household badges  */

  /* ---- Spacing — 4-px scale ---- */
  --np-space-1:  4px;
  --np-space-2:  8px;
  --np-space-3:  12px;
  --np-space-4:  16px;
  --np-space-5:  20px;
  --np-space-6:  24px;
  --np-space-7:  28px;
  --np-space-8:  32px;
  --np-space-9:  36px;
  --np-space-10: 40px;
  --np-space-11: 44px;
  --np-space-12: 48px;

  /* ---- Typography ---- */
  --np-font-family:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --np-font-size-base: 15px;
  --np-font-size-sm:   13px;
  --np-font-size-xs:   11.5px;
  --np-line-height:    1.5;
}

html, body { font-family: var(--np-font-family); height: 100%; margin: 0; }

/* ============================================================================
   FLAVOR: linen — DEFAULT · crisp warm-white · brown + beige
   Applied when data-mode is absent (bare :root) or set to "linen".
   ============================================================================ */
:root,
[data-mode="linen"] {

  /* Surfaces */
  --np-canvas:   #f5f2ec;   /* page background — soft warm white   */
  --np-paper:    #ffffff;   /* raised card surface — clean white   */
  --np-paper-2:  #f1ede4;   /* secondary / sunken surface          */
  --np-paper-3:  #ebe5d9;   /* tertiary fill                       */

  /* Ink */
  --np-ink:   #33291e;      /* primary text — warm brown-black     */
  --np-ink-2: #7c6e5b;      /* muted / secondary text — taupe      */
  --np-ink-3: #a89a85;      /* faint / placeholder — light taupe   */

  /* Lines */
  --np-line:   #eae3d6;     /* hairlines                           */
  --np-line-2: #d9cfbd;     /* stronger borders                    */

  /* Sage — PRIMARY action */
  --np-sage:      #5b8a45;
  --np-sage-deep: #4c7639;
  --np-sage-soft: rgba(91, 138, 69, 0.12);

  /* Terra — BRAND accent (warm caramel brown) */
  --np-terra:      #a06a44;
  --np-terra-deep: #84572f;
  --np-terra-soft: rgba(160, 106, 68, 0.12);

  /* Accent aliases — always reference terra */
  --np-accent:      var(--np-terra);
  --np-accent-deep: var(--np-terra-deep);
  --np-accent-soft: var(--np-terra-soft);

  /* Semantic — eco / sale */
  --np-eco:  #5b8a45;
  --np-sale: #5b8a45;

  /* Semantic — amber (campaign / warning) */
  --np-amber:      #b6841e;
  --np-amber-soft: rgba(182, 132, 30, 0.15);

  /* Semantic — info (links) */
  --np-info:      #5b769c;
  --np-info-soft: rgba(91, 118, 156, 0.13);

  /* Semantic — danger (destructive / error) */
  --np-danger:      #b0432f;
  --np-danger-soft: rgba(176, 67, 47, 0.10);

  /* Shadows */
  --np-shadow-sm:     0 1px 2px rgba(60, 45, 25, 0.05);
  --np-shadow:        0 2px 6px rgba(60, 45, 25, 0.05), 0 10px 28px rgba(60, 45, 25, 0.07);
  --np-shadow-lg:     0 8px 24px rgba(60, 45, 25, 0.11), 0 24px 60px rgba(60, 45, 25, 0.12);
  --np-shadow-accent: 0 6px 18px rgba(91, 138, 69, 0.30);
}

/* ============================================================================
   FLAVOR: pantry — warm earth · the original Nordic Pantry look
   ============================================================================ */
[data-mode="pantry"] {

  /* Surfaces */
  --np-canvas:   #ece2cf;   /* behind cards — warm paper           */
  --np-paper:    #fbf6ec;   /* raised card surface                 */
  --np-paper-2:  #f4ecdc;   /* sunken / secondary surface          */
  --np-paper-3:  #efe5d2;   /* tertiary fill                       */

  /* Ink */
  --np-ink:   #2c2114;      /* primary text — espresso             */
  --np-ink-2: #6e5e48;      /* muted text                          */
  --np-ink-3: #9c8c72;      /* faint / placeholder                 */

  /* Lines */
  --np-line:   #e6dac1;     /* hairlines                           */
  --np-line-2: #d8c8a8;     /* stronger borders                    */

  /* Sage — PRIMARY action */
  --np-sage:      #5b8a45;
  --np-sage-deep: #4c7639;
  --np-sage-soft: rgba(91, 138, 69, 0.13);

  /* Terra — BRAND accent (terracotta) */
  --np-terra:      #bd5c38;
  --np-terra-deep: #a44b2c;
  --np-terra-soft: rgba(189, 92, 56, 0.12);

  /* Accent aliases — always reference terra */
  --np-accent:      var(--np-terra);
  --np-accent-deep: var(--np-terra-deep);
  --np-accent-soft: var(--np-terra-soft);

  /* Semantic — eco / sale */
  --np-eco:  #5b8a45;
  --np-sale: #5b8a45;

  /* Semantic — amber (campaign / warning) */
  --np-amber:      #c4892b;
  --np-amber-soft: rgba(196, 137, 43, 0.16);

  /* Semantic — info (links) */
  --np-info:      #4f739f;
  --np-info-soft: rgba(79, 115, 159, 0.14);

  /* Semantic — danger (destructive / error) */
  --np-danger:      #b0432f;
  --np-danger-soft: rgba(176, 67, 47, 0.10);

  /* Shadows */
  --np-shadow-sm:     0 1px 2px rgba(58, 38, 16, 0.05);
  --np-shadow:        0 2px 6px rgba(58, 38, 16, 0.05), 0 10px 28px rgba(58, 38, 16, 0.07);
  --np-shadow-lg:     0 8px 24px rgba(58, 38, 16, 0.10), 0 24px 60px rgba(58, 38, 16, 0.12);
  --np-shadow-accent: 0 6px 18px rgba(91, 138, 69, 0.32);
}

/* ============================================================================
   FLAVOR: mocha — dark · Catppuccin Mocha tones with Nordic Pantry semantics
   ============================================================================ */
[data-mode="mocha"] {

  /* Surfaces */
  --np-canvas:   #161620;   /* deepest background                  */
  --np-paper:    #1e1e2e;   /* raised card surface                 */
  --np-paper-2:  #181825;   /* secondary surface                   */
  --np-paper-3:  #11111b;   /* tertiary fill                       */

  /* Ink */
  --np-ink:   #cdd6f4;      /* primary text                        */
  --np-ink-2: #a6adc8;      /* muted text                          */
  --np-ink-3: #6c7086;      /* faint / placeholder                 */

  /* Lines */
  --np-line:   #2a2b3c;     /* hairlines                           */
  --np-line-2: #45475a;     /* stronger borders                    */

  /* Sage — PRIMARY action (mint on dark) */
  --np-sage:      #a6e3a1;
  --np-sage-deep: #94d28f;
  --np-sage-soft: rgba(166, 227, 161, 0.13);

  /* Terra — BRAND accent (mauve = canonical Mocha accent) */
  --np-terra:      #cba6f7;
  --np-terra-deep: #b491e8;
  --np-terra-soft: rgba(203, 166, 247, 0.14);

  /* Accent aliases — always reference terra */
  --np-accent:      var(--np-terra);
  --np-accent-deep: var(--np-terra-deep);
  --np-accent-soft: var(--np-terra-soft);

  /* Semantic — eco / sale */
  --np-eco:  #a6e3a1;
  --np-sale: #a6e3a1;

  /* Semantic — amber (campaign / warning) */
  --np-amber:      #f9e2af;
  --np-amber-soft: rgba(249, 226, 175, 0.14);

  /* Semantic — info (links) */
  --np-info:      #89b4fa;
  --np-info-soft: rgba(137, 180, 250, 0.14);

  /* Semantic — danger (destructive / error) */
  --np-danger:      #f38ba8;
  --np-danger-soft: rgba(243, 139, 168, 0.12);

  /* Shadows */
  --np-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.30);
  --np-shadow:        0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.40);
  --np-shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.55);
  --np-shadow-accent: 0 6px 18px rgba(166, 227, 161, 0.25);
}

/* ============================================================================
   FLAVOR: latte — cool crisp light · Catppuccin Latte tones
   ============================================================================ */
[data-mode="latte"] {

  /* Surfaces */
  --np-canvas:   #e6e9ef;
  --np-paper:    #ffffff;
  --np-paper-2:  #eff1f5;
  --np-paper-3:  #e6e9ef;

  /* Ink */
  --np-ink:   #4c4f69;
  --np-ink-2: #6c6f85;
  --np-ink-3: #9ca0b0;

  /* Lines */
  --np-line:   #dce0e8;
  --np-line-2: #ccd0da;

  /* Sage — PRIMARY action */
  --np-sage:      #40a02b;
  --np-sage-deep: #388f26;
  --np-sage-soft: rgba(64, 160, 43, 0.12);

  /* Terra — BRAND accent (warm orange on cool) */
  --np-terra:      #e06a3a;
  --np-terra-deep: #c85a2e;
  --np-terra-soft: rgba(224, 106, 58, 0.12);

  /* Accent aliases — always reference terra */
  --np-accent:      var(--np-terra);
  --np-accent-deep: var(--np-terra-deep);
  --np-accent-soft: var(--np-terra-soft);

  /* Semantic — eco / sale */
  --np-eco:  #40a02b;
  --np-sale: #40a02b;

  /* Semantic — amber (campaign / warning) */
  --np-amber:      #df8e1d;
  --np-amber-soft: rgba(223, 142, 29, 0.14);

  /* Semantic — info (links) */
  --np-info:      #1e66f5;
  --np-info-soft: rgba(30, 102, 245, 0.10);

  /* Semantic — danger (destructive / error) */
  --np-danger:      #d20f39;
  --np-danger-soft: rgba(210, 15, 57, 0.08);

  /* Shadows */
  --np-shadow-sm:     0 1px 2px rgba(76, 79, 105, 0.06);
  --np-shadow:        0 2px 6px rgba(76, 79, 105, 0.06), 0 10px 28px rgba(76, 79, 105, 0.09);
  --np-shadow-lg:     0 10px 30px rgba(76, 79, 105, 0.16);
  --np-shadow-accent: 0 6px 18px rgba(64, 160, 43, 0.28);
}

/* ============================================================================
   TYPOGRAPHY HELPERS
   ============================================================================ */

/* Tabular numbers — always apply to prices, counters, timestamps */
.np-num {
  font-variant-numeric: tabular-nums;
}

/* Eyebrow label — UPPERCASE, tight tracking, ink-3 */
.np-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--np-ink-2);
}

/* Section label — UPPERCASE with optional leading icon/element */
.np-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-ink-2);
  margin-bottom: 12px;
}

/* ============================================================================
   KEYFRAMES
   ============================================================================ */

/* Entrance: slide up + fade in */
@keyframes np-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Entrance: simple opacity fade */
@keyframes np-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Entrance: scale pop with overshoot */
@keyframes np-pop {
  0%   { transform: scale(0.80); opacity: 0; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1);    opacity: 1; }
}

/* Continuous: spinner rotation */
@keyframes np-spin {
  to { transform: rotate(360deg); }
}

/* Continuous: skeleton shimmer */
@keyframes np-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Continuous: breathing pulse */
@keyframes np-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Sheet: slide up from bottom */
@keyframes np-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* Progress ring: stroke-dashoffset draw */
@keyframes np-ring {
  from { stroke-dashoffset: var(--np-ring-len); }
}

/* ============================================================================
   REDUCED MOTION — disable all animations + transitions for accessibility
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   APP SHELL (Desktop / Tablet / Mobile)
   Responsive layout:
   - Desktop (>= 1024px): 264px left sidebar
   - Tablet (768px - 1023px): ~60px icon-only rail
   - Mobile (< 768px): Bottom tab bar + top bar
   ============================================================================ */

.np-web {
  display: flex;
  height: 100%;
  width: 100%;
  min-height: 0;
  background: var(--np-canvas);
  color: var(--np-ink);
  overflow: hidden;
}

/* ───────────────────────── Sidebar (Desktop/Tablet) ───────────────────────── */
.np-side {
  flex: none;
  width: 264px;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  background: var(--np-paper);
  border-right: 1px solid var(--np-line);
  gap: 4px;
  transition: width 0.2s ease, padding 0.2s ease;
}

.np-side__brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 18px; overflow: hidden; }

.np-side__cta {
  margin: 4px 4px 14px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px; border-radius: var(--np-radius-btn);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap;
  background: var(--np-sage);
  color: var(--np-paper); box-shadow: var(--np-shadow-sm);
  transition: transform .15s var(--np-ease), box-shadow .2s ease;
  border: none;
  cursor: pointer;
  overflow: hidden;
}
.np-side__cta:hover { transform: translateY(-1px); }
.np-side__cta:active { transform: scale(0.98); }

.np-side__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--np-ink-2); padding: 6px 12px 6px; margin-top: 4px;
  white-space: nowrap; overflow: hidden;
}

.np-nav {
  display: flex; flex-direction: column; gap: 3px;
}
.np-nav-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 13px;
  font-weight: 600; font-size: 15px; color: var(--np-ink-2);
  transition: background .15s ease, color .15s ease;
  text-align: left; width: calc(100% - 6px);
  margin-right: 6px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.np-nav-item:hover:not(.is-on) { background: var(--np-paper-2); color: var(--np-ink); }
.np-nav-item.is-on { background: var(--np-accent-soft); color: var(--np-accent); }
.np-nav-item__icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }

.np-side__spacer { flex: 1 1 auto; min-height: 14px; }

.np-side__foot {
  border-top: 1px solid var(--np-line);
  padding-top: 12px; margin-top: 6px;
}
.np-account {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 13px; width: calc(100% - 6px); text-align: left;
  margin-right: 6px;
  box-sizing: border-box;
  transition: background .15s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}
.np-account:hover { background: var(--np-paper-2); }
.np-account__av {
  width: 38px; height: 38px; border-radius: var(--np-radius-pill); flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--np-paper);
  background: var(--np-accent);
}
.np-account__name { font-weight: 700; font-size: 14px; line-height: 1.2; display: block; color: var(--np-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-account__mail { font-size: 12px; color: var(--np-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ───────────────────────── Main column ───────────────────────── */
.np-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.np-topbar-web {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 34px 18px;
  border-bottom: 1px solid var(--np-line);
  background: var(--np-canvas);
}
.np-topbar-web__eyebrow { font-size: 12px; font-weight: 600; color: var(--np-ink-2); letter-spacing: 0.01em; }
.np-topbar-web__title { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--np-ink); }
.np-topbar-web__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.np-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 30px 34px 56px;
  display: flex;
  flex-direction: column;
}
.np-scroll::-webkit-scrollbar { width: 10px; }
.np-scroll::-webkit-scrollbar-thumb { background: var(--np-line-2); border-radius: var(--np-radius-pill); border: 3px solid transparent; background-clip: content-box; }
.np-scroll::-webkit-scrollbar-thumb:hover { background: var(--np-ink-3); border: 3px solid transparent; background-clip: content-box; }

.np-wrap { max-width: 1120px; margin: 0 auto; }
.np-wrap--narrow { max-width: 760px; margin: 0 auto; }
.np-wrap--mid { max-width: 920px; margin: 0 auto; }

/* ───────────────────────── Layout grids ───────────────────────── */
.np-home-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}

.np-basket-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr) 348px;
  align-items: start;
}

.np-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.np-dash {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.np-dash-2 { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: start; }

.np-settings-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
}

.np-sticky { position: sticky; top: 0; z-index: 10; }

/* ───────────────────────── Mobile Top Bar ───────────────────────── */
.np-topbar {
  display: none;
  align-items: center;
  padding: 12px 16px;
  background: var(--np-canvas);
  border-bottom: 1px solid var(--np-line);
  flex: none;
  gap: 12px;
}
.np-topbar.solid { background: var(--np-paper); }
.np-topbar__eyebrow { font-size: 11px; font-weight: 600; color: var(--np-ink-2); letter-spacing: 0.02em; text-transform: uppercase; }
.np-topbar__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--np-ink); }

.np-mobile-feedback {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--np-radius-pill);
  background: var(--np-sage-soft);
  color: var(--np-sage);
  border: 1px solid var(--np-sage-soft);
  cursor: pointer;
  padding: 0;
  flex: none;
}
.np-mobile-feedback:hover {
  background: var(--np-sage-soft);
}

/* ───────────────────────── Mobile Bottom Tab Bar ───────────────────────── */
.np-tabs {
  display: none;
  align-items: center;
  justify-content: space-around;
  background: var(--np-paper);
  border-top: 1px solid var(--np-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex: none;
}
.np-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; height: 56px; gap: 2px;
  border: none; background: transparent;
  color: var(--np-ink-2);
  cursor: pointer;
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
}
.np-tab.is-on { color: var(--np-accent); }
.np-tab__icon { display: grid; place-items: center; width: 24px; height: 24px; }
.np-tab__label { font-size: 11px; font-weight: 600; }

/* ───────────────────────── Logo ───────────────────────── */
.np-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.02em; color: var(--np-ink); margin-right: auto; }
.np-logo__mark {
  display: grid; place-items: center;
  background: var(--np-ink); color: var(--np-canvas);
  border-radius: 8px; font-weight: 800;
}
.np-logo__word .ai { color: var(--np-accent); }

/* ───────────────────────── Responsive Breakpoints ───────────────────────── */
@media (max-width: 1023px) and (min-width: 768px) {
  .np-side { width: 64px; padding: 20px 8px 16px; align-items: center; }
  .np-side__brand .np-logo__word { display: none; }
  .np-side__cta { padding: 13px 0; width: 44px; border-radius: 12px; }
  .np-side__cta span:not(:first-child) { display: none; }
  .np-side__label { display: none; }
  .np-nav-item { padding: 11px 0; justify-content: center; border-radius: 12px; }
  .np-nav-item span:not(.np-nav-item__icon) { display: none; }
  .np-account { padding: 4px; justify-content: center; }
  .np-account > span:not(.np-account__av) { display: none; }
  .np-account svg { display: none; }
  
  .np-topbar-web { padding: 18px 24px 16px; }
  .np-topbar-web__title { font-size: 21px; }
  .np-scroll { padding: 24px 24px 44px; }
  
  .np-home-grid { grid-template-columns: 1fr; }
  .np-basket-grid { grid-template-columns: 1fr; }
  .np-dash { grid-template-columns: 1fr; }
  .np-dash-2 { grid-template-columns: 1fr; }
  .np-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .np-wrap { width: 100%; min-width: 0; }
  .np-web { flex-direction: column; }
  .np-side { display: none; }
  .np-topbar-web { display: none; }
  .np-topbar { display: flex; }
  .np-tabs { display: flex; }
  .np-scroll { padding: 16px 16px 32px; }
  
  .np-home-grid { grid-template-columns: 1fr; }
  .np-basket-grid { grid-template-columns: 1fr; }
  .np-stat-row { grid-template-columns: 1fr; }
  .np-dash { grid-template-columns: 1fr; }
  .np-dash-2 { grid-template-columns: 1fr; }
  .np-settings-grid { grid-template-columns: 1fr; }
  .cc-revoke-trigger { bottom: calc(57px + env(safe-area-inset-bottom, 0px) + 10px) !important; }
}

/* ───────────────────────── Web modal (centered dialog) ───────────────────────── */
.np-modal-back {
  position: absolute; inset: 0; z-index: 820;
  background: rgba(20,14,6,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  animation: np-fade .2s ease;
}
.np-modal {
  width: 100%; max-width: 460px; max-height: calc(100% - 56px);
  background: var(--np-canvas); color: var(--np-ink);
  border: 1px solid var(--np-line); border-radius: 24px; box-shadow: var(--np-shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: np-pop .26s var(--np-ease);
}
.np-modal__hd { display: flex; align-items: center; gap: 12px; padding: 20px 22px 14px; flex: none; }
.np-modal__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; flex: 1; }
.np-modal__x { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--np-ink-2); background: var(--np-paper-2); border: 1px solid var(--np-line); flex: none; cursor: pointer; }
.np-modal__x:hover { color: var(--np-ink); }
.np-modal__body { padding: 0 22px 8px; overflow-y: auto; min-height: 0; }
.np-modal__foot { padding: 16px 22px 22px; display: flex; gap: 10px; flex: none; }

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

/* ---- Buttons ---- */
.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: var(--np-font-size-base);
  font-weight: 600;
  font-family: var(--np-font-family);
  border: none;
  border-radius: var(--np-radius-btn);
  cursor: pointer;
  transition: transform .15s var(--np-ease), box-shadow .2s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.np-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.np-btn:active:not(:disabled) {
  transform: scale(0.975);
}

.np-btn--primary {
  background: linear-gradient(135deg, var(--np-sage) 0%, var(--np-sage-deep) 100%);
  color: var(--np-paper);
  box-shadow: var(--np-shadow-accent);
}
.np-btn--primary:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.np-btn--accent {
  background: linear-gradient(135deg, var(--np-accent) 0%, var(--np-accent-deep) 100%);
  color: var(--np-paper);
  box-shadow: 0 6px 18px var(--np-accent-soft);
}
.np-btn--accent:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.np-btn--secondary {
  background: var(--np-paper);
  color: var(--np-ink);
  border: 1px solid var(--np-line-2);
  box-shadow: var(--np-shadow-sm);
}
.np-btn--secondary:hover:not(:disabled) {
  background: var(--np-paper-2);
}

/* ---- Web Buttons ---- */
.np-wbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 13px; font-weight: 700; font-size: 14px;
  background: var(--np-paper); border: 1px solid var(--np-line-2); color: var(--np-ink-2);
  box-shadow: var(--np-shadow-sm); transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.np-wbtn:hover { background: var(--np-paper-2); color: var(--np-ink); }
.np-wbtn--accent { background: linear-gradient(150deg, var(--np-accent), var(--np-accent-deep)); color: var(--np-paper); border-color: transparent; box-shadow: 0 6px 18px var(--np-accent-soft); }
.np-wbtn--accent:hover { color: var(--np-paper); filter: brightness(1.04); }
.np-wbtn--primary { background: linear-gradient(150deg, var(--np-sage), var(--np-sage-deep)); color: var(--np-paper); border-color: transparent; box-shadow: var(--np-shadow-accent); }
.np-wbtn--primary:hover { color: var(--np-paper); filter: brightness(1.04); }
.np-wbtn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.np-wbtn--ghost:hover { background: var(--np-paper-2); }
.np-wbtn--block { width: 100%; justify-content: center; }

/* ---- Web Tabs ---- */
.np-wtabs { display: flex; gap: 7px; flex-wrap: wrap; }
.np-wtab {
  padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--np-paper); color: var(--np-ink-2); border: 1px solid var(--np-line-2);
  box-shadow: var(--np-shadow-sm); transition: color .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;
}
.np-wtab:hover:not(.is-on) { color: var(--np-ink); }
.np-wtab.is-on { background: var(--np-accent); color: var(--np-paper); border-color: var(--np-accent); box-shadow: 0 4px 12px var(--np-accent-soft); }

/* ---- Cards ---- */
.np-card {
  background: var(--np-paper);
  border-radius: var(--np-radius-card);
  box-shadow: var(--np-shadow);
  padding: 20px 24px;
}

/* ---- Inputs ---- */
.np-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--np-line-2);
  border-radius: var(--np-radius-input);
  background: var(--np-paper);
  color: var(--np-ink);
  font-size: var(--np-font-size-base);
  font-family: var(--np-font-family);
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}
.np-input:focus {
  border-color: var(--np-sage);
  box-shadow: 0 0 0 3px var(--np-sage-soft);
}
.np-input.is-error {
  border-color: var(--np-danger);
}
.np-input.is-error:focus {
  box-shadow: 0 0 0 3px var(--np-danger-soft);
}
textarea.np-input {
  resize: vertical;
  min-height: 80px;
}

.np-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.np-input-wrap .np-input {
  padding-right: 40px;
}
.np-input-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--np-ink-2);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-input-toggle:hover {
  color: var(--np-ink);
}

/* Shake animation for errors */
@keyframes np-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.shake {
  animation: np-shake 0.4s var(--np-ease);
}

/* ---- Badges & Pills ---- */
.np-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--np-radius-badge);
  font-size: var(--np-font-size-xs);
  font-weight: 600;
  background: var(--np-paper-2);
  color: var(--np-ink-2);
}
.np-badge--search {
  background: var(--np-info-soft);
  color: var(--np-info);
}
.np-badge--sub {
  background: var(--np-amber-soft);
  color: var(--np-amber);
}
.np-badge--eco {
  padding: 2px;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
.np-badge--eco svg {
  width: 20px;
  height: 19px;
}
.np-badge--sale {
  background: var(--np-amber);
  color: var(--np-paper);
}
.np-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--np-radius-pill);
  font-size: var(--np-font-size-xs);
  font-weight: 600;
}
.np-pill--household {
  background: var(--np-sage-soft);
  border: 1px solid var(--np-sage-soft);
  color: var(--np-sage);
}
.np-pill--freshness {
  background: var(--np-line-2);
  color: var(--np-ink-2);
}

/* ---- Segmented Control ---- */
.np-seg {
  display: flex;
  background: var(--np-paper-2);
  border-radius: var(--np-radius-seg);
  padding: 4px;
  gap: 4px;
}
.np-seg__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--np-ink-2);
  font-size: var(--np-font-size-sm);
  font-weight: 600;
  border-radius: calc(var(--np-radius-seg) - 4px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.np-seg__btn.is-active {
  background: var(--np-paper);
  color: var(--np-ink);
  box-shadow: var(--np-shadow-sm);
}

/* ---- Chips ---- */
.np-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--np-radius-pill);
  background: var(--np-paper);
  border: 1px solid var(--np-line-2);
  color: var(--np-ink-2);
  font-size: var(--np-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.np-chip:hover {
  background: var(--np-paper-2);
  color: var(--np-ink);
}
.np-chip.is-active {
  background: var(--np-accent);
  color: var(--np-paper);
  border-color: var(--np-accent);
}

/* ---- Toast ---- */
.np-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 28px;
  z-index: 600;
  display: flex;
  justify-content: center;
  pointer-events: none;
  animation: np-fade-up .35s var(--np-ease);
}
.np-toast__inner {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--np-ink);
  color: var(--np-paper);
  padding: 11px 16px;
  border-radius: 14px;
  box-shadow: var(--np-shadow-lg);
  font-size: 14px;
  font-weight: 600;
  max-width: 100%;
}
.np-toast__dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex: none;
}
.np-toast--success .np-toast__dot { background: var(--np-sage); }
.np-toast--error .np-toast__dot { background: var(--np-danger); }
.np-toast--info .np-toast__dot { background: var(--np-accent); }
.np-toast__msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Item Row ---- */
.np-item {
  display: flex;
  padding: 12px 16px;
  gap: 12px;
  background: var(--np-paper);
  border-bottom: 1px solid var(--np-line);
}
.np-item.np-rise {
  animation: np-fade-up .35s var(--np-ease) both;
}
.np-item__img {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--np-paper);
  font-weight: 600;
}
.np-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.np-item__name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--np-ink);
}
.np-item__meta {
  font-size: var(--np-font-size-xs);
  color: var(--np-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.np-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 70px;
}
.np-item__now {
  color: var(--np-ink);
  font-weight: 600;
}
.np-item__now.sale {
  color: var(--np-sage);
}
.np-item__was {
  color: var(--np-ink-2);
  font-size: var(--np-font-size-xs);
  text-decoration: line-through;
}

/* ---- Quantity Stepper ---- */
.np-step {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--np-paper-2);
  border-radius: 8px;
  padding: 4px;
}
.np-step button {
  width: 34px;
  height: 34px;
  border: none;
  background: var(--np-paper);
  color: var(--np-ink);
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--np-shadow-sm);
  transition: background .15s ease, color .15s ease;
}
.np-step button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.np-step button:hover:not(:disabled) {
  background: var(--np-line);
}
.np-step .q {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
  color: var(--np-ink);
}

/* Tier-B token bridge — maps legacy --ctp-* to --np-* */
:root, [data-mode] {
  --ctp-base: var(--np-canvas);
  --ctp-mantle: var(--np-paper-2);
  --ctp-crust: var(--np-paper-3);
  --ctp-text: var(--np-ink);
  --ctp-subtext0: var(--np-ink-2);
  --ctp-subtext1: var(--np-ink-3);
  --ctp-surface0: var(--np-paper);
  --ctp-surface1: var(--np-paper-2);
  --ctp-surface2: var(--np-paper-3);
  --ctp-overlay0: var(--np-line);
  --ctp-overlay1: var(--np-line-2);
  --ctp-blue: var(--np-info);
  --ctp-green: var(--np-sage);
  --ctp-red: var(--np-danger);
  --ctp-yellow: var(--np-amber);
  --ctp-mauve: var(--np-accent);
  --ctp-peach: var(--np-terra);
}

/* ============================================================================
   CookieConsent v3 — Nordic Pantry re-skin
   Override --cc-* CSS variables set by vendor/cookieconsent/cookieconsent.css.
   Scoped to #cc-main to avoid colliding with :root overrides in the vendor file.
   ============================================================================ */
#cc-main {
  --cc-bg:                          var(--np-paper);
  --cc-primary-color:               var(--np-sage);
  --cc-secondary-color:             var(--np-ink-2);
  --cc-btn-primary-bg:              var(--np-sage);
  --cc-btn-primary-color:           var(--np-paper);
  --cc-btn-primary-border-color:    var(--np-sage);
  --cc-btn-primary-hover-bg:        var(--np-sage-deep);
  --cc-btn-primary-hover-border-color: var(--np-sage-deep);
  --cc-btn-secondary-bg:            var(--np-paper-2);
  --cc-btn-secondary-color:         var(--np-ink);
  --cc-btn-secondary-border-color:  var(--np-line-2);
  --cc-btn-secondary-hover-bg:      var(--np-paper-3);
  --cc-btn-secondary-hover-color:   var(--np-ink);
  --cc-btn-secondary-hover-border-color: var(--np-line-2);
  --cc-text:                        var(--np-ink);
  --cc-separator-border-color:      var(--np-line);
  --cc-toggle-on-bg:                var(--np-sage);
  --cc-toggle-off-bg:               var(--np-ink-3);
  --cc-cookie-category-block-bg:    var(--np-paper-2);
  --cc-cookie-category-block-border: var(--np-line);
  --cc-cookie-category-block-hover-bg: var(--np-paper-3);
  --cc-footer-bg:                   var(--np-paper-2);
  --cc-footer-color:                var(--np-ink-2);
  --cc-footer-border-color:         var(--np-line);
  --cc-overlay-bg:                  rgba(0, 0, 0, .4);
  --cc-font-family:                 var(--np-font-family);
}